/* =========================================================
   WOW STORE ESPORTS - HEADER UNIFICATO
   Home e Player Cards usano lo stesso identico componente.
   ========================================================= */

.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    width: 100% !important;
    min-height: 82px !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(5,7,8,.97) !important;
    backdrop-filter: blur(18px) !important;
}

.header-inner {
    width: min(1500px, calc(100% - 40px)) !important;
    min-height: 82px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(420px, 1fr) auto auto !important;
    grid-template-areas: "brand nav actions account" !important;
    align-items: center !important;
    column-gap: 22px !important;
}

.brand {
    grid-area: brand !important;
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.brand-symbol {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
}

.brand-text strong {
    font-size: 24px !important;
    white-space: nowrap !important;
}

.brand-text span {
    font-size: 15px !important;
    letter-spacing: 4px !important;
    white-space: nowrap !important;
}

.main-nav {
    grid-area: nav !important;
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 24px !important;
    min-width: 0 !important;
}

.main-nav a {
    white-space: nowrap !important;
}

.header-actions {
    grid-area: actions !important;
    position: static !important;
    width: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;
}

.esports-account-area {
    grid-area: account !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    z-index: 150 !important;
}

.logged-account-box {
    position: relative !important;
    width: auto !important;
    max-width: none !important;
}

.logged-account-controls {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
}

.notification-bell-button {
    appearance: none !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #8c1b1b !important;
    border-right: 0 !important;
    border-radius: 7px 0 0 7px !important;
    color: #efc44e !important;
    background: linear-gradient(180deg, rgba(37,11,11,.97), rgba(10,10,10,.97)) !important;
    box-shadow: 0 0 14px rgba(158,25,25,.20) !important;
    font-size: 19px !important;
}

.notification-bell-button ion-icon {
    color: #efc44e !important;
}

.account-menu-button {
    width: auto !important;
    min-width: 126px !important;
    max-width: 150px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 0 7px 7px 0 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

#accountUsername {
    display: block !important;
    max-width: 92px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.account-status-dot {
    width: 8px !important;
    height: 8px !important;
    flex: 0 0 8px !important;
}

.mobile-menu-button {
    display: none !important;
}

.mobile-language-menu {
    display: none !important;
}

/* Il vecchio user-area non deve occupare spazio */
.user-area[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .site-header {
        min-height: 84px !important;
    }

    .header-inner {
        width: 100% !important;
        min-height: 84px !important;
        padding: 10px 12px !important;
        grid-template-columns: minmax(0, 1fr) auto 42px !important;
        grid-template-areas: "brand account actions" !important;
        column-gap: 8px !important;
    }

    .brand {
        gap: 8px !important;
    }

    .brand-symbol {
        width: 44px !important;
        height: 44px !important;
        flex-basis: 44px !important;
        font-size: 24px !important;
    }

    .brand-text strong {
        font-size: 19px !important;
    }

    .brand-text span {
        font-size: 11px !important;
        letter-spacing: 3px !important;
    }

    .esports-account-area {
        justify-self: end !important;
    }

    .logged-account-box {
        max-width: 170px !important;
    }

    .notification-bell-button {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    .account-menu-button {
        min-width: 104px !important;
        max-width: 128px !important;
        width: 128px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
    }

    #accountUsername {
        max-width: 72px !important;
    }

    .header-actions {
        width: 42px !important;
        justify-content: flex-end !important;
    }

    .header-actions > .language-switcher,
    .header-actions > .back-button,
    .header-actions > .user-area {
        display: none !important;
    }

    .mobile-menu-button {
        appearance: none !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        border-radius: 6px !important;
        color: #fff !important;
        background: #111517 !important;
        font-size: 27px !important;
    }

    .main-nav {
        position: absolute !important;
        top: 84px !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 9999 !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        max-height: calc(100vh - 84px) !important;
        overflow-y: auto !important;
        padding: 10px 14px 18px !important;
        border-bottom: 1px solid rgba(255,255,255,.12) !important;
        background: rgba(5,7,8,.995) !important;
        box-shadow: 0 20px 35px rgba(0,0,0,.55) !important;
    }

    .main-nav.is-open {
        display: flex !important;
    }

    .main-nav a {
        width: 100% !important;
        padding: 15px 10px !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        color: #d6d6d6 !important;
        font-size: 16px !important;
        text-align: left !important;
    }

    .main-nav a::after {
        display: none !important;
    }

    .main-nav a.active {
        color: #fff !important;
        background: rgba(209,38,38,.16) !important;
        border-left: 3px solid #d12626 !important;
    }

    .mobile-language-menu {
        display: block !important;
        width: 100% !important;
        padding: 16px 10px 2px !important;
    }

    .mobile-language-title {
        display: block !important;
        margin-bottom: 9px !important;
        color: #8c9296 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
    }

    .mobile-language-switcher {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
    }

    .mobile-language-switcher .language-button {
        width: 100% !important;
        height: 38px !important;
        border: 1px solid rgba(255,255,255,.15) !important;
        background: #111517 !important;
    }

    .mobile-language-switcher .language-button.active {
        background: linear-gradient(145deg, #d62b2b, #720909) !important;
    }

    .account-dropdown,
    .notification-panel {
        right: 0 !important;
        width: min(310px, calc(100vw - 24px)) !important;
    }
}

@media (max-width: 430px) {
    .header-inner {
        padding: 9px 8px !important;
        grid-template-columns: minmax(138px, 1fr) minmax(0, 164px) 40px !important;
        column-gap: 5px !important;
    }

    .brand-symbol {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
        font-size: 22px !important;
    }

    .brand-text strong {
        font-size: 17px !important;
    }

    .brand-text span {
        font-size: 9px !important;
        letter-spacing: 2.5px !important;
    }

    .logged-account-box {
        max-width: 164px !important;
    }

    .notification-bell-button {
        width: 34px !important;
        min-width: 34px !important;
    }

    .account-menu-button {
        width: 116px !important;
        min-width: 116px !important;
        max-width: 116px !important;
        padding: 0 6px !important;
        gap: 5px !important;
        font-size: 10px !important;
    }

    #accountUsername {
        max-width: 65px !important;
    }

    .mobile-menu-button {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }
}

@media (max-width: 370px) {
    .brand-text strong {
        font-size: 15px !important;
    }

/* =========================================================
   COMPONENTE ACCOUNT E LINGUA — STILI CONDIVISI
   ========================================================= */

.guest-account-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-login-btn,
.account-register-btn {
    min-height: 40px;
    padding: 0 17px;

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

    border-radius: 7px;

    color: #ffffff !important;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.account-login-btn {
    border: 1px solid #8d1d1d;
    background: rgba(10, 10, 10, 0.94);
}

.account-register-btn {
    border: 1px solid #b52a2a;

    background:
        linear-gradient(
            180deg,
            #a42121,
            #651010
        );

    box-shadow:
        0 0 14px rgba(180, 30, 30, 0.28);
}

.account-login-btn:hover,
.account-register-btn:hover {
    transform: translateY(-1px);

    box-shadow:
        0 0 18px rgba(200, 38, 38, 0.42);
}

.account-menu-button {
    appearance: none !important;

    border: 1px solid #8c1b1b !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            rgba(37, 11, 11, 0.97),
            rgba(10, 10, 10, 0.97)
        ) !important;

    box-shadow:
        0 0 17px rgba(158, 25, 25, 0.25) !important;

    font-family: Arial, sans-serif;
    font-weight: 800 !important;

    cursor: pointer;
}

.account-status-dot {
    border-radius: 50%;

    background: #40d86b;

    box-shadow:
        0 0 8px rgba(64, 216, 107, 0.85);
}

.account-arrow {
    color: #cb3a3a;
    font-size: 9px;
}

.account-dropdown {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 10020;

    width: 230px;
    overflow: hidden;

    border: 1px solid #752020;
    border-radius: 9px;

    background: rgba(10, 10, 10, 0.98);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.6),
        0 0 18px rgba(139, 24, 24, 0.18);
}

.account-dropdown-header {
    padding: 14px 16px;

    display: flex;
    flex-direction: column;
    gap: 4px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);
}

