/*
 * /confronto — restyle.
 *
 * Single column. Header card unica con due slot atleta (slot 1 normale, slot
 * 2 mirrored), divider centrale con swap-circle + label VS. Avatar circolari
 * con iniziali colorate (brand per atleta 1, dark per atleta 2).
 *
 * NB FONDAMENTALE: confronto.css legacy contiene:
 *   * { padding:0; margin:0 }
 *   .site, .npa { font-size: 0px }
 *   .meta { display:inline-block; width:50%; font-size:20px }
 *
 * Queste regole sono FUORI da `@layer` mentre Tailwind utilities vivono in
 * `@layer utilities`. Con CSS Cascade Layers le regole fuori-layer vincono
 * SEMPRE sulle utility, indipendentemente dalla specificity. Quindi `p-4`,
 * `text-xs`, `mt-3` ecc. NON vengono applicate nel mio nuovo markup finché
 * confronto.css è caricato.
 *
 * Workaround: override esplicito con `!important` su selettori `.cnf-*` o
 * sotto `.athlete-slot`. La Fase 6 (cleanup) eliminerà confronto.css e
 * questi override perderanno l'!important.
 *
 * JS hooks preservati: #atleta1/2, .elmo, .visiera, .black, .infData,
 * .infSoc, .attivaCerchio, #inputRic, #cerca, #resetta, #confronta.
 */

/* === NEUTRALIZZAZIONE LEGACY === */
/* .leftSide/.rightSide non più usati. .cnf-legacy-right è il wrapper della
   comparison area (resta intatta in Fase 1-3, restyle in Fase 4). */

.cnf-legacy-right {
    display: block;
    width: 100%;
    margin: 1rem 0 !important;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    text-align: center;
}

/* === HERO === */
.cnf-hero {
    /* assicura font-size sano (la .site legacy lo mette a 0) */
    font-size: 16px;
}

.cnf-hero * {
    font-size: revert;
}

.cnf-hero h1 { font-size: revert; }

/* === MAIN SHELL ===
   Forza padding/margin/font-size sani su tutto il main contro le legacy
   universali `* {padding:0; margin:0}` e `.site {font-size:0}`.
   space-y-* di Tailwind non funziona qui (margin:0 universal lo oscura).
   Uso `gap` su flex column per gestire lo spacing tra le card. */
.cnf-shell {
    font-size: 16px;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 64rem !important; /* max-w-5xl */
    padding: 1.5rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
}

@media (min-width: 640px) {
    .cnf-shell { gap: 1.5rem !important; }
}

.cnf-shell * {
    /* abilita font-size inheritance "naturale" dentro lo shell */
    font-size: revert;
}

/* Quando un figlio dello shell è display:none o hidden, gap ne ignora la
   "presenza" naturalmente — perfetto. */

