/* ===== Global Variables ===== */
:root {
    --team-primary: var(--theme-primary, #B01B1D);
    --team-primary-rgb: var(--theme-primary-rgb, 176, 27, 29);
    --team-secondary: var(--theme-secondary, #440000);
    --team-secondary-rgb: var(--theme-secondary-rgb, 68, 0, 0);
    --team-accent: #ffffff;
    --transition-speed: 0.3s;
    --navbar-height: 50px;
}

html,
body,
* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

/* ===== My Benfica Dashboard ===== */
.my-benfica-dashboard {
    --my-benfica-ink: var(--bs-body-color);
    --my-benfica-muted: var(--bs-secondary-color);
    --my-benfica-line: var(--bs-border-color);
    --my-benfica-soft: var(--bs-tertiary-bg);
    color: var(--my-benfica-ink);
}

.my-benfica-hero {
    position: relative;
    overflow: hidden;
    padding: 1.1rem 1.2rem 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--theme-primary-800) 0%, var(--team-primary) 55%, var(--theme-primary-400) 100%);
    color: #fff;
    box-shadow: 0 0.6rem 1.6rem rgba(var(--team-primary-rgb), 0.28);
}

.my-benfica-hero::before,
.my-benfica-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

.my-benfica-hero::before {
    right: -70px;
    top: -90px;
    width: 240px;
    height: 240px;
}

.my-benfica-hero::after {
    left: -50px;
    bottom: -110px;
    width: 200px;
    height: 200px;
}

.my-benfica-hero > * {
    position: relative;
    z-index: 1;
}

.my-benfica-hero-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.my-benfica-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.2rem;
    color: var(--team-primary);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.my-benfica-hero h1 {
    margin: 0;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0;
}

.my-benfica-hero p {
    margin: 0.2rem 0 0;
    max-width: 48rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    line-height: 1.35;
}

.my-benfica-hero .my-benfica-kicker {
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.12em;
}

.my-benfica-hero-avatar {
    flex: 0 0 auto;
    margin-right: 0.35rem;
}

.my-benfica-hero-avatar img {
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.my-benfica-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.my-benfica-hero-actions .btn {
    padding: 0.35rem 0.65rem;
    font-size: 0.86rem;
}

.my-benfica-stat,
.my-benfica-panel {
    border: 1px solid var(--my-benfica-line);
    border-radius: 1rem;
    background: var(--bs-body-bg);
}

.my-benfica-stat {
    height: 100%;
    min-height: 4.25rem;
    padding: 0.65rem 0.75rem;
}

/* Glassy stat chips on the hero gradient */
.my-benfica-hero .my-benfica-stat {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.my-benfica-stat span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--my-benfica-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.my-benfica-hero .my-benfica-stat span {
    color: rgba(255, 255, 255, 0.82);
}

.my-benfica-stat span i {
    color: var(--team-primary);
}

.my-benfica-hero .my-benfica-stat span i {
    color: var(--theme-accent-300);
}

.my-benfica-stat strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--my-benfica-ink);
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    line-height: 1;
}

.my-benfica-hero .my-benfica-stat strong {
    color: #fff;
}

.my-benfica-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.my-benfica-panel {
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 26px -20px rgba(0, 0, 0, 0.3);
}

.my-benfica-panel-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem 0.5rem;
    border-bottom: 0;
    background: transparent;
    font-weight: 900;
    color: var(--bs-body-color);
}

/* news.php / player.php-style gradient bars + gold icon */
.my-benfica-panel-header::before {
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--slb-red, #C8102E), var(--slb-gold, #F4B223));
}

.my-benfica-panel-header::after {
    content: "";
    flex: 1 1 auto;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--slb-red, #C8102E), var(--slb-gold, #F4B223), rgba(0, 0, 0, 0));
    order: 9;
}

.my-benfica-panel-header > span {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 900;
}

.my-benfica-panel-header i {
    color: var(--slb-gold, #F4B223) !important;
}

/* Fan Zone feature tiles */
.fanzone-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    padding: 0.9rem;
    border: 1px solid var(--my-benfica-line);
    border-radius: 0.9rem;
    background: var(--bs-body-bg);
    color: var(--my-benfica-ink);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.fanzone-tile:hover,
.fanzone-tile:focus {
    color: var(--my-benfica-ink);
    transform: translateY(-3px);
    border-color: rgba(var(--team-primary-rgb), 0.45);
    box-shadow: 0 0.65rem 1.4rem -0.5rem rgba(0, 0, 0, 0.3);
}

.fanzone-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.75rem;
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
}

.fanzone-tile-title {
    font-weight: 800;
    font-size: 0.92rem;
    line-height: 1.2;
}

.fanzone-tile-stat {
    font-size: 0.78rem;
    color: var(--my-benfica-muted);
    line-height: 1.3;
    min-height: 2.1em;
}

.fanzone-tile-cta {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--team-primary);
}

.my-benfica-panel-header a {
    order: 10;
    flex: 0 0 auto;
    color: var(--team-primary);
    font-weight: 800;
    text-decoration: none;
}

.my-benfica-panel-header a:hover,
.my-benfica-panel-header a:focus {
    text-decoration: underline;
}

.my-benfica-list {
    display: grid;
}

.my-benfica-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    color: var(--my-benfica-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    transition: background-color 0.18s ease;
}

.my-benfica-row:last-child {
    border-bottom: 0;
}

.my-benfica-row:hover,
.my-benfica-row:focus {
    color: var(--my-benfica-ink);
    background: var(--bs-tertiary-bg);
}

.my-benfica-row--forum-topic {
    align-items: flex-start;
}

.my-benfica-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.5rem;
    background: var(--my-benfica-soft);
    color: var(--team-primary);
    flex: 0 0 2.15rem;
}

.my-benfica-topic-icon.is-sticky,
.my-benfica-topic-icon.is-manager,
.my-benfica-topic-icon.is-competition {
    color: var(--theme-accent-700);
}

.my-benfica-topic-icon.is-locked {
    color: #6b7280;
}

.my-benfica-topic-icon.is-player,
.my-benfica-topic-icon.is-player-number {
    color: #1d4ed8;
}

.my-benfica-topic-icon.is-match {
    color: var(--theme-success-strong);
}

.my-benfica-topic-icon.is-club {
    color: #0f766e;
}

.my-benfica-topic-icon strong {
    font-size: .9rem;
    line-height: 1;
}

.my-benfica-person-photo {
    flex: 0 0 auto;
}

.my-benfica-row-title {
    display: block;
    max-width: 100%;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-benfica-row--forum-topic .my-benfica-row-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.my-benfica-row-meta {
    display: block;
    max-width: 100%;
    color: var(--my-benfica-muted);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-benfica-empty {
    display: grid;
    justify-items: start;
    gap: 0.45rem;
    padding: 1rem;
    color: var(--my-benfica-muted);
}

.my-benfica-matchup-logos {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 4.6rem;
}

.my-benfica-team-logo {
    width: 1.9rem;
    height: 1.9rem;
    object-fit: contain;
}

.my-benfica-matchup-logos span {
    margin: 0 0.35rem;
    color: var(--my-benfica-muted);
    font-size: 0.58rem;
    font-weight: 850;
    text-transform: uppercase;
}

.my-benfica-actions {
    display: grid;
    gap: 0.55rem;
    padding: 0.95rem;
}

.my-benfica-actions a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--my-benfica-line);
    border-radius: 0.5rem;
    color: var(--my-benfica-ink);
    background: var(--bs-body-bg);
    font-weight: 800;
    text-decoration: none;
}

.my-benfica-actions a:hover,
.my-benfica-actions a:focus {
    border-color: rgba(176, 27, 29, 0.32);
    color: var(--team-primary);
}

.min-w-0 {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .my-benfica-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .my-benfica-hero-main,
    .my-benfica-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .my-benfica-hero-actions .btn {
        width: 100%;
    }
}

/* ===== Predictions Hub ===== */
.predictions-hub {
    --prediction-ink: var(--bs-body-color);
    --prediction-muted: var(--bs-secondary-color);
    --prediction-line: var(--bs-border-color);
    --prediction-soft: var(--bs-tertiary-bg);
    --prediction-gold: var(--theme-accent-700);
    color: var(--prediction-ink);
}

.predictions-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
}

.predictions-hero h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0;
}

.predictions-hero p {
    margin: 0.2rem 0 0;
    max-width: 44rem;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    line-height: 1.35;
}

.predictions-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.2rem;
    color: var(--team-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.predictions-season-filter {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
}

.predictions-season-filter label {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    font-weight: 700;
}

.predictions-season-filter .form-select {
    min-width: 9rem;
}

.predictions-season-filter .form-select,
.predictions-season-filter .btn {
    min-height: 2rem;
}

.prediction-stat-card,
.prediction-match-card,
.prediction-history-item,
.prediction-leaderboard {
    border: 1px solid var(--prediction-line);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
}

.prediction-stat-card {
    height: 100%;
    padding: 0.9rem;
}

.prediction-stat-card span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--prediction-muted);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.prediction-stat-card span i {
    color: var(--team-primary);
}

.prediction-stat-card strong {
    display: block;
    margin-top: 0.4rem;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1;
}

.prediction-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.prediction-section-heading h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.prediction-section-heading span {
    color: var(--prediction-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.predictions-open-list {
    display: grid;
    gap: 0.5rem;
}

.predictions-history-layout {
    margin-top: 0.25rem;
}

.prediction-match-card {
    padding: 0.5rem;
    margin-bottom: 0.9rem;
}

/* Compact variant: when the form sits inside a section card (e.g. Match Hub),
   drop the inner card's own border/padding/margin so it doesn't nest a
   "card-in-a-card" and create wasted space around the form. */
.prediction-match-card-compact {
    border: 0;
    padding: 0;
    margin-bottom: 0;
    background: transparent;
}

.prediction-match-card-compact .prediction-match-card-header {
    margin-bottom: 0.6rem;
}

/* Tighten the section body padding around a compact prediction form */
.card-body:has(> .prediction-match-card-compact) {
    padding: 0.75rem;
}

.prediction-match-card-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.prediction-match-title-row,
.prediction-row-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.prediction-matchup-logos {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.prediction-team-logo {
    width: 2.15rem;
    height: 2.15rem;
    object-fit: contain;
}

.prediction-matchup-vs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.35rem;
    color: var(--prediction-muted);
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
}

.prediction-match-card-header strong {
    display: block;
    font-size: 1.15rem;
}

.prediction-match-label,
.prediction-match-meta {
    display: block;
    color: var(--prediction-muted);
    font-size: 0.8rem;
}

.prediction-status-pill,
.prediction-points-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.2rem;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
}

.prediction-status-pill.is-open {
    background: rgba(25, 135, 84, 0.12);
    color: var(--theme-success-strong);
}

.prediction-status-pill.is-locked {
    background: rgba(108, 117, 125, 0.13);
    color: #495057;
}

.prediction-card-fields .form-label {
    color: var(--prediction-muted);
    font-weight: 700;
}

.prediction-card-fields > [class*="col-"] {
    min-width: 0;
}

.prediction-card-fields .prediction-score-field {
    flex: 0 0 8rem;
    max-width: 8rem;
}

.prediction-card-fields .prediction-player-field {
    flex: 1 1 14rem;
    min-width: 12rem;
}

.prediction-card-fields .prediction-confidence-field {
    flex: 0 0 5.5rem;
    max-width: 5.5rem;
}

.prediction-card-fields .prediction-submit-field {
    flex: 0 0 5rem;
    max-width: 5rem;
}

.prediction-score-input,
.prediction-confidence-input,
.prediction-select {
    border-color: rgba(176, 27, 29, 0.16);
    border-radius: 0.55rem;
}

.prediction-score-input,
.prediction-confidence-input {
    font-weight: 800;
    text-align: center;
}

.prediction-save-btn {
    border: 0;
    border-radius: 0.55rem;
    background: var(--theme-success);
    color: #fff;
    font-weight: 800;
}

.prediction-save-btn:hover,
.prediction-save-btn:focus {
    background: var(--theme-success-strong);
    color: #fff;
}

.prediction-community-panel {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(176, 27, 29, 0.12);
    font-size: 0.86rem;
}

.prediction-community-header,
.prediction-outcome-split,
.prediction-top-scores,
.prediction-community-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: 0.45rem;
}

.prediction-community-header span,
.prediction-outcome-split span,
.prediction-top-scores strong {
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: var(--prediction-soft);
    color: var(--prediction-ink);
    font-weight: 700;
}

.prediction-community-header span:first-child,
.prediction-top-scores > span {
    padding-left: 0;
    background: transparent;
    color: var(--prediction-muted);
}

.prediction-outcome-split .is-benfica {
    background: rgba(25, 135, 84, 0.12);
    color: var(--theme-success-strong);
}

.prediction-outcome-split .is-draw {
    background: rgba(108, 117, 125, 0.13);
    color: #495057;
}

.prediction-outcome-split .is-opponent {
    background: rgba(33, 37, 41, 0.1);
    color: #212529;
}

.prediction-list {
    display: grid;
    gap: 0.6rem;
}

.prediction-history-item {
    display: block;
    padding: 0.85rem 0.95rem;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.prediction-history-item:hover,
.prediction-history-item:focus {
    color: inherit;
    background: var(--bs-tertiary-bg);
    border-color: rgba(var(--team-primary-rgb), 0.32);
}

.prediction-leaderboard {
    overflow: hidden;
}

.prediction-leader-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.prediction-leader-row:last-child {
    border-bottom: 0;
}

.prediction-points-pill {
    background: var(--team-primary);
    color: #fff;
}

.prediction-missing-reminder {
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(201, 151, 43, 0.35);
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(201, 151, 43, 0.12), rgba(176, 27, 29, 0.04));
}

.prediction-missing-reminder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--theme-accent-800);
}

.prediction-missing-reminder p {
    margin: 0;
    font-size: 0.9rem;
}

.prediction-missing-reminder-list {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.prediction-missing-reminder-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.55);
    color: inherit;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
}

.prediction-missing-reminder-list a:hover,
.prediction-missing-reminder-list a:focus {
    background: rgba(255, 255, 255, 0.8);
    color: inherit;
}

.prediction-missing-reminder-list a span {
    color: var(--prediction-muted);
    font-weight: 600;
    white-space: nowrap;
}

.prediction-mini-boards {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.prediction-mini-board {
    border: 1px solid var(--prediction-line);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    padding: 0.65rem 0.75rem;
}

.prediction-mini-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.prediction-mini-board-head strong {
    font-size: 0.9rem;
}

.prediction-mini-board-head span {
    color: var(--prediction-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.prediction-mini-board-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.prediction-mini-board-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.prediction-mini-board-row > div:first-child {
    min-width: 0;
}

.prediction-mini-board-row > div:first-child strong {
    display: block;
    font-size: 0.84rem;
    line-height: 1.2;
}

.prediction-mini-board-row > div:first-child span {
    display: block;
    color: var(--prediction-muted);
    font-size: 0.74rem;
}

.prediction-mini-board-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.prediction-mini-board-meta .prediction-points-pill {
    min-width: 2.5rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.7rem;
}

.prediction-mini-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .predictions-hero {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .predictions-season-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .predictions-season-filter .form-select,
    .predictions-season-filter .btn {
        width: 100%;
    }

    .prediction-match-card-header,
    .prediction-leader-row {
        align-items: stretch;
        flex-direction: column;
    }

    .prediction-history-item.d-flex {
        align-items: stretch !important;
        flex-direction: column;
    }

    .prediction-mini-board-row,
    .prediction-missing-reminder-list a {
        align-items: start;
        flex-direction: column;
    }

    .prediction-card-fields .prediction-score-field,
    .prediction-card-fields .prediction-player-field,
    .prediction-card-fields .prediction-confidence-field,
    .prediction-card-fields .prediction-submit-field {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===== Shadow Utilities ===== */
.shadow-sm {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.shadow-md {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.shadow-lg {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ===== General Styles ===== */
body {
    padding-top: var(--navbar-height);
    background-color: #f8f8f8;
    transition: background-color var(--transition-speed) ease;
    margin-top: 0 !important; /* Prevent unwanted margin */
    overflow-x: hidden; /* clip removed: can interfere with position:fixed painting in Safari's compositor (position:relative already removed, which was the real fix) */
    width: 100%; /* Ensure body takes exactly 100% width */
    /* position: relative removed — was causing Safari fixed-element stacking issues with overflow-x */
}

html,
body {
    max-width: 100%;
    /* Stop iOS Safari's horizontal rubber-band/jiggle when content is at the edge */
    overscroll-behavior-x: none;
}

/* The layout adds Bootstrap's .p-0 (padding:0 !important) to <body>, which
   otherwise wipes out the padding-top above and lets the fixed navbar overlap
   the top of the hero. Re-apply just the navbar offset with matching
   specificity so the rest of .p-0 (left/right/bottom = 0) is preserved. */
body.p-0 {
    padding-top: var(--navbar-height) !important;
}

@supports (height: 100dvh) {
    .modal {
        min-height: 100dvh;
    }

    .modal-backdrop {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: auto;
        min-height: 100dvh;
    }
}

/* App-wide modal safety defaults */
.modal {
    isolation: isolate;
}

.modal-dialog {
    max-width: min(var(--bs-modal-width, 500px), calc(100vw - 1rem));
}

@media (max-width: 576px) {
    :root {
        --mobile-modal-top-offset: calc(var(--navbar-height, 50px) + env(safe-area-inset-top) + 0.35rem);
    }

    .modal-dialog {
        margin: 0.5rem auto;
        max-width: calc(100vw - 1rem);
    }

    .modal-dialog:not(.modal-dialog-centered) {
        margin: var(--mobile-modal-top-offset) 0.5rem 0.5rem;
    }

    .modal-dialog.modal-dialog-centered {
        min-height: calc(100dvh - var(--mobile-modal-top-offset) - 1rem);
    }

    .modal-content {
        max-height: calc(100dvh - var(--mobile-modal-top-offset) - 0.5rem);
    }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== Container Alignment Fixes ===== */
.container-fluid > .container,
.container-fluid > .container-sm,
.container-fluid > .container-md,
.container-fluid > .container-lg,
.container-fluid > .container-xl {
    padding-left: 0;
    padding-right: 0;
}

.container-fluid > div[class^="container"],
.container-fluid > div[class*=" container"] {
    margin-left: auto;
    margin-right: auto;
}

.nav-width {
    max-width: 100%;
    height: var(--navbar-height);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    align-items: center;
    position: relative;
}

#navigation-container {
    background-color: var(--team-primary);
    margin-top: 0 !important;
    padding: 0 !important;
    position: relative;
}

#navigation-container,
main {
    max-width: 100%;
    overflow-x: clip;
}

/* Fix for container-xl in navigation - ensures proper width constraints */
.nav-width.container-xl {
    max-width: var(--bs-container-xl);
    width: 100%;
    background-color: var(--team-primary); /* Ensure color extends across */
}

/* Ensure same width between navigation and hero */
.hero-width.p-0,
.nav-width.p-0 {
    width: 100%;
    position: relative;
}

/* Hero section full-width background fixes - improved for all screen sizes */
#hero-container {
    position: relative;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    overflow-x: clip;
}

.team-gradient-bg {
    position: relative;
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%);
    width: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    /* Fix for Safari and iOS */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Keep hero content layered above any background */
.team-gradient-bg > .hero-content-inner {
    position: relative;
    z-index: 1;
}

/* My Benfica hero sits on the shared team gradient like every other hero, so
   strip the welcome card's own gradient/rounding/shadow and decorative blobs. */
.my-benfica-hero--flat {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 6px 0;
    margin: 0;
}

.my-benfica-hero--flat::before,
.my-benfica-hero--flat::after {
    display: none;
}

/* Split layout: welcome on the left, stats on the right */
.my-benfica-hero--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.my-benfica-hero--split .my-benfica-hero-main {
    flex: 1 1 auto;
    min-width: 0;
}

.my-benfica-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 1 auto;
    justify-content: flex-end;
}

.my-benfica-hero-stats .my-benfica-stat {
    flex: 1 1 auto;
    min-width: 120px;
}

/* ===== Per-page hero banner (non-home sections) ===== */
.hero-page-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 4px;
    color: #fff;
    flex-wrap: wrap;
}

.hero-page-icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 1.5rem;
    color: #fff;
}

.hero-page-text {
    /* flex-basis 0, not auto. With `auto` this block asks for its max-content
       width — on a page like Fan Map the subtitle ("Watch parties, away travel
       and stadium meetups near you") is wider than a phone, and because the
       banner is flex-wrap: wrap, the whole text block was pushed onto its own
       line BELOW the icon rather than shrinking beside it. That left the icon
       stranded alone on the first row with empty space to its right, and wrapped
       the subtitle awkwardly. Basis 0 lets it share the row and wrap internally.
       Wider screens are unaffected — there the text never needed to shrink. */
    flex: 1 1 0;
    min-width: 0;
    margin-right: auto;
}

.hero-page-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.hero-page-sub {
    margin: 3px 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

.hero-page-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.hero-page-actions a {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--team-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.hero-page-actions a:hover {
    background: #fff;
    transform: translateY(-1px);
}

@media (max-width: 575.98px) {
    .hero-page-banner {
        gap: 12px;
    }
    .hero-page-title {
        font-size: 1.3rem;
    }
    .hero-page-sub {
        font-size: 0.85rem;
    }
    .hero-page-actions {
        flex: 1 1 100%;
    }
    .hero-page-actions a {
        flex: 1 1 0;
        justify-content: center;
    }
}

/* ===== Dynamic match hero (match.php) ===== */
.hero-match {
    position: relative;
    z-index: 1;
    padding: 14px 4px;
    color: #fff;
}

.hero-match-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.hero-match-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.hero-match-comp {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hero-match-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .hero-match-top {
        justify-content: center;
    }
    .hero-match-actions {
        flex: 1 1 100%;
        justify-content: center;
        margin-top: 4px;
    }
}

.hero-match-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s ease;
}

a.hero-match-pill:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.hero-comp-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    padding: 1px;
    vertical-align: -0.15em;
}

.hero-match-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.hero-match-team {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 0;
    min-width: 0;
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.hero-match-team--left {
    justify-content: flex-end;
    text-align: right;
}

.hero-match-team--right {
    justify-content: flex-start;
    text-align: left;
}

.hero-match-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

a.hero-match-team:hover {
    transform: translateY(-2px);
    color: #fff;
}

a.hero-match-team:hover .hero-match-name {
    text-decoration: none;
}

/* Name + logo are now individually linked inside the (non-link) team cell. */
.hero-match-name-link,
.hero-match-logo-link {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    transition: transform 0.2s ease;
}

.hero-match-name-link:hover {
    color: #fff;
}

.hero-match-name-link:hover .hero-match-name {
    text-decoration: none;
}

.hero-match-logo-link:hover {
    transform: translateY(-2px);
}

/* Red-card markers carry a hover tooltip (player + minute). */
.hero-red-card {
    cursor: pointer;
}

.hero-match-logo {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-match-logo img {
    max-width: 84px;
    max-height: 84px;
    object-fit: contain;
}

.hero-match-name {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
}

.hero-match-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.hero-match-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 8px 16px;
    border-radius: 10px;
    color: #fff;
}

/* Aggregate box (two-leg ties) */
.hero-match-agg {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px 12px;
    border-radius: 8px;
    color: #fff;
    line-height: 1.1;
}

.hero-match-agg-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.hero-match-agg-score {
    font-size: 0.95rem;
    font-weight: 700;
}

/* Aggregate result colours: win green / loss red / draw silver. Only the
   aggregate box is coloured this way — the score box above keeps its own
   styling. Flat fills, no border: same treatment as the rest of the scoreboard. */
.hero-match-agg-win {
    background: var(--theme-success);
}

.hero-match-agg-loss {
    background: var(--theme-danger);
}

/* Dark ink: white on silver is unreadable, and .hero-match-agg forces #fff. */
.hero-match-agg-draw {
    background: var(--theme-draw);
    color: var(--theme-draw-ink);
}

/* Team red cards */
.hero-match-reds {
    display: flex;
    justify-content: center;
    gap: 3px;
    min-height: 13px;
}

.hero-red-card {
    display: inline-block;
    width: 9px;
    height: 13px;
    border-radius: 2px;
    background: var(--theme-danger);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

/* Form badges that are not links still open a hover card. */
span.hero-form-badge[data-hero-tip] { cursor: pointer; }

/* Second booking under the crest: the combined card, sized to sit level with
   the plain red markers beside it. */
.hero-red-dy {
    display: inline-block;
    width: 13px;
    height: 13px;
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    cursor: pointer;
}

.hero-match-score-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.hero-match-score-line span {
    opacity: 0.65;
}

.hero-match-score-note {
    margin-top: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.95;
}

/* Result colours — win green / loss red / draw silver, same trio as the
   aggregate box below it. Flat fills, no border. */
.hero-match-score-win {
    background: var(--theme-success);
}

.hero-match-score-loss {
    background: var(--theme-danger);
}

/* Dark ink: white on silver is unreadable, and .hero-match-score forces #fff. */
.hero-match-score-draw {
    background: var(--theme-draw);
    color: var(--theme-draw-ink);
}

.hero-match-vs {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    font-size: 1.3rem;
    font-weight: 700;
}

/* Time-left countdown shown under the VS badge for upcoming matches */
.hero-match-countdown {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.hero-match-countdown .hero-cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    min-width: 30px;
    padding: 3px 5px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.12);
}

.hero-match-countdown .hero-cd-unit b {
    font-size: 0.9rem;
    font-weight: 800;
}

.hero-match-countdown .hero-cd-unit small {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.8;
    margin-top: 2px;
}

/* Live score status (minute + pulsing dot) under the hero score */
.hero-match-live-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin-top: 6px;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .02em;
}
.hero-live-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--theme-success-subtle);
    animation: heroLivePulse 1.4s ease-in-out infinite;
}
@keyframes heroLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.75); }
}

/* Shrink the kickoff countdown on small screens */
@media (max-width: 576px) {
    .hero-match-countdown {
        gap: 3px;
        margin-top: 6px;
    }
    .hero-match-countdown .hero-cd-unit {
        min-width: 22px;
        padding: 2px 3px;
        border-radius: 5px;
    }
    .hero-match-countdown .hero-cd-unit b {
        font-size: 0.7rem;
    }
    .hero-match-countdown .hero-cd-unit small {
        font-size: 0.4rem;
        margin-top: 1px;
    }
}

.hero-match-status {
    width: fit-content;
    margin: 14px auto 0;
    padding: 4px 18px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.hero-match-details {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
}

.hero-match-detail {
    display: inline-flex;
    align-items: center;
}

.hero-match-detail a {
    color: #fff;
    text-decoration: none;
}

.hero-match-detail a:hover {
    color: #fff;
    text-decoration: none;
}

/* No underline on any hero link, in any state. */
.hero-header a,
.hero-header a:hover,
.hero-header a:focus {
    text-decoration: none;
}

.hero-match-star {
    color: var(--theme-warning);
}

/* Team form (last 5 in this competition) — sits under each team name */
.hero-match-name-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.hero-match-team--left .hero-match-name-col {
    align-items: flex-end;
}

.hero-match-team--right .hero-match-name-col {
    align-items: flex-start;
}

.hero-match-form-badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hero-form-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    line-height: 1;
}

.hero-form-badge:hover {
    color: #fff;
    opacity: 0.9;
}

.hero-form-w { background: var(--theme-success); }
.hero-form-d { background: var(--theme-ink-muted); }
.hero-form-l { background: var(--theme-danger); }

.hero-form-current {
    box-shadow: 0 0 0 2px var(--theme-warning);
}

/* ===== Match hero key-moments timeline (goals / cards / subs) ===== */
/* A collapsible drawer below the detail strip, in the same translucent box used
   by the VS / countdown badges. Opened by #hkm-detail-toggle on the detail line. */
.hero-key-moments {
    margin-top: 14px;
    padding: 10px 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    overflow: hidden;
    max-height: 320px;
    transition: max-height 0.28s ease, margin-top 0.28s ease, padding 0.28s ease, opacity 0.2s ease;
}

/* Collapsed: zero footprint so the hero stays clean until the fan opens it. */
.hero-key-moments.hkm-collapsed {
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

/* Opener on the detail line — a plain, inline control matching the other items. */
.hkm-detail-toggle {
    background: transparent;
    border: 0;
    font: inherit;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 0;
}

.hkm-detail-toggle:hover,
.hkm-detail-toggle:focus-visible {
    color: #fff;
    text-decoration: none;
}

.hkm-detail-toggle .hkm-chevron {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.hkm-detail-toggle[aria-expanded="false"] .hkm-chevron {
    transform: rotate(-90deg);
}

.hero-key-moments .hkm-loading,
.hkm-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.7);
}

.hkm-grid {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.hkm-labels {
    flex: 0 0 auto;
    width: 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px 0;
}

.hkm-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.1;
}

.hkm-label-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hkm-logo,
.hkm-logo img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* Scroller around the track. Inert by default (overflow visible, so the caps' -6px
   overhang shows and nothing scrolls) — wider screens are completely unchanged.
   hero-key-moments.js adds .hkm-scrolls ONLY on small screens when the timeline is too
   dense to fit, turning this into a horizontal scroller so it can be swiped right. */
.hkm-track-scroll {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}
/* Track flexes to fill the wrapper exactly as it did before wrapping (its own
   margin-right gives the same trailing gap), so desktop is unchanged. When the JS
   sets an explicit min-width for a dense small screen, it overflows and scrolls. */
.hkm-track-scroll > .hkm-track {
    flex: 1 1 auto;
}
.hkm-track-scroll.hkm-scrolls {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    /* Trailing gap after the full-time cap so the scrolled end matches the normal
       (non-scroll) end gap. The track's own margin-right isn't reliably scrollable
       inside an overflow container, so use the scroller's end padding (which Safari
       honours) instead. Kept small to mirror the normal view's tighter end gap. */
    padding-right: 6px;
}
.hkm-track-scroll.hkm-scrolls::-webkit-scrollbar { height: 0; }
.hkm-track-scroll.hkm-scrolls > .hkm-track {
    margin-right: 0; /* replaced by the scroller's padding-right above */
}
/* The caps overhang the track ends by -6px; inside the active scroller that overhang
   is clipped, so pin them flush to the edges only while scrolling. */
