/* ==========================================================================
   PELLE CHIARA — template "A" (07/10/2026)
   --------------------------------------------------------------------------
   Si carica DOPO style.css, footer.css e i fogli di pagina: porta su tutto il
   sito lo stesso linguaggio (card bianche a 16px, bordo sottile, Plus Jakarta
   Sans, verde come accento). I colori vengono tutti da assets/tema.css (e
   dalla pagina admin Aspetto): qui non c'e' un colore scritto a mano, salvo
   il bianco dei testi sui pulsanti pieni.
   ========================================================================== */

body {
    background: var(--ls-bg) !important;
    color: var(--ls-text);
    font-family: var(--ls-font-text) !important;
    font-size: 14px;
    line-height: 1.45;
}
button, input, select, textarea { font-family: inherit; }

/* --------------------------------------------------------------------------
   Testata: bianca, logo a cerchio, menu con sottolineatura, ricerca a pillola
   -------------------------------------------------------------------------- */
.top-header.testata {
    background: var(--ls-testata-bg) !important;
    color: var(--ls-testata-text) !important;
    border-bottom: 1px solid var(--ls-border) !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.testata .header-container {
    max-width: 1240px;
    height: 64px !important;
    padding: 0 24px;
    justify-content: flex-start;
    gap: 28px;
}
.testata .logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.3px;
    color: var(--ls-testata-text) !important;
    text-decoration: none;
    flex: none;
}
.testata .logo i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ls-primary);
    position: relative;
    flex: none;
}
.testata .logo i::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2.5px solid #fff;
}
.testata-nav {
    display: flex;
    gap: 22px;
    font-weight: 600;
    font-size: 14px;
    height: 100%;
}
.testata-nav a {
    color: var(--ls-testata-text) !important;
    opacity: .6;
    display: flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    padding-top: 2px;
}
.testata-nav a:hover { opacity: .9; }
.testata-nav a.on { opacity: 1; border-bottom-color: var(--ls-primary); }
.testata .header-right { margin-left: auto; display: flex; align-items: center; }
.testata .header-search-container {
    width: 280px !important;
    background: var(--ls-surface-2) !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.testata .header-search-container:focus-within {
    background: var(--ls-surface) !important;
    border-color: var(--ls-primary) !important;
}
.testata .search-inner-icon { left: 15px !important; font-size: 13px !important; color: var(--ls-muted) !important; }
.testata .header-search-container input {
    padding: 9px 16px 9px 38px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ls-text) !important;
}
.testata .header-search-container input::placeholder { color: var(--ls-muted); }
.testata .mobile-menu-toggle {
    background: transparent;
    border: 0;
    color: var(--ls-testata-text);
    font-size: 19px;
    cursor: pointer;
    padding: 5px;
}
.testata .search-toggle { color: var(--ls-testata-text); }

/* --------------------------------------------------------------------------
   Griglia a tre colonne: 240 / centro / 320
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
    .main-container {
        max-width: 1240px !important;
        padding: 0 24px !important;
        gap: 20px !important;
    }
    .main-container .left-sidebar { width: 240px !important; padding-top: 24px !important; }
    .main-container .content-area { padding-top: 24px !important; }
    .main-container .right-sidebar { width: 320px !important; padding-top: 24px !important; }
}
@media (min-width: 992px) and (max-width: 1099px) {
    .main-container .left-sidebar { display: none !important; }
    .main-container .right-sidebar { width: 300px !important; }
}

/* La card: il mattone di tutte le pagine */
.box {
    background: var(--ls-surface);
    border: 1px solid var(--ls-border);
    border-radius: var(--ls-radius);
    overflow: hidden;
}
.box + .box { margin-top: 16px; }
.box h4 { font-size: 15px; font-weight: 700; padding: 16px 18px 10px; margin: 0; color: var(--ls-text); }

/* --------------------------------------------------------------------------
   Colonna sinistra: campionati
   -------------------------------------------------------------------------- */