.account-dropdown-header span {
    color: #a93434;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.account-dropdown-header strong {
    color: #ffffff;
    font-size: 15px;
}

.account-dropdown a,
.account-dropdown button {
    appearance: none;

    width: 100%;
    padding: 13px 16px;

    display: block;

    border: 0;
    border-bottom:
        1px solid rgba(255, 255, 255, 0.055);

    color: #dddddd;

    background: transparent;

    font-family: Arial, sans-serif;
    font-size: 13px;
    text-align: left;
    text-decoration: none;

    cursor: pointer;
}

.account-dropdown a:hover,
.account-dropdown button:hover {
    color: #ffffff;
    background: rgba(145, 25, 25, 0.22);
}

#logoutButton {
    color: #ff6d6d !important;
}

.language-switcher {
    display: flex;
    align-items: center;
    gap: 5px;
}

.language-button {
    appearance: none;

    min-width: 35px;
    height: 35px;
    padding: 0 9px;

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

    border:
        1px solid rgba(255, 255, 255, 0.16);
    border-radius: 5px;

    color: #b8bbbe;

    background: #111517;

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.language-button:hover {
    color: #ffffff;
    border-color: rgba(209, 38, 38, 0.65);
}

.language-button.active {
    color: #ffffff;

    border-color: #d12626;

    background:
        linear-gradient(
            145deg,
            #d62b2b,
            #720909
        );

    box-shadow:
        0 0 12px rgba(209, 38, 38, 0.25);
}

.notification-bell-button {
    cursor: pointer !important;
}

#guestAccountButtons[hidden],
#loggedAccountBox[hidden],
#accountDropdown[hidden],
#notificationPanel[hidden],
#notificationBadge[hidden] {
    display: none !important;
}

    .brand-text span {
        font-size: 8px !important;
        letter-spacing: 2px !important;
    }

    .account-menu-button {
        width: 106px !important;
        min-width: 106px !important;
        max-width: 106px !important;
    }

    #accountUsername {
        max-width: 55px !important;
    }
}
/* FIX DEFINITIVO PULSANTE PROFILO HEADER */