.hkm-track-scroll.hkm-scrolls > .hkm-track .hkm-cap-start { left: 0; }
.hkm-track-scroll.hkm-scrolls > .hkm-track .hkm-cap-end { right: 0; }

.hkm-track {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 88px;
    /* Small breathing room at the end, mirroring the inset before the team name. */
    margin-right: 14px;
}

.hkm-line {
    position: absolute;
    top: 50%;
    left: 3px;
    right: 3px;
    height: 2px;
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-50%);
}

.hkm-cap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    z-index: 2;
}

/* Both caps show a minute (0' and the closing minute), so they're pills. */
.hkm-cap-num {
    width: auto;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    font-size: 0.6rem;
    font-weight: 700;
}

.hkm-cap-start { left: -6px; }
.hkm-cap-end { right: -6px; }

.hkm-cap-live {
    animation: hkmPulse 1.4s ease-in-out infinite;
}

/* Standard minute reference marks (45, 90, 105, 120) — dashed gridlines. */
.hkm-mark {
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 0;
    border-left: 1px dashed rgba(255, 255, 255, 0.3);
    transform: translateX(-50%);
    z-index: 1;
}

.hkm-mark-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.35);
    border-radius: 3px;
    padding: 1px 4px;
    white-space: nowrap;
}

.hkm-live-dot {
    color: var(--theme-success-subtle);
    animation: hkmPulse 1.4s ease-in-out infinite;
}

@keyframes hkmPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Both rows overlay the whole track, so the row boxes must NOT capture hover —
   only the markers themselves do — otherwise the upper (our-team) row's tooltips
   are swallowed by the lower row sitting on top of it. */
.hkm-row {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

.hkm-ev {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    pointer-events: auto;
}

.hkm-ev-top {
    bottom: 50%;
    margin-bottom: 6px;
}

.hkm-ev-bottom {
    top: 50%;
    margin-top: 6px;
    flex-direction: column-reverse;
}

.hkm-ev-min {
    font-size: 0.58rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
    white-space: nowrap;
}

.hkm-ev-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.hkm-ic {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hkm-ic-owngoal {
    background: rgba(227, 52, 47, 0.85);
}

.hkm-ic-sub {
    font-size: 0.5rem;
    gap: 0;
}

/* Cards use the site's SVG card icons (yellow / red / double-yellow), matching
   match.php — a second yellow shows the proper combined card, not a red. */
.hkm-cardicon {
    font-size: 15px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

/* ---- Shared result rows -------------------------------------------------
   The compact result card used by the home page's Recent Results / On This
   Day and by timeline.php's On This Day. Lifted out of index.php so the two
   pages cannot drift apart. Markup comes from includes/result_cards.php. */
.benfica-layout .bn-mt-team { display: inline-flex; align-items: center; gap: 0.45rem; }
.benfica-layout .bn-mt-logo { object-fit: contain; background: transparent; border-radius: 0; }
.benfica-layout .bn-rc-wrap { display: inline-flex; align-items: center; gap: 0.1rem; flex: 0 0 auto; }
.benfica-layout .bn-rc { font-size: 0.8em; }
.benfica-layout .bn-mt-vs { font-size: 0.78rem; font-weight: 900; color: var(--slb-gold); }
.benfica-layout .bn-mt-score { font-size: 1.25rem; font-weight: 900; color: var(--slb-gold); white-space: nowrap; }
.benfica-layout .bn-mt-form .bn-wdl { width: 1.15rem; height: 1.15rem; font-size: 0.56rem; box-shadow: 0 3px 8px rgba(0,0,0,0.25); }
.benfica-layout .bn-wdl { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; font-size: 0.72rem; font-weight: 900; color: #fff; }
.benfica-layout .bn-result-list { display: grid; gap: 0.6rem; }
.benfica-layout .bn-res-card { position: relative; display: block; background: var(--bs-body-bg); border: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.07); border-radius: 1rem; padding: 0.6rem 0.75rem 0.7rem; color: var(--bs-body-color); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.benfica-layout a.bn-res-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,0.12); color: var(--bs-body-color); }
.benfica-layout .bn-res-card.is-w { background: linear-gradient(90deg, rgba(29,157,85,0.08), rgba(29,157,85,0) 45%) var(--bs-body-bg); }
.benfica-layout .bn-res-card.is-d { background: linear-gradient(90deg, rgba(151,161,171,0.10), rgba(151,161,171,0) 45%) var(--bs-body-bg); }
.benfica-layout .bn-res-card.is-l { background: linear-gradient(90deg, rgba(208,39,66,0.08), rgba(208,39,66,0) 45%) var(--bs-body-bg); }
.benfica-layout .bn-res-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color, #6c757d); margin-bottom: 0.5rem; }
.benfica-layout .bn-res-top > span { display: inline-flex; align-items: center; min-width: 0; }
.benfica-layout .bn-res-main { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; font-weight: 800; font-size: 0.9rem; }
.benfica-layout .bn-res-main .bn-mt-team { flex: 1; min-width: 0; }
.benfica-layout .bn-res-main .bn-mt-team > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout .bn-res-main .bn-mt-team:last-child { flex-direction: row-reverse; justify-content: flex-start; }
.benfica-layout .bn-res-main .bn-mt-score { flex: 0 0 auto; font-size: 0.98rem; font-weight: 900; padding: 0.18rem 0.6rem; border-radius: 0.65rem; }
.benfica-layout .bn-res-card.is-w .bn-mt-score { color: #1d9d55; background: rgba(29,157,85,0.14); }
.benfica-layout .bn-res-card.is-d .bn-mt-score { color: #7c868f; background: rgba(151,161,171,0.20); }
.benfica-layout .bn-res-card.is-l .bn-mt-score { color: #d02742; background: rgba(208,39,66,0.13); }
[data-bs-theme="dark"] .benfica-layout .bn-res-card.is-w .bn-mt-score { color: #5fd695; }
[data-bs-theme="dark"] .benfica-layout .bn-res-card.is-d .bn-mt-score { color: #b4bcc4; }
[data-bs-theme="dark"] .benfica-layout .bn-res-card.is-l .bn-mt-score { color: #ff8296; }
.benfica-layout .bn-res-comp-ico { width: 20px; height: 20px; margin-right: 0.4rem; }
.benfica-layout .bn-otd-line .bn-mt-team { flex: 1; min-width: 0; }
.benfica-layout .bn-otd-line .bn-mt-team > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout .bn-otd-line .bn-mt-team:last-child { flex-direction: row-reverse; justify-content: flex-start; }
.benfica-layout .bn-otd-line .bn-mt-score { font-size: 0.85rem; font-weight: 900; color: var(--slb-red); background: rgba(var(--slb-red-rgb), 0.08); padding: 0.12rem 0.5rem; border-radius: 0.55rem; }
.benfica-layout .bn-otd-list .bn-wdl { width: 1.25rem; height: 1.25rem; font-size: 0.62rem; }

/* Dark surface for the shared result card (the home page carries the same rule
   for its other list rows). */
[data-bs-theme="dark"] .benfica-layout .bn-res-card { background-color: rgba(255,255,255,0.05); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }

/* Shared hover card (standings Summary, match events). Bootstrap positions
   overriding its tooltip variables recolours the shell (arrow
   included) and .tooltip-inner becomes the card body. */
.bn-hovercard{--bs-tooltip-bg:var(--bs-body-bg);--bs-tooltip-color:var(--bs-body-color);
    --bs-tooltip-opacity:1;--bs-tooltip-max-width:260px;--bs-tooltip-padding-x:0;--bs-tooltip-padding-y:0;}
.bn-hovercard .tooltip-inner{text-align:left;padding:.5rem .6rem;
    border:1px solid var(--bs-border-color);border-radius:10px;
    box-shadow:0 .35rem 1rem rgba(0,0,0,.22);font-size:12px;line-height:1.45;}
.stip-head{display:flex;align-items:baseline;gap:.5rem;justify-content:space-between;
    margin-bottom:.4rem;padding-bottom:.35rem;border-bottom:1px solid var(--bs-border-color);}
.stip-kind{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--bs-secondary-color);}
.stip-when{font-size:11px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;}
.stip-side{display:flex;align-items:center;gap:.4rem;min-width:0;padding:.1rem 0;}
.stip-side.is-strong .stip-name,.stip-side.is-strong .stip-goals{font-weight:800;}
/* The role of the OTHER player in an event (On / Off / Assist) sits at the end of
   its row — without this it butts straight against the name. */
.stip-side .stip-kind{flex:0 0 auto;margin-left:auto;padding-left:.5rem;}
.stip-crest{flex:0 0 auto;width:18px !important;height:18px !important;object-fit:contain;border:0 !important;background:transparent !important;}
.stip-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stip-goals{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;}
.stip-foot{margin-top:.35rem;padding-top:.35rem;border-top:1px solid var(--bs-border-color);
    font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--bs-secondary-color);}
/* Sentence-case footers (zone target, trend hint) rather than the
   HOME / AWAY label the fixture cards carry. */
.stip-foot-plain{display:flex;align-items:flex-start;gap:.35rem;
    font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;}
.stip-foot-plain i{margin-top:.15rem;font-size:10px;flex-shrink:0;}
.stip-swatch{flex:0 0 auto;width:14px !important;height:14px !important;display:inline-block;
    border:0 !important;background:transparent !important;}
.stip-trend-icon{flex:0 0 auto;width:14px;text-align:center;font-size:11px;}
/* Event type line: the chip's own icon, then what the event was. */
.stip-title{display:flex;align-items:center;gap:.4rem;font-weight:700;margin-bottom:.4rem;}
.stip-title i,.stip-title .fa-yellow-card,.stip-title .fa-red-card,
.stip-title .fa-double-yellow-card,.stip-title .fa-missed-penalty{flex:0 0 auto;font-size:12px;}
/* The face bubble is built from inline styles, which Bootstrap's tooltip sanitiser
   strips — so cards carry a CLASS instead and the styling lives here. A photo-less
   face stays an <img>; a real photo is a <span> whose per-player rule (emitted by
   matchEventFaceStyles() in match.php) supplies the measured head crop, because
   object-fit:cover can centre a photo but never zoom it to the head. */
.stip-face{flex:0 0 auto;width:22px !important;height:22px !important;border-radius:50%;
    object-fit:cover;object-position:50% 8%;background-color:#e5e7eb;
    display:inline-block;background-repeat:no-repeat;background-position:50% 8%;}
.stip-face-our{border:1px solid #BB0000;}
.stip-face-opponent{border:1px solid #6b7280;}
/* Anything that opens a hover card takes the hand — never the help cursor. */
[data-bs-toggle="tooltip"],
[data-hero-tip],
.match-events [title],
.match-events [data-bs-toggle="tooltip"],
.tactical-view-events [data-bs-toggle="tooltip"] { cursor: pointer; }
/* The zone card hangs off the position badge, so the badge is what
   signals it — the row itself is no longer a hover target. */
.standings-pos[data-bs-toggle="tooltip"]{cursor:pointer;}

/* Marker hover card. Parked on <body> because the strip sits inside the hero's
   gradient panel and a horizontal scroller, either of which would clip it. Same
   visual language as the bracket's tie panel and the match feed's event card. */
.hkm-tip {
    position: fixed;
    z-index: 1080;
    left: 0;
    top: 0;
    max-width: 300px;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.22);
    font-size: 12px;
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}
.hkm-tip.is-on { opacity: 1; }
/* Caret pointing back at whatever opened the card. --tip-caret is set by the
   script so it still lands on the marker when the card is clamped to an edge;
   the border colour is drawn behind the fill to keep the card's 1px outline. */
.hkm-tip::before, .hkm-tip::after {
    content: "";
    position: absolute;
    left: var(--tip-caret, 50%);
    transform: translateX(-50%);
    border: 7px solid transparent;
    width: 0;
    height: 0;
}
.hkm-tip::before { top: 100%; border-top-color: var(--bs-border-color); }
.hkm-tip::after { top: calc(100% - 1px); border-top-color: var(--bs-body-bg); }
.hkm-tip.is-below::before { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--bs-border-color); }
.hkm-tip.is-below::after { top: auto; bottom: calc(100% - 1px); border-top-color: transparent; border-bottom-color: var(--bs-body-bg); }
.hkm-tip-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 0.35rem;
}
.hkm-tip-min { font-weight: 700; color: var(--bs-body-color); font-variant-numeric: tabular-nums; }
.hkm-tip-title { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; margin-bottom: 0.4rem; }
.hkm-tip-title .hkm-ic, .hkm-tip-title .hkm-cardicon { flex: 0 0 auto; filter: none; }
/* The form badge doubles as the card's icon; it is a self-contained coloured
   disc, so it reads the same on the card as it does on the hero. */
.hkm-tip-title .hero-form-badge { flex: 0 0 auto; width: 20px; height: 20px; font-size: 0.6rem; }
.hkm-tip-title > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.hkm-tip-sep { height: 1px; background: var(--bs-border-color); margin: 0.5rem 0; }
.hkm-tip-rows {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.2rem 0.75rem;
    margin: 0;
    padding-top: 0.4rem;
    border-top: 1px solid var(--bs-border-color);
}
.hkm-tip-rows dt {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}
.hkm-tip-rows dd {
    margin: 0;
    min-width: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.hkm-tip-person { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; }
.hkm-tip-person > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hkm-tip-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
}
.hkm-tip-note i { margin-top: 0.15rem; font-size: 10px; flex-shrink: 0; }

@media (max-width: 575.98px) {
    .hero-key-moments { margin-top: 12px; padding: 6px 8px 10px; }
    .hkm-grid { gap: 6px; }
    .hkm-track { height: 80px; }
    .hkm-labels { width: 54px; }
    .hkm-label { font-size: 0.58rem; gap: 4px; }
    .hkm-logo, .hkm-logo img { width: 18px; height: 18px; }
    .hkm-ev-min { font-size: 0.5rem; }
    .hkm-ic { width: 18px; height: 18px; font-size: 0.6rem; }
    .hkm-ic-sub { font-size: 0.46rem; }
    .hkm-cardicon { font-size: 13px; }
    .hkm-cap { height: 20px; font-size: 0.55rem; }
    .hkm-cap-num { width: auto; min-width: 20px; height: 20px; padding: 0 6px; }
    .hkm-cap-start { left: -4px; }
    .hkm-cap-end { right: -4px; }
    .hkm-mark-label { font-size: 0.46rem; }
}

/* Very narrow phones: drop the side rails (labels + spacer share .hkm-labels) and
   let the strip use full width. Rows still read top = our team, bottom = opponent. */
@media (max-width: 400px) {
    .hkm-labels { display: none; }
    .hkm-track { height: 84px; }
}

/* ===== Fixtures & Results hero (fixtures_results.php) ===== */
.hero-fixtures {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 10px 4px;
    color: #fff;
}

.hero-fixtures-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.hero-fixtures-icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.hero-fixtures-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.hero-fixtures-sub {
    margin: 2px 0 0;
    font-size: 0.9rem;
    opacity: 0.85;
}

/* Calendar subscribe / .ICS buttons on the right of the fixtures hero */
.hero-fixtures-cal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.hero-cal-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    border: 1px solid transparent;
    transition: filter 0.15s ease, background 0.15s ease;
}

.hero-cal-btn--green {
    background: var(--theme-success);
    color: #fff;
}

.hero-cal-btn--green:hover {
    color: #fff;
    filter: brightness(1.08);
}

.hero-cal-btn--ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.hero-cal-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.hero-fixtures-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hero-fixtures-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
}

.hero-fixtures-stat strong {
    font-size: 1.4rem;
    line-height: 1;
}

.hero-fixtures-stat span {
    margin-top: 3px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

@media (max-width: 575.98px) {
    .hero-fixtures-title {
        font-size: 1.3rem;
    }
    .hero-fixtures-stats {
        justify-content: flex-start;
    }
}

/* ===== Statistics hero leaders (statistics.php) ===== */
.hero-stats {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 10px 4px;
    color: #fff;
}

.hero-stats-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.hero-stats-leaders {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 0 1 auto;
    justify-content: flex-end;
}

.hero-stats-leader {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 220px;
    min-width: 200px;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
    transition: background 0.2s ease;
}

.hero-stats-leader:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.hero-stats-leader img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.hero-stats-leader-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    margin-right: auto;
    min-width: 0;
}

.hero-stats-leader-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.hero-stats-leader-name {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
}

.hero-stats-leader-value {
    font-size: 1.3rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.hero-stats-leader-value small {
    font-size: 0.62rem;
    font-weight: 600;
    opacity: 0.8;
    margin-left: 2px;
}

@media (max-width: 575.98px) {
    .hero-stats-leader {
        min-width: 0;
        width: 100%;
    }
}

/* ===== Team trophies hero (trophies.php) ===== */
.hero-trophies {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 10px 4px;
    color: #fff;
}

.hero-trophies-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.hero-trophies-icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    overflow: hidden;
}

/* Competition logo in the hero — a clean square white tile sized to roughly
   match the text block beside it (title + subtitle + champion pill). */
.hero-trophies-icon--logo {
    width: 82px;
    height: 82px;
    background: #fff;
    padding: 6px;
}

.hero-trophies-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 9px;
    display: block;
}

.hero-trophies-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.hero-trophies-sub {
    margin: 2px 0 0;
    font-size: 0.9rem;
    opacity: 0.85;
}

/* Champion / leader pill in the competition hero */
.hero-comp-champ {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 3px 10px 3px 8px;
    background: rgba(255, 255, 255, 0.12);
    border-left: 2px solid var(--theme-warning);
    border-radius: 0 0.35rem 0.35rem 0;
    font-size: 0.85rem;
}

.hero-comp-champ > i {
    color: var(--theme-warning);
    font-size: 0.78rem;
}

.hero-comp-champ-label {
    color: var(--theme-warning);
    font-weight: 800;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero-comp-champ-sep {
    opacity: 0.7;
}

.hero-comp-champ a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.hero-comp-champ a:hover {
    text-decoration: none;
}

@media (max-width: 575.98px) {
    .hero-trophies-title {
        font-size: 1.3rem;
    }
}

/* ===== Dynamic player hero (player.php) ===== */
.hero-player-top {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

.hero-player-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.hero-player {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 10px 4px;
    color: #fff;
}

.hero-player-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
}

.hero-player-photo {
    flex: 0 0 auto;
}

.hero-player-photo img {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.55);
}

/* Club crests shouldn't be cropped into a circle */
.hero-club-photo img {
    border-radius: 0;
    border: none;
    background: transparent;
    object-fit: contain;
}

/* Club head-to-head record (vs our club) */
.hero-h2h {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.hero-h2h-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
}

.hero-h2h-item strong {
    font-size: 1.3rem;
    line-height: 1;
}

.hero-h2h-win {
    background: var(--theme-success);
}

.hero-h2h-draw {
    background: rgba(255, 255, 255, 0.25);
}

.hero-h2h-loss {
    background: var(--theme-primary-700);
}

.hero-player-info {
    min-width: 0;
}

.hero-player-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-player-namecol {
    min-width: 0;
}

.hero-player-name {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-player-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #fff;
    color: var(--team-primary);
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1;
}

.hero-player-name-text {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.hero-player-name-actions {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.hero-player-position {
    margin-top: 2px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.hero-player-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
}

/* Last form on the player hero, ahead of Follow. The .bn-wdl badges elsewhere
   are scoped to .benfica-layout and the hero sits outside it, so the strip
   carries its own dots — same green / grey / red language as the result cards. */
.hero-player-form {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.6rem;
}
.hero-form-link { line-height: 0; text-decoration: none; }
.hero-form-dot {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 900;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Same lift the rest of the page gives a clickable badge — .hero-match-logo-link
   in this hero, a.bn-res-card and .bn-share in the layout below it. */
.hero-form-link:hover .hero-form-dot {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.hero-form-link:focus-visible .hero-form-dot {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .hero-form-dot { transition: none; }
    .hero-form-link:hover .hero-form-dot { transform: none; }
}
.hero-form-dot.is-w { background: #1d9d55; }
.hero-form-dot.is-d { background: #7c868f; }
.hero-form-dot.is-l { background: #d02742; }

.hero-player-trophies {
    flex: 0 0 auto;
    max-width: 55%;
}

.hero-player-trophies-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.hero-player-trophies-sub {
    font-weight: 400;
    font-size: 0.72rem;
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 8px;
    border-radius: 999px;
}

.hero-player-trophies-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 14px;
}

.hero-player-trophy {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    text-decoration: none;
    color: #fff;
    transition: transform 0.2s ease, background 0.2s ease;
}

.hero-player-trophy:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.22);
}

.hero-player-trophy img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.hero-player-trophy i {
    font-size: 1.4rem;
    color: var(--theme-warning);
}

.hero-player-trophy-count {
    position: absolute;
    bottom: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--theme-warning);
    color: var(--theme-accent-900);
    border: 1.5px solid #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .hero-player {
        gap: 14px;
    }
    .hero-player-trophies {
        max-width: 100%;
        flex: 1 1 100%;
    }
    .hero-player-trophies-head,
    .hero-player-trophies-list {
        justify-content: flex-start;
    }
    .hero-player-name-text {
        font-size: 1.3rem;
    }
    .hero-player-photo img {
        width: 72px;
        height: 72px;
    }
}

.hero-match-win {
    background: var(--theme-success);
}

.hero-match-loss {
    background: var(--theme-primary-700);
}

.hero-match-draw {
    background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 575.98px) {
    .hero-match-teams {
        gap: 8px;
    }
    .hero-match-team {
        gap: 8px;
    }
    .hero-match-name {
        font-size: 0.85rem;
    }
    .hero-match-score-line {
        font-size: 1.6rem;
    }
    .hero-match-logo,
    .hero-match-logo img {
        width: 56px;
        height: 56px;
        max-width: 56px;
        max-height: 56px;
    }
}

/* Allow content within hero to be container-width - improved containment */
.hero-content-inner {
    max-width: var(--bs-container-xl, 1320px);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    box-sizing: border-box;
}

/* Align the themed hero banner with the full-width page body. content_width is
   container-fluid site-wide, so the body spans full width with a ~1rem grid inset.
   Without this the hero content stays capped at 1320px and centered, leaving its
   edges out of line with the cards below. */
#hero-container .hero-content-inner {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ===== Hero Content Inner Spacing ===== */
.container-xl .hero-content-inner {
    padding-left: 0;
    padding-right: 0;
}

/* Remove top and bottom padding for hero headers in container-xl */
.container-xl .hero-header {
    padding-top: 5px;
    padding-bottom: 10px;
}

/* Override compact hero padding in container-xl */
.container-xl .hero-header.compact {
    padding-top: 5px;
    padding-bottom: 10px;
}

/* Ensure this applies at all breakpoints */
@media (min-width: 1200px) {
    /* Hero vertical padding consistency for larger screens */
    .hero-header {
        padding-top: 5px;
        padding-bottom: 10px;
    }
}

.hero-width.container-xl {
    padding-left: 0;
    padding-right: 0;
}

/* Special handling for container-xl within team-gradient-bg */
.team-gradient-bg .container-xl {
    background-color: transparent;
}

/* Fix for mobile devices and potential overflow issues */
@supports(padding: max(0px)) {
    .hero-content-inner {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
}

/* Improved responsive styles for different breakpoints */
@media (max-width: 575.98px) {
    .hero-content-inner {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Remove unnecessary horizontal padding that might cause misalignment */
@media (min-width: 992px) {
    .navbar > .container,
    .navbar > .container-fluid,
    .navbar > .container-lg,
    .navbar > .container-md,
    .navbar > .container-sm,
    .navbar > .container-xl {
        justify-content: start;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* When navbar is in a container that's already contained, remove extra padding */
    .container .navbar > .container,
    .container-sm .navbar > .container-sm,
    .container-md .navbar > .container-md,
    .container-lg .navbar > .container-lg,
    .container-xl .navbar > .container-xl,
    .container-fluid .navbar > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Fix for container-xl breakpoint - ensures proper width */
    .container-xl.nav-width {
        max-width: 1320px;
    }
}

/* Fix navbar sticky positioning */
.navbar-sticky, .sticky-top {
    background-color: var(--team-primary) !important;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    margin-top: 0 !important; /* Remove any margin */
}

/* Shared team gradient background for both navigation and hero */
.team-gradient-bg,
.hero-header,
#hero-container,
[id="hero-container"] {
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%) !important;
    color: var(--team-accent) !important;
}

/* Even more specific for when JavaScript might be adding inline styles */
.hero-header[style*="background"],
#hero-container[style*="background"] {
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%) !important;
}

/* Hero content should be transparent to show gradient background */
.hero-content-inner {
    background-color: transparent !important;
}

/* Consistent styling between navigation and hero */
#navigation-container, 
#hero-container {
    width: 100%;
    margin-top: 0 !important;
    padding: 0 !important;
    position: relative;
    left: 0;
    right: 0;
}

/* ===== Header & Navigation Styles ===== */
.site-header {
    position: relative;
    overflow: hidden;
    max-height: 200px;
    margin: 0;
}

.site-header img {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 200px;
    display: block;
}

.site-branding {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, rgba(176, 27, 29, 0.8) 0%, rgba(0,0,0,0.7) 100%);
    padding: 1rem;
    z-index: 1;
}

.site-title {
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    margin: 0;
    letter-spacing: 1px;
}

.navbar-sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1060;
    transition: transform 0.3s ease; /* only transform — box-shadow removed to avoid CPU repaint during scroll */
    will-change: transform; /* promote to GPU compositor layer so animation doesn't invalidate page layers */
    background-color: var(--team-primary);
    height: var(--navbar-height);
}

/* The fixed navbar above sits at 1060 and the mobile drawer inside it at 1065,
   but Bootstrap's own .modal is only 1055 — so an open modal was painted OVER by
   the navbar, hiding its header and close button behind the red bar. 1066 clears
   the navbar, the drawer and #back-to-top (1055) while staying below the 1070 /
   1080 layers, so tooltips and popovers still render above an open modal.
   .modal-backdrop stays at Bootstrap's 1050 on purpose: raising it would put it
   over the navbar and over anything nested inside it. Same fix as the admin
   panel's, in admin/css/modern-nav.css. */
.modal {
    z-index: 1066;
}

.navbar-sticky.scrolled {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* instant, no transition */
}

.navbar-sticky.hidden {
    transform: translateY(-100%);
}

/* Zero out Bootstrap's default vertical padding — height is enforced by .nav-width */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.navbar-brand {
    font-weight: 700;
    position: relative;
    padding-bottom: 3px;
    display: flex;
    align-items: center;
}

.navbar-brand i {
    margin-right: 10px;
}

.navbar-brand:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #ffffff; /* Changed from var(--team-secondary) to white to match admin */
    transition: all var(--transition-speed);
    transform: translateX(-50%);
}

.navbar-brand:hover:after {
    width: 100%;
}

.nav-item {
    position: relative;
    margin: 0 0.125rem;
}

.nav-item .nav-link {
    color: #fff;
    padding: 0.75rem 1rem;
    transition: all var(--transition-speed) ease;
    border-radius: 4px;
}

.nav-item .nav-link:hover, 
.nav-item .nav-link:focus {
    color: #fff;
    background-color: rgba(255,255,255,0.1);
}

.nav-item .nav-link.active {
    background-color: var(--team-secondary);
    color: white;
}

.nav-item .nav-link i {
    margin-right: 5px;
}

/* Remove blue outline on menu click - match admin */
.navbar-nav .nav-link:focus,
.dropdown-item:focus,
.navbar .btn:focus,
.dropdown-toggle:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* ===== Hero Header Styles ===== */
.hero-header {
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%);
    padding: 5px 0; /* Set consistent 5px padding for all containers */
    position: relative;
    overflow: hidden;
    color: white;
    margin-top: 0;
    z-index: 1;
}

/* Override and ensure consistent padding for all container types */
.container .hero-header,
.container-sm .hero-header,
.container-md .hero-header,
.container-lg .hero-header,
.container-xl .hero-header,
.container-fluid .hero-header {
    padding-top: 5px;
    padding-bottom: 10px;
}

/* Mobile specific override */
@media (max-width: 768px) {
    .hero-header,
    .hero-header.compact {
        padding: 5px 0;
    }
}

/* Hero container width settings - ensures background color extends fully */
.hero-width {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative; /* Ensure position context for children */
}

/* Fix hero background color for all container types */
#hero-container {
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%);
    margin-top: 0 !important;
    padding: 0 !important;
    position: relative;
    width: 100%;
    left: 0;
    right: 0;
}

/* Container-specific styling to ensure proper hero background extends */
.hero-width.container {
    max-width: var(--bs-container-width);
}

.hero-width.container-sm {
    max-width: var(--bs-container-sm);
}

.hero-width.container-md {
    max-width: var(--bs-container-md);
}

.hero-width.container-lg {
    max-width: var(--bs-container-lg);
}

.hero-width.container-xl {
    max-width: var(--bs-container-xl, 1320px); /* Fallback if variable not available */
    width: 100%;
}