.lg a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 18px;
    font-weight: 500;
    font-size: 14px;
    color: var(--ls-text);
    text-decoration: none;
}
.lg a:hover { background: var(--ls-surface-2); }
.lg a.on { color: var(--ls-primary); font-weight: 700; }
.lg img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.lg .ini {
    width: 22px; height: 22px; border-radius: 6px; background: var(--ls-surface-2);
    display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--ls-muted); flex: none;
}
.sl-principali { padding-bottom: 8px; margin-bottom: 16px; }
#sidebar-leagues-new {
    border-radius: var(--ls-radius) !important;
    border: 1px solid var(--ls-border) !important;
    box-shadow: none !important;
    font-family: var(--ls-font-text) !important;
    background: var(--ls-surface) !important;
}
#sidebar-leagues-new .sl-header-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--ls-text) !important;
    border-bottom: 0 !important;
    padding: 16px 18px 8px !important;
    background: transparent !important;
}
#sidebar-leagues-new .sl-country-box { border-bottom: 0 !important; }
#sidebar-leagues-new .sl-country-btn { background: transparent !important; }
#sidebar-leagues-new .sl-country-btn:hover { background: var(--ls-surface-2) !important; }
#sidebar-leagues-new .sl-country-link { color: var(--ls-text) !important; font-weight: 500 !important; font-size: 14px !important; padding: 9px 10px 9px 18px !important; }
#sidebar-leagues-new .sl-toggle-arrow { color: var(--ls-muted-2) !important; }
#sidebar-leagues-new .sl-country-btn.active .sl-toggle-arrow,
#sidebar-leagues-new .sl-check-icon { color: var(--ls-primary) !important; }
#sidebar-leagues-new .sl-league-item-link { color: var(--ls-text-2) !important; font-family: var(--ls-font-text) !important; }
#sidebar-leagues-new .sl-league-item-link.active { color: var(--ls-primary) !important; background: var(--ls-primary-soft) !important; }

/* --------------------------------------------------------------------------
   Centro: barra del giorno e schede
   -------------------------------------------------------------------------- */
.content-area .date-navigation.box {
    box-shadow: none !important;
    margin-bottom: 16px !important;
    border-radius: var(--ls-radius) !important;
    background: var(--ls-surface) !important;
}
.daybar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; gap: 10px; }
.daybar .arr {
    width: 34px; height: 34px; border-radius: 50%; background: var(--ls-surface-2);
    display: grid; place-items: center; color: var(--ls-muted); font-size: 12px; flex: none; text-decoration: none;
}
.daybar .arr:hover { color: var(--ls-text); }
.daybar .giorno { position: relative; cursor: pointer; text-align: center; }
.daybar .giorno b { font-size: 15px; font-weight: 700; }
.daybar .giorno input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.tabs { display: flex; gap: 8px; padding: 0 12px 12px; align-items: center; flex-wrap: wrap; }
.tabs .tab {
    padding: 7px 14px; border-radius: 999px; background: var(--ls-surface-2);
    font-weight: 600; font-size: 13px; color: var(--ls-muted); text-decoration: none; display: inline-flex; align-items: center;
}
.tabs .tab:hover { color: var(--ls-text); }
.tabs .tab.on { background: var(--ls-text); color: var(--ls-surface); }
.tabs .tab .d { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ls-live); margin-right: 6px; }
.tabs .tab-conta { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--ls-live); }
.tabs .tab.on .tab-conta { color: inherit; opacity: .8; }
.tabs .audio-tab {
    margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 0;
    background: var(--ls-surface-2); color: var(--ls-muted); cursor: pointer;
}

/* --------------------------------------------------------------------------
   Centro: gruppi di partite (una card per campionato)
   -------------------------------------------------------------------------- */
