/* Login FantaInfinity - light pitch identity. Loaded after every legacy layer. */
html:has(body.login-page),
html body.auth-page.login-page {
    color-scheme: light !important;
    background:
        linear-gradient(90deg, rgba(222,240,218,.98) 0%, rgba(190,220,192,.94) 48%, rgba(137,184,149,.75) 100%),
        url('/img/fantainfinity-login-hero.png') center bottom / cover fixed no-repeat,
        #abcdae !important;
}

html body.auth-page.login-page {
    width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    display: grid !important;
    place-items: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 28px clamp(24px, 5vw, 72px) !important;
}

html body.login-page::before {
    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.46), transparent 24rem),
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 9%, rgba(25,105,48,.045) 9%, rgba(25,105,48,.045) 18%) !important;
}

html body.login-page .login-shell {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    width: min(1180px, 100%) !important;
    min-height: calc(100svh - 56px) !important;
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 470px) !important;
    align-items: center !important;
    gap: clamp(42px, 7vw, 108px) !important;
    padding: 0 !important;
}

html body.login-page .brand {
    max-width: 620px !important;
    margin: 0 !important;
    color: #153a28 !important;
    text-align: left !important;
    text-shadow: none !important;
}

html body.login-page .brand-mark {
    display: grid !important;
    width: 70px !important;
    height: 48px !important;
    margin: 0 0 24px !important;
    place-items: center !important;
    color: #fff !important;
    border: 1px solid #17613e !important;
    border-radius: 999px !important;
    background: linear-gradient(145deg, #26764b, #124d32) !important;
    box-shadow: 0 10px 26px rgba(18,77,50,.22), inset 0 1px rgba(255,255,255,.24) !important;
}

html body.login-page .brand-kicker {
    margin: 0 0 14px !important;
    color: #286d47 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .16em !important;
}

html body.login-page .brand h1 {
    margin: 0 !important;
    color: #153a28 !important;
    font-size: clamp(50px, 6.2vw, 86px) !important;
    font-weight: 900 !important;
    line-height: .94 !important;
    letter-spacing: -.06em !important;
}

html body.login-page .brand h1 span { color: #99680c !important; }

html body.login-page .brand-copy {
    max-width: 560px !important;
    margin: 23px 0 0 !important;
    color: #365b46 !important;
    font-size: clamp(16px, 1.45vw, 20px) !important;
    font-weight: 600 !important;
}

html body.login-page .brand-features { gap: 9px !important; margin-top: 26px !important; }
html body.login-page .brand-features span {
    color: #244a36 !important;
    border: 1px solid #78a985 !important;
    background: rgba(245,252,241,.82) !important;
    box-shadow: 0 6px 15px rgba(35,83,48,.08) !important;
    backdrop-filter: none !important;
}
html body.login-page .brand-features span::before {
    background: #27764a !important;
    box-shadow: 0 0 0 4px rgba(39,118,74,.12) !important;
}

html body.login-page .login-card {
    position: relative !important;
    padding: clamp(28px, 3.2vw, 42px) !important;
    overflow: hidden !important;
    color: #173027 !important;
    border: 1px solid #6d9e79 !important;
    border-top: 5px solid #c7982c !important;
    border-radius: 26px !important;
    background: linear-gradient(145deg, rgba(253,255,249,.98), rgba(231,243,227,.98)) !important;
    box-shadow: 0 28px 70px rgba(27,74,41,.22), inset 0 1px rgba(255,255,255,.92) !important;
    backdrop-filter: none !important;
}

html body.login-page .login-card::after {
    content: "";
    position: absolute;
    top: -58px;
    right: -58px;
    width: 160px;
    height: 160px;
    border: 22px solid rgba(40,119,72,.06);
    border-radius: 50%;
    pointer-events: none;
}

html body.login-page .login-card > * { position: relative; z-index: 1; }
html body.login-page .login-card__header { margin-bottom: 26px !important; }
html body.login-page .login-card__eyebrow {
    color: #8b620d !important;
    font-size: 10px !important;
    font-weight: 950 !important;
}
html body.login-page .login-card__header h2 {
    margin: 8px 0 7px !important;
    color: #173027 !important;
    font-size: clamp(25px, 2.2vw, 33px) !important;
}
html body.login-page .login-card__header p,
html body.login-page .login-note {
    color: #5a6f64 !important;
}

html body.login-page label {
    margin-bottom: 8px !important;
    color: #39594a !important;
    font-size: 10px !important;
    font-weight: 950 !important;
}

html body.login-page input[type="text"],
html body.login-page input[type="password"] {
    min-height: 54px !important;
    padding: 12px 14px !important;
    color: #173027 !important;
    caret-color: #1f7047 !important;
    border: 1px solid #8eb49a !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: inset 0 1px 3px rgba(24,72,40,.07) !important;
}

html body.login-page input:focus {
    border-color: #27784b !important;
    outline: 3px solid rgba(39,120,75,.16) !important;
    background: #fff !important;
}

html body.login-page .primary-action,
html body.login-page .secondary-action {
    min-height: 54px !important;
    border-radius: 13px !important;
}

html body.login-page .primary-action {
    color: #fff !important;
    border: 1px solid #155937 !important;
    background: linear-gradient(135deg, #267a4c, #125738) !important;
    box-shadow: 0 12px 25px rgba(22,94,58,.24) !important;
}
html body.login-page .primary-action:hover {
    background: linear-gradient(135deg, #2d8957, #176642) !important;
    box-shadow: 0 15px 28px rgba(22,94,58,.28) !important;
}

html body.login-page .secondary-action {
    color: #3f2d08 !important;
    border: 1px solid #c4a04a !important;
    background: linear-gradient(145deg, #fff7d7, #eed99a) !important;
}
html body.login-page .secondary-action:hover {
    color: #2f2105 !important;
    border-color: #a67b14 !important;
    background: #f5e3a9 !important;
}

html body.login-page .login-divider {
    color: #68786f !important;
}
html body.login-page .login-divider::before,
html body.login-page .login-divider::after {
    background: rgba(48,100,64,.2) !important;
}

html body.login-page .flash {
    color: #17402d !important;
    border: 1px solid #77aa88 !important;
    background: #dff1df !important;
}
html body.login-page .flash.error {
    color: #6a1f1b !important;
    border-color: #d3948d !important;
    background: #f8dfdc !important;
}

@media (max-width: 900px) {
    html:has(body.login-page),
    html body.auth-page.login-page {
        background:
            linear-gradient(180deg, rgba(161,198,168,.76) 0, rgba(193,220,191,.96) 28%, rgba(174,207,177,.99) 100%),
            url('/img/fantainfinity-login-hero.png') top center / 100% auto no-repeat,
            #afceb3 !important;
    }
    html body.auth-page.login-page {
        place-items: start center !important;
        padding: 24px 18px !important;
    }
    html body.login-page .login-shell {
        width: min(520px, 100%) !important;
        min-height: auto !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 0 !important;
    }
    html body.login-page .brand { text-align: center !important; }
    html body.login-page .brand-mark { width: 58px !important; height: 40px !important; margin: 0 auto 12px !important; font-size: 37px !important; }
    html body.login-page .brand-kicker { margin-bottom: 7px !important; font-size: 9px !important; }
    html body.login-page .brand h1 { font-size: clamp(40px, 12vw, 58px) !important; }
    html body.login-page .brand-copy,
    html body.login-page .brand-features { display: none !important; }
}

@media (max-width: 560px) {
    html body.auth-page.login-page { padding: 18px 12px 22px !important; }
    html body.login-page .login-shell { gap: 14px !important; }
    html body.login-page .login-card { padding: 22px 18px !important; border-radius: 21px !important; }
    html body.login-page .login-card__header { margin-bottom: 19px !important; }
    html body.login-page .login-card__header h2 { font-size: 24px !important; }
    html body.login-page .login-card__header p { font-size: 12px !important; }
    html body.login-page .field { margin-bottom: 12px !important; }
    html body.login-page input[type="text"],
    html body.login-page input[type="password"],
    html body.login-page .primary-action,
    html body.login-page .secondary-action { min-height: 50px !important; }
    html body.login-page .login-divider { margin: 15px 0 !important; }
}

/* v2.1 mobile: il campo torna protagonista; solo il form usa il verde profondo. */
@media (max-width: 900px) {
    html:has(body.login-page),
    html body.auth-page.login-page {
        background:
            linear-gradient(180deg, rgba(2,12,8,.12) 0%, rgba(2,13,8,.30) 38%, rgba(2,13,8,.58) 74%, rgba(2,13,8,.78) 100%),
            url('/img/fantainfinity-login-hero.png') center top / cover fixed no-repeat,
            #06180f !important;
    }
    html body.login-page::before {
        background:linear-gradient(180deg,transparent 0 42%,rgba(2,13,8,.18) 68%,rgba(2,13,8,.42) 100%)!important;
    }
    html body.auth-page.login-page {
        padding:0 14px 24px!important;
    }
    html body.login-page .login-shell {
        gap:16px!important;
        padding-top:clamp(116px,30vw,168px)!important;
    }
    html body.login-page .brand-mark {
        color:#f2cf72!important;
        border-color:rgba(236,205,118,.56)!important;
        background:rgba(5,34,21,.82)!important;
        box-shadow:0 9px 24px rgba(0,0,0,.3)!important;
    }
    html body.login-page .brand-kicker {
        color:#b9e4c4!important;
        text-shadow:0 2px 9px rgba(0,0,0,.72)!important;
    }
    html body.login-page .brand h1 {
        color:#fff!important;
        text-shadow:0 3px 16px rgba(0,0,0,.68)!important;
    }
    html body.login-page .brand h1 span {color:#f1cd68!important}

    html body.login-page .login-card {
        color:#f5fbf6!important;
        border-color:#4f8867!important;
        border-top-color:#d0aa45!important;
        background:
            radial-gradient(circle at 100% 0,rgba(213,177,76,.12),transparent 13rem),
            linear-gradient(145deg,#113c27,#082b1c 58%,#061f15)!important;
        box-shadow:0 24px 55px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.08)!important;
    }
    html body.login-page .login-card::after {border-color:rgba(218,184,88,.075)!important}
    html body.login-page .login-card__eyebrow {color:#e4bd57!important}
    html body.login-page .login-card__header h2 {color:#fff!important}
    html body.login-page .login-card__header p,
    html body.login-page .login-note {color:#b8cfc0!important}
    html body.login-page label {color:#d3e4d8!important}
    html body.login-page input[type="text"],
    html body.login-page input[type="password"] {
        color:#142d22!important;
        border-color:#7fac8c!important;
        background:#f8fcf6!important;
        box-shadow:inset 0 1px 3px rgba(5,35,20,.1)!important;
    }
    html body.login-page input:focus {
        border-color:#d3ad4a!important;
        outline-color:rgba(211,173,74,.2)!important;
        background:#fff!important;
    }
    html body.login-page .primary-action {
        color:#092115!important;
        border-color:#80bd8d!important;
        background:linear-gradient(135deg,#a9d69f,#64ad78)!important;
        box-shadow:0 11px 24px rgba(0,0,0,.25)!important;
    }
    html body.login-page .secondary-action {
        color:#f7e8b4!important;
        border-color:#8b783d!important;
        background:rgba(216,181,83,.09)!important;
    }
    html body.login-page .secondary-action:hover {color:#fff1be!important;background:rgba(216,181,83,.16)!important}
    html body.login-page .login-divider {color:#a9c0b1!important}
    html body.login-page .login-divider::before,
    html body.login-page .login-divider::after {background:rgba(191,215,197,.18)!important}
}

@media (max-width: 560px) {
    html body.login-page .login-shell {padding-top:112px!important}
    html body.login-page .login-card {padding:22px 18px!important}
}

/* v2.2 mobile: immagine 16:9 completa, senza lo zoom provocato da cover. */
@media (max-width: 900px) {
    html:has(body.login-page),
    html body.auth-page.login-page {
        background:
            linear-gradient(180deg,rgba(2,12,8,.03) 0%,rgba(2,13,8,.14) 62%,#06180f 100%) top center / 100% min(56.25vw,506px) no-repeat,
            url('/img/fantainfinity-login-hero.png') top center / 100% auto no-repeat,
            #06180f !important;
    }
    html body.login-page::before {
        background:linear-gradient(180deg,transparent 0 min(39vw,350px),rgba(2,13,8,.34) min(52vw,468px),rgba(2,13,8,.62) min(66vw,594px))!important;
    }
    html body.login-page .login-shell {
        padding-top:clamp(92px,24vw,172px)!important;
    }
}

@media (max-width: 560px) {
    html body.auth-page.login-page {padding-inline:12px!important}
    html body.login-page .login-shell {gap:12px!important;padding-top:clamp(82px,23vw,124px)!important}
    html body.login-page .brand-mark {width:48px!important;height:34px!important;margin-bottom:8px!important;font-size:31px!important}
    html body.login-page .brand-kicker {margin-bottom:4px!important;font-size:8px!important}
    html body.login-page .brand h1 {font-size:clamp(35px,10.5vw,48px)!important}
}

/* v2.3 desktop: lo stadio resta protagonista e il login diventa il vero spogliatoio del club. */
@media (min-width: 901px) {
    html:has(body.login-page),
    html body.auth-page.login-page {
        background:
            linear-gradient(90deg,rgba(2,15,9,.34) 0%,rgba(3,20,12,.19) 50%,rgba(2,14,9,.48) 100%),
            url('/img/fantainfinity-login-hero.png') center 62% / cover fixed no-repeat,
            #071b11 !important;
    }
    html body.login-page::before {
        background:
            radial-gradient(circle at 18% 15%,rgba(255,210,92,.10),transparent 26rem),
            linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,18,10,.30)) !important;
    }
    html body.login-page .brand {color:#fff!important;text-shadow:0 4px 22px rgba(0,0,0,.72)!important}
    html body.login-page .brand-kicker {color:#c6f2d0!important;text-shadow:0 2px 10px rgba(0,0,0,.8)!important}
    html body.login-page .brand h1 {color:#fff!important;text-shadow:0 4px 22px rgba(0,0,0,.72)!important}
    html body.login-page .brand h1 span {color:#ffd463!important}
    html body.login-page .brand-copy {color:#e3f3e7!important;text-shadow:0 2px 9px rgba(0,0,0,.78)!important}
    html body.login-page .brand-features span {
        color:#f5fff7!important;border-color:rgba(196,235,205,.48)!important;
        background:rgba(5,38,23,.72)!important;box-shadow:0 8px 22px rgba(0,0,0,.25)!important;
        backdrop-filter:blur(8px)!important;
    }
    html body.login-page .login-card {
        color:#f5fbf6!important;border-color:#4f8867!important;border-top-color:#e2ba54!important;
        background:radial-gradient(circle at 100% 0,rgba(226,186,84,.14),transparent 14rem),linear-gradient(145deg,rgba(17,60,39,.97),rgba(6,31,21,.98))!important;
        box-shadow:0 30px 72px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.09)!important;
    }
    html body.login-page .login-card::after {border-color:rgba(234,201,105,.09)!important}
    html body.login-page .login-card__eyebrow {color:#e8c45e!important}
    html body.login-page .login-card__header h2 {color:#fff!important}
    html body.login-page .login-card__header p,
    html body.login-page .login-note {color:#bcd2c4!important}
    html body.login-page label {color:#d8e7dc!important}
    html body.login-page input[type="text"],
    html body.login-page input[type="password"] {color:#142d22!important;border-color:#86ad91!important;background:#fbfefb!important}
    html body.login-page .login-divider {color:#b7cabd!important}
    html body.login-page .login-divider::before,
    html body.login-page .login-divider::after {background:rgba(211,232,217,.20)!important}
}