/* Enhanced responsive hero styling for all screen sizes */
@media (min-width: 1400px) {
    /* XL screens */
    .container-xl.hero-width {
        max-width: 1320px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    /* LG screens */
    .container-lg.hero-width,
    .container-xl.hero-width {
        max-width: 1140px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* MD screens */
    .container-md.hero-width,
    .container-lg.hero-width,
    .container-xl.hero-width {
        max-width: 960px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* SM screens */
    .container-sm.hero-width,
    .container-md.hero-width,
    .container-lg.hero-width,
    .container-xl.hero-width {
        max-width: 720px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    /* XS screens */
    .container.hero-width,
    .container-sm.hero-width,
    .container-md.hero-width,
    .container-lg.hero-width,
    .container-xl.hero-width {
        max-width: 540px;
    }
}

@media (max-width: 575px) {
    /* Mobile screens */
    .hero-width {
        width: 100%;
    }
}

/* Hero stats styling */
.hero-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin-top: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hero-stats.compact-stats {
    margin-top: 0.5rem;
}

.stat-item {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.compact-stats .stat-item {
    padding: 0.25rem 0.75rem;
}

.stat-item:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.2);
}

.compact-stats .stat-item:hover {
    transform: translateY(-3px);
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
}

.compact-stats .stat-value {
    font-size: 1.5rem;
    margin-bottom: 0.1rem;
}

.stat-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.compact-stats .stat-label {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

/* Next match styling */
.next-match {
    background-color: rgba(0, 0, 0, 0.2);
    border-left: 4px solid #fff;
    padding: 1rem 1.5rem;
    border-radius: 0 8px 8px 0;
    margin: 1rem 0;
}

.next-match.compact-match {
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
}

/* ===== Hero Carousel Styles ===== */
#heroCarousel {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

#heroCarousel .carousel-indicators {
    bottom: 0; /* Keep at bottom position */
    margin-bottom: 0;
    padding-bottom: 6px; /* Keep padding to push dots up slightly */
    background: none; /* Remove the gradient background */
    z-index: 5; /* Ensure indicators appear above content */
}

/* Make the dots more visible with better contrast */
#heroCarousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 4px;
    background-color: rgba(255, 255, 255, 0.7); /* Increased opacity for better visibility */
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Stronger shadow for contrast */
}

#heroCarousel .carousel-indicators button.active {
    background-color: white;
    transform: scale(1.2);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2), 0 0 5px rgba(255, 255, 255, 0.5); /* Dual shadow for glow effect */
}

.compact-match-box {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.compact-match-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.compact-match-box .match-title {
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
}

.carousel-match-graphic, .season-graphic {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    height: 100%;
}

.match-teams-display {
    color: white;
}

.match-graphic-header {
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.match-team-logo {
    width: auto;
    max-height: 60px;
    max-width: 100%;
}

.team-logo-container {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 700;
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.countdown-box {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    min-width: 45px;
    text-align: center;
}

.team-name {
    color: white;
    font-weight: 500;
}

.stat-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-box {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    height: 100%;
}

.stat-box:hover {
    transform: translateY(-2px);
    background-color: rgba(255, 255, 255, 0.2);
}

.stat-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    margin-right: 10px;
}

.stat-data {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.1;
    color: white;
}

.stat-label {
    font-size: 0.75rem;
    opacity: 0.8;
    color: white;
}

.season-summary {
    color: white;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.summary-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-performers-chart {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    height: 100%;
}

.performer-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.performer-name {
    width: 30%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85rem;
}

.performer-value {
    width: 10%;
    text-align: right;
    font-weight: 700;
}

.progress {
    flex: 1;
}

.progress-bar {
    background-color: var(--team-primary);
}

/* Media queries for responsive carousel */
@media (max-width: 767px) {
    /* Equal-height hero on mobile.
       The two slides have different content heights once their panels stack,
       so the carousel resizes when it rotates. Fix it purely in CSS: lay the
       slides on top of each other in a single grid cell, which makes the
       carousel always as tall as the TALLER slide (Season Overview). Only the
       active slide is shown (cross-fade); the hidden one still reserves height,
       so the box never changes size. */
    #heroCarousel .carousel-inner {
        display: grid;
        min-height: 0;
    }
    #heroCarousel .carousel-item {
        display: block !important;
        grid-area: 1 / 1 / 2 / 2;
        transform: none !important;
        transition: opacity 0.4s ease !important;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
    #heroCarousel .carousel-item.active {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    #heroCarousel h2 {
        font-size: 1.35rem;
        line-height: 1.2;
    }

    #heroCarousel .row.align-items-center {
        row-gap: 0.75rem !important;
    }

    #heroCarousel .compact-match-box {
        padding: 0.65rem;
        border-radius: 10px;
    }

    #heroCarousel .compact-match-box .badge {
        font-size: 0.7rem;
    }

    #heroCarousel .match-title,
    #heroCarousel .team-name {
        font-size: 0.82rem;
        line-height: 1.25;
    }

    #heroCarousel .stat-box {
        padding: 0.55rem;
        min-height: 58px;
    }

    #heroCarousel .stat-icon {
        width: 26px;
        height: 26px;
        margin-right: 0.5rem;
        font-size: 0.75rem;
    }

    #heroCarousel .compact-button {
        padding: 0.35rem 0.65rem;
        font-size: 0.78rem;
        line-height: 1.15;
        border-radius: 999px;
    }

    #heroCarousel .d-flex.mt-auto.pt-2 {
        gap: 0.45rem;
        flex-wrap: wrap;
        padding-top: 0.55rem !important;
    }

    .match-graphic-header {
        font-size: 1rem;
    }
    
    .carousel-match-graphic, .season-graphic {
        margin-top: 15px;
        padding: 10px;
    }
    
    .stat-value {
        font-size: 1rem;
    }
    
    .performer-name {
        width: 35%;
        font-size: 0.8rem;
    }
    
    #heroCarousel .carousel-indicators {
        bottom: 0;
        padding-bottom: 6px;
    }
}

@media (max-width: 576px) {
    #heroCarousel {
        padding-bottom: 0.35rem;
    }

    #heroCarousel .match-teams-display {
        padding: 0.75rem !important;
    }

    #heroCarousel h2 {
        font-size: 1.2rem;
    }

    #heroCarousel p.mb-2,
    #heroCarousel .match-graphic-header {
        margin-bottom: 0.45rem !important;
    }

    #heroCarousel .col-6.col-sm-4 {
        width: 50%;
    }

    #heroCarousel .stat-value {
        font-size: 0.92rem;
    }

    #heroCarousel .stat-label {
        font-size: 0.66rem;
    }

    #heroCarousel .performer-name {
        font-size: 0.74rem;
    }

    #heroCarousel .performer-value {
        font-size: 0.74rem;
    }

    #heroCarousel .carousel-control-prev,
    #heroCarousel .carousel-control-next {
        display: none;
    }
    
    #heroCarousel .carousel-indicators {
        bottom: 0;
        padding-bottom: 4px;
    }
    
    .club-name {
        font-size: 0.9rem;
        max-width: 140px;
    }
}

/* ===== Button Styles ===== */
.cta-button {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background-color: var(--bs-body-bg);
    color: var(--team-primary);
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: none;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    background-color: var(--theme-surface-2);
    color: var(--team-primary);
}

.compact-button {
    display: inline-block;
    padding: 0.35rem 1rem;
    background-color: var(--bs-body-bg);
    color: var(--team-primary);
    text-decoration: none;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: none;
}

.compact-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    background-color: var(--theme-surface-2);
    color: var(--team-primary);
}

/* Fix for hero carousel link clicking issues */
#heroCarousel .compact-button {
    position: relative;
    z-index: 10; /* Ensure buttons are above carousel controls */
    pointer-events: auto !important; /* Force clickable */
    display: inline-block;
}

/* Ensure carousel controls don't interfere with buttons */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    z-index: 5; /* Lower than buttons */
}

#heroCarousel .carousel-indicators {
    z-index: 5; /* Lower than buttons */
}

/* Make sure button containers are properly positioned */
#heroCarousel .d-flex {
    position: relative;
    z-index: 10;
}

/* Ensure carousel items don't have click-blocking overlays */
#heroCarousel .carousel-item {
    pointer-events: auto;
}

/* Fix any potential overlay issues */
#heroCarousel .carousel-item > * {
    pointer-events: auto;
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
}

.select-with-icon {
    position: relative;
    min-width: 100px;
}

.select-icon {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.8);
    z-index: 2;
    pointer-events: none;
    font-size: 0.8rem;
    width: 1rem;
    text-align: center;
}

.filter-controls select {
    border: none;
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    transition: background-color 0.2s ease;
    padding-left: 2rem !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-controls select:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
    background-color: rgba(255, 255, 255, 0.2);
}

.filter-controls select::-moz-focus-inner {
    border: 0;
}

.filter-controls .theme-toggle {
    margin-left: 2px;
}

@media (min-width: 992px) {
    .filter-controls .select-with-icon {
        flex: 0 0 auto;
        width: max-content;
        min-width: max-content;
    }

    .filter-controls select {
        width: auto;
        max-width: none;
        min-width: 0;
        padding-right: 1.9rem !important;
    }
}

/* ===== Navbar Button Consistency ===== */
.navbar .btn {
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    margin-top: 0;
    margin-bottom: 0;
}

.navbar .theme-toggle,
.navbar .btn-outline-light,
.navbar .btn-sm {
    height: 31px;
    min-height: 31px;
    max-height: 31px;
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

/* Navbar button icon consistency */
.navbar .btn i,
.navbar .theme-toggle i {
    font-size: 0.875rem;
}

.navbar .btn i + span {
    margin-left: 5px;
}

/* ===== Content Styling ===== */
nav#mainContent {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

/* Keep center column ending flush with sidebars by removing trailing spacing. */
#mainContent > :last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#mainContent > :last-child .widget-container:last-child,
#mainContent > :last-child .section-card:last-child,
#mainContent > :last-child .card:last-child {
    margin-bottom: 0 !important;
}

/* Apply the same trailing-spacing reset to both sidebars. */
#leftSidebar > :last-child,
#rightSidebar > :last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#leftSidebar > :last-child .widget-container:last-child,
#leftSidebar > :last-child .section-card:last-child,
#leftSidebar > :last-child .card:last-child,
#rightSidebar > :last-child .widget-container:last-child,
#rightSidebar > :last-child .section-card:last-child,
#rightSidebar > :last-child .card:last-child {
    margin-bottom: 0 !important;
}

#mainContent .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

#mainContent .table-responsive > .table {
    min-width: 100%;
}

/* Prevent competition table wrappers from pushing layout width */
#mainContent .table-responsive.mx-2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Keep long section headers from forcing card overflow */
#mainContent .card-header .d-flex {
    min-width: 0;
}

#mainContent .card-header h1,
#mainContent .card-header h2,
#mainContent .card-header h3,
#mainContent .card-header h4,
#mainContent .card-header h5,
#mainContent .card-header h6 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.section-card {
    border-left: 4px solid var(--team-primary);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    background-color: var(--bs-body-bg);
    overflow: hidden;
    border-radius: 0.375rem;
    padding: 0 !important;
    contain: paint;
}

#match-comments.section-card,
#article-comments.section-card {
    position: relative;
    z-index: 20;
    overflow: visible;
    contain: none;
}

#match-comments.section-card .card-body,
#article-comments.section-card .card-body {
    overflow: visible;
}

#match-comments .dropdown,
#article-comments .dropdown {
    position: relative;
}

#match-comments .dropdown-menu,
#article-comments .dropdown-menu {
    z-index: 1080 !important;
}

.section-card:hover {
    transform: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.section-card .card-header,
.card-header {
    background-color: var(--team-primary);
    color: white;
    border: none !important;
    border-bottom: none !important;
    padding: 0.25rem 0.6rem;
    margin: -1px -1px 0 -1px;
    border-radius: 0 !important;
    position: relative;
    z-index: 1;
    width: calc(100% + 2px);
    box-shadow: none !important;
}

.card-header:first-child {
    border-radius: 0 !important;
}

.section-card .card-body {
    position: relative;
    z-index: 0;
}

/* Standardize collapsible section headers */
.card-header,
.card-header.collapsed {
    padding: 0.50rem 0.50rem !important; /* Ensure consistent padding */
    transition: background-color 0.3s ease;
}

/* Remove unwanted transitions on collapse */
.card-header .d-flex {
    position: relative;
}

/* Only add right padding when collapse button exists */
.card-header .d-flex:has(.btn-collapse) {
    padding-right: 30px; /* Reserve space for collapse button */
}

/* Ensure header content doesn't shift */
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    margin-bottom: 0;
    flex-grow: 1;
}

/* Fixed position for collapse button */
.card-header .btn-collapse {
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

/* Ensure section actions without collapse button align to the right properly */
.section-actions.ms-auto {
    margin-left: auto !important;
}

/* ===== Match Card Styles ===== */
.match-card {
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all var(--transition-speed) ease;
}

.match-card-no-shadow {
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,0.125);
}

.match-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.match-card-no-shadow:hover {
    box-shadow: none !important;
    transform: translateY(0);
    border-color: rgba(0,0,0,0.2);
}

.match-win {
    border-left: 4px solid var(--theme-success) !important;
}

.match-loss {
    border-left: 4px solid var(--theme-danger) !important;
}

.match-draw {
    border-left: 4px solid var(--theme-warning) !important;
}


.match-card:hover {
    transform: scale(1.05);
}

.match-card .card-body {
    padding: 1.25rem;
    position: relative;
}

.match-card .card-footer {
    padding: 0.5rem 1rem;
    background-color: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
    transition: background-color var(--transition-speed) ease;
}

/* ===== Custom Button Sizes ===== */
.btn-xs {
    --bs-btn-padding-y: 0.10rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.8rem;
    --bs-btn-border-radius: 0.25rem;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-size: var(--bs-btn-font-size);
    border-radius: var(--bs-btn-border-radius);
    line-height: 1.3;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
}

.btn-xs i {
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
}

.btn-xs .follow-text {
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
}

.btn-xs .badge {
    font-size: 0.7rem;
    padding: 0.10rem 0.5rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: baseline;
    align-self: center;
}

.btn-xs .follow-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    text-align: center;
    line-height: 1.2;
    align-self: center;
}

.card-header h6 {
    line-height: 1.5;
}

.card-header .section-actions {
    display: flex;
    align-items: center;
}

/* More compact button styling in match cards */
.btn-group {
    display: flex;
    gap: 0.5rem;
}

/* ===== Bootstrap Button Theme Overrides (matching admin) ===== */
.btn {
    transition: all 0.3s ease;
}

.btn:focus {
    box-shadow: none;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-primary {
    background-color: var(--team-primary);
    border-color: var(--team-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--team-secondary);
    border-color: var(--team-secondary);
}

.btn-outline-primary {
    color: var(--team-primary);
    border-color: var(--team-primary);
}

.btn-outline-primary:hover {
    background-color: var(--team-primary);
    color: white;
}

/* Normalize icon size inside buttons, badges and alerts - match admin */
.badge i.fas,
.badge i.far,
.alert i.fas,
.alert i.far,
.btn i.fas,
.btn i.far {
    font-size: 0.875em;
}

/* Action icon semantic colors - match admin */
.action-add,
.action-edit,
.action-upload,
.action-save {
    color: var(--theme-success);
}

.action-delete,
.action-remove {
    color: var(--theme-danger);
}

/* Dropdown item icon colors - match admin */
.dropdown-item .fa-edit,
.dropdown-item .fa-pen,
.dropdown-item .fa-pencil-alt,
.dropdown-item .fa-save {
    color: var(--theme-success);
}

.dropdown-item .fa-trash-alt,
.dropdown-item .fa-trash,
.dropdown-item .fa-times {
    color: var(--theme-danger);
}

/* ===== Enhanced Match Box Styling ===== */
.compact-match-box {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.compact-match-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.2);
}

.club-name {
    font-weight: 600;
    color: white;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.match-time {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* ===== List and Link Styles ===== */
.stat-link {
    text-decoration: none;
    transition: all var(--transition-speed);
}

.stat-link:hover {
    text-decoration: underline;
}

.list-group-item {
    transition: all 0.2s ease;
}

.list-group-item:hover {
    background-color: rgba(var(--team-primary-rgb), 0.05);
}

.list-group-item.active {
    background-color: var(--team-primary);
    border-color: var(--team-primary);
}

.player-link {
    color: var(--bs-body-color);
    font-weight: 500;
    transition: all 0.2s ease;
}

.player-link:hover {
    color: var(--team-primary);
}

/* ===== Sidebar Styles ===== */
.sidebar-column {
    position: relative;
    z-index: 1000;
}

.theme-toggle {
    cursor: pointer;
    max-height: 31px;
    padding: 0.25rem 0.5rem;
    min-width: 31px;
}

/* Mobile sidebar toggle button */
.sidebar-toggle {
    display: inline-block;
    font-weight: 500;
    color: #fff;
    background-color: var(--team-primary);
    border: 1px solid var(--team-primary);
    transition: all var(--transition-speed) ease;
}

.sidebar-toggle:hover, 
.sidebar-toggle:focus {
    background-color: var(--team-secondary);
    border-color: var(--team-secondary);
    color: #fff;
}

/* Mobile sidebar behavior */
@media (max-width: 767.98px) {
    [data-sidebar-column] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease;
    }
    
    [data-sidebar-column].show {
        max-height: 2000px;
    }
    
    /* ===== Mobile Navigation Button Fixes ===== */
    /* Ensure login/register button container maintains flex layout */
    .navbar .ms-2 {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    
    /* Login/register buttons mobile styling */
    .navbar .ms-2 .btn-sm {
        min-width: auto;
        padding: 0.25rem 0.5rem;
        flex-shrink: 0;
    }
    
    /* Ensure icons are visible on mobile */
    .navbar .ms-2 .btn-sm i {
        margin: 0;
    }
    
    /* Specific spacing for login button */
    .navbar .ms-2 .btn-outline-light {
        margin-right: 0.25rem;
    }
    
    /* Mobile navbar right section alignment */
    .navbar-nav + .filter-controls {
        flex-wrap: nowrap;
        align-items: center;
    }
    
    /* Theme toggle button mobile spacing */
    .theme-toggle {
        margin-left: 0.25rem !important;
    }
}

/* ===== Ranking Table Styles ===== */
.ranking-table {
    border-radius: 8px;
    overflow: hidden;
}

.ranking-table-header {
    background-color: var(--theme-surface-2);
    color: #333;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px
}

.ranking-table tbody tr {
    transition: all 0.2s ease;
}

.ranking-table tbody tr:hover {
    background-color: rgba(var(--team-primary-rgb), 0.1);
}

.ranking-number {
    font-weight: 700;
}

/* Ranking colors */
.rank-1 {
    color: #ffd700; /* Gold */
}

.rank-2 {
    color: #c0c0c0; /* Silver */
}

.rank-3 {
    color: #cd7f32; /* Bronze */
}

/* Top ranking backgrounds */
.ranking-top1 {
    background-color: rgba(176, 27, 29, 0.1);
}

.ranking-top2 {
    background-color: rgba(0, 0, 0, 0.1);
}

.ranking-top3 {
    background-color: rgba(205, 127, 50, 0.1);
}

.ranking-badge {
    background-color: var(--theme-ink-muted);
    color: #fff;
    font-weight: 500;
    min-width: 26px;
    transition: all 0.2s ease;
}

.ranking-top1 .ranking-badge {
    background-color: var(--team-primary);
    color: #fff;
}

.ranking-top2 .ranking-badge {
    background-color: var(--team-secondary);
    color: #fff;
}

.ranking-top3 .ranking-badge {
    background-color: #888;
    color: #fff;
}

/* ===== Stats Tab Styles ===== */
.stats-tabs .nav-tabs {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    display: flex;
    justify-content: space-around; /* Changed from space-between to space-around for better distribution */
    background-color: var(--theme-surface-2);
    padding: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;
}

.stats-tabs .nav-item {
    flex: 1;
    display: flex;
    margin: 0;
    padding: 0;
    max-width: 20%; /* Limit maximum width of each tab */
}

.stats-tabs .nav-link {
    margin: 0;
    border: none;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px; /* Reduced from 44px */
    padding: 0.25rem; /* Reduced padding */
    min-width: 40px; /* Ensure minimum width for icon */
    border-radius: 0;
    background: var(--theme-surface-2);
    position: relative;
    overflow: visible;
}

/* Hide tab text, show only icons */
.stats-tabs .nav-link .tab-text {
    display: none;
}

.stats-tabs .nav-link i {
    font-size: 1.1rem; /* Slightly reduced font size */
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
    padding: 0;
}

.stats-tabs .nav-item:first-child .nav-link {
    border-top-left-radius: 4px;
}

.stats-tabs .nav-item:last-child .nav-link {
    border-top-right-radius: 4px;
    border-right: none;
}

/* Increase scaling effect on active tab for better visual indication */
.stats-tabs .nav-link.active i {
    transform: scale(1.15);
}

.stats-tabs .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--team-primary);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.stats-tabs .nav-link.active {
    color: var(--team-primary);
    background-color: var(--bs-body-bg);
    box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
    position: relative;
    z-index: 1;
}

.stats-tabs .nav-link.active::after {
    transform: scaleX(1);
}

.stats-tabs .nav-link.active i {
    transform: scale(1.15);
}

.stats-tabs .nav-link:hover:not(.active) {
    background-color: rgba(var(--team-primary-rgb), 0.05);
}

.stats-tabs .nav-link:hover:not(.active)::after {
    transform: scaleX(0.5);
    background-color: rgba(var(--team-primary-rgb), 0.3);
}

.stats-tabs .tab-content {
    background-color: var(--bs-body-bg);
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.stats-tabs-no-shadow .tab-content {
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,0.125);
    border-top: none;
}

/* Icon-specific styles */

.stats-tabs .nav-link i.fa-shirt {
    color: var(--theme-danger);
}

.stats-tabs .nav-link i.fa-futbol {
    color: var(--theme-success);
}

.stats-tabs .nav-link i.fa-goal-assist-mask {
    color: var(--theme-info);
}

.stats-tabs .nav-link i.fa-star {
    color: var(--theme-warning);
}

/* Enhance active state */
.stats-tabs .nav-link.active i {
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.2));
}

/* Dark mode adjustments */
[data-bs-theme=dark] .stats-tabs .nav-link i.fa-shirt {
    color: var(--theme-primary-300);
    filter: brightness(1.2);
}

[data-bs-theme=dark] .stats-tabs .nav-link i.fa-futbol {
    color: var(--theme-success-subtle);
    filter: brightness(1.2);
}

[data-bs-theme=dark] .stats-tabs .nav-link i.fa-goal-assist-mask {
    color: #1dd5f5;
    filter: brightness(1.2);
}

[data-bs-theme=dark] .stats-tabs .nav-link i.fa-star {
    color: var(--theme-accent-300);
    filter: brightness(1.2);
}

/* Match Rating specific styles */
.ranking-badge.bg-warning {
    background-color: var(--theme-warning) !important;
    color: #000 !important;
    font-weight: 600;
}

.ranking-badge.bg-warning i {
    font-size: 0.75rem;
    margin-right: 2px;
}

.ranking-top1 .ranking-badge.bg-warning,
.ranking-top2 .ranking-badge.bg-warning,
.ranking-top3 .ranking-badge.bg-warning {
    background-color: var(--theme-warning) !important;
    color: #000 !important;
}

[data-bs-theme=dark] .ranking-badge.bg-warning {
    background-color: var(--theme-warning) !important;
    color: #000 !important;
}

/* Match count and votes info */
.ranking-table .text-muted.small {
    font-size: 0.7rem;
    margin-top: 2px;
    line-height: 1.2;
}

/* ===== Utility Styles ===== */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: block;
    z-index: 1055; /* above Bootstrap dropdowns (1030), modals (1050), below tooltips (1070) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-speed) ease,
                visibility var(--transition-speed) ease,
                transform var(--transition-speed) ease,
                background-color var(--transition-speed) ease;
    background-color: var(--team-primary);
    color: white;
    border: none;
    box-shadow: none;
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#back-to-top:hover {
    background: linear-gradient(180deg, var(--benfica-gold, #f4b323), var(--theme-accent-700));
    transform: translateY(-3px);
}

#back-to-top i {
    color: var(--theme-accent-700);
    transition: color var(--transition-speed) ease;
}

#back-to-top:hover i {
    color: var(--team-primary, #C8102E);
}

.tooltip {
    font-size: 0.85rem;
    z-index: 1050;
}

/* ===== Dark Theme Styles ===== */
[data-bs-theme=dark] {
    --bs-body-bg: var(--theme-canvas);
    --bs-body-color: var(--theme-ink);
}

[data-bs-theme=dark] .card {
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
}

[data-bs-theme=dark] .card-header {
    background-color: var(--team-primary);
    color: white;
    border-bottom: none;
}

[data-bs-theme=dark] .section-card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    border-radius: 0.375rem;
    overflow: hidden;
}

[data-bs-theme=dark] .section-card .card-header {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

[data-bs-theme=dark] .stats-tabs .nav-tabs {
    background-color: #222;
    border-color: #333;
}

[data-bs-theme=dark] .stats-tabs .nav-link {
    color: var(--theme-ink);
    background-color: #222;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

[data-bs-theme=dark] .stats-tabs .nav-link.active {
    color: #fff;
    background-color: #333;
}

[data-bs-theme=dark] .stats-tabs .nav-link.active::after {
    background-color: var(--team-primary);
}

[data-bs-theme=dark] .stats-tabs .tab-content {
    background-color: #333;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    border-color: #333;
}

[data-bs-theme=dark] .stats-tabs-no-shadow .tab-content {
    box-shadow: none !important;
    border: 1px solid #333;
    border-top: none;
}

[data-bs-theme=dark] .ranking-table-header {
    background-color: #333;
    color: var(--theme-ink);
}

[data-bs-theme=dark] .match-scoreboard .card-footer {
    background-color: var(--theme-surface-2);
    border-color: var(--theme-border-strong);
    color: var(--theme-ink);
}

[data-bs-theme=dark] .match-card {
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
}

[data-bs-theme=dark] .match-card-no-shadow {
    border-color: #333;
}

[data-bs-theme=dark] .match-card-no-shadow:hover {
    border-color: #444;
}

[data-bs-theme=dark] .match-card .card-footer {
    background-color: var(--theme-surface-2);
    border-color: #333;
    color: var(--theme-ink);
}

[data-bs-theme=dark] .list-group-item {
    background-color: #222;
    border-color: #333;
    color: var(--theme-ink);
}

[data-bs-theme=dark] .list-group-item:hover {
    background-color: var(--theme-surface-3);
}

[data-bs-theme=dark] .navbar-sticky {
    background-color: var(--theme-canvas); /* Match admin dark navbar color */
}

[data-bs-theme=dark] .dropdown-menu {
    background-color: #222;
    border: 1px solid #444; /* Consistent border on all sides */
    border-left: 4px solid var(--team-primary); /* Keep the left accent border */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border-radius: 0 0.375rem 0.375rem 0;
}

[data-bs-theme=dark] .dropdown-item {
    color: var(--theme-ink);
}

[data-bs-theme=dark] .dropdown-item:hover,
[data-bs-theme=dark] .dropdown-item:focus,
[data-bs-theme=dark] .dropdown-item:active {
    background-color: rgba(var(--team-primary-rgb), 0.2);
    color: #fff;
}

[data-bs-theme=dark] .dropdown-menu .active {
    background-color: rgba(var(--team-primary-rgb), 0.3);
    color: #fff;
}

/* Ensure dropdown items with icons maintain proper styling in dark mode */
[data-bs-theme=dark] .dropdown-item i,
[data-bs-theme=dark] .dropdown-item .fas,
[data-bs-theme=dark] .dropdown-item .fab,
[data-bs-theme=dark] .dropdown-item .far {
    opacity: 0.9;
    color: var(--theme-ink);
}

/* Force Bootstrap dropdown positioning to work correctly */
.dropdown-menu {
    position: absolute !important;
}

/* On mobile, ensure dropdowns work with Bootstrap's positioning */
/* ===== Mobile Inline Quick-Links (full nav visible in navbar on tablet/mobile) ===== */
/* The wrap is a flex item that fills all space between brand and the right-side actions.
   overflow-x:auto lives here so the inner ul can stay overflow:visible for dropdowns. */
.mobile-inline-quicklinks-wrap {
    flex: 1 1 0;
    min-width: 0;
    overflow: visible;
    position: relative;
}

/* Fade-right effect via pseudo-element — avoids mask-image which would trap
   position:fixed descendants (like the Stats dropdown) inside a local containing block */
.mobile-inline-quicklinks-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--team-primary));
    z-index: 1;
}

.mobile-inline-quicklinks-wrap::-webkit-scrollbar {
    display: none;
}

.mobile-inline-quicklinks {
    gap: 0;
    flex-wrap: nowrap;
    overflow: visible;
}

.mobile-inline-quicklinks .nav-link {
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.mobile-iqk-label {
    display: none;
}

@media (min-width: 768px) {
    .mobile-iqk-label {
        display: inline;
        margin-left: 0.25rem;
    }
}

@media (max-width: 767.98px) {
    .mobile-inline-quicklinks > .nav-item:nth-child(n+3) {
        display: none !important;
    }
}

/* Right-side actions must never shrink or wrap — always pinned to the right edge */
@media (max-width: 1199.98px) {
    #mobile-native-actions-host {
        flex-shrink: 0;
    }
}

@media (max-width: 1199.98px) {
    /* Force proper rendering for mobile dropdowns */
    .navbar-nav .dropdown-menu.show {
        position: absolute !important;
        display: block !important;
        transform: none !important;
        inset: auto !important;
        min-width: 160px !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        top: 100% !important;
        z-index: 1000 !important;
        max-width: calc(100vw - 30px) !important;
    }
    
    /* Left-aligned dropdowns (like Stats) */
    .navbar-nav .dropdown-menu.show:not(.dropdown-menu-end) {
        left: 0 !important;
        right: auto !important;
    }
    
    /* Right-aligned dropdowns - force to stay on screen */
    .navbar-nav .dropdown-menu.show.dropdown-menu-end {
        right: 15px !important;
        left: auto !important;
        transform: translateX(0) !important;
    }

    /* Stats dropdown in the inline quicklinks — uses data-bs-display=static (no Popper),
       so we position it with fixed to fully escape the overflow-x:clip + mask stacking context */
    .mobile-inline-quicklinks .dropdown-menu.show {
        position: fixed !important;
        top: var(--mobile-inline-dropdown-top, calc(var(--navbar-height) + 0px)) !important;
        left: var(--mobile-inline-dropdown-left, 1rem) !important;
        margin-top: 0 !important;
        right: auto !important;
        transform: none !important;
        z-index: 1070 !important;
        width: max-content !important;
        min-width: 160px !important;
        max-width: calc(100vw - 2rem) !important;
        overflow: visible !important;
    }
}