/* === HEADER CARD === */
.cnf-header-card {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.cnf-header-card > .grid {
    /* grid è messa in Tailwind: grid-cols-1 sm:grid-cols-[1fr_auto_1fr] */
}

/* === ATHLETE SLOT === */
.athlete-slot {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
    cursor: pointer !important;
    min-width: 0 !important;
    transition: background-color 0.15s !important;
}

@media (min-width: 640px) {
    .athlete-slot {
        padding: 1.5rem !important;
        gap: 1.25rem !important;
    }
}

.athlete-slot:hover {
    background-color: #fafafa !important;
}

/* Slot 2 mirror — avatar a destra, testo a destra */
.athlete-slot-right {
    flex-direction: row-reverse !important;
    text-align: right !important;
}

@media (max-width: 639px) {
    /* su mobile rimane left-aligned anche slot 2 (stack verticale) */
    .athlete-slot-right {
        flex-direction: row !important;
        text-align: left !important;
    }
}

.athlete-slot:has(.elmo.attivaCerchio) {
    background-color: #fef2f2 !important;
}

/* === AVATAR (.elmo / .athlete-avatar) === */
.athlete-slot .elmo,
.athlete-slot .athlete-avatar {
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    border: none !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.athlete-slot-1 .elmo,
.athlete-slot-1 .athlete-avatar {
    background-color: #f61e23 !important;
}

.athlete-slot-2 .elmo,
.athlete-slot-2 .athlete-avatar {
    background-color: #111827 !important;
}

/* === AVATAR CON FOTO ===
   Quando l'atleta ha una foto profilo, il bg è bianco e c'è un ring
   colorato (rosso slot 1, teal slot 2) attorno al cerchio. */
.athlete-slot .athlete-avatar.athlete-avatar-photo {
    background-color: white !important;
    /* il ring esterno è ottenuto con box-shadow: niente costo di layout */
    border: 2px solid white !important;
    box-sizing: content-box !important;
    /* leggero ridimensionamento per compensare il border (mantiene l'avatar
       visivamente alla stessa misura del fallback iniziali) */
}

.athlete-slot-1 .athlete-avatar.athlete-avatar-photo {
    box-shadow: 0 0 0 2px #f61e23 !important;
}

.athlete-slot-2 .athlete-avatar.athlete-avatar-photo {
    box-shadow: 0 0 0 2px #0e3a4e !important;
}

/* Quando ha la foto, la visiera contiene un <img> che riempie tutto il
   cerchio (con object-fit cover gestito dalle regole img qui sotto) */
.athlete-slot .athlete-avatar.athlete-avatar-photo .visiera {
    color: transparent !important;
    font-size: 0 !important;
    background: transparent !important;
}

.athlete-slot .elmo .visiera,
.athlete-slot .athlete-avatar .visiera {
    background: transparent !important;
    transition: none !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

#atleta1 .visiera,
#atleta2 .visiera {
    background-color: transparent !important;
}

/* img iniettata da JS (search) — copre il cerchio */
.athlete-slot .elmo img,
.athlete-slot .elmo .athlete-photo,
.athlete-slot .athlete-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.athlete-slot .elmo .velo { display: none !important; }
.athlete-slot .cerchioSel { display: none !important; }

.athlete-slot .elmo.attivaCerchio,
.athlete-slot .athlete-avatar.attivaCerchio {
    box-shadow: 0 0 0 3px white, 0 0 0 6px #f61e23 !important;
}

/* === INFO COLUMN === */
.cnf-slot-info,
.athlete-slot > div:not(.elmo):not(.athlete-avatar) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    display: block !important;
}

/* Label "ATLETA n" */
.cnf-slot-label {
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-weight: 600 !important;
    margin: 0 0 0.25rem 0 !important;
    display: block !important;
}

.cnf-slot-label-1 { color: #f61e23 !important; }
.cnf-slot-label-2 { color: #6b7280 !important; }

/* Nome (.black) */
.athlete-slot .black {
    font-size: 1.125rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100%;
    display: block !important;
}

@media (min-width: 640px) {
    .athlete-slot .black { font-size: 1.25rem !important; }
}

/* Meta (.cnf-meta) — RINOMINATO per non collidere con .meta legacy */
.cnf-meta {
    display: block !important;
    width: auto !important;
    height: auto !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    color: #6b7280 !important;
    margin: 0.25rem 0 0 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cnf-meta .infData,
.cnf-meta .infSoc,
.cnf-meta .meta-sep {
    font-size: inherit !important;
    color: inherit !important;
    display: inline !important;
}

.cnf-meta .meta-sep {
    color: #d1d5db !important;
    margin: 0 0.4rem !important;
}

/* Change-button (✏ Cambia atleta) */
.change-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    margin: 0.625rem 0 0 0 !important;
    padding: 0.4rem 0.75rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    background: white !important;
    color: #374151 !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}

.change-btn:hover {
    border-color: #d1d5db !important;
    background: #f9fafb !important;
}

/* Flash rosso on error */
.athlete-slot .visiera.backRed,
.athlete-slot .backRed {
    background-color: rgba(246, 30, 35, 0.2) !important;
    box-shadow: 0 0 0 2px #f61e23 !important;
}

/* === CENTER DIVIDER ===
   Mobile (<640): riga orizzontale tra slot 1 e slot 2 stackate.
   Desktop (>=640): colonna verticale al centro della grid. */

.cnf-center-divider {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    border-top: 1px solid #f3f4f6 !important;
    background: white;
}

@media (min-width: 640px) {
    .cnf-center-divider {
        flex-direction: column !important;
        gap: 0.5rem !important;
        padding: 0 1rem !important;
        border-top: none !important;
        border-left: 1px solid #f3f4f6 !important;
        border-right: 1px solid #f3f4f6 !important;
        min-width: 80px;
    }
}

.cnf-vs-swap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    flex-shrink: 0 !important;
    border-radius: 9999px !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cnf-vs-swap:hover {
    border-color: #d1d5db !important;
    background: #f9fafb !important;
    color: #111827 !important;
}

.cnf-vs-label {
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: #9ca3af !important;
    line-height: 1 !important;
}

/* === VERDETTO BAR ESPANDIBILE (details/summary) ===
   Pill dark navy con badge "VERDETTO", messaggio + progress + chevron.
   Quando il <details> è open, sotto si espande la PB table. */

.cnf-verdetto-wrap {
    background: #0f1620 !important;
    color: white !important;
    border-radius: 0.875rem !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.cnf-verdetto-wrap summary {
    list-style: none !important;
    cursor: pointer;
}
.cnf-verdetto-wrap summary::-webkit-details-marker { display: none; }

.cnf-verdetto-chevron {
    color: #94a3b8 !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s !important;
}

.cnf-verdetto-wrap[open] .cnf-verdetto-chevron {
    transform: rotate(180deg);
}

/* PB table inside verdetto → dark theme coerente con il pill */
.cnf-verdetto-pb {
    background: #0f1620 !important;
    padding: 0 !important;
    border-top: 1px solid #1e293b !important;
}

.cnf-verdetto-pb .cnf-pb-table-wrap {
    margin: 0 !important;
    padding: 0.25rem 1.25rem 1rem !important;
    overflow-x: auto;
}

@media (min-width: 640px) {
    .cnf-verdetto-pb .cnf-pb-table-wrap { padding: 0.25rem 1.5rem 1.25rem !important; }
}

/* Override colori tabella PB dentro il verdetto (dark mode) */
.cnf-verdetto-pb .cnf-pb-table thead th {
    color: #64748b !important;
    border-bottom-color: #1e293b !important;
}

.cnf-verdetto-pb .cnf-pb-table td {
    border-bottom-color: #1e293b !important;
}

.cnf-verdetto-pb .cnf-pb-table .cnf-pb-dist {
    color: #f1f5f9 !important;
}

.cnf-verdetto-pb .cnf-pb-table .cnf-pb-l {
    color: #64748b !important;
}

.cnf-verdetto-pb .cnf-pb-table .cnf-pb-vs {
    color: #475569 !important;
}

.cnf-verdetto-pb .cnf-pb-table .cnf-pb-gap {
    color: #94a3b8 !important;
}

.cnf-verdetto-pb .cnf-pb-table .cnf-pb-w-1 {
    color: #fb7185 !important; /* rosso più chiaro per leggibilità su dark */
}

.cnf-verdetto-pb .cnf-pb-table .cnf-pb-w-2 {
    color: #5eb3c9 !important; /* teal chiaro coerente con la verdetto progress bar */
}

/* Hover scuro */
.cnf-verdetto-pb .cnf-pb-table tbody tr:hover td {
    background-color: rgba(255,255,255,0.04) !important;
    color: inherit !important;
}

.cnf-verdetto-pb .cnf-pb-table tbody tr:hover .cnf-pb-dist { color: #ffffff !important; }
.cnf-verdetto-pb .cnf-pb-table tbody tr:hover .cnf-pb-w-1 { color: #fb7185 !important; }
.cnf-verdetto-pb .cnf-pb-table tbody tr:hover .cnf-pb-w-2 { color: #5eb3c9 !important; }
.cnf-verdetto-pb .cnf-pb-table tbody tr:hover .cnf-pb-l   { color: #94a3b8 !important; }
.cnf-verdetto-pb .cnf-pb-table tbody tr:hover .cnf-pb-vs  { color: #64748b !important; }
.cnf-verdetto-pb .cnf-pb-table tbody tr:hover .cnf-pb-gap { color: #cbd5e1 !important; }

/* Badge winner in versione dark */
.cnf-verdetto-pb .cnf-pb-badge-1 {
    background: rgba(246, 30, 35, 0.18) !important;
    color: #fb7185 !important;
}
.cnf-verdetto-pb .cnf-pb-badge-2 {
    background: rgba(94, 179, 201, 0.18) !important;
    color: #5eb3c9 !important;
}
.cnf-verdetto-pb .cnf-pb-badge-tie {
    background: rgba(255,255,255,0.08) !important;
    color: #94a3b8 !important;
}

.cnf-verdetto {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    background: #0f1620 !important;
    color: white !important;
    border-radius: 0.875rem !important;
    padding: 0.875rem 1.25rem !important;
    margin: 0 !important;
    flex-wrap: wrap;
}

@media (min-width: 640px) {
    .cnf-verdetto { padding: 1rem 1.5rem !important; gap: 1.25rem !important; }
}

.cnf-verdetto-badge {
    display: inline-block !important;
    background: #1e293b !important;
    color: white !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 0.4rem 0.625rem !important;
    border-radius: 0.375rem !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.cnf-verdetto-msg {
    flex: 1 1 auto !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    color: white !important;
    min-width: 0 !important;
}

@media (min-width: 640px) {
    .cnf-verdetto-msg { font-size: 1rem !important; }
}

.cnf-verdetto-msg strong {
    font-weight: 700 !important;
    color: white !important;
}

.cnf-verdetto-meta {
    color: #94a3b8 !important;
    font-weight: 400 !important;
    margin-left: 0.5rem !important;
}

.cnf-verdetto-progress {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    flex-shrink: 0 !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .cnf-verdetto-progress {
        width: auto !important;
        min-width: 280px;
    }
}

.cnf-verdetto-score {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    min-width: 1rem !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
}

.cnf-verdetto-score-1 { color: #f61e23 !important; }
.cnf-verdetto-score-2 { color: #5eb3c9 !important; }

.cnf-verdetto-bar {
    flex: 1 1 auto !important;
    height: 6px !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    display: flex !important;
    min-width: 120px !important;
}

.cnf-verdetto-bar-1 {
    background: #f61e23 !important;
    height: 100% !important;
}

.cnf-verdetto-bar-2 {
    background: #5eb3c9 !important;
    height: 100% !important;
}

/* === DISTANCE TABS — gare in comune con quick PB comparison === */

.cnf-distance-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 0.25rem !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.875rem !important;
    padding: 0.625rem 0.5rem !important;
    margin: 0 !important;
    overflow-x: auto !important;
}

.cnf-tab {
    flex: 0 0 auto !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 0.5rem 0.875rem !important;
    margin: 0 !important;
    cursor: pointer !important;
    text-align: left !important;
    color: #6b7280 !important;
    transition: all 0.15s !important;
    font: inherit !important;
}

.cnf-tab:hover {
    color: #111827 !important;
    background: #f9fafb !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

.cnf-tab-active {
    color: #111827 !important;
    border-bottom-color: #111827 !important;
}

.cnf-tab-active:hover {
    background: transparent !important;
}

.cnf-tab-name {
    display: block !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: inherit !important;
    margin: 0 0 0.125rem 0 !important;
}

.cnf-tab-cmp {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.375rem !important;
    font-size: 0.75rem !important;
    color: #9ca3af !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
}

.cnf-tab-v1, .cnf-tab-v2, .cnf-tab-sep {
    font-size: inherit !important;
    color: inherit !important;
}

.cnf-tab-winner-1 {
    color: #f61e23 !important;
    font-weight: 700 !important;
}

.cnf-tab-winner-2 {
    color: #5eb3c9 !important;
    font-weight: 700 !important;
}

.cnf-tab-sep {
    color: #d1d5db !important;
}

/* === CHART CARD === */

.cnf-chart-card {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.875rem !important;
    padding: 1.25rem !important;
    margin: 0 !important;
}

@media (min-width: 640px) {
    .cnf-chart-card { padding: 1.5rem !important; }
}

.cnf-chart-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: flex-start !important;
    margin: 0 0 1rem 0 !important;
}

@media (min-width: 768px) {
    .cnf-chart-header {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
    }
}

.cnf-chart-titles { display: flex !important; flex-direction: column !important; }

.cnf-chart-eyebrow {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
    line-height: 1 !important;
    margin: 0 0 0.375rem 0 !important;
}

.cnf-chart-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

@media (min-width: 640px) {
    .cnf-chart-title { font-size: 1.25rem !important; }
}

/* Bilancio anno-per-anno sotto il titolo */
.cnf-chart-bilancio {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0.375rem !important;
    margin: 0.5rem 0 0 0 !important;
    font-size: 0.8125rem !important;
    color: #6b7280 !important;
}

.cnf-chart-bilancio:empty { display: none !important; }

.cnf-chart-bilancio-label {
    color: #9ca3af !important;
    font-weight: 500 !important;
}

.cnf-chart-bilancio-score {
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
}

.cnf-chart-bilancio-1 { color: #f61e23 !important; }
.cnf-chart-bilancio-2 { color: #0e3a4e !important; }

.cnf-chart-bilancio-cogn {
    color: #374151 !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
}

.cnf-chart-bilancio-sep { color: #d1d5db !important; }

.cnf-chart-bilancio-meta {
    color: #9ca3af !important;
    font-weight: 400 !important;
}

.cnf-chart-controls {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-wrap: wrap;
}

.cnf-chart-legend {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.8125rem !important;
    color: #374151 !important;
}

.cnf-legend-dot {
    display: inline-block !important;
    width: 0.625rem !important;
    height: 0.625rem !important;
    border-radius: 9999px !important;
    flex-shrink: 0;
}

.cnf-legend-dot-1 { background: #f61e23 !important; }
.cnf-legend-dot-2 { background: #0e3a4e !important; }

.cnf-legend-name {
    font-size: inherit !important;
    color: inherit !important;
    margin-right: 0.5rem !important;
}

.cnf-axis-segmented {
    display: inline-flex !important;
    background: #f3f4f6 !important;
    border-radius: 0.5rem !important;
    padding: 0.25rem !important;
}

.cnf-axis-toggle {
    background: transparent !important;
    border: none !important;
    padding: 0.375rem 0.875rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    border-radius: 0.375rem !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}

.cnf-axis-toggle:hover { color: #111827 !important; }

.cnf-axis-toggle.cnf-axis-active {
    background: white !important;
    color: #111827 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

.cnf-chart-body {
    position: relative !important;
    height: 320px !important;
    width: 100% !important;
}

@media (min-width: 640px) {
    .cnf-chart-body { height: 380px !important; }
}

.cnf-chart-body canvas {
    max-width: 100% !important;
    height: 100% !important;
}

.cnf-chart-status {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #9ca3af !important;
    font-size: 0.875rem !important;
    pointer-events: none;
}

/* === SECTION HEADER (riusato in PB table, storico table) === */
.cnf-section-header {
    margin: 0 0 1rem 0 !important;
}
.cnf-section-eyebrow {
    display: block !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
    line-height: 1 !important;
    margin: 0 0 0.375rem 0 !important;
}
.cnf-section-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}
@media (min-width: 640px) {
    .cnf-section-title { font-size: 1.25rem !important; }
}

/* === PB TABLE === */
.cnf-pb-card,
.cnf-h2h-card {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.875rem !important;
    padding: 1.25rem !important;
    margin: 0 !important;
}

@media (min-width: 640px) {
    .cnf-pb-card,
    .cnf-h2h-card { padding: 1.5rem !important; }
}

.cnf-pb-table-wrap,
.cnf-h2h-table-wrap {
    overflow-x: auto;
    margin: 0 -1.25rem -1.25rem !important;
    padding: 0 1.25rem 1.25rem !important;
}

.cnf-pb-table,
.cnf-h2h-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 0.875rem !important;
    margin: 0 !important;
}

/* Override del legacy atleta.css `thead { bg:#f61e23 color:#fff }`. */
.cnf-pb-table thead,
.cnf-h2h-table thead {
    background-color: transparent !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: left !important;
}

.cnf-pb-table tbody,
.cnf-h2h-table tbody {
    text-align: left !important;
}

/* Override del legacy `table tbody tr:hover td { bg:rgba(0,0,0,.7); color:#fff }`
   da atleta.css. La regola legacy applica `color:#fff` su td e quindi tutti gli
   span interni ereditano bianco → bianco su sfondo chiaro = invisibile.
   Diamo color esplicito per ogni cella + classi rosse/teal. */
.cnf-pb-table tbody tr:hover td,
.cnf-h2h-table tbody tr:hover td {
    background-color: #fafafa !important;
    color: #374151 !important;
}

.cnf-pb-table tbody tr:hover .cnf-pb-dist,
.cnf-h2h-table tbody tr:hover .cnf-h2h-dist,
.cnf-pb-table tbody tr:hover .cnf-h2h-data,
.cnf-h2h-table tbody tr:hover .cnf-h2h-data,
.cnf-pb-table tbody tr:hover .cnf-h2h-luogo,
.cnf-h2h-table tbody tr:hover .cnf-h2h-luogo {
    color: #111827 !important;
}

.cnf-pb-table tbody tr:hover .cnf-pb-w-1,
.cnf-h2h-table tbody tr:hover .cnf-pb-w-1 { color: #f61e23 !important; }

.cnf-pb-table tbody tr:hover .cnf-pb-w-2,
.cnf-h2h-table tbody tr:hover .cnf-pb-w-2 { color: #0e3a4e !important; }

.cnf-pb-table tbody tr:hover .cnf-pb-l,
.cnf-h2h-table tbody tr:hover .cnf-pb-l { color: #9ca3af !important; }

.cnf-pb-table tbody tr:hover .cnf-pb-gap,
.cnf-h2h-table tbody tr:hover .cnf-pb-gap,
.cnf-pb-table tbody tr:hover .cnf-pb-vs,
.cnf-h2h-table tbody tr:hover .cnf-pb-vs { color: #6b7280 !important; }

.cnf-pb-table tbody tr:hover .cnf-h2h-turno,
.cnf-h2h-table tbody tr:hover .cnf-h2h-turno { color: #9ca3af !important; }

.cnf-pb-table tbody tr:hover .cnf-h2h-scheda,
.cnf-h2h-table tbody tr:hover .cnf-h2h-scheda { color: #6b7280 !important; }

/* Override del legacy `tbody tr td:last-child { text-align:center; padding:0 }`.
   La direzione vera viene poi dalla classe (.cnf-pb-win center, .cnf-h2h-link right). */
.cnf-pb-table tbody tr td:last-child,
.cnf-h2h-table tbody tr td:last-child {
    padding: 0.75rem 0.5rem !important;
}

/* Last-child specifico per scheda link (H2H): right */
.cnf-h2h-table tbody tr td.cnf-h2h-link {
    text-align: right !important;
}

.cnf-pb-table th,
.cnf-h2h-table th {
    /* default header allineato come la colonna sottostante: lo override
       per colonna se serve. */
    text-align: left !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #9ca3af !important;
    padding: 0.625rem 0.5rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    background: transparent !important;
}

/* Specificità bumpata (th.classe) per battere `.cnf-pb-table th { text-align:left }` */
.cnf-pb-table th.cnf-pb-th-num,
.cnf-h2h-table th.cnf-pb-th-num    { text-align: right !important; }

.cnf-pb-table th.cnf-pb-th-center,
.cnf-h2h-table th.cnf-pb-th-center { text-align: center !important; }

.cnf-pb-table th.cnf-pb-th-sep,
.cnf-h2h-table th.cnf-pb-th-sep    { width: 1rem !important; padding: 0 !important; text-align: center !important; }

.cnf-h2h-table th.cnf-h2h-th-link  { text-align: right !important; }

.cnf-pb-table td,
.cnf-h2h-table td {
    padding: 0.75rem 0.5rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    vertical-align: middle !important;
    /* niente color qui: lo gestiscono le classi (.cnf-pb-dist, w-1/2/l...) */
}

.cnf-pb-table tbody tr:last-child td,
.cnf-h2h-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* === ALLINEAMENTO COLONNE ===
   Regola unica: testo a sx, numeri a dx (tabular-nums), badge centrato.
   Gli `th` corrispondenti hanno la stessa direzione (vedi .cnf-pb-th-num
   sopra). */

.cnf-pb-dist,
.cnf-h2h-data,
.cnf-h2h-dist,
.cnf-h2h-luogo {
    text-align: left !important;
}

.cnf-pb-dist { font-weight: 600 !important; color: #111827 !important; }

.cnf-pb-v {
    text-align: right !important;
    font-size: 1rem !important;
    color: #6b7280 !important;
    font-variant-numeric: tabular-nums !important;
}

/* Nella PB table dentro il verdetto, i tempi atleta + separatore "vs"
   sono centrati (richiesta UX). L'H2H storico tiene i tempi a destra. */
.cnf-verdetto-pb .cnf-pb-table .cnf-pb-v {
    text-align: center !important;
}

.cnf-pb-w-1 { font-weight: 700 !important; color: #f61e23 !important; }
.cnf-pb-w-2 { font-weight: 700 !important; color: #0e3a4e !important; }
.cnf-pb-l   { color: #9ca3af !important; }

.cnf-pb-vs {
    text-align: center !important;
    color: #d1d5db !important;
    font-size: 0.75rem !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.cnf-pb-gap {
    text-align: right !important;
    color: #6b7280 !important;
    font-size: 0.875rem !important;
    font-variant-numeric: tabular-nums !important;
}

.cnf-pb-win { text-align: center !important; }

.cnf-pb-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.25rem !important;
    height: 1.5rem !important;
    padding: 0 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
}

.cnf-pb-badge-1 { background: #fee2e2 !important; color: #f61e23 !important; }
.cnf-pb-badge-2 { background: #e3eef3 !important; color: #0e3a4e !important; }
.cnf-pb-badge-tie { background: #f3f4f6 !important; color: #9ca3af !important; }

/* === H2H BILANCIO ===
   Riusa le classi `.cnf-chart-bilancio-*` (stesso design del bilancio
   sotto il chart). L'override `.cnf-h2h-bilancio` qui sotto serve solo
   per il margin reset (è dentro `.cnf-h2h-header`, non sotto un titolo). */

.cnf-h2h-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    flex-wrap: wrap;
    gap: 1rem;
}

.cnf-h2h-bilancio {
    margin: 0 !important;
}

/* H2H table cells */
.cnf-h2h-data {
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
    color: #374151 !important;
}

.cnf-h2h-dist {
    font-weight: 600 !important;
    color: #111827 !important;
    white-space: nowrap !important;
}

.cnf-h2h-luogo { color: #374151 !important; }
.cnf-h2h-turno { color: #9ca3af !important; font-size: 0.8125rem !important; }

.cnf-h2h-link {
    text-align: right !important;
    white-space: nowrap !important;
}

.cnf-h2h-scheda {
    color: #6b7280 !important;
    font-size: 0.8125rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.cnf-h2h-scheda:hover { color: #f61e23 !important; }

/* Prestazione + vento nelle celle H2H: tempo principale + label vento sotto */
.cnf-h2h-prest {
    display: block !important;
    font-size: inherit !important;
    color: inherit !important;
    line-height: 1.2 !important;
}

.cnf-h2h-vento {
    display: block !important;
    margin-top: 0.125rem !important;
    font-size: 0.6875rem !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0.02em !important;
}

.cnf-h2h-empty-cell {
    text-align: center !important;
    padding: 1.5rem !important;
    color: #9ca3af !important;
}
.cnf-h2h-empty-cell strong {
    color: #374151 !important;
    font-weight: 700 !important;
}

/* Reset border-bottom legacy `#atleta1{border-bottom:10px solid purple}` */
#atleta1.athlete-slot,
#atleta2.athlete-slot,
#atleta1,
#atleta2 {
    border-bottom: none !important;
}

/* === HERO MINIMALE === */
.cnf-hero-mini {
    background: transparent !important;
    border: none !important;
    padding: 2rem 0 0.5rem !important;
}

.cnf-hero-mini-inner {
    max-width: 64rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1rem !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 0.75rem !important;
    flex-wrap: wrap;
}

.cnf-hero-mini-title {
    font-size: 1.875rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    letter-spacing: -0.02em !important;
}

@media (min-width: 640px) {
    .cnf-hero-mini-title { font-size: 2.25rem !important; }
}

.cnf-hero-mini-sub {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
}

/* === FOOTER SWAP === */
.cnf-footer-swap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 1.5rem 0 !important;
    margin: 0 !important;
    position: relative;
}

.cnf-footer-swap::before,
.cnf-footer-swap::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.cnf-footer-swap-btn {
    margin: 0 1rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
}

/* === LOADER — inline, sotto la athlete card durante la navigazione === */

.cnf-loader {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.875rem !important;
    padding: 4rem 1.5rem !important;
    min-height: 16rem !important;
    margin: 0 !important;
}

.cnf-loader[hidden] { display: none !important; }

.cnf-loader-spinner {
    width: 2.5rem !important;
    height: 2.5rem !important;
    border: 3px solid #f3f4f6 !important;
    border-top-color: #f61e23 !important;
    border-radius: 9999px !important;
    animation: cnf-spin 0.8s linear infinite !important;
}

@keyframes cnf-spin {
    to { transform: rotate(360deg); }
}

.cnf-loader-text {
    margin: 0 !important;
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
}

/* === SEARCH MODAL (overlay + panel) === */

.cnf-search-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: flex-start !important;  /* sempre top-aligned, niente jump */
    justify-content: center !important;
    padding: 4rem 1rem 1rem !important;   /* top-padding fisso = posizione stabile */
}

.cnf-search-modal[hidden] { display: none !important; }

.cnf-search-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 22, 32, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.cnf-search-panel {
    position: relative !important;
    background: white !important;
    border-radius: 0.875rem !important;
    width: 100% !important;
    max-width: 40rem !important;
    /* Altezza stabile: l'utente non vede il panel "saltare" cambiando query.
       L'area risultati ha height fissa con scroll interno. */
    max-height: calc(100vh - 5rem) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.05) !important;
}

.cnf-search-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.cnf-search-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.cnf-search-title span { color: #6b7280 !important; font-weight: 500 !important; }

.cnf-search-close {
    background: transparent !important;
    border: none !important;
    color: #9ca3af !important;
    padding: 0.375rem !important;
    border-radius: 0.5rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s !important;
}
.cnf-search-close:hover { background: #f3f4f6 !important; color: #111827 !important; }

.cnf-search-input-wrap {
    padding: 0.75rem 1.25rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

/* Wrapper flex per allineare icona e input sulla stessa baseline verticale.
   Sostituisce il vecchio absolute positioning che cadeva storto perché
   l'altezza del wrap includeva anche il hint sottostante. */
.cnf-search-input-field {
    position: relative !important;
    display: block !important;
}

.cnf-search-input-icon {
    position: absolute !important;
    left: 0.875rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #9ca3af !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
}

.cnf-search-input {
    display: block !important;
    width: 100% !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    padding: 0.625rem 0.875rem 0.625rem 2.5rem !important;
    font-size: 0.9375rem !important;
    color: #111827 !important;
    line-height: 1.4 !important;
    outline: none !important;
    transition: all 0.15s !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.cnf-search-input:focus {
    border-color: #f61e23 !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(246,30,35,0.1) !important;
}

.cnf-search-hint {
    display: block !important;
    margin: 0.375rem 0 0 0 !important;
    font-size: 0.7rem !important;
    color: #9ca3af !important;
    padding-left: 0.875rem !important;
}

.cnf-search-results {
    /* Altezza fissa (con scroll interno) → il panel non si muove al variare
       del numero di risultati. */
    height: 24rem !important;
    flex: 0 0 24rem !important;
    overflow-y: auto !important;
    padding: 0.25rem !important;
}

.cnf-search-empty {
    padding: 2rem 1.25rem !important;
    text-align: center !important;
    font-size: 0.875rem !important;
    color: #9ca3af !important;
}

.cnf-search-loading {
    color: #6b7280 !important;
}

.cnf-result-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    padding: 0.625rem 1rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0.5rem !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background 0.1s !important;
}

.cnf-result-row:hover {
    background: #f9fafb !important;
}

.cnf-result-row:focus-visible {
    background: #f9fafb !important;
    outline: 2px solid #f61e23 !important;
    outline-offset: -2px !important;
}

.cnf-result-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: 9999px !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.cnf-result-avatar-1 { background: #f61e23 !important; }
.cnf-result-avatar-2 { background: #0f1620 !important; }

/* Quando il risultato ha foto profilo: <img> dentro l'avatar + ring
   colorato attorno (stesso pattern degli avatar delle athlete card). */
.cnf-result-avatar-photo {
    background: white !important;
    color: transparent !important;
    font-size: 0 !important;
    border: 2px solid white !important;
    box-sizing: content-box !important;
    overflow: hidden !important;
    padding: 0 !important;
    /* il content-box border allarga di 4px → l'avatar finale è ~2.65rem.
       Per mantenere visivamente la stessa dimensione del fallback iniziali
       (2.25rem) riduciamo width/height a 1.875rem così outer ≈ 2.25rem */
    width: 1.875rem !important;
    height: 1.875rem !important;
}

.cnf-result-avatar-photo.cnf-result-avatar-1 {
    box-shadow: 0 0 0 2px #f61e23 !important;
}

.cnf-result-avatar-photo.cnf-result-avatar-2 {
    box-shadow: 0 0 0 2px #0e3a4e !important;
}

.cnf-result-avatar-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 9999px !important;
}

.cnf-result-info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.cnf-result-name {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cnf-result-meta {
    font-size: 0.8125rem !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 0.125rem !important;
}

.cnf-result-sep { color: #d1d5db !important; }

/* === EMPTY STATE INTRO === */
.cnf-empty-intro {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.875rem !important;
    padding: 1.5rem !important;
    text-align: center !important;
}

.cnf-empty-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 0.5rem 0 !important;
}

.cnf-empty-text {
    font-size: 0.9375rem !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
    max-width: 36rem !important;
    margin: 0 auto !important;
}

/* === SEARCH BAR === */
.cnf-search-bar {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 1rem !important;
    padding: 1rem !important;
}

@media (min-width: 640px) {
    .cnf-search-bar { padding: 1.25rem !important; }
}

.cnf-search-bar .navigator {
    padding: 0 !important;
    background: transparent !important;
}

.cnf-search-bar .inputBox {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
    font-size: 1rem !important;
}

.cnf-search-bar #inputRic {
    width: 100% !important;
    background-color: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    padding: 0.625rem 0.75rem 0.625rem 2.25rem !important;
    font-size: 0.875rem !important;
    transition: all 0.15s !important;
}

.cnf-search-bar #inputRic:focus {
    outline: none !important;
    border-color: #f61e23 !important;
    background-color: white !important;
}

.cnf-search-bar #cerca {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.625rem 1rem !important;
    background-color: #f61e23 !important;
    color: white !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border-radius: 0.5rem !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background-color 0.15s !important;
}

.cnf-search-bar #cerca:hover { background-color: #d31318 !important; }

.cnf-search-bar #loadBox { display: none !important; }
.cnf-search-bar #loadBox.show { display: inline-flex !important; align-items: center; }

/* === COMANDI === */
.cnf-actions {
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: flex-end !important;
    margin: 0.75rem 0 0 0 !important;
    padding: 0 !important;
}

.cnf-actions .mezzo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: 0.5rem !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    width: auto !important;
    max-width: none !important;
}

#confronta.mezzo {
    background-color: #111827 !important;
    color: white !important;
    border: 1px solid #111827 !important;
}
#confronta.mezzo:hover { background-color: #1f2937 !important; }

#resetta.mezzo {
    background-color: transparent !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
}
#resetta.mezzo:hover {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
}

/* === SUGGESTED CHALLENGES === */
.cnf-suggested {
    width: auto !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 1rem !important;
    padding: 1rem 1.25rem !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
}

.cnf-suggested > p {
    text-align: left !important;
    text-transform: uppercase !important;
    margin: 0 0 0.75rem 0 !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
}

.cnf-suggested-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

@media (min-width: 640px) {
    .cnf-suggested-list {
        grid-template-columns: 1fr 1fr !important;
        column-gap: 1.5rem !important;
    }
}

.cnf-suggested-list li {
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 0 !important;
    font-size: 0.875rem !important;
    color: #374151 !important;
}

.cnf-suggested-list li:last-child { border-bottom: none !important; }

.cnf-suggested-list li a {
    display: block !important;
    padding: 0.5rem 0 !important;
    color: #374151 !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}

.cnf-suggested-list li a:hover { color: #f61e23 !important; }