.content-area .league-group {
    background: var(--ls-surface) !important;
    border: 1px solid var(--ls-border) !important;
    border-radius: var(--ls-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
    margin: 0 0 16px !important;
    content-visibility: visible !important;
}
.content-area .league-group .league-header {
    background: transparent !important;
    color: var(--ls-text) !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 18px 8px !important;
    min-height: 0 !important;
}
.content-area .league-header img { width: 22px !important; height: 22px !important; object-fit: contain; border-radius: 0 !important; margin: 0 !important; }
.content-area .league-header .l-name { font-size: 14px !important; font-weight: 700 !important; color: var(--ls-text) !important; text-transform: none !important; letter-spacing: 0 !important; }
.content-area .league-header .l-season { font-size: 12px !important; font-weight: 500 !important; color: var(--ls-muted) !important; opacity: 1 !important; margin: 0 !important; text-transform: none !important; }
.content-area .league-header .league-link-standings { color: var(--ls-muted) !important; font-size: 13px !important; margin-left: auto !important; }
.content-area .league-header i { color: var(--ls-muted) !important; }

.content-area .match-wrapper { border: 0 !important; background: transparent !important; }
.content-area .match-row {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center;
    gap: 12px;
    padding: 10px 18px !important;
    min-height: 0 !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px;
    position: relative;
}
.content-area .match-row:hover { background: var(--ls-surface-2) !important; }
.content-area .match-row.is-live { background: transparent !important; }
.content-area .match-row.is-live::before { display: none !important; }
.content-area .match-row .match-fav,
.content-area .match-row .match-separator,
.content-area .match-row .match-ticket-col,
.content-area .match-row .match-action,
.content-area .match-row .gd-pron { display: none !important; }

.content-area .match-status-col {
    width: auto !important; min-width: 0 !important; padding: 0 !important; border: 0 !important;
    display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: center;
    font-size: 12px; color: var(--ls-muted); font-weight: 600; gap: 2px;
}
.content-area .match-status-col .m-time { font-size: 12px !important; font-weight: 600 !important; color: var(--ls-muted) !important; }
.content-area .match-row:not(.is-ns) .m-time { display: none !important; }
.content-area .match-status-col .m-minute,
.content-area .match-status-col .m-minute span { font-size: 12px !important; font-weight: 600 !important; color: var(--ls-muted) !important; }
.content-area .match-row.is-live .m-minute,
.content-area .match-row.is-live .m-minute span,
.content-area .match-row.is-live .live-minute-badge { color: var(--ls-live) !important; background: transparent !important; padding: 0 !important; }
.content-area .match-row .live-dot { display: none !important; }

.content-area .match-link {
    display: block !important; min-width: 0; padding: 0 !important; color: inherit !important; text-decoration: none !important;
}
.content-area .match-content-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px 12px 34px minmax(0, 1fr) !important;
    align-items: center;
    gap: 0 !important;
    padding: 0 !important;
}
.content-area .match-content-main .team-row { display: contents !important; }
.content-area .match-content-main .team-info {
    display: flex !important; align-items: center; gap: 10px; min-width: 0; font-weight: 500;
}
.content-area .team-row:first-child .team-info { grid-column: 1; grid-row: 1; flex-direction: row-reverse; justify-content: flex-start; text-align: right; padding-right: 12px; }
.content-area .team-row:last-child .team-info { grid-column: 5; grid-row: 1; padding-left: 12px; }
.content-area .team-row:first-child .score-item { grid-column: 2; grid-row: 1; text-align: right; }
.content-area .team-row:last-child .score-item { grid-column: 4; grid-row: 1; text-align: left; }
.content-area .match-content-main::after { content: "-"; grid-column: 3; grid-row: 1; text-align: center; font-weight: 700; font-size: 16px; color: var(--ls-text); }
.content-area .match-content-main .team-info img { width: 24px !important; height: 24px !important; object-fit: contain; flex: none; margin: 0 !important; }
.content-area .match-content-main .team-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px !important; font-weight: 500 !important; color: var(--ls-text) !important;
}
.content-area .match-content-main .score-item {
    font-size: 16px !important; font-weight: 700 !important; color: var(--ls-text) !important;
    background: transparent !important; min-width: 0 !important; width: auto !important; padding: 0 !important; border: 0 !important;
}
.content-area .match-row.is-live .score-item,
.content-area .match-row.is-live .match-content-main::after { color: var(--ls-live) !important; }
.content-area .match-row.is-ns:not(.is-live) .score-item { visibility: hidden; }
.content-area .match-row.is-ns:not(.is-live) .match-content-main::after { content: "vs"; font-size: 12px; font-weight: 600; color: var(--ls-muted); }

/* --------------------------------------------------------------------------
   Colonna destra: partita in evidenza, mini classifica, notizie
   -------------------------------------------------------------------------- */
.right-sidebar .hero { padding: 18px; }
.hero .lab { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ls-muted); font-weight: 600; }
.hero .lab .lv { color: var(--ls-live); }
.hero .row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; margin-top: 16px; color: var(--ls-text); text-decoration: none; gap: 6px; }
.hero .row b { font-size: 13px; font-weight: 700; display: block; }
.hero img { width: 52px; height: 52px; object-fit: contain; margin: 0 auto 8px; display: block; }
.hero .big { font-size: 34px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; }
.hero .big.ora { font-size: 24px; color: var(--ls-muted); }
.hero .min { color: var(--ls-live); font-weight: 700; font-size: 13px; }
.hero .stat { margin-top: 18px; display: grid; gap: 10px; }
.hero .stat div { display: grid; grid-template-columns: 30px 1fr 30px; gap: 8px; align-items: center; font-size: 12px; font-weight: 600; }
.hero .stat p { grid-column: 1 / -1; text-align: center; color: var(--ls-muted); font-weight: 500; margin: 0 0 -6px; }
.hero .bar { display: flex; height: 6px; border-radius: 9px; overflow: hidden; background: var(--ls-surface-2); gap: 3px; }
.hero .bar i { background: var(--ls-primary); border-radius: 9px; }
.hero .bar i + i { background: var(--ls-text); opacity: .25; }

.mini-classifica table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.mini-classifica td, .mini-classifica th { padding: 8px 6px; border: 0; }
.mini-classifica th { color: var(--ls-muted); font-weight: 600; font-size: 11px; text-align: left; }
.mini-classifica .n { text-align: right; }
.mini-classifica td:first-child, .mini-classifica th:first-child { padding-left: 18px; }
.mini-classifica td:last-child, .mini-classifica th:last-child { padding-right: 18px; font-weight: 700; }
.mini-classifica tr:nth-child(-n+4) td:first-child { color: var(--ls-primary); font-weight: 700; }
.mini-classifica .sq { display: flex; align-items: center; gap: 8px; color: var(--ls-text); text-decoration: none; }
.mini-classifica img { width: 18px; height: 18px; object-fit: contain; }