/* Ensure dropdown items render properly */
.dropdown-item {
    display: block !important;
    width: 100% !important;
    padding: 0.25rem 1rem !important;
    clear: both !important;
    font-weight: 400 !important;
    color: var(--bs-body-color) !important;
    text-align: inherit !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    border: 0 !important;
    line-height: 1.5 !important;
    min-height: auto !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-tertiary-bg) !important;
}

/* Logo styles for dynamic menus - Applied to all menu logos */
.navbar img,
.dropdown-menu img,
.nav img,
.navbar-nav img,
.dropdown-item img,
.menu-logo,
.nav-logo,
.dropdown-logo {
    transition: all 0.2s ease;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.1));
    border-radius: 2px;
}

.navbar .dropdown-item:hover img,
.dropdown-menu .dropdown-item:hover img,
.nav .dropdown-item:hover img,
.navbar-nav .dropdown-item:hover img,
.dropdown-item:hover .menu-logo,
.dropdown-item:hover .nav-logo,
.dropdown-item:hover .dropdown-logo {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}

/* Specific logo sizing - Applied to all menu contexts */
.menu-logo.competition,
.nav-logo.competition,
.dropdown-logo.competition {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.menu-logo.small,
.nav-logo.small,
.dropdown-logo.small {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.team-logo-medium,
.menu-logo.medium,
.nav-logo.medium,
.dropdown-logo.medium {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Standard menu logo size (default) */
.menu-logo,
.nav-logo,
.dropdown-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .team-logo-medium,
    .menu-logo.medium,
    .nav-logo.medium,
    .dropdown-logo.medium {
        width: 20px;
        height: 20px;
    }
    
    .menu-logo.competition,
    .menu-logo.small,
    .nav-logo.competition,
    .nav-logo.small,
    .dropdown-logo.competition,
    .dropdown-logo.small,
    .menu-logo,
    .nav-logo,
    .dropdown-logo {
        width: 16px;
        height: 16px;
    }
}

/* Active dropdown item styling */
.dropdown-item.active {
    background-color: var(--team-primary) !important;
    color: white !important;
}

.dropdown-item.active:hover,
.dropdown-item.active:focus {
    background-color: var(--team-secondary) !important;
    color: white !important;
}

/* Fix for notification and user dropdown content */
.notification-menu,
.user-dropdown-menu {
    min-height: 150px !important;
    overflow: visible !important;
}

.notification-menu .dropdown-item,
.user-dropdown-menu .dropdown-item {
    white-space: normal !important;
    word-wrap: break-word !important;
    padding: 0.5rem 1rem !important;
}

/* Ensure dropdown menu has proper sizing */
.dropdown-menu {
    min-height: 50px !important;
    padding: 0.5rem 0 !important;
}

/* Fix notification dropdown specific styling */
.notification-menu {
    padding: 0.75rem 0 !important;
}

.notification-menu .dropdown-item {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--theme-surface-3);
}

.notification-menu .dropdown-item:last-child {
    border-bottom: none;
}

/* Dark theme specific styling for tables */
[data-bs-theme=dark] table {
    color: var(--theme-ink);
}

[data-bs-theme=dark] .table {
    --bs-table-color: var(--theme-ink);
    --bs-table-striped-color: var(--theme-ink);
    --bs-table-active-color: #fff;
    --bs-table-hover-color: #fff;
    --bs-table-bg: var(--theme-surface);
    --bs-table-striped-bg: var(--theme-surface-2);
    --bs-table-hover-bg: var(--theme-border);
    --bs-table-active-bg: var(--theme-border);
    --bs-table-border-color: #333;
}

[data-bs-theme=dark] .stats-tabs .nav-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Dark theme button styling */
[data-bs-theme=dark] .btn-light,
[data-bs-theme=dark] .btn-outline-light {
    color: var(--theme-ink);
    border-color: #444;
    background-color: #333;
}

[data-bs-theme=dark] .btn-light:hover,
[data-bs-theme=dark] .btn-outline-light:hover {
    color: #fff;
    background-color: #444;
    border-color: #555;
}

/* Navbar toggles stay transparent in dark mode, matching light mode appearance */
[data-bs-theme=dark] .navbar .btn-outline-light {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

[data-bs-theme=dark] .navbar .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

[data-bs-theme=dark] .cta-button,
[data-bs-theme=dark] .compact-button {
    background-color: #333;
    color: #fff;
    border: 1px solid #444;
}

[data-bs-theme=dark] .cta-button:hover,
[data-bs-theme=dark] .compact-button:hover {
    background-color: var(--team-primary);
    color: #fff;
    border-color: var(--team-primary);
}

/* Form controls in dark theme */
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select {
    background-color: #333;
    border-color: #444;
    color: var(--theme-ink);
}

[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
    background-color: var(--theme-border-strong);
    border-color: var(--team-primary);
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(var(--team-primary-rgb), 0.25);
}

/* Focus states for dark theme */
[data-bs-theme=dark] .btn:focus,
[data-bs-theme=dark] .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--team-primary-rgb), 0.25);
}

/* ===== Dark Theme - News Styles ===== */
[data-bs-theme=dark] .featured-news-section {
    background: transparent;
}

[data-bs-theme=dark] .hover-bg-light:hover {
    background-color: var(--theme-surface-3) !important;
}

[data-bs-theme=dark] .featured-hero-card,
[data-bs-theme=dark] .featured-sidebar-item {
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
}

[data-bs-theme=dark] .featured-hero-card:hover,
[data-bs-theme=dark] .featured-sidebar-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme=dark] .card .card-footer.bg-transparent {
    border-top-color: var(--theme-border);
}

/* ===== Helper Classes ===== */
.text-team-primary {
    color: var(--team-primary) !important;
}

.text-team-secondary {
    color: var(--team-secondary) !important;
}

.bg-team-primary {
    background-color: var(--team-primary) !important;
    color: white !important;
}

.bg-team-secondary {
    background-color: var(--team-secondary) !important;
    color: white !important;
}

.team-gradient {
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%) !important;
    color: white !important;
}

.border-team-primary {
    border-color: var(--team-primary) !important;
}

.border-team-secondary {
    border-color: var(--team-secondary) !important;
}

/* Print styles */
@media print {
    .navbar-sticky,
    .sidebar-column,
    #back-to-top,
    .no-print {
        display: none !important;
    }
    
    body {
        padding-top: 0 !important;
    }
    
    .container, 
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .hero-header {
        background: none !important;
        color: #000 !important;
        padding: 0 !important;
    }
    
    .hero-content-inner {
        max-width: 100% !important;
    }
    
    .match-card,
    .section-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    
    .stats-tabs .nav-tabs {
        display: none !important;
    }
    
    .stats-tabs .tab-content > .tab-pane {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Fix for iOS Safari viewport issues */
@supports (-webkit-touch-callout: none) {
    .team-gradient-bg {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    
    #hero-container {
        width: 100%;
    }
    
    .hero-content-inner {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Notification System Styles */
.notification-dropdown .dropdown-menu {
    width: 350px;
    max-height: 500px;
    overflow-y: auto;
    border: none;
    border-radius: 0.5rem;
}

.notification-dropdown .dropdown-toggle::after {
    display: none;
}

.notification-dropdown > .nav-link {
    padding: 0.25rem 0.45rem;
    line-height: 1;
}

.notification-dropdown > .nav-link .fa-bell {
    font-size: 0.9rem;
}

.notification-menu .notification-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.notification-menu .notification-header-title {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    margin: 0;
    text-align: left;
    white-space: nowrap;
}

.notification-menu .notification-header-title i {
    margin-right: 0 !important;
    flex: 0 0 auto;
}

/* Keep notification dropdown primary actions/icons consistent with admin palette */
.notification-menu .text-primary {
    color: var(--team-primary) !important;
}

.notification-menu .btn-primary {
    background-color: var(--team-primary);
    border-color: var(--team-primary);
}

.notification-menu .btn-primary:hover,
.notification-menu .btn-primary:focus {
    background-color: var(--team-secondary);
    border-color: var(--team-secondary);
}

.notification-menu .badge.bg-primary {
    background-color: var(--team-primary) !important;
}

/* .notification-badge styling now lives in ONE place: the inline nav CSS emitted by
   renderNavigationSharedLayoutCss/notification control in includes/navigation_functions.php.
   Do not re-style it here — split definitions caused conflicting overrides. */

.notification-dropdown .notification-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Hover effects for notification items */
.notification-dropdown .dropdown-item {
    transition: background-color 0.2s ease;
    border-left: 3px solid transparent;
}

.notification-dropdown .dropdown-item:not(.is-read) {
    border-left-color: var(--bs-primary);
}

.notification-dropdown .dropdown-item:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* Notification list page styles */
.list-group-item.bg-light-hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    border-left: 3px solid var(--bs-primary);
}

/* Improve spacing on notification dropdowns */
.notification-scrollable {
    max-height: 350px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.notification-scrollable::-webkit-scrollbar {
    width: 6px;
}

.notification-scrollable::-webkit-scrollbar-track {
    background: var(--theme-surface-2);
}

.notification-scrollable::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* Default Tabs */
.default-tabs {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-bottom: 6px;
}

/* scrollbar-width above already hides it in Firefox; these two rules were
   re-drawing one in WebKit, against the site-wide * rule at the top of this
   file. The tabs scroll by drag and by keyboard either way. */
.default-tabs::-webkit-scrollbar {
    height: 0;
    display: none;
}

.default-tabs .nav-item .nav-link {
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 5px 5px 0 0;
    font-weight: 500;
    padding: 8px 12px;
    margin-right: 3px;
    white-space: nowrap;
    transition: all 0.2s;
}

.default-tabs .nav-item .nav-link:hover {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

.default-tabs .nav-item .nav-link.active {
    color: var(--team-primary);
    background-color: var(--bs-body-bg);
    border-color: var(--team-primary) var(--bs-border-color) var(--bs-body-bg);
    border-top-width: 3px;
    margin-bottom: -6px;
    position: relative;
    z-index: 1;
}

.default-tabs .nav-item .nav-link.active:after {
    display: none;
}

@media (max-width: 767px) {
    .default-tabs .nav-item .nav-link {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

/* ===== Live Match Indicator Styles ===== */
.live-indicator {
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%);
    animation: pulse-live 2s infinite;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.live-indicator::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 3s infinite;
}

.live-indicator i {
    animation: rotate-ball 2s infinite ease-in-out;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

@keyframes pulse-live {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes rotate-ball {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* ===== Calendar subscription CTA (Fixtures & Results) ===== */
.calendar-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid rgba(var(--team-primary-rgb), 0.18);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--team-primary-rgb), 0.07), rgba(var(--team-primary-rgb), 0.02));
}

.calendar-cta-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--team-primary);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 3px 8px rgba(var(--team-primary-rgb), 0.35);
}

.calendar-cta-body {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
    margin-right: auto;
}

.calendar-cta-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--bs-body-color);
}

.calendar-cta-text {
    font-size: 0.82rem;
    color: var(--bs-secondary-color);
}

.calendar-cta-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Card / List view toggle joined as one segmented control */
.calendar-cta-seg {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.calendar-cta-seg .calendar-cta-btn {
    border-radius: 0;
}

.calendar-cta-seg .calendar-cta-btn:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.calendar-cta-seg .calendar-cta-btn:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.calendar-cta-seg .calendar-cta-btn + .calendar-cta-btn {
    margin-left: -1px;
}

.calendar-cta-seg .calendar-cta-btn--solid {
    position: relative;
    z-index: 1;
}

/* Subscribe — green */
.calendar-cta-btn--green {
    background: var(--theme-success);
    color: #fff;
}

.calendar-cta-btn--green:hover {
    background: var(--theme-success-strong);
    color: #fff;
    transform: translateY(-1px);
}

/* Card / List toggle + collapse — silver */
.calendar-cta-seg .calendar-cta-btn--ghost,
.calendar-cta-btn--silver {
    background: #eceef0;
    color: #565b61;
    border-color: #cfd4da;
}

.calendar-cta-seg .calendar-cta-btn--ghost:hover,
.calendar-cta-btn--silver:hover {
    background: #e1e4e7;
    color: var(--theme-ink);
}

.calendar-cta-seg .calendar-cta-btn--solid {
    background: linear-gradient(180deg, #dadee2, #c2c8cf);
    color: var(--theme-ink);
    border-color: #b3bac1;
}

.calendar-cta-seg .calendar-cta-btn--solid:hover {
    background: linear-gradient(180deg, #d0d5da, #b7bdc4);
    color: var(--theme-ink);
}

.calendar-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    transition: all 0.2s ease;
}

.calendar-cta-btn--solid {
    background: var(--team-primary);
    color: #fff;
}

.calendar-cta-btn--solid:hover {
    background: var(--team-secondary);
    color: #fff;
    transform: translateY(-1px);
}

.calendar-cta-btn--ghost {
    background: transparent;
    color: var(--team-primary);
    border-color: rgba(var(--team-primary-rgb), 0.35);
}

.calendar-cta-btn--ghost:hover {
    background: rgba(var(--team-primary-rgb), 0.08);
    color: var(--team-primary);
}

@media (max-width: 575.98px) {
    .calendar-cta {
        flex-wrap: wrap;
    }
    /* Icon + text stay together on the first row */
    .calendar-cta-body {
        flex: 1 1 0;
        min-width: 0;
    }
    /* All actions drop to a full-width block below */
    .calendar-cta-actions {
        order: 3;
        flex: 1 1 100%;
        margin-top: 8px;
        justify-content: flex-start;
    }
    /* Subscribe + .ics share one row (50/50) */
    .calendar-cta-actions > .calendar-cta-btn--green,
    .calendar-cta-actions > .calendar-cta-btn--ghost {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
    }
    /* Card/List toggle stretches; collapse stays compact on the next row */
    .calendar-cta-seg {
        flex: 1 1 auto;
    }
    .calendar-cta-seg .calendar-cta-btn {
        flex: 1 1 0;
        justify-content: center;
    }
    #toggle-all-btn {
        flex: 0 0 auto;
    }
}

/* Hover effect for live indicator */
.live-indicator:hover {
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.live-indicator:hover i {
    animation: rotate-ball 0.5s infinite ease-in-out;
}

/* Countdown expired state */
.countdown-expired {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

/* Live countdown state */
.countdown-live .live-indicator {
    margin: 0 auto;
    display: inline-block;
}

/* ===== Enhanced Mega Menu Styles ===== */
/* Position static for mega menu to break out of normal dropdown constraints */
.dropdown.position-static .dropdown-menu {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 100% !important;
    margin-top: 0 !important;
    width: auto !important;
    min-width: 800px !important;
    max-width: 1200px !important;
}

/* Fix regular dropdown positioning */
.navbar .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    z-index: 1020 !important;
    min-width: 200px;
}

/* Ensure proper navbar item positioning */
.navbar .nav-item.dropdown {
    position: relative !important;
}

/* Override Bootstrap's dropdown positioning */
.navbar .dropdown-toggle::after {
    margin-left: 0.5rem;
}

/* Ensure dropdowns don't interfere with each other */
.navbar .nav-item.dropdown:not(.position-static) {
    position: relative;
}

.navbar .nav-item.dropdown.position-static {
    position: static !important;
}

.navbar .nav-item.dropdown.position-static .mega-menu-container {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    z-index: 1050;
}

/* Fix any Bootstrap popper.js conflicts */
.navbar .dropdown-menu[data-bs-popper] {
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    transform: none !important;
}

/* ===== MODERN MEGA MENU ===== */

/* Mega menu container styling */
.mega-menu-container {
    border: none;
    border-radius: 14px;
    background: var(--bs-body-bg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.07);
    animation: mega-menu-slide-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    margin-left: 0 !important;
    margin-right: auto !important;
    min-width: 900px;
    max-width: 1200px;
    width: 1150px;
    border-top: 3px solid var(--team-primary);
}

/* Dark theme mega menu */
[data-bs-theme="dark"] .mega-menu-container {
    background: #1a1f2e;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
    color: var(--bs-body-color);
    border-top-color: var(--team-primary);
}

/* Mega menu header */
.mega-menu-header {
    background: linear-gradient(135deg, var(--team-primary) 0%, color-mix(in srgb, var(--team-primary) 65%, #000) 100%);
    position: relative;
    overflow: hidden;
    padding: 14px 20px !important;
}

.mega-menu-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.mega-menu-header h6 {
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 2;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
}

.mega-menu-header p {
    position: relative;
    z-index: 2;
    font-size: 0.78rem;
    opacity: 0.82;
}

.mega-menu-header .btn-light {
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 600;
    border: none;
    background: rgba(255,255,255,0.18);
    color: #fff;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
    position: relative;
    z-index: 2;
}

.mega-menu-header .btn-light:hover {
    background: rgba(255,255,255,0.30);
    color: #fff;
}

/* Mega menu content area */
.mega-menu-content {
    background: transparent;
    min-height: 180px;
    padding: 16px !important;
}

/* Menu column styling */
.menu-column {
    height: 100%;
    background: transparent;
    border-radius: 10px;
    padding: 12px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .menu-column {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255,255,255,0.03);
}

.menu-column:hover {
    background: var(--bs-tertiary-bg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

[data-bs-theme="dark"] .menu-column:hover {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Menu column titles — accent-bar style */
.menu-column-title {
    font-size: 0.72rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

.menu-column-title .col-accent {
    display: inline-block;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Menu column content */
.menu-column-content {
    font-size: 0.85rem;
    min-height: 180px;
    overflow: hidden;
}

/* Prevent top-edge clipping on hover for cards in dynamic menu columns */
.menu-column-content[data-dynamic-menu] {
    overflow: visible;
    padding-top: 1px;
}

/* Menu columns for wider content */
.mega-menu-content .col-md-4 .menu-column {
    min-width: 280px;
}

/* Quick Access section */
.mega-menu-content .col-12 .menu-column-content {
    min-height: auto;
    overflow: visible;
    padding-top: 1px;
}

.mega-menu-content .col-12 .quick-link-item {
    margin-bottom: 0;
}

/* Loading state for menu columns */
.menu-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--theme-ink-muted);
    font-size: 0.8rem;
}

.menu-loading i {
    margin-right: 8px;
}

/* Quick link items */
.quick-link-item {
    transition: transform 0.18s ease;
    margin-bottom: 6px !important;
}

.quick-link-item:hover {
    transform: translateY(-1px);
}

.quick-link-item .d-flex {
    transition: background 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 10px !important;
    padding: 8px 10px !important;
    font-size: 0.8rem;
}

[data-bs-theme="dark"] .quick-link-item .d-flex {
    border-color: rgba(255,255,255,0.08);
}

/* Icon circle for quick access */
.quick-link-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}

/* Quick link hover effects */
.quick-link-item .hover-bg-primary:hover {
    background: rgba(var(--team-primary-rgb), 0.08) !important;
    border-color: rgba(var(--team-primary-rgb), 0.25) !important;
    box-shadow: 0 2px 8px rgba(var(--team-primary-rgb), 0.12) !important;
}

.quick-link-item .hover-bg-success:hover {
    background: rgba(25, 135, 84, 0.08) !important;
    border-color: rgba(25, 135, 84, 0.25) !important;
    box-shadow: 0 2px 8px rgba(25, 135, 84, 0.12) !important;
}

.quick-link-item .hover-bg-warning:hover {
    background: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.12) !important;
}

.quick-link-item .hover-bg-info:hover {
    background: rgba(13, 202, 240, 0.08) !important;
    border-color: rgba(13, 202, 240, 0.25) !important;
    box-shadow: 0 2px 8px rgba(13, 202, 240, 0.12) !important;
}

/* Transition utility */
.transition-all {
    transition: all 0.2s ease;
}

/* Mega menu footer */
.mega-menu-footer {
    background: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color-translucent);
    padding: 8px 16px !important;
    min-height: 42px;
}

[data-bs-theme="dark"] .mega-menu-footer {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255, 255, 255, 0.07);
}

.mega-menu-footer a {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color 0.18s ease;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid transparent;
}

.mega-menu-footer a:hover {
    color: var(--team-primary);
    background: rgba(var(--team-primary-rgb), 0.07);
    border-color: rgba(var(--team-primary-rgb), 0.18);
}

.mega-menu-footer .gap-3 {
    gap: 0.4rem !important;
}

.mega-menu-footer .d-flex.align-items-center {
    min-height: 36px;
}

/* Sync pulse dot */
.sync-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--theme-success-subtle);
    display: inline-block;
    flex-shrink: 0;
    animation: sync-pulse 2.4s ease-in-out infinite;
}

@keyframes sync-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.75); }
}

/* Dynamic content within mega menu */
.mega-menu-container .dropdown-item {
    border: none;
    border-radius: 6px;
    margin-bottom: 3px;
    padding: 6px 10px;
    font-size: 0.8rem;
    transition: background 0.18s ease, color 0.18s ease;
    background: transparent;
    line-height: 1.3;
}

/* Modern match cards in mega menu */
.match-card {
    border-radius: 8px !important;
    border: 1px solid var(--bs-border-color-translucent) !important;
    background: var(--bs-body-bg) !important;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
    position: relative;
}

[data-bs-theme="dark"] .match-card {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

.match-card:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
    border-color: var(--bs-border-color) !important;
}

.match-card-result-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0;
}

.match-card-result-bar.result-win   { background: var(--theme-success-subtle); }
.match-card-result-bar.result-draw  { background: #94a3b8; }
.match-card-result-bar.result-loss  { background: var(--theme-danger); }

/* Prevent score clipping in Match Hub recent-results cards */
.mega-match-row {
    min-width: 0;
}

.mega-match-meta {
    min-width: 0;
}

.mega-match-opponent {
    min-width: 0;
}

.mega-match-opponent-name {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mega-match-score-wrap {
    min-width: 3.2rem;
    flex-shrink: 0;
}

.mega-match-score {
    white-space: nowrap;
}

/* Modern player cards in mega menu */
.player-card {
    border-radius: 8px !important;
    border: 1px solid var(--bs-border-color-translucent) !important;
    background: var(--bs-body-bg) !important;
    transition: box-shadow 0.18s ease;
}

[data-bs-theme="dark"] .player-card {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

.player-card:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}

.player-rank-badge {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(var(--team-primary-rgb), 0.12);
    color: var(--team-primary);
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.player-rank-badge.rank-1 {
    background: rgba(234, 179, 8, 0.15);
    color: var(--theme-accent-700);
}

.player-rank-badge.rank-2 {
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
}

.player-rank-badge.rank-3 {
    background: rgba(180, 83, 9, 0.15);
    color: #b45309;
}

.stat-pill {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    line-height: 1.6;
}

.quick-link-item .fw-bold {
    font-size: 0.8rem;
    line-height: 1.2;
}

.quick-link-item .text-muted {
    font-size: 0.7rem;
    line-height: 1.1;
}

/* Compact loading states */
.menu-loading {
    font-size: 0.8rem;
    padding: 8px;
    text-align: center;
}

.mega-menu-container .dropdown-item:hover {
    background: rgba(var(--team-primary-rgb), 0.1);
    color: var(--team-primary);
}

.mega-menu-container .dropdown-item.disabled {
    color: var(--theme-ink-muted);
    background: transparent;
    transform: none;
}

.mega-menu-container .dropdown-item:last-child {
    margin-bottom: 0;
}

/* Responsive mega menu */
@media (max-width: 991px) {
    .mega-menu-container {
        min-width: 90vw !important;
        max-width: 95vw !important;
        left: 2.5vw !important;
        right: 2.5vw !important;
    }
    
    .mega-menu-content .row {
        flex-direction: column;
    }
    
    .mega-menu-content .col-md-3 {
        margin-bottom: 20px;
    }
    
    .mega-menu-content .col-md-3:last-child {
        margin-bottom: 0;
    }
    
    .menu-column {
        padding: 12px;
    }
    
    .mega-menu-header .row {
        flex-direction: column;
        text-align: center;
    }
    
    .mega-menu-header .col-md-4 {
        margin-top: 10px;
    }
}

@media (max-width: 576px) {
    .mega-menu-container {
        min-width: 95vw !important;
        max-width: 98vw !important;
        left: 1vw !important;
        right: 1vw !important;
    }
    
    .mega-menu-header {
        padding: 15px !important;
    }
    
    .mega-menu-content {
        padding: 15px !important;
    }
    
    .mega-menu-footer {
        padding: 10px !important;
    }
    
    .mega-menu-footer .row {
        flex-direction: column;
        text-align: center;
    }
    
    .mega-menu-footer .col-md-6:first-child {
        margin-bottom: 10px;
    }
}

/* ===== Mobile Navigation Styles ===== */
@media (max-width: 1199.98px) {
    #main-nav {
        height: var(--navbar-height);
        padding: 0;
        z-index: 1060 !important;
    }

    /* Force consistent 1rem gutter — beats Bootstrap's .container-fluid regardless of load order */
    #main-nav .nav-width {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #main-nav .navbar-brand {
        flex-shrink: 0;
        margin-left: 0.4rem;
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100vw - 130px);
    }

    #main-nav .navbar-brand:after {
        display: none;
    }

    #mobile-menu-toggle {
        border: 0;
        box-shadow: none;
        color: #fff;
        padding: 0;
        font-size: 1.15rem;
        flex-shrink: 0;
    }

    #mobile-menu-toggle:focus {
        box-shadow: none;
    }

    #navbarContent.mobile-drawer-menu {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        bottom: 0;
        width: min(86vw, 360px);
        background: linear-gradient(180deg, var(--team-primary) 0%, var(--team-secondary) 100%);
        display: block !important;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        overflow-y: auto;
        overflow-x: visible;
        padding: 0.6rem 0.85rem 1rem;
        z-index: 1065;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25);
        pointer-events: auto;
    }

    #navbarContent.mobile-drawer-menu.show {
        transform: translateX(0);
    }

    #mobile-nav-backdrop {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
        z-index: 1050;
    }

    body.mobile-nav-open {
        overflow: hidden;
    }

    body.mobile-nav-open #mobile-nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    #navbarContent .navbar-nav {
        width: 100%;
        margin-right: 0 !important;
    }

    #navbarContent .nav-item {
        margin: 0;
    }

    #navbarContent .navbar-nav > .nav-item > .nav-link {
        border-radius: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
        padding: 0.8rem 0.3rem;
    }

    #navbarContent .navbar-nav > .nav-item > .nav-link i {
        width: 20px;
        text-align: center;
    }

    #navbarContent .navbar-nav > .nav-item:last-child > .nav-link {
        border-bottom: 0;
    }

    #navbarContent .navbar-nav .dropdown-menu,
    #navbarContent .navbar-nav .mega-menu-container {
        position: static !important;
        transform: none !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 0 0.55rem 0;
        border: 0;
        border-radius: 8px;
        box-shadow: none !important;
        background: rgba(0, 0, 0, 0.16);
    }

    #navbarContent .dropdown-item {
        color: #fff !important;
        white-space: normal !important;
        padding: 0.55rem 0.75rem !important;
    }

    #navbarContent .dropdown-item:hover,
    #navbarContent .dropdown-item:focus {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #fff !important;
    }

    #navbarContent .mega-menu-header p,
    #navbarContent .mega-menu-footer,
    #navbarContent .quick-link-item .text-muted {
        display: none;
    }

    /* ── Mega menu inside mobile drawer: dark-compatible styles ── */
    #navbarContent .mega-menu-content {
        padding: 8px !important;
    }

    #navbarContent .menu-column {
        background: rgba(0, 0, 0, 0.22) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }

    #navbarContent .menu-column:hover {
        background: rgba(0, 0, 0, 0.32) !important;
        box-shadow: none !important;
    }

    #navbarContent .menu-column-title {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Match & player cards – semi-transparent white instead of body-bg */
    #navbarContent .match-card,
    #navbarContent .player-card {
        background: rgba(255, 255, 255, 0.11) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
    }

    #navbarContent .match-card:hover,
    #navbarContent .player-card:hover {
        background: rgba(255, 255, 255, 0.18) !important;
        box-shadow: none !important;
    }

    /* Force white text inside cards */
    #navbarContent .match-card a,
    #navbarContent .match-card .link-body-emphasis,
    #navbarContent .match-card .fw-semibold,
    #navbarContent .match-card .fw-bold,
    #navbarContent .player-card a,
    #navbarContent .player-card .link-body-emphasis,
    #navbarContent .player-card .fw-semibold,
    #navbarContent .player-card .fw-bold {
        color: #fff !important;
    }

    #navbarContent .match-card .text-secondary,
    #navbarContent .player-card .text-secondary,
    #navbarContent .match-card .text-muted,
    #navbarContent .player-card .text-muted {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Keep result / stat colours legible on dark */
    #navbarContent .match-card .text-success { color: var(--theme-success-subtle) !important; }
    #navbarContent .match-card .text-danger  { color: var(--theme-danger-subtle) !important; }

    /* Empty-state and loading messages inside columns */
    #navbarContent .menu-column-content .menu-loading,
    #navbarContent .menu-column-content > .text-muted {
        color: rgba(255, 255, 255, 0.55) !important;
    }

    /* Restore row direction for nested grids inside menu columns (quick-links etc.)
       The @media (max-width: 991px) rule sets .mega-menu-content .row to column,
       which breaks the col-6 quick-links grid. */
    #navbarContent .menu-column-content .row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    /* Quick Access – compact 2-up grid on mobile */
    #navbarContent .quick-link-item .d-flex {
        padding: 6px 8px !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 8px !important;
        gap: 7px !important;
    }

    #navbarContent .quick-link-item .d-flex:hover {
        background: rgba(255, 255, 255, 0.16) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
        box-shadow: none !important;
    }

    #navbarContent .quick-link-icon {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.75rem !important;
        flex-shrink: 0;
    }

    #navbarContent .quick-link-item .fw-bold {
        font-size: 0.78rem !important;
        color: #fff !important;
        line-height: 1.2;
    }

    #navbarContent .quick-link-item {
        margin-bottom: 0 !important;
    }

    #navbarContent .filter-controls {
        display: flex !important;
        flex-wrap: wrap;
        --mobile-control-gap: 1.55rem;
        gap: var(--mobile-control-gap);
        align-items: flex-start;
        position: relative;
        --mobile-control-height: 38px;
        --mobile-control-radius: 6px;
        --mobile-dropdown-gap: 3px;
        --mobile-section-gap: 0.4rem;
        width: 100%;
        margin-top: 0 !important;
        padding-top: var(--mobile-section-gap);
        border-top: 0;
    }

    #navbarContent .filter-controls .me-2,
    #navbarContent .filter-controls .ms-2,
    #navbarContent .filter-controls .dropdown,
    #navbarContent .filter-controls .select-with-icon {
        width: 100%;
        margin: 0 !important;
    }

    #navbarContent .filter-controls .auth-controls {
        display: flex !important;
        gap: var(--mobile-control-gap);
        width: calc((((100% - (2 * var(--mobile-control-gap))) / 3) * 2) + var(--mobile-control-gap));
        flex: 0 0 calc((((100% - (2 * var(--mobile-control-gap))) / 3) * 2) + var(--mobile-control-gap));
        min-width: 0;
    }

    #navbarContent .filter-controls .auth-controls .btn {
        flex: 1 1 0;
        margin: 0 !important;
    }

    #navbarContent .filter-controls .form-select,
    #navbarContent .filter-controls .btn,
    #navbarContent .filter-controls .theme-toggle {
        width: 100%;
        height: var(--mobile-control-height);
        min-height: var(--mobile-control-height);
        border-radius: var(--mobile-control-radius);
        box-sizing: border-box;
    }

    #navbarContent .filter-controls .notification-dropdown,
    #navbarContent .filter-controls .user-account-dropdown,
    #navbarContent .filter-controls .mobile-account-theme {
        width: calc((100% - 1.1rem) / 3) !important;
        flex: 0 0 calc((100% - 1.1rem) / 3);
        min-width: 0;
        margin: 0 !important;
        display: flex !important;
    }

    #navbarContent .filter-controls .notification-dropdown,
    #navbarContent .filter-controls .user-account-dropdown {
        position: relative;
    }

    #navbarContent .filter-controls .user-account-dropdown {
        position: static;
    }

    #navbarContent .filter-controls .notification-dropdown > .nav-link,
    #navbarContent .filter-controls .user-dropdown-btn,
    #navbarContent .filter-controls .mobile-account-theme,
    #navbarContent .filter-controls .auth-controls .btn {
        height: var(--mobile-control-height);
        min-height: var(--mobile-control-height);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: var(--mobile-control-radius);
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.35rem 0.5rem;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #navbarContent .filter-controls .notification-dropdown > .nav-link i,
    #navbarContent .filter-controls .user-dropdown-btn i,
    #navbarContent .filter-controls .mobile-account-theme i,
    #navbarContent .filter-controls .auth-controls .btn i {
        font-size: 0.95rem;
        line-height: 1;
    }

    #navbarContent .filter-controls > .mobile-account-theme {
        width: calc((100% - 1.1rem) / 3) !important;
        flex: 0 0 calc((100% - 1.1rem) / 3) !important;
        margin-left: 0 !important;
    }

    #navbarContent .filter-controls .notification-dropdown > .nav-link::after {
        display: none;
    }

    #navbarContent .filter-controls .user-dropdown-btn .d-none.d-md-inline {
        display: none !important;
    }

    #navbarContent .filter-controls .notification-menu,
    #navbarContent .filter-controls .user-dropdown-menu {
        position: absolute !important;
        top: calc(100% + var(--mobile-dropdown-gap)) !important;
        z-index: 1070 !important;
        max-width: min(320px, calc(100vw - 2rem)) !important;
        display: none;
    }

    #navbarContent .filter-controls .notification-menu .notification-header-title {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.45rem;
        text-align: left;
        white-space: nowrap;
    }

    #navbarContent .filter-controls .notification-menu .notification-header-title i {
        margin-right: 0 !important;
        flex: 0 0 auto;
    }

    #navbarContent .filter-controls .notification-menu .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        white-space: nowrap;
        width: 100% !important;
    }

    #navbarContent .filter-controls .notification-menu .btn i {
        margin-right: 0 !important;
        flex: 0 0 auto;
    }

    #navbarContent .filter-controls .notification-menu.show,
    #navbarContent .filter-controls .user-dropdown-menu.show {
        display: block !important;
    }

    #navbarContent .filter-controls .notification-menu {
        left: 0 !important;
        right: auto !important;
        width: min(320px, calc(100vw - 2rem)) !important;
        max-width: calc(100vw - 2rem) !important;
    }

    #navbarContent .filter-controls .notification-menu .dropdown-item,
    #navbarContent .filter-controls .notification-menu .dropdown-item i,
    #navbarContent .filter-controls .notification-menu .dropdown-item .fas,
    #navbarContent .filter-controls .notification-menu .dropdown-item .far,
    #navbarContent .filter-controls .notification-menu .dropdown-item .fab,
    #navbarContent .filter-controls .notification-menu .dropdown-header,
    #navbarContent .filter-controls .notification-menu .text-muted,
    #navbarContent .filter-controls .notification-menu .small {
        color: #1f2937 !important;
    }

    #navbarContent .filter-controls .notification-menu .dropdown-item:hover,
    #navbarContent .filter-controls .notification-menu .dropdown-item:focus {
        background: var(--theme-surface-2) !important;
        color: #111827 !important;
    }

    #navbarContent .filter-controls .user-dropdown-menu {
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        top: calc(100% + var(--mobile-dropdown-gap)) !important;
        bottom: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }

    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.92rem;
        line-height: 1.35;
        color: #1f2937 !important;
        background-color: transparent !important;
    }

    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item i,
    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item .fas,
    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item .far,
    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item .fab {
        flex: 0 0 16px;
        text-align: center;
    }

    #navbarContent .filter-controls .user-dropdown-menu a,
    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item,
    #navbarContent .filter-controls .user-dropdown-menu i,
    #navbarContent .filter-controls .user-dropdown-menu .fas,
    #navbarContent .filter-controls .user-dropdown-menu .far,
    #navbarContent .filter-controls .user-dropdown-menu .fab {
        color: #1f2937 !important;
    }

    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item:hover,
    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item:focus {
        background: var(--theme-surface-2) !important;
        color: #111827 !important;
    }

    #navbarContent .filter-controls .user-dropdown-menu .small {
        font-size: 0.82rem !important;
    }

    #navbarContent .filter-controls .user-dropdown-menu .text-muted {
        color: #4b5563 !important;
    }
}

