/* -------------------------------------------------------------------------
   League Football Site Styles
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Theme Variables
   ------------------------------------------------------------------------- */
:root{
    --bg:#0F1115;
    --panel:#181B22;
    --panel2:#20242D;
    --border:#343A46;
    --text:#F1F3F5;
    --muted:#AAB2C0;
    --gold:#C9A646;
    --good:#4CAF50;
    --bad:#D9534F;
    --input:#0C0E12;
}

/* -------------------------------------------------------------------------
   Base Layout
   ------------------------------------------------------------------------- */
*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:radial-gradient(circle at top, #17202B 0, var(--bg) 45%);
    color:var(--text);
}

.page{
    max-width:1560px;
    margin:0 auto;
    padding:8px;
}

/* -------------------------------------------------------------------------
   Page Heading
   ------------------------------------------------------------------------- */
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:18px;
}

.page-header h1,
h1{
    margin:0 0 8px;
    font-size:28px;
    letter-spacing:.04em;
}

.page-header p{
    margin:0;
    color:var(--muted);
}

.top-actions-buttons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

/* -------------------------------------------------------------------------
   Global Form Controls
   ------------------------------------------------------------------------- */
/***** Shared Inputs *****/
button,
select,
input[type="text"]{
    border:1px solid var(--border);
    background:rgba(12,14,18,.75);
    color:var(--text);
    border-radius:5px;
    min-height:36px;
}

/***** Buttons *****/
button{
    cursor:pointer;
    font-weight:800;
    padding:8px 12px;
}

button:hover{
    border-color:var(--gold);
}

button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

/***** Selects *****/
select{
    width:100%;
    height:38px;
    padding:0 10px;
    transition:border-color .15s, box-shadow .15s;
}

/***** Text Inputs *****/
input[type="text"]{
    width:100%;
    height:38px;
    padding:0 10px;
    font-family:Consolas, monospace;
    text-transform:uppercase;
    transition:border-color .15s, box-shadow .15s;
}

/***** Invalid Fields *****/
input[type="text"].invalid,
.invalid{
    border-color:var(--bad);
    color:var(--bad);
    outline:2px solid transparent;
}

/* -------------------------------------------------------------------------
   Site Header
   ------------------------------------------------------------------------- */
/***** Header Shell *****/
.site-header{
    margin-bottom:22px;
    border:1px solid var(--border);
    border-radius:9px;
    background:linear-gradient(180deg, rgba(32,36,45,.96), rgba(13,16,22,.96));
}

.site-header-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:12px 16px;
}

/***** Logo *****/
.site-logo{
    margin:0;
    color:var(--text);
    font-size:18px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    display:flex;
    align-items:center;
}

.site-logo img{
    display:block;
    max-height:48px;
    width:auto;
}

/***** Desktop Navigation *****/
.site-nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.site-nav a{
    padding:7px 10px;
    border:1px solid var(--border);
    border-radius:5px;
    background:rgba(255,255,255,.02);
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    text-transform:uppercase;
}

.site-nav a:hover,
.site-nav a.active{
    border-color:var(--gold);
    color:var(--gold);
}

/***** Desktop Dropdowns *****/
.site-nav-dropdown{
    position:relative;
    display:flex;
    align-items:center;
}

.site-nav-dropdown > a{
    display:block;
}

.site-nav-dropdown-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    z-index:50;
    min-width:180px;
    padding:8px 6px 6px;
    border:1px solid var(--border);
    border-radius:7px;
    background:linear-gradient(180deg, rgba(24,27,34,.98), rgba(13,16,22,.98));
    box-shadow:0 10px 24px rgba(0,0,0,.28);
}

.site-nav-dropdown:hover .site-nav-dropdown-menu{
    display:block;
}

.site-nav-dropdown-menu a{
    display:block;
    margin:0;
    padding:8px 10px;
    border:0;
    border-radius:5px;
    background:transparent;
}

.site-nav-dropdown-menu a:hover{
    background:rgba(255,255,255,.04);
    color:var(--gold);
}

/* -------------------------------------------------------------------------
   Mobile Navigation
   ------------------------------------------------------------------------- */