.nw a { display: grid; grid-template-columns: 1fr 84px; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--ls-border); color: var(--ls-text); text-decoration: none; }
.nw a:hover { background: var(--ls-surface-2); }
.nw b { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw small { display: block; color: var(--ls-muted); font-size: 11px; margin-top: 4px; }
.nw .th { width: 84px; height: 60px; border-radius: 10px; object-fit: cover; background: linear-gradient(135deg, var(--ls-primary-soft), var(--ls-surface-2)); display: block; }
.nw .vuoto { padding: 0 18px 16px; color: var(--ls-muted); font-size: 13px; }

/* --------------------------------------------------------------------------
   Il resto della home: descrizione in fondo, briciole
   -------------------------------------------------------------------------- */
.home-seo-description {
    border-radius: var(--ls-radius) !important;
    border: 1px solid var(--ls-border) !important;
    box-shadow: none !important;
    background: var(--ls-surface) !important;
}
.breadcrumbs {
    background: var(--ls-surface) !important;
    border: 1px solid var(--ls-border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* --------------------------------------------------------------------------
   Telefono
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .testata .header-container { gap: 12px; padding: 0 16px; }
    .testata-nav { display: none; }
    .testata .mobile-menu-toggle { display: block !important; }
}
@media (max-width: 760px) {
    .content-area .match-row { grid-template-columns: 44px minmax(0, 1fr) !important; gap: 8px; padding: 10px 12px !important; }
    .content-area .match-content-main { grid-template-columns: minmax(0, 1fr) 24px 10px 24px minmax(0, 1fr) !important; }
    .content-area .team-row:first-child .team-info { padding-right: 8px; gap: 6px; }
    .content-area .team-row:last-child .team-info { padding-left: 8px; gap: 6px; }
    .content-area .match-content-main .team-name { font-size: 13px !important; }
}

/* La testata e la pagina "incorniciate" di prima (style.css, fondo): via. La
   testata va da bordo a bordo, la griglia sta sul fondo grigio. */
header.top-header.testata {
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: var(--ls-testata-bg) !important;
    border-bottom: 1px solid var(--ls-border) !important;
}
header.top-header.testata .header-container { padding: 0 24px !important; }
header.top-header.testata .header-search-container { height: 38px !important; }
header.top-header.testata .header-search-container input { height: 36px !important; }
html.gd-fermo header.top-header.testata { box-shadow: 0 1px 0 var(--ls-border) !important; }
.main-container {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.left-sidebar, .right-sidebar { top: 64px !important; }
header.top-header.testata .header-search-container { background: var(--ls-surface-2) !important; border: 1px solid var(--ls-border) !important; }
header.top-header.testata .header-search-container input { color: var(--ls-text) !important; }
header.top-header.testata .header-search-container input::placeholder { color: var(--ls-muted) !important; opacity: 1 !important; }
header.top-header.testata .search-inner-icon { color: var(--ls-muted) !important; }
@media (min-width: 993px) { body { background: var(--ls-bg) !important; } }

/* Pagine campionato (serie_c, serie_d, campionato): navigazione gironi a pillole
   e testata lega come in home. */
.content-area .gironi-nav { background: var(--ls-surface) !important; border: 1px solid var(--ls-border) !important; border-radius: var(--ls-radius) !important; box-shadow: none !important; justify-content: flex-start !important; }
.content-area .gironi-nav a { background: var(--ls-surface-2) !important; color: var(--ls-text-2, var(--ls-text)) !important; border-radius: var(--ls-radius-pill) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; border: 0 !important; }
.content-area .gironi-nav a[style*="var(--primary)"] { background: var(--ls-text) !important; color: var(--ls-surface) !important; }
.content-area .gironi-nav a:hover { background: var(--ls-primary-soft) !important; color: var(--ls-primary) !important; }
.content-area .league-header .l-country { display: none !important; }
.content-area .league-header-seo h1 { text-transform: none !important; letter-spacing: -.3px !important; }

/* Piede: da bordo a bordo come la testata, senza cornice ne' ombra. */
.site-footer { max-width: none !important; margin: 40px 0 0 !important; border-radius: 0 !important; box-shadow: none !important; border-top: 0 !important; }

/* Pulsanti della testata (menu e ricerca al telefono): style.css li fa bianchi. */
header.top-header.testata button,
header.top-header.testata button i,
header.top-header.testata .mobile-menu-toggle,
header.top-header.testata .search-toggle { color: var(--ls-testata-text) !important; }