/* Animation keyframes */
@keyframes mega-menu-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mega-menu-slide-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Ensure mega menu doesn't break normal dropdowns */
.dropdown:not(.position-static) .dropdown-menu {
    position: absolute;
    transform: translate3d(0px, 100%, 0px);
}

/* ===== Player Avatar Styles for Dynamic Menus ===== */
.player-avatar {
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    object-fit: cover;
    object-position: center 25%;
    background-color: var(--theme-surface-2);
    border-radius: 50%;
}

/* Face focus for different image orientations */
.player-avatar.portrait {
    object-position: center 20%;
}

.player-avatar.landscape {
    object-position: center 30%;
}

/* Enhanced focus for larger avatars */
.player-avatar[style*="48px"] {
    object-position: center 22%;
}

.player-avatar[style*="32px"] {
    object-position: center 25%;
}

.player-avatar[style*="24px"] {
    object-position: center 28%;
}

.player-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
    border: 2px solid #007bff;
}

.player-avatar-placeholder {
    background: linear-gradient(135deg, var(--theme-surface-2) 0%, var(--theme-surface-3) 100%);
    transition: all 0.3s ease;
}

.player-avatar-placeholder:hover {
    transform: scale(1.1);
    background: linear-gradient(135deg, var(--theme-surface-3) 0%, var(--theme-border) 100%);
}

/* Player card enhancements in mega menu */
.mega-menu-container .player-card {
    transition: all 0.2s ease;
    border: 1px solid var(--theme-surface-3);
}

.mega-menu-container .player-card:hover {
    transform: translateY(-2px);
    border-color: var(--team-primary);
    box-shadow: 0 4px 10px rgba(var(--team-primary-rgb), 0.12);
}

[data-bs-theme="dark"] .mega-menu-container .player-card {
    background: #2d3748 !important;
    border-color: #4a5568;
}

[data-bs-theme="dark"] .mega-menu-container .player-card:hover {
    border-color: var(--team-primary);
    box-shadow: 0 2px 8px rgba(var(--team-primary-rgb), 0.2);
}

/* Match card enhancements in mega menu */
.mega-menu-container .match-card {
    transition: all 0.2s ease;
    border: 1px solid var(--theme-surface-3);
}

.mega-menu-container .match-card:hover {
    transform: translateY(-2px);
    border-color: var(--team-primary);
    box-shadow: 0 4px 10px rgba(var(--team-primary-rgb), 0.12);
}

[data-bs-theme="dark"] .mega-menu-container .match-card {
    background: #2d3748 !important;
    border-color: #4a5568;
}

[data-bs-theme="dark"] .mega-menu-container .match-card:hover {
    border-color: #0d6efd;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
}

/* Improve image loading states */
.player-avatar,
.player-avatar-placeholder {
    position: relative;
    overflow: hidden;
}

/* News item hover effect */
.hover-bg-light:hover {
    background-color: var(--theme-surface-2) !important;
    transition: background-color 0.2s ease;
}