/***** Hamburger *****/
.site-hamburger{
    display:none;
    width:40px;
    height:36px;
    border:1px solid var(--border);
    border-radius:5px;
    background:rgba(255,255,255,.02);
    padding:0;
    cursor:pointer;
}

.site-hamburger span{
    display:block;
    width:18px;
    height:2px;
    background:var(--text);
    border-radius:2px;
}

.site-hamburger span + span{
    margin-top:4px;
}

/***** Mobile Menu Shell *****/
.site-mobile-menu{
    display:none;
    margin:-12px 0 22px;
    border:1px solid var(--border);
    border-top:0;
    border-radius:0 0 9px 9px;
    background:linear-gradient(180deg, rgba(24,27,34,.98), rgba(13,16,22,.98));
    padding:10px;
}

.site-mobile-menu.is-open{
    display:block;
}

/***** Mobile Links *****/
.site-mobile-menu a,
.site-mobile-dropdown-toggle{
    display:block;
    width:100%;
    min-height:36px;
    padding:10px;
    border:1px solid var(--border);
    border-radius:5px;
    background:rgba(255,255,255,.02);
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    font-family:inherit;
    line-height:1.2;
    text-align:left;
    text-decoration:none;
    text-transform:uppercase;
}

.site-mobile-menu a:hover,
.site-mobile-menu a.active,
.site-mobile-dropdown-toggle:hover{
    border-color:var(--gold);
    color:var(--gold);
}

.site-mobile-menu a + a,
.site-mobile-menu a + .site-mobile-dropdown,
.site-mobile-dropdown + a{
    margin-top:8px;
}

/***** Mobile Dropdowns *****/
.site-mobile-dropdown-menu{
    display:none;
    margin-top:8px;
    padding-left:12px;
}

.site-mobile-dropdown-menu a + a{
    margin-top:8px;
}

.site-mobile-dropdown.is-open .site-mobile-dropdown-menu{
    display:block;
}

/* -------------------------------------------------------------------------
   Kit Builder Page
   ------------------------------------------------------------------------- */
/***** Page Shell *****/
.kit-builder-page{
    width:100%;
    max-width:none;
    margin:0;
    padding:0 0 40px;
}

/***** Kit Grid *****/
.kit-builder-page .kit-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
}

/***** Kit Cards *****/
.kit-builder-page .kit-card{
    border:1px solid var(--border);
    border-radius:12px;
    background:linear-gradient(180deg, rgba(31,36,48,.98), rgba(13,17,25,.98));
    padding:18px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.22);
}

.kit-builder-page .kit-card:hover{
    border-color:#4A5362;
}

.kit-builder-page .kit-card h2{
    margin:0 0 14px;
    font-size:22px;
    line-height:1.2;
    text-align:left;
    text-transform:uppercase;
    letter-spacing:.04em;
}

/***** Kit Body Layout *****/
.kit-builder-page .kit-body{
    display:grid;
    grid-template-columns:440px minmax(0, 1fr);
    gap:22px;
    align-items:start;
}

.kit-builder-page .kit-side{
    min-width:0;
    display:flex;
    flex-direction:column;
}

/* -------------------------------------------------------------------------
   Kit Builder Preview
   ------------------------------------------------------------------------- */
/***** Preview Wrap *****/
.kit-builder-page .preview-wrap{
    width:100%;
    min-height:860px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
    background:radial-gradient(circle at 50% 25%, rgba(255,255,255,.04), rgba(0,0,0,.16) 45%, rgba(0,0,0,.25));
    padding:22px 10px;
    overflow:hidden;
}

/***** Player Canvas *****/
.kit-builder-page .kit-preview-player{
    position:relative;
    width:400px;
    height:800px;
    flex:0 0 auto;
}

/***** Player Layers *****/
.kit-builder-page .player-layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    pointer-events:none;
}

.kit-builder-page .kit-colour{
    background:var(--kit-colour);
    mask:var(--kit-mask) center/contain no-repeat;
    -webkit-mask:var(--kit-mask) center/contain no-repeat;
}

.kit-builder-page .kit-detail{
    mix-blend-mode:multiply;
    opacity:1;
}

/***** Trim Layers *****/
.kit-builder-page .trim-layer{
    z-index:45;
}