.logged-account-controls .account-menu-button {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    border: 1px solid #8c1b1b !important;
    border-left: 0 !important;
    border-radius: 0 7px 7px 0 !important;

    color: #ffffff !important;

    background-color: #0a0a0a !important;
    background-image:
        linear-gradient(
            180deg,
            rgba(37, 11, 11, 0.97),
            rgba(10, 10, 10, 0.97)
        ) !important;

    box-shadow:
        0 0 17px rgba(158, 25, 25, 0.25) !important;

    cursor: pointer !important;
}

.logged-account-controls .account-menu-button span {
    color: inherit;
}

.logged-account-controls #accountUsername {
    color: #ffffff !important;
}

.logged-account-controls .account-arrow {
    color: #cb3a3a !important;
}

/* Pulsanti azione notifiche Team */
.team-notification-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px !important;
}
.team-notification-accept,
.team-notification-reject {
    min-height: 34px !important;
    padding: 0 13px !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-family: "Oswald", Arial, sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    cursor: pointer !important;
}
.team-notification-accept {
    border: 1px solid #39b96a !important;
    background: linear-gradient(180deg,#29995a,#155d35) !important;
}
.team-notification-reject {
    border: 1px solid #c43232 !important;
    background: linear-gradient(180deg,#ad2525,#651010) !important;
}
.team-notification-accept:hover,
.team-notification-reject:hover { transform: translateY(-1px) !important; filter: brightness(1.12) !important; }
.team-notification-accept:disabled,
.team-notification-reject:disabled { opacity: .55 !important; cursor: wait !important; }