/* ===== Enhanced Featured News Styles ===== */
.featured-news-section {
    background: linear-gradient(135deg, var(--theme-surface-2) 0%, #ffffff 100%);
    padding: 0;
}

.section-title {
    color: var(--team-primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.featured-hero-card {
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-hero-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1px 5px rgba(0,0,0,0.15) !important;
}

.hero-featured-img {
    height: 320px;
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.featured-hero-card:hover .hero-featured-img {
    transform: scale(1.05);
}

.bg-gradient {
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%);
}

.hover-primary:hover {
    color: var(--team-primary) !important;
    transition: color 0.2s ease;
}

.featured-sidebar-item {
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-sidebar-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 5px rgba(0,0,0,0.15) !important;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .featured-news-section {
        padding: 0;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .hero-featured-img {
        height: 200px;
    }
    
    .featured-hero-card:hover {
        transform: none;
    }
    
    .featured-sidebar-item:hover {
        transform: none;
    }
    
}

@media (max-width: 576px) {
    .section-title {
        font-size: 1.3rem;
    }
    
    .badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.5rem;
    }
    
}

.player-avatar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.player-avatar:hover::before {
    transform: translateX(100%);
}

/* ===============================================
   Theme Settings - Navigation Styles
   =============================================== */

/* Navigation Style: Pill */
.nav-style-pill .navbar-nav .nav-link {
    border-radius: 50px;
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0 0.25rem;
}

.nav-style-pill .navbar-nav .nav-link:hover,
.nav-style-pill .navbar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Navigation Style: Underline */
.nav-style-underline .navbar-nav .nav-link {
    border-bottom: 3px solid transparent;
    padding-bottom: 0.75rem;
}

.nav-style-underline .navbar-nav .nav-link:hover,
.nav-style-underline .navbar-nav .nav-link.active {
    border-bottom-color: var(--team-primary, #fff);
}

/* Navigation Style: Separated */
.nav-style-separated .navbar-nav .nav-item:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    padding-right: 0.75rem;
}

.nav-style-separated .navbar-nav .nav-item {
    padding-left: 0.75rem;
}

/* ===============================================
   Theme Settings - Header Styles
   =============================================== */

/* Header Style: Centered */
.header-centered .site-branding {
    text-align: center;
}

.header-centered img {
    display: block;
    margin: 0 auto;
}

/* Header Style: Minimal */
.header-minimal {
    border-bottom: none !important;
    padding: 0.5rem 0 !important;
}

.header-minimal .site-title {
    font-size: 1.5rem;
}

/* Header Style: Modern */
.header-modern {
    background: linear-gradient(135deg, var(--team-primary, #B01B1D) 0%, var(--team-secondary, #8B1518) 100%);
    color: white;
}

.header-modern .site-title {
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===============================================
   Theme Settings - Sticky Sidebar
   =============================================== */

/* Ensure sticky sidebar works properly */
.sticky-sidebar {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 60px; /* Default fallback if inline style not applied */
    align-self: flex-start; /* Prevents sidebar from stretching */
    z-index: 100;
}

/* Adjust top position when sticky header is enabled */
.sticky-top ~ main .sticky-sidebar {
    top: 65px; /* Account for sticky header height */
}

/* Prevent sidebar from being cut off */
#leftSidebar[data-sidebar-column],
#rightSidebar {
    overflow: visible;
}

/* Smooth scrolling for sticky elements */
.sticky-sidebar {
    transition: top 0.3s ease;
}

/* Mobile: disable sticky behavior on small screens */
@media (max-width: 991px) {
    .sticky-sidebar {
        position: relative !important;
        top: auto !important;
    }
}

/* ---- Comment bubble style (feed / match / news) ---- */
.comment-item {
    display: flex;
    margin-bottom: 10px;
    gap: 8px;
}
.comment-item:last-child {
    margin-bottom: 0;
}
/* Replies: subtle indent, no heavy border */
.comment-reply {
    margin-left: 40px !important;
    margin-top: 4px;
    margin-bottom: 6px;
}
.comment-bubble {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    padding: 8px 12px;
    border-radius: 18px;
    flex: 1;
}
/* Tighter bubble for replies */
.comment-reply .comment-bubble {
    background: var(--bs-secondary-bg);
    border-radius: 14px;
}
.comment-author {
    font-weight: 600;
    font-size: 13px;
}
/* Inline @mention badge inside the bubble */
.comment-reply-mention {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
    color: var(--bs-secondary-color);
    margin-left: 6px;
    vertical-align: middle;
}
.comment-reply-mention i {
    font-size: 10px;
}
.comment-text {
    font-size: 14px;
    word-wrap: break-word;
    margin-top: 1px;
}
.comment-actions {
    font-size: 12px;
    color: var(--bs-secondary-color);
    margin-top: 4px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.comment-actions a {
    color: var(--bs-secondary-color);
    text-decoration: none;
}
.comment-actions a:hover {
    text-decoration: underline;
}

/* =====================================================================
   BENFICA-LAYOUT SYSTEM (bn-sections, bn-panels, sticky aside, CTA)
   Shared two-column layout used by news / feed / my-benfica / matchday /
   forum and most content pages. The modern theme inherits these rules
   (it @imports this stylesheet). PHP helpers live in
   includes/benfica_layout.php (loaded by header.php); bnLayoutCss() only
   emits an inline fallback for themes that don't ship this stylesheet.
   ===================================================================== */
.benfica-layout{--slb-red:var(--theme-primary, #C8102E);--slb-red-rgb:var(--theme-primary-rgb, 200,16,46);--slb-maroon:var(--theme-secondary, #3d0008);--slb-gold:var(--theme-accent, #F4B223);--slb-gold-rgb:var(--theme-accent-rgb, 244,178,35);width:100%;margin:0;padding:0;}
.benfica-layout a{text-decoration:none;}
.benfica-layout .row{--bs-gutter-x:1rem;--bs-gutter-y:1rem;}
.benfica-layout .card{border:1px solid rgba(0,0,0,0.07);border-radius:var(--theme-radius,1rem);box-shadow:var(--theme-shadow,0 10px 30px rgba(0,0,0,0.06));overflow:hidden;}
[data-bs-theme="dark"] .benfica-layout .card{background:var(--bs-tertiary-bg, #1e1e1e);border-color:rgba(255,255,255,0.08)!important;}
/* Cards hosting an absolutely-positioned dropdown (autocomplete results) must not clip it */
.benfica-layout .card.bn-card-overflow{overflow:visible;}
.benfica-layout .card.bn-card-overflow > .card-header{border-top-left-radius:inherit;border-top-right-radius:inherit;}
.benfica-layout .card.bn-card-overflow > .card-body:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;}
/* Floating autocomplete panel: opaque so the translucent .list-group-item:hover
   tint composites over the panel instead of showing the page through it */
.benfica-layout #entity_search_results{background:var(--bs-body-bg,#fff);border:1px solid var(--bs-border-color, #fff);border-radius:.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.175);margin-top:.25rem;}
.benfica-layout #entity_search_results .list-group-item{background-color:transparent;border-left:0;border-right:0;}
.benfica-layout #entity_search_results .list-group-item:first-child{border-top:0;}
.benfica-layout #entity_search_results .list-group-item:last-child{border-bottom:0;}
.benfica-layout #entity_search_results .list-group-item:hover{background-color:rgba(var(--team-primary-rgb,200,16,46),0.08);}
[data-bs-theme="dark"] .benfica-layout #entity_search_results{background:var(--bs-tertiary-bg,#222);border-color:#333;}
[data-bs-theme="dark"] .benfica-layout #entity_search_results .list-group-item{background-color:transparent;}
[data-bs-theme="dark"] .benfica-layout #entity_search_results .list-group-item:hover{background-color:rgba(255,255,255,0.06);}
.benfica-layout .bn-section{margin-top:1rem;scroll-margin-top:6rem;}
/* Next Match countdown — compact ticking pill (matches the index.php Next Match look) */
.benfica-layout .bn-nm-cd{display:inline-flex;align-items:baseline;gap:0.5rem;background:var(--bs-secondary-bg, #e9ecef);border:1px solid var(--bs-border-color, #dee2e6);border-radius:999px;padding:0.32rem 1rem;margin:0 auto;}
.benfica-layout .bn-nm-cd .bn-cd-u{display:inline-flex;align-items:baseline;gap:0.12rem;}
.benfica-layout .bn-nm-cd .bn-cd-num{display:inline-block;font-size:1rem;font-weight:900;line-height:1;color:var(--slb-red);font-variant-numeric:tabular-nums;}
.benfica-layout .bn-nm-cd .bn-cd-lbl{font-size:0.6rem;font-weight:800;text-transform:lowercase;color:var(--bs-secondary-color, #6c757d);}
.benfica-layout .bn-nm-cd .bn-cd-sep{font-size:0.85rem;font-weight:900;color:rgba(var(--slb-red-rgb),0.35);align-self:center;}
.benfica-layout .bn-nm-comp,.benfica-layout .bn-nm-team{transition:color .15s ease;}
.benfica-layout .bn-nm-comp:hover,.benfica-layout .bn-nm-comp:focus,.benfica-layout .bn-nm-team:hover,.benfica-layout .bn-nm-team:focus{color:var(--slb-red)!important;}
/* Content links: black by default, brand red on hover. Done via Bootstrap's link-colour
   variables so only default-coloured links change — buttons, tabs and explicitly-coloured
   links (e.g. white names over photos) keep their own colour with no !important needed. */
.benfica-layout{--bs-link-color-rgb:var(--bs-body-color-rgb,33,37,41);--bs-link-hover-color-rgb:var(--slb-red-rgb,200,16,46);}
/* Global scroll-reveal: blocks fade + slide up as they enter the viewport
   (footer.php tags them via IntersectionObserver). Same motion as index.php.
   opacity:0 is only applied to elements JS actually tags, so if JS is disabled
   or unsupported the content stays fully visible. */
.benfica-layout .bn-reveal{opacity:0;transform:translateY(12px);transition:opacity 0.45s ease,transform 0.45s ease;}
.benfica-layout .bn-reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.benfica-layout .bn-reveal{opacity:1;transform:none;transition:none;}}
.benfica-layout .bn-main>.bn-section:first-child{margin-top:0;}
.benfica-layout .bn-section-head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;}
.benfica-layout .bn-section-head::before{content:"";flex:0 0 auto;width:22px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--slb-red),var(--slb-gold));}
.benfica-layout .bn-section-head>i:first-child{color:var(--slb-gold);font-size:1.1rem;flex:0 0 auto;display:inline-block;width:1.2em;text-align:center;}
.benfica-layout .bn-section-head h2{font-size:1rem;font-weight:var(--theme-heading-weight,900);margin:0;color:var(--bs-body-color);flex:0 1 auto;min-width:0;overflow-wrap:anywhere;}
.benfica-layout .bn-section-head::after{content:"";flex:1 1 auto;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--slb-red),var(--slb-gold),rgba(0,0,0,0));order:9;}
.benfica-layout .bn-section-head .bn-head-actions{order:10;flex:0 0 auto;display:flex;align-items:center;gap:0.4rem;}
/* Mobile: head actions stay on the title row; if they don't fit, a footer
   script collapses them into a dropdown menu (.bn-actions-menuized). */
@media (max-width: 767.98px){
  /* Title-only heads (e.g. the article title) must be free to shrink and wrap
     so long titles don't overflow off the right edge. Only pin the title with
     flex:0 0 auto when the head has action controls it needs to make room for. */
  .benfica-layout .bn-section-head h2{flex:0 1 auto;min-width:0;}
  .benfica-layout .bn-section-head:has(.bn-head-actions) h2{flex:0 0 auto;}
  .benfica-layout .bn-section-head .bn-head-actions{flex:0 1 auto;min-width:0;justify-content:flex-end;padding:0.15rem 0;}
  .benfica-layout .bn-section-head .bn-head-actions .btn{flex:0 0 auto;}
  .benfica-layout .bn-section-head .bn-head-actions .btn-group{flex:0 0 auto;}
  .benfica-layout .bn-section-head .bn-head-actions.bn-actions-menuized{overflow:visible;}
}
.benfica-layout .bn-head-actions .dropdown-toggle::after{color:var(--slb-gold);}
.benfica-layout .bn-head-actions .dropdown-menu{font-size:0.82rem;min-width:10.5rem;border-radius:0.8rem;box-shadow:0 10px 30px rgba(0,0,0,0.12);}
.benfica-layout .bn-head-actions .dropdown-item{font-weight:700;padding:0.45rem 0.9rem;}
.benfica-layout .bn-head-actions .dropdown-item i{color:var(--slb-gold);}
.benfica-layout .bn-head-actions .dropdown-item.active,.benfica-layout .bn-head-actions .dropdown-item:active{background:var(--slb-red);color:#fff;}
.benfica-layout .bn-head-actions .dropdown-item.active i{color:#fff;}
.benfica-layout .bn-head-actions .btn{font-size:0.78rem;line-height:1.3;font-weight:800;color:var(--slb-red);background:transparent;border:1px solid var(--slb-red);border-radius:999px!important;padding:0.2rem 0.7rem;white-space:nowrap;box-shadow:none;}
.benfica-layout .bn-head-actions .btn:hover{background:var(--slb-red);color:#fff;border-color:var(--slb-red);}
.benfica-layout .bn-head-actions .btn i{color:var(--slb-gold);}
.benfica-layout .bn-head-actions .btn-light,.benfica-layout .bn-head-actions .btn.active{background:var(--slb-red);color:#fff;border-color:var(--slb-red);}
.benfica-layout .bn-head-actions .btn-group{display:inline-flex;gap:0.3rem;}
.benfica-layout .bn-head-actions .btn-group>.btn{margin-left:0;}
[data-bs-theme="dark"] .benfica-layout .bn-head-actions .btn{color:var(--theme-link-on-dark);border-color:var(--theme-link-on-dark);}
[data-bs-theme="dark"] .benfica-layout .bn-head-actions .btn:hover,[data-bs-theme="dark"] .benfica-layout .bn-head-actions .btn-light,[data-bs-theme="dark"] .benfica-layout .bn-head-actions .btn.active{background:var(--slb-red);color:#fff;border-color:var(--slb-red);}
.benfica-layout .bn-layout{margin-top:0;}
.benfica-layout .bn-main{min-width:0;}
.benfica-layout .bn-aside{display:flex;flex-direction:column;gap:1rem;}
@media (min-width:992px){.benfica-layout .bn-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,340px);gap:1rem;align-items:start;}.benfica-layout .bn-aside{position:sticky;top:1rem;}}
.benfica-layout .bn-panel{background:var(--bs-body-bg);border:1px solid rgba(0,0,0,0.07);border-radius:var(--theme-radius-lg,1.1rem);box-shadow:var(--theme-shadow,0 10px 30px rgba(0,0,0,0.06));padding:1rem;}
.benfica-layout .bn-panel h3{font-size:1rem;font-weight:var(--theme-heading-weight,900);margin:0 0 0.9rem;color:var(--bs-body-color);display:flex;align-items:center;gap:1rem;}
.benfica-layout .bn-panel h3 i{flex:0 0 auto;color:var(--slb-gold);}
.benfica-layout .bn-panel h3::before{content:"";flex:0 0 auto;width:22px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--slb-red),var(--slb-gold));}
.benfica-layout .bn-panel h3::after{content:"";flex:1 1 auto;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--slb-red),var(--slb-gold),rgba(0,0,0,0));}
.benfica-layout .bn-facts{list-style:none;margin:0;padding:0;display:grid;gap:0.5rem;}
.benfica-layout .bn-facts li{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;font-size:0.85rem;}
.benfica-layout .bn-fact-label{display:inline-flex;align-items:center;gap:0.45rem;color:var(--bs-secondary-color, #6c757d);font-weight:600;}
.benfica-layout .bn-fact-label i{color:var(--slb-gold);width:1em;text-align:center;}
.benfica-layout .bn-fact-val{font-weight:800;color:var(--bs-body-color);text-align:right;}
/* A fact whose value is a name plus a qualifier (competition + round): the
   two stack on their own lines rather than wrapping mid-phrase. */
.benfica-layout .bn-facts li.sc-fact-stack{align-items:flex-start;}
.benfica-layout .sc-fact-stack .v{display:flex;flex-direction:column;align-items:flex-end;gap:0.1rem;min-width:0;}
.benfica-layout .sc-comp-sub{font-weight:600;font-size:0.78rem;color:var(--bs-secondary-color,#6c757d);}
/* Forum Buzz / Latest Topics rich topic list (shared: homepage + forum aside) */
.benfica-layout .bn-forum-list{list-style:none;margin:0;padding:0;display:grid;gap:0.6rem;}
.benfica-layout .bn-forum-list li{display:flex;align-items:flex-start;gap:0.55rem;}
.benfica-layout .bn-fb-ico{flex:0 0 auto;width:1.9rem;height:1.9rem;display:inline-flex;align-items:center;justify-content:center;border-radius:0.6rem;background:linear-gradient(180deg,var(--slb-red),var(--theme-gradient-end));color:#fff;font-size:0.8rem;font-weight:900;}
.benfica-layout .bn-fb-body{flex:1;min-width:0;}
.benfica-layout .bn-forum-list a{display:block;font-size:0.85rem;font-weight:700;color:var(--bs-body-color);line-height:1.25;}
.benfica-layout .bn-forum-list a:hover{color:var(--slb-red);}
.benfica-layout .bn-forum-meta{display:flex;gap:0.6rem;font-size:0.72rem;color:var(--bs-secondary-color, #6c757d);flex-wrap:wrap;}
.benfica-layout .bn-forum-meta i{color:var(--slb-gold);}
.benfica-layout .bn-forum-list a.bn-fb-cat{display:inline;font-size:inherit;font-weight:inherit;color:inherit;line-height:inherit;}
.benfica-layout .bn-forum-list a.bn-fb-cat:hover{color:var(--slb-red);}
.benfica-layout .bn-cta{background:linear-gradient(145deg,var(--theme-gradient-start, #e8112c),var(--theme-gradient-end, #9c0f18));border:0;box-shadow:0 10px 30px rgba(0,0,0,0.12);}
.benfica-layout .bn-cta h3{color:#fff;}
.benfica-layout .bn-cta h3 i{color:var(--slb-gold, #F4B223);}
.benfica-layout .bn-cta-links{display:flex;flex-direction:column;gap:0.5rem;}
.benfica-layout .bn-cta-links a{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.95);color:var(--theme-gradient-end, #9c0f18);font-weight:800;padding:0.55rem 1rem;border-radius:999px;font-size:0.88rem;transition:transform 0.2s ease;}
.benfica-layout .bn-cta-links a:hover{transform:translateY(-2px);background:#fff;}
.benfica-layout .bn-aside-toggle{display:none;}
/* Drawer chrome is hidden on desktop; the sidebar is a normal sticky column there. */
.bn-aside-backdrop{display:none;}
@media (max-width:991.98px){
 .benfica-layout .bn-layout{display:flex;flex-direction:column;}
 /* --- Persistent floating toggle, pinned to the right edge so it can be opened
        at any scroll position (no longer scrolls away at the top of content) --- */
 /* No visible handle — the drawer is opened by swiping left from the right edge
    and closed by swiping right (see the swipe handlers in footer.php). */
 .benfica-layout .bn-aside-toggle{display:none;}
 /* --- Sidebar slides in from the right as an overlay drawer --- */
 .benfica-layout .bn-aside{order:1;position:fixed;top:var(--bn-aside-offset,calc(var(--navbar-height,50px) + env(safe-area-inset-top,0px)));right:0;z-index:1052;width:min(94vw,430px);max-width:100%;height:calc(100dvh - var(--bn-aside-offset,calc(var(--navbar-height,50px) + env(safe-area-inset-top,0px))));margin:0;padding:1rem;gap:1rem;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--bs-body-bg);box-shadow:none;transform:translateX(100%);transition:transform 0.32s cubic-bezier(.4,0,.2,1);max-height:none;}
 .benfica-layout .bn-aside.show{transform:translateX(0);box-shadow:-14px 0 44px rgba(0,0,0,0.30);}
 .benfica-layout .bn-main{order:2;}
 /* Dimmed backdrop behind the drawer (tap to close) */
 .bn-aside-backdrop{display:block;position:fixed;top:var(--bn-aside-offset,calc(var(--navbar-height,50px) + env(safe-area-inset-top,0px)));left:0;right:0;bottom:0;z-index:1050;background:rgba(0,0,0,0.45);opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease;}
 body.bn-aside-open .bn-aside-backdrop{opacity:1;visibility:visible;}
 body.bn-aside-open{overflow:hidden;}
}
/* The drawer is opened from the menu bubble in the nav's right corner
   (.bn-aside-toggle, added in navigation.php) and by swiping on touch devices —
   so there is no floating on-page handle to cover content. */
[data-bs-theme="dark"] .benfica-layout .bn-panel{background:var(--bs-tertiary-bg, #1e1e1e);border-color:rgba(255,255,255,0.08);}
/* .bn-cta is also a .bn-panel, so the dark .bn-panel rule above (higher
   specificity) was flattening its red gradient to a dark box while the white
   link pills stayed — looking broken. Re-assert the gradient in dark mode at
   equal specificity so the Explore/CTA panel keeps its branded look. */
[data-bs-theme="dark"] .benfica-layout .bn-cta{background:linear-gradient(145deg,var(--theme-gradient-start, #e8112c),var(--theme-gradient-end, #9c0f18));border-color:transparent;}
/* Classifications panel: one row per competition entered this season, with the
   club's current position or knockout round in the leading badge. */
.benfica-layout .bn-classif{display:grid;gap:0.55rem;}
.benfica-layout .bn-classif-group{font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:var(--bs-secondary-color, #6c757d);margin-top:0.35rem;}
.benfica-layout .bn-classif-group:first-child{margin-top:0;}
.benfica-layout .bn-classif-row{display:flex;align-items:center;gap:0.6rem;}
.benfica-layout .bn-classif-pos{flex:0 0 auto;min-width:2.5rem;text-align:center;font-weight:900;font-size:0.8rem;line-height:1.3;padding:0.2rem 0.35rem;border-radius:0.5rem;background:rgba(var(--bs-secondary-rgb,108,117,125),0.12);color:var(--bs-secondary-color, #6c757d);}
.benfica-layout .bn-classif-pos.tone-success{background:rgba(var(--bs-success-rgb),0.14);color:var(--bs-success);}
.benfica-layout .bn-classif-pos.tone-warning{background:rgba(var(--bs-warning-rgb),0.16);color:var(--bs-warning-text-emphasis, #997404);}
.benfica-layout .bn-classif-pos.tone-primary{background:rgba(var(--bs-primary-rgb),0.12);color:var(--bs-primary);}
.benfica-layout .bn-classif-pos.tone-info{background:rgba(var(--bs-info-rgb),0.14);color:var(--bs-info);}
.benfica-layout .bn-classif-ico{flex:0 0 auto;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;}
.benfica-layout .bn-classif-ico img{max-width:100%;max-height:100%;object-fit:contain;}
.benfica-layout .bn-classif-body{flex:1;min-width:0;}
.benfica-layout .bn-classif-name{display:block;min-width:0;font-size:0.82rem;font-weight:700;color:var(--bs-body-color);line-height:1.25;overflow-wrap:anywhere;}
.benfica-layout .bn-classif-name:hover{color:var(--slb-red);}
.benfica-layout .bn-classif-links{display:flex;flex-wrap:wrap;gap:0.55rem;font-size:0.7rem;}
.benfica-layout .bn-classif-links a{color:var(--bs-secondary-color, #6c757d);font-weight:600;}
.benfica-layout .bn-classif-links a:hover{color:var(--slb-red);}
.benfica-layout .bn-classif-links i{color:var(--slb-gold);}
.benfica-layout .bn-classif-empty{font-size:0.82rem;color:var(--bs-secondary-color, #6c757d);margin:0;}
[data-bs-theme="dark"] .benfica-layout .bn-classif-pos{background:rgba(255,255,255,0.08);}
[data-bs-theme="dark"] .benfica-layout .bn-classif-pos.tone-warning{color:var(--slb-gold, #F4B223);}

/* ---- Shared bn-* components (cards, buttons, tags, pager, lists) --------
   Canonical versions of the content components that used to be duplicated
   in every page's inline CSS. Pages keep only true one-off rules. ------- */
.benfica-layout .bn-section-head .bn-head-meta{flex:0 0 auto;font-size:0.8rem;font-weight:700;color:var(--bs-secondary-color, #6c757d);white-space:nowrap;order:11;}
.benfica-layout .bn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;}
.benfica-layout .bn-card{display:flex;flex-direction:column;background:var(--bs-body-bg);border:1px solid rgba(0,0,0,0.07);border-radius:var(--theme-radius,1rem);box-shadow:var(--theme-shadow,0 10px 30px rgba(0,0,0,0.06));overflow:hidden;transition:transform 0.25s ease,box-shadow 0.25s ease;}
.benfica-layout .bn-card:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(0,0,0,0.12);}
.benfica-layout .bn-card-media{position:relative;}
.benfica-layout .bn-pic{width:100%;object-fit:cover;object-position:center top;display:block;}
.benfica-layout .bn-pic-ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,rgba(var(--slb-red-rgb),0.10),rgba(var(--slb-gold-rgb),0.10));color:rgba(var(--slb-red-rgb),0.55);font-size:2.2rem;}
.benfica-layout .bn-card-body{display:flex;flex-direction:column;flex:1 1 auto;padding:0.85rem 1rem 1rem;min-width:0;}
.benfica-layout .bn-meta{display:flex;align-items:center;flex-wrap:wrap;gap:0.4rem 0.9rem;font-size:0.76rem;color:var(--bs-secondary-color, #6c757d);margin-bottom:0.45rem;}
.benfica-layout .bn-meta a{color:inherit;}
.benfica-layout .bn-meta a:hover{color:var(--slb-red);}
.benfica-layout .bn-meta i{color:var(--slb-gold);margin-right:0.25rem;}
.benfica-layout .bn-card-title{font-size:1rem;font-weight:800;line-height:1.25;margin:0 0 0.4rem;}
.benfica-layout .bn-card-title a{color:var(--bs-body-color);}
.benfica-layout .bn-card-title a:hover{color:var(--slb-red);}
.benfica-layout .bn-snippet{font-size:0.86rem;color:var(--bs-secondary-color, #6c757d);line-height:1.5;margin:0 0 0.8rem;flex:1 1 auto;}
.benfica-layout .bn-card-foot{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;margin-top:auto;}
.benfica-layout .bn-readmore{display:inline-flex;align-items:center;gap:0.4rem;font-weight:800;font-size:0.82rem;color:var(--slb-red);transition:color 0.2s ease;}
.benfica-layout .bn-readmore:hover,.benfica-layout .bn-card:hover .bn-readmore{color:var(--slb-gold);}
.benfica-layout .bn-readmore i{transition:transform 0.2s ease;}
.benfica-layout .bn-card:hover .bn-readmore i{transform:translateX(3px);}
.benfica-layout .bn-list{display:flex;flex-direction:column;gap:1rem;}
.benfica-layout .bn-row{display:grid;grid-template-columns:230px 1fr;background:var(--bs-body-bg);border:1px solid rgba(0,0,0,0.07);border-radius:var(--theme-radius,1rem);box-shadow:var(--theme-shadow,0 10px 30px rgba(0,0,0,0.06));overflow:hidden;transition:transform 0.25s ease,box-shadow 0.25s ease;}
.benfica-layout .bn-row:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(0,0,0,0.12);}
@media (max-width:600px){.benfica-layout .bn-row{grid-template-columns:1fr;}}
.benfica-layout .bn-filters{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin-bottom:1rem;}
.benfica-layout .bn-btn{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.85rem;font-weight:700;color:var(--bs-body-color);background:var(--bs-body-bg);border:1px solid rgba(0,0,0,0.12);border-radius:999px;padding:0.45rem 0.9rem;cursor:pointer;transition:all 0.18s ease;line-height:1;}
.benfica-layout .bn-btn:hover{border-color:var(--slb-red);color:var(--slb-red);}
.benfica-layout .bn-btn i{color:var(--slb-gold);}
.benfica-layout .bn-btn.is-active{background:linear-gradient(180deg,var(--theme-gradient-start, #e30b2d),var(--theme-gradient-end, #b50d27));color:#fff;border-color:transparent;}
.benfica-layout .bn-btn.is-active i{color:#fff;}
.benfica-layout .bn-toggle{display:inline-flex;margin-left:auto;border:1px solid rgba(0,0,0,0.12);border-radius:999px;overflow:hidden;}
.benfica-layout .bn-toggle a{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.85rem;font-weight:700;padding:0.45rem 0.9rem;line-height:1;color:var(--bs-body-color);}
.benfica-layout .bn-toggle a i{color:var(--slb-gold);}
.benfica-layout .bn-toggle a.is-active{background:linear-gradient(180deg,var(--theme-gradient-start, #e30b2d),var(--theme-gradient-end, #b50d27));color:#fff;}
.benfica-layout .bn-toggle a.is-active i{color:#fff;}
.benfica-layout .bn-tagtray{display:flex;flex-wrap:wrap;gap:0.45rem;background:rgba(var(--slb-red-rgb),0.04);border:1px solid rgba(0,0,0,0.07);border-radius:var(--theme-radius,1rem);padding:1rem;margin-bottom:1rem;}
.benfica-layout .bn-tag{display:inline-flex;align-items:center;gap:0.35rem;font-size:0.8rem;font-weight:700;color:var(--bs-body-color);background:var(--bs-body-bg);border:1px solid rgba(0,0,0,0.1);border-radius:999px;padding:0.3rem 0.7rem;}
.benfica-layout .bn-tag:hover{border-color:var(--slb-red);color:var(--slb-red);}
.benfica-layout .bn-tag.is-active{background:linear-gradient(180deg,var(--theme-gradient-start, #e30b2d),var(--theme-gradient-end, #b50d27));color:#fff;border-color:transparent;}
.benfica-layout .bn-tag .bn-tag-n{font-size:0.7rem;opacity:0.7;}
.benfica-layout .bn-empty{background:var(--bs-body-bg);border:1px solid rgba(0,0,0,0.07);border-radius:var(--theme-radius,1rem);box-shadow:var(--theme-shadow,0 10px 30px rgba(0,0,0,0.06));padding:1rem;color:var(--bs-secondary-color, #6c757d);display:flex;align-items:center;gap:0.6rem;}
.benfica-layout .bn-empty i{color:var(--slb-gold);}
.benfica-layout .bn-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:0.4rem;margin-top:1rem;}
.benfica-layout .bn-pager a,.benfica-layout .bn-pager span{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 0.7rem;border-radius:0.7rem;border:1px solid rgba(0,0,0,0.1);background:var(--bs-body-bg);color:var(--bs-body-color);font-weight:700;font-size:0.86rem;}
.benfica-layout .bn-pager a:hover{border-color:var(--slb-red);color:var(--slb-red);}
.benfica-layout .bn-pager .is-active{background:linear-gradient(180deg,var(--theme-gradient-start, #e30b2d),var(--theme-gradient-end, #b50d27));color:#fff;border-color:transparent;}
.benfica-layout .bn-pager .is-disabled{opacity:0.45;}
.benfica-layout .bn-cats{list-style:none;margin:0;padding:0;display:grid;gap:0.4rem;}
.benfica-layout .bn-cats a{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;font-size:0.88rem;font-weight:700;color:var(--bs-body-color);padding:0.4rem 0.6rem;border-radius:0.6rem;}
.benfica-layout .bn-cats a:hover,.benfica-layout .bn-cats a.is-active{background:rgba(var(--slb-red-rgb),0.07);color:var(--slb-red);}
.benfica-layout .bn-cats a i{color:var(--slb-gold);}
.benfica-layout .bn-cats .bn-c-n{font-size:0.72rem;font-weight:800;color:#fff;background:var(--slb-gold);border-radius:999px;padding:0.05rem 0.5rem;}
.benfica-layout .bn-trend{list-style:none;margin:0;padding:0;display:grid;gap:0.7rem;}
.benfica-layout .bn-trend li{display:flex;align-items:flex-start;gap:0.7rem;}
.benfica-layout .bn-trend .bn-rank{flex:0 0 auto;width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:900;color:#fff;background:linear-gradient(180deg,var(--theme-gradient-start, #e30b2d),var(--theme-gradient-end, #b50d27));}
.benfica-layout .bn-trend-link{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:0.15rem;}
.benfica-layout .bn-trend-title{font-size:0.88rem;font-weight:700;color:var(--bs-body-color);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.benfica-layout .bn-trend-link:hover .bn-trend-title{color:var(--slb-red);}
.benfica-layout .bn-trend .bn-views{font-size:0.74rem;color:var(--bs-secondary-color, #6c757d);}
.benfica-layout .bn-trend .bn-views i{color:var(--slb-gold);margin-right:0.25rem;}
.benfica-layout .bn-btn-red{align-self:flex-start;display:inline-flex;align-items:center;gap:0.5rem;background:linear-gradient(180deg,var(--theme-gradient-start, #e30b2d),var(--theme-gradient-end, #b50d27));color:#fff;font-weight:800;padding:0.55rem 1.15rem;border-radius:999px;font-size:0.9rem;transition:transform 0.2s ease,color 0.2s ease;}
.benfica-layout .bn-btn-red:hover{color:var(--slb-gold, #F4B223);transform:translateY(-2px);}
.benfica-layout .bn-cta p{color:rgba(255,255,255,0.9);margin:0 0 0.9rem;font-size:0.9rem;}
.benfica-layout .bn-share-btns{display:flex;flex-wrap:wrap;gap:0.5rem;}
.benfica-layout .bn-share{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#fff;border:0;font-size:0.95rem;transition:transform 0.18s ease,filter 0.18s ease;}
.benfica-layout .bn-share:hover{transform:translateY(-2px);filter:brightness(1.08);color:#fff;}
.benfica-layout .bn-share.js-native-share{background:#212529;}
.benfica-layout .bn-share.bn-fb{background:#1877F2;}
.benfica-layout .bn-share.bn-tw{background:#1DA1F2;}
.benfica-layout .bn-share.bn-wa{background:#25D366;}
.benfica-layout .bn-share.bn-em{background:linear-gradient(180deg,var(--theme-gradient-start, #e30b2d),var(--theme-gradient-end, #b50d27));}
[data-bs-theme="dark"] .benfica-layout .bn-card,
[data-bs-theme="dark"] .benfica-layout .bn-row,
[data-bs-theme="dark"] .benfica-layout .bn-empty,
[data-bs-theme="dark"] .benfica-layout .bn-tag,
[data-bs-theme="dark"] .benfica-layout .bn-btn,
[data-bs-theme="dark"] .benfica-layout .bn-toggle,
[data-bs-theme="dark"] .benfica-layout .bn-pager a,
[data-bs-theme="dark"] .benfica-layout .bn-pager span{background:var(--bs-tertiary-bg, #1e1e1e);border-color:rgba(255,255,255,0.08);}

/* ===== MODERN NAV + BENTO (merged from themes/modern/css/style.css) ===== */

/* ===== Sport Lisboa e Benfica palette ===== */
:root {
    --team-primary: var(--theme-primary, #C8102E);            /* SLB official red (Pantone 186 C) */
    --team-primary-rgb: var(--theme-primary-rgb, 200, 16, 46);
    --team-secondary: var(--theme-secondary, #3d0008);          /* deep maroon */
    --team-secondary-rgb: var(--theme-secondary-rgb, 61, 0, 8);
    --team-accent: #ffffff;
    --benfica-red-bright: var(--theme-gradient-start, #E30613);
    --benfica-gold: var(--theme-accent, #F4B223);            /* eagle gold accent */
    --benfica-gold-rgb: var(--theme-accent-rgb, 244, 178, 35);

    /* Deep-red navigation surfaces — harmonises with the hero (same Benfica
       red family) but uses darker shades + a vertical gradient so the two
       sections read as related, not identical. */
    --lp-nav-bg: linear-gradient(180deg, var(--theme-gradient-start) 0%, var(--theme-primary) 100%);  /* primary bar — same red gradient as the admin panel */
    --lp-nav-solid: var(--theme-primary);
    --lp-strip-bg: var(--theme-primary);      /* crest strip (slightly deeper for hierarchy) */
    --lp-subnav-bg: var(--theme-primary);     /* secondary bar */
    --lp-ink: #ffffff;           /* white text on red */
    --lp-ink-dim: rgba(255, 255, 255, 0.74);
    --lp-line: rgba(255, 255, 255, 0.14);

    --t: 0.25s;
}

html, body, * { -ms-overflow-style: none; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }

/* Pull-to-refresh stays enabled (overscroll left on the document). The page
   canvas is the nav's red so overscrolling at the very top reveals red under the
   gold border instead of a white gap. */
html { background-color: var(--theme-gradient-start, #e8112c) !important; }
html, body { overscroll-behavior-y: none; }

body {
    background:
        radial-gradient(1200px 600px at 100% -10%, rgba(var(--team-primary-rgb), 0.06), transparent 60%),
        var(--bs-body-bg);
}

/* =====================================================================
   NAVIGATION — three-tier clone
   ===================================================================== */
/* Force tier order with flexbox so the app's nav JS (which makes the first
   <nav> sticky) can never push the crest strip out of place. */
.lp-nav { position: relative; z-index: 1030; display: flex; flex-direction: column; }
.lp-nav > .lp-topstrip { order: 0; }
.lp-nav > .lp-primary  { order: 1; }
.lp-nav > .lp-subnav   { order: 2; }
.lp-nav > .lp-drawer   { order: 3; }
.lp-nav.lp-sticky { position: sticky; top: 0; }
/* Neutralise the inline red background the nav JS sets on the container */
/* Only strip the container background when OUR modern nav (.lp-nav) is inside it
   to provide its own colour. Pages that reuse #navigation-container with a plain
   navbar (e.g. maintenance.php) must keep the default red background, otherwise
   the white brand text + buttons become invisible on a white page. */
#navigation-container:has(.lp-nav) { background: transparent !important; }
#navigation-container:has(#maintenance-nav), #navigation-container:has(#error-nav) { background: var(--team-primary) !important; }

/* Standalone pages (error.php / maintenance.php) use <body class="p-0"> but
   have NO fixed navbar at the top — the red bar sits BELOW the hero. The
   default theme's `body.p-0 { padding-top: var(--navbar-height) }` is meant to
   offset a fixed nav, so here it only adds a blank ~65px strip above the hero.
   Zero it. (The default rule has equal specificity but comes earlier via the
   @import, so this later rule wins. On the normal site the nav's inline JS sets
   body padding via an inline style, which still overrides this.) */
body.p-0:not(:has(.lp-nav)) { padding-top: 0 !important; }

/* ---- TIER 0: crest strip (deep red) ---- */
.lp-topstrip { background: var(--lp-strip-bg); border-bottom: 1px solid var(--lp-line); position: relative; z-index: 1050; }
.lp-topstrip-inner { display: flex; align-items: center; gap: 0.85rem; padding: 0.3rem 0.9rem; }
.lp-topstrip-label {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.45rem;
    color: var(--lp-ink); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.13em;
    text-transform: uppercase; text-decoration: none;
    padding-right: 0.85rem; border-right: 1px solid var(--lp-line);
}
.lp-topstrip-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--benfica-gold); box-shadow: 0 0 0 3px rgba(var(--benfica-gold-rgb), 0.25); }
.lp-topstrip-label i { font-size: 0.7rem; opacity: 0.8; }

/* Season name acts as a dropdown but looks like plain text */
.lp-season-dd { position: relative; flex: 0 0 auto; }
.lp-season-toggle {
    background: transparent !important; border: 0 !important;
    border-right: 1px solid var(--benfica-gold) !important;
    box-shadow: none !important; cursor: pointer; line-height: 1.4;
}
.lp-season-toggle::after { display: none !important; }
.lp-season-caret { font-size: 0.55rem !important; opacity: 0.85; margin-left: 0.15rem; }
.dropdown-menu.lp-season-menu {
    min-width: 142px !important; width: max-content !important; max-width: 200px; max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(0, 0, 0, 0.06) !important; border-radius: 0.8rem !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important; padding: 0.25rem !important; z-index: 2000 !important;
    font-size: 0.76rem;
}
/* Don't let the crest strip / nav wrappers clip the open season dropdown */
.lp-topstrip, .lp-topstrip-inner, .lp-season-dd { overflow: visible !important; }
.dropdown-menu.lp-season-menu .dropdown-item {
    border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer;
    border-radius: 0.5rem !important; font-size: 0.76rem !important; font-weight: 600; letter-spacing: 0.01em; padding: 0.32rem 0.6rem !important; color: var(--bs-body-color);
    transition: background var(--t), color var(--t); line-height: 1.25;
}
.lp-season-menu .dropdown-item:hover { background: rgba(var(--team-primary-rgb), 0.10); }
.lp-season-menu .dropdown-item.active { background: var(--team-primary); color: #fff; }

/* Season switcher relocated into the secondary bar (leads the NEWS ... row). */
.lp-season-li { display: inline-flex !important; align-items: center; }
.lp-season-sub { overflow: visible !important; }
.lp-season-sub .lp-season-toggle {
    border-right: 0 !important;
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--lp-ink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 0.65rem 0.85rem 0.65rem 0.4rem; line-height: 1;
    transition: color var(--t);
}
.lp-season-sub .lp-season-toggle:hover { color: #fff; }
.lp-season-sub .lp-season-ico,
.lp-season-sub .lp-season-caret { color: var(--benfica-gold); }

/* Secondary bar on mobile: keep the season switcher + editorial links on one
   swipeable row; the institutional links live in the drawer instead. */
@media (max-width: 1199.98px) {
    .lp-subnav-inner { justify-content: flex-start !important; gap: 0 !important; padding: 0 0.5rem !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .lp-subnav-left { flex-wrap: nowrap !important; }
    .lp-subnav-left > li { flex: 0 0 auto !important; }
    .lp-subnav-right { display: none !important; }
    .lp-sublink { padding: 0.55rem 0.6rem !important; white-space: nowrap; }
    .lp-season-sub .lp-season-toggle { padding: 0.55rem 0.6rem 0.55rem 0.3rem !important; white-space: nowrap; }
}
.lp-crest-track { display: flex; align-items: center; gap: 0.3rem; overflow-x: auto; flex: 0 1 auto; }
.lp-crest {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; color: var(--lp-ink-dim);
    background: rgba(255, 255, 255, 0.06); text-decoration: none;
    transition: transform var(--t), background var(--t), color var(--t);
}
.lp-crest:hover { transform: translateY(-2px) scale(1.08); background: rgba(255, 255, 255, 0.18); color: #fff; }
.lp-crest img { width: 22px; height: 22px; object-fit: contain; }
.lp-crest i { font-size: 0.95rem; }
.lp-crest-next {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; color: var(--benfica-gold);
    background: transparent; text-decoration: none; font-size: 1rem; transition: color var(--t);
}
.lp-crest-next:hover { color: var(--theme-accent-300); background: transparent; }

/* Competition chips (icon + name) in the top strip */
.lp-crest.lp-comp { width: auto; height: auto; padding: 0.12rem 0.6rem 0.12rem 0.18rem; border-radius: 999px; gap: 0.4rem; }
.lp-comp .lp-comp-icon { width: 22px !important; height: 22px !important; border-radius: 50%; object-fit: contain; flex: 0 0 auto; }
.lp-comp-name { font-size: 0.7rem; font-weight: 700; white-space: nowrap; color: var(--lp-ink-dim); letter-spacing: 0.02em; }
.lp-crest.lp-comp:hover { transform: translateY(-1px); }
.lp-crest.lp-comp:hover .lp-comp-name { color: #fff; }

/* ---- TIER 1: primary bar (deep red) ---- */
.lp-primary { background: var(--lp-nav-bg); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.20); }
/* Keep the nav fully visible when sticky (disable the app's hide-on-scroll) */
.lp-primary.hidden, #main-nav.hidden { transform: none !important; }
.lp-primary-inner { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.9rem; min-height: 60px; flex-wrap: nowrap; }
/* The default theme sets overflow-x:clip on #navigation-container, which forces
   vertical clipping too and cuts the logo badge. Allow the nav to overflow. */
#navigation-container:has(.lp-nav), .lp-nav, .lp-primary, .lp-primary-inner { overflow: visible !important; }

.lp-burger { width: 40px; height: 40px; border: 1px solid var(--lp-line); border-radius: 0.6rem; background: rgba(255, 255, 255, 0.10); color: #fff; flex: 0 0 auto; }

/* ===== Reusable "SLBenfica.net" wordmark logo =====
   Drop <a class="slb-logo"> (or any element) anywhere. It adapts to the active
   theme automatically (the wordmark follows the theme text colour, the eagle is
   Benfica red, ".net" is gold) and scales fluidly with clamp() for any screen.
   On the red nav bar it is forced to white/gold (see the .lp-brand block). */
.slb-logo { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; line-height: 1; white-space: nowrap; }
.slb-logo-mark { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.6rem; background: rgba(var(--team-primary-rgb), 0.10); box-shadow: inset 0 0 0 1px rgba(var(--team-primary-rgb), 0.30); transition: transform var(--t), box-shadow var(--t); }
.slb-logo:hover .slb-logo-mark { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(var(--team-primary-rgb), 0.55), 0 4px 12px rgba(0, 0, 0, 0.15); }
.slb-logo-mark i { font-size: 1.7rem !important; color: var(--team-primary); line-height: 1; }
.slb-logo-text { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; transition: transform var(--t); }
.slb-logo-word { position: relative; font-weight: 800; letter-spacing: -0.025em; font-size: clamp(1.15rem, 3.9vw, 1.5rem); color: var(--bs-body-color); transition: text-shadow var(--t); }
.slb-logo-tag { margin-top: 4px; font-size: 0.42rem; font-weight: 700; font-style: italic; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bs-secondary-color); white-space: nowrap; line-height: 1; }
.slb-logo:hover .slb-logo-text { transform: translateY(-1px); }
.slb-logo:hover .slb-logo-word { text-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.slb-logo-net { color: var(--benfica-gold); font-weight: 900; text-transform: none; }
.slb-logo-word::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--team-primary), var(--benfica-gold)); }

/* On the red primary bar the logo is always white + gold, regardless of theme. */
.lp-brand.slb-logo { color: #fff; }
.lp-brand.slb-logo .slb-logo-word { color: #fff; }
.lp-brand.slb-logo .slb-logo-mark { background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)); box-shadow: inset 0 0 0 1px rgba(var(--benfica-gold-rgb), 0.55); }
.lp-brand.slb-logo .slb-logo-mark i { color: #fff; }
.lp-brand.slb-logo .slb-logo-tag { color: rgba(255, 255, 255, 0.8); }
.lp-brand.slb-logo:hover .slb-logo-mark { box-shadow: inset 0 0 0 1px rgba(var(--benfica-gold-rgb), 0.85), 0 4px 12px rgba(0, 0, 0, 0.25); }

/* Standalone navs (error / maintenance / legal pages) reuse the .slb-logo brand.
   These live in the (cache-busted) theme CSS so they apply without waiting on PHP
   OPcache: restore the main-nav hover shadow that the pages' inline #id box-shadow
   would otherwise win over, and kill the default anchor underline on hover. */
#error-nav .slb-logo:hover .slb-logo-mark,
#maintenance-nav .slb-logo:hover .slb-logo-mark,
#legal-nav .slb-logo:hover .slb-logo-mark { box-shadow: inset 0 0 0 1px rgba(var(--benfica-gold-rgb), 0.85), 0 4px 12px rgba(0, 0, 0, 0.25) !important; transform: translateY(-1px); }
#error-nav .slb-logo:hover .slb-logo-text,
#maintenance-nav .slb-logo:hover .slb-logo-text,
#legal-nav .slb-logo:hover .slb-logo-text { transform: translateY(-1px); }
#error-nav .slb-logo:hover .slb-logo-word,
#maintenance-nav .slb-logo:hover .slb-logo-word,
#legal-nav .slb-logo:hover .slb-logo-word { text-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
#error-nav a.slb-logo, #error-nav a.slb-logo:hover, #error-nav a.slb-logo:focus, #error-nav a.slb-logo:active,
#maintenance-nav a.slb-logo, #maintenance-nav a.slb-logo:hover, #maintenance-nav a.slb-logo:focus, #maintenance-nav a.slb-logo:active,
#legal-nav a.slb-logo, #legal-nav a.slb-logo:hover, #legal-nav a.slb-logo:focus, #legal-nav a.slb-logo:active { text-decoration: none !important; }

/* Grouped pill tabs */
.lp-tabgroup {
    display: flex; align-items: center; gap: 0.15rem;
    margin-left: 0.9rem; padding: 0.25rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--lp-line);
    border-radius: 999px;
}
.lp-tab {
    display: inline-flex; align-items: center; white-space: nowrap;
    color: var(--lp-ink-dim) !important; font-weight: 700; font-size: 0.82rem;
    padding: 0.45rem 0.95rem; border-radius: 999px; text-decoration: none;
    transition: color var(--t), background var(--t); cursor: pointer;
}
.lp-tab:hover { color: #fff !important; background: rgba(255, 255, 255, 0.10); }
.lp-tab.active { color: var(--theme-secondary) !important; background: var(--benfica-gold); box-shadow: 0 2px 8px rgba(var(--benfica-gold-rgb), 0.35); }
.lp-tab i { color: var(--benfica-gold); }
.lp-tab:hover i { color: var(--benfica-gold); }

/* ---- Mega-menu under the Matches tab (desktop) ---- */
.lp-tab-mega-wrap { position: relative; display: inline-flex; }
/* invisible bridge so the menu stays open while crossing the gap */
.lp-tab-mega-wrap::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.lp-tab-has-mega .lp-tab-mega-caret { font-size: 0.55rem; margin-left: 0.4rem; opacity: 0.85; transition: transform var(--t); }
.lp-tab-mega-wrap:hover .lp-tab-mega-caret { transform: rotate(180deg); }
.lp-mega {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 2500;
    display: none; grid-template-columns: 1fr 212px;
    min-width: 620px; max-width: 92vw;
    background: #fff; border-radius: 1rem; overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    opacity: 0; transform: translateY(6px); transition: opacity var(--t), transform var(--t);
}
.lp-tab-mega-wrap:hover .lp-mega, .lp-tab-mega-wrap:focus-within .lp-mega { display: grid; opacity: 1; transform: translateY(0); }
.lp-mega-main { padding: 1rem 1.1rem; min-width: 0; }
.lp-mega-title { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--team-primary); margin-bottom: 0.65rem; display: flex; align-items: center; gap: 0.4rem; }
.lp-mega-teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.1rem 0.4rem; max-height: 320px; overflow-y: auto; }
.lp-mega-team { display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.4rem 0.5rem; border-radius: 0.5rem; color: var(--bs-body-color); text-decoration: none; font-size: 0.82rem; font-weight: 600; transition: background var(--t), color var(--t); }
.lp-mega-team:hover { background: rgba(var(--team-primary-rgb), 0.08); color: var(--team-primary); }
.lp-mega-team img, .lp-mega-team-logo { width: 22px !important; height: 22px !important; object-fit: contain; flex: 0 0 auto; }
.lp-mega-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-mega-empty { color: #888; font-size: 0.85rem; padding: 0.5rem; grid-column: 1 / -1; }
.lp-mega-side { background: linear-gradient(180deg, var(--team-primary), var(--team-secondary)); padding: 0.85rem 0.55rem; display: flex; flex-direction: column; gap: 0.08rem; }
.lp-mega-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem; border-radius: 0.55rem; color: #fff; text-decoration: none; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; transition: background var(--t); }
.lp-mega-link i { width: 1.1rem; text-align: center; color: var(--benfica-gold); flex: 0 0 auto; }
.lp-mega-link:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
[data-bs-theme="dark"] .lp-mega { background: var(--bs-body-bg); border-color: rgba(255, 255, 255, 0.08); }
/* Squad mega: players grouped by position (4 columns) */
.lp-mega--players { min-width: 940px; }
.lp-mega-squad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.3rem 0.9rem; max-height: 380px; overflow-y: auto; }
@media (max-width: 1050px) { .lp-mega--players { min-width: 92vw; } .lp-mega-squad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-mega-face { flex: 0 0 auto; display: inline-flex; position: relative; margin-left: 7px; transition: transform 0.18s ease; }
.lp-mega-player:hover .lp-mega-face { transform: scale(1.15); }
.lp-mega-pos { min-width: 0; padding-bottom: 8px; }
.lp-mega-pos-h { display: flex; align-items: center; gap: 0.35rem; font-size: 0.61rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bs-secondary-color, #6c757d); padding: 0.15rem 0.4rem 0.35rem; border-bottom: 1px solid rgba(0, 0, 0, 0.07); margin-bottom: 0.25rem; }
.lp-mega-pos-h i { color: var(--team-primary); font-size: 0.7rem; }
.lp-mega-player { display: flex; align-items: center; gap: 0.45rem; min-width: 0; padding: 0.28rem 0.45rem; border-radius: 0.5rem; color: var(--bs-body-color); text-decoration: none; font-size: 0.79rem; font-weight: 600; transition: background var(--t), color var(--t); }
.lp-mega-player:hover { background: rgba(var(--team-primary-rgb), 0.08); color: var(--team-primary); }
.lp-mega-num { flex: 0 0 auto; width: 1.4rem; text-align: center; font-size: 0.7rem; font-weight: 800; color: var(--team-primary); }
.lp-mega-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Stats mega: category tiles (2 columns) */
.lp-mega--statcats { min-width: 720px; }
.lp-mega-statcats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
@media (max-width: 820px) { .lp-mega--statcats { min-width: 92vw; } .lp-mega-statcats { grid-template-columns: 1fr; } }
.lp-mega-statcat { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.8rem; border-radius: 0.7rem; border: 1px solid rgba(0, 0, 0, 0.07); background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.02)); color: var(--bs-body-color); text-decoration: none; font-size: 0.85rem; font-weight: 700; transition: background var(--t), color var(--t), border-color var(--t), transform var(--t); }
.lp-mega-statcat i { color: var(--team-primary); font-size: 1rem; width: 1.4rem; text-align: center; flex: 0 0 auto; }
.lp-mega-statcat:hover { background: rgba(var(--team-primary-rgb), 0.08); color: var(--team-primary); border-color: rgba(var(--team-primary-rgb), 0.3); transform: translateY(-1px); }
[data-bs-theme="dark"] .lp-mega-pos-h { border-bottom-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .lp-mega-statcat { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
/* Forum mega: category list (2 columns) */
.lp-mega--forum { min-width: 760px; }
.lp-mega-forum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem 0.8rem; max-height: 380px; overflow-y: auto; }
@media (max-width: 860px) { .lp-mega--forum { min-width: 92vw; } .lp-mega-forum { grid-template-columns: 1fr; } }
.lp-mega-cat { display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.5rem 0.6rem; border-radius: 0.6rem; color: var(--bs-body-color); text-decoration: none; font-size: 0.84rem; font-weight: 600; transition: background var(--t), color var(--t); }
.lp-mega-cat i { color: var(--team-primary); font-size: 0.9rem; flex: 0 0 auto; width: 1.2rem; text-align: center; }
.lp-mega-cat:hover { background: rgba(var(--team-primary-rgb), 0.08); color: var(--team-primary); }
/* Show the full category name (wrap instead of truncating) */
.lp-mega-cat-name { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.lp-mega-cat-count { flex: 0 0 auto; font-size: 0.66rem; font-weight: 800; color: var(--bs-secondary-color, #6c757d); background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.06)); border-radius: 99px; padding: 0.05rem 0.5rem; }
[data-bs-theme="dark"] .lp-mega-cat-count { background: rgba(255, 255, 255, 0.08); }
/* Forum mega: a category + its subcategories form one grid cell, subs indented below. */
.lp-mega-catgroup { min-width: 0; display: flex; flex-direction: column; }
.lp-mega-subcats { display: flex; flex-direction: column; margin: 0.05rem 0 0.15rem 1.55rem; }
.lp-mega-subcat { display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.3rem 0.55rem; border-radius: 0.55rem; color: var(--bs-secondary-color, #6c757d); text-decoration: none; font-size: 0.78rem; font-weight: 500; transition: background var(--t), color var(--t); }
.lp-mega-subcat i { color: var(--team-primary); opacity: 0.7; font-size: 0.75rem; flex: 0 0 auto; width: 0.9rem; text-align: center; }
.lp-mega-subcat:hover { background: rgba(var(--team-primary-rgb), 0.08); color: var(--team-primary); }
/* Matches mega: recent results + next fixtures (2 columns) */
.lp-mega--matches { min-width: 900px; }
.lp-mega-matches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem 1.4rem; max-height: 360px; overflow-y: auto; }
@media (max-width: 1000px) { .lp-mega--matches { min-width: 92vw; } .lp-mega-matches { grid-template-columns: 1fr; } }
.lp-mega-subh { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bs-secondary-color, #6c757d); display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.4rem 0.4rem; border-bottom: 1px solid rgba(0, 0, 0, 0.07); margin-bottom: 0.25rem; }
.lp-mega-subh i { color: var(--team-primary); font-size: 0.7rem; }
.lp-mega-match { display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.32rem 0.45rem; border-radius: 0.5rem; color: var(--bs-body-color); text-decoration: none; font-size: 0.8rem; font-weight: 600; transition: background var(--t), color var(--t); }
.lp-mega-match:hover { background: rgba(var(--team-primary-rgb), 0.08); color: var(--team-primary); }
.lp-mega-opp { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-mega-res { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.35rem; font-size: 0.66rem; font-weight: 800; color: #fff; }
.lp-mega-res-W { background: var(--theme-success-strong); }
.lp-mega-res-D { background: var(--theme-accent-800); }
.lp-mega-res-L { background: var(--theme-primary-700); }
.lp-mega-score { flex: 0 0 auto; font-weight: 800; font-size: 0.78rem; }
.lp-mega-vs { flex: 0 0 auto; width: 1.1rem; text-align: center; font-size: 0.7rem; font-weight: 800; color: var(--team-primary); }
.lp-mega-date { flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; color: var(--bs-secondary-color, #6c757d); }
/* Dynamic mega match rows: logos, colored scores, date blocks, countdown */
.lp-mega-logo { flex: 0 0 auto; width: 18px; height: 18px; object-fit: contain; transition: transform 0.18s ease; }
.lp-mega-match:hover .lp-mega-logo { transform: scale(1.2); }
.lp-mega-score-W { color: var(--theme-success-strong); }
.lp-mega-score-D { color: var(--bs-secondary-color, #6c757d); }
.lp-mega-score-L { color: var(--theme-primary-700); }
.lp-mega-mdate { flex: 0 0 auto; font-size: 0.62rem; font-weight: 700; color: var(--bs-secondary-color, #6c757d); }
.lp-mega-fxd { flex: 0 0 auto; width: 1.9rem; text-align: center; background: linear-gradient(180deg, var(--team-primary, #C8102E), var(--theme-gradient-end)); color: #fff; border-radius: 0.45rem; line-height: 1.05; padding: 0.2rem 0; }
.lp-mega-fxd b { display: block; font-size: 0.72rem; font-weight: 900; }
.lp-mega-fxd i { display: block; font-style: normal; font-size: 0.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.9; }
.lp-mega-ha { flex: 0 0 auto; font-size: 0.58rem; font-weight: 800; color: var(--team-primary); background: rgba(var(--team-primary-rgb), 0.1); border-radius: 999px; padding: 0.12rem 0.4rem; }
.lp-mega-in { flex: 0 0 auto; font-size: 0.62rem; font-weight: 800; color: var(--bs-secondary-color, #6c757d); white-space: nowrap; }
[data-bs-theme="dark"] .lp-mega-subh { border-bottom-color: rgba(255, 255, 255, 0.08); }

/* ---- Mobile drawer: expandable mega sections ---- */
.lp-drawer-mega { display: block; }
.lp-drawer-mega > summary { list-style: none; cursor: pointer; }
.lp-drawer-mega > summary::-webkit-details-marker { display: none; }
.lp-drawer-mega > summary::after { display: none !important; } /* hide the row chevron */
.lp-dmega-caret { margin-left: auto; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); transition: transform var(--t); flex: 0 0 auto; }
.lp-drawer-mega[open] > summary .lp-dmega-caret { transform: rotate(180deg); }
.lp-drawer-mega-body { background: #fff; color: var(--bs-body-color); border-radius: 0.85rem; padding: 0.85rem 0.9rem; margin: 0.15rem 0.55rem 0.55rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
.lp-dmega-open { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 800; color: var(--team-primary); text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.7rem; }
.lp-drawer-mega-body .lp-mega-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
.lp-drawer-mega-body .lp-mega-squad,
.lp-drawer-mega-body .lp-mega-matches,
.lp-drawer-mega-body .lp-mega-statcats,
.lp-drawer-mega-body .lp-mega-forum { grid-template-columns: 1fr; max-height: none; }
.lp-drawer-mega-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; margin-top: 0.4rem; }
/* Drawer squad preview: shrink to its content so there is no big empty gap
   under the player list before the quick links. */
.lp-drawer-mega-body .lp-mega-squad { max-height: none !important; min-height: 0; overflow: visible; }
.lp-drawer-mega-body .lp-mega-pos { padding-bottom: 2px; }
.lp-drawer-mega-body .lp-mega-link { color: var(--team-primary); background: rgba(var(--team-primary-rgb), 0.07); text-transform: none; letter-spacing: 0; font-weight: 700; padding: 0.5rem 0.6rem; }
.lp-drawer-mega-body .lp-mega-link i { color: var(--team-primary); }
.lp-drawer-mega-body .lp-mega-link:hover { background: rgba(var(--team-primary-rgb), 0.14); color: var(--team-primary); }
[data-bs-theme="dark"] .lp-drawer-mega-body { background: var(--bs-body-bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
/* Icon-only quick bar for mega tabs at the top of the drawer */
.lp-dmega-bar { display: flex; gap: 0.5rem; padding: 0.1rem 0.05rem 0.7rem; }
.lp-dmega-ico { flex: 1 1 0; min-width: 0; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); border-radius: 0.75rem; color: #fff; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.55rem 0.25rem; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--t), transform var(--t), border-color var(--t); }
.lp-dmega-ico i { font-size: 1.15rem; color: var(--benfica-gold); transition: color var(--t); }
.lp-dmega-lbl { font-size: 0.64rem; font-weight: 700; color: var(--bs-body-color); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-dmega-ico.active .lp-dmega-lbl { color: var(--theme-secondary); }
.lp-dmega-ico:hover { background: rgba(255, 255, 255, 0.12); }
.lp-dmega-ico:active { transform: scale(0.95); }
.lp-dmega-ico.active { background: var(--benfica-gold); border-color: var(--benfica-gold); }
.lp-dmega-ico.active i { color: var(--theme-secondary); }
.lp-dmega-panel[hidden] { display: none !important; }
.lp-dmega-panel { margin: 0 0.05rem 0.7rem !important; animation: lpDrawerIn 0.25s ease backwards; }

/* =====================================================================
   Reference-style drawer: profile header + clean light/dark body
   ===================================================================== */
.lp-drawer { background: var(--bs-body-bg) !important; border-bottom: 0 !important; padding: 0 !important; border-radius: 0 0 1.3rem 1.3rem; margin-top: 0; }
.lp-drawer-scroll { padding: 0 0.9rem 0.6rem !important; }
/* Header */
/* Drawer profile header mirrors the hero section: same diagonal red gradient,
   gold radial glow, and gold top accent. */
.lp-drawer-profile { position: relative; overflow: hidden; margin-top: -0.4px; background: linear-gradient(90deg, var(--benfica-gold), var(--team-primary)) bottom center / 100% 2px no-repeat, linear-gradient(135deg, var(--theme-gradient-start, #e8112c) 0%, var(--theme-gradient-end, #9c0f18) 52%, var(--theme-secondary) 100%); color: #fff; padding: 1.2rem 1.1rem 1.5rem; border-radius: 0; text-align: left; }
.lp-drawer-profile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 90% 30%, rgba(var(--benfica-gold-rgb), 0.20), transparent 58%); pointer-events: none; z-index: 0; }
/* Gold hairline flush at the very top edge (no border-box gap, so it reads as a
   clean gold line rather than a washed-out 0.5px border). */
.lp-drawer-profile::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0.6px; background: var(--benfica-gold); z-index: 3; }
.lp-drawer-profile > * { position: relative; z-index: 1; }
.lp-drawer-profile-row { display: flex; align-items: center; gap: 0.95rem; }
.lp-drawer-profile-info { min-width: 0; flex: 1 1 auto; }
.lp-drawer-avatar { width: 64px; height: 64px; flex: 0 0 auto; margin: 0; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; }
.lp-drawer-avatar img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; }
.lp-drawer-avatar-fallback { color: #fff; font-size: 1.6rem; }
.lp-drawer-name { font-weight: 800; font-size: 1.25rem; color: #fff; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-drawer-status { font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); margin-top: 0.2rem; display: flex; align-items: center; gap: 0.35rem; }
.lp-drawer-status i { color: var(--benfica-gold); font-size: 0.75rem; }
.lp-drawer-viewprofile { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.55rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.16); padding: 0.32rem 0.75rem; border-radius: 999px; transition: background var(--t); }
.lp-drawer-viewprofile:hover { background: rgba(255, 255, 255, 0.3); color: #fff; }
.lp-drawer-stats { display: flex; gap: 0.5rem; margin-top: 1rem; }
.lp-drawer-stat { flex: 1 1 0; min-width: 0; text-align: center; background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.7rem; padding: 0.5rem 0.3rem; }
.lp-drawer-stat strong { display: block; font-size: 1.1rem; font-weight: 800; color: #fff; line-height: 1.1; }
.lp-drawer-stat span { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.72); }
/* Section headings — plain muted (drop the gold tick/line) */
.lp-drawer-heading { color: var(--bs-secondary-color, #8a8a8a) !important; padding: 1rem 0.5rem 0.45rem !important; }
.lp-drawer-heading::before, .lp-drawer-heading::after { display: none !important; }
/* List rows — clean, dark text, outline icons, no gold tile */
.lp-drawer-link { color: var(--bs-body-color) !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 999px !important; padding: 0.7rem 0.9rem !important; transform: none !important; box-shadow: none !important; }
.lp-drawer-link::after { display: none !important; }
.lp-drawer-link > i:first-child { background: none !important; box-shadow: none !important; width: 1.6rem !important; height: auto !important; border-radius: 0 !important; color: var(--bs-body-color) !important; font-size: 1.15rem !important; transform: none !important; }
.lp-drawer-link:hover { background: rgba(var(--team-primary-rgb), 0.06) !important; color: var(--team-primary) !important; transform: none !important; }
.lp-drawer-link:hover > i:first-child { background: none !important; color: var(--team-primary) !important; transform: none !important; }
.lp-drawer-link.active { background: var(--bs-body-bg) !important; border-color: rgba(0, 0, 0, 0.06) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09) !important; color: var(--team-primary) !important; }
.lp-drawer-link.active > i:first-child { color: var(--team-primary) !important; }
/* Sign out */
.lp-drawer-sep { height: 1px; background: var(--bs-border-color, rgba(0, 0, 0, 0.08)); margin: 0.55rem 0.5rem; list-style: none; }
.lp-drawer-signout, .lp-drawer-signout > i:first-child { color: var(--theme-primary-400) !important; }
.lp-drawer-signout:hover { background: rgba(226, 59, 78, 0.08) !important; color: var(--theme-primary-400) !important; }
.lp-drawer-signout:hover > i:first-child { color: var(--theme-primary-400) !important; }
/* Bottom action buttons */
.lp-drawer-foot { display: flex; gap: 0.6rem; padding: 0.5rem 0.9rem 1.1rem; }
.lp-drawer-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 0.9rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: background var(--t), color var(--t); }
.lp-drawer-btn-primary { background: var(--team-primary); color: #fff; }
.lp-drawer-btn-primary:hover { background: var(--team-secondary); color: #fff; }
.lp-drawer-btn-ghost { background: transparent; color: var(--bs-body-color); border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.15)); }
.lp-drawer-btn-ghost:hover { background: rgba(var(--team-primary-rgb), 0.06); color: var(--team-primary); }
/* Search + icon bar adapted to the light body */
.lp-drawer-scroll form.mb-2 { margin-top: 0.6rem; }
.lp-dmega-ico { background: rgba(var(--team-primary-rgb), 0.06) !important; border-color: rgba(var(--team-primary-rgb), 0.14) !important; }
.lp-dmega-ico.active { background: var(--benfica-gold) !important; border-color: var(--benfica-gold) !important; }

/* ---- Extra polish on the Explore/Club links + headings ---- */
.lp-drawer-heading { display: flex !important; align-items: center; gap: 0.55rem; }
.lp-drawer-heading::before { display: inline-block !important; content: "" !important; width: 16px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--team-primary), var(--benfica-gold)); flex: 0 0 auto; }
.lp-drawer-list .lp-drawer-link { gap: 0.85rem !important; }
.lp-drawer-list .lp-drawer-link > i:first-child { width: 2.15rem !important; height: 2.15rem !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 0.65rem !important; background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.045)) !important; color: var(--bs-body-color) !important; font-size: 1rem !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t); }
.lp-drawer-list .lp-drawer-link:hover > i:first-child { background: rgba(var(--team-primary-rgb), 0.12) !important; color: var(--team-primary) !important; transform: scale(1.06); }
.lp-drawer-list .lp-drawer-link.active > i:first-child { background: var(--team-primary) !important; color: #fff !important; box-shadow: 0 5px 14px rgba(var(--team-primary-rgb), 0.38); }
.lp-drawer-list .lp-drawer-link::after { display: inline-flex !important; content: "\203A"; margin-left: auto; padding-left: 0.4rem; font-size: 1.15rem; line-height: 1; color: var(--bs-secondary-color, #9a9a9a); opacity: 0; transform: translateX(-5px); transition: opacity var(--t), transform var(--t); }
.lp-drawer-list .lp-drawer-link:hover::after, .lp-drawer-list .lp-drawer-link.active::after { opacity: 1; transform: translateX(0); }
.lp-drawer-list .lp-drawer-link.active::after { color: var(--team-primary); }
.lp-drawer-list .lp-drawer-signout:hover > i:first-child { background: rgba(226, 59, 78, 0.12) !important; color: var(--theme-primary-400) !important; }
[data-bs-theme="dark"] .lp-drawer-list .lp-drawer-link > i:first-child { background: rgba(255, 255, 255, 0.06) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }

/* ---- Bolder section headings (Explore / Club) ---- */
.lp-drawer-heading { color: var(--team-primary) !important; font-size: 0.7rem !important; font-weight: 800 !important; letter-spacing: 0.15em !important; padding: 1.2rem 0.5rem 0.55rem !important; }
.lp-drawer-heading::before { width: 20px !important; height: 3px !important; border-radius: 3px; background: linear-gradient(90deg, var(--team-primary), var(--benfica-gold)) !important; box-shadow: 0 1px 4px rgba(var(--team-primary-rgb), 0.35); }
.lp-drawer-heading::after { display: inline-block !important; content: "" !important; flex: 1 1 auto; height: 1px; margin-left: 0.55rem; background: linear-gradient(90deg, rgba(var(--team-primary-rgb), 0.30), transparent) !important; }

/* Drop shadow under the drawer so its bottom edge reads as elevated */
.lp-drawer { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22) !important; }
[data-bs-theme="dark"] .lp-drawer { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5) !important; }

/* ---- Compact drawer rows ---- */
.lp-drawer-list { padding-top: 0 !important; padding-bottom: 0.3rem !important; }
.lp-drawer-link { padding: 0.42rem 0.85rem !important; }
.lp-drawer-list .lp-drawer-link { gap: 0.7rem !important; }
.lp-drawer-list .lp-drawer-link > i:first-child { width: 1.9rem !important; height: 1.9rem !important; font-size: 0.92rem !important; border-radius: 0.55rem !important; }
.lp-drawer-heading { padding: 0.8rem 0.5rem 0.35rem !important; }
.lp-tab.active i { color: var(--theme-secondary); }

/* Right action cluster */
.lp-actions { gap: 0.5rem; flex-wrap: nowrap; }
/* When TV/language are both disabled this wrapper is empty — collapse it so it
   doesn't leave a flex gap between the search and theme bubbles. */
.lp-actions-desktop:empty { display: none !important; }
.lp-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--lp-line); background: rgba(255, 255, 255, 0.08);
    color: #fff; transition: background var(--t), transform var(--t); flex: 0 0 auto;
}
.lp-circle:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); }

.lp-search-toggle { position: relative; }
.lp-nav.search-open .lp-search-toggle { color: var(--team-primary) !important; background: #fff !important; border-color: #fff !important; }
/* Full-width search bar that drops in below the primary bar when opened */
.lp-searchbar { display: none; background: #ffffff; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }
.lp-nav.search-open .lp-searchbar { display: block; }
.lp-searchbar-inner { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; }
.lp-searchbar-icon { color: var(--team-primary); font-size: 1rem; flex: 0 0 auto; }
.lp-searchbar input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--theme-ink); font-size: 1rem; height: 38px; }
.lp-searchbar input::placeholder { color: #9097a1; }
.lp-searchbar-go { flex: 0 0 auto; border: 0; border-radius: 999px; background: var(--team-primary); color: #fff; font-weight: 700; font-size: 0.85rem; padding: 0.5rem 1.2rem; cursor: pointer; }
.lp-searchbar-go:hover { background: var(--team-secondary); }
.lp-searchbar-close { flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: #6b6f78; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lp-searchbar-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--team-primary); }

/* Full-width filter bar (same pattern as the search bar) */
.lp-filterbar { display: none; background: #ffffff; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }
.lp-nav.filter-open .lp-filterbar { display: block; }
.lp-nav.filter-open .lp-filter-toggle { color: var(--team-primary) !important; background: #fff !important; border-color: #fff !important; }
.lp-filterbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; padding: 0.6rem 0.9rem; }
.lp-filterbar-title { display: inline-flex; align-items: center; align-self: center; font-weight: 800; color: var(--team-primary); font-size: 0.85rem; margin-right: 0.3rem; }
/* Label sits to the LEFT of each selector, inline */
.lp-filter-field { display: flex; flex-direction: row; align-items: center; gap: 0.45rem; min-width: 210px; flex: 1 1 210px; }
.lp-filter-field label { margin: 0; flex: 0 0 auto; white-space: nowrap; font-size: 0.68rem; font-weight: 700; color: #6b6f78; text-transform: uppercase; letter-spacing: 0.03em; }
.lp-filter-field .form-select { flex: 1 1 auto; min-width: 0; font-size: 0.85rem; }
.lp-filterbar-go { flex: 0 0 auto; align-self: center; height: 38px; border: 0; border-radius: 999px; background: var(--team-primary); color: #fff; font-weight: 700; font-size: 0.85rem; padding: 0 1.2rem; cursor: pointer; }
.lp-filterbar-go:hover { background: var(--team-secondary); }
.lp-filterbar-close { flex: 0 0 auto; align-self: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: #6b6f78; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lp-filterbar-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--team-primary); }
[data-bs-theme="dark"] .lp-searchbar, [data-bs-theme="dark"] .lp-filterbar { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .lp-searchbar input, [data-bs-theme="dark"] .lp-filter-field label { color: var(--bs-body-color); }


.lp-tv-pill {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: 0.5rem 0.95rem; border-radius: 999px; font-weight: 800; font-size: 0.8rem;
    color: var(--theme-secondary); text-decoration: none;
    background: var(--benfica-gold);
    border: 0; transition: transform var(--t), box-shadow var(--t);
}
.lp-tv-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--benfica-gold-rgb), 0.45); color: var(--theme-secondary); background: var(--theme-accent-300); }

.lp-lang { display: inline-flex; align-items: center; white-space: nowrap; border: 1px solid var(--lp-line); border-radius: 999px; background: transparent; color: var(--lp-ink); font-weight: 700; font-size: 0.85rem; padding: 0.4rem 0.7rem; }
.lp-lang:hover { color: var(--benfica-gold); border-color: var(--benfica-gold); }

/* Theme toggle + framework buttons in the bar -> white on red */
.lp-theme, .lp-theme .btn { color: #fff !important; }
.lp-actions .btn-outline-light,
.lp-theme.btn,
.lp-actions .user-dropdown-btn {
    color: #fff !important;
    border-color: var(--lp-line) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-width: 1px !important;
}
.lp-actions .btn-outline-light:hover,
.lp-actions .user-dropdown-btn:hover { background: rgba(255, 255, 255, 0.18) !important; color: #fff !important; }
/* Golden border on the round nav "bubble" buttons (search, theme, filter, bell, avatar). */
.lp-circle, .lp-burger,
.lp-actions .notification-popup-toggle,
.lp-actions .btn-outline-light,
.lp-actions .user-dropdown-btn,
.lp-theme.btn { border-color: rgba(var(--benfica-gold-rgb), 0.6) !important; }

/* Auth / account cluster — keep everything on ONE row. Match the row's 0.5rem
   gap and strip stray wrapper margins so the account bubbles are spaced exactly
   like every other nav bubble. */
.lp-auth { display: inline-flex; align-items: center; gap: 0.5rem; }
.lp-auth > .dropdown, .lp-auth .auth-controls, .lp-guest-auth { display: inline-flex; align-items: center; gap: 0.5rem; }
.lp-actions .notification-popup, .lp-actions .user-account-dropdown, .lp-auth > * { margin: 0 !important; }
/* Guest login/register bubbles: rely on the 0.5rem gap (not a per-button margin),
   and center the icon when its label is hidden on mobile. */
.lp-guest-auth .btn { margin: 0 !important; }
@media (max-width: 767.98px) { .lp-guest-auth .btn > i { margin: 0 !important; } }
.lp-guest-auth .btn { border-radius: 999px !important; font-weight: 800; padding: 0.5rem 1.2rem !important; }
.lp-guest-auth a[href*="login"] { background: #ffffff !important; color: var(--team-primary) !important; border-color: #ffffff !important; }
.lp-guest-auth a[href*="login"]:hover { background: rgba(255, 255, 255, 0.88) !important; color: var(--team-secondary) !important; border-color: rgba(255, 255, 255, 0.88) !important; }
/* Uniform circular icon buttons: the notification bell matches the
   search/filter circles exactly; the account button is a pill with the name on
   tablet/desktop and a plain avatar circle on phones. */
.lp-actions .notification-popup-toggle,
.lp-nav .lp-theme,
.lp-nav .theme-toggle,
.lp-nav button.mobile-account-theme {
    width: 40px !important; height: 40px !important;
    min-width: 40px !important; min-height: 40px !important;
    max-width: 40px !important; max-height: 40px !important; /* beat the default .theme-toggle{max-height:31px} cap */
    padding: 0 !important;
    border-radius: 50% !important; display: inline-flex !important;
    align-items: center; justify-content: center; flex: 0 0 auto; position: relative;
    border: 1px solid var(--lp-line) !important; background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important; margin: 0 !important;
}
.lp-actions .notification-popup-toggle:hover,
.lp-nav .lp-theme:hover,
.lp-nav .theme-toggle:hover { background: rgba(255, 255, 255, 0.18) !important; }
.lp-actions .notification-popup-toggle i,
.lp-nav .lp-theme i,
.lp-nav .theme-toggle i { font-size: 1rem !important; }
/* Golden border on the theme toggle, notification bell and account circle too. */
.lp-actions .notification-popup-toggle,
.lp-nav .lp-theme,
.lp-nav .theme-toggle,
.lp-nav button.mobile-account-theme { border-color: rgba(var(--benfica-gold-rgb), 0.6) !important; }
/* Account button: avatar photo + name pill on desktop (>=1200px, where the nav
   shows text). Below 1200px the responsive blocks collapse it to a circle-only
   bubble with the photo filling it — the name span is d-xl-inline so it simply
   disappears instead of leaving an empty gap. Caret stays off at all widths. */
.lp-auth .user-dropdown-btn {
    border-radius: 999px !important; font-weight: 700; padding: 3px 0.9rem 3px 3px !important;
    display: inline-flex !important; align-items: center; justify-content: flex-start; gap: 0.45rem;
    height: 40px; flex: 0 0 auto; overflow: hidden; max-width: 220px;
}
.lp-auth .user-dropdown-btn::after { display: none !important; }
.lp-auth .user-dropdown-btn .lp-user-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Photo (or initials/icon fallback) is a full-height circle flush with the pill's left edge */
.lp-auth .user-dropdown-btn img,
.lp-auth .user-dropdown-btn .user-avatar-initials,
.lp-auth .user-dropdown-btn .user-avatar-icon { width: 34px !important; height: 34px !important; border-radius: 50% !important; object-fit: cover; margin: 0 !important; flex: 0 0 auto; }
@media (max-width: 767.98px) {
    .lp-auth .user-dropdown-btn { width: 40px; min-width: 40px; padding: 0 !important; border-radius: 50% !important; justify-content: center; }
    .lp-auth .user-dropdown-btn::after { display: none !important; }
}
/* "More" toggle (mobile): tapping the ellipsis swaps the filters + theme bubbles
   for the Search + Poll/Trending bubbles in the SAME flex slots — identical gaps,
   nothing shifts. The two "more" bubbles are hidden until the ellipsis is open. */
.lp-more-item { display: none; }
.lp-actions.lp-more-active .lp-more-item { display: inline-flex; }
.lp-actions.lp-more-active .lp-filter-toggle,
.lp-actions.lp-more-active .lp-theme,
.lp-actions.lp-more-active .theme-toggle,
.lp-actions.lp-more-active button.mobile-account-theme { display: none !important; }
.lp-actions.lp-more-active .lp-more-toggle { background: rgba(255, 255, 255, 0.22) !important; }
/* While the Poll/Trending sidebar is open, the ellipsis becomes an X (tap to close it). */
body.bn-aside-open .lp-more-toggle { background: rgba(255, 255, 255, 0.22) !important; }
body.bn-aside-open .lp-more-toggle > i::before { content: "\f00d" !important; }
/* Gold icon when active: ellipsis open, the X (sidebar open), and the hamburger X. */
.lp-actions.lp-more-active .lp-more-toggle i,
body.bn-aside-open .lp-more-toggle i,
#mobile-menu-toggle[aria-expanded="true"] i { color: var(--benfica-gold, #F4B223) !important; }

/* ---- User account dropdown — modern theme colours ---- */
.lp-auth .user-dropdown-menu { border: 1px solid rgba(0, 0, 0, 0.06) !important; border-radius: 1rem !important; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22) !important; overflow: hidden; padding: 0.35rem !important; }
.lp-auth .user-dropdown-menu .dropdown-header { background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03)) !important; border-bottom-color: rgba(var(--team-primary-rgb), 0.12) !important; }
.lp-auth .user-dropdown-menu .dropdown-header h6 { color: var(--bs-body-color); }
.lp-auth .user-dropdown-menu .dropdown-header i { color: var(--benfica-gold); }
.lp-auth .user-dropdown-menu h6.dropdown-header { color: var(--team-primary) !important; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.7rem; background: transparent !important; border-bottom: 0 !important; }
.lp-auth .user-dropdown-menu .dropdown-item { border-radius: 0.6rem !important; font-weight: 600; transition: background var(--t), color var(--t); }
.lp-auth .user-dropdown-menu .dropdown-item i { color: var(--team-primary); }
/* Hovered row reads like a hovered nav tab: solid fill, white label, gold icon. */
.lp-auth .user-dropdown-menu .dropdown-item:hover, .lp-auth .user-dropdown-menu .dropdown-item:focus { background: var(--team-primary) !important; color: #fff !important; }
.lp-auth .user-dropdown-menu .dropdown-item:hover i, .lp-auth .user-dropdown-menu .dropdown-item:focus i { color: var(--benfica-gold) !important; }
.lp-auth .user-dropdown-menu .dropdown-item:hover .badge, .lp-auth .user-dropdown-menu .dropdown-item:focus .badge { background: rgba(255, 255, 255, 0.22) !important; }
.lp-auth .user-dropdown-menu .dropdown-divider { border-color: rgba(var(--team-primary-rgb), 0.12); }
.lp-auth .user-dropdown-menu .badge { background: linear-gradient(135deg, var(--team-primary), var(--team-secondary)) !important; color: #fff !important; }
.lp-auth .user-dropdown-menu .js-global-logout-link, .lp-auth .user-dropdown-menu .js-global-logout-link i { color: var(--theme-danger) !important; }
.lp-auth .user-dropdown-menu .js-global-logout-link:hover, .lp-auth .user-dropdown-menu .js-global-logout-link:focus { background: var(--theme-danger) !important; color: #fff !important; }
.lp-auth .user-dropdown-menu .js-global-logout-link:hover i, .lp-auth .user-dropdown-menu .js-global-logout-link:focus i { color: var(--benfica-gold) !important; }

/* Remove the Bootstrap focus glow that lingers on nav bubbles after a modal closes. */
.lp-nav .btn:focus, .lp-nav .btn:focus-visible,
.lp-circle:focus, .lp-circle:focus-visible,
.lp-burger:focus, .lp-burger:focus-visible,
.lp-actions .notification-popup-toggle:focus, .lp-actions .notification-popup-toggle:focus-visible,
.lp-nav .lp-theme:focus, .lp-nav .theme-toggle:focus,
.lp-auth .user-dropdown-btn:focus, .lp-auth .user-dropdown-btn:focus-visible,
.lp-tab:focus, .lp-tab:focus-visible,
.lp-season-toggle:focus, .lp-search-toggle:focus, .lp-filter-toggle:focus { box-shadow: none !important; outline: none !important; }

.lp-pill-primary { border-radius: 999px; font-weight: 700; color: #fff; background: var(--team-primary); border: 1px solid var(--team-primary); }
.lp-pill-primary:hover { background: var(--team-secondary); border-color: var(--team-secondary); color: #fff; }

/* ---- TIER 2: secondary bar (deep red) ---- */
.lp-subnav { background: var(--lp-subnav-bg); border-bottom: 0.6px solid var(--benfica-gold); box-shadow: 0 0.6px 0 0 var(--benfica-gold); }
.lp-subnav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0.9rem; }
.lp-subnav-left { display: flex; align-items: center; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; }
.lp-subnav-left > li { display: inline-flex; align-items: center; }
.lp-subnav-left > li + li::before { content: ""; width: 1px; height: 13px; background: var(--benfica-gold); margin: 0 0.25rem; }
.lp-sublink {
    display: inline-flex; align-items: center; gap: 0.4rem; color: var(--lp-ink-dim); font-weight: 700; font-size: 0.74rem;
    letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
    padding: 0.65rem 0.85rem; border-bottom: 2px solid transparent; transition: color var(--t), border-color var(--t);
}
.lp-sublink i { color: var(--benfica-gold); }
.lp-sublink:hover { color: #fff; }
.lp-sublink.active { color: #fff; border-bottom-color: transparent; }

.lp-subnav-right { display: flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; }
.lp-inst-link {
    color: var(--lp-ink); font-weight: 700; font-size: 0.78rem; text-decoration: none;
    padding: 0.55rem 0.7rem; border: 0; background: transparent; transition: color var(--t);
}
.lp-inst-link:hover { color: var(--benfica-gold); }
.lp-inst-dropdown .dropdown-menu { border: 0; border-radius: 0.8rem; box-shadow: 0 0.35rem 1.1rem rgba(17, 12, 12, 0.10); padding: 0.35rem; background: var(--bs-body-bg) !important; }
.lp-inst-dropdown .dropdown-item { border-radius: 0.5rem; font-size: 0.85rem; padding: 0.45rem 0.7rem; color: var(--bs-body-color) !important; }
.lp-inst-dropdown .dropdown-item:hover { background: rgba(var(--team-primary-rgb), 0.10); color: var(--team-primary) !important; }

/* ---- Mobile drawer (deep red) ---- */
.lp-drawer { background: var(--lp-nav-solid); border-bottom: 3px solid var(--benfica-gold); }
.lp-drawer-list { list-style: none; margin: 0; padding: 0.25rem 0 0.5rem; }
.lp-drawer-heading { padding: 0.9rem 1rem 0.35rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.lp-drawer-link { display: flex; align-items: center; gap: 0.85rem; color: #fff; font-weight: 600; font-size: 1.02rem; padding: 0.8rem 1rem; text-decoration: none; border-radius: 0.7rem; transition: background var(--t); }
.lp-drawer-link:hover, .lp-drawer-link:active { background: rgba(255, 255, 255, 0.10); color: #fff; }
.lp-drawer-link.active { background: rgba(255, 255, 255, 0.14); }
.lp-drawer-link > i:first-child { width: 1.5rem; text-align: center; font-size: 1rem; color: var(--benfica-gold); flex: 0 0 auto; }
.lp-drawer-link span { flex: 1 1 auto; }
.lp-drawer-ext { font-size: 0.7rem; opacity: 0.6; }
.lp-drawer .input-group { margin-bottom: 0.5rem; }
.lp-drawer-actions .lp-guest-auth { width: 100%; }
.lp-drawer-actions .lp-guest-auth .btn { flex: 1; }
/* The default theme shows a fixed full-screen backdrop when the menu opens,
   which sits on top of this in-flow drawer and swallows taps. Disable it so the
   drawer links are clickable, and keep the page scrollable. */
#mobile-nav-backdrop { display: none !important; }
body.mobile-nav-open { overflow: visible !important; }
.lp-drawer { position: relative; z-index: 1042; max-height: calc(100vh - 120px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: none; }
.lp-drawer-link { position: relative; z-index: 1; -webkit-tap-highlight-color: transparent; }

/* ---- Dynamic drawer polish ---- */
.lp-drawer { background: linear-gradient(180deg, var(--lp-nav-solid) 0%, var(--theme-secondary) 100%); }
.lp-drawer-heading { display: flex; align-items: center; gap: 0.5rem; }
.lp-drawer-heading::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--benfica-gold), transparent); }
.lp-drawer-link { margin: 0.1rem 0.55rem; padding: 0.7rem 0.8rem; gap: 0.7rem; border: 1px solid transparent; overflow: hidden; }
.lp-drawer-link > i:first-child { width: 2.15rem; height: 2.15rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.6rem; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(var(--benfica-gold-rgb), 0.22); font-size: 0.95rem; transition: transform var(--t), background var(--t), color var(--t); }
.lp-drawer-link::after { content: "\203A"; margin-left: auto; padding-left: 0.5rem; font-size: 1.25rem; line-height: 1; color: rgba(255, 255, 255, 0.28); opacity: 0; transform: translateX(-5px); transition: opacity var(--t), transform var(--t); }
.lp-drawer-link:hover, .lp-drawer-link:active { background: rgba(255, 255, 255, 0.08); transform: translateX(5px); border-color: rgba(var(--benfica-gold-rgb), 0.22); }
.lp-drawer-link:hover > i:first-child, .lp-drawer-link:active > i:first-child { background: var(--benfica-gold); color: var(--theme-secondary); transform: scale(1.06); }
.lp-drawer-link:hover::after, .lp-drawer-link:active::after { opacity: 1; transform: translateX(0); }
.lp-drawer-link.active { background: linear-gradient(90deg, rgba(var(--benfica-gold-rgb), 0.20), rgba(255, 255, 255, 0.03)); border-color: rgba(var(--benfica-gold-rgb), 0.38); box-shadow: inset 3px 0 0 var(--benfica-gold); }
.lp-drawer-link.active > i:first-child { background: var(--benfica-gold); color: var(--theme-secondary); }
.lp-drawer-link.active::after { opacity: 1; transform: translateX(0); color: var(--benfica-gold); }
/* Staggered entrance each time the drawer opens */
body.mobile-nav-open .lp-drawer-link { animation: lpDrawerIn 0.3s ease backwards; }
body.mobile-nav-open .lp-drawer-list li:nth-child(1) .lp-drawer-link { animation-delay: 0.03s; }
body.mobile-nav-open .lp-drawer-list li:nth-child(2) .lp-drawer-link { animation-delay: 0.06s; }
body.mobile-nav-open .lp-drawer-list li:nth-child(3) .lp-drawer-link { animation-delay: 0.09s; }
body.mobile-nav-open .lp-drawer-list li:nth-child(4) .lp-drawer-link { animation-delay: 0.12s; }
body.mobile-nav-open .lp-drawer-list li:nth-child(5) .lp-drawer-link { animation-delay: 0.15s; }
body.mobile-nav-open .lp-drawer-list li:nth-child(6) .lp-drawer-link { animation-delay: 0.18s; }
body.mobile-nav-open .lp-drawer-list li:nth-child(7) .lp-drawer-link { animation-delay: 0.21s; }
@keyframes lpDrawerIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

/* ---- Premium drawer refinements ---- */
.lp-drawer { background: radial-gradient(130% 70% at 100% 0%, rgba(var(--benfica-gold-rgb), 0.07), transparent 58%), linear-gradient(180deg, var(--lp-nav-solid) 0%, var(--theme-secondary) 100%); }
.lp-drawer > div { padding: 0.85rem 0.75rem 1.1rem !important; }
/* Frosted search field with gold focus ring */
.lp-drawer form.mb-2 { margin-bottom: 0.9rem !important; }
.lp-drawer .input-group { border-radius: 0.9rem; overflow: hidden; background: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28); transition: box-shadow var(--t); }
.lp-drawer .input-group:focus-within { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28), 0 0 0 2px var(--benfica-gold); }
.lp-drawer .input-group-text { background: #fff; border: 0; color: var(--team-primary); padding-left: 0.9rem; }
.lp-drawer .form-control { border: 0; box-shadow: none !important; padding: 0.72rem 0.6rem; font-size: 1rem; }
/* Section headings: accent bar + trailing hairline */
.lp-drawer-heading { margin-top: 0.4rem; padding: 0.9rem 0.6rem 0.4rem; }
.lp-drawer-heading::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent); }
/* Items: gradient tile, hover lift, glowing active state */
.lp-drawer-link > i:first-child { background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)); }
.lp-drawer-link:hover, .lp-drawer-link:active { box-shadow: 0 5px 16px rgba(0, 0, 0, 0.20); }
.lp-drawer-link.active { box-shadow: inset 3px 0 0 var(--benfica-gold), 0 5px 16px rgba(0, 0, 0, 0.20); }
.lp-drawer-link.active > i:first-child { box-shadow: 0 0 0 1px var(--benfica-gold), 0 0 12px rgba(var(--benfica-gold-rgb), 0.45); }

.card-header { border-bottom: 1px solid var(--bs-border-color); font-weight: 700; background: var(--bs-tertiary-bg); }
/* renderSection cards: match the DEFAULT theme — plain solid-red header,
   no gradient and no gold accent bar. */
.card-header.bg-primary, .card-header.bg-team-primary {
    background: var(--team-primary) !important;
    color: #fff !important;
}
.section-card .card-header::before { content: none !important; }

/* Win the specificity fight with Bootstrap's own border-*/bg-* utilities.
   (theme_manager.php's inline block is tokenised now, so these only need to
   out-specify Bootstrap, not undo a hardcoded red.) */
html .card-header.bg-primary, html .card-header.bg-team-primary { background-color: var(--team-primary) !important; }
html .border-team-primary { border-color: var(--team-primary) !important; }
/* Section-card borders match their header colour (the .card neutral border above
   otherwise overrides Bootstrap's border-* and they all look silver). */
html .border-primary { border-color: var(--team-primary) !important; }
html .border-info { border-color: rgba(var(--bs-info-rgb, 13, 202, 240), 1) !important; }
html .border-warning { border-color: rgba(var(--bs-warning-rgb, 255, 193, 7), 1) !important; }
html .border-success { border-color: rgba(var(--bs-success-rgb, 25, 135, 84), 1) !important; }
html .border-danger { border-color: rgba(var(--bs-danger-rgb, 220, 53, 69), 1) !important; }
html .border-secondary { border-color: rgba(var(--bs-secondary-rgb, 108, 117, 125), 1) !important; }
html .border-dark { border-color: rgba(var(--bs-dark-rgb, 33, 37, 41), 1) !important; }
html .text-team-primary { color: var(--team-primary) !important; }

.btn { border-radius: var(--theme-radius-sm, 0.6rem); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn-primary { background: var(--team-primary); border-color: var(--team-primary); }
/* Hover/active are derived shades of the primary, not the near-black maroon. */
.btn-primary:hover { background: var(--theme-primary-hover); border-color: var(--theme-primary-hover); }
.btn-primary:active { background: var(--theme-primary-active); border-color: var(--theme-primary-active); }
.btn-primary:focus-visible, .btn-outline-primary:focus-visible { box-shadow: var(--theme-focus-ring); outline: none; }
.btn-outline-primary { color: var(--team-primary); border-color: var(--team-primary); }
.btn-outline-primary:hover { background: var(--team-primary); border-color: var(--team-primary); color: var(--theme-on-primary); }
.badge.bg-primary { background-color: var(--team-primary) !important; }
/* Loading / refresh spinning wheel uses Benfica gold instead of Bootstrap blue. */
.spinner-border, .spinner-grow { color: var(--benfica-gold) !important; }
.preloader .spinner-border, .preloader .spinner-grow,
.preloader [class*="spinner"], .preloader [class*="loader"] { color: var(--benfica-gold) !important; border-right-color: transparent !important; }
.fa-spinner.fa-spin, .fa-circle-notch.fa-spin { color: var(--benfica-gold) !important; }
/* Tinted badges (e.g. the monthly "X Total") keep the pale blue tint so they
   match the "Total" stat box instead of going solid team-red. */
.badge.bg-primary.bg-opacity-10 { background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1) !important; }
/* Fixtures stat boxes (Total / Played / Upcoming / Wins / Draws / Losses):
   flat tinted tiles with no border and no shadow. */
.p-1.border.rounded.bg-opacity-10.h-100 { border: 0 !important; box-shadow: none !important; }

/* Match header meta row (date, venue, attendance, referee, MOTM) -> gold */
body .match-header-meta, body .match-header-meta div, body .match-header-meta span,
body .match-header-meta a, body .match-header-meta i, body .match-header-meta strong,
body .match-header-meta time, body .match-header-meta small { color: var(--benfica-gold) !important; }
body .match-header-meta a:hover { color: var(--theme-accent-300) !important; }

#back-to-top { position: fixed; right: 1.1rem; bottom: 1.1rem; width: 46px; height: 46px; display: none; z-index: 1030; background: var(--team-primary); border: 0; box-shadow: none; }
#back-to-top.show { display: inline-flex; align-items: center; justify-content: center; }

/* =====================================================================
   DARK MODE
   ===================================================================== */
[data-bs-theme="dark"] body { background: radial-gradient(1200px 600px at 100% -10%, rgba(var(--team-primary-rgb), 0.12), transparent 60%), var(--bs-body-bg); }
[data-bs-theme="dark"] .card, [data-bs-theme="dark"] .section-card, [data-bs-theme="dark"] .widget { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .card-header { background: rgba(255, 255, 255, 0.03); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1199.98px) {
    /* No divider between the primary bar and the secondary bar. The secondary
       bar's thin gold bottom line is drawn as a box-shadow so it overlaps the
       hero's top edge — eliminating the faint white sub-pixel gap a 0.5px
       border leaves between the line and the hero. */
    .lp-primary { border-bottom: 0 !important; }
    .lp-subnav { border-bottom: 0 !important; box-shadow: 0 0.6px 0 0 var(--benfica-gold) !important; }
    /* Fixed height + evenly centred items (symmetric top/bottom space) */
    .lp-primary-inner { padding: 4px 0.6rem !important; min-height: 50px !important; height: auto !important; gap: 0.4rem; align-items: center; }
    .lp-brand { font-size: 1.1rem; }
    .lp-actions { gap: 0.35rem; }
    .lp-circle, .lp-burger, .lp-actions .notification-popup-toggle, .lp-nav .lp-theme, .lp-nav .theme-toggle, .lp-nav button.mobile-account-theme, .lp-guest-auth .btn, .lp-auth .user-dropdown-btn, .slb-logo-mark { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; max-width: 38px !important; max-height: 38px !important; padding: 0 !important; }
    /* Account cluster shares the row's gap so its bubbles are spaced like the rest.
       Kill wrapper margins and collapse the empty native-action hosts (they are
       d-flex and always present, which otherwise adds an extra flex gap by the
       account/guest bubbles). */
    .lp-auth, .lp-auth > .dropdown, .lp-auth .auth-controls, .lp-guest-auth { gap: 0.35rem !important; }
    .lp-auth .notification-popup, .lp-auth .user-account-dropdown, .lp-auth > *, .lp-guest-auth > * { margin: 0 !important; }
    #mobile-native-actions-host:empty, #desktop-native-actions-host:empty { display: none !important; }
    .lp-guest-auth .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; line-height: 1 !important; }
    .lp-guest-auth .btn i { margin: 0 !important; }
    /* Avatar photo (or initials fallback) fills the whole bubble (flush to the
       border, no gap); bubble size stays the same. */
    .lp-auth .user-dropdown-btn { overflow: hidden !important; justify-content: center !important; }
    .lp-auth .user-dropdown-btn img,
    .lp-auth .user-dropdown-btn .user-avatar-initials,
    .lp-auth .user-dropdown-btn .user-avatar-icon { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover !important; }
    .slb-logo-mark i { font-size: 1.55rem !important; }
    /* keep search from over-expanding next to the avatar/bell on phones */
    .lp-search.open .lp-search-input { width: 150px; }
}
@media (max-width: 575.98px) {
    .lp-topstrip-label { font-size: 0.6rem; padding-right: 0.6rem; }
    .lp-crest { width: 26px; height: 26px; }
    .lp-brand { font-size: 0.92rem; gap: 0.4rem; }
    .lp-brand .fa-benfica-logo-mask { font-size: 1.35rem; }
    /* Show the full wordmark on small screens — never truncate the logo. */
    .lp-brand-text { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; }
    .lp-primary-inner { padding: 5px 0.6rem !important; min-height: 50px !important; height: auto !important; align-items: center !important; }
    .lp-actions { gap: 0.25rem; }
    /* Account cluster must match the tighter row gap here too (otherwise the
       bell -> avatar gap stays wider than the rest). */
    .lp-auth, .lp-auth > .dropdown, .lp-auth .auth-controls, .lp-guest-auth { gap: 0.25rem !important; }
    .lp-circle, .lp-burger,
    .lp-actions .notification-popup-toggle,
    .lp-nav .lp-theme, .lp-nav .theme-toggle, .lp-nav button.mobile-account-theme,
    .lp-auth .user-dropdown-btn,
    .lp-guest-auth .btn,
    .slb-logo-mark { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-width: 34px !important; max-height: 34px !important; padding: 0 !important; }
    .lp-guest-auth .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; line-height: 1 !important; }
    .lp-guest-auth .btn i { margin: 0 !important; }
    .slb-logo-mark i { font-size: 1.4rem !important; }
    /* Keep the avatar photo filling the whole bubble on phones too (matches the
       <=1199.98px rule above — do NOT shrink it back to a small thumbnail here). */
    .lp-auth .user-dropdown-btn img { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover !important; }
    .lp-search.open .lp-search-input { width: 108px; }
}
@media (prefers-reduced-motion: reduce) {
    .card, .section-card, .widget, .lp-crest, .lp-tab, .lp-search-input { transition: none !important; }
    .card:hover, .section-card:hover, .widget:hover { transform: none; }
}

/* =====================================================================
   UNIFIED HERO — reskin the default per-page heroes (match, player,
   squad, news, my-benfica, etc.) to share the home .mh-hero branded
   look: the same diagonal red→maroon gradient, gold radial glow and
   gold underline accent. Only the container chrome changes; all the
   dynamic hero content (scores, trophies, stats) is preserved.
   The home page renders its own .mh-hero markup, so these .hero-header
   rules never touch it.
   ===================================================================== */
html .team-gradient-bg,
html .hero-header {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--theme-gradient-start, #e8112c) 0%, var(--theme-gradient-end, #9c0f18) 52%, var(--theme-secondary) 100%) !important;
}
html .hero-header[style*="background"] {
    background: linear-gradient(135deg, var(--theme-gradient-start, #e8112c) 0%, var(--theme-gradient-end, #9c0f18) 52%, var(--theme-secondary) 100%) !important;
}
.hero-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 120% at 90% 30%, rgba(var(--benfica-gold-rgb), 0.20), transparent 58%);
    pointer-events: none;
    z-index: 0;
}
.hero-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--benfica-gold), var(--team-primary));
    z-index: 2;
}
.hero-header > * {
    position: relative;
    z-index: 1;
}
/* Gold accent touches that echo the home hero's eyebrow / fact icons. */
.hero-header .hero-match-pill {
    border: 1px solid rgba(var(--benfica-gold-rgb), 0.35);
}
.hero-header i,
.hero-header .my-benfica-kicker,
.mh-hero i {
    color: var(--benfica-gold) !important;
}
/* ...but match-event icons in the key-moments timeline keep their default
   colours (white goals, green/red substitution arrows) instead of going gold.
   Card icons use SVG background-images so they're unaffected either way. */
.hero-header .hkm-ic i {
    color: #fff !important;
}
.hero-header .hkm-ic .text-success {
    color: var(--bs-success, #198754) !important;
}
.hero-header .hkm-ic .text-danger {
    color: var(--bs-danger, #dc3545) !important;
}
/* Action-button icons (Follow, Manage, etc.) follow their button's own text
   colour instead of going gold, matching the default theme. */
.hero-header .btn i {
    color: inherit !important;
}
/* Same entrance effect as the home hero: the content fades/slides up when it
   deploys, on every page's hero. */
@keyframes heroUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.hero-header .hero-content-inner {
    animation: heroUp 0.45s both;
}
@media (prefers-reduced-motion: reduce) {
    .hero-header .hero-content-inner { animation: none !important; }
}

/* =====================================================================
   MODERN LAYER
   Progressive enhancements. Every rule here degrades to the pre-existing
   look when the feature is unsupported — nothing below is load-bearing.
   ===================================================================== */

/* ---- Cross-page view transitions -------------------------------------
   Same-origin MPA navigation cross-fades instead of hard-cutting. The nav
   keeps its own name so it stays put while the page body transitions. */
@view-transition {
    navigation: auto;
}

.lp-nav {
    view-transition-name: site-nav;
}

::view-transition-old(root) {
    animation-duration: var(--dur-base);
    animation-timing-function: var(--ease-out);
}

::view-transition-new(root) {
    animation-duration: var(--dur-base);
    animation-timing-function: var(--ease-out);
}

/* The nav is a fixed anchor: hold it still rather than cross-fading it. */
::view-transition-old(site-nav),
::view-transition-new(site-nav) {
    animation: none;
    mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* ---- Interaction polish via color-mix --------------------------------- */
.benfica-layout .card,
.benfica-layout .bn-panel {
    transition: box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}

/* Default link hover for the layout. `:where()` zeroes the wrapper's
   specificity so this stays a fallback: any component that declares its own
   :hover colour (.bn-btn-red, .bn-cat-badge, .bn-readmore, …) wins instead of
   being flattened to dark red. */
:where(.benfica-layout) a:not(.btn):hover {
    color: var(--theme-primary-hover);
}

.benfica-layout .bn-forum-list li:hover {
    background: color-mix(in oklab, var(--theme-primary) 5%, transparent);
}

/* One consistent, token-driven focus ring for keyboard users. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--theme-focus-ring);
    border-radius: var(--theme-radius-sm);
}

/* ---- Live-match state -------------------------------------------------
   Set data-match-state="live" on any container to opt in. */
[data-match-state="live"] {
    --theme-accent: var(--theme-live);
}

.bn-live-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--theme-live);
    box-shadow: 0 0 0 0 rgba(var(--theme-live-rgb), 0.7);
    animation: bnLivePulse 1.8s infinite;
}

@keyframes bnLivePulse {
    70% { box-shadow: 0 0 0 0.6rem rgba(var(--theme-live-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--theme-live-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
    .bn-live-dot { animation: none; }
}

/* ---- Dark-mode safety net for fixed-light Bootstrap utilities ----------
   .bg-light / .bg-white are NOT theme-adaptive in Bootstrap 5.3 — they stay
   light in dark mode, producing glaring white panels (e.g. callouts, card
   headers) with faint text. Prefer .bg-body-secondary in markup; this catch-all
   fixes the ~20 existing call sites site-wide until they migrate. Text colour is
   left to inherit (default body / .text-muted / .text-info all adapt already). */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--theme-surface-2) !important;
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--theme-surface) !important;
}

/* =========================================================================
   Gold link hover on red backgrounds (site-wide)
   Any text link sitting on a solid red background turns gold on hover.
   Scoped deliberately: tab navs, white dropdown/mega-menus, and the white
   pill-links inside red CTA cards are NOT included (gold would clash there).
   ========================================================================= */
/* Page & match hero (red gradient) */
.mh-hero a:hover,
.hero-header a:hover,
.hero-match-detail a:hover,
.hero-page-actions a:hover,
.hero-comp-champ a:hover,
/* Red card / panel headers (e.g. "Next Match Availability", "Quick Actions") */
.card-header.bg-team-primary a:hover,
.card-header.bg-primary a:hover,
/* Red top navigation bars — scoped to red navbars so tab-navs are unaffected */
.lp-nav .nav-link:hover,
.navbar.bg-team-primary .nav-link:hover,
.navbar.bg-primary .nav-link:hover {
    color: var(--slb-gold, #F4B223) !important;
}