/***** Badge *****/
.kit-builder-page .club-badge{
    position:absolute;
    width:8.2%;
    height:auto;
    aspect-ratio:1 / 1;
    object-fit:contain;
    display:block;
    pointer-events:none;
    z-index:56;
    transform:translate(-55%, -55%);
}

.kit-builder-page .badge-left{
    left:42%;
    top:27.5%;
}

.kit-builder-page .badge-right{
    left:59.8%;
    top:27.5%;
}

.kit-builder-page .badge-center{
    left:51%;
    top:28.9%;
}

/***** Brand *****/
.kit-builder-page .club-brand{
    position:absolute;
    width:7.2%;
    height:auto;
    aspect-ratio:1 / 1;
    pointer-events:none;
    z-index:52;
    transform:translate(-55%, -55%);
}

.kit-builder-page .brand-left{
    left:42%;
    top:27.5%;
}

.kit-builder-page .brand-right{
    left:59.8%;
    top:27.5%;
}

.kit-builder-page .brand-center{
    left:51%;
    top:25%;
}

.kit-builder-page .brand-layer{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    pointer-events:none;
}

.kit-builder-page .brand-fill-layer{
    z-index:2;
}

/***** Sponsor *****/
.kit-builder-page .club-sponsor-layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    pointer-events:none;
    z-index:52;
    transform:none;
}

.kit-builder-page .sponsor-layer{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    pointer-events:none;
}

.kit-builder-page .sponsor-fill-layer{
    z-index:2;
}

/***** Brand Outline *****/
.kit-builder-page .brand-outline-layer{
    display:none;
    z-index:1;
    opacity:.40;
}

.kit-builder-page .kit-preview-player.brand-outline-enabled .brand-outline-layer{
    display:block;
}

.kit-builder-page .brand-outline-n,
.kit-builder-page .sponsor-outline-n{ transform:translateY(-1px); }

.kit-builder-page .brand-outline-e,
.kit-builder-page .sponsor-outline-e{ transform:translateX(1px); }

.kit-builder-page .brand-outline-s,
.kit-builder-page .sponsor-outline-s{ transform:translateY(1px); }

.kit-builder-page .brand-outline-w,
.kit-builder-page .sponsor-outline-w{ transform:translateX(-1px); }

.kit-builder-page .brand-outline-ne,
.kit-builder-page .sponsor-outline-ne{ transform:translate(1px,-1px); }

.kit-builder-page .brand-outline-se,
.kit-builder-page .sponsor-outline-se{ transform:translate(1px,1px); }

.kit-builder-page .brand-outline-sw,
.kit-builder-page .sponsor-outline-sw{ transform:translate(-1px,1px); }

.kit-builder-page .brand-outline-nw,
.kit-builder-page .sponsor-outline-nw{ transform:translate(-1px,-1px); }


/* -------------------------------------------------------------------------
   Matchday Kit Preview
   ------------------------------------------------------------------------- */

/***** Preview Wrapper *****/
.kit-builder-page .matchday-kit-preview{
    margin:0 0 22px;
    border:1px solid var(--border);
    border-radius:9px;
    background:linear-gradient(180deg, rgba(32,36,45,.96), rgba(13,16,22,.96));
    padding:18px;
}

/***** Team Bar *****/
.kit-builder-page .matchday-team-bar{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid var(--match-secondary);
    border-radius:7px;
    background:var(--match-primary);
    color:var(--match-secondary);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 18px rgba(0,0,0,.22);
}

/***** Team Name *****/
.kit-builder-page .matchday-team-bar span{
    font-size:14px;
    font-weight:900;
    line-height:1;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:.08em;
    text-shadow:1px 1px 0 var(--match-shadow);
}

/* -------------------------------------------------------------------------
   Kit Builder Controls
   ------------------------------------------------------------------------- */
/***** Controls Grid *****/
.kit-builder-page .controls{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:18px;
    row-gap:14px;
    align-items:start;
}

/***** Control Rows *****/
.kit-builder-page .field,
.kit-builder-page .template-row{
    min-width:0;
}

.kit-builder-page label{
    display:block;
    margin:0 0 6px;
    font-size:11px;
    font-weight:900;
    color:var(--text);
    text-transform:uppercase;
    letter-spacing:.04em;
}

.kit-builder-page select,
.kit-builder-page input[type="text"],
.kit-builder-page button{
    height:38px;
}

