/* ==========================================================
   GLORE CONFIGURATOR
========================================================== */

.gf-configurator{
    padding:50px 0;
    background:#f8f8f8;
}

.gf-configurator-container{

    width:min(1400px,92%);
    margin:auto;

    display:grid;
    grid-template-columns:380px 1fr;
    gap:60px;

    align-items:stretch;

}

.gf-left{

    background:#fff;
    border-radius:24px;
     padding:22px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.06);

    position:sticky;
    top:120px;

}

.gf-right{

    display:flex;
    align-items:stretch;
    justify-content:center;

}

.gf-preview{

    width:100%;
    max-width:700px;

    min-height:100%;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#fff;

    border-radius:30px;

    padding:25px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.06);

}

#gf-canvas{

    width:78%;
    height:auto;
    display:block;
    margin:auto;

}

.gf-left h2{

    font-size:34px;
    line-height:1.05;
    margin-bottom:8px;

}

.gf-left p{

    color:#777;
    margin-bottom:16px;
    font-size:15px;

}

.gf-tool-group{

    margin-bottom:18px;

}

.gf-tool-group h4{

    margin-bottom:8px;
    font-size:17px;

}

.gf-colors{

    display:flex;
    gap:12px;

}

.gf-color{

    width:42px;
    height:42px;

    border-radius:50%;

    border:2px solid #ddd;

    cursor:pointer;

    transition:.3s;

}

.gf-color:hover{

    transform:scale(1.1);

}

.white{

    background:#fff;

}

.black{

    background:#111;

}

.red{

    background:#d50000;

}

.blue{

    background:#0066ff;

}

.green{

    background:#00a651;

}

.gf-tool-group input{

    width:100%;

    padding:12px 16px;

    border-radius:12px;

    border:1px solid #ddd;

    font-size:15px;

}

@media(max-width:991px){

.gf-configurator-container{

grid-template-columns:1fr;

}

.gf-left{

position:relative;
top:0;

}

}


.gf-jersey-stage{

    position:relative;

    width:100%;

}

.gf-design-layer{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.gf-logo-layer{

    position:absolute;

    width:90px;

    top:140px;

    left:170px;

    display:none;

}

.gf-team-name{

    position:absolute;

}

.gf-player-number{

    position:absolute;

}


/*=====================================
VIEW BUTTONS
=====================================*/

.gf-view-buttons{

    display:flex;
    gap:12px;

}

.gf-view-btn{

    flex:1;

    padding:12px 16px;

    border:none;

    border-radius:12px;

    background:#f3f3f3;

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}

.gf-view-btn.active{

    background:#111;

    color:#fff;

}


/*=====================================
ACTION BUTTONS
=====================================*/

.gf-action-buttons{

    display:flex;
    gap:12px;
    width:100%;

}

.gf-action-btn{

    flex:1;

    padding:12px 16px;

    border:none;
    border-radius:12px;

    background:#111;
    color:#fff;

    font-size:15px;
    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.gf-action-btn:hover{

    transform:translateY(-2px);

}