/***** Template Controls *****/
.kit-builder-page .template-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:8px;
}

.kit-builder-page .template-buttons button{
    width:100%;
}

/***** Colour Controls *****/
.kit-builder-page .colour-inputs{
    display:grid;
    grid-template-columns:44px minmax(0, 1fr);
    gap:8px;
    align-items:center;
}

.kit-builder-page input[type="color"]{
    width:44px;
    height:38px;
    padding:2px;
    border:1px solid #4A5362;
    border-radius:5px;
    background:var(--input);
    cursor:pointer;
}

/***** Checkbox Control *****/
.kit-builder-page .checkbox-field{
    min-width:0;
}

.kit-builder-page .checkbox-control{
    min-height:38px;
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    padding:0 10px;
    border:1px solid var(--border);
    border-radius:5px;
    background:rgba(12,14,18,.75);
    cursor:pointer;
}

.kit-builder-page .checkbox-control input{
    width:16px;
    height:16px;
    margin:0;
    accent-color:var(--gold);
}

.kit-builder-page .checkbox-control span{
    color:var(--text);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}

/***** Kit Action Buttons *****/
.kit-builder-page .kit-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:18px;
    width:100%;
}

.kit-builder-page .kit-actions button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:42px;
    min-height:42px;
    max-height:42px;
    margin:0;
    padding:0 14px;
    box-sizing:border-box;
    line-height:1;
}

.kit-builder-page .confirm{
    background:linear-gradient(180deg, #2E8B45, #237236);
    border-color:#3EAA58;
}

.kit-builder-page .reset{
    background:rgba(32,36,45,.9);
}

/***** Save Status *****/
.kit-builder-page .status{
    display:block;
    margin:8px 0 0;
    padding:0;
    min-height:18px;
    color:var(--muted);
    font-size:12px;
    line-height:18px;
    text-align:center;
    white-space:nowrap;
}

.kit-builder-page .status.saved{
    color:var(--good);
    font-weight:900;
}



/* -------------------------------------------------------------------------
   Kit Builder Output Panel
   ------------------------------------------------------------------------- */
/***** Panel Layout *****/
.kit-builder-page .bottom-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    margin-top:18px;
}

.kit-builder-page .panel{
    border:1px solid var(--border);
    border-radius:9px;
    background:rgba(24,27,34,.9);
    padding:16px;
}

.kit-builder-page .panel h2{
    margin:0 0 12px;
    font-size:18px;
    text-transform:uppercase;
}

/***** JSON Preview *****/
.kit-builder-page pre{
    margin:0;
    min-height:150px;
    overflow:auto;
    color:#9BE37D;
    background:#0C0E12;
    border:1px solid #2F3540;
    border-radius:6px;
    padding:12px;
    font-family:Consolas, monospace;
    font-size:13px;
    white-space:pre-wrap;
}

/* -------------------------------------------------------------------------
   Site Footer
   ------------------------------------------------------------------------- */
/***** Footer Shell *****/
.site-footer{
    margin-top:22px;
    border:1px solid var(--border);
    border-radius:9px;
    background:linear-gradient(180deg, rgba(32,36,45,.96), rgba(13,16,22,.96));
}

.site-footer-inner{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:12px 16px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}

/* -------------------------------------------------------------------------
   Responsive Layout
   ------------------------------------------------------------------------- */
/***** Tablet *****/
@media (max-width:1100px){
    .kit-builder-page .kit-body{
        grid-template-columns:1fr;
    }

    .kit-builder-page .preview-wrap{
        min-height:820px;
    }
}

/***** Mobile *****/
@media (max-width:760px){
    .page{
        padding:16px;
    }

    .page-header{
        flex-direction:column;
    }

    .site-header-inner{
        align-items:center;
    }

    .site-nav{
        display:none;
    }

    .site-hamburger{
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
    }

    .kit-builder-page .preview-wrap{
        min-height:auto;
        padding:14px 4px;
    }

    .kit-builder-page .kit-preview-player{
        width:min(100%, 360px);
        height:auto;
        aspect-ratio:1 / 2;
    }

    .kit-builder-page .controls,
    .kit-builder-page .kit-actions{
        grid-template-columns:1fr;
    }
}