/* Bootstrap lo imposta già di suo (fa parte del suo reset "Reboot"), quindi oggi è ridondante —
   ma lo rendiamo esplicito anche nel foglio del sito: se in futuro Bootstrap venisse rimosso o
   sostituito, i calcoli di larghezza di card/padding non cambierebbero comportamento all'improvviso. */
*, *::before, *::after { box-sizing: border-box; }

:root {
    /* Blu unico di brand ovunque (#008af7). Uso --p1-rgb/--p2-rgb
       (solo la tripletta, senza rgba()) per riusare gli stessi box-shadow rgba(var(--p1-rgb),X). */
    --p1: #008af7;   /* blu di brand */
    --p2: #33a4ff;   /* blu più chiaro, per i gradienti */
    --p1-rgb: 0,138,247;
    --p2-rgb: 51,164,255;
    --p3: #fbbf24;   /* giallo accent */
    --grad: linear-gradient(135deg, var(--p1) 0%, var(--p2) 100%);
    --grad-soft: linear-gradient(135deg, rgba(var(--p1-rgb),.10) 0%, rgba(var(--p2-rgb),.10) 100%);
    --ink: #0f172a;
    --muted: #64748b;
    --soft: #f8f7fc;
    --border: #ececf3;
    --accent: var(--p1);
    --accent-dark: #0070cc;
    --green: #22c55e;
    --amber: #f59e0b;

    --p1-vivid: var(--p1);
    --p2-vivid: var(--p2);
    --grad-vivid: var(--grad);
    --vivid-shadow: rgba(var(--p1-rgb),.3);

    /* --bg = sfondo di pagina, --surface = sfondo di card/pannelli/dropdown (oggi identici:
       introdotti per avere un unico punto da cui derivano tutti gli sfondi "bianchi" del sito,
       invece di #fff sparso in decine di regole). */
    --bg: #f8f9fa;
    --surface: #fff;
}
/* Stesso blu di brand: la classe resta per non rompere il markup (home, come-funziona, chi-siamo
   la applicano ancora via $themeColor in includes/header.php), ma non ridefinisce più nulla. */
body.theme-color {}
html { overflow-x: hidden; }
body {
    color: var(--ink); background: var(--bg); font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    transition: background-color .2s ease, color .2s ease;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
    /* Footer sempre in fondo (sticky footer): su pagine con poco contenuto il footer risalirebbe
       lasciando bianco sotto — flex column con main che occupa lo spazio residuo lo tiene giù. */
    display: flex; flex-direction: column; min-height: 100vh;
    /* Blocca lo scroll orizzontale accidentale (elementi che sforano di pochi px, es. dropdown/menu
       larghi in overflow) su html+body invece che su .container/main: farlo su un wrapper interno
       avrebbe rotto position:sticky della sidebar e della navbar (serve nessun antenato con
       overflow diverso da visible fra l'elemento sticky e il vero scroll container). */
    overflow-x: hidden;
}
a { text-decoration: none; }

/* Sottolineatura animata sui link testuali: al passaggio del mouse una linea si espande dal centro
   verso i due lati (background-position:50% + background-size che cresce, invece di un ::after con
   scaleX — stesso risultato, meno codice). Esclusi bottoni/nav/card/badge/icone: sono componenti
   con un feedback hover proprio (sfondo, ombra, sollevamento) — una riga sotto il testo lì sarebbe
   solo rumore visivo, non un vero "link testuale". Elenco basato sulle classi realmente usate sugli
   <a> del sito (verificato su tutto il codebase), non una lista generica indovinata. */
a:not(.btn, .btn-accent, .btn-outline-accent, .pro-nav-link, .dropdown-item, .dropdown-toggle,
      .page-link, .nav-link, .cs-item, .user-chip, .navbar-brand, .notif-bell, .cat-card,
      .chat-lightbox-download, .admin-sort-th, .sticky-cta, .back-to-top, .hero-badge, .tag-pill,
      .badge, .req-compat-badge, .admin-nav-group-toggle, .pro-req-cta, .pro-req-cta-fatto) {
    position: relative;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 0% 1px;
    transition: background-size .25s ease;
}
a:not(.btn, .btn-accent, .btn-outline-accent, .pro-nav-link, .dropdown-item, .dropdown-toggle,
      .page-link, .nav-link, .cs-item, .user-chip, .navbar-brand, .notif-bell, .cat-card,
      .chat-lightbox-download, .admin-sort-th, .sticky-cta, .back-to-top, .hero-badge, .tag-pill,
      .badge, .req-compat-badge, .admin-nav-group-toggle, .pro-req-cta, .pro-req-cta-fatto):hover {
    background-size: 100% 1px;
}
.footer-social a { background-image: none !important; } /* icone social: nessuna sottolineatura sotto un'icona */
@media (prefers-reduced-motion: reduce) {
    a { transition: none !important; }
}

/* Selezione testo: pastello del blu di brand invece del blu di sistema di default del browser */
::selection { background: rgba(var(--p1-rgb),.15); color: var(--ink); }
::-moz-selection { background: rgba(var(--p1-rgb),.15); color: var(--ink); }

/* ─── Testo in sovrimpressione su immagini (componente generico) ─────────
   Da usare così: <div class="img-overlay"><img ...><div class="img-overlay-content">testo</div></div>.
   Lo scrim (::after) sfuma da trasparente (0%) a nero 60% SOLO nella metà inferiore, dove vive
   il testo — la parte alta della foto resta pulita/non scurita. object-fit:cover + position:relative
   sul contenitore sono richiesti perché lo scrim/testo si posizionino correttamente sopra la foto. */
.img-overlay { position: relative; overflow: hidden; border-radius: inherit; }
.img-overlay img { display: block; width: 100%; height: 100%; object-fit: cover; }
.img-overlay::after {
    content: ''; position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}
.img-overlay-content {
    position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 1; padding: 14px 16px;
    color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* ─── Scrollbar personalizzata (browser + container interni) ─────────────
   ::-webkit-scrollbar non è ereditabile: va su * per coprire sia lo scroll di pagina sia
   qualunque contenitore con overflow (liste chat, tabelle con scroll orizzontale, ecc.)
   senza dover elencare ogni singola classe. scrollbar-width/-color coprono Firefox, che
   non supporta gli pseudo-elementi -webkit-*. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100,116,139,.35) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: rgba(100,116,139,.35); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(71,85,105,.55); }
*::-webkit-scrollbar-corner { background: transparent; }

/* Bootstrap definisce .text-muted col suo grigio di default (#6c757d), diverso dal --muted del
   brand (#64748b): due grigi quasi identici ma non uguali coesistevano nella stessa pagina.
   Un solo tono neutro attenuato ovunque per i testi esplicativi secondari. */
.text-muted { color: var(--muted) !important; }

/* Bordo colore brand SOLO durante la digitazione attiva (:focus), non un normale :hover — di
   default Bootstrap userebbe il suo blu generico invece del colore del sito. */
.form-control:focus, .form-select:focus {
    border-color: var(--p1); box-shadow: 0 0 0 .2rem rgba(var(--p1-rgb),.15);
}

/* ─── Focus visibile per navigazione da tastiera ─────────────
   Solo su :focus-visible (non su click del mouse): anello a doppio bordo (spazio bianco +
   colore brand) invece del semplice outline blu di default del browser — resta leggibile
   anche sopra sfondi colorati/immagini perché il "gap" bianco lo stacca sempre dal contenuto
   sottostante. box-shadow invece di outline: segue sempre il border-radius dell'elemento su
   tutti i browser, niente angoli quadrati su bottoni/card arrotondati. Transizione di 0.1s:
   comparsa immediata ma non scattosa, mai un fastidio percettibile al tab successivo. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--p1);
    transition: box-shadow .1s ease;
}
/* Sopra un bordo/sfondo scuro il "gap" bianco sparirebbe: qui il doppio anello si inverte
   (brand poi bianco) così resta comunque leggibile a doppio contrasto. */
.portfolio-modal-close:focus-visible, .chat-action-btn:focus-visible {
    outline: none; box-shadow: 0 0 0 2px var(--p1), 0 0 0 4px #fff; transition: box-shadow .1s ease;
}
/* Card intere (link a piena area, non un singolo bottone): un outline staccato di 3px invece
   del doppio anello ravvicinato — su una superficie grande il doppio bordo aderente si nota
   poco, mentre un outline con distacco visibile evidenzia bene tutta la card durante la
   navigazione da tastiera. .pro-req non è un link esso stesso (il link è il titolo/CTA dentro):
   :focus-within lo evidenzia comunque per intero quando si tabba su uno dei link interni. */
.cat-card:focus-visible, .pro-card:focus-visible, .annuncio-card:focus-visible {
    outline: 2px solid var(--p1); outline-offset: 3px; box-shadow: none;
}
.pro-req:focus-within { outline: 2px solid var(--p1); outline-offset: 3px; }

/* Bordi arrotondati + ombra leggera su TUTTI i bottoni (base Bootstrap): le classi più
   specifiche (.btn-accent, .btn-save-neutral, ecc.) restano libere di personalizzare oltre
   questo, ma anche un semplice .btn-outline-danger o .btn-light eredita lo stesso stile di base. */
.btn { border-radius: 8px; box-shadow: 0 2px 8px rgba(15,23,42,.08); transition: box-shadow .2s, transform .2s; }

/* Stesso raggio fisso (8px) sui campi di input, coerente coi bottoni sopra: prima ereditavano il
   default Bootstrap (~6px, leggermente diverso), qui lo fissiamo esplicitamente. */
.form-control, .form-select { border-radius: 8px; }

/* Validazione istantanea (bordo verde/rosso mentre si digita, vedi wireValidazioneIstantanea in
   cv_panel.php): transizione fluida sul cambio colore, invece dello scatto secco di default. */
.form-control, .form-select, .form-control:focus, .form-select:focus { transition: border-color .15s, box-shadow .15s; }
.form-control.is-invalid, .form-select.is-invalid { border-color: #dc3545; }
.form-control.is-valid, .form-select.is-valid { border-color: #16a34a; }

/* Checkbox custom: quadrato pulito con transizione fluida e spunta bianca interna, al posto del
   checkbox nativo del browser (aspetto diverso su ogni sistema operativo). Solo [type="checkbox"]:
   i radio button restano nativi, non fanno parte di questa richiesta. */
input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    width: 20px; height: 20px; flex-shrink: 0; margin-top: 0;
    border: 2px solid var(--border); border-radius: 6px; background-color: var(--surface);
    cursor: pointer; position: relative; vertical-align: middle;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
input[type="checkbox"]:hover { border-color: var(--p1); }
input[type="checkbox"]:checked {
    background-color: var(--p1); border-color: var(--p1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 70%;
    animation: checkboxPop .2s ease;
}
input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--p1-rgb),.2); }
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
@keyframes checkboxPop { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { input[type="checkbox"] { animation: none !important; transition: background-color .1s, border-color .1s; } }

/* Radio button custom: cerchio pulito con un pallino centrale color brand quando selezionato,
   stesso linguaggio visivo dei checkbox sopra ma rotondo (coerente con la semantica "una sola
   scelta" vs "più scelte" dei checkbox). */
input[type="radio"] {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    width: 20px; height: 20px; flex-shrink: 0; margin-top: 0;
    border: 2px solid var(--border); border-radius: 50%; background-color: var(--surface);
    cursor: pointer; position: relative; vertical-align: middle;
    transition: border-color .2s ease, box-shadow .2s ease;
}
input[type="radio"]:hover { border-color: var(--p1); }
input[type="radio"]::after {
    content: ''; position: absolute; top: 50%; inset-inline-start: 50%; width: 10px; height: 10px; border-radius: 50%;
    background: var(--p1); transform: translate(-50%, -50%) scale(0); transition: transform .18s ease;
}
input[type="radio"]:checked { border-color: var(--p1); }
input[type="radio"]:checked::after { transform: translate(-50%, -50%) scale(1); }
input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--p1-rgb),.2); }
input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { input[type="radio"]::after { transition: none; } }

.btn:hover { box-shadow: 0 4px 14px rgba(15,23,42,.12); }
/* Feedback tattile al click: scala rapida con un filo di "elastico" (leggero rimbalzo in uscita
   dalla curva), non un semplice ease-linear — simula una pressione fisica invece di un fade piatto. */
.btn:active { transform: scale(.97); transition: transform .12s cubic-bezier(.34,1.56,.64,1); }
@media (prefers-reduced-motion: reduce) { .btn:active { transition: transform .05s linear; } }
.btn-sm { box-shadow: 0 1px 5px rgba(15,23,42,.07); }

/* ─── Banner annuncio sito ────────────────────────────────── */
.site-announcement-bar{background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;padding:10px 0;font-size:.85rem;font-weight:500;text-align:center;position:relative;z-index:1050;}
.site-announcement-bar i{font-size:.75rem;opacity:.8;}

/* ─── Banner completamento profilo (sopra la nav) ────────── */
.pro-banner-top {
    /* rgba invece di #fde68a pieno: senza un minimo di trasparenza il backdrop-filter qui sotto
       non avrebbe nulla da sfocare (stesso principio già applicato a .user-menu in precedenza). */
    background: rgba(253,230,138,.92); border-bottom: 1px solid #fcd34d;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: #451a03; padding: 10px 0; font-size: .88rem; letter-spacing: .5px;
    position: sticky; top: 0; z-index: 1031; /* sopra .mkt-nav (sticky-top di Bootstrap) */
    transition: background-color .2s ease;
}
.pro-banner-top:hover { background-color: rgba(252,221,110,.92); }
.pro-banner-top .pro-banner-pct {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(69,26,3,.14); display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .74rem; color: #451a03;
    font-variant-numeric: tabular-nums; /* cifre a larghezza fissa: "5%" e "72%" restano centrate uguali nel cerchio */
}
.pro-banner-top strong { font-weight: 700; }
.pro-banner-top .pro-banner-cta {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    background: #451a03; color: #fff; font-weight: 700; padding: 6px 14px;
    border-radius: 8px; font-size: .84rem; transition: all .2s;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.pro-banner-top .pro-banner-cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }

/* ─── Nav ───────────────────────────────────────────────── */
.mkt-nav {
    background: rgba(255,255,255,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(100,116,139,.5); position: relative;
    transition: all .3s ease;
    /* Altezza standard 72px: col solo py-2 (16px totali) il contenuto reale (bottoni/icone da
       40px) portava la navbar a ~56-60px, un po' stretta per ospitare comodamente logo + tutte le
       voci + campanella/chat/lingua senza sembrare compressa. */
    min-height: 72px; display: flex; align-items: center;
}
/* Logo e menu utente sulla stessa linea mediana orizzontale: già garantito dall'utility
   Bootstrap "align-items-center" in markup, qui reso esplicito in CSS come rete di sicurezza
   (non dipende più da una classe che potrebbe sparire in una futura modifica del markup). */
.mkt-nav .container { align-items: center; }
.mkt-nav.mkt-nav-scrolled {
    padding-top: .35rem !important; padding-bottom: .35rem !important;
    background: rgba(255,255,255,.94); box-shadow: 0 4px 20px rgba(15,23,42,.06);
}
.mkt-nav .navbar-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; letter-spacing: -.2px; transition: opacity .2s; }
.mkt-nav .navbar-brand:hover { opacity: .85; }
.brand-mark {
    width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; transition: width .3s ease, height .3s ease;
    /* drop-shadow (non box-shadow) segue la forma reale del logo con trasparenza, non il suo
       riquadro rettangolare — un'ombra quasi impercettibile per un accenno di tridimensionalità. */
    filter: drop-shadow(0 1px 2px rgba(15,23,42,.18));
}
.mkt-nav.mkt-nav-scrolled .brand-mark { width: 22px; height: 22px; }
/* ─── Hamburger animato (3 linee → X) ────────────────────────────────── */
.hamburger-btn {
    border: none; padding: 0; width: 30px; height: 24px; position: relative;
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    background: transparent; box-shadow: none !important;
}
.hamburger-btn:focus { box-shadow: none; }
.hamburger-line {
    display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--ink);
    transition: transform .3s ease, opacity .3s ease;
}
.hamburger-btn.is-active .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-btn.is-active .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.is-active .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .hamburger-line { transition: none; } }

.mkt-nav-scroll-indicator {
    position: absolute; inset-inline-start: 0; bottom: -1px; height: 2px; width: 0%;
    background: var(--grad); transition: width .1s linear; z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .mkt-nav, .brand-mark { transition: none; }
}

/* Voci di menu: pillola sottile all'hover + indicatore attivo, invece del semplice cambio colore
   (troppo debole per farsi notare su una topbar bianca). */
.mkt-nav .navbar-nav.me-auto { gap: 2px; }
.mkt-nav .nav-link {
    position: relative; color: var(--ink); font-weight: 600; padding: 8px 16px !important;
    border-radius: 999px; transition: color .2s, background-color .2s;
}
.mkt-nav .nav-link::after {
    content: ''; position: absolute; inset-inline-start: 16px; inset-inline-end: 16px; bottom: 2px; height: 2px;
    background-color: var(--p1); border-radius: 2px; transform: scaleX(0); transform-origin: center;
    transition: transform .2s, background-color .2s ease;
}
.mkt-nav .nav-link:hover { color: var(--p1); background: rgba(var(--p1-rgb),.06); }
.mkt-nav .nav-link:hover::after { transform: scaleX(1); }
/* :active (durante la pressione, non lo stato "pagina corrente" di .active): un filo più scuro
   dell'hover, per dare un feedback tattile distinto dal semplice passaggio del mouse — anche la
   linea di sottolineatura scurisce in coordinamento, con una transizione di colore fluida invece
   di un cambio secco. */
.mkt-nav .nav-link:active { color: var(--accent-dark); background: rgba(var(--p1-rgb),.12); }
.mkt-nav .nav-link:active::after { background-color: var(--accent-dark); }
.mkt-nav .nav-link.active { color: var(--p1); background: rgba(var(--p1-rgb),.08); }
.mkt-nav .nav-link.active::after { transform: scaleX(1); }

/* ─── Campanella notifiche ───────────────────────────────── */
.notif-bell {
    position: relative; width: 40px; height: 40px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; color: var(--ink); font-size: 1.2rem;
    background: var(--surface); border: 1px solid var(--border); transition: all .2s;
}
.notif-bell:hover { border-color: var(--p1); color: var(--p1); }

/* ─── Switcher lingua ─────────────────────────────────────── */
/* flag-icons rende bandiere vere via sprite CSS (fi fi-it/fi-gb/fi-es): a differenza dell'emoji 🏳
   si vedono uguali su tutti gli OS, incluso Windows dove le emoji-bandiera mostrano solo "IT"/"GB" testuali. */
/* .fis (variante quadrata 1:1 della libreria flag-icons) invece della rettangolare 4:3 di default:
   ritagliata in cerchio, una bandiera quadrata si deforma molto meno ai bordi superiore/inferiore.
   Anello chiaro invece di un bordo scuro per dare comunque un minimo di definizione al bordo. */
/* .fi.lang-flag (2 classi), non solo .lang-flag: la libreria definisce ".fi.fis{width:1em}" con
   la stessa specificità di 2 classi — con una sola classe la nostra larghezza perdeva quel
   confronto mentre l'altezza (mai impostata dalla libreria) vinceva, risultando in un riquadro
   più alto che largo e quindi una bandiera deformata da background-size:cover (bug segnalato). */
.fi.fis.lang-flag {
    width: 1.3em !important; height: 1.3em; border-radius: 50%; background-size: cover; background-position: center;
    display: inline-flex; vertical-align: middle; border: none; outline: none; margin: 0; flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(15,23,42,.08);
    /* Nella navbar è figlio diretto di .notif-bell (bottone circolare 40x40, flex-centrato):
       inline-flex + margin:0 evita che un line-height ereditato dal contesto navbar lo sposti di
       qualche pixel dal centro verticale dell'header, disallineandolo dagli altri bottoni icona
       (campanella, chat) accanto. */
}
.lang-switcher .dropdown-menu a.active { color: var(--p1); font-weight: 700; background: var(--soft); }
.lang-switcher .dropdown-menu a { display: flex; align-items: center; gap: 8px; }

/* Selettore prefisso telefonico internazionale: stesso pattern del lang-switcher (bandiera +
   nome), ma con elenco più lungo (~30 paesi) quindi scrollabile invece di un dropdown enorme. */
.tel-prefix-dropdown .dropdown-toggle { padding: 6px 10px; }
.tel-prefix-dropdown .dropdown-toggle::after { margin-inline-start: 6px; }
.tel-prefix-menu { max-height: 280px; overflow-y: auto; min-width: 220px; }
.tel-prefix-menu .dropdown-item { white-space: nowrap; }

/* ─── Apertura menu a tendina (Bootstrap dropdown, in tutto il sito) ──────
   Bootstrap mostra/nasconde .dropdown-menu con un semplice toggle della classe .show, senza
   alcuna transizione integrata: di colpo. Qui aggiungiamo fade-in + leggero spostamento verso
   il basso via @keyframes (una CSS transition non basterebbe: display:none→block non è animabile
   da solo, l'elemento andrebbe comunque tenuto nel flusso — l'animazione sull'evento .show risolve
   senza dover riscrivere la logica JS di Bootstrap). will-change prepara il browser a compositare
   solo transform/opacity, per restare fluido anche su menu con molte voci. */
.dropdown-menu.show { animation: dropdownMenuIn .16s ease; will-change: transform, opacity; }
@keyframes dropdownMenuIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .dropdown-menu.show { animation: none; } }
/* Griglia a 2 colonne invece di una singola riga flex: con 3 lingue la riga unica stava comoda,
   ma con 4 (arabo incluso, etichetta "العربية" più larga delle altre) andava in overflow fuori
   dallo schermo invece di andare a capo (bug segnalato su mobile). La griglia si adatta da sola
   ad altre lingue future, aggiungendo righe invece di stringere o tagliare le celle. */
.mob-lang-switcher { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0; }
.mob-lang-switcher a {
    text-align: center; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--border);
    color: var(--ink); font-size: .82rem; font-weight: 600; text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
}
.mob-lang-switcher a.active { border-color: var(--p1); color: var(--p1); background: var(--soft); }
.notif-badge {
    position: absolute; top: -4px; inset-inline-end: -4px; background: #ff0000; color: #fff; font-weight: 800;
    font-size: .62rem; min-width: 17px; height: 17px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px; box-shadow: 0 0 0 2px #fff;
}
/* Badge campanella notifiche: stesso stile "in stile Facebook" del badge messaggi qui di fianco —
   cerchio rosso pieno con il numero, non un pallino generico (richiesto esplicitamente: prima era
   stato reso un indicatore minuscolo senza numero, ma il numero è più utile a colpo d'occhio). */
#notifBellBtn .notif-badge { top: -4px; inset-inline-end: -4px; }
/* ─── Dropdown notifiche: stile "in stile Facebook" richiesto esplicitamente — header con titolo +
   pulsante "altro", tab Tutte/Non lette, etichetta di sezione con link, icona rotonda invece di un
   quadrato smussato, pallino di non-letto a fine riga invece che appoggiato sull'angolo dell'icona. ── */
.notif-menu { min-width: 380px; max-width: min(420px, 94vw); width: max-content; max-height: 520px; overflow-y: auto; padding: 0; }
.notif-menu-head {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px;
    /* Stesso bug del pulsante "indietro" in chat.php: il tasto "..." qui dentro ha una transition
       su hover che può promuoverlo a un proprio layer GPU in Chromium, e siede esattamente
       sull'angolo arrotondato di .notif-menu (che clippa con overflow-y:auto) — stesso artefatto
       scuro visto interagendo vicino all'angolo. Raggio corrispondente qui elimina la dipendenza
       dal solo clip del genitore, come già fatto per .chat-sidebar-head. */
    border-start-start-radius: var(--bs-border-radius, .375rem);
    border-start-end-radius: var(--bs-border-radius, .375rem);
}
.notif-menu-title { font-size: 1.15rem; font-weight: 800; }
.notif-menu-more {
    width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; color: var(--muted);
    display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: background .15s;
}
.notif-menu-more:hover { background: var(--soft); color: var(--ink); }
/* "Segna tutte come lette": azione etichettata e ben visibile (prima era un'iconcina grigia che
   passava inosservata — segnalato). Testo blu di brand, non un'icona muta. */
.notif-mark-all {
    border: none; background: transparent; color: var(--p1); font-weight: 700; font-size: .8rem;
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px;
    white-space: nowrap; transition: background .15s;
}
.notif-mark-all:hover { background: rgba(var(--p1-rgb),.1); }
.notif-mark-all i { font-size: .85em; }
.notif-tabs { display: flex; gap: 8px; padding: 4px 16px 10px; }
.notif-tab {
    border: none; background: transparent; color: var(--muted); font-weight: 700; font-size: .92rem;
    padding: 8px 12px; border-radius: 10px; transition: background .15s, color .15s;
}
.notif-tab:hover { background: var(--soft); }
.notif-tab.active { color: var(--p1); background: rgba(var(--p1-rgb),.1); }
.notif-section-label {
    display: flex; align-items: center; justify-content: space-between; padding: 6px 16px;
    font-size: .92rem; font-weight: 700;
}
.notif-section-label a { font-size: .82rem; font-weight: 700; color: var(--p1); text-decoration: none; }
.notif-section-label a:hover { text-decoration: underline; }
.notif-list-wrap { padding: 2px 6px; }
.notif-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 12px;
    text-decoration: none; color: var(--ink); transition: background .15s;
}
.notif-item:hover { background: var(--soft); color: var(--ink); }
.notif-item.unread { background: rgba(var(--p1-rgb),.06); }
.notif-ico {
    width: 40px; height: 40px; min-width: 40px; border-radius: 10px; background: var(--soft); color: var(--muted); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: all .15s; overflow: hidden;
    text-align: center;
}
.notif-ico i { display: inline-block; font-size: inherit; line-height: 1; width: 1em !important; text-align: center; margin: 0 !important; padding: 0 !important; }
/* Colore diverso per tipo di notifica (messaggio, foto, preventivo, moderazione, segnalazione/blocco…),
   sempre visibile — non solo quando non letta — così il colore aiuta a distinguere il tipo a colpo d'occhio.
   moderazione_ok è separato da moderazione (verde vs ambra): una foto/immagine approvata è una buona
   notizia, non va confusa visivamente con un rifiuto/rimozione — stessa icona scudo per entrambe rendeva
   impossibile distinguerle a colpo d'occhio (bug segnalato: notifiche di approvazione indistinguibili). */
.notif-ico-viola   { background: rgba(var(--p1-rgb),.1); color: var(--p1); }
.notif-ico-blu     { background: rgba(0,138,247,.1); color: #008af7; }
.notif-ico-rosa    { background: #fce7f3; color: #be185d; }
.notif-ico-verde   { background: #dcfce7; color: #166534; }
.notif-ico-arancio { background: #fef3c7; color: #92400e; }
.notif-ico-rosso   { background: #fee2e2; color: #991b1b; }
.notif-item.unread .notif-text { font-weight: 700; }
.notif-text { font-size: .86rem; line-height: 1.35; }
.notif-time { font-size: .72rem; color: var(--p1); font-weight: 600; margin-top: 3px; }
.notif-cta { font-size: .72rem; font-weight: 700; color: var(--p1); white-space: nowrap; }
/* Pallino blu di "non letta": a fine riga, centrato verticalmente sull'intero item — non più
   appoggiato sull'angolo dell'icona, per uno stile Facebook più fedele (e per eliminare qualunque
   posizionamento assoluto agganciato all'icona, causa dei disallineamenti segnalati in passato). */
.notif-unread-dot { display: none; width: 10px; height: 10px; border-radius: 50%; background: var(--p1); flex-shrink: 0; }
.notif-item.unread .notif-unread-dot { display: block; }
.reveal.in-view .notif-item { animation: notifItemIn .4s ease backwards; }
@keyframes notifItemIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal.in-view .notif-item { animation: none !important; } }
.notif-footer-btn {
    display: block; text-align: center; margin: 6px; padding: 12px; border-radius: 12px;
    background: var(--soft); color: var(--ink); font-weight: 700; font-size: .88rem; text-decoration: none;
    transition: background .15s;
}
.notif-footer-btn:hover { background: var(--border); color: var(--ink); }

/* User menu (nav top-right) */
.user-chip {
    display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
    text-decoration: none; color: var(--ink); font-weight: 600; font-size: .88rem;
    transition: all .2s;
}
.user-chip:hover, .user-chip[aria-expanded="true"] {
    border-color: transparent; box-shadow: 0 8px 22px rgba(var(--p1-rgb),.25); color: var(--ink);
    background: linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;
    border: 1px solid transparent;
}
.user-chip .avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--grad);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .82rem; flex-shrink: 0; overflow: hidden;
    box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(var(--p1-rgb),.3);
}
.user-chip .avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Nasconde la freccina generata automaticamente da Bootstrap per .dropdown-toggle (::after):
   restava visibile insieme all'icona FontAwesome esplicita qui sotto, creando due frecce doppie. */
.user-chip.dropdown-toggle::after { display: none; }
.user-chip i.fa-chevron-down { font-size: .7rem; color: var(--muted); transition: transform .2s; }
.user-chip[aria-expanded="true"] i.fa-chevron-down { transform: rotate(180deg); }
.user-menu {
    /* Sfondo 100% pieno (richiesto: niente trasparenza/blur, il testo sotto non deve trasparire). */
    background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 6px;
    box-shadow: 0 24px 60px rgba(15,23,42,.18); min-width: 260px; position: relative;
    animation: menuIn .2s ease;
}
/* Micro-triangolo che punta verso l'avatar/toggle: un quadratino ruotato 45°, metà nascosto sotto
   il bordo superiore del menu — stessa tecnica del tooltip informativo già usato nel sito.
   dropdown-menu-end allinea il menu a destra, quindi il triangolo sta vicino all'angolo destro. */
.user-menu::before {
    content: ''; position: absolute; top: -6px; inset-inline-end: 18px; width: 12px; height: 12px;
    background: #fff; border-inline-start: 1px solid var(--border); border-top: 1px solid var(--border);
    transform: rotate(45deg); border-radius: 2px 0 0 0;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.user-menu .user-menu-head {
    padding: 12px 14px; margin-bottom: 6px; border-radius: 12px;
    background: var(--grad-soft); display: flex; align-items: center; gap: 12px;
}
/* Regola generica: prima .avatar-lg era stilata SOLO dentro .user-menu-head/.mob-user, quindi
   ogni altro uso (card "Chi cerca personale" di lavoro-dettaglio.php, candidati in
   lavoro-gestione.php) restava senza alcuno stile — la foto appariva enorme e rettangolare invece
   che un cerchio piccolo. Le due regole più specifiche sotto restano, sono ridondanti ma innocue. */
.avatar-lg {
    width: 44px; height: 44px; border-radius: 50%; background: var(--grad);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; flex-shrink: 0; overflow: hidden;
    box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(var(--p1-rgb),.3);
}
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.user-menu .user-menu-head .avatar-lg {
    width: 44px; height: 44px; border-radius: 50%; background: var(--grad);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; flex-shrink: 0; overflow: hidden;
    box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(var(--p1-rgb),.3);
}
.user-menu .user-menu-head .avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.user-menu .user-menu-head .name { font-weight: 800; font-size: .95rem; line-height: 1.2; }
.user-menu .user-menu-head .email { font-size: .76rem; color: var(--muted); word-break: break-word; }
.user-menu a, .user-menu button {
    display: flex; align-items: center; padding: 10px 14px; border-radius: 10px;
    color: var(--ink); text-decoration: none; font-size: .9rem; width: 100%; border: none; background: transparent; text-align: start;
    transition: all .15s; font-weight: 500;
}
.user-menu a i, .user-menu button i {
    width: 20px; text-align: center; font-size: 1rem; color: var(--muted); transition: color .15s; margin-inline-end: 6px;
}
.user-menu a:hover, .user-menu button:hover {
    background: var(--grad-soft); color: var(--p1); transform: translateX(2px);
}
.user-menu a:hover i, .user-menu button:hover i { color: var(--p1); }
.user-menu .divider { height: 1px; background: var(--border); margin: 6px 8px; }
.user-menu .admin-link { color: #dc2626 !important; font-weight: 700; }
.user-menu .admin-link i { color: #dc2626 !important; }
.user-menu .admin-link:hover { background: #fee2e2 !important; color: #b91c1c !important; }
.user-menu .admin-link:hover i { color: #b91c1c !important; }
button.logout-link { background: none; border: none; cursor: pointer; font: inherit; padding: 0; width: 100%; text-align: start; }
.user-menu .logout-link { color: #dc2626; font-weight: 600; }
.user-menu .logout-link i { color: #dc2626; }
.user-menu .logout-link:hover { background: #fee2e2; color: #b91c1c; }
.user-menu .logout-link:hover i { color: #b91c1c; }

/* ─── Bottoni ────────────────────────────────────────────── */
/* Bottone primario: punto "importante" per definizione (CTA principale ovunque) — verde WhatsApp. */
/* ─── Skeleton loader (shimmer) per sezioni caricate in modo asincrono ───
   Componente generico: .skel-circle/.skel-line/.skel-block simulano rispettivamente
   avatar, righe di testo e blocchi rettangolari, con un gradiente animato da
   sinistra a destra. Usare dentro un contenitore con classe .skel-wrap. */
.skel-wrap { --skel-base: #eef0f4; --skel-shine: #f8f9fb; }
.skel-circle, .skel-line, .skel-block {
    background: linear-gradient(90deg, var(--skel-base) 25%, var(--skel-shine) 50%, var(--skel-base) 75%);
    background-size: 200% 100%; animation: skelShimmer 1.4s ease-in-out infinite; border-radius: 6px;
}
.skel-circle { border-radius: 50%; flex-shrink: 0; }
.skel-line { height: 10px; }
@keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .skel-circle, .skel-line, .skel-block { animation: none; background: var(--skel-base); }
}

/* Skeleton specifico: pannello conversazione chat mentre carica (vedi chat.php) */
.chat-skel-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.chat-skel-bubble-row { display: flex; padding: 6px 16px; }
.chat-skel-bubble-row.mine { justify-content: flex-end; }

/* ─── Spinner sul bottone submit (generato via JS, vedi app.js) ──────────── */
.btn-loading { position: relative !important; color: transparent !important; pointer-events: none !important; }
.btn-loading > * { visibility: hidden; }
.btn-loading::after {
    content: ''; position: absolute; top: 50%; inset-inline-start: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
    border: 2.5px solid rgba(15,23,42,.18); border-top-color: var(--ink); border-radius: 50%;
    animation: btnSpin .7s linear infinite;
}
.btn-loading.btn-accent::after, .btn-loading.btn-upgrade-pro::after {
    border-color: rgba(255,255,255,.35); border-top-color: #fff;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-loading::after { animation-duration: 1.4s; } }

.btn-accent {
    background: var(--grad-vivid); border: none; color: #fff; border-radius: 8px; font-weight: 600;
    box-shadow: 0 6px 18px var(--vivid-shadow); position: relative; overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.btn-accent:hover { filter: brightness(1.05); color: #fff; box-shadow: 0 8px 22px var(--vivid-shadow); transform: translateY(-1px); }
.btn-accent:active { transform: translateY(0) scale(.97); box-shadow: 0 4px 12px var(--vivid-shadow); transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .1s; }
/* Overlay diagonale sottilissimo, solo su "Pubblica un annuncio": .btn-accent è condiviso da
   moltissimi bottoni del sito (e usa già ::after per lo sweep di luce esistente), quindi il
   gradiente extra va su ::before per non entrare in conflitto, ed è scoped qui invece che sulla
   classe base per non introdurre un cambio visivo ovunque. */
.lav-publish-cta::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%);
}
.btn-accent::after {
    content: ''; position: absolute; top: 0; inset-inline-start: -75%; width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
}
.btn-accent:hover::after { animation: btnShine .8s ease; }
@keyframes btnShine { from { inset-inline-start: -75%; } to { inset-inline-start: 125%; } }
.btn-outline-accent { border: 1.5px solid var(--border); border-radius: 8px; color: var(--ink); font-weight: 600; background: var(--surface); transition: all .2s; }
.btn-outline-accent:hover { border-color: var(--p1); color: var(--p1); }
.btn-outline-accent:active { transform: scale(.97); transition: transform .12s cubic-bezier(.34,1.56,.64,1); }

/* Bootstrap .btn-outline-secondary "di serie" (Reset, Esporta CSV, Dettaglio…) stonava accanto ai
   bottoni brandizzati a pillola: stessa forma/animazione, ma resta neutro invece di colorarsi. */
.btn-outline-secondary { border-radius: 8px; font-weight: 600; transition: all .2s; }
.btn-outline-secondary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.btn-outline-secondary:active { transform: translateY(0) scale(.97); transition: transform .12s cubic-bezier(.34,1.56,.64,1); }

/* Icona + testo nei bottoni: spaziatura coerente invece del solo spazio di testo */
.btn-accent i, .btn-outline-accent i { margin-inline-end: 6px; }

/* Feedback "salvato" temporaneo sul bottone submit dei form AJAX */
.btn-accent.btn-saved {
    background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 6px 18px rgba(34,197,94,.35);
    transition: background .25s ease, box-shadow .25s ease;
}

/* ─── Offcanvas mobile drawer ────────────────────────────── */
.mkt-offcanvas { max-width: 340px; border-inline-start: 1px solid var(--border); border-radius: 22px 0 0 22px; }
.mkt-offcanvas .offcanvas-header { border-bottom: 1px solid var(--border); padding: 18px 20px; }
.mkt-offcanvas .offcanvas-body { padding: 18px 16px; overflow-y: auto; }
body:has(.mobile-tabbar) .mkt-offcanvas .offcanvas-body { padding-bottom: 75px; }
.mkt-offcanvas .brand-mark { width: 28px; height: 28px; object-fit: contain; }
.mob-user {
    display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px;
    background: var(--grad-soft); margin-bottom: 16px;
}
.mob-user .avatar-lg {
    width: 44px; height: 44px; border-radius: 50%; background: var(--grad);
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; flex-shrink: 0;
    box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(var(--p1-rgb),.3);
}
.mob-user .avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.mob-user .name { font-weight: 800; font-size: .95rem; line-height: 1.2; }
.mob-user .email { font-size: .76rem; color: var(--muted); word-break: break-word; }
.mob-section-title {
    font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
    color: var(--muted); padding: 12px 14px 6px;
}
.mob-nav { display: flex; flex-direction: column; }
.mob-nav a {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
    color: var(--ink); font-weight: 500; font-size: .95rem; transition: all .15s;
}
.mob-nav a i {
    width: 22px; text-align: center; font-size: 1.1rem; color: var(--muted);
}
.mob-nav a:hover, .mob-nav a:focus { background: var(--grad-soft); color: var(--p1); transform: translateX(3px); }
.mob-nav a:hover i { color: var(--p1); }
.mob-nav a.admin-link { color: #dc2626; font-weight: 700; }
.mob-nav a.admin-link i { color: #dc2626; }
.mob-nav a.admin-link:hover { background: #fee2e2; color: #b91c1c; }
.mob-nav a.logout-link { color: var(--muted); }
.mob-nav a.logout-link:hover { background: #fee2e2; color: #dc2626; }
.mob-nav a.logout-link:hover i { color: #dc2626; }

/* ─── Hero ──────────────────────────────────────────────── */
.hero-section { background: linear-gradient(180deg, #faf7ff 0%, #ffffff 60%); border-radius: 28px; padding: 40px 40px; position: relative; }
/* I blob decorativi hanno il proprio contenitore con overflow:hidden, così NON tagliano
   più il badge "+3 preventivi" che sporge fuori dal bordo del mock-card (bug corretto). */
.hero-blobs-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: 28px; z-index: 0; pointer-events: none; }

.hero-quick-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.hero-quick-label { font-size: .78rem; color: var(--tx2, #64748b); font-weight: 500; white-space: nowrap; }
.hero-quick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 8px; border-radius: 10px;
    background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); color: var(--ink, #1e293b);
    font-size: .8rem; font-weight: 600; text-decoration: none; transition: all .2s;
    opacity: 0; animation: badgePopIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
.hero-quick-chips .quick-chip:nth-child(1) { animation-delay: .05s; }
.hero-quick-chips .quick-chip:nth-child(2) { animation-delay: .1s; }
.hero-quick-chips .quick-chip:nth-child(3) { animation-delay: .15s; }
.hero-quick-chips .quick-chip:nth-child(4) { animation-delay: .2s; }
.quick-chip-ico {
    width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0; font-size: .7rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--chip-bg); color: var(--chip-ico);
}
.quick-chip:hover { border-color: var(--p1); color: var(--p1); background: var(--bg2, #f1f5f9); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
@media (prefers-reduced-motion: reduce) { .quick-chip { animation: none; opacity: 1; } }

/* Blob di gradiente animati */
.hero-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; z-index: 0; pointer-events: none; }
.hero-blob-1 { width: 360px; height: 360px; background: var(--grad); top: -120px; inset-inline-end: -80px; animation: blobFloat1 14s ease-in-out infinite; }
.hero-blob-2 { width: 280px; height: 280px; background: linear-gradient(135deg, var(--p2), #fbbf24); top: 60%; inset-inline-start: -100px; animation: blobFloat2 18s ease-in-out infinite; }
@keyframes blobFloat1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,40px) scale(1.15); } }
@keyframes blobFloat2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.1); } }
.hero-section > .row { position: relative; z-index: 1; }

.hero-badge {
    display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border);
    padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--ink);
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; animation: pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }

/* Titolo hero */
.hero-title { font-weight: 800; letter-spacing: -1.2px; line-height: 1.06; font-size: clamp(2.3rem, 4.9vw, 3.5rem); }
.hero-title .grad-text {
    background: var(--grad-vivid); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: gradShift 5s ease infinite; display: inline;
}
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.hero-sub { color: var(--muted); font-size: 1.08rem; max-width: 520px; }
.hero-social-proof { margin-bottom: 16px; }
.hero-trust-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    font-size: .82rem; font-weight: 600; color: var(--tx2, #475569);
    opacity: 0; animation: badgePopIn .5s cubic-bezier(.34,1.56,.64,1) .1s both;
}
.hero-trust-strip i { margin-right: 3px; }
.hero-trust-strip > span:nth-child(1) i { color: #16a34a; }
.hero-trust-strip > span:nth-child(3) i { color: #2563eb; }
.hero-trust-strip > span:nth-child(5) i { color: #d97706; }
.hero-trust-strip > span:nth-child(7) i { color: #7c3aed; }
.hero-trust-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border, #cbd5e1); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .hero-trust-strip { animation: none; opacity: 1; } }

/* Hero search box: primo impatto — protagonista della hero */
.hero-search { margin: 22px 0 24px; max-width: 680px; }
.hero-search-inner {
    display: flex; align-items: stretch; background: var(--surface);
    border: 1px solid var(--border); border-radius: 20px; padding: 8px;
    box-shadow: 0 16px 40px rgba(var(--p1-rgb),.12); transition: all .2s;
}
.hero-search-inner:focus-within { box-shadow: 0 20px 48px rgba(var(--p1-rgb),.22); border-color: rgba(var(--p1-rgb),.35); }
.hero-search-field {
    display: flex; flex-direction: column; padding: 10px 16px; border-radius: 14px;
    cursor: text; position: relative;
}
.hero-search-field.field-service { flex: 1.6; }
.hero-search-field.field-city { flex: 1; border-inline-start: 1px solid var(--border); }
.hero-search-field:hover:not(:focus-within) { background: var(--soft); }
.hero-search-field .field-label {
    font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase;
    letter-spacing: .3px; margin-bottom: 3px; line-height: 1.3;
    /* Altezza fissa a 2 righe: "Cosa stai cercando?" va a capo su 2 righe mentre "Dove?" no,
       senza questo l'input della città si ritrova più in alto di quello del servizio. */
    min-height: calc(.74rem * 1.3 * 2);
    display: flex; align-items: flex-end;
}
.hero-search-field .field-label i { color: var(--p1); margin-inline-end: 4px; }
.hero-search-field .field-input {
    border: none; outline: none; background: transparent; font-size: 1.08rem; font-weight: 500;
    color: var(--ink); width: 100%; padding: 0;
}
.hero-search-field .field-input::placeholder { color: #cbd5e1; font-weight: 400; }
.hero-search-btn {
    background: var(--grad-vivid); color: #fff; border: none; border-radius: 14px;
    padding: 0 26px; font-weight: 700; font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: all .2s; min-width: 60px; white-space: nowrap;
    box-shadow: 0 8px 20px var(--vivid-shadow);
}
.hero-search-btn:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 12px 26px var(--vivid-shadow); }
.hero-search-btn:active { transform: translateY(0) scale(.97); transition: transform .12s cubic-bezier(.34,1.56,.64,1); }
.hero-search-suggest {
    display: none; position: absolute; top: 100%; inset-inline-start: 0; inset-inline-end: 0; z-index: 20;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 6px;
    box-shadow: 0 20px 50px rgba(15,23,42,.15); margin-top: 8px; max-height: 320px; overflow-y: auto;
}
.hero-search-suggest.open { display: block; }
.hero-search-error {
    display: none; position: absolute; top: 100%; inset-inline-start: 0; margin-top: 6px; z-index: 21;
    background: var(--surface); border: 1px solid #fecaca; color: #b91c1c; font-size: .78rem; font-weight: 600;
    padding: 6px 12px; border-radius: 10px; box-shadow: 0 8px 20px rgba(185,28,28,.12); white-space: nowrap;
}
.hero-search-error.show { display: block; animation: shakeErr .35s ease; }
@keyframes shakeErr { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.hs-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
    cursor: pointer; transition: background .15s;
}
.hs-item:hover, .hs-item.active { background: var(--grad-soft); color: var(--p1); }
.hs-item i {
    width: 32px; height: 32px; border-radius: 8px; background: var(--grad); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0;
}
.hs-item .name { font-weight: 600; font-size: .92rem; }
.hs-item .meta { font-size: .74rem; color: var(--muted); }
/* Riga "ricerca in corso" dentro il dropdown: più visibile della sola icona che gira nel campo
   (segnalato: "non vedo il simbolo di fetch dei dati"), non cliccabile, sparisce coi risultati veri. */
.hs-item-loading { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--muted); font-size: .85rem; }
.hs-item-loading i { animation: geoSpin .7s linear infinite; color: var(--p1); }

/* Picker competenze (lavoro-nuovo.php): pillole già selezionate + griglia di suggerimenti cliccabili,
   raggruppati per tipo. Le stesse parole poi riappaiono nel filtro di ricerca di lavoro.php. */
.comp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.comp-pills:not(:empty) { margin-bottom: 14px; }
.comp-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px;
    background: var(--grad-soft); color: var(--p1); border-radius: 999px; font-size: .82rem; font-weight: 700;
    animation: compPillIn .25s ease backwards;
}
/* Ogni pillola aggiunta a mano compare con un fade-in invece di scattare di colpo nella lista —
   sync() in cv_panel.php ricrea l'intero markup ad ogni click, quindi anche la nuova pillola è
   sempre un nodo DOM nuovo su cui l'animazione riparte naturalmente. */
@keyframes compPillIn { from { opacity: 0; transform: translateY(4px) scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .comp-pill { animation: none; } }
.comp-pill-remove {
    display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0;
    border-radius: 50%; background: rgba(var(--p1-rgb),.15); border: none; color: var(--p1); font-size: .62rem; cursor: pointer; transition: background .15s;
}
.comp-pill-remove:hover { background: rgba(var(--p1-rgb),.3); }

/* Pillole lingue/patenti differenziate dalle competenze tecniche generiche (viola/--p1): stesso
   linguaggio "pillola" ma tonalità diverse, cosi nel CV si distingue a colpo d'occhio quale
   elenco appartiene a quale campo invece di un muro di pillole tutte uguali. */
.comp-pills-lingue .comp-pill { background: #e0f2fe; color: #0369a1; }
.comp-pills-lingue .comp-pill-remove { background: rgba(3,105,161,.15); color: #0369a1; }
.comp-pills-lingue .comp-pill-remove:hover { background: rgba(3,105,161,.3); }
.comp-pills-patenti .comp-pill { background: #fef3c7; color: #92400e; }
.comp-pills-patenti .comp-pill-remove { background: rgba(146,64,14,.15); color: #92400e; }
.comp-pills-patenti .comp-pill-remove:hover { background: rgba(146,64,14,.3); }

/* Riordino esperienze lavorative via drag-and-drop (cv_panel.php): maniglia dedicata (non l'intera
   riga a "cursor:grab", per non confliggere col click sul pulsante elimina) + stato visivo mentre
   si trascina. */
.cv-esp-riga { transition: opacity .15s, transform .15s; }
.cv-esp-riga-dragging { opacity: .4; }
.cv-drag-handle { color: var(--muted); cursor: grab; padding-top: 2px; flex-shrink: 0; touch-action: none; }
.cv-drag-handle:active { cursor: grabbing; }

/* Test di competenza: pulsante "Verifica"/badge "Competenza verificata" accanto alla pillola
   (solo per le skill in quiz_competenze_disponibili(), vedi renderCvPicker in cv_panel.php). */
.comp-pill-verified { background: #059669; color: #fff; border: 1px solid #047857; }
.comp-pill-verified .comp-pill-badge { color: #fff; }
.comp-pill-verified .comp-pill-remove { color: rgba(255,255,255,.7); }
.comp-pill-verified .comp-pill-remove:hover { color: #fff; }
.comp-pill-quiz-btn {
    border: none; border-radius: 999px; background: rgba(var(--p1-rgb),.15); color: var(--p1);
    font-size: .68rem; font-weight: 700; padding: 3px 9px; cursor: pointer; transition: background .15s;
    white-space: nowrap;
}
.comp-pill-quiz-btn:hover { background: rgba(var(--p1-rgb),.28); }
.comp-pill-badge { display: flex; align-items: center; color: #16a34a; font-size: .85rem; }

.comp-suggest-group { margin-bottom: 4px; }
.comp-suggest-group.d-none { display: none; }
/* Categorie collassabili (competenze raggruppate): chiuse di default per non allungare la pagina
   con centinaia di pillole tutte visibili insieme — un click sul titolo apre/chiude la categoria. */
.comp-suggest-group-label {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; user-select: none;
    font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em;
    padding: 7px 2px; border-radius: 6px;
}
.comp-suggest-group-label:hover { color: var(--p1); background: var(--soft); }
.comp-suggest-group-label i { font-size: .65rem; transition: transform .15s; }
.comp-suggest-group-open .comp-suggest-group-label i { transform: rotate(180deg); }
.comp-suggest-grid { display: none; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; }
.comp-suggest-group-open .comp-suggest-grid { display: flex; }
/* Tag non ancora selezionati in tonalità neutra/grigia (var(--muted), non var(--ink)): prima
   avevano lo stesso peso visivo del testo normale e competevano con le pillole già scelte
   (.comp-pill, colorate in --p1) — ora solo quelle attive risaltano davvero a colpo d'occhio. */
.comp-suggest-btn {
    padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
    font-size: .82rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: all .15s;
}
.comp-suggest-btn:hover { border-color: rgba(var(--p1-rgb),.4); color: var(--p1); transform: translateY(-1px); }
.comp-suggest-btn.d-none { display: none; }

/* Pannello suggerimenti a comparsa (cv_panel.php): con centinaia di voci suggerite tenerlo sempre
   aperto rendeva la pagina un muro di pulsanti — si apre solo mentre si cerca (focus sul campo),
   dentro un riquadro con altezza massima e scroll invece di allungare tutta la pagina. */
.comp-suggest-panel {
    max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); padding: 12px; margin-bottom: 4px;
}
.comp-suggest-panel.d-none { display: none; }

/* Selettore a due schede di lavoro-gestione.php: stessa lingua visiva del toggle griglia/lista
   delle richieste (.req-view-toggle), non i tab piatti di default di Bootstrap. */
.lav-tab-toggle { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 12px; padding: 4px; gap: 4px; background: var(--surface); }
.lav-tab-toggle button {
    display: flex; align-items: center; gap: 8px; padding: 9px 18px; border: none; background: transparent;
    border-radius: 9px; font-weight: 700; font-size: .86rem; color: var(--muted); transition: all .2s; cursor: pointer;
}
.lav-tab-toggle button:hover { color: var(--p1); }
.lav-tab-toggle button.active { background: linear-gradient(135deg, var(--p1) 0%, var(--accent-dark) 100%); color: #fff; }
.lav-tab-toggle button .badge-count { background: rgba(15,23,42,.08); border-radius: 999px; padding: 1px 9px; font-size: .74rem; }
.lav-tab-toggle button.active .badge-count { background: rgba(255,255,255,.25); }

/* Card categorie nella dashboard professionista (#s-categorie): prima icona piatta uguale per
   tutte, nessuna reazione al passaggio del mouse o alla selezione — sostituita da icone colorate
   per categoria (stessa palette di categoria_ico_colore() usata altrove) e da un feedback visivo
   chiaro su hover/selezione. */
.dash-cat-card {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
    border: 1px solid var(--border); background: var(--surface); cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease;
    position: relative;
}
.dash-cat-card:hover { border-color: rgba(var(--p1-rgb),.4); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,.08); }
.dash-cat-card.selected { border-color: var(--p1); background: var(--grad-soft); box-shadow: 0 8px 20px rgba(var(--p1-rgb),.15); }
.dash-cat-card:has(input:disabled) { opacity: .5; cursor: not-allowed; }
/* Categoria bloccata perché è stato raggiunto il limite del piano Free/Pro: lucchetto viola in angolo
   (feedback chiaro, non solo "grigio" come opacity), e cursore pointer (l'utente PUÒ cliccarla,
   ma apre un paywall — vedi dashboard.php gestione .cat-locked click). */
.dash-cat-card.cat-locked { cursor: pointer; position: relative; opacity: .55; }
.dash-cat-card.cat-locked::after {
    content: '\f023'; /* fa-lock */
    font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 8px; inset-inline-end: 10px;
    color: var(--p1); font-size: .8rem; background: #fff; border-radius: 50%; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(15,23,42,.15);
}
.dash-cat-card.cat-locked:hover { border-color: var(--p1); opacity: .8; transform: none; box-shadow: 0 8px 20px rgba(var(--p1-rgb),.2); }
.dash-cat-card input[type="checkbox"] { flex-shrink: 0; width: 1.05em; height: 1.05em; cursor: pointer; margin: 0; }
.dash-cat-ico {
    width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    font-size: .95rem; flex-shrink: 0; transition: transform .2s ease;
}
.dash-cat-card.selected .dash-cat-ico { transform: scale(1.1); }
.dash-cat-name { font-size: .86rem; font-weight: 600; }

/* Pillole filtro rapido di lavoro.php (Smart Working / Tempo pieno / Part-time / Entry level):
   scorrimento orizzontale su mobile con scrollbar nascosta, per non rompere il layout con 4+ chip
   che non entrano nella larghezza dello schermo. */
.lav-quick-filters { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.lav-quick-filters::-webkit-scrollbar { display: none; }
.lav-quick-pill {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: .84rem; font-weight: 700;
    white-space: nowrap; flex-shrink: 0; text-decoration: none; transition: all .15s;
}
.lav-quick-pill i { color: var(--p1); transition: color .15s; display: inline-flex; align-items: center; line-height: 1; }
.lav-quick-pill:hover { border-color: rgba(var(--p1-rgb),.4); transform: translateY(-1px); color: var(--ink); }
.lav-quick-pill.active { background: linear-gradient(135deg, var(--p1) 0%, var(--accent-dark) 100%); color: #fff; border-color: transparent; }
.lav-quick-pill.active i { color: #fff; }

/* CTA "Candidati" sticky in fondo allo schermo su mobile (lavoro-dettaglio.php): resta raggiungibile
   mentre si scorre la descrizione, invece di dover risalire fino al form di candidatura. Se l'utente
   è loggato con la tabbar mobile fissa già in basso, si alza sopra di essa invece di coprirla. */
.lav-sticky-apply {
    position: fixed; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 1055;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
    background: linear-gradient(to top, var(--surface) 65%, rgba(255,255,255,0));
}
@media (min-width: 992px) { .lav-sticky-apply { display: none; } }
body:has(.mobile-tabbar) .lav-sticky-apply { bottom: 64px; }
@media (max-width: 991px) {
    body:has(.lav-sticky-apply):not(:has(.mobile-tabbar)) main { padding-bottom: 86px; }
    body:has(.lav-sticky-apply):has(.mobile-tabbar) main { padding-bottom: 150px; }
}

/* Select dentro la barra filtri (.req-filter-field, condivisa con richieste.php): il campo può
   essere stretto (7 filtri affiancati), ma il menu del custom-select non deve restringersi alla
   stessa larghezza — altrimenti nomi lunghi ("Agente immobiliare", "Consulente finanziario") vanno
   a capo su più righe invece di leggersi su una riga sola. Il menu resta ancorato a sinistra ma si
   allarga quanto serve, con un tetto massimo per non uscire dalla viewport sui campi più a destra. */
.req-filter-field .cs-menu { inset-inline-end: auto; min-width: 100%; width: max-content; max-width: min(280px, 90vw); }
.req-filter-field .cs-item { white-space: normal; }

/* Pagina dettaglio annuncio di lavoro: icona hero e pillole colorate per categoria (già usate
   altrove sul sito), invece del monocromo piatto ereditato da richiesta.php — più leggibile a
   colpo d'occhio e più in linea con il resto delle pagine "lavoro" già colorate. */
.lav-detail-wrap .req-detail-card:not(.req-detail-card-cta):hover {
    transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15,23,42,.08); border-color: rgba(var(--p1-rgb),.18);
}
@media (prefers-reduced-motion: reduce) { .lav-detail-wrap .req-detail-card:hover { transform: none; } }
/* Selettore .req-detail-stat.lav-stat-* (non solo .lav-stat-*) per battere in specificità la
   regola base ".req-detail-stat i" definita più avanti nel foglio di stile — a parità di
   specificità avrebbe vinto lei per ordine di sorgente, lasciando tutte le icone viola uguali. */
.req-detail-stat.lav-stat-amber i { color: #b45309; }
.lav-stat-amber { background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,0)); }
.req-detail-stat.lav-stat-blue i { color: #1d4ed8; }
.lav-stat-blue { background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(37,99,235,0)); }
.req-detail-stat.lav-stat-green i { color: #15803d; }
.lav-stat-green { background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(22,163,74,0)); }
.tag-pill.lav-skill-pill { background: var(--grad-soft); color: var(--p1); font-weight: 700; border: none; }
.lav-skill-pill i { font-size: .78em; margin-inline-end: 2px; }
/* Competenza richiesta dall'annuncio che il candidato ha già dichiarato nel proprio CV di profilo
   (account.php "Il tuo CV"): risalto in ambra/oro invece del viola standard, per farla notare a
   colpo d'occhio fra le altre — "evidenzia se ho già la competenza che cercano". */
.tag-pill.lav-skill-pill-match { background: #fef3c7; color: #92400e; }

/* ─── Restyling professionale pagina dettaglio annuncio (scoped a .lav-detail-wrap) ─── */
/* Pulsante "Condividi" in alto a destra, coerente coi pill del sito */
.lav-share-btn {
    border: 1px solid var(--border); background: var(--surface); color: var(--muted);
    font-size: .82rem; font-weight: 700; border-radius: 999px; padding: 6px 14px;
    display: inline-flex; align-items: center; gap: 6px; transition: all .2s ease;
}
.lav-share-btn:hover { border-color: var(--p1); color: var(--p1); background: var(--grad-soft); transform: translateY(-1px); }
.lav-share-btn:active { transform: translateY(0) scale(.96); }

/* Hero più ricco: bordo e ombra di brand + alone decorativo + icona che fluttua piano */
.lav-detail-wrap .req-detail-hero {
    position: relative; overflow: hidden;
    border: 1px solid rgba(var(--p1-rgb),.12);
    box-shadow: 0 16px 42px -20px rgba(var(--p1-rgb),.4);
}
.lav-detail-wrap .req-detail-hero::after {
    content: ''; position: absolute; top: -45%; inset-inline-end: -8%; width: 230px; height: 230px;
    background: radial-gradient(circle, rgba(var(--p1-rgb),.16), transparent 70%); pointer-events: none;
}
.lav-detail-wrap .req-detail-hero > * { position: relative; z-index: 1; }
.lav-detail-wrap .req-detail-icon { animation: lavIconFloat 4s ease-in-out infinite; }
@keyframes lavIconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.lav-contract-pill { background: var(--surface); border: 1px solid rgba(var(--p1-rgb),.2); color: var(--p1); font-weight: 700; }

/* KPI tile: icona dentro un chip colorato (look "dashboard" invece dell'icona nuda) + lift all'hover */
.lav-detail-wrap .req-detail-stat i {
    width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center;
    justify-content: center; font-size: 1.15rem; flex-shrink: 0; transition: transform .2s ease;
}
.lav-detail-wrap .lav-stat-amber i { background: rgba(245,158,11,.14); }
.lav-detail-wrap .lav-stat-blue i  { background: rgba(37,99,235,.12); }
.lav-detail-wrap .lav-stat-green i { background: rgba(22,163,74,.12); }
.lav-detail-wrap .req-detail-stat:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15,23,42,.09); border-color: rgba(var(--p1-rgb),.25); }
.lav-detail-wrap .req-detail-stat:hover i { transform: scale(1.1); }

/* Icona nel titolo di ogni card dentro un chip morbido: intestazioni più definite */
.lav-detail-wrap .req-detail-card > h2 i:first-child {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; background: var(--grad-soft);
    font-size: .85rem; margin-inline-end: 6px; vertical-align: -6px;
}

/* Filo gradiente che affiora in cima alla card all'hover (firma "premium") */
.lav-detail-wrap .req-detail-card { position: relative; }
.lav-detail-wrap .req-detail-card::before {
    content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px;
    background: var(--grad-vivid); opacity: 0; transition: opacity .25s ease;
}
.lav-detail-wrap .req-detail-card:hover::before { opacity: 1; }

/* Micro-interazione sulle pillole competenze/requisiti/benefit */
.lav-detail-wrap .lav-skill-pill { transition: transform .15s ease, box-shadow .15s ease; }
.lav-detail-wrap .lav-skill-pill:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--p1-rgb),.16); }

@media (prefers-reduced-motion: reduce) {
    .lav-detail-wrap .req-detail-icon { animation: none; }
    .lav-detail-wrap .req-detail-stat, .lav-detail-wrap .req-detail-stat i,
    .lav-detail-wrap .lav-skill-pill, .lav-share-btn { transition: none; }
    .lav-detail-wrap .req-detail-stat:hover, .lav-detail-wrap .req-detail-stat:hover i,
    .lav-detail-wrap .lav-skill-pill:hover, .lav-share-btn:hover { transform: none; }
}

/* Layout a due colonne di lavoro.php (e delle pagine gemelle richieste.php/professionisti.php):
   filtri in verticale a sinistra, risultati a destra — invece della barra orizzontale in cima,
   preferita esplicitamente dall'utente a una barra di filtri sopra ai risultati. Sotto i 992px
   resta tutto a colonna singola, con i filtri dietro il pulsante che apre il drawer a tutto schermo. */
.search-layout { display: block; }
@media (min-width: 992px) {
    .search-layout { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }
    /* z-index esplicito (non solo position:sticky): le card annunci in .search-main hanno
       un'animazione di comparsa (.stagger-item) che le rende anch'esse un contesto di
       sovrapposizione a sé, a z-index:auto come la sidebar — venendo dopo nel DOM vincevano
       sempre loro, facendo apparire il menu categorie aperto SOTTO gli annunci a destra. */
    .search-sidebar { position: sticky; top: 88px; z-index: 2; }
    /* Da 992px in su Bootstrap resetta .offcanvas-lg .offcanvas-body a "display:flex" SENZA
       specificare flex-direction (quindi "row" di default): il titolo "Filtra i risultati" e il
       form finivano affiancati come due elementi in riga, ciascuno ristretto al proprio contenuto
       invece di impilarsi — da cui il titolo tutto andato a capo su una striscia larga ~60px
       (segnalato come "problema di UI"). Qui si forza la colonna, come era sempre stata l'intenzione. */
    .search-sidebar .offcanvas-body { flex-direction: column; width: 100%; }
    .search-sidebar-card { padding: 4px 4px 0; width: 100%; }
    .search-sidebar .req-filter-bar {
        flex-direction: column; align-items: stretch; gap: 10px;
        background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
        padding: 18px; box-shadow: 0 20px 45px -20px rgba(15,23,42,.12);
    }
    .search-sidebar .req-filter-field,
    .search-sidebar .req-filter-field.req-filter-prov { width: 100%; flex: none; height: auto; }
    .search-sidebar .req-filter-field:focus-within { flex-basis: auto; }
    .search-sidebar .req-filter-bar > .btn,
    .search-sidebar .req-filter-bar > a.btn { width: 100%; justify-content: center; margin: 0; }
    .search-sidebar .req-filter-bar > .btn[type="submit"] { order: 10; margin-top: 4px; }
    .search-sidebar .req-filter-bar > #btnVicinoAMeLavoro { order: 11; }
    .search-sidebar .req-filter-bar > a.btn { order: 12; }
}

/* lavoro-gestione.php: icona categoria colorata sulle card annuncio (stessa palette usata sul
   resto delle pagine "lavoro"), badge di stato colorati invece di semplici tag-pill grigie, e un
   lift discreto sulle card e sulle righe candidato — l'utente lo trovava "troppo basic". */
.lav-job-ico {
    width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}
.lav-gestione-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(15,23,42,.08); border-color: rgba(var(--p1-rgb),.18); }
/* Dropdown azioni annuncio in gestione */
.lav-gestione-card .dropdown-menu {
    border-radius: 14px; border: 1px solid var(--border); padding: 6px;
    box-shadow: 0 8px 28px rgba(15,23,42,.12); min-width: 200px;
}
.lav-gestione-card .dropdown-item {
    border-radius: 8px; padding: 8px 12px; font-size: .875rem;
    display: flex; align-items: center; gap: 10px; color: var(--ink);
    transition: background .12s;
}
.lav-gestione-card .dropdown-item:hover { background: var(--soft); color: var(--ink); }
.lav-gestione-card .dropdown-item .fa-fw {
    width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; font-size: .8rem;
    background: var(--soft); color: var(--muted);
}
.lav-gestione-card .dropdown-item:hover .fa-fw { background: rgba(var(--p1-rgb),.1); color: var(--p1); }
.lav-gestione-card .dropdown-item .fa-whatsapp.fa-fw { background: #dcfce7; color: #16a34a; }
.lav-gestione-card .dropdown-item.text-danger { color: #dc2626 !important; }
.lav-gestione-card .dropdown-item.text-danger .fa-fw { background: #fee2e2; color: #dc2626; }
.lav-gestione-card .dropdown-item.text-danger:hover { background: #fff1f2; }
.lav-gestione-card .dropdown-divider { margin: 4px 0; border-color: var(--border); }

.lav-gestione-card .js-lav-toggle-details .lav-toggle-icon { transition: transform .2s ease; }
.lav-gestione-card .js-lav-toggle-details.active .lav-toggle-icon { transform: rotate(180deg); }
.lav-cand-row { border-top: 1px solid var(--border); transition: background .15s; border-radius: 10px; }
.lav-cand-row:hover { background: var(--soft); }
.lav-stato-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
    font-size: .74rem; font-weight: 700;
}
.lav-stato-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.lav-stato-attiva { background: #dcfce7; color: #166534; }
.lav-stato-attiva .lav-stato-dot { background: #22c55e; }
.lav-stato-sospesa { background: #fef3c7; color: #92400e; }
.lav-stato-sospesa .lav-stato-dot { background: #f59e0b; }
.lav-stato-chiusa { background: #f1f5f9; color: #475569; }
.lav-stato-chiusa .lav-stato-dot { background: #94a3b8; }
.lav-cand-stato-ricevuta, .lav-cand-stato-visualizzata { background: #e0e7ff; color: #3730a3; }
.lav-cand-stato-ricevuta .lav-stato-dot, .lav-cand-stato-visualizzata .lav-stato-dot { background: #6366f1; }
.lav-cand-stato-contattato, .lav-cand-stato-colloquio { background: #dbeafe; color: #1e40af; }
.lav-cand-stato-contattato .lav-stato-dot, .lav-cand-stato-colloquio .lav-stato-dot { background: #3b82f6; }
.lav-cand-stato-accettata { background: #dcfce7; color: #166534; }
.lav-cand-stato-accettata .lav-stato-dot { background: #22c55e; }
.lav-cand-stato-rifiutata { background: #fee2e2; color: #991b1b; }
.lav-cand-stato-rifiutata .lav-stato-dot { background: #ef4444; }

/* Drawer filtri di lavoro.php: offcanvas Bootstrap "responsive" (.offcanvas-lg) — sotto lg si
   comporta da vero pannello a tutto schermo scorrevole, da lg in su torna una barra inline
   normale (reset automatico di Bootstrap stesso, nessun CSS aggiuntivo necessario a quel punto). */
@media (max-width: 991.98px) {
    .lav-filter-drawer { width: 100vw; max-width: 100vw; }
    .lav-filter-drawer .req-filter-bar { flex-direction: column; align-items: stretch; }
    .lav-filter-drawer .req-filter-field,
    .lav-filter-drawer .req-filter-field.req-filter-prov { flex-basis: auto; height: auto; }
}

/* Mobile: search sotto anziché affiancata */
@media (max-width: 640px) {
    .hero-search-inner { flex-direction: column; padding: 8px; gap: 4px; }
    .hero-search-field.field-city { border-inline-start: none; border-top: 1px solid var(--border); }
    .hero-search-btn { padding: 12px; margin-top: 4px; }
}

/* Mockup card */
.mock-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 20px 50px rgba(15,23,42,.10);
    padding: 18px; position: relative; z-index: 1; animation: floatY 6s ease-in-out infinite;
}
.mock-card > * { transition: opacity .25s ease; }
.mock-card.mock-fade > * { opacity: 0; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floatYSlow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.mock-urlbar { display: flex; align-items: center; gap: 8px; background: var(--soft); border-radius: 10px; padding: 8px 12px; font-size: .78rem; color: var(--muted); margin-bottom: 14px; }
.mock-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; }
.mock-row .mock-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--soft); display: flex; align-items: center; justify-content: center; color: var(--p1); font-size: 1.1rem; flex-shrink: 0; }
.mock-row .mock-check { color: var(--green); margin-inline-start: auto; }
.mock-float {
    position: absolute; z-index: 2; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px;
    box-shadow: 0 12px 30px rgba(15,23,42,.12); font-size: .8rem; display: flex; align-items: center; gap: 10px;
}
.mock-float-top { top: -18px; inset-inline-start: -18px; animation: floatYSlow 5s ease-in-out infinite, notifPop 4s ease-in-out infinite; animation-delay: .3s, 1s; }
.mock-float-bottom { bottom: -18px; inset-inline-end: -18px; animation: floatYSlow 7s ease-in-out infinite; animation-delay: .8s; }
@keyframes notifPop { 0%, 80%, 100% { box-shadow: 0 12px 30px rgba(15,23,42,.12); } 85% { box-shadow: 0 12px 30px rgba(15,23,42,.12), 0 0 0 6px rgba(34,197,94,.18); } }
.mock-float .fico { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }

/* ─── Stats ──────────────────────────────────────────────── */
.stat-block { padding: 20px 8px; }
.stat-num { font-weight: 800; font-size: 2.4rem; background: var(--grad-vivid); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.stat-label { color: var(--muted); font-size: .85rem; margin-top: 6px; }

/* ─── Categorie: icone eleganti con gradient background ─────────────── */
.cat-card {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 22px 12px; border: 1px solid var(--border); border-radius: 18px;
    color: var(--ink); background: var(--surface); transition: all .25s ease; height: 100%; text-align: center;
    position: relative; overflow: hidden;
}
.cat-card::before {
    content: ''; position: absolute; inset: 0; background: var(--grad-soft); opacity: 0; transition: opacity .25s;
}
.cat-card:hover { border-color: transparent; box-shadow: 0 14px 30px rgba(var(--p1-rgb),.15); transform: translateY(-4px); color: var(--p1); }
.cat-card:hover::before { opacity: 1; }
.cat-card > * { position: relative; z-index: 1; }
.cat-icon-wrap {
    width: 54px; height: 54px; border-radius: 16px; background: var(--grad);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(var(--p1-rgb),.25);
    transition: transform .3s ease;
}
.cat-icon-wrap i { color: #fff; font-size: 1.6rem; }
.cat-card:hover .cat-icon-wrap { transform: rotate(-6deg) scale(1.08); }
.cat-card span { font-size: .92rem; font-weight: 600; }
.reveal.in-view .cat-card { animation: catCardIn .5s ease backwards; }
.reveal.in-view .cat-card:nth-child(2) { animation-delay: .06s; }
.reveal.in-view .cat-card:nth-child(3) { animation-delay: .12s; }
.reveal.in-view .cat-card:nth-child(4) { animation-delay: .18s; }
.reveal.in-view .cat-card:nth-child(5) { animation-delay: .24s; }
.reveal.in-view .cat-card:nth-child(6) { animation-delay: .30s; }
@keyframes catCardIn { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }
.cat-card:hover .cat-icon-wrap i { animation: catIcoBounce .4s ease; }
@keyframes catIcoBounce { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .reveal.in-view .cat-card, .cat-card:hover .cat-icon-wrap i { animation: none !important; } }

/* ─── Card annunci/richieste ────────────────────────────── */
.req-card { border: 1px solid var(--border); border-radius: 16px; transition: all .2s; background: var(--surface); }
.req-card:hover { box-shadow: 0 12px 28px rgba(15,23,42,.08); border-color: rgba(var(--p1-rgb),.3); }
.req-card .req-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--soft); color: var(--p1); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
/* Badge di stato (Attivo/In attesa/Sospeso ecc.): padding verticale ridotto e orizzontale più ampio
   rispetto al default Bootstrap (che è quasi simmetrico) — più leggibili, meno "schiacciati". */
.badge { padding: 4px 12px; font-weight: 600; }

/* ─── Tooltip informativi ──────────────────────────────────────────────────
   Il sito non ha mai inizializzato i tooltip Bootstrap (nessun new bootstrap.Tooltip() da
   nessuna parte): gli attributi title="..." già presenti ovunque (icone (?), colonne tabella,
   pulsanti copia, ecc.) mostravano solo il tooltip di sistema del browser, non personalizzabile.
   Qui li ridisegniamo in puro CSS leggendo lo stesso attributo title con attr(title) — nessun JS
   da aggiungere, nessun markup da toccare in nessuna pagina. Compare quasi subito, mentre quello
   nativo del browser arriva dopo ~1s: si vedono entrambi per un istante, compromesso accettato per
   coprire tutto il sito senza riscrivere ogni singolo title in un data-attribute dedicato. */
[title] { position: relative; }
[title]:hover::after, [title]:focus-visible::after {
    content: attr(title);
    position: absolute; bottom: calc(100% + 9px); inset-inline-start: 50%; transform: translate(-50%, 0);
    background: rgba(15,23,42,.95); color: #fff; padding: 6px 11px; border-radius: 8px;
    font-size: .74rem; font-weight: 500; line-height: 1.35; text-align: center;
    white-space: normal; width: max-content; max-width: 240px;
    z-index: 3000; box-shadow: 0 10px 24px rgba(15,23,42,.22);
    pointer-events: none; animation: tooltipIn .15s ease;
}
[title]:hover::before, [title]:focus-visible::before {
    content: ''; position: absolute; bottom: calc(100% + 4px); inset-inline-start: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: rgba(15,23,42,.95);
    z-index: 3000; pointer-events: none; animation: tooltipIn .15s ease;
}
@keyframes tooltipIn { from { opacity: 0; transform: translate(-50%, 3px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* Il pulsante "..." sta proprio in cima a .notif-menu, che clippa con overflow-y:auto: il tooltip
   sopra (comportamento di default) non aveva spazio per esistere all'interno dell'area scrollabile
   e veniva tagliato via, quasi invisibile (segnalato: "non si vede la scritta che esce su hover").
   Qui lo si fa comparire sotto invece che sopra, dove nel menu c'è sempre spazio libero. */
.notif-menu-more[title]:hover::after, .notif-menu-more[title]:focus-visible::after {
    bottom: auto; top: calc(100% + 9px);
}
.notif-menu-more[title]:hover::before, .notif-menu-more[title]:focus-visible::before {
    bottom: auto; top: calc(100% + 4px);
    border-top-color: transparent; border-bottom-color: rgba(15,23,42,.95);
}
@media (prefers-reduced-motion: reduce) {
    [title]:hover::after, [title]:focus-visible::after, [title]:hover::before, [title]:focus-visible::before { animation: none; }
}
.badge-urgenza { font-size: .72rem; border-radius: 999px; }

/* ─── Dettaglio richiesta (richiesta.php) ─────────────────── */
.req-detail-back { color: var(--muted); font-size: .86rem; font-weight: 600; text-decoration: none; }
.req-detail-back:hover { color: var(--p1); }
.req-detail-hero {
    display: flex; align-items: flex-start; gap: 18px; background: var(--grad-soft);
    border-radius: 22px; padding: 24px; margin-top: 10px;
}
.req-detail-icon {
    width: 56px; height: 56px; border-radius: 16px; background: var(--grad); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(var(--p1-rgb),.3);
}
.req-detail-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font-size: .86rem; margin-top: 6px; }
.req-detail-meta i { color: var(--p1); margin-inline-end: 4px; }
.req-detail-stat {
    display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px;
    border: 1px solid var(--border); border-radius: 16px; background: var(--surface); transition: all .2s;
}
.req-detail-stat:hover { border-color: rgba(var(--p1-rgb),.3); box-shadow: 0 8px 20px rgba(15,23,42,.06); }
.req-detail-stat i { font-size: 1.3rem; color: var(--p1); }
.req-detail-stat strong { display: block; font-size: 1.05rem; }
.req-detail-stat span { color: var(--muted); font-size: .76rem; }
.req-detail-card { border: 1px solid var(--border); border-radius: 18px; padding: 26px; background: var(--surface); overflow: hidden; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
@media (max-width: 767px) { .req-detail-card { padding: 18px; } }
/* Lift discreto sulle card informative del profilo pubblico (bio, fiducia, portfolio, recensioni):
   scoperto solo qui (.pro-profile-wrap), non sulle card-form di richiesta.php dove un movimento
   verticale mentre si scrive risulterebbe fastidioso invece che piacevole. */
.pro-profile-wrap .req-detail-card:hover {
    transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15,23,42,.08); border-color: rgba(var(--p1-rgb),.18);
}
@media (prefers-reduced-motion: reduce) { .pro-profile-wrap .req-detail-card:hover { transform: none; } }
.req-detail-foto {
    width: 100%; max-width: 420px; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 14px; box-shadow: 0 8px 24px rgba(15,23,42,.1); transition: transform .2s;
}
.req-detail-foto:hover { transform: scale(1.02); }
/* Descrizione del lavoro: è il testo più importante da leggere in tutta la pagina (il professionista
   decide se rispondere in base a questo), quindi font leggermente più grande e interlinea più larga
   della prosa "normale" del sito. */
.req-detail-card .req-detail-desc { font-size: 1rem; line-height: 1.7; color: var(--ink); }

/* Card "Invia il tuo preventivo": è l'azione principale della pagina per un professionista,
   merita un bordo evidenziato invece di essere uguale a tutte le altre card informative. */
.req-detail-card-cta { border-color: rgba(var(--p1-rgb),.25) !important; box-shadow: 0 4px 20px rgba(var(--p1-rgb),.08); }
.req-detail-form-label { display: flex; align-items: center; gap: 6px; }
.req-detail-form-label i { color: var(--p1); }
.req-detail-card textarea.form-control { line-height: 1.6; }

/* ─── Elenco richieste (richieste.php) ────────────────────── */
.req-list-hero {
    background: linear-gradient(120deg, rgba(var(--p1-rgb),.08), rgba(var(--p2-rgb),.08));
    border-radius: 18px; padding: 24px 32px;
}
/* Sfondo più soffuso (tinta trasparente invece del bianco pieno di .hero-badge di default): il
   badge "N annunci attivi" deve leggersi come un'etichetta leggera accanto al titolo, non come una
   card a sé con lo stesso peso visivo del testo bold che contiene. */
.req-list-hero .hero-badge { margin: 0; background: rgba(var(--p1-rgb),.08); border-color: rgba(var(--p1-rgb),.14); }
.req-list-hero p { line-height: 1.6; }
/* Barra filtri: campi come card separate (bordo + ombra propria) invece di un'unica pillola
   monolitica con tutto incollato dentro — ogni filtro si legge come un elemento a sé, non come un
   segmento di una barra indistinta. Il contenitore stesso non ha più sfondo/bordo/padding propri. */
.req-filter-bar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch;
    background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none;
}
/* Divisorio fra l'area filtri (barra + switch griglia/lista) e la griglia risultati sottostante:
   una riga sottile a fine sezione invece di affidarsi solo allo spazio bianco. */
.req-view-toggle { margin-bottom: 4px; }
div:has(> .req-view-toggle) { border-bottom: 1px solid var(--border); padding-bottom: 16px; }
/* Redesign: campi filtro piatti dentro l'unico pannello (sfondo tenue + bordo sottile) invece di
   card bianche separate con ombra propria che "galleggiano" — look più pulito e ordinato. */
.req-filter-field {
    display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 11px;
    background: var(--soft); border: 1px solid var(--border); flex: 1 1 200px; min-width: 160px; min-height: 48px; box-sizing: border-box;
    box-shadow: none;
    transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease, flex-basis .25s ease;
}
.req-filter-field:hover { border-color: rgba(var(--p1-rgb),.35); }
/* Il transform di :hover crea un nuovo contesto di stacking sul campo: lo z-index:40 del menu
   aperto (.cs-menu) resta intrappolato dentro quel contesto e i campi successivi nel DOM
   (elementi statici, senza posizionamento proprio) ci passano sopra invece di restarci sotto —
   il menu appariva "intrecciato" con i campi seguenti invece che sopra di essi. Serve alzare lo
   z-index sul .req-filter-field stesso quando il suo select è aperto, non solo sul menu interno. */
.req-filter-field:has(.cs-wrap.open) { position: relative; z-index: 50; }
/* Stesso identico problema del select aperto sopra, ma per il box suggerimenti città
   (.hero-search-suggest, z-index:20): senza un contesto di sovrapposizione proprio sul campo,
   i campi successivi nella sidebar (che hanno anch'essi un loro contesto per via dell'animazione
   .stagger-item) gli passavano sopra — segnalato come "è tutto sovrapposto" durante la ricerca
   città su richieste.php/professionisti.php. */
.req-filter-field:has(.hero-search-suggest.open) { position: relative; z-index: 50; }
/* Effetto espansione al click: flex-basis (non width, per restare coerente col layout flessibile
   della barra) cresce quando l'utente interagisce col campo, poi torna alla misura normale
   togliendo il focus. */
.req-filter-field:focus-within { flex-basis: 260px; }
/* Blocco fisso 18x18: senza dimensioni esplicite ogni glifo FontAwesome (valigetta piena, casa a
   tratto sottile, istogramma geometrico, ecc.) occupa un peso visivo diverso pur allo stesso
   font-size, risultando disomogenei fra loro nella colonna filtri. */
.req-filter-field i { color: var(--p1); display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 18px; flex-shrink: 0; }
.req-filter-field select, .req-filter-field input { background: transparent; padding: 10px 0; box-shadow: none !important; color: #1a1a1a; font-weight: 600; }
.req-filter-field input::placeholder { font-weight: 500; color: var(--muted); opacity: .8; }
/* Focus: niente bordo netto (rimosso, vedi sopra) — il feedback è un leggero cambio di sfondo +
   ombra più marcata su tutta la card del campo, non solo sull'input nativo, così tutto il campo
   "Città"/"categoria" reagisce, non solo il cursore. */
.req-filter-field:focus-within { background: var(--surface); border-color: var(--p1); box-shadow: 0 0 0 3px rgba(var(--p1-rgb),.12); }
.req-filter-field.req-filter-prov { flex: 0 1 200px; position: relative; }
/* Icona "vicino a me" spostata dentro il campo Città (centrata verticalmente) invece che come
   bottone esterno separato sotto il form: meno spazio occupato, ed è subito accanto al testo che
   completa. padding-inline-end sull'input riserva lo spazio così il testo digitato non ci finisce sotto. */
.req-filter-field.req-filter-prov input { padding-inline-end: 32px; }
.req-filter-locate-btn {
    position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--muted); border-radius: 50%; cursor: pointer;
    transition: background .2s ease, color .2s ease; flex-shrink: 0;
}
.req-filter-locate-btn:hover { background: var(--grad-soft); color: var(--p1); }
.req-filter-locate-btn.active { background: var(--grad); color: #fff; }
.req-filter-locate-btn:disabled { cursor: wait; opacity: .7; }
/* Niente espansione al focus: in orizzontale (richieste.php) faceva "saltare" la barra allargando
   il campo; nella sidebar verticale (lavoro.php, flex-direction:column) flex-basis diventava ALTEZZA,
   gonfiando il campo Città a un box alto ~260px al click. Il campo ora resta stabile — solo l'anello
   di focus di .req-filter-field:focus-within, più pulito e professionale. */
/* I bottoni dentro la filter-bar si allungano in verticale quanto i campi (align-items: stretch
   sul contenitore): senza abbastanza padding orizzontale il border-radius:999px li fa sembrare
   un "blob" tondo invece di una normale pillola — qui garantiamo una larghezza minima coerente.
   min-height uguale a .req-filter-field: altezza identica garantita a prescindere dal padding
   interno di default di Bootstrap su bottoni/select/input, che può differire leggermente. */
.req-filter-bar .btn {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    padding-inline-start: 30px; padding-inline-end: 30px; white-space: nowrap; min-height: 48px; box-sizing: border-box;
    transition: opacity .15s ease, filter .15s ease, box-shadow .2s ease, transform .2s ease;
}
.req-filter-bar button.btn-accent[type="submit"]:hover { opacity: .92; }
/* Solo l'icona si ingrandisce leggermente alla pressione, non tutto il bottone (che ha già il suo
   scale(.97) generico da .btn:active) — un doppio livello di feedback invece di uno solo. */
.req-filter-bar button.btn-accent[type="submit"] i { display: inline-block; margin-inline-end: 10px; transition: transform .12s ease; }
.req-filter-bar button.btn-accent[type="submit"]:active i { transform: scale(1.05); }
/* "Vicino a me": funzione premium (richiede la posizione del browser), deve risaltare dagli altri
   bottoni della barra anche quando non è attiva — bordo color brand invece del grigio generico di
   .btn-outline-accent, così si nota subito come qualcosa di diverso da un filtro qualunque. */
#btnVicinoAMe.btn-outline-accent { border-color: rgba(var(--p1-rgb),.45); color: var(--p1); }
#btnVicinoAMe.btn-outline-accent:hover { border-color: var(--p1); background: var(--grad-soft); }
/* L'icona del pin diventa l'elemento visivo dominante del bottone "Vicino a me", non solo un
   segnaposto accanto al testo. */
#btnVicinoAMe i, #btnProVicinoAMe i { font-size: 1.3em; margin-inline-end: 8px; }

.req-filter-field.req-filter-check { flex: 0 1 auto; cursor: pointer; gap: 6px; padding: 0 14px; }
.req-filter-field.req-filter-check span { font-size: .86rem; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.req-filter-field.req-filter-check span i { color: var(--p1); }
.req-filter-field.req-filter-check input { flex-shrink: 0; width: 1.1em; height: 1.1em; }

/* ─── Card professionista (professionisti.php) ────────────── */
.pro-card {
    border: 1px solid var(--border); border-radius: 18px; padding: 20px; background: var(--surface);
    color: var(--ink); transition: all .25s ease; height: 100%; overflow: hidden;
}
.pro-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(var(--p1-rgb),.14); border-color: transparent; color: var(--ink); }
.pro-card-avatar {
    width: 48px; height: 48px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; font-size: 1.05rem;
    box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(var(--p1-rgb),.25);
}
.pro-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pro-card-name { font-weight: 700; font-size: 1rem; }
.pro-card-cta {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 14px;
    border-radius: 999px; background: var(--soft, #f3f4f6); color: var(--p1); font-weight: 700; font-size: .82rem;
    transition: background .2s;
}
.pro-card:hover .pro-card-cta { background: var(--p1); color: #fff; }
.reveal.in-view .pro-card { animation: proCardIn .5s ease backwards; }
.reveal.in-view .pro-card:nth-child(2) { animation-delay: .08s; }
.reveal.in-view .pro-card:nth-child(3) { animation-delay: .16s; }
.reveal.in-view .pro-card:nth-child(4) { animation-delay: .24s; }
@keyframes proCardIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.pro-card:hover .pro-card-avatar { transform: scale(1.08); }
.pro-card-avatar { transition: transform .25s ease; }
@media (prefers-reduced-motion: reduce) { .reveal.in-view .pro-card { animation: none !important; } .pro-card:hover .pro-card-avatar { transform: none; } }

/* Card Premium (dashboard professionista, piano Free): sostituisce il vecchio dash-empty generico
   con un'icona vuota senza senso — qui è un vero invito con benefici elencati, non uno stato "vuoto".
   Compare/scompare col cambio di tab (display toggle via JS, non scroll): l'animazione di ingresso
   riparte da sola ogni volta che ridiventa visibile, senza bisogno di un IntersectionObserver. */
.premium-teaser-card {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, rgba(var(--p1-rgb),.08), #fff 55%);
    border: 1px solid rgba(var(--p1-rgb),.2); border-radius: 20px; padding: 32px;
    box-shadow: 0 20px 45px -20px rgba(var(--p1-rgb),.35);
    animation: premiumCardIn .5s ease backwards;
}
.premium-teaser-card::before {
    content: ''; position: absolute; top: -70px; inset-inline-end: -70px; width: 220px; height: 220px;
    border-radius: 50%; background: radial-gradient(circle, rgba(var(--p1-rgb),.16), transparent 70%);
    pointer-events: none;
}
.premium-teaser-usage {
    display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted);
    background: rgba(var(--p1-rgb),.08); border-radius: 999px; padding: 5px 12px; margin-bottom: 18px;
}
.premium-teaser-top { position: relative; display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.premium-teaser-icon {
    width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    background: var(--grad); color: #fff; font-size: 1.4rem; flex-shrink: 0;
    box-shadow: 0 10px 24px -6px rgba(var(--p1-rgb),.5), 0 0 0 0 rgba(var(--p1-rgb),.35);
    animation: premiumIconPulse 2.4s ease-in-out infinite;
}
@keyframes premiumIconPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--p1-rgb),.35); }
    50% { box-shadow: 0 0 0 10px rgba(var(--p1-rgb),0); }
}

/* ─── Stato abbonamento Premium (dashboard) ──────────────────────────── */
.premium-status-card {
    border: 1px solid var(--border); border-radius: 16px; padding: 20px;
    background: linear-gradient(180deg, rgba(var(--p1-rgb),.04), #fff 90px);
}
.premium-status-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.premium-status-badge-ico {
    width: 44px; height: 44px; border-radius: 12px; background: var(--grad); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0;
}
.premium-status-quota, .premium-status-sub-row { border-top: 1px solid var(--border); }
.premium-status-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.premium-teaser-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; position: relative; }
.premium-teaser-list li {
    display: flex; align-items: center; gap: 12px; font-size: .92rem; font-weight: 500; color: var(--ink);
    animation: premiumLiIn .4s ease backwards;
}
.premium-teaser-list li:nth-child(1) { animation-delay: .08s; }
.premium-teaser-list li:nth-child(2) { animation-delay: .14s; }
.premium-teaser-list li:nth-child(3) { animation-delay: .20s; }
.premium-teaser-list li:nth-child(4) { animation-delay: .26s; }
.premium-teaser-list li:nth-child(5) { animation-delay: .32s; }
.premium-teaser-check {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--grad); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: .68rem;
    box-shadow: 0 4px 10px -3px rgba(var(--p1-rgb),.5);
}
.premium-teaser-footer {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    padding-top: 20px; border-top: 1px solid rgba(var(--p1-rgb),.15);
}
.premium-teaser-card .btn-upgrade-pro { padding: 12px 24px; font-size: .95rem; transition: transform .2s ease, box-shadow .2s ease; }
.premium-teaser-card .btn-upgrade-pro:hover { transform: translateY(-2px) scale(1.02); }
.premium-teaser-price { font-size: .85rem; font-weight: 700; color: var(--p1); display: flex; align-items: center; gap: 6px; }
@keyframes premiumCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes premiumLiIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .premium-teaser-card, .premium-teaser-list li, .premium-teaser-icon { animation: none !important; }
}
@media (max-width: 520px) {
    .premium-teaser-card { padding: 22px; }
    .premium-teaser-top { gap: 12px; }
    .premium-teaser-icon { width: 46px; height: 46px; font-size: 1.15rem; }
    .premium-teaser-footer { flex-direction: column; align-items: stretch; }
    .premium-teaser-card .btn-upgrade-pro { width: 100%; justify-content: center; }
}

/* Sezione "Profilo pubblico" dashboard professionista */
.pubblico-mini-onboard { background: var(--soft, #f8f9ff); border-radius: 14px; padding: 14px 16px; border: 1px solid var(--border); }
.checklist-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    font-size: .78rem; font-weight: 600; background: #f1f5f9; color: var(--muted); border: 1px solid var(--border);
    transition: all .2s;
}
.checklist-pill:not(.is-done):hover { border-color: rgba(var(--p1-rgb),.3); color: var(--p1); }
.checklist-pill.is-done { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.disponibilita-dot { font-size: .78rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.disponibilita-dot.dot-verde { background: #f0fdf4; color: #16a34a; }
.disponibilita-dot.dot-giallo { background: #fffbeb; color: #b45309; }

/* ─── Badge "Verificato" stile Meta/Twitter: blu fisso, sempre uguale ──────
   Non usa var(--p1): quel colore cambia da pagina a pagina (blu solo su home/come-funziona/
   chi-siamo, grigio altrove) mentre "verificato" deve restare un segnale di fiducia riconoscibile
   ovunque, sempre nello stesso blu. */
.badge-verificato-ico { color: #1d9bf0 !important; filter: drop-shadow(0 1px 2px rgba(29,155,240,.35)); }
.badge-verificato-pill {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #1d9bf0 0%, #0c7ac9 100%); color: #fff;
    font-weight: 700; font-size: .82rem; padding: 5px 12px; border-radius: 999px;
    box-shadow: 0 3px 10px rgba(29,155,240,.35), inset 0 1px 0 rgba(255,255,255,.25);
    animation: badgePopIn .4s cubic-bezier(.34,1.56,.64,1) backwards;
}
/* Riflesso che attraversa il badge ogni tanto: dà un tocco "premium/lucido" senza essere invadente. */
.badge-verificato-pill::after {
    content: ''; position: absolute; top: 0; inset-inline-start: -120%; width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-18deg); animation: badgeShine 4.5s ease-in-out 1.2s infinite;
}
.badge-verificato-pill i { position: relative; z-index: 1; }
@keyframes badgePopIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes badgeShine { 0% { inset-inline-start: -120%; } 22%, 100% { inset-inline-start: 130%; } }
@media (prefers-reduced-motion: reduce) {
    .badge-verificato-pill { animation: none; }
    .badge-verificato-pill::after { display: none; }
}
/* Badge "Identità verificata": colore diverso dal "Verificato" generico, sono due segnali distinti. */
.badge-identita-pill { background: #16a34a; }

/* Badge "Predefinito" del CV (includes/cv_panel.php): prima era solo testo verde con una stellina,
   poco distinguibile dal resto — ora un badge pieno in blu/grigio scuro istituzionale (stesso
   linguaggio visivo dei badge "Pro"/"Business" già in uso altrove) per dargli priorità visiva reale
   rispetto alle azioni testuali accanto (rinomina, elimina, visualizza). */
.cv-badge-predefinito {
    display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg,#1e3a5f,#0f2942);
    color: #fff; font-weight: 700; font-size: .76rem; padding: 5px 12px; border-radius: 999px;
    box-shadow: 0 2px 8px rgba(15,41,66,.35); flex-shrink: 0;
}
.cv-badge-predefinito i { font-size: .72rem; }

/* Contatore caratteri della presentazione CV: sovrapposto nell'angolo in basso a destra della
   textarea (come Twitter/X) invece di una riga a parte sotto, per restare vicino al testo che sta
   contando mentre si scrive. padding-bottom sulla textarea evita che l'ultima riga di testo ci finisca sotto. */
.cv-textarea-counter-wrap { position: relative; }
.cv-textarea-counter-wrap textarea { padding-bottom: 26px; }
.cv-textarea-counter {
    position: absolute; right: 10px; bottom: 8px; font-size: .72rem; color: var(--muted);
    background: var(--surface); padding: 1px 6px; border-radius: 6px; pointer-events: none; line-height: 1.4;
}
.cv-textarea-counter.cv-textarea-counter-warn { color: #dc2626; font-weight: 700; }

/* ─── Shimmer sul badge Premium (Pro/Business) ────────────────────────────
   Una striscia diagonale bianca semi-trasparente attraversa il badge ogni 3s, poi resta ferma
   per il resto del ciclo (60%→100% della keyframe "congela" la posizione finale) invece di
   scorrere di continuo: un guizzo elegante, non un effetto invadente sempre in movimento. */
.badge-premium-shimmer { position: relative; overflow: hidden; }
.badge-premium-shimmer::after {
    content: ''; position: absolute; top: 0; inset-inline-start: -150%; width: 60%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg); animation: badgePremiumShimmer 3s ease-in-out infinite;
}
@keyframes badgePremiumShimmer {
    0%   { inset-inline-start: -150%; }
    60%  { inset-inline-start: 150%; }
    100% { inset-inline-start: 150%; }
}
@media (prefers-reduced-motion: reduce) { .badge-premium-shimmer::after { animation: none; } }

/* Cuore preferiti sulla card (sibling dell'anchor, non annidato dentro — evita bottone dentro link) */
.pro-card-fav-btn {
    position: absolute; top: 28px; inset-inline-end: 28px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.9); color: var(--muted); font-size: 1rem; backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(15,23,42,.1); transition: all .15s;
}
.pro-card-fav-btn:hover { transform: scale(1.1); color: #e11d48; }
.pro-card-fav-btn.is-preferito { color: #e11d48; }
.pro-card-fav-btn.is-preferito i { animation: heartPop .3s ease; }

/* ─── Recensioni sul profilo pubblico del professionista ───── */
.pro-review-row { padding: 14px 0; border-bottom: 1px solid var(--border); }
.pro-review-row:last-child { border-bottom: none; padding-bottom: 0; }
.pro-review-row:first-child { padding-top: 0; }
.pro-review-stars i { color: #f59e0b; font-size: .82rem; }
/* Pillola discreta, non un link nudo: si vede che è un bottone cliccabile ma non compete
   visivamente col contenuto della recensione. */
.btn-review-segnala {
    border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .74rem;
    font-weight: 600; padding: 4px 10px; border-radius: 999px; margin-top: 10px;
    display: inline-flex; align-items: center; gap: 5px; transition: all .15s;
}
.btn-review-segnala:hover { color: #dc2626; border-color: #fecaca; background: #fef2f2; }

/* ─── Selettore stelle cliccabile (form recensione, richiesta.php) ──── */
.rev-star-picker { display: flex; gap: 4px; }
.rev-star-picker i { font-size: 1.6rem; color: #f59e0b; cursor: pointer; transition: transform .1s; }
.rev-star-picker i:hover { transform: scale(1.15); }
.rev-star-picker-sm i { font-size: 1.2rem; }

/* ─── Profilo pubblico professionista: indicatori di fiducia + breakdown voti ── */
.pro-card-avatar-wrap { position: relative; flex-shrink: 0; }
.pro-trust-stat {
    display: flex; align-items: center; gap: 10px; height: 100%; min-height: 60px; padding: 12px 10px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: all .2s;
    box-shadow: 0 30px 60px -20px rgba(15,23,42,.1);
}
.pro-trust-stat:hover { border-color: rgba(var(--p1-rgb),.3); box-shadow: 0 40px 80px -20px rgba(15,23,42,.16); transform: translateY(-3px); }
.pro-trust-stat:has(.stat-blue):hover { border-color: rgba(37,99,235,.2); }
.pro-trust-stat:has(.stat-amber):hover { border-color: rgba(217,119,6,.2); }
.pro-trust-stat:has(.stat-green):hover { border-color: rgba(22,163,74,.2); }
.pro-trust-stat:has(.stat-slate):hover { border-color: rgba(71,85,105,.2); }
/* Icona in badge circolare colorato invece di un glifo nudo fluttuante accanto al testo: coerente
   con il resto del sito (cat-icon-wrap, notif-ico, ecc.) — richiesto: "migliora UI" sulla pagina
   pubblica del professionista, una delle più importanti per le conversioni. */
.pro-trust-stat > i {
    font-size: 1rem; color: var(--p1); flex-shrink: 0; width: 38px; height: 38px; text-align: center;
    display: flex; align-items: center; justify-content: center; border-radius: 11px;
    background: rgba(var(--p1-rgb),.1);
}
.pro-trust-stat .stat-ico i { font-size: 1rem; }
.pro-trust-stat strong { display: block; font-size: .92rem; line-height: 1.2; font-weight: 800; }
.pro-trust-stat > div > span { color: var(--muted); font-size: .72rem; line-height: 1.3; }
@media (max-width: 575.98px) {
    .col-4 > .pro-trust-stat { flex-direction: column; text-align: center; padding: 10px 6px; gap: 4px; }
    .col-4 > .pro-trust-stat > i { width: 30px; height: 30px; font-size: .85rem; border-radius: 9px; }
    .col-4 > .pro-trust-stat strong { font-size: .82rem; }
    .col-4 > .pro-trust-stat > div > span { font-size: .68rem; }
}

/* Icona a badge colorato (contrasto tinta/icona): usare .stat-ico dentro .pro-trust-stat/.dash-kpi
   al posto dell'<i> nudo per le metriche principali della dashboard professionista. Colore/tinta
   impostati via classi modificatrici (.stat-blue/.stat-green/.stat-amber/.stat-slate). */
.stat-ico {
    width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; flex-shrink: 0; background: rgba(var(--p1-rgb),.12); color: var(--p1);
}
.dash-kpi .stat-ico { width: 46px; height: 46px; border-radius: 13px; font-size: 1.25rem; margin-bottom: 14px; }
.stat-blue  { background: rgba(37,99,235,.12); color: #2563eb; }
.stat-green { background: rgba(22,163,74,.12); color: #16a34a; }
.stat-amber { background: rgba(217,119,6,.12); color: #d97706; }
.stat-slate { background: rgba(71,85,105,.12); color: #475569; }

/* ─── Checklist "verifiche" sul profilo pubblico (card "Livello in crescita/Profilo affidabile"):
   icona colorata a bolla + badge di spunta verde in overlay sull'angolo, invece di icona nuda +
   segno di spunta separato a fine riga — coerente col trattamento "badge in overlay" già usato per
   la corona Premium sull'avatar. Ogni voce entra con un piccolo pop-in scaglionato. ── */
.verifica-chip {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
    transition: background .2s, transform .2s; opacity: 0; animation: verificaChipIn .4s cubic-bezier(.34,1.56,.64,1) forwards;
}
.verifica-chip:hover { background: var(--soft); transform: translateY(-2px); }
.verifica-chip-ico {
    position: relative; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.verifica-chip-check {
    position: absolute; bottom: -3px; inset-inline-end: -3px; width: 14px; height: 14px; border-radius: 50%;
    background: #16a34a; color: #fff; font-size: .48rem; display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--surface);
}
.verifica-chip:nth-child(1) { animation-delay: .05s; }
.verifica-chip:nth-child(2) { animation-delay: .1s; }
.verifica-chip:nth-child(3) { animation-delay: .15s; }
.verifica-chip:nth-child(4) { animation-delay: .2s; }
.verifica-chip:nth-child(5) { animation-delay: .25s; }
.verifica-chip:nth-child(6) { animation-delay: .3s; }
@keyframes verificaChipIn { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .verifica-chip { animation: none; opacity: 1; } }

/* Anello che pulsa attorno all'icona di testa della card "Livello in crescita": un piccolo segno
   di vita, non solo un'icona ferma — riusa lo stesso schema di onlineDotPulse (box-shadow che si
   espande e svanisce) applicato qui a tutto il cerchio invece che a un puntino. */
.pro-trust-badge-ico-wrap { animation: trustBadgePulse 2.5s ease-in-out infinite; }
@keyframes trustBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--p1-rgb),.18); }
    50%      { box-shadow: 0 0 0 8px rgba(var(--p1-rgb),0); }
}
@media (prefers-reduced-motion: reduce) { .pro-trust-badge-ico-wrap { animation: none; } }

.pro-rating-bars { display: flex; flex-direction: column; gap: 10px; }
.pro-rating-bar-row { display: flex; align-items: center; gap: 10px; }
.pro-rating-bar-label { flex: 0 0 170px; font-size: .82rem; color: var(--muted); }
.pro-rating-bar-track { flex: 1; height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.pro-rating-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--grad); }
.pro-rating-bar-val { flex: 0 0 30px; text-align: end; font-size: .82rem; font-weight: 700; color: var(--ink); }
@media (max-width: 480px) { .pro-rating-bar-label { flex-basis: 110px; font-size: .76rem; } }

/* ─── Elenco categorie (categorie.php) ─────────────────────── */
.cat-list-hero { background: var(--grad-soft); border-radius: 22px; padding: 32px 24px; }

/* ─── Mappa "Richieste vicino a te" (home, dati reali via Leaflet) ── */
.home-map {
    height: 360px; border-radius: 22px; overflow: hidden; border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(15,23,42,.05); position: relative; background: var(--soft);
}
.home-map-empty {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; color: var(--muted); font-size: .92rem; text-align: center; padding: 20px;
}
.home-map-empty i { font-size: 2rem; color: var(--p1); opacity: .6; }

/* ─── Skeleton shimmer generico (riusabile ovunque serva un placeholder di caricamento) ── */
.skeleton {
    position: relative; overflow: hidden; background: var(--soft);
}
.skeleton::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    animation: skeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes skeletonShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

.home-map-loading { position: absolute; inset: 0; display: flex; flex-direction: column; }
.home-map-loading .skeleton-marker {
    position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--border); opacity: .7;
}
.home-map-loading .skeleton-marker::after { border-radius: 50%; }
.home-map-marker {
    width: 36px; height: 36px; border-radius: 50% 50% 50% 0; background: var(--grad);
    transform: rotate(-45deg); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px rgba(var(--p1-rgb),.4); border: 2px solid #fff;
}
.home-map-marker i { transform: rotate(45deg); color: #fff; font-size: 1rem; }
.home-map-popup { font-size: .86rem; min-width: 180px; }
.home-map-popup strong { display: block; margin-bottom: 3px; }
.home-map-popup .cat { color: var(--p1); font-weight: 600; font-size: .78rem; }
.home-map-popup a { color: var(--p1); font-weight: 700; font-size: .8rem; }

/* ─── Sezioni a contrasto alternato (bianco / grigio soft) ── */
.section-soft { background: var(--soft); border-radius: 28px; padding: 44px 36px; }
@media (max-width: 576px) { .section-soft { padding: 28px 18px; border-radius: 22px; } }

/* Variante "card" di .section-soft: sfondo bianco con bordo/ombra invece del grigio piatto —
   per una sezione che deve "staccarsi" dal fondo pagina come un blocco a sé (richiesto per le
   Domande frequenti), non fondersi con lo sfondo come le altre sezioni a contrasto alternato. */
.section-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 28px; padding: 44px 36px;
    box-shadow: 0 30px 70px -20px rgba(15,23,42,.1);
}
@media (max-width: 576px) { .section-card { padding: 28px 18px; border-radius: 22px; } }
/* .cat-card è bianco con un bordo sottile: su .section-soft (grigio) risaltava da solo, dentro
   .section-card (ora bianca anche lei) diventerebbe bianco su bianco. Scoperto solo qui, non tocca
   .cat-card altrove (es. categorie.php, dove il contenitore non è .section-card). */
.section-card .cat-card { background: var(--soft); }

/* Home mobile: troppe sezioni una sotto l'altra rendono lo scroll interminabile (segnalato).
   Nascondiamo su mobile solo i blocchi più ridondanti rispetto a quanto già visto in hero/come
   funziona/categorie (mappa richieste poco leggibile su schermo piccolo, banner USP e "come
   scegliamo i professionisti" che ripetono in gran parte gli stessi trust-signal) — restano
   invariati su desktop, dove hanno senso come contenuto di marketing/SEO. */
@media (max-width: 767px) {
    .home-map-section, .usp-banner, .home-trust-section { display: none; }
}

/* ─── Card "Ultimi annunci" in home ────────────────────────── */
.annuncio-card {
    border: 1px solid var(--border); border-radius: 20px; background: var(--surface); overflow: hidden;
    transition: all .25s ease; position: relative;
}
.annuncio-card-top { height: 5px; background: var(--grad); }
.annuncio-card:hover { transform: translateY(-5px); box-shadow: 0 20px 42px rgba(var(--p1-rgb),.16); border-color: transparent; }
.annuncio-ico {
    width: 50px; height: 50px; border-radius: 14px; background: var(--grad-soft); color: var(--p1);
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0;
    transition: transform .25s ease;
}
.annuncio-card:hover .annuncio-ico { transform: rotate(-6deg) scale(1.08); }
.annuncio-card .annuncio-title { font-size: 1.08rem; font-weight: 700; letter-spacing: -.2px; }
.annuncio-card .tag-pill { font-size: .76rem; padding: 5px 12px; }
.annuncio-view-btn {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; font-size: .86rem;
    color: var(--p1); transition: gap .2s;
}
.annuncio-card:hover .annuncio-view-btn { gap: 10px; }

/* ─── Home carousel ─── */
.home-carousel { position: relative; overflow: hidden; }
.home-carousel-track {
    display: flex; gap: 24px; overflow-x: auto; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none; padding: 4px 4px 12px;
}
.home-carousel-track::-webkit-scrollbar { display: none; }
.home-carousel-card { min-width: 300px; max-width: 380px; flex: 0 0 calc(33.333% - 18px); }
@media (max-width: 991px) { .home-carousel-card { flex: 0 0 calc(50% - 10px); min-width: 280px; } }
@media (max-width: 575px) { .home-carousel-card { flex: 0 0 85%; min-width: 260px; } }
.carousel-arrow {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer; transition: all .2s; font-size: .85rem;
}
.carousel-arrow:hover { background: var(--p1); color: #fff; border-color: var(--p1); }
.carousel-arrow:disabled { opacity: .3; pointer-events: none; }

/* ─── Categorie: card informative con contatori reali ────────── */
.cat-card .cat-stats { display: flex; flex-direction: column; gap: 1px; margin-top: -4px; }
.cat-card .cat-stats small { color: var(--muted); font-size: .72rem; }
.cat-card .cat-stats small strong { color: var(--p1); font-weight: 700; }

/* ─── Categorie: card popolari + macro-aree ─── */
.cat-card-pop { background: var(--grad-soft); border-color: rgba(var(--p1-rgb),.15); }
.cat-icon-pop { width: 64px; height: 64px; border-radius: 18px; }
.cat-icon-pop i { font-size: 1.8rem; }
.cat-card-pop-name { font-size: 1rem; font-weight: 700; }
.cat-card-pop-stat { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-top: -4px; }
.cat-card-stat { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-top: -4px; }
.cat-area-group { margin-bottom: 28px; }
.cat-area-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
    padding-bottom: 10px; border-bottom: 2px solid var(--border);
}
.cat-area-ico {
    width: 36px; height: 36px; border-radius: 10px; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0;
}
.cat-area-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.cat-area-count {
    font-size: .75rem; font-weight: 700; color: var(--muted); background: var(--bg);
    padding: 2px 8px; border-radius: 999px;
}

/* ─── Come funziona: step con connettore ─────────────────── */
.steps-wrap { position: relative; padding: 30px 0; }
.step-card {
    position: relative; text-align: center; padding: 32px 20px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 20px; height: 100%; transition: all .3s;
}
.step-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(var(--p1-rgb),.12); border-color: rgba(var(--p1-rgb),.25); }
.step-num {
    display: inline-flex; width: 44px; height: 44px; border-radius: 14px; background: var(--grad); color: #fff;
    font-weight: 800; font-size: 1.15rem; align-items: center; justify-content: center; margin-bottom: 14px;
    box-shadow: 0 8px 20px rgba(var(--p1-rgb),.3);
}
.step-card h3 { font-weight: 800; font-size: 1.1rem; margin-bottom: 8px; }
.step-card p { color: var(--muted); font-size: .92rem; margin: 0; }
.step-card-accent-1 { border-top: 3px solid var(--p1); }
.step-card-accent-2 { border-top: 3px solid var(--p2, #6366f1); }
.step-card-accent-3 { border-top: 3px solid #22c55e; }
.step-card-checks { color: var(--muted); }
.step-card-checks i { font-size: .8rem; margin-right: 4px; }

/* Come-funziona security cards */
.cf-security-card {
    text-align: center; padding: 32px 24px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 20px; transition: all .3s;
}
.cf-security-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15,23,42,.08); }
.cf-security-icon {
    width: 64px; height: 64px; border-radius: 18px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 16px;
}
.cf-security-icon-blue { background: rgba(var(--p1-rgb),.1); color: var(--p1); }
.cf-security-icon-green { background: rgba(34,197,94,.1); color: #16a34a; }
.cf-security-icon-purple { background: rgba(139,92,246,.1); color: #7c3aed; }

/* Come-funziona FAQ */
.cf-faq-wrap { display: flex; flex-direction: column; gap: 10px; }
.cf-faq-item {
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    overflow: hidden; transition: box-shadow .2s, border-color .2s;
}
.cf-faq-item:has(.show) { border-color: rgba(var(--p1-rgb),.25); box-shadow: 0 8px 24px rgba(var(--p1-rgb),.08); }
.cf-faq-q {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 20px;
    background: none; border: none; text-align: start; font-weight: 600; font-size: .95rem;
    color: var(--ink); cursor: pointer; transition: background .15s;
}
.cf-faq-q:hover { background: var(--soft); }
.cf-faq-num {
    display: inline-flex; width: 30px; height: 30px; border-radius: 10px;
    background: var(--grad-soft); color: var(--p1); font-weight: 800; font-size: .82rem;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.cf-faq-text { flex: 1; }
.cf-faq-chevron { color: var(--muted); font-size: .75rem; transition: transform .25s; flex-shrink: 0; }
.cf-faq-q[aria-expanded="true"] .cf-faq-chevron { transform: rotate(180deg); }
.cf-faq-a { padding: 0 20px 18px 64px; color: var(--muted); font-size: .92rem; line-height: 1.65; }

/* Connettore tra gli step (icona freccia posizionata tra le colonne, solo desktop) */
.steps-wrap .step-col { position: relative; }
.steps-wrap .step-connector {
    display: none;
}
@media (min-width: 768px) {
    .steps-wrap .step-connector {
        display: flex; position: absolute; top: 50%; inset-inline-end: -14px; transform: translateY(-50%); z-index: 2;
        width: 28px; height: 28px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border);
        align-items: center; justify-content: center; color: var(--p1); font-size: .85rem;
        box-shadow: 0 4px 10px rgba(15,23,42,.06);
    }
}

/* USP banner: perché siamo diversi */
/* Banner "in evidenza" (USP home, preventivo accettato, lavoro da completare...): sempre un momento
   di rilievo per design, quindi resta tra i punti "importanti" col verde acceso. */
.usp-banner {
    background: var(--grad-vivid); border-radius: 22px; padding: 34px 28px; color: #fff;
    position: relative; overflow: hidden;
}
.usp-banner.usp-banner-accepted { background: linear-gradient(135deg, #86efac 0%, #6ee7b7 50%, #5eead4 100%); color: #064e3b; }
.usp-banner.usp-banner-accepted::before { background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.15) 0%, transparent 50%); }
.usp-banner::before {
    content: ''; position: absolute; top: -50%; inset-inline-end: -20%; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 70%); pointer-events: none;
}
.usp-banner h3 { font-weight: 800; letter-spacing: -.4px; }
.usp-banner .usp-item { display: flex; align-items: flex-start; gap: 12px; }
.usp-banner .usp-item i {
    width: 36px; height: 36px; background: rgba(255,255,255,.18); border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: #fff; font-size: 1.1rem;
}
.usp-banner .usp-item strong { display: block; font-weight: 700; margin-bottom: 2px; }
.usp-banner .usp-item small { color: rgba(255,255,255,.85); }
/* Icona "invia" in cima, in un badge tondo invece che nuda: più leggibile, coerente con le altre
   card della pagina che usano tutte un'icona dentro un badge, non un'icona a sé stante. */
.usp-banner .usp-banner-ico {
    width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.16);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.3rem;
    position: relative; z-index: 1;
}
.usp-banner .btn-light {
    font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.15); transition: all .2s; position: relative; z-index: 1;
}
.usp-banner .btn-light:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.22); }

/* CTA "Chatta" — spicca di più di un bottone bootstrap generico, con un lento respiro di luce che invita al click */
.btn-chat-cta {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px;
    background: var(--surface); color: var(--p1); font-weight: 700; font-size: .9rem; border: none;
    box-shadow: 0 0 0 0 rgba(255,255,255,.5), 0 6px 16px rgba(15,23,42,.12);
    transition: transform .2s, box-shadow .2s; animation: chatCtaPulse 2.6s ease-in-out infinite;
}
.btn-chat-cta i { font-size: 1.05rem; }
.btn-chat-cta:hover { transform: translateY(-2px) scale(1.03); color: var(--p1); animation-play-state: paused; }
.btn-chat-cta:active { transform: translateY(0) scale(.98); transition: transform .12s cubic-bezier(.34,1.56,.64,1); }
.btn-chat-cta-sm { padding: 7px 16px; font-size: .82rem; background: var(--grad-vivid); color: #fff; animation-name: chatCtaPulseAccent; }
.btn-chat-cta-sm:hover { color: #fff; box-shadow: 0 8px 20px rgba(var(--p1-rgb),.3); }
@keyframes chatCtaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.55), 0 6px 16px rgba(15,23,42,.12); }
    50%      { box-shadow: 0 0 0 9px rgba(255,255,255,0), 0 6px 16px rgba(15,23,42,.12); }
}
@keyframes chatCtaPulseAccent {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--p1-rgb),.4), 0 4px 12px rgba(var(--p1-rgb),.2); }
    50%      { box-shadow: 0 0 0 7px rgba(var(--p1-rgb),0), 0 4px 12px rgba(var(--p1-rgb),.2); }
}

/* ─── Scelta ruolo (impattante) ──────────────────────────── */
.role-hero { padding: 40px 20px 20px; text-align: center; }
.role-hero .badge-wave {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
    background: var(--grad-soft); font-size: .82rem; font-weight: 600; color: var(--p1); margin-bottom: 20px;
}
.role-hero h1 { font-weight: 800; letter-spacing: -.8px; font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.role-cards { max-width: 900px; margin: 30px auto 0; }
.role-card {
    display: block; padding: 40px 30px; border-radius: 24px; background: var(--surface); border: 2px solid var(--border);
    color: var(--ink); text-align: center; transition: all .3s ease; cursor: pointer; height: 100%;
    position: relative; overflow: hidden;
}
.role-card::before {
    content: ''; position: absolute; inset: 0; background: var(--grad-soft); opacity: 0; transition: opacity .3s;
}
.role-card:hover, .role-card:focus {
    border-color: var(--p1); transform: translateY(-6px); box-shadow: 0 24px 60px rgba(var(--p1-rgb),.25); color: var(--ink);
}
.role-card:hover::before { opacity: 1; }
.role-card > * { position: relative; z-index: 1; }
.role-card .role-ico {
    width: 92px; height: 92px; border-radius: 28px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center;
    background: var(--grad); box-shadow: 0 14px 34px rgba(var(--p1-rgb),.3); transition: transform .3s;
}
.role-card:hover .role-ico { transform: rotate(-8deg) scale(1.1); }
.role-card .role-ico i { color: #fff; font-size: 2.6rem; }
.role-card h2 { font-weight: 800; font-size: 1.5rem; letter-spacing: -.4px; margin-bottom: 10px; }
.role-card p.role-desc { color: var(--muted); margin-bottom: 20px; font-size: .95rem; }
.role-card ul { list-style: none; padding: 0; margin: 0 0 22px; text-align: start; display: inline-block; }
.role-card ul li { padding: 6px 0; font-size: .9rem; display: flex; align-items: center; gap: 10px; }
.role-card ul li i { color: var(--green); font-size: 1rem; }
.role-card .cta-hint {
    display: inline-flex; align-items: center; gap: 6px; color: var(--p1); font-weight: 700; font-size: .9rem;
    padding: 8px 16px; border-radius: 999px; background: var(--grad-soft); transition: all .3s;
}
.role-card:hover .cta-hint { background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgba(var(--p1-rgb),.3); }
.role-card.loading { opacity: .5; pointer-events: none; }
.role-card.picked { border-color: var(--p1); background: var(--grad-soft); }

/* ─── Dashboard ──────────────────────────────────────────── */
.dash-hero {
    background: linear-gradient(135deg, rgba(var(--p1-rgb),.08) 0%, rgba(var(--p2-rgb),.06) 100%);
    border: 1px solid var(--border); border-radius: 24px; padding: 30px 32px; margin-bottom: 30px;
    position: relative; overflow: hidden;
}
.dash-hero::before {
    content: ''; position: absolute; top: -50%; inset-inline-end: -10%; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(var(--p1-rgb),.15) 0%, transparent 70%); pointer-events: none;
}
.dash-hero > * { position: relative; z-index: 1; }
.dash-greet { font-weight: 800; font-size: 1.6rem; letter-spacing: -.4px; margin: 0; }
.dash-greet .wave { display: inline-block; animation: wave 2s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%,60%,100% { transform: rotate(0deg); } 10%,30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
.dash-role-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border); font-size: .78rem; font-weight: 600; color: var(--p1);
}
.dash-kpi {
    border: 1px solid var(--border); border-radius: 18px; padding: 20px; background: var(--surface); transition: all .2s;
    box-shadow: 0 30px 60px -20px rgba(15,23,42,.12);
}
.dash-kpi:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -20px rgba(15,23,42,.16); }
.dash-kpi:has(.stat-blue):hover { border-color: rgba(37,99,235,.2); box-shadow: 0 20px 50px -15px rgba(37,99,235,.18); }
.dash-kpi:has(.stat-green):hover { border-color: rgba(22,163,74,.2); box-shadow: 0 20px 50px -15px rgba(22,163,74,.18); }
.dash-kpi:has(.stat-amber):hover { border-color: rgba(217,119,6,.2); box-shadow: 0 20px 50px -15px rgba(217,119,6,.18); }
.dash-kpi:has(.stat-slate):hover { border-color: rgba(71,85,105,.2); box-shadow: 0 20px 50px -15px rgba(71,85,105,.18); }
.dash-kpi .icon {
    width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.2rem; margin-bottom: 12px; background: var(--grad);
}
.dash-kpi .n { font-weight: 800; font-size: 1.8rem; line-height: 1; letter-spacing: -.3px; }
.dash-kpi:has(.stat-blue) .n { color: #2563eb; }
.dash-kpi:has(.stat-green) .n { color: #16a34a; }
.dash-kpi:has(.stat-amber) .n { color: #d97706; }
.dash-kpi:has(.stat-slate) .n { color: #475569; }
.dash-kpi .l { color: var(--muted); font-size: 12px; margin-top: 4px; font-weight: 600; min-height: 2.1em; line-height: 1.3; }
/* Valore a zero: sbiadito, per far capire a colpo d'occhio che quella metrica è vuota/inattiva */
.dash-kpi.is-zero .n, .dash-kpi.is-zero .icon { opacity: .4; }

/* Empty state centrato (icona + testo), invece di un paragrafo allineato a sinistra in una card
   altrimenti vuota — dà un senso di completezza invece di sembrare "a metà". */
.admin-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 36px 16px; color: var(--muted); }
.admin-empty-state i { font-size: 1.8rem; opacity: .35; margin-bottom: 10px; }
.admin-empty-state p { margin: 0; font-size: .85rem; }

/* Azioni in tabella: bottoni della stessa altezza/allineamento, stesso raggio squadrato del resto
   dell'interfaccia admin (le tabelle .admin-table hanno angoli a 13px, non pillole arrotondate). */
.admin-table-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.admin-table-actions .btn { border-radius: 8px; }

.dash-section-title {
    font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
}
.dash-section-title::before {
    content: ''; width: 3px; height: 16px; border-radius: 2px; background: var(--grad); flex-shrink: 0;
}
/* Pill "crediti extra" nella scheda utente admin: numero in evidenza invece di un piatto "Crediti
   extra: 5" in testo semplice, coerente col linguaggio visivo a badge già usato per i piani premium. */
.admin-credit-pill {
    display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--p1-rgb),.1); color: var(--p1);
    font-weight: 700; font-size: .82rem; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}

/* ─── Analytics Ricavi & Premium (admin/analytics-ricavi.php) ───────────────── */
.analytics-section-title {
    display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1rem;
    color: var(--ink); margin: 28px 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--border);
}
.analytics-section-title:first-of-type { margin-top: 0; }
.analytics-section-title i { color: var(--p1); font-size: .95rem; }
.analytics-kpi-active { border-color: var(--p1) !important; box-shadow: 0 0 0 2px rgba(var(--p1-rgb),.15), 0 14px 32px -16px rgba(15,23,42,.16) !important; }
.dash-kpi { animation: dashKpiIn .4s ease backwards; }
@keyframes dashKpiIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dash-kpi { animation: none; } }

/* ─── Scorciatoie rapide dashboard cliente ──────────────────── */
/* Timeline attività recenti (dashboard pro): lista compatta di eventi reali (offerte inviate/accettate/rifiutate,
   recensioni). Border-left colorato per tipo, layout su una riga: icona + testo + "quando". */
.dash-timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-timeline-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 10px; background: var(--surface); transition: all .15s; }
.dash-timeline-row:hover { border-color: rgba(var(--p1-rgb),.35); transform: translateX(2px); }
.dash-timeline-ok  { border-left-color: #22c55e; }
.dash-timeline-ko  { border-left-color: #ef4444; }
.dash-timeline-info{ border-left-color: var(--p1); }
.dash-timeline-star{ border-left-color: #f59e0b; }
.dash-timeline-ico { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--soft); color: var(--ink); flex-shrink: 0; }
.dash-timeline-ok  .dash-timeline-ico { background: rgba(34,197,94,.12);  color: #22c55e; }
.dash-timeline-ko  .dash-timeline-ico { background: rgba(239,68,68,.12);  color: #ef4444; }
.dash-timeline-info.dash-timeline-info .dash-timeline-ico { background: rgba(var(--p1-rgb),.12); color: var(--p1); }
.dash-timeline-star.dash-timeline-star .dash-timeline-ico { background: rgba(245,158,11,.12); color: #f59e0b; }
.dash-timeline-body { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dash-timeline-txt { color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.dash-timeline-txt:hover { color: var(--p1); }
.dash-timeline-when { font-size: .78rem; color: var(--muted); flex-shrink: 0; }

.dash-quick-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 991px) { .dash-quick-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 576px) { .dash-quick-row { grid-template-columns: repeat(2, 1fr); } }
.dash-quick-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 16px 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
    color: var(--ink); text-decoration: none; font-size: .8rem; font-weight: 600; position: relative;
    transition: all .2s;
}
.dash-quick-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -16px rgba(var(--p1-rgb),.2); border-color: transparent; color: var(--ink); }
.dash-quick-ico {
    width: 42px; height: 42px; border-radius: 12px; background: var(--grad-soft); color: var(--p1);
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem; transition: transform .2s;
}
.dash-quick-card:hover .dash-quick-ico { transform: rotate(-6deg) scale(1.08); }
.dash-quick-badge {
    position: absolute; top: 8px; inset-inline-end: 8px; background: var(--grad); color: #fff; font-size: .65rem; font-weight: 800;
    min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

.dash-req-item {
    border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; background: var(--surface);
    transition: all .2s; margin-bottom: 10px;
}
.dash-req-item:hover { border-color: rgba(var(--p1-rgb),.3); box-shadow: 0 8px 22px rgba(15,23,42,.06); transform: translateX(4px); }
.dash-req-title { font-weight: 600; color: var(--ink); text-decoration: none; }
.dash-req-title:hover { color: var(--p1); }
/* Colonna centrata classica (icona sopra, testo, bottone sotto): i tentativi precedenti in riga
   orizzontale finivano sempre con contenuto accalcato da un lato in un riquadro enorme e vuoto
   (bug segnalato più volte, l'ultima "bruttissimo") — una colonna centrata con un max-width sul
   testo resta pulita indipendentemente da quanto è largo il contenitore attorno. */
.dash-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 48px 24px; border: 2px dashed var(--border); border-radius: 20px; background: var(--soft);
    animation: dashEmptyIn .35s ease;
}
/* > diretto, non discendente generico: altrimenti la regola si applica ANCHE all'icona dentro
   il bottone "Pubblica la prima" più sotto, dandogli lo stesso badge bianco tondo dell'icona
   principale (bug segnalato: sembrava un'icona-in-un'icona dentro il bottone). */
.dash-empty > i {
    width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; background: #fff; color: var(--p1); margin-bottom: 16px;
    box-shadow: 0 4px 14px rgba(15,23,42,.06); animation: dashEmptyFloat 2.6s ease-in-out infinite;
}
@keyframes dashEmptyFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .dash-empty > i { animation: none; } }
.dash-empty-text { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 360px; }
.dash-empty-title { display: block; font-size: 1.02rem; font-weight: 800; color: var(--ink); }
.dash-empty p { margin: 0; }
.dash-empty .btn { margin-top: 10px; }
/* "Tutto pulito!" (coda di moderazione vuota): stato di successo, non neutro — colore e pop diversi
   dal generico "nessun elemento" per dare una sensazione di traguardo raggiunto, non di vuoto. */
.dash-empty > i.bi-check-circle { color: var(--green, #16a34a); opacity: 1; animation: dashEmptyCheckPop .45s cubic-bezier(.34,1.56,.64,1) .1s backwards; }
@keyframes dashEmptyIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dashEmptyCheckPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dash-empty, .dash-empty > i.bi-check-circle { animation: none; } }
/* Variante compatta per card informative secondarie in pagine dense (es. storico in una scheda
   admin): il bordo tratteggiato + spaziatura ampia del .dash-empty standard comunica "azione
   invitante, pubblica il primo elemento" — fuori posto per un semplice "non c'è ancora nulla da
   mostrare" dentro una pagina già piena di altri pannelli (bug segnalato: sembrava una dropzone). */
.dash-empty-sm {
    padding: 22px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--soft);
}
.dash-empty-sm > i {
    width: 38px; height: 38px; font-size: 1rem; margin-bottom: 10px; animation: none; box-shadow: none;
}

/* ─── Box "quadrotto" di caricamento CV (includes/cv_panel.php) ─────────
   Click ovunque nel box apre il selettore file: prima uno stato vuoto tratteggiato, poi
   un'anteprima (icona PDF + nome) dopo la scelta — al posto della semplice riga
   "Scegli file / Nessun file selezionato" del controllo nativo, poco leggibile e poco invitante. */
.cv-upload-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 130px; height: 130px; flex-shrink: 0; border: 2px dashed var(--border); border-radius: 14px;
    background: var(--soft); cursor: pointer; text-align: center; padding: 10px; position: relative;
    transition: border-color .2s ease, background .2s ease;
}
.cv-upload-tile:hover, .cv-upload-tile:focus-within { border-color: var(--p1); background: var(--grad-soft); }
.cv-upload-tile-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.cv-upload-tile-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); pointer-events: none; }
.cv-upload-tile-empty i { font-size: 1.8rem; color: var(--p1); }
.cv-upload-tile-empty span { font-size: .76rem; font-weight: 600; line-height: 1.3; }
.cv-upload-tile-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.cv-upload-tile-preview i { font-size: 2rem; color: #dc2626; }
.cv-upload-tile-preview .cv-upload-filename {
    font-size: .72rem; font-weight: 600; color: var(--ink); max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; padding: 0 4px;
}
.cv-upload-tile-remove {
    position: absolute; top: 6px; inset-inline-end: 6px; width: 22px; height: 22px; border-radius: 50%;
    border: none; background: rgba(15,23,42,.08); color: var(--ink); display: flex; align-items: center;
    justify-content: center; font-size: .72rem; cursor: pointer; z-index: 1;
}
.cv-upload-tile-remove:hover { background: #fee2e2; color: #dc2626; }
/* Loader specifico dentro il quadrotto durante l'upload del PDF (submit del form): sostituisce
   temporaneamente lo stato "scelto" finché il server non risponde, cosi il box comunica da solo
   che l'operazione è in corso invece di restare fermo con la sola riga di testo sotto. */
.cv-upload-tile-loading { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--p1); pointer-events: none; }
.cv-upload-tile-loading i { font-size: 1.8rem; }
.cv-upload-tile-loading span { font-size: .72rem; font-weight: 600; }

/* Pulsanti "cestino" (elimina CV/esperienza/istruzione/raccomandazione): prima rossi fissi anche
   a riposo, troppo urlati per un'azione secondaria dentro righe già dense di altri controlli — ora
   discreti come il resto delle icone della riga, rossi solo al passaggio del mouse/focus. */
.cv-icon-btn-danger { color: var(--muted); transition: color .15s; }
.cv-icon-btn-danger:hover, .cv-icon-btn-danger:focus-visible { color: #dc2626; }

/* Blocco badge/azioni della lista CV salvati: larghezza minima fissa su schermi larghi cosi il
   badge "Predefinito" e le icone occhio/cestino restano allineati alla stessa colonna riga dopo
   riga, invece di "danzare" a destra in base alla lunghezza del nome del CV a sinistra. */
@media (min-width: 992px) { .cv-lista-azioni { min-width: 180px; justify-content: flex-end; } }

/* Campo con icona del brand a sinistra (GitHub/Behance/portfolio), stesso pattern di .cat-search. */
.cv-link-input { position: relative; display: block; }
.cv-link-input > i {
    position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%);
    font-size: .95rem; pointer-events: none; z-index: 2; line-height: 1;
}
.cv-link-input > i.fa-github { color: #181717; }
.cv-link-input > i.fa-behance { color: #1769ff; }
.cv-link-input > i.fa-globe { color: var(--p1); }
.cv-link-input input.form-control { padding-inline-start: 34px !important; }

/* Altezza minima uniforme (44px, soglia di tocco comoda) su tutti i campi testuali della sezione
   anagrafica del CV: input/select/textarea di taglie diverse (alcuni .form-control-sm altrove)
   davano una riga irregolare quando affiancati nella stessa griglia. */
#formCvTesto_acc-cv input.form-control, #formCvTesto_acc-cv select.form-control,
#formCvTesto_s-cv input.form-control, #formCvTesto_s-cv select.form-control { min-height: 44px; }

/* Titoli delle macro-categorie di competenze (es. "Informatica", "Certificazioni"): leggermente
   più piccoli per non competere in peso visivo con le pillole vere e proprie sotto, e per
   restituire un po' di spazio orizzontale quando il pannello suggerimenti è stretto. */
.comp-suggest-group-label { font-size: .68rem; }

/* Tag suggeriti non ancora scelti: leggera trasparenza a riposo, piena al passaggio del mouse —
   rinforza (insieme al colore già neutro) che sono ancora "in attesa di essere scelti", non alla
   pari delle pillole già selezionate, riducendo il rumore visivo del pannello. */
.comp-suggest-btn { opacity: .82; }
.comp-suggest-btn:hover { opacity: 1; }

/* KPI arricchito con trend badge e hover interattivo */
.dash-kpi { position: relative; overflow: hidden; }
.dash-kpi::after {
    content: ''; position: absolute; top: 0; inset-inline-end: 0; width: 80px; height: 80px;
    background: radial-gradient(circle at top right, rgba(var(--p1-rgb),.06), transparent 70%);
    pointer-events: none;
}
.dash-kpi .icon { transition: transform .3s ease; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.dash-kpi:hover .icon { transform: rotate(-6deg) scale(1.08); }
.dash-kpi .stat-ico { transition: transform .3s ease; }
.dash-kpi:hover .stat-ico { transform: rotate(-6deg) scale(1.08); }
.dash-kpi .n { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dash-kpi .trend {
    display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px;
    font-size: .68rem; font-weight: 700; margin-top: 6px;
}
.dash-kpi .trend.up { background: #dcfce7; color: #16a34a; }
.dash-kpi .trend.flat { background: var(--soft); color: var(--muted); }
.dash-kpi .kpi-sub { color: var(--muted); font-size: 12px; margin-top: 4px; opacity: .85; }

/* Card completamento profilo con progress ring */
.profile-progress {
    background: linear-gradient(135deg, #faf5ff 0%, #fff 100%); border: 1px solid var(--border); border-radius: 16px;
    padding: 16px 20px; margin-bottom: 24px; position: relative; overflow: hidden;
}
.profile-progress::before {
    content: ''; position: absolute; top: -50%; inset-inline-end: -10%; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(var(--p2-rgb),.10) 0%, transparent 70%); pointer-events: none;
}
.profile-progress > * { position: relative; z-index: 1; }
.profile-progress h5 { font-weight: 800; margin-bottom: 4px; letter-spacing: -.2px; font-size: 1rem; }
.profile-progress .pp-checklist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.profile-progress .pp-check {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border); font-size: .78rem; font-weight: 600;
}
.profile-progress .pp-check.done { background: #dcfce7; border-color: #86efac; color: #166534; }
.profile-progress .pp-check.done i { color: #16a34a; }
.profile-progress .pp-check i { color: var(--muted); }

/* Quick actions grid (professionista) */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 30px; }
.qa-card {
    display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 14px; color: var(--ink); text-decoration: none; transition: all .2s;
}
.qa-card:hover { border-color: var(--p1); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--p1-rgb),.12); color: var(--ink); }
.qa-card .qa-ico {
    width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem;
}
.qa-card .qa-title { font-weight: 700; font-size: .92rem; }
.qa-card .qa-desc { color: var(--muted); font-size: .78rem; }

/* Card richiesta (pro): arricchita con urgenza/budget/tempo */
.pro-req {
    border: 1px solid var(--border); border-radius: 16px; padding: 18px 18px 22px; background: var(--surface);
    box-shadow: 0 10px 28px -14px rgba(15,23,42,.12);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; margin-bottom: 12px;
    /* NIENTE overflow:hidden qui: combinato col transform dell'hover sotto causa un bug noto di
       Chrome/Edge su Windows che sfoca il testo durante l'animazione (il layer compositato per il
       clipping viene rasterizzato a una scala diversa mentre si muove). Nessun contenuto della card
       ha comunque bisogno di essere tagliato ai bordi arrotondati. */
}
/* Preventivo già inviato: la card resta interamente consultabile (non è "disabilitata" nel senso
   stretto), ma il bordo esterno più tenue comunica a colpo d'occhio "azione già completata qui",
   coerente con l'opacità già usata sulla CTA interna .pro-req-cta-fatto. */
.pro-req.pro-req-fatto { border-color: rgba(148,163,184,.35); }
/* ─── Switch vista lista/griglia (pagina richieste) ─────────
   Il markup delle card resta identico: cambia solo il display del contenitore, così non serve
   duplicare i template per le due viste. */
.req-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; background: var(--surface); }
.req-view-toggle button {
    position: relative;
    border: none; background: transparent; color: var(--muted); width: 36px; height: 32px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: all .15s;
}
/* Area di click invisibile più ampia del bottone visibile: un target di 36x32px è piccolo per
   un tap preciso, specie su mobile — ::before espande la zona cliccabile di 8px per lato senza
   ingrandire visivamente il bottone stesso. */
.req-view-toggle button::before {
    content: ''; position: absolute; top: -8px; bottom: -8px; inset-inline-start: -8px; inset-inline-end: -8px;
}
/* Gradiente più scuro del brand standard (non var(--grad), già usato ovunque per i bottoni normali):
   qui serve staccarsi nettamente dal bottone inattivo accanto, non solo "essere colorato". */
.req-view-toggle button.active { background: linear-gradient(135deg, var(--p1) 0%, var(--accent-dark) 100%); color: #fff; }
/* Container principale della bacheca richieste (richieste.php): titoli e descrizioni delle card
   sono il contenuto testuale più denso della pagina, optimizeLegibility rifinisce kerning/legature. */
#reqRefreshTarget { text-rendering: optimizeLegibility; }
.req-results.req-view-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.req-results.req-view-grid .pro-req { margin-bottom: 0; height: 100%; display: flex; flex-direction: column; }
.req-results.req-view-grid .pro-req-desc { flex-grow: 1; }
.req-results.req-view-list .pro-req { max-width: none; }
/* Poche card: non forzare 3 colonne rigide (una card sola persa in 1/3 di schermo, il resto vuoto).
   Column-count adattivo in CSS puro via :has() — nessun JS, si riapplica da solo anche dopo lo swap
   del pull-to-refresh. 1 card → colonna singola a larghezza leggibile; 2 card → 2 colonne. */
.req-results.req-view-grid:has(.pro-req:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.req-results.req-view-grid:has(.pro-req:only-child) { grid-template-columns: minmax(0, 460px); }
/* Massimo 3 colonne ovunque, anche su schermi molto larghi (richiesto): card più larghe e leggibili
   invece di una quarta colonna stretta. Su >1400px la griglia resta a 3 e non si allarga oltre. */
@media (min-width: 1400px) { .req-results.req-view-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) { .req-results.req-view-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .req-results.req-view-grid, .req-results.req-view-grid:has(.pro-req:nth-child(2):last-child) { grid-template-columns: 1fr; } }
/* Barra filtri (richieste.php/lavoro.php): con più di 3-4 campi il wrap a 2 colonne diseguali
   risultava disordinato su schermi molto stretti — una colonna sola è più leggibile da compilare. */
@media (max-width: 575px) {
    .req-filter-bar .req-filter-field { flex: 1 1 100%; }
    .req-filter-bar > .btn, .req-filter-bar > a.btn { flex: 1 1 100%; justify-content: center; }
}
/* Dentro la dashboard, a fianco della sidebar, lo spazio è più stretto: 2 colonne, non 3. */
.req-results.req-view-grid.req-view-grid-2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 767px) { .req-results.req-view-grid.req-view-grid-2col { grid-template-columns: 1fr; } }
.pro-req:hover { border-color: var(--p1); box-shadow: 0 24px 48px -16px rgba(var(--p1-rgb),.2); transform: translateY(-2px); }
.pro-req-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.pro-req-head .req-ico {
    width: 48px; height: 48px; border-radius: 14px; background: var(--grad-soft); color: var(--p1);
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0;
    transition: background .2s, color .2s;
}
.pro-req-title { display: block; margin: 0; font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--ink); text-decoration: none; }
.pro-req-title:hover { color: var(--p1); }
/* min-height: la voce "N preventivi" è un tag con padding proprio (più alta delle altre voci in
   semplice testo) — senza un'altezza minima uniforme, le card con e senza quel tag avrebbero la
   riga di metadati leggermente più bassa o più alta, sfalsando il resto del contenuto sotto. */
.pro-req-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 500; min-height: 24px; }
.pro-req-meta i { font-size: 14px; margin-inline-end: 3px; }
.pro-req-meta-count { font-weight: 600; padding: 2px 8px; }
/* 0 o 1 preventivo: nulla di davvero "notevole" da segnalare, sfondo neutro per non attirare
   l'occhio inutilmente. Più di 1: prova sociale reale, merita un tag che si noti di più. */
.pro-req-meta-count.tag-count-neutral { background: var(--soft); color: #475569; }
.pro-req-meta-count.tag-count-active { background: rgba(var(--p1-rgb),.12); color: var(--p1); }
/* Provincia più chiara della città: un dettaglio secondario tra parentesi, non deve pesare
   quanto il nome della città stessa nella stessa riga di metadati. */
.meta-provincia { color: #94a3b8; font-weight: 400; }
/* Descrizione: clamp a 3 righe con puntini di sospensione, oltre al troncamento già fatto lato PHP
   (mb_strimwidth) — doppia rete di sicurezza se mai il limite di caratteri cambiasse. */
.pro-req-desc {
    color: var(--muted); font-size: .88rem; margin: 8px 0 0; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pro-req-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; }
.tag-time-right { margin-inline-start: auto; }
.tag-pill {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px;
    font-size: .72rem; font-weight: 700; letter-spacing: .1px; line-height: 1;
    font-family: 'Outfit', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.tag-pill i { line-height: 1; }
.tag-pill.tag-time { background: var(--soft); color: var(--muted); }
/* Usata dai link "Ricerche frequenti" su lavoro.php: senza background/color propri, .tag-pill da
   sola rende solo un link blu sottolineato (nessuna delle varianti colorate sotto si applica) —
   qui uno sfondo grigio chiarissimo neutro, coerente con gli altri chip della pagina. */
.tag-pill.tag-chip-neutral { background: var(--bg2, #f3f4f6); color: var(--ink); }
.tag-pill.tag-chip-neutral:hover { background: var(--grad-soft); color: var(--p1); }
.tag-pill.tag-budget { background: #d1fae5; color: #065f46; padding-block: 5px; padding-inline: 16px; }
.tag-pill.tag-urg-subito { background: #fecaca; color: #7f1d1d; border: 1px solid #fca5a5; }
/* Icona in un rosso desaturato "terracotta" invece del rosso puro degli errori di sistema
   (#ef4444 usato per la validazione dei form): stesso significato di urgenza, ma un tono più
   elegante e meno "allarme rotto" a colpo d'occhio. */
.tag-pill.tag-urg-subito i { color: #a15353; }
/* "Flessibile"/"Entro la settimana" volutamente molto più desaturati di "Urgente": non devono
   competere visivamente col rosso, che deve restare l'unico colore che salta all'occhio. */
.tag-pill.tag-urg-week { background: #fbf3d9; color: #8a6d1f; }
.tag-pill.tag-urg-flex { background: #eef1f5; color: #64748b; }
/* Badge "Disponibile subito" (professionisti.php, dashboard.php disponibilita='immediata'): verde
   acceso e per primo nella riga di pillole, cosi le aziende/i clienti lo notano a colpo d'occhio
   fra i risultati di ricerca invece di doverlo scoprire aprendo il profilo. */
.tag-pill.tag-available-now { background: #dcfce7; color: #166534; font-weight: 700; border: 1px solid #bbf7d0; animation: availNowPulse 2.5s ease infinite; }
@keyframes availNowPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(22,101,52,.2); } 50% { box-shadow: 0 0 0 5px rgba(22,101,52,0); } }
@media (prefers-reduced-motion: reduce) { .tag-pill.tag-available-now { animation: none; } }
.pro-req-cta {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 999px;
    background: var(--grad); color: #fff; font-weight: 700; font-size: .82rem; text-decoration: none;
    transition: all .2s; margin-top: 20px;
}
/* L'icona (glifo FontAwesome, es. fa-gear su "Gestisci annuncio") non è perfettamente centrata nel
   proprio bounding box di default e senza line-height risente della baseline del testo accanto —
   qui è un mini flex-box centrato su sé stesso, per un centraggio verticale reale col testo. */
.pro-req-cta i, .pro-req-cta-fatto i { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
/* Micro-divisorio a piena larghezza (non solo larga quanto il bottone pillola) sopra la CTA:
   bleed fino ai bordi della card tramite offset negativi pari al suo stesso padding orizzontale,
   per far sembrare la CTA una "sezione footer" separata dal contenuto sopra. */
.pro-req-cta::before {
    content: ''; position: absolute; top: -10px; inset-inline-start: -18px; inset-inline-end: -18px; height: 1px; background: rgba(15,23,42,.1);
}
.pro-req-cta:hover { color: #fff; box-shadow: 0 8px 20px rgba(var(--p1-rgb),.3); transform: translateX(3px); }

/* "Gestisci annuncio" (lavoro.php, proprio annuncio): riusava per errore .pro-req-cta-fatto, pensata
   per stati "già fatto/non cliccabile" (preventivo già inviato, già candidato) — troppo chiara e
   spenta per un pulsante che invece porta a un'azione vera e propria. Bordo pieno + testo leggibile,
   più discreto della CTA primaria in gradiente ma nettamente più visibile di uno stato disabilitato. */
.pro-req-cta-gestisci {
    background: var(--surface) !important; color: var(--p1) !important; border: 2px solid var(--p1);
    opacity: 1 !important; cursor: pointer;
}
.pro-req-cta-gestisci:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent; box-shadow: 0 8px 20px rgba(var(--p1-rgb),.3); }

/* ─── Form auth ──────────────────────────────────────────── */
/* ─── Auth page (login / registrati) ─── */
.auth-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.auth-wrap { max-width: 480px; width: 100%; animation: authFadeUp .6s ease both; }
.auth-card {
    border: 1px solid var(--border); border-radius: 24px; padding: 40px 32px;
    background: var(--surface); box-shadow: 0 20px 60px rgba(15,23,42,.08);
    position: relative; overflow: hidden;
}
.auth-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--grad);
}
.auth-logo-pulse {
    width: 72px; height: 72px; border-radius: 20px; background: var(--grad);
    color: #fff; font-size: 1.8rem; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px; animation: authPulse 2s ease-in-out infinite;
    box-shadow: 0 8px 30px rgba(var(--p1-rgb),.25);
}
.auth-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.5px; margin-bottom: 6px; }
.auth-subtitle { color: var(--muted); font-size: .95rem; margin-bottom: 28px; }
.auth-google-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 14px 20px; border-radius: 14px;
    border: 2px solid var(--border); background: var(--surface); color: var(--text);
    font-weight: 700; font-size: 1.02rem; text-decoration: none;
    transition: all .25s ease; cursor: pointer;
}
.auth-google-btn:hover {
    border-color: var(--p1); background: var(--grad-soft); color: var(--p1);
    transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--p1-rgb),.15);
}
.auth-google-btn:active { transform: translateY(0); }
.auth-benefits { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; text-align: start; }
.auth-benefit {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border-radius: 14px; background: var(--bg); transition: transform .2s;
}
.auth-benefit:hover { transform: translateX(4px); }
.auth-benefit-ico {
    width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center;
    justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.auth-benefit strong { display: block; font-size: .88rem; font-weight: 700; }
.auth-benefit small { color: var(--muted); font-size: .8rem; }
.auth-trust-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 24px;
    padding-top: 20px; border-top: 1px solid var(--border);
}
.auth-trust-row span { font-size: .82rem; font-weight: 600; color: #16a34a; display: flex; align-items: center; gap: 5px; }
.auth-footer { color: var(--muted); font-size: .82rem; margin-top: 16px; }
.auth-footer a { color: var(--p1); font-weight: 600; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
@keyframes authFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes authPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ─── FAQ: accordion più grande e leggibile ──────────────── */
.accordion-button { font-size: 1.02rem !important; font-weight: 700 !important; padding: 18px 20px !important; }
.accordion-button:not(.collapsed) { background: var(--grad-soft) !important; color: var(--p1) !important; box-shadow: none !important; }
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(var(--p1-rgb),.15) !important; }
.accordion-body { font-size: .98rem !important; padding: 6px 20px 20px !important; line-height: 1.6; }

/* ─── CTA finale: card ad effetto come la hero ───────────── */
.final-cta-section {
    background: linear-gradient(180deg, #faf7ff 0%, #ffffff 100%); border-radius: 28px;
    padding: 56px 32px; text-align: center; position: relative; overflow: hidden;
}
.final-cta-section::before {
    content: ''; position: absolute; top: -40%; inset-inline-start: 50%; transform: translateX(-50%); width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(var(--p1-rgb),.10) 0%, transparent 70%); pointer-events: none;
}
.final-cta-section > * { position: relative; z-index: 1; }
.final-cta-section h3 { font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.5px; margin-bottom: 10px; }
.final-cta-section p { color: var(--muted); font-size: 1.05rem; margin-bottom: 24px; }

/* ─── Micro-animazioni globali: feedback al click ────────── */
.btn:active, .cat-card:active, .annuncio-card:active, .step-card:active, .quick-chip:active { transform: scale(.97); }
.btn { transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }

/* ─── Footer elegante ────────────────────────────────────── */
/* Footer scuro premium: ridefinisce localmente le variabili di tema (--ink/--muted/--border/
   --surface) invece di riscrivere ogni singola regola sotto — quasi tutti gli elementi del footer
   (h6, link, icone social, pillole zone, badge P.IVA) usano già queste variabili, quindi basta
   questo per far virare l'intero footer al tema scuro in un colpo solo. */
.mkt-footer {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border-top: 1px solid rgba(255,255,255,.08);
    --ink: #f8fafc; --muted: rgba(255,255,255,.85); --border: rgba(255,255,255,.14); --surface: rgba(255,255,255,.06);
    /* Il markup usa la utility Bootstrap .mt-5 (3rem): qui la raddoppiamo esplicitamente, il
       passaggio dalla fine del contenuto principale al footer scuro risultava troppo compresso. */
    margin-top: 6rem;
}

/* Footer minimale del pannello admin: una riga, niente colonne pubbliche */
.admin-footer-mini {
    display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
    padding: 18px; margin-top: 24px; border-top: 1px solid var(--border);
    font-size: .78rem;
    /* var(--muted) (#64748b) su questo sfondo chiaro (--bg: #f8f9fa) passa il 4.5:1 richiesto per
       il testo normale con un margine troppo risicato (~4.7:1, a un pelo dal fallire con piccole
       variazioni di reso font/browser) — qui i dati societari (P.IVA/REA) restano leggibili con
       margine più solido (~7:1) senza toccare --muted globalmente, usato ovunque nel sito. */
    color: #4b5563;
}
.admin-footer-mini a { color: #4b5563; }
.admin-footer-mini a:hover { color: var(--p1); }
/* h2 invece di h6: i titoli delle colonne saltavano direttamente da un h2/h3 di pagina a un h6,
   gerarchia di intestazioni scorretta (segnalato da un tool di audit SEO). Stile invariato. */
.mkt-footer h2 { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; color: var(--ink); margin-bottom: 14px; }
.mkt-footer a { color: var(--muted); transition: color .2s; }
/* var(--p1) (#635bff) sopra questo sfondo scuro passa un contrasto di circa 3,8:1 — sufficiente
   per un elemento grafico ma sotto la soglia 4,5:1 richiesta per il testo dei link al passaggio
   del mouse/focus da tastiera: qui una tinta più chiara dello stesso blu di brand, leggibile
   senza compromessi anche per chi naviga a tastiera. */
.mkt-footer a:hover, .mkt-footer a:focus-visible { color: #b3b0ff; }
/* Link delle colonne footer come blocco con un po' di padding verticale, non solo il testo:
   area cliccabile/toccabile più ampia (più facile da centrare su mobile) e più respiro fra una
   voce e l'altra rispetto al solo mb-2 di Bootstrap (8px), un po' stretto con testo piccolo. */
.mkt-footer .list-unstyled li { margin-bottom: 4px; }
.mkt-footer .list-unstyled a { display: inline-block; padding-block: 5px; }

/* ─── Sottolineatura ad espansione per i link testuali nel corpo pagina ───
   Non la classica sottolineatura sempre visibile: una linea di 2px sotto il testo che parte
   larga 0 dal centro e si espande verso i due lati solo all'hover. Scelto "p a" + i link del
   footer/zone servite come ambito: sono i link discorsivi dentro il testo, non i bottoni CTA
   (.btn) né i link di navigazione/card, che hanno già un proprio trattamento hover distinto. */
p a:not(.btn), .mkt-footer a, .footer-zones a {
    position: relative;
}
p a:not(.btn)::after, .mkt-footer a::after, .footer-zones a::after {
    content: ''; position: absolute; inset-inline-start: 50%; bottom: -2px; width: 0; height: 2px;
    background: currentColor; transform: translateX(-50%); transition: width .25s ease;
}
p a:not(.btn):hover::after, .mkt-footer a:hover::after, .footer-zones a:hover::after { width: 100%; }
@media (prefers-reduced-motion: reduce) {
    p a:not(.btn)::after, .mkt-footer a::after, .footer-zones a::after { transition: none; }
}
/* Colore esplicito invece di fare affidamento sull'ereditarietà di --ink dal body: più robusto
   e garantisce sempre contrasto pieno sul nome del brand nel footer scuro (bug segnalato: testo
   "Azarino" poco leggibile). */
.mkt-footer .fbrand { display: flex; align-items: center; gap: 10px; }
@media (min-width: 992px) {
    /* Le colonne link hanno un <h2> (13px + margin-bottom:14px, ~28px totali) sopra il primo
       link: senza questo offset il logo restava allineato in cima alla colonna, più in alto
       della riga di base del primo link accanto, invece che alla sua stessa altezza. */
    .mkt-footer .fbrand { margin-top: 28px; }
}
.mkt-footer .fbrand span { color: #fff; }
/* Il logo sfuma dal blu al quasi-nero nell'angolo in alto a sinistra: su sfondo scuro quella parte
   si confondeva con lo sfondo (bug segnalato, "logo non si vede bene"). Un chip chiaro dietro
   garantisce contrasto qualunque sia il colore del logo in quel punto del gradiente. */
.mkt-footer .brand-mark { width: 32px; height: 32px; object-fit: contain; background: #fff; border-radius: 9px; padding: 4px; box-sizing: border-box; }
.mkt-footer .footer-tagline { color: var(--muted); font-size: .95rem; max-width: 320px; margin-top: 12px; }

.footer-social { display: flex; gap: 10px; margin-top: 18px; }
/* Icona piena e ad alto contrasto (rgba white .12 di sfondo + glifo bianco quasi pieno): con solo
   il box "contatti" visibile (nessun social configurato) prima sembrava un quadratino vuoto/rotto.
   Niente -webkit-text-stroke: su un glifo di colore semi-trasparente svuotava il centro dell'icona. */
.footer-social a {
    width: 34px; height: 34px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.92); font-size: 1rem;
    transition: all .25s;
}
.footer-social a:hover { background: var(--grad); border-color: transparent; color: #fff; transform: translateY(-3px); box-shadow: 0 10px 22px rgba(var(--p1-rgb),.3); }
.footer-legal-strip {
    padding: 16px 0; font-size: .82rem; color: var(--muted); border-top: 1px solid var(--border); margin-top: 30px;
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
}
.footer-legal-strip .badge-piva { background: var(--surface); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; }
.footer-zones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.footer-zones a {
    font-size: .78rem; padding: 4px 12px; border-radius: 999px; background: transparent;
    border: 1px solid rgba(var(--p2-rgb),.35); color: var(--muted); transition: all .2s;
}
.footer-zones a:hover { border-color: var(--p2); color: #fff; background: rgba(var(--p2-rgb),.14); }

/* ─── Custom select (sostituisce il <select> nativo ovunque) ── */
.cs-wrap { position: relative; }
/* Dentro .req-filter-field (flex): senza flex-grow il wrap resta largo solo quanto il suo
   contenuto (shrink-to-fit), lasciando un vuoto nella card dov'è visibile lo sfondo sottostante
   (es. la lista suggerimenti città che affiora "a scacchi" invece di restare coperta) — segnalato
   come "conflitto" fra il dropdown città e i filtri sotto. min-width:0 permette comunque
   all'ellissi del testo di funzionare invece di forzare il campo a espandersi oltre la card.
   VERA causa radice del "conflitto": il validatore inline di app.js (vedi field-wrap più sotto)
   avvolge ogni input/select in un .field-wrap non-flex, che si inserisce fra .req-filter-field
   e .cs-wrap — questa regola resta comunque utile perché .cs-wrap è anche figlio diretto altrove. */
.req-filter-field .cs-wrap { flex: 1 1 auto; min-width: 0; }
/* Dentro .req-filter-field il bordo/sfondo propri di .cs-btn duplicano quelli della card esterna
   (effetto "riquadro nel riquadro"): qui il select è già visivamente contenuto nella pillola del
   campo, quindi niente bordo/sfondo/ombra suoi — resta solo il feedback della card intera
   (.req-filter-field:hover/:focus-within, già esistente) invece di due bordi sovrapposti. */
.req-filter-field .cs-btn { border: none; background: transparent; box-shadow: none !important; padding-inline-start: 0; }
.req-filter-field .cs-wrap.open .cs-btn { box-shadow: none; }
.cs-wrap .cs-native {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: -1; pointer-events: none;
}
.cs-btn {
    width: 100%; text-align: start; background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 36px 8px 14px; font-size: .95rem; color: var(--ink); cursor: pointer; position: relative;
    transition: all .2s ease; min-height: 42px; display: flex; align-items: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-wrap.cs-sm .cs-btn { min-height: 34px; padding: 5px 32px 5px 12px; font-size: .85rem; border-radius: 8px; }
.cs-btn::after {
    content: ''; position: absolute; inset-inline-end: 14px; top: 50%; width: 8px; height: 8px;
    /* Grigio chiaro coordinato con il bordo dell'input (var(--border) è quasi invisibile su
       bianco: questo tono è un filo più scuro, stessa famiglia neutra, ma resta leggibile). */
    border-inline-end: 2px solid #c1c5cc; border-bottom: 2px solid #c1c5cc;
    transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.cs-btn:hover { border-color: rgba(var(--p1-rgb),.4); }
.cs-wrap.open .cs-btn { border-color: var(--p1); box-shadow: 0 0 0 3px rgba(var(--p1-rgb),.12); }
.cs-wrap.open .cs-btn::after { transform: translateY(-30%) rotate(-135deg); }
.cs-menu {
    display: none; position: absolute; top: calc(100% + 6px); inset-inline-start: 0; inset-inline-end: 0; z-index: 40;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px;
    box-shadow: 0 20px 50px rgba(15,23,42,.15); max-height: 280px; overflow-y: auto;
    animation: csMenuIn .18s ease; will-change: transform, opacity;
    /* Scrollbar sottile invece di quella nativa spessa: firefox + webkit */
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
    /* Sfumatura ai bordi interni superiore/inferiore: un accenno che c'è altro contenuto sopra/sotto
       da scorrere, sempre presente ai margini indipendentemente da dove ci si trova nello scroll
       (a differenza di un'ombra fissa, la mask segue il bordo del contenitore stesso). */
    mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
.cs-menu::-webkit-scrollbar { width: 6px; }
.cs-menu::-webkit-scrollbar-track { background: transparent; }
.cs-menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
.cs-menu::-webkit-scrollbar-thumb:hover { background: var(--muted); }
@keyframes csMenuIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cs-menu { animation: none; } }
.cs-wrap.open .cs-menu { display: block; }
.cs-item { padding: 9px 12px; border-radius: 9px; font-size: .9rem; font-weight: 500; cursor: pointer; transition: background .15s; }
/* Selettore nativo "Tutte le categorie" (fallback dove il custom-select JS non è applicato):
   stesso peso intermedio delle voci per coerenza e leggibilità. */
select[name="categoria_id"] option { font-weight: 500; }
.cs-item:hover { background: var(--grad-soft); color: var(--p1); }
.cs-item.active { background: var(--grad); color: #fff; font-weight: 600; }
.cs-item.disabled { color: var(--muted); cursor: not-allowed; opacity: .6; }
.cs-item-hidden { display: none; }
.cs-search {
    width: 100%; border: 1px solid transparent; border-radius: 9px; padding: 7px 10px; font-size: .85rem;
    margin-bottom: 8px; position: sticky; top: 0; background: var(--soft); color: var(--ink);
    transition: border-color .15s, background .15s;
}
.cs-search::placeholder { color: var(--muted); }
.cs-search:focus { outline: none; background: var(--surface); border-color: rgba(var(--p1-rgb),.35); box-shadow: 0 0 0 3px rgba(var(--p1-rgb),.08); }

/* ─── Wizard "Pubblica richiesta" ─────────────────────────── */
.wiz-wrap { max-width: 720px; }

.wiz-progress { display: flex; align-items: flex-start; justify-content: center; gap: 0; }
.wiz-step { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 90px; text-align: center; }
.wiz-dot {
    width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--surface); border: 2px solid var(--border); color: var(--muted); font-weight: 700; font-size: 1.05rem;
    transition: all .3s ease;
}
.wiz-step.active .wiz-dot {
    background: var(--grad); border-color: transparent; color: #fff;
    box-shadow: 0 0 0 6px rgba(var(--p1-rgb),.14); transform: scale(1.08);
    animation: wizDotPulse 2.4s ease-in-out infinite;
}
@keyframes wizDotPulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(var(--p1-rgb),.14); }
    50% { box-shadow: 0 0 0 11px rgba(var(--p1-rgb),.04); }
}
.wiz-step.done .wiz-dot { background: var(--green); border-color: transparent; color: #fff; }
.wiz-label { font-size: .78rem; font-weight: 600; color: var(--muted); transition: color .3s ease; }
/* Step cliccabili (classe aggiunta via JS solo dove il click è gestito): affordance di navigabilità */
.wiz-step-clickable { cursor: pointer; }
.wiz-step-clickable .wiz-dot { transition: all .3s ease, border-color .15s ease, color .15s ease; }
.wiz-step-clickable:not(.active):not(.done):hover .wiz-dot { border-color: var(--p1); color: var(--p1); }
.wiz-step-clickable:hover .wiz-label { color: var(--p1); }
.wiz-step.active .wiz-label { color: var(--p1); }
.wiz-step.done .wiz-label { color: var(--green); }
.wiz-line { flex: 1; height: 2px; background: var(--border); margin-top: 21px; max-width: 60px; position: relative; top: 0; transition: background .3s ease; }
/* Il progresso ora si vede qui invece che in una barra % separata sopra (rimossa): la linea dopo
   uno step completato si colora, dando continuità visiva senza un secondo indicatore scollegato. */
.wiz-step.done + .wiz-line { background: var(--green); }

.wiz-card {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--p1-rgb),.03) 0%, var(--surface) 46%);
    border: 1px solid var(--border); border-radius: 24px; padding: 32px;
    box-shadow: 0 30px 70px -18px rgba(var(--p1-rgb),.20), 0 4px 14px rgba(15,23,42,.05);
    animation: wizCardIn .5s cubic-bezier(.22,1,.36,1) backwards;
}
/* Barra gradiente in cima alla card: stessa firma visiva delle card "premium" già in home
   (annuncio-card). NIENTE overflow:hidden sulla card — dentro vivono i dropdown assoluti dei picker
   (competenze/città) che verrebbero tagliati — quindi la barra si arrotonda da sé sui due angoli alti. */
.wiz-card::before {
    content: ''; position: absolute; top: 0; inset-inline: 0; height: 5px;
    background: var(--grad-vivid); border-radius: 24px 24px 0 0;
}
@keyframes wizCardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Card ambiente PayPal (Admin → Pagamenti, sandbox/live): ingresso a comparsa al caricamento
   (pagina statica, non serve IntersectionObserver) + lift all'hover; quella attiva ha un badge
   con un pulse discreto per farla risaltare senza essere invadente. */
.pagamenti-env-card {
    animation: pagamentiCardIn .45s ease backwards;
    transition: transform .2s ease, box-shadow .2s ease;
}
.col-lg-6:nth-of-type(1) .pagamenti-env-card { animation-delay: .05s; }
.col-lg-6:nth-of-type(2) .pagamenti-env-card { animation-delay: .12s; }
.pagamenti-env-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15,23,42,.1); }
.pagamenti-badge-active { animation: pagamentiBadgePulse 2.2s ease-in-out infinite; }
@keyframes pagamentiCardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pagamentiBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.35); }
    50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
@media (prefers-reduced-motion: reduce) {
    .pagamenti-env-card, .pagamenti-badge-active { animation: none !important; }
}

/* ─── Switch on/off stile iOS (sostituisce le checkbox nude nelle impostazioni) ── */
.ios-switch { position: relative; display: inline-block; width: 46px; height: 27px; flex-shrink: 0; cursor: pointer; }
.ios-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ios-switch .ios-switch-track {
    position: absolute; inset: 0; background: #e2e2e6; border-radius: 999px; transition: background-color .2s;
}
.ios-switch .ios-switch-track::before {
    content: ''; position: absolute; height: 23px; width: 23px; inset-inline-start: 2px; top: 2px; background: var(--surface);
    border-radius: 50%; transition: transform .25s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 2px 5px rgba(0,0,0,.25);
}
.ios-switch input:checked + .ios-switch-track { background: #34c759; }
.ios-switch input:checked + .ios-switch-track::before { transform: translateX(19px); }
.ios-switch input:disabled + .ios-switch-track { opacity: .5; cursor: not-allowed; }
/* Piccolo "respiro" quando si preme il toggle: feedback tattile immediato prima della risposta server */
.ios-switch:active .ios-switch-track::before { width: 27px; }
@media (prefers-reduced-motion: reduce) { .ios-switch:active .ios-switch-track::before { width: 23px; } }

/* Testo di stato dopo un salvataggio riuscito ("Salvato.", "Preferenza salvata."): comparsa morbida */
.settings-status-ok { animation: settingsSavedPop .3s ease; }
@keyframes settingsSavedPop { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ─── Sotto-tab dentro la tab "Account" (Notifiche / Visibilità / Accesso) ── */
.account-subtabs { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.account-subtab {
    border: none; background: none; color: var(--muted); font-weight: 600; font-size: .88rem;
    padding: 8px 14px; border-radius: 10px 10px 0 0; position: relative; top: 1px;
}
.account-subtab:hover { color: var(--p1); }
.account-subtab.active { color: var(--p1); border-bottom: 2px solid var(--p1); }
.account-subpanel { display: none; }
.account-subpanel.active { display: block; animation: wizIn .25s ease; }
.wiz-panel { display: none; animation: wizIn .35s ease; }
.wiz-panel.active { display: block; }
/* Stacco tra le sezioni del wizard: ogni gruppo (etichetta + controllo) è separato dal successivo da
   un filo e più aria, così i blocchi si leggono distinti invece che ammassati. Il primo gruppo dopo
   il titolo del pannello non ha la riga sopra. Etichette leggermente più marcate = "intestazioni". */
.wiz-panel .req-detail-form-label {
    margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--border);
    font-weight: 700; font-size: .9rem;
}
.wiz-panel > h2 + .req-detail-form-label,
.wiz-panel > .req-detail-form-label:first-child {
    margin-top: 0; padding-top: 0; border-top: none;
}
@keyframes wizIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* Upload foto opzionale nel wizard */
.wiz-foto-empty {
    border: 2px dashed var(--border); border-radius: 14px; padding: 22px; text-align: center; cursor: pointer;
    color: var(--muted); transition: all .2s; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.wiz-foto-empty:hover { border-color: var(--p1); background: var(--grad-soft); color: var(--p1); }
.wiz-foto-empty i { font-size: 1.6rem; }
.wiz-foto-preview { position: relative; display: inline-block; }
.wiz-foto-preview img { max-width: 100%; max-height: 220px; border-radius: 14px; display: block; box-shadow: 0 8px 24px rgba(15,23,42,.1); }
#wizFotoPreviewGrid .wiz-foto-preview img { width: 84px; height: 84px; max-height: 84px; object-fit: cover; border-radius: 12px; }
.wiz-foto-remove {
    position: absolute; top: -10px; inset-inline-end: -10px; width: 30px; height: 30px; border-radius: 50%; border: none;
    background: var(--surface); color: #dc2626; box-shadow: 0 4px 12px rgba(15,23,42,.18); display: flex; align-items: center; justify-content: center;
    transition: transform .15s;
}
.wiz-foto-remove:hover { transform: scale(1.1); }

/* Step 1: griglia categorie cliccabili */
.wiz-cat-grid { max-height: 360px; overflow-y: auto; padding-inline-end: 4px; }
.wiz-cat-btn {
    display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 16px 10px;
    border: 2px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--ink); cursor: pointer;
    transition: all .2s ease; position: relative; font-size: .86rem; font-weight: 600;
}
.wiz-cat-btn:hover { border-color: rgba(var(--p1-rgb),.5); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(var(--p1-rgb),.12); }
.wiz-cat-btn .cat-icon-wrap { width: 44px; height: 44px; border-radius: 12px; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.wiz-cat-btn:hover .cat-icon-wrap { transform: scale(1.08) rotate(-5deg); }
.wiz-cat-btn .cat-icon-wrap i { font-size: 1.3rem; }
.wiz-cat-btn .wiz-cat-check { display: none; position: absolute; top: 8px; inset-inline-end: 8px; color: var(--green); font-size: 1.1rem; }
.wiz-cat-btn.selected { border-color: var(--p1); background: var(--grad-soft); box-shadow: 0 12px 28px rgba(var(--p1-rgb),.22); animation: wizPop .4s cubic-bezier(.34,1.56,.64,1); }
.wiz-cat-btn.selected .wiz-cat-check { display: block; animation: wizCheckPop .32s ease; }
@keyframes wizPop { 0% { transform: scale(.96); } 55% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes wizCheckPop { from { transform: scale(0) rotate(-45deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Step 3: budget con simbolo euro */
/* ─── Validazione inline in tempo reale (generata via JS, vedi app.js) ──── */
/* ─── Contatore caratteri sui textarea lunghi (generato via JS) ──────────── */
/* ─── Icona "X" per svuotare i campi di ricerca (generata via JS) ────────── */
.clearable-search-wrap { position: relative; }
.clearable-search-wrap input { padding-inline-end: 34px; }
.clearable-search-btn {
    position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%) scale(.7); width: 26px; height: 26px;
    border: none; background: transparent; color: var(--muted); border-radius: 50%; font-size: .82rem;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease, background .15s, color .15s;
}
.clearable-search-btn.show { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
.clearable-search-btn:hover { background: var(--soft); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .clearable-search-btn { transition: opacity .15s; } }

/* ─── Occhio mostra/nascondi password (generato via JS) ──────────────────── */
.password-field-wrap { position: relative; }
.password-field-wrap input[type="password"], .password-field-wrap input[type="text"] { padding-inline-end: 40px; }
.password-toggle-btn {
    position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
    border: none; background: transparent; color: var(--muted); border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: .95rem; transition: color .15s, background .15s;
}
.password-toggle-btn:hover { color: var(--ink); background: var(--soft); }

.char-counter-wrap { position: relative; }
.char-counter-wrap textarea { padding-bottom: 24px; }
.char-counter {
    position: absolute; inset-inline-end: 10px; bottom: 8px; font-size: .72rem; font-weight: 600;
    color: var(--muted); background: rgba(255,255,255,.85); padding: 1px 6px; border-radius: 6px;
    pointer-events: none; transition: color .15s ease;
}
.char-counter-warn { color: #dc2626; animation: charCounterPulse .5s ease; }
@keyframes charCounterPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .char-counter-warn { animation: none; } }

.field-wrap { position: relative; }
/* Il validatore inline (assets/js/app.js) avvolge OGNI input/select del sito in questo div, che
   essendo un blocco normale (non flex) rompe il layout icona+campo di .req-filter-field
   (categoria/contratto/città/ecc su lavoro.php, richieste.php, professionisti.php): il campo
   selezionabile non riempiva più la card, lasciando spazi vuoti dove affioravano altri elementi
   sottostanti (segnalato come "conflitto" fra il dropdown città e i filtri). .field-error-msg resta
   a larghezza zero: è normalmente invisibile (max-height:0) e non deve comunque contare nella riga. */
.req-filter-field .field-wrap { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.req-filter-field > .field-error-msg { flex: 0 0 0; width: 0; overflow: hidden; }
.field-wrap input, .field-wrap textarea, .field-wrap select { transition: border-color .2s ease, box-shadow .2s ease; }
.field-check-icon {
    position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%) scale(.6); font-size: .95rem;
    color: #16a34a; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.field-wrap:has(textarea) .field-check-icon { top: 16px; transform: translateY(0) scale(.6); }
.field-wrap.is-valid .field-check-icon { opacity: 1; transform: translateY(-50%) scale(1); }
.field-wrap:has(textarea).is-valid .field-check-icon { transform: translateY(0) scale(1); }
.field-wrap.is-valid input, .field-wrap.is-valid textarea, .field-wrap.is-valid select { border-color: #16a34a !important; padding-inline-end: 36px; }
.field-wrap.is-invalid input, .field-wrap.is-invalid textarea, .field-wrap.is-invalid select { border-color: #ef4444 !important; }
.field-wrap.is-invalid:focus-within input, .field-wrap.is-invalid:focus-within textarea { box-shadow: 0 0 0 .2rem rgba(239,68,68,.15); }
/* Niente più display:none→flex (un salto secco, non transizionabile): il messaggio resta sempre
   nel flusso ma con max-height:0 + opacity:0, così può scivolare fuori morbidamente quando
   l'errore scatta, invece di comparire di colpo. overflow:hidden nasconde il testo mentre
   max-height è 0 senza doverlo rimuovere dal DOM. */
.field-error-msg {
    display: flex; align-items: center; gap: 6px; color: #ef4444; font-size: .78rem;
    max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
    transition: max-height .25s ease, opacity .2s ease .05s, margin-top .25s ease;
}
.field-wrap.is-invalid + .field-error-msg { max-height: 40px; opacity: 1; margin-top: 5px; }
@media (prefers-reduced-motion: reduce) { .field-error-msg { transition: opacity .15s; } }
@keyframes fieldShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.field-shake { animation: fieldShake .4s ease; }
@media (prefers-reduced-motion: reduce) {
    .field-shake { animation: none; }
    .field-check-icon, .field-wrap input, .field-wrap textarea, .field-wrap select { transition: none; }
}

.wiz-euro { position: relative; }
.wiz-euro span { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; pointer-events: none; }
.wiz-euro input { padding-inline-start: 30px; }

/* Step 3: urgenza a card */
.wiz-urg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.wiz-urg-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px;
    border: 2px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; transition: all .2s ease;
}
.wiz-urg-btn i { font-size: 1.3rem; color: var(--muted); transition: color .2s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.wiz-urg-btn span { font-weight: 700; font-size: .88rem; }
.wiz-urg-btn small { color: var(--muted); font-size: .72rem; }
.wiz-urg-btn:hover { border-color: rgba(var(--p1-rgb),.5); transform: translateY(-3px); box-shadow: 0 12px 24px rgba(var(--p1-rgb),.1); }
.wiz-urg-btn:hover i { transform: scale(1.14); color: var(--p1); }
.wiz-urg-btn.selected { border-color: var(--p1); background: var(--grad-soft); box-shadow: 0 8px 20px rgba(var(--p1-rgb),.16); animation: wizPop .4s cubic-bezier(.34,1.56,.64,1); }
.wiz-urg-btn.selected i { color: var(--p1); }

/* Step 4: riepilogo — righe cliccabili (bottone) per tornare a modificare lo step relativo */
.wiz-summary-row {
    display: flex; align-items: flex-start; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--border);
    width: 100%; background: none; border-inline-start: none; border-inline-end: none; border-top: none; text-align: start;
    cursor: pointer; border-radius: 10px; transition: background .15s;
}
.wiz-summary-row:hover { background: var(--grad-soft); }
.wiz-summary-row:last-child { border-bottom: none; }
.wiz-summary-row > i:first-child { width: 36px; height: 36px; border-radius: 10px; background: var(--grad-soft); color: var(--p1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; transition: transform .2s ease, background .2s ease; }
.wiz-summary-row:hover > i:first-child { transform: scale(1.08); background: var(--grad); color: #fff; }
.wiz-summary-row strong { display: block; font-size: .92rem; }
.wiz-summary-row span { color: var(--muted); font-size: .84rem; word-break: break-word; }
.wiz-summary-row > div { flex: 1; min-width: 0; }
.wiz-summary-edit { color: var(--muted); font-size: .9rem; flex-shrink: 0; align-self: center; opacity: 0; transition: opacity .15s; }
.wiz-summary-row:hover .wiz-summary-edit { opacity: 1; }

/* Banner "riprendi bozza" */
.wiz-draft-banner {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--grad-soft); color: var(--ink);
    border: 1px solid rgba(var(--p1-rgb),.2); border-radius: 16px; padding: 14px 18px; margin-bottom: 20px; font-size: .88rem;
}
.wiz-draft-banner i { color: var(--p1); font-size: 1.2rem; flex-shrink: 0; }
.wiz-draft-banner span { flex: 1; min-width: 200px; }

/* Navigazione step */
.wiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.wiz-nav-error { flex: 1; text-align: center; }

@media (max-width: 576px) {
    .wiz-card { padding: 20px; border-radius: 18px; }
    .wiz-card::before { border-radius: 18px 18px 0 0; }
    .wiz-step { width: 64px; }
    .wiz-label { font-size: .68rem; }
    .wiz-line { max-width: 30px; }
}

/* Rispetta chi ha ridotto le animazioni di sistema: niente pulse/pop/lift, solo gli stati finali. */
@media (prefers-reduced-motion: reduce) {
    .wiz-card, .wiz-step.active .wiz-dot,
    .wiz-cat-btn.selected, .wiz-cat-btn.selected .wiz-cat-check, .wiz-urg-btn.selected { animation: none !important; }
    .wiz-cat-btn, .wiz-urg-btn, .wiz-cat-btn .cat-icon-wrap, .wiz-urg-btn i,
    .wiz-summary-row > i:first-child { transition: none; }
    .wiz-cat-btn:hover, .wiz-urg-btn:hover { transform: none; }
    .wiz-cat-btn:hover .cat-icon-wrap, .wiz-urg-btn:hover i, .wiz-summary-row:hover > i:first-child { transform: none; }
}

/* Slider raggio di lavoro */
.range-value { color: var(--p1); font-weight: 700; }
.form-range::-webkit-slider-thumb { background: var(--p1); }
.form-range::-moz-range-thumb { background: var(--p1); }
.form-range::-webkit-slider-runnable-track { background: var(--grad-soft); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(var(--p1-rgb),.25); }

/* Ricerca categorie nel profilo professionista */
.cat-search { position: relative; }
/* Selettore diretto (>), non discendente generico: altrimenti intercetta anche le icone dentro
   ai risultati dell'autocomplete (.hero-search-suggest .hs-item i, annidate più in profondità),
   strappandole dal flusso flex e facendole "galleggiare" a sinistra sopra l'elenco (bug segnalato). */
.cat-search > i { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: .9rem; }
.cat-search .form-control { padding-inline-start: 34px; border-radius: 12px; }
/* Campi "cerca da elenco chiuso" senza icona a sinistra (competenze/patenti/lingue/orari/benefit e
   ricerca categoria del wizard): il testo parte dal bordo come negli altri input invece di restare
   rientrato. La ricerca città (.geo-search) tiene le sue icone (lente/spinner), quindi resta a 40px. */
.cat-search:not(:has(> i)) .form-control { padding-inline-start: .75rem; }

/* Icona di ricerca vs spinner di caricamento (autocomplete indirizzi): entrambe più grandi e con
   colore pieno (non var(--muted), troppo tenue su 12-16px per essere notato — bug segnalato più
   volte: tecnicamente presente ma percepito come "mancante" per basso contrasto/dimensione). */
.cat-search .geo-icon-idle { color: var(--ink); font-size: 1.05em; }
.cat-search .geo-icon-loading { display: none; color: var(--p1); font-size: 1.05em; animation: geoSpin .7s linear infinite; }
.cat-search.loading .geo-icon-idle { display: none; }
.cat-search.loading .geo-icon-loading { display: block; }
@keyframes geoSpin { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } }

/* ─── Profilo pro: layout sidebar + contenuti ────────────── */
.pro-layout { display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start; }
.pro-sidebar {
    position: sticky; top: 90px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
    padding: 20px; box-shadow: 0 8px 24px rgba(15,23,42,.04);
}
.pro-sidebar-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.pro-sidebar-head-link { color: inherit; text-decoration: none; border-radius: 12px; margin: -6px -6px 8px; padding: 6px 6px 14px; transition: background-color .15s; }
.pro-sidebar-head-link:hover { background: var(--soft); color: inherit; }
/* Nome utente e riga di stato (saluto/email) nel box riassuntivo in alto nella sidebar: prima
   ereditavano la taglia di default del testo/.small, un po' minute per essere il primo elemento
   che si legge entrando in dashboard/account — qui esplicitamente più grandi delle rispettive basi. */
.pro-sidebar-head .fw-bold { font-size: 1.08rem; }
.pro-sidebar-head .small { font-size: .86rem; }
.pro-avatar {
    width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
    box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(var(--p1-rgb),.3); flex-shrink: 0; overflow: hidden;
}
.pro-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Anello intorno all'avatar per i piani a pagamento (Pro/Business): stessi due gradienti già usati
   per il badge/coroncina in chat.php (.chat-avatar-crown, riusata identica qui sotto), per coerenza
   visiva invece di inventare una terza palette solo per la dashboard. */
.pro-avatar-premium { border-radius: 50%; padding: 3px; }
.pro-avatar-premium-pro { background: linear-gradient(135deg,#475569,#1e293b); }
.pro-avatar-premium-business { background: linear-gradient(135deg,#1e293b,#0f172a); }
.pro-progress-mini { margin-bottom: 18px; }

/* Card onboarding "Completa il tuo profilo" (dashboard professionista, tab Panoramica) */
.onboard-card {
    background: linear-gradient(135deg, rgba(var(--p1-rgb),.04), rgba(99,102,241,.03));
    border-radius: 20px; padding: 22px 24px; border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(var(--p1-rgb),.06);
}
.onboard-pct { font-weight: 800; font-size: 1.3rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.onboard-checklist { display: flex; flex-wrap: wrap; gap: 8px; }
.onboard-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
    font-size: .85rem; font-weight: 600; text-decoration: none; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    transition: all .15s;
}
.onboard-item:not(.onboard-done):hover { border-color: var(--p1); color: var(--p1); transform: translateY(-1px); }
.onboard-item i { font-size: .95rem; }
.onboard-item.onboard-done { color: #16a34a; border-color: #bbf7d0; background: #f0fdf4; opacity: .85; }

/* Badge di compatibilità sulle card richieste (dashboard professionista) */
.req-compat-badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700;
    padding: 4px 10px; border-radius: 999px; margin-bottom: 8px;
}
.req-compat-ideale { background: var(--grad); color: #fff; }
.req-compat-alta { background: #dcfce7; color: #15803d; }
.pro-req-cta-fatto {
    background: #f1f5f9 !important; color: var(--muted) !important; opacity: .75; cursor: default;
    box-shadow: none !important;
}
.pro-req-cta-fatto:hover { transform: none !important; box-shadow: none !important; }

/* Checklist motivi di compatibilità (dashboard professionista, card richieste) */
.req-compat-checklist { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.req-compat-check { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 600; cursor: help; }
.req-compat-check.ok { background: #dcfce7; color: #15803d; }
.req-compat-check.ko { background: #fef2f2; color: #b91c1c; }
.req-compat-check.na { background: #f1f5f9; color: var(--muted); }

/* Bottone "Salva profilo": neutro (bianco/bordo), non l'accent colorato usato per le CTA di conversione */
.btn-save-neutral { background: var(--surface); color: var(--ink); border: 1px solid var(--border); font-weight: 600; }
.btn-save-neutral:hover { background: #f8f9fa; color: var(--ink); border-color: var(--muted); }

/* Funnel di conversione (dashboard professionista, tab Panoramica) */
.funnel-wrap { display: flex; flex-direction: column; gap: 10px; }
.funnel-step { display: grid; grid-template-columns: 1fr 3fr auto; align-items: center; gap: 12px; }
.funnel-step-bar-wrap { background: var(--border); border-radius: 999px; height: 10px; overflow: hidden; grid-column: 2; order: 2; }
.funnel-step-bar { height: 100%; background: var(--grad); border-radius: 999px; transition: width .6s ease; }
.funnel-step-label { font-size: .85rem; font-weight: 600; grid-column: 1; order: 1; white-space: nowrap; }
.funnel-step-n { font-weight: 800; grid-column: 3; order: 3; min-width: 30px; text-align: end; }
@media (max-width: 576px) {
    .funnel-step { grid-template-columns: 1fr auto; }
    .funnel-step-bar-wrap { grid-column: 1 / -1; order: 3; }
}
.pro-progress-bar { height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
.pro-progress-bar span { display: block; height: 100%; background: var(--grad); border-radius: 999px; transition: width .6s ease; }
.pro-nav { display: flex; flex-direction: column; gap: 3px; }
.pro-nav-sep { border-top: 1px solid var(--border); margin: 8px 4px; }
.pro-nav-link {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
    color: var(--ink); text-decoration: none; font-weight: 500; font-size: .92rem;
    /* Transizione di colore graduale (300ms) al passaggio del mouse, invece di uno scatto quasi
       istantaneo (era .15s) — più percepibile senza risultare lenta. */
    transition: background-color .3s ease, color .3s ease;
    position: relative;
}
/* Centratura millimetrica dell'icona rispetto al testo accanto: un semplice "text-align:center"
   sul carattere non basta, perché i glifi Font Awesome hanno ciascuno un bounding box leggermente
   diverso (alcuni "pesano" più in alto/in basso all'interno del proprio riquadro) — trasformando
   l'icona in un mini flex-box quadrato centrato su entrambi gli assi si ottiene un allineamento
   verticale identico per ogni voce del menu, non solo un'approssimazione visiva. */
.pro-nav-link i {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 1.05rem; width: 22px; height: 22px; flex-shrink: 0; transition: color .3s ease;
}
.pro-nav-link:hover { background: var(--soft); color: var(--p1); }
.pro-nav-link:hover i { color: var(--p1); }
.pro-nav-link.active { background: var(--grad-soft); color: var(--p1); font-weight: 700; }
.pro-nav-link.active i { color: var(--p1); }
.pro-nav-link span { flex-grow: 1; }
/* Pallino di stato sezione: entrambi i glyph (fa-solid fa-circle / fa-regular fa-circle) hanno le
   stesse metriche perché sono la stessa icona nella stessa font, con weight diverso — quindi si
   allineano perfettamente in colonna a fine riga della sidebar. Verde brand per il completato
   (fill), verde tenue con opacità ridotta per il "da fare" (outline). Vecchio approccio
   fa-circle-check + ::after ambra: due tecniche diverse = pallini disallineati verticalmente. */
.pro-nav-link .sec-status { flex-shrink: 0; font-size: .85rem; line-height: 1; }
.pro-nav-link .sec-status.sec-status-done { color: var(--green); }
.pro-nav-link .sec-status.sec-status-todo { color: var(--green); opacity: .35; }
/* Alias legacy per compatibilità con eventuali altri usi (admin sidebar, ecc.) */
.pro-nav-link .sec-done { color: var(--green); font-size: .85rem; flex-shrink: 0; }
/* Riepilogo "X/7 sezioni completate" sopra le voci con spunta verde: raggruppa in un solo posto
   il senso di avanzamento che prima si poteva cogliere solo scorrendo tutte le voci una per una. */
.pro-nav-sezioni-riepilogo { padding: 2px 12px 10px; font-size: .74rem; color: var(--muted); font-weight: 600; }
.pro-nav-sezioni-riepilogo .pro-progress-bar { height: 4px; margin-top: 5px; }

/* "Il tuo CV" attivo: stato più marcato del generico sfondo tenue delle altre voci — sfondo pieno
   in gradiente, testo/icona bianchi, ombra colorata. È la sezione più corposa della sidebar (CV,
   modello, video, esperienze, istruzione, raccomandazioni...), merita di risaltare più delle altre
   quando è quella aperta, non solo un tono di sfondo leggermente diverso. */
.pro-nav-link-cv.active {
    background: var(--grad); color: #fff; box-shadow: 0 4px 14px rgba(var(--p1-rgb),.35);
}
.pro-nav-link-cv.active i { color: #fff; }

/* Sidebar admin raggruppata: header di gruppo collassabile (stessa lingua visiva di .pro-nav-link,
   ma è un <button>, non un link) + freccia che ruota in base allo stato aperto/chiuso. */
.admin-nav-group-toggle {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px;
    background: none; border: none; color: var(--muted); text-align: start;
    font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .4px;
    transition: background .15s, color .15s;
}
.admin-nav-group-toggle:hover, .admin-nav-group-toggle.active { background: var(--soft); color: var(--p1); }
.admin-nav-group-toggle i:first-child { font-size: .95rem; width: 20px; text-align: center; }
.admin-nav-group-toggle span { flex-grow: 1; }
.admin-nav-group-chevron { font-size: .68rem !important; width: auto !important; transition: transform .2s; }
.admin-nav-group-badge { font-size: .68rem; font-weight: 700; letter-spacing: normal; text-transform: none; }
.admin-nav-group-toggle[aria-expanded="true"] .admin-nav-group-chevron { transform: rotate(180deg); }
.admin-nav-group-body { padding-inline-start: 8px; border-inline-start: 2px solid var(--border); margin: 2px 0 4px 20px; }
.pro-back-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--border); color: var(--muted); font-size: .82rem; text-decoration: none; width: 100%;
}
.pro-back-link:hover { color: var(--p1); }

/* Contenuti pannello — solo la .active è visibile (tab pane) */
.pro-content { min-width: 0; }
.pro-panel {
    display: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 40px; margin-bottom: 20px;
    animation: panelFadeIn .25s ease;
}
.pro-panel.active { display: block; }
@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.pro-panel-head {
    display: flex; align-items: center; gap: 14px; margin-bottom: 28px; padding: 20px 24px;
    background: linear-gradient(135deg, rgba(var(--p1-rgb),.04) 0%, rgba(var(--p2-rgb),.03) 100%);
    border: 1px solid var(--border); border-radius: 16px;
}
/* Le tante sotto-sezioni separate da <hr> (es. includes/cv_panel.php: CV, modello, video, anagrafica,
   esperienze, istruzione, raccomandazioni...) stavano troppo addossate con lo spacing di default di
   Bootstrap (1rem): più respiro verticale = aree informative più distinte, meno carico cognitivo
   nello scorrere una card così densa. */
/* Bootstrap di default disegna <hr> con opacity:.25 su currentColor: su testo scuro risultava un
   grigio più marcato del previsto, non il "grigio chiarissimo e sottile" voluto per separare le
   sezioni senza attirare l'attenzione. Qui: colore fisso (var(--border), già il grigio chiaro
   standard del sito), opacità piena e spessore 1px espliciti invece di derivarli dal testo. */
.pro-panel hr { margin-block: 32px; border: 0; border-top: 1px solid var(--border); opacity: 1; }

.prof-group { background: var(--soft); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 14px; overflow: hidden; transition: box-shadow .2s; }
.prof-group:hover { box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.prof-group-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; user-select: none; transition: background .15s; }
.prof-group-head:hover { background: rgba(99,102,241,.04); }
.prof-group-head .pg-ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .95rem; color: #fff; flex-shrink: 0; }
.prof-group-head .pg-title { font-weight: 600; font-size: .92rem; color: var(--ink); flex-grow: 1; }
.prof-group-head .pg-chevron { color: var(--muted); font-size: .75rem; transition: transform .25s; }
.prof-group.is-collapsed .pg-chevron { transform: rotate(-90deg); }
.prof-group-body { padding: 4px 20px 20px; }
.prof-group.is-collapsed .prof-group-body { display: none; }

@media (max-width: 767px) { .pro-panel { padding: 24px; } .pro-panel hr { margin-block: 26px; } .prof-group-head { padding: 14px 16px; } .prof-group-body { padding: 4px 16px 16px; } }

/* ─── Gerarchia tipografica rigida (dashboard professionista): H1 > H2 > H3 ──
   H1 = .dash-greet (saluto, già definito sotto). H2 = titolo di sezione/pannello
   (già marcato .h5.fw-bold in markup: qui aggiungiamo solo lo spazio sopra e il
   colore pieno, senza toccare i margin-bottom già calibrati per-istanza).
   H3 = sotto-sezione interna a una card (.h6.fw-bold): stesso colore ma un filo
   più leggero, per restare visivamente subordinato a H2. */
.pro-content h2.h5, .pro-panel-head h2 { margin-top: 2px; color: var(--ink); letter-spacing: -.2px; }
.pro-content h3.h6 { color: var(--ink); opacity: .88; }
.pro-content .req-detail-card + .req-detail-card,
.pro-content .dash-section-title + .row { margin-top: 4px; }
/* Campi compilati SOLO dalla selezione di un suggerimento nell'autocomplete: readonly, mai digitabili
   a mano, per evitare città/provincia/CAP inventati o incoerenti con l'indirizzo cercato. */
.pro-panel .form-control[readonly] { background: var(--soft); color: var(--muted); cursor: not-allowed; }
.pro-info-note {
    background: var(--grad-soft); border-radius: 14px; padding: 16px 18px;
}
.pro-actions {
    display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 -6px 20px rgba(15,23,42,.05);
    position: sticky; bottom: 20px; z-index: 5; flex-wrap: wrap;
}

/* Responsive: sidebar sopra ai contenuti su schermi piccoli */
@media (max-width: 991px) {
    .pro-layout { grid-template-columns: 1fr; gap: 20px; }
    .pro-sidebar { position: static; min-width: 0; }
    /* Prima era una singola riga scrollabile orizzontalmente con SOLO icone (etichetta nascosta
       tranne sulla voce attiva): con 11 voci nella sidebar del professionista, la maggior parte
       restava fuori schermo e serviva scorrere lateralmente "alla cieca" per trovarle (segnalato:
       "in mobile la dashboard non è ottimizzata"). Ora è una griglia di chip icona+etichetta che
       va a capo: tutte le voci restano visibili e leggibili, nessuno scroll nascosto necessario. */
    .pro-nav { flex-direction: row; flex-wrap: wrap; overflow-x: visible; gap: 6px; margin: 0; padding: 0; }
    .pro-nav .pro-nav-link {
        flex-shrink: 0; flex-grow: 0; gap: 6px; padding: 7px 12px; font-size: .78rem;
        border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
    }
    .pro-nav .pro-nav-link.active { border-color: transparent; }
    .pro-nav .pro-nav-link i { font-size: .82rem; width: auto; }
    .pro-nav .pro-nav-link span { display: inline; flex-grow: 0; }
    .pro-nav .pro-nav-link .badge { font-size: .6rem; padding: .22em .45em; }
    .pro-back-link { display: none; }
    .pro-nav-sep { display: none; }
}

/* ─── Admin ──────────────────────────────────────────────── */
/* Il pannello admin è usato solo da iPad/schermi grandi: niente bisogno del .container stretto
   pensato per le pagine marketing. Più largo, ma non edge-to-edge sui monitor ultra-wide. */
.admin-wide { max-width: 1600px; padding-inline-start: 24px; padding-inline-end: 24px; }
@media (max-width: 575px) { .admin-wide { padding-inline-start: 14px; padding-inline-end: 14px; } }

.admin-kpi { border: 1px solid var(--border); border-radius: 16px; padding: 18px; background: var(--surface); }
.admin-kpi .n { font-weight: 800; font-size: 1.8rem; }
.admin-kpi .l { color: var(--muted); font-size: .82rem; }

.admin-avatar { background: linear-gradient(135deg,#dc2626,#991b1b) !important; }
.admin-sidebar .pro-nav-link.active { background: linear-gradient(135deg, rgba(220,38,38,.10), rgba(153,27,27,.10)); color: #dc2626; }
.admin-sidebar .pro-nav-link.active i { color: #dc2626; }

.admin-hero {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%); border-radius: 22px; padding: 28px 30px;
    position: relative; overflow: hidden;
}
.admin-hero::before {
    content: ''; position: absolute; top: -50%; inset-inline-end: -10%; width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(220,38,38,.18) 0%, transparent 70%); pointer-events: none;
}

.admin-alert {
    display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1px solid #fde68a; border-radius: 18px; padding: 16px 20px; color: #92400e;
}
.admin-alert i { font-size: 1.6rem; color: #f59e0b; flex-shrink: 0; }

/* Teaser "sblocca con Pro" sulle statistiche avanzate (dashboard professionista, piano Free):
   stesso schema di .admin-alert ma tono neutro/blu, non un avviso — è un invito, non un problema.
   min-height fissa: i due banner (statistiche/funnel) restano identici anche se il testo cambia. */
.stats-locked-teaser {
    display: flex; align-items: center; gap: 14px; background: #f8fafc; min-height: 76px;
    border: 1px dashed var(--border); border-radius: 16px; padding: 16px 20px; color: var(--ink);
}
.stats-locked-teaser i { font-size: 1.3rem; color: var(--muted); flex-shrink: 0; }

/* CTA di upgrade premium (teaser statistiche, tab Premium, ecc.): deve leggersi subito come
   "premium", non come un bottone di navigazione qualunque (es. "Trova lavori") — sfumatura di
   brand + lift/glow all'hover. Classe standalone, riusabile ovunque serva una CTA di upgrade. */
.btn-upgrade-pro {
    background: var(--grad); border: none; color: #fff; font-weight: 600;
    box-shadow: 0 4px 14px rgba(var(--p1-rgb),.28); transition: transform .2s, box-shadow .2s;
}
.btn-upgrade-pro:hover {
    color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--p1-rgb),.38);
}

/* Card moderazione immagini */
.mod-card { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--surface); transition: all .2s; height: 100%; }
.mod-card:hover { box-shadow: 0 14px 32px rgba(15,23,42,.08); border-color: rgba(var(--p1-rgb),.25); }
.mod-card-img { position: relative; height: 180px; background: var(--soft); }
.mod-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mod-card-badge {
    position: absolute; top: 10px; inset-inline-end: 10px; background: rgba(245,158,11,.95); color: #fff;
    font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
    display: flex; align-items: center; gap: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.mod-card-body { padding: 16px; }

/* Tabelle admin arricchite */
/* overflow-x: auto (non "hidden"): su schermi stretti le tabelle con molte colonne (Professionisti,
   Richieste...) scorrono orizzontalmente invece di tagliare le colonne fuori dal riquadro. */
.admin-table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 1px; }
.admin-table-card .admin-table { min-width: 640px; }
/* border-collapse:separate (invece del default "collapse" di Bootstrap) + border-radius
   direttamente sulla tabella: gli angoli esterni arrotondati diventano una proprietà nativa
   della tabella stessa, non un effetto ottenuto "clippando" con overflow:hidden su un wrapper
   attorno. border-spacing:0 evita che "separate" introduca spazi vuoti fra le celle. Il raggio è
   ripetuto anche sulle celle d'angolo (prima/ultima th, prima/ultima td dell'ultima riga) perché
   alcuni browser non arrotondano in modo affidabile un <table> solo con overflow:hidden. */
.admin-table {
    margin-bottom: 0; border-collapse: separate; border-spacing: 0;
    border: 1px solid var(--border); border-radius: 14px;
    /* NIENTE overflow:hidden qui: clipperebbe l'header sticky sotto. Gli angoli arrotondati restano
       comunque corretti perché applicati esplicitamente a th/td d'angolo (vedi sotto). */
}
.admin-table thead th {
    background: var(--soft); color: var(--muted); font-size: .72rem; text-transform: uppercase;
    letter-spacing: .4px; font-weight: 700; padding: 12px 16px;
    border-bottom: 1px solid var(--border); border-inline-end: 1px solid var(--border);
    position: sticky; top: 0; z-index: 2; box-shadow: 0 2px 4px -2px rgba(15,23,42,.1);
}
.admin-table thead th:last-child { border-inline-end: none; }
.admin-table thead th:first-child { border-start-start-radius: 13px; }
.admin-table thead th:last-child { border-start-end-radius: 13px; }
.admin-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); border-inline-end: 1px solid var(--border); }
.admin-table tbody td:last-child { border-inline-end: none; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:last-child td:first-child { border-end-start-radius: 13px; }
.admin-table tbody tr:last-child td:last-child { border-end-end-radius: 13px; }
.admin-table tbody tr:hover { background: var(--soft); }
/* Righe cliccabili (es. "Ultimi utenti registrati" in Panoramica): prima non si poteva aprire il
   dettaglio di un utente da qui, serviva andare nella lista completa e ricercarlo (bug segnalato:
   "migliora UI" — un widget di sola lettura senza nessuna azione utile). */
.admin-row-clickable { cursor: pointer; }
.admin-row-clickable:hover .fa-chevron-right { color: var(--p1) !important; transform: translateX(2px); }
.admin-row-clickable .fa-chevron-right { transition: transform .15s, color .15s; }
.admin-table tbody tr { transition: background .15s; animation: adminRowIn .35s ease backwards; }
.admin-table tbody tr:nth-child(n+16) { animation: none; } /* tabelle lunghe: niente cascata infinita, solo le prime righe visibili */
@keyframes adminRowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .admin-table tbody tr { animation: none; } }

/* Badge azione nel Registro attività: icona + etichetta leggibile invece del codice grezzo */
.log-azione-badge { font-weight: 600; padding: 5px 10px; display: inline-flex; align-items: center; gap: 6px; }

/* Pallino "Attivo" nella tabella Professionisti/Utenti: piccolo pulse per dare un senso di "vivo"
   invece di un badge statico identico a tutti gli altri stati. */
.stato-dot-pulse { font-size: .5rem; animation: statoDotPulse 2s ease-in-out infinite; }
@keyframes statoDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .stato-dot-pulse { animation: none; } }

/* Header ordinabili (adminSortTh()): icona freccia FontAwesome invece delle vecchie classi Bootstrap
   Icons (mai caricate sul sito → quadratini vuoti). Tenue di default, colorata quando è la colonna attiva. */
.admin-sort-th {
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit;
    transition: color .15s;
}
.admin-sort-th i { font-size: .7rem; opacity: .35; transition: opacity .15s, color .15s; }
.admin-sort-th:hover { color: var(--p1); }
.admin-sort-th:hover i { opacity: .7; }
.admin-sort-th.active { color: var(--p1); }
.admin-sort-th.active i { opacity: 1; color: var(--p1); }
/* Riga categoria sotto il puntatore durante il drag&drop di riordino */
.admin-table tbody tr.js-drop-target td { box-shadow: inset 0 2px 0 var(--p1), inset 0 -2px 0 var(--p1); }

/* ─── Badge di stato arrotondati (tabelle dashboard) ──────────────────────
   Verde = esito riuscito, Ambra = in corso/attesa, Grigio = esito non positivo. */
.dash-status-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
    font-size: .72rem; font-weight: 700;
}
.dash-status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-approvato { background: rgba(22,163,74,.12); color: #16a34a; }
.badge-attesa    { background: rgba(217,119,6,.12); color: #d97706; }
.badge-scaduto   { background: rgba(100,116,139,.14); color: #475569; }

/* ─── Tabella responsive: collassa in card verticali su mobile ───────────
   Su schermi stretti ogni <tr> diventa una card autonoma con le sue label
   (da data-label sui <td>), invece di forzare uno scroll orizzontale. */
@media (max-width: 700px) {
    .admin-table-card:has(.dash-table-responsive) { overflow-x: visible; }
    table.dash-table-responsive { min-width: 0; }
    .dash-table-responsive thead { display: none; }
    .dash-table-responsive, .dash-table-responsive tbody, .dash-table-responsive tr, .dash-table-responsive td {
        display: block; width: 100%;
    }
    .dash-table-responsive tbody tr {
        border: 1px solid var(--border); border-radius: 14px; margin: 0 0 12px; padding: 10px 14px;
        box-shadow: 0 10px 26px -16px rgba(15,23,42,.16);
    }
    .dash-table-responsive tbody tr:last-child { margin-bottom: 0; }
    .dash-table-responsive tbody td {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 7px 0; border-bottom: 1px dashed var(--border); border-inline-end: none; text-align: end;
    }
    .dash-table-responsive tbody td:last-child { border-bottom: none; }
    .dash-table-responsive tbody tr:last-child td:first-child,
    .dash-table-responsive tbody tr:last-child td:last-child { border-radius: 0; }
    .dash-table-responsive tbody td::before {
        content: attr(data-label); font-weight: 700; color: var(--muted); font-size: .68rem;
        text-transform: uppercase; letter-spacing: .4px; text-align: start; flex-shrink: 0;
    }
}

/* ─── Reveal on scroll ───────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: none; }
.reveal.in-view .stagger-item { animation: staggerIn .5s ease backwards; }
.stagger-item:nth-child(1) { animation-delay: .05s; }
.stagger-item:nth-child(2) { animation-delay: .12s; }
.stagger-item:nth-child(3) { animation-delay: .19s; }
.stagger-item:nth-child(4) { animation-delay: .26s; }
.stagger-item:nth-child(5) { animation-delay: .33s; }
.stagger-item:nth-child(6) { animation-delay: .40s; }
.stagger-item:nth-child(7) { animation-delay: .47s; }
.stagger-item:nth-child(8) { animation-delay: .54s; }
.stagger-item:nth-child(9) { animation-delay: .61s; }
@keyframes staggerIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ─── Ritmo verticale uniforme tra le sezioni della home ──────
   Prima ogni sezione aveva margini ad hoc (mb-4, mb-5, niente): qui un unico spacing coerente. */
.home-section { margin-bottom: 64px; margin-top: 20px; }
.home-section:last-of-type { margin-bottom: 0; }
@media (max-width: 767px) { .home-section { margin-bottom: 44px; } }

.home-section-link { color: var(--p1); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
/* La freccia "→" era testo semplice dentro il link, non un elemento separato: il "gap" del
   flex-box qui sopra non aveva alcun figlio distinto su cui agire e non produceva alcun
   movimento reale. Isolata in un proprio <span class="link-arrow">, ora si sposta davvero. */
.link-arrow { display: inline-block; transition: transform .2s ease; }
a:hover .link-arrow { transform: translateX(2px); }

/* ─── Banner acquisizione professionisti (home) ──────────────── */
.pro-cta-banner {
    background: var(--surface); border: 1px solid var(--border); border-radius: 28px; padding: 40px 36px;
    position: relative; overflow: hidden;
}
.pro-cta-banner::before {
    content: ''; position: absolute; top: -40%; inset-inline-end: -10%; width: 320px; height: 320px; border-radius: 50%;
    background: var(--grad-soft); z-index: 0; pointer-events: none;
}
.pro-cta-banner > .row { position: relative; z-index: 1; }
.pro-cta-badge {
    display: inline-flex; align-items: center; gap: 8px; background: var(--grad-soft); color: var(--p1);
    padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700;
}
.pro-cta-points { font-size: .86rem; color: var(--ink); font-weight: 600; }
.pro-cta-points i { color: var(--green); margin-inline-end: 4px; }
@media (max-width: 576px) { .pro-cta-banner { padding: 28px 22px; border-radius: 22px; } }

/* ─── Badge inline (versione compatta, dentro "come scegliamo i pro") ── */
.trust-badge-inline {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
    /* var(--soft) invece di var(--surface): la sezione madre è ora una card bianca (.section-card),
       uno sfondo bianco su bianco appiattiva questi chip contro il bordo sottile soltanto. */
    background: var(--soft); border: 1px solid var(--border); font-size: .78rem; font-weight: 600; color: var(--ink);
}
.trust-badge-inline i { color: var(--p1); }

/* ─── Badge di fiducia (home) ─────────────────────────────── */
.trust-badge {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 18px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); height: 100%;
    transition: all .2s;
}
.trust-badge:hover { border-color: rgba(var(--p1-rgb),.3); box-shadow: 0 10px 24px rgba(15,23,42,.06); transform: translateY(-2px); }
.trust-badge i { font-size: 1.6rem; color: var(--p1); }
.trust-badge span { font-size: .82rem; font-weight: 600; }

/* ─── CTA fissa "Pubblica richiesta" (mobile) ────────────── */
.sticky-cta {
    position: fixed; bottom: 18px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 1065;
    background: var(--grad-vivid); color: #fff; font-weight: 700; font-size: .88rem;
    padding: 12px 22px; border-radius: 999px; box-shadow: 0 10px 28px var(--vivid-shadow);
    display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.sticky-cta:hover { color: #fff; transform: translateX(-50%) translateY(-2px); }
.sticky-cta.cta-raised { bottom: 100px; transition: bottom .3s ease; }
/* Il suo z-index (1065) sta sopra al drawer laterale di Bootstrap (offcanvas, 1045) e al suo
   backdrop (1040), quindi restava visibile SOPRA il menu mobile aperto invece di sparire dietro
   di esso (segnalato). Bootstrap aggiunge/rimuove .offcanvas-backdrop da <body> esattamente
   quando il menu si apre/chiude: lo usiamo per nascondere il pulsante solo mentre il menu è aperto. */
body:has(.offcanvas-backdrop) .sticky-cta { display: none; }

/* ─── Tooltip informativi "(?)" (generico, vedi app.js) ──────────────────── */
.info-tip {
    display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
    border-radius: 50%; border: 1px solid var(--border); background: var(--soft); color: var(--muted);
    font-size: .65rem; font-weight: 700; line-height: 1; padding: 0; flex-shrink: 0; cursor: help;
    transition: background .15s, color .15s, border-color .15s; vertical-align: middle; margin-inline-start: 3px;
}
.info-tip::before { content: '?'; }
.info-tip:hover, .info-tip:focus-visible { background: var(--p1); color: #fff; border-color: var(--p1); }
.info-tip-box {
    position: fixed; z-index: 3000; max-width: 240px; background: var(--ink); color: #fff;
    font-size: .78rem; line-height: 1.4; font-weight: 500; padding: 9px 12px; border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15,23,42,.25);
    opacity: 0; transform: translateY(4px) scale(.96); pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.info-tip-box.info-tip-below { transform: translateY(-4px) scale(.96); }
.info-tip-box.open { opacity: 1; transform: none; }
.info-tip-arrow {
    position: absolute; inset-inline-start: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--ink);
    transform: translateX(-50%) rotate(45deg); border-radius: 2px;
}
.info-tip-box.info-tip-below .info-tip-arrow { bottom: auto; top: -5px; }
@media (prefers-reduced-motion: reduce) { .info-tip-box { transition: opacity .15s; } }

/* ─── Torna su (compare scrollando la pagina) ────────────── */
.back-to-top {
    position: fixed; inset-inline-end: 20px; bottom: 24px; z-index: 1060;
    width: 46px; height: 46px; border-radius: 50%; border: none;
    background: var(--surface); color: var(--p1); box-shadow: 0 8px 24px rgba(15,23,42,.16);
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    opacity: 0; visibility: hidden; transform: scale(.6);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s, color .2s;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: scale(1); }
.back-to-top:hover { background: var(--grad); color: #fff; transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity .25s, visibility .25s; transform: none !important; } }
/* Sopra la tabbar mobile e la sticky-cta, così non si sovrappongono */
body:has(.mobile-tabbar) .sticky-cta { bottom: 74px; }
body:has(.mobile-tabbar) .sticky-cta.cta-raised { bottom: 140px; }
body:has(.mobile-tabbar) .back-to-top { bottom: 82px; }
.sticky-cta ~ .back-to-top { bottom: 82px; }
body:has(.mobile-tabbar) .sticky-cta ~ .back-to-top { bottom: 140px; }

/* ─── Barra di navigazione fissa in basso (mobile, utenti loggati) ──────
   Sostituisce l'apertura del menu hamburger per gli spostamenti più frequenti
   (Home/Cerca/Messaggi/Dashboard), stile app nativa. */
.mobile-tabbar {
    position: fixed; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 1060; background: var(--surface);
    border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(15,23,42,.08);
    display: flex; align-items: stretch; padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 8px 4px; color: var(--muted); text-decoration: none; font-size: .68rem; font-weight: 600;
    position: relative; transition: color .15s;
}
.mobile-tab i { font-size: 1.25rem; }
.mobile-tab.active { color: var(--p1); }
.mobile-tab-badge {
    position: absolute; top: 4px; inset-inline-end: calc(50% - 18px); background: var(--grad); color: #fff;
    font-size: .6rem; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px; box-shadow: 0 0 0 2px #fff;
}
/* Pulsante centrale "+" più prominente (stile FAB), non solo un'altra icona uguale alle altre */
.mobile-tab-cta {
    flex: 0 0 54px; margin: 0 2px;
}
.mobile-tab-cta i {
    width: 46px; height: 46px; border-radius: 50%; background: var(--grad-vivid); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    box-shadow: 0 6px 16px var(--vivid-shadow); transform: translateY(-14px); transition: transform .15s;
}
.mobile-tab-cta:active i { transform: translateY(-14px) scale(.92); }
/* Spazio in fondo alla pagina per non far finire i contenuti sotto la tabbar fissa (solo mobile,
   dove la tabbar è effettivamente visibile — su desktop main non ha bisogno di questo margine).
   Esclusa la pagina chat: gestisce già da sola la propria altezza (vedi regola .chat-app sotto),
   aggiungere anche qui spingerebbe la barra di input fuori dallo schermo invece di sopra la tabbar. */
@media (max-width: 991px) {
    /* :not(.chat-main) — la conversazione chat è a sua volta un <main> annidato dentro .chat-app:
       non contenendo .chat-app matcherebbe la regola e riceverebbe 70px di padding-bottom, che
       spingono in alto la barra di input lasciando un vuoto sotto (bug segnalato: "campo scrivi in alto"). */
    body:has(.mobile-tabbar) main:not(:has(.chat-app)):not(.chat-main) { padding-bottom: 70px; }
    body:has(.mobile-tabbar) footer { padding-bottom: 60px; }
    body:has(.sticky-cta) footer { padding-bottom: 70px; }
}

/* ─── Cookie banner GDPR ─────────────────────────────────── */
.cookie-banner {
    position: fixed; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 1080;
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 30px rgba(15,23,42,.12);
    padding: 16px; transform: translateY(120%); transition: transform .4s ease;
}
.cookie-banner.show { transform: translateY(0); }
/* Se c'è la tabbar mobile fissa in basso, il banner cookie si alza sopra invece di coprirla —
   altrimenti un utente loggato su mobile non potrebbe più navigare finché non decide sui cookie. */
@media (max-width: 991px) {
    .mobile-tabbar ~ .cookie-banner { bottom: 64px; }
    .mobile-tabbar ~ .cookie-banner:not(.show) { transform: translateY(calc(100% + 64px)); }
}
.cookie-banner-inner { display: flex; align-items: center; gap: 16px; max-width: 900px; margin: 0 auto; flex-wrap: wrap; }
.cookie-banner-inner p a { color: var(--p1); font-weight: 600; }
@media (max-width: 576px) {
    .cookie-banner-inner { text-align: center; justify-content: center; }
}

/* Rispetta la preferenza utente */
@media (prefers-reduced-motion: reduce) {
    .hero-blob, .mock-card, .mock-float, .hero-title .grad-text, .btn-accent::after, .hero-badge .dot,
    .dash-greet .wave, .cat-icon-wrap, .role-card .role-ico { animation: none !important; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .stagger-item { animation: none !important; }
}

/* iOS: niente auto-zoom sugli input < 16px */
@media (max-width: 768px) {
    input, select, textarea { font-size: 16px; }
    .hero-section { padding: 36px 20px; text-align: center; }
    .hero-sub { max-width: none; margin-inline-start: auto; margin-inline-end: auto; }
    .mock-float { display: none; }
    .role-card { padding: 30px 20px; }
    .role-card .role-ico { width: 76px; height: 76px; }
    .role-card .role-ico i { font-size: 2.2rem; }
    .footer-legal-strip { justify-content: center; text-align: center; }

    /* Il form di ricerca non deve ereditare il text-align:center della hero */
    .hero-search, .hero-search-inner, .hero-search-field, .hero-quick-row { text-align: start; }
    .hero-search { margin-inline-start: auto; margin-inline-end: auto; }

    /* Sezioni soft/CTA: meno padding sui telefoni */
    .final-cta-section { padding: 36px 20px; }
}

/* Schermi molto stretti: riduci il titolo hero per evitare che la parola
   typewriter più lunga forzi lo scroll orizzontale (nowrap per lo slot) */
@media (max-width: 400px) {
    .hero-title { font-size: 1.65rem; letter-spacing: -.6px; }
}
/* Schermi molto stretti (telefoni piccoli/vecchi, ~320-380px): il padding di default di Bootstrap
   (12px per lato) lascia le card troppo a ridosso del bordo fisico dello schermo — un margine di
   sicurezza in più evita che testo/bottoni tocchino il vetro. */
@media (max-width: 380px) {
    .container, .container-fluid { padding-inline-start: 16px; padding-inline-end: 16px; }
}

/* ─── Chat (stile WhatsApp) ────────────────────────────────── */
/* Pagina chat più larga della normale .container Bootstrap (max ~1140px): su schermi ampi la
   finestra restava piccola e circondata da spazio vuoto. min(...,96vw): senza il tetto sul viewport,
   su finestre più strette di 1360px il container sfondava a destra e creava uno scroll orizzontale
   su tutta la pagina (bug segnalato). */
.container:has(.chat-app) { max-width: min(1360px, 96vw); }
.chat-app {
    display: flex; height: 84vh; min-height: 560px; max-height: 880px;
    border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(15,23,42,.08); background: var(--surface);
}
/* Niente animazione d'ingresso qui: overflow:hidden + border-radius + un'animazione con transform
   sullo STESSO elemento è la combinazione esatta di un bug di rendering noto in Chromium (artefatto
   scuro all'angolo arrotondato quando il layer GPU si ricompone) — visibile proprio interagendo
   vicino all'angolo, come passare il mouse sul pulsante indietro (bug segnalato: "tooltip nascosto"). */

/* Sidebar elenco chat */
.chat-sidebar { width: 340px; flex-shrink: 0; border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; background: var(--soft); overflow-x: hidden; }
.chat-sidebar-head {
    padding: 18px; border-bottom: 1px solid var(--border); background: var(--grad); color: #fff;
    display: flex; align-items: center; gap: 10px;
    /* Stesso raggio dell'angolo di .chat-app: il pulsante "indietro" qui dentro ha una transition
       su hover (opacity/background) che può far promuovere l'elemento a un proprio layer GPU in
       Chromium — se l'angolo arrotondato dipende SOLO dal clip overflow:hidden del genitore, la
       ricomposizione di quel layer può produrre l'artefatto scuro visto interagendo vicino
       all'angolo (stesso bug già documentato sopra per .chat-app, qui si ripresenta sul figlio
       invece che sul genitore). Dare il raggio anche qui elimina la dipendenza dal solo clip. */
    border-start-start-radius: 20px;
}
.chat-sidebar-head i { font-size: 1.15rem; }
/* Prima era solo un'icona nuda a 1.1rem nella barra viola, senza un'area di click definita
   (sembrava sproporzionata rispetto al resto — bug segnalato): ora un vero pulsante circolare
   con hit-area e feedback hover, coerente con gli altri pulsanti a icona del sito. */
.chat-dash-back {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    color: #fff; opacity: .85; background: rgba(255,255,255,.1);
    font-size: .85rem; transition: opacity .15s, background .15s;
}
.chat-dash-back:hover { opacity: 1; background: rgba(255,255,255,.2); }
.chat-list { flex: 1; overflow-y: auto; overflow-x: hidden; }
.chat-list-item {
    display: flex; align-items: center; gap: 12px; padding: 13px 16px; text-decoration: none; color: var(--ink);
    border-bottom: 1px solid var(--border); border-inline-start: 3px solid transparent; transition: background .2s, color .2s, border-color .2s;
    animation: chatListItemIn .3s ease backwards;
    position: relative; overflow: hidden;
}
.chat-list-item:hover { background: var(--surface); color: var(--ink); transform: none; }
.chat-list-item.active { background: var(--surface); border-inline-start-color: var(--p1); box-shadow: inset 0 0 0 0 transparent, 4px 0 12px -4px rgba(var(--p1-rgb),.08); }
.chat-list-item.active .chat-list-name { color: var(--p1); }
.chat-list-body { flex: 1; min-width: 0; }
.chat-list-name { font-weight: 700; font-size: .9rem; transition: color .2s; }
.chat-list-time { font-size: .7rem; color: var(--muted); flex-shrink: 0; }
.chat-list-preview { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-item:has(.chat-unread-badge) .chat-list-preview { color: var(--ink); font-weight: 600; }
.chat-unread-badge {
    background: var(--grad); color: #fff; font-size: .68rem; font-weight: 800; min-width: 19px; height: 19px;
    border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(var(--p1-rgb),.35); animation: badgePop .3s ease;
}
@keyframes badgePop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes chatListItemIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.chat-list-item:nth-child(1) { animation-delay: .02s; }
.chat-list-item:nth-child(2) { animation-delay: .06s; }
.chat-list-item:nth-child(3) { animation-delay: .10s; }
.chat-list-item:nth-child(4) { animation-delay: .14s; }
.chat-list-item:nth-child(5) { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .chat-list-item { animation: none; } }
.chat-avatar {
    width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; font-size: .95rem;
    box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(var(--p1-rgb),.25);
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-empty-list { padding: 50px 24px; text-align: center; }
.chat-empty-list i {
    width: 64px; height: 64px; border-radius: 50%; background: var(--grad-soft); color: var(--p1);
    font-size: 1.8rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}

/* Conversazione */
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(135deg, var(--grad-soft) 0%, rgba(var(--p1-rgb),.06) 100%); animation: chatPlaceholderIn .4s ease; }
.chat-placeholder i {
    width: 84px; height: 84px; border-radius: 50%; background: var(--surface); color: var(--p1);
    font-size: 2.2rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(var(--p1-rgb),.12);
    animation: chatPlaceholderFloat 3s ease-in-out infinite;
}
@keyframes chatPlaceholderIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes chatPlaceholderFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .chat-placeholder, .chat-placeholder i { animation: none; } }
.chat-header { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--surface) 60%, var(--soft) 100%); }
.chat-back { color: var(--muted); font-size: 1.3rem; text-decoration: none; transition: color .2s; }
.chat-back:hover { color: var(--p1); }
.chat-subtitle a { color: var(--p1); text-decoration: none; }
.chat-subtitle.is-typing { color: var(--p1); font-weight: 600; }
.chat-messages {
    flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 14px; display: flex; flex-direction: column; gap: 2px;
    background: linear-gradient(180deg, #f0f4fa 0%, #f8fafb 30%, #ffffff 70%);
    background-image: linear-gradient(180deg, #f0f4fa 0%, #f8fafb 30%, #ffffff 70%),
        radial-gradient(circle at 20% 80%, rgba(var(--p1-rgb),.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(var(--p2-rgb,.04),.03) 0%, transparent 50%);
}
.chat-date-sep { text-align: center; margin: 10px 0; }
.chat-date-sep span {
    background: rgba(var(--p1-rgb),.06); color: var(--muted); font-size: .7rem; font-weight: 700; padding: 5px 16px;
    border-radius: 999px; text-transform: uppercase; letter-spacing: .4px; box-shadow: 0 1px 4px rgba(15,23,42,.04);
}
/* Separatore "Messaggi non letti": stesso family del separatore data ma acceso col colore del brand,
   per farlo notare subito (a differenza del neutro chat-date-sep, che è solo un riferimento temporale). */
.chat-unread-sep { text-align: center; margin: 14px 0; position: relative; }
.chat-unread-sep::before {
    content: ''; position: absolute; top: 50%; inset-inline-start: 0; inset-inline-end: 0; height: 1px; background: rgba(var(--p1-rgb),.2);
}
.chat-unread-sep span {
    position: relative; background: rgba(var(--p1-rgb),.12); color: var(--p1); font-size: .72rem; font-weight: 700;
    padding: 4px 14px; border-radius: 999px; letter-spacing: .2px;
}
.chat-bubble-row { display: flex; margin: 2px 0; animation: bubbleIn .25s ease; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chat-bubble-row.mine { justify-content: flex-end; }
.chat-bubble {
    max-width: 70%; min-width: 68px; padding: 8px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
    box-shadow: 0 1px 6px rgba(15,23,42,.06); overflow: hidden; transition: box-shadow .2s;
}
.chat-bubble-row:not(.mine) .chat-bubble { border-end-start-radius: 4px; }
.chat-bubble-row.mine .chat-bubble { border-end-end-radius: 4px; }
/* Raggruppamento messaggi consecutivi dello stesso mittente (stile WhatsApp): meno spazio tra loro,
   "coda" del fumetto solo sull'ultimo della sequenza (gli altri restano ben arrotondati, come se
   facessero parte dello stesso "blocco" invece di ripetere lo stesso angolo su ogni singola bolla). */
.chat-bubble-row.grouped-prev { margin-top: 1px; }
.chat-bubble-row.grouped-next:not(.mine) .chat-bubble { border-end-start-radius: 16px; }
.chat-bubble-row.grouped-next.mine .chat-bubble { border-end-end-radius: 16px; }
/* Colori stile WhatsApp: verde chiaro per i miei messaggi (testo scuro, non più bianco su
   gradiente viola), bianco per i messaggi dell'altra parte — molto più leggibile e riconoscibile. */
.chat-bubble.mine { background: linear-gradient(135deg, #dbeafe 0%, #e0f0ff 100%); color: var(--ink); border: 1px solid rgba(0,138,247,.12); box-shadow: 0 2px 12px rgba(0,138,247,.1); }
.chat-bubble-text { font-size: .92rem; line-height: 1.4; white-space: pre-line; word-break: normal; overflow-wrap: break-word; }
/* Spazio minimo sopra l'ora: su messaggi molto corti (es. "..." o una sola emoji) senza questo margine
   la riga ora+spunta risultava troppo attaccata al testo, quasi sovrapposta. */
/* niente opacity qui: schiacciava anche l'azzurro della spunta "letto". Usiamo un colore attenuato
   per l'orario, così la ricevuta (icona + etichetta) può avere il suo colore pieno. */
.chat-bubble-meta { font-size: .66rem; color: rgba(15,23,42,.42); text-align: end; margin-top: 2px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; line-height: 1; }
.chat-tick { font-size: .85rem; line-height: 1; transition: color .2s; color: var(--muted); }
/* Ricevuta stile WhatsApp: "Inviato" grigio con singola spunta, "Letto" azzurro con doppia spunta. */
.chat-recv { display: inline-flex; align-items: center; gap: 3px; font-size: .64rem; font-weight: 600; color: var(--muted); transition: color .2s; }
/* L'etichetta "Inviato"/"Letto" resta per screen reader ma visivamente basta la spunta (stile WhatsApp):
   il testo allungava ogni bolla, rendendo enormi anche i messaggi di una sola cifra (bug: "bolle brutte"). */
.chat-recv-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chat-recv-read, .chat-recv-read .chat-tick, .chat-tick-read { color: #34b7f1; }
.chat-bubble.mine .chat-bubble-meta { color: rgba(15,23,42,.75); }
/* Invio ottimistico: la bolla appare subito, leggermente sbiadita finché il server non conferma
   (orologio grigio) — se l'invio fallisce diventa rossa e cliccabile per reinviare. */
.chat-bubble-row.pending .chat-bubble { opacity: .75; }
.chat-tick-pending { color: var(--muted); }
.chat-tick-failed { color: #dc2626; }
.chat-bubble-row.failed .chat-bubble { background: #fef2f2; border-color: #fecaca; cursor: pointer; }
.chat-bubble-row.failed .chat-bubble:hover { background: #fee2e2; }

/* Indicatore "sta scrivendo" (3 puntini animati) */
.chat-typing-row { display: flex; animation: bubbleIn .25s ease; }
.chat-bubble.typing { display: flex; gap: 4px; padding: 13px 16px; align-items: center; }
.chat-bubble.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--p1); opacity: .5; animation: typingDot 1.2s infinite ease-in-out; }
.chat-bubble.typing span:nth-child(2) { animation-delay: .2s; }
.chat-bubble.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typingDot { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

.chat-input-bar { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); background: linear-gradient(0deg, var(--surface) 60%, var(--soft) 100%); align-items: flex-end; width: 100%; box-sizing: border-box; }
.chat-input-pill {
    flex: 1 1 auto; min-width: 0; width: 100%; display: flex; align-items: flex-end; gap: 4px;
    background: var(--bg-soft, #f0f2f5); border-radius: 24px; padding: 4px 8px 4px 4px;
    min-height: 44px; box-sizing: border-box;
}
.chat-pill-btn {
    width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent;
    color: var(--muted); font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; cursor: pointer; transition: color .2s;
}
.chat-pill-btn:hover { color: var(--p1); }
/* Textarea multi-riga con auto-grow (JS aggiorna height in base al contenuto, max 120px poi scrolla) */
#chatInput {
    flex: 1 1 auto; width: 100%; resize: none; overflow-y: auto; max-height: 120px; line-height: 1.4;
    border: none; background: transparent; outline: none; box-shadow: none; padding: 8px 4px;
    font-size: .93rem; font-family: inherit; min-width: 0;
}
#chatInput::placeholder { color: var(--muted, #8696a0); }
/* Pulsante invio chat: stesso verde WhatsApp delle bolle "mie", coerenza visiva con l'interfaccia chat. */
.chat-send-btn {
    width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--grad-vivid); color: #fff; font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s;
    box-shadow: 0 4px 14px var(--vivid-shadow);
}
.chat-send-btn:hover { transform: scale(1.08) rotate(8deg); box-shadow: 0 6px 18px rgba(var(--p1-rgb),.4); }
.chat-send-btn:active { transform: scale(.94); }
.chat-send-btn.chat-send-disabled { background: #c8ced3; box-shadow: none; cursor: default; }
.chat-send-btn.chat-send-disabled:hover { transform: none; box-shadow: none; }
.chat-attach-btn, .chat-send-btn { margin-bottom: 2px; }

/* Barra "in risposta a…" sopra l'input */
.chat-reply-bar {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--soft);
    border-top: 1px solid var(--border); font-size: .82rem; color: var(--muted);
}
.chat-reply-bar i.bi-reply-fill { color: var(--p1); flex-shrink: 0; }
.chat-reply-bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-bar button { border: none; background: transparent; color: var(--muted); flex-shrink: 0; padding: 2px; }
.chat-reply-bar button:hover { color: #dc2626; }
/* Barra "modifica in corso": stessa struttura della reply-bar ma con accento ambra per distinguerla. */
.chat-edit-bar { background: rgba(245,158,11,.1); }
.chat-edit-bar > i { color: #d97706; flex-shrink: 0; }

/* Etichetta "modificato" nella meta del messaggio */
.chat-edited-label { font-style: italic; opacity: .9; }
.chat-bubble.mine .chat-edited-label { color: rgba(15,23,42,.7); }

/* Cuore che sboccia col doppio tocco/click su una bolla */
.chat-dbltap-heart {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.4);
    font-size: 2rem; pointer-events: none; z-index: 3; opacity: 0;
    animation: chatHeartPop .8s ease-out forwards;
}
@keyframes chatHeartPop {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
    30%  { opacity: 1; transform: translate(-50%,-90%) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%,-160%) scale(1); }
}

/* Sezione "Archiviate" nell'elenco conversazioni */
.chat-archived-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: transparent;
    padding: 12px 16px; font-size: .8rem; font-weight: 600; color: var(--muted); cursor: pointer;
    border-top: 1px solid var(--border);
}
.chat-archived-toggle:hover { background: var(--soft); color: var(--ink); }
.chat-archived-count {
    background: var(--border); color: var(--muted); border-radius: 10px; padding: 1px 8px;
    font-size: .72rem; font-weight: 700;
}
.chat-archived-caret { margin-inline-start: auto; transition: transform .2s ease; font-size: .7rem; }
.chat-archived-toggle.aperta .chat-archived-caret { transform: rotate(180deg); }

/* Citazione dentro una bolla (risposta a un messaggio) */
.chat-reply-quote {
    display: flex; align-items: center; gap: 6px; font-size: .78rem; padding: 5px 9px; margin-bottom: 6px;
    border-inline-start: 3px solid var(--p1); background: rgba(var(--p1-rgb),.08); border-radius: 8px; cursor: pointer;
    max-width: 100%; overflow: hidden;
}
.chat-reply-quote > i { flex-shrink: 0; }
/* Il testo della citazione va in uno span dedicato: su un contenitore flex `text-overflow: ellipsis`
   non funziona, serve un blocco con min-width:0 che possa restringersi e troncare con i puntini. */
.chat-reply-quote-text { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-bubble.mine .chat-reply-quote { background: rgba(0,138,247,.1); border-inline-start-color: var(--p1); color: rgba(15,23,42,.75); }
.chat-reply-quote:hover { opacity: .8; }

/* Link cliccabili nei messaggi */
/* overflow-wrap:break-word (NON anywhere): a differenza di anywhere, non riduce la larghezza
   intrinseca della bolla, quindi un URL corto come "https://claude.ai/" allarga la bolla e resta su
   una riga; viene spezzato solo se davvero eccede la larghezza massima. (break-all lo spezzava sempre
   lettera-per-lettera, anywhere faceva collassare la bolla sulla larghezza dell'orario sotto.) */
.chat-bubble-text a { color: var(--p1); text-decoration: underline; word-break: normal; overflow-wrap: break-word; }
/* Le bolle con un link avevano larghezza dettata dall'orario sotto (~90px), spezzando anche URL corti
   come "https://claude.ai/". Una larghezza minima garantisce che un URL tipico stia su una riga; se è
   più lungo va comunque a capo (overflow-wrap sopra), ma senza collassare la bolla. */
.chat-bubble:has(.chat-bubble-text a) { min-width: 230px; }
.chat-bubble:has(.chat-edited-label) { min-width: 180px; }
.chat-bubble.mine .chat-bubble-text a { color: #1a5fb4; }

/* Evidenzia brevemente il messaggio raggiunto cliccando una citazione */
@keyframes chatHighlightPulse { 0%, 100% { box-shadow: 0 2px 8px rgba(15,23,42,.05); } 50% { box-shadow: 0 0 0 4px rgba(var(--p1-rgb),.35); } }
.chat-highlight .chat-bubble { animation: chatHighlightPulse 1.2s ease; }

/* Pulsante flottante "vai in fondo" con badge nuovi messaggi mentre si scorre in su */
.chat-scroll-bottom-btn {
    position: absolute; inset-inline-end: 22px; bottom: 90px; width: 40px; height: 40px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--border); color: var(--p1); font-size: 1rem;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(15,23,42,.12);
    transition: all .25s; z-index: 3; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    background: rgba(255,255,255,.88);
}
.chat-scroll-bottom-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,.18); }
.chat-scroll-bottom-badge {
    position: absolute; top: -6px; inset-inline-end: -6px; background: var(--grad); color: #fff; font-size: .62rem; font-weight: 800;
    min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    padding: 0 3px; box-shadow: 0 0 0 2px #fff;
}
.chat-main { position: relative; }

/* Ricerca lista chat */
.chat-search { padding: 10px 16px; position: relative; border-bottom: 1px solid var(--border); }
.chat-search i { position: absolute; inset-inline-start: 28px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .85rem; pointer-events: none; }
.chat-search input {
    width: 100%; border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px 7px 32px; font-size: .82rem;
    background: var(--surface); transition: box-shadow .2s, border-color .2s;
}
.chat-search input:focus { outline: none; border-color: rgba(var(--p1-rgb),.4); box-shadow: 0 0 0 3px rgba(var(--p1-rgb),.12); }

/* Stato online (pallino verde su avatar) */
.chat-avatar-wrap { position: relative; flex-shrink: 0; }
.chat-online-dot {
    position: absolute; bottom: 0; inset-inline-end: 0; width: 11px; height: 11px; border-radius: 50%;
    background: #22c55e; border: 2px solid #fff; box-shadow: 0 0 0 0 rgba(34,197,94,.5);
    animation: onlineDotPulse 2s ease-in-out infinite;
}
@keyframes onlineDotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .chat-online-dot { animation: none; } }
.chat-online-text { font-size: .5rem; color: #22c55e; vertical-align: middle; margin-inline-end: 2px; }
.chat-avatar-crown {
    position: absolute; top: -4px; inset-inline-start: -4px; width: 18px; height: 18px; border-radius: 50%;
    color: #fbbf24; border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
    font-size: .55rem; box-shadow: 0 1px 4px rgba(0,0,0,.25); z-index: 1;
}

/* Menu azioni header (dropdown "..."), pulsante allega, back */
.chat-menu-btn {
    width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent; color: var(--muted);
    font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0;
}
.chat-menu-btn:hover { background: var(--soft); color: var(--p1); }
.chat-header .dropdown-menu { border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); border: 1px solid var(--border); padding: 6px 0; }
.chat-header .dropdown-item { padding: 10px 18px; font-size: .88rem; }
.chat-menu-btn.js-toggle-preferito.is-preferito { color: #e11d48; }
.chat-menu-btn.js-toggle-preferito.is-preferito:hover { background: #fff1f2; }
@keyframes heartPop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.chat-menu-btn.js-toggle-preferito i { transition: transform .1s; }
.chat-menu-btn.js-toggle-preferito.is-preferito i { animation: heartPop .3s ease; }
.chat-attach-btn {
    width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--soft); color: var(--p1);
    font-size: 1.05rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s;
}
.chat-attach-btn:hover { background: var(--grad-soft); transform: scale(1.06); }
.chat-attach-btn:disabled { opacity: .5; }

/* Banner conversazione bloccata */
.chat-blocked-banner {
    background: #fef2f2; color: #b91c1c; font-size: .82rem; padding: 10px 18px; text-align: center;
    border-bottom: 1px solid #fecaca; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.chat-pending-banner {
    background: #fef3c7; color: #92400e; font-size: .82rem; padding: 10px 18px; text-align: center;
    border-bottom: 1px solid #fde68a; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.chat-input-disabled { color: var(--muted); font-size: .85rem; text-align: center; justify-content: center; }

/* Immagini in chat */
.chat-bubble-img { max-width: 220px; max-height: 260px; border-radius: 12px; display: block; object-fit: cover; }
.chat-bubble-text.chat-deleted { color: var(--muted); font-style: italic; font-size: .85rem; }
.chat-bubble.mine .chat-bubble-text.chat-deleted { color: rgba(15,23,42,.55); }

/* Azioni al passaggio del mouse su un messaggio (reagisci / elimina) */
.chat-bubble-wrap { position: relative; display: flex; flex-direction: column; max-width: 72%; }
.chat-bubble-row.mine .chat-bubble-wrap { align-items: flex-end; }
.chat-bubble-actions {
    display: flex; gap: 2px; opacity: 0; transition: opacity .15s; position: absolute; top: -14px; z-index: 2;
}
.chat-bubble-row:not(.mine) .chat-bubble-actions { inset-inline-start: 4px; }
.chat-bubble-row.mine .chat-bubble-actions { inset-inline-end: 4px; }
.chat-bubble-wrap:hover .chat-bubble-actions { opacity: 1; }
@media (hover: none) {
    .chat-bubble-actions { opacity: 0; pointer-events: none; }
    .chat-bubble-wrap.show-actions .chat-bubble-actions { opacity: 1; pointer-events: auto; }
    .chat-action-btn { width: 32px; height: 32px; font-size: .85rem; }
}
.chat-action-btn {
    width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
    font-size: .75rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(15,23,42,.08);
    transition: all .15s;
}
.chat-action-btn:hover { color: var(--p1); transform: scale(1.1); }

/* Picker emoji */
.chat-emoji-picker {
    position: absolute; bottom: calc(100% + 6px); z-index: 3; background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 8px; display: flex; flex-wrap: wrap; gap: 2px; box-shadow: 0 8px 22px rgba(15,23,42,.14); animation: bubbleIn .15s ease;
    width: 256px; max-height: 176px; overflow-y: auto; transform-origin: bottom center;
}
.chat-bubble-row:not(.mine) .chat-emoji-picker { inset-inline-start: 4px; }
.chat-bubble-row.mine .chat-emoji-picker { inset-inline-end: 4px; }
.chat-emoji-opt {
    border: none; background: transparent; font-size: 1.05rem; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; transition: transform .15s, background .15s;
}
.chat-emoji-opt:hover { background: var(--soft); transform: scale(1.25); }

/* Reazioni sotto il messaggio */
.chat-reactions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; line-height: 1; }
.chat-reactions:empty { display: none; margin: 0; }
.chat-reaction-pill {
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: .72rem; padding: 2px 8px;
    box-shadow: 0 1px 4px rgba(15,23,42,.06); animation: badgePop .2s ease; color: var(--ink); line-height: 1.3;
    display: inline-flex; align-items: center;
}
.chat-bubble.mine .chat-reaction-pill { background: rgba(255,255,255,.95); }
.chat-reaction-pill.mine { border-color: var(--p1); border-width: 1.5px; }

/* Barra di ricerca dentro la conversazione (diversa dalla ricerca nella lista chat in sidebar) */
.chat-search-bar {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface);
    border-bottom: 1px solid var(--border); animation: wizIn .15s ease;
}
.chat-search-field {
    flex: 1; display: flex; align-items: center; gap: 8px; background: var(--soft); border: 1px solid var(--border);
    border-radius: 10px; padding: 6px 12px; transition: border-color .2s, box-shadow .2s;
}
.chat-search-field:focus-within { border-color: rgba(var(--p1-rgb),.4); box-shadow: 0 0 0 3px rgba(var(--p1-rgb),.1); }
.chat-search-field i.fa-magnifying-glass { color: var(--p1); font-size: .82rem; flex-shrink: 0; }
.chat-search-field input {
    flex: 1; border: none; outline: none; font-size: .88rem; background: transparent; color: var(--ink); min-width: 0;
}
.chat-search-count { font-size: .72rem; color: var(--muted); white-space: nowrap; background: var(--surface); border-radius: 999px; padding: 2px 8px; flex-shrink: 0; }
.chat-search-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.chat-search-nav, .chat-search-close {
    border: none; background: var(--soft); color: var(--muted); width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: .78rem; flex-shrink: 0; transition: background .15s, color .15s;
}
.chat-search-nav:hover, .chat-search-close:hover { background: var(--grad-soft); color: var(--p1); }
.chat-search-match { background: rgba(251,191,36,.45); border-radius: 3px; padding: 0 1px; }
.chat-search-match-active { background: var(--p3, #fbbf24); box-shadow: 0 0 0 2px rgba(251,191,36,.4); }

/* Emoji per scrivere: bottone accanto all'allega-foto, apre un mini-grid sopra l'input */
/* Difesa contro il validatore inline (assets/js/app.js): se per qualsiasi motivo (cache di una
   vecchia pagina, percorso di caricamento diverso) avvolge la textarea del messaggio in un
   .field-wrap, quel wrapper — essendo un blocco normale senza flex:1 — restringe il campo e ci
   aggiunge la spunta verde di "campo valido". `display: contents` toglie il wrapper dal layout
   (la textarea torna figlio diretto del pill, quindi flex:1 riprende) e nascondiamo la spunta. */
.chat-input-pill .field-wrap { display: contents; }
.chat-input-pill .field-check-icon, .chat-input-pill .field-error-msg { display: none !important; }
.chat-compose-emoji-wrap { position: relative; flex-shrink: 0; }
.chat-compose-emoji-picker {
    position: absolute; bottom: 52px; inset-inline-start: 0; z-index: 6; background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 8px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
    box-shadow: 0 12px 30px rgba(15,23,42,.16); animation: bubbleIn .15s ease; width: 272px;
    max-height: 240px; overflow-y: auto;
}
.chat-compose-emoji-picker .chat-emoji-opt { width: 38px; height: 38px; font-size: 1.2rem; }

/* Lightbox foto: overlay a schermo intero, coerente con gli altri overlay del sito (.ui-dialog-backdrop) */
.chat-lightbox {
    position: fixed; inset: 0; background: rgba(15,23,42,.92); z-index: 2200; display: flex;
    align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.chat-lightbox.open { opacity: 1; pointer-events: auto; }
.chat-lightbox img {
    max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
    transform: scale(.96); transition: transform .2s;
}
.chat-lightbox.open img { transform: none; }
.chat-lightbox-close, .chat-lightbox-download {
    position: absolute; top: 18px; width: 42px; height: 42px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; transition: background .15s; text-decoration: none;
}
.chat-lightbox-close { inset-inline-end: 18px; }
.chat-lightbox-download { inset-inline-end: 70px; }
.chat-lightbox-close:hover, .chat-lightbox-download:hover { background: rgba(255,255,255,.22); color: #fff; }
.chat-bubble-img { cursor: zoom-in; }

/* Carosello portfolio (profilo pubblico professionista): stesso linguaggio visivo del lightbox chat
   sopra (sfondo scuro pieno, immagine con ombra, controlli ben visibili) — prima era completamente
   privo di stile (nessuno sfondo, frecce di default invisibili). */
.portfolio-thumb-btn { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; border-radius: 12px; overflow: hidden; }
.portfolio-thumb-btn img { transition: transform .3s ease; }
.portfolio-thumb-btn:hover img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .portfolio-thumb-btn:hover img { transform: none; } }
/* ─── Sfondo sfocato dietro modali/offcanvas (Bootstrap) ──────────────────
   Bootstrap disegna .modal-backdrop/.offcanvas-backdrop come overlay scuro semi-trasparente ma
   piatto: qui aggiungiamo backdrop-filter per sfocare anche il contenuto sottostante, staccando
   più nettamente la modale dal resto della pagina (stessa tecnica già usata per i dialog custom
   in .ui-dialog-backdrop). -webkit- necessario per Safari. */
.modal-backdrop, .offcanvas-backdrop {
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
/* Apertura modale: fade + leggero zoom-in, al posto dello slide verticale di default di Bootstrap
   (.modal.fade .modal-dialog { transform: translate(0,-50px) }) — stesso linguaggio del dialog
   custom .ui-dialog qui sotto, così tutte le finestre modali del sito si aprono allo stesso modo. */
.modal.fade .modal-dialog { transform: scale(.92); opacity: 0; transition: transform .25s ease, opacity .2s ease; }
.modal.show .modal-dialog { transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: opacity .15s; transform: none; } }
body.portfolio-lightbox-active .modal-backdrop { background: #0f172a; opacity: .93 !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.portfolio-modal .modal-dialog { max-width: none; width: 100vw; margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; }
.portfolio-modal .modal-content { background: transparent; box-shadow: none; }
.portfolio-modal-img { max-width: 88vw; max-height: 80vh; width: auto; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); object-fit: contain; }
.portfolio-modal-close {
    position: fixed; top: 20px; inset-inline-end: 20px; z-index: 1090; width: 44px; height: 44px; border-radius: 50%;
    background: rgba(15,23,42,.65); border: 1px solid rgba(255,255,255,.25); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem; line-height: 1;
    cursor: pointer; transition: background-color .15s, transform .15s; backdrop-filter: blur(2px);
}
.portfolio-modal-close:hover { background: rgba(15,23,42,.9); transform: scale(1.06); color: #fff; }
.portfolio-modal .carousel-control-prev, .portfolio-modal .carousel-control-next { width: 64px; opacity: 1; }
.portfolio-modal .carousel-control-prev-icon, .portfolio-modal .carousel-control-next-icon {
    width: 44px; height: 44px; border-radius: 50%; background-color: rgba(255,255,255,.14); background-size: 20px;
    transition: background-color .15s;
}
.portfolio-modal .carousel-control-prev:hover .carousel-control-prev-icon,
.portfolio-modal .carousel-control-next:hover .carousel-control-next-icon { background-color: rgba(255,255,255,.28); }
.portfolio-modal .carousel-indicators { position: static; margin: 14px 0 0; }
.portfolio-modal .carousel-indicators [data-bs-target] {
    width: 8px; height: 8px; border-radius: 50%; opacity: .5; background-color: #fff; border: none; margin: 0 4px;
}
.portfolio-modal .carousel-indicators .active { opacity: 1; }

/* ─── Sidebar sticky di conversione (pagina professionista) ──────────── */
.pro-sidebar-sticky { top: 20px; z-index: 20; }
.pro-cta-card { padding: 20px; }
.pro-cta-rating { font-size: .95rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pro-cta-rating-stars { color: #f59e0b; letter-spacing: 1px; }
.pro-cta-rating strong { font-size: 1.15rem; }
.pro-cta-risk-line { font-size: .8rem; color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
/* Icona della risk-line in bolla colorata invece di glifo nudo, coerente col resto della sidebar. */
.pro-cta-risk-line i {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; font-size: .68rem;
    display: flex; align-items: center; justify-content: center; background: rgba(var(--p1-rgb),.12); color: var(--p1);
}
@media (max-width: 991px) { .pro-sidebar-sticky { position: static !important; top: auto; } }

/* Righe "Perché scegliere [nome]": ogni motivo entra in scaglione da sinistra, spunta in bolla verde. */
.pro-cta-motivo-item {
    display: flex; align-items: center; gap: 8px; opacity: 0; animation: motivoSlideIn .35s ease forwards;
}
.pro-cta-motivo-item i {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; font-size: .6rem;
    display: flex; align-items: center; justify-content: center; background: rgba(22,163,74,.12); color: #16a34a;
    box-shadow: inset 0 0 0 1px rgba(22,163,74,.2);
}
.pro-cta-motivo-header-ico {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; font-size: .68rem;
    display: inline-flex; align-items: center; justify-content: center; background: rgba(22,163,74,.12); color: #16a34a;
    box-shadow: inset 0 0 0 1px rgba(22,163,74,.2);
}
.pro-cta-motivo-item:nth-child(1) { animation-delay: .05s; }
.pro-cta-motivo-item:nth-child(2) { animation-delay: .12s; }
.pro-cta-motivo-item:nth-child(3) { animation-delay: .19s; }
.pro-cta-motivo-item:nth-child(4) { animation-delay: .26s; }
.pro-cta-motivo-item:nth-child(5) { animation-delay: .33s; }
@keyframes motivoSlideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .pro-cta-motivo-item { animation: none; opacity: 1; } }

/* Context bar (richiesta + badge preventivo) */
.chat-context-bar {
    display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-size: .85rem; text-decoration: none; color: inherit;
    background: linear-gradient(90deg, rgba(var(--p1-rgb),.04) 0%, var(--bg-soft, #f8f9fb) 100%);
    border-bottom: 1px solid var(--border); transition: background .2s;
}
.chat-context-bar:hover { background: linear-gradient(90deg, rgba(var(--p1-rgb),.08) 0%, var(--soft) 100%); color: inherit; }
.chat-context-bar > i { width: 28px; height: 28px; border-radius: 8px; background: rgba(var(--p1-rgb),.1); color: var(--p1); display: flex; align-items: center; justify-content: center; font-size: .75rem; flex-shrink: 0; }
.chat-context-bar .tag-pill { white-space: nowrap; font-size: .78rem; font-weight: 600; flex-shrink: 0; }

/* Mobile: un pannello alla volta (lista oppure conversazione) */
@media (max-width: 991px) {
    /* Chat a tutto schermo su mobile (stile app di messaggistica): nascondiamo la navbar in alto e
       azzeriamo il padding del <main> che contiene la chat, così la conversazione parte dal bordo
       superiore. La navigazione resta garantita dalle frecce interne (indietro conversazione→lista,
       lista→dashboard). main:has(.chat-app) colpisce solo il main ESTERNO, non il .chat-main annidato. */
    body:has(.chat-app) .mkt-nav { display: none; }
    /* !important perché il <main> porta .py-4 di Bootstrap (padding verticale !important) che
       altrimenti lascerebbe 24px sopra/sotto. Azzeriamo anche padding e max-width del .container
       così la chat arriva davvero fino ai quattro bordi dello schermo. */
    main:has(.chat-app) { padding: 0 !important; }
    .container:has(.chat-app) { max-width: 100%; padding-inline: 0; }
    .chat-app { height: 100dvh; border-radius: 0; margin: 0; max-height: none; animation: none; }
    .chat-sidebar-head { border-start-start-radius: 0; }
    .chat-sidebar { width: 100%; }
    .chat-app.chat-open .chat-sidebar { display: none; }
    .chat-app:not(.chat-open) .chat-main { display: none; }
    .chat-header { padding: 10px 12px; gap: 8px; }
    .chat-header .chat-avatar { width: 36px; height: 36px; font-size: .8rem; }
    .chat-header .chat-avatar-crown { width: 15px; height: 15px; font-size: .45rem; top: -3px; inset-inline-start: -3px; }
    .chat-context-bar { padding: 8px 12px; gap: 6px; font-size: .8rem; }
    .chat-context-bar .tag-pill { font-size: .7rem; padding: 2px 8px; }
    .chat-bubble { max-width: 86%; }
    .chat-bubble-wrap { max-width: 88%; }
}

/* ─── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb-nav { margin-top: 8px; margin-bottom: 14px; }
.breadcrumb-nav ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .82rem; }
.breadcrumb-nav li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.breadcrumb-nav li:not(:last-child)::after { content: '/'; color: var(--border); margin-inline-start: 6px; }
.breadcrumb-nav a { color: var(--muted); text-decoration: none; transition: color .15s; }
.breadcrumb-nav a:hover { color: var(--p1); text-decoration: underline; }
.breadcrumb-nav li[aria-current="page"] span { color: var(--ink); font-weight: 600; }

/* ─── Dialog custom (sostituisce confirm()/prompt() nativi) ──── */
.ui-dialog-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 2000; display: flex;
    align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .18s;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ui-dialog-backdrop.open { opacity: 1; pointer-events: auto; }
.ui-dialog {
    background: var(--surface); border-radius: 18px; padding: 24px; max-width: 400px; width: 100%;
    box-shadow: 0 30px 70px rgba(15,23,42,.3); transform: scale(.92); transition: transform .22s ease;
}
.ui-dialog-backdrop.open .ui-dialog { transform: none; }
@media (prefers-reduced-motion: reduce) { .ui-dialog { transition: none; } }
.ui-dialog-paywall { max-width: 440px; }
.ui-dialog-msg { font-size: .92rem; color: var(--ink); line-height: 1.5; margin-bottom: 14px; white-space: pre-line; }
.ui-dialog-input { margin-bottom: 14px; }
.ui-dialog-input:focus { border-color: var(--p1); box-shadow: 0 0 0 3px rgba(var(--p1-rgb),.12); }
.ui-dialog-select:focus, .ui-dialog-textarea:focus { border-color: var(--p1); box-shadow: 0 0 0 3px rgba(var(--p1-rgb),.12); }
.ui-dialog-textarea { margin-bottom: 14px; resize: vertical; }
.ui-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ui-dialog-btn {
    border: none; border-radius: 999px; padding: 9px 20px; font-weight: 700; font-size: .86rem; transition: all .15s;
}
.ui-dialog-cancel { background: var(--soft); color: var(--muted); }
.ui-dialog-cancel:hover { background: var(--border); color: var(--ink); }
.ui-dialog-ok { background: var(--grad); color: #fff; box-shadow: 0 4px 14px rgba(var(--p1-rgb),.3); }
.ui-dialog-ok:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--p1-rgb),.4); }
.ui-dialog-ok.danger { background: #dc2626; box-shadow: 0 4px 14px rgba(220,38,38,.3); }
.ui-dialog-ok.danger:hover { box-shadow: 0 6px 18px rgba(220,38,38,.4); }

/* ─── Anteprima CV in modale ("Vedi come ti vedono le aziende"): stesso overlay .ui-dialog-backdrop
   ma molto più grande, con un iframe che carica cv-anteprima.php dentro. ────────────────────── */
.ui-dialog-cv-preview {
    max-width: 900px; width: 95%; height: 90vh; padding: 0; display: flex; flex-direction: column; overflow: hidden;
}
.ui-dialog-cv-preview-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ui-dialog-cv-preview-close {
    width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--soft); color: var(--muted);
    display: flex; align-items: center; justify-content: center; font-size: .9rem; transition: background .15s, color .15s;
}
.ui-dialog-cv-preview-close:hover { background: var(--border); color: var(--ink); }
.ui-dialog-cv-preview iframe { flex: 1; width: 100%; border: 0; background: #eef1f6; }

/* Modale "Test di competenza" (quiz-domande.php/quiz-invia.php): stessa testata della modale CV,
   corpo scrollabile con le domande a risposta multipla generate via JS in cv_panel.php. */
.ui-dialog-quiz { max-width: 560px; width: 95%; max-height: 85vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.ui-dialog-quiz-body { padding: 16px 20px; overflow-y: auto; }
.quiz-domanda { padding: 12px 0; border-bottom: 1px solid var(--border); }
.quiz-domanda:last-of-type { border-bottom: none; }
.quiz-opzione { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: .88rem; cursor: pointer; }
.quiz-opzione input { flex-shrink: 0; }

/* Galleria modelli CV (cv_panel.php): card cliccabili, quella attiva evidenziata da bordo colorato
   + spunta in alto a destra, stesso linguaggio visivo delle altre scelte a card del sito. */
.cv-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.cv-template-card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    border: 2px solid var(--border); border-radius: 14px; background: var(--surface); padding: 14px;
    text-align: left; cursor: pointer; transition: border-color .15s, transform .15s;
}
.cv-template-card:hover { border-color: rgba(var(--p1-rgb),.4); transform: translateY(-2px); }
.cv-template-card-active { border-color: var(--p1); background: var(--grad-soft); }
.cv-template-thumb {
    width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.cv-template-nome { font-weight: 700; font-size: .88rem; }
.cv-template-desc { font-size: .74rem; color: var(--muted); line-height: 1.35; }
.cv-template-check { position: absolute; top: 10px; inset-inline-end: 10px; color: var(--p1); font-size: 1rem; opacity: 0; transition: opacity .15s; }
.cv-template-card-active .cv-template-check { opacity: 1; }

/* ─── Paywall (blocco account Free): modale d'impatto dedicata ───────────── */
.ui-dialog-paywall { max-width: 420px; padding: 32px 28px 26px; position: relative; text-align: center; }
.paywall-close {
    position: absolute; top: 14px; inset-inline-end: 14px; width: 30px; height: 30px; border-radius: 50%; border: none;
    background: var(--soft); color: var(--muted); display: flex; align-items: center; justify-content: center;
    font-size: .85rem; transition: background .15s, color .15s;
}
.paywall-close:hover { background: var(--border); color: var(--ink); }
.paywall-crown {
    display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%;
    margin: 0 auto 16px; background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff; font-size: 1.6rem;
    box-shadow: 0 10px 26px rgba(217,119,6,.35);
}
.paywall-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.2px; margin-bottom: 8px; color: var(--ink); }
.paywall-sub { font-size: .88rem; color: var(--muted); margin-bottom: 20px; line-height: 1.5; }
.paywall-points { display: flex; flex-direction: column; gap: 14px; text-align: start; margin-bottom: 22px; }
.paywall-point { display: flex; align-items: flex-start; gap: 12px; }
.paywall-point-ico {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center;
    justify-content: center; background: rgba(var(--p1-rgb),.12); color: var(--p1); font-size: 1rem;
}
.paywall-point strong { display: block; font-size: .86rem; line-height: 1.25; }
.paywall-point span { display: block; font-size: .76rem; color: var(--muted); margin-top: 1px; }
.paywall-cta {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 14px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 800;
    font-size: .96rem; text-decoration: none; box-shadow: 0 12px 28px rgba(var(--p1-rgb),.4);
    transition: transform .2s ease, box-shadow .2s ease;
}
.paywall-cta::after {
    content: ''; position: absolute; top: 0; inset-inline-start: -60%; width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
    transform: skewX(-20deg);
}
.paywall-cta:hover {
    color: #fff; transform: translateY(-2px) scale(1.015); box-shadow: 0 18px 36px rgba(var(--p1-rgb),.5);
}
.paywall-cta:active { transform: scale(.97); transition: transform .12s cubic-bezier(.34,1.56,.64,1); }
.paywall-cta:hover::after { animation: paywallShine .9s ease; }
@keyframes paywallShine { from { inset-inline-start: -60%; } to { inset-inline-start: 130%; } }
.paywall-dismiss {
    display: block; width: 100%; margin-top: 10px; background: none; border: none; color: var(--muted);
    font-size: .8rem; padding: 6px; transition: color .15s;
}
.paywall-dismiss:hover { color: var(--ink); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
    .paywall-cta:hover { transform: none; }
    .paywall-cta:hover::after { animation: none; }
}

/* ─── Banner stato rete: fisso in alto, discreto, offline finché non torna online ───
   Grigio/neutro offline (non un errore rosso: è normale perdere rete su mobile), verde e
   auto-nascosto dopo ~2s quando la connessione torna. */
.network-status-banner {
    position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0; z-index: 2200;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px; font-size: .85rem; font-weight: 600; color: #fff;
    text-align: center; transform: translateY(-100%); transition: transform .3s ease, background .3s ease;
}
.network-status-banner.show { transform: translateY(0); }
.network-status-banner.is-offline { background: #475569; }
.network-status-banner.is-online { background: var(--green, #22c55e); }
@media (prefers-reduced-motion: reduce) { .network-status-banner { transition: none; } }

/* ─── Copia negli appunti: bottone generico (.js-copy-clipboard), stato "copiato" temporaneo ── */
.js-copy-clipboard { transition: background .2s, border-color .2s, color .2s; }
.js-copy-clipboard.is-copied {
    background: var(--green, #22c55e) !important; border-color: var(--green, #22c55e) !important; color: #fff !important;
}

/* ─── Pull-to-refresh (lista richieste/preventivi, mobile): icona che segue il dito mentre si
   trascina verso il basso in cima alla pagina, poi ruota durante il fetch di aggiornamento. */
.pull-refresh-indicator {
    position: fixed; top: 0; inset-inline-start: 50%; z-index: 1500;
    width: 40px; height: 40px; margin-inline-start: -20px; border-radius: 50%;
    background: #fff; box-shadow: 0 4px 14px rgba(15,23,42,.15);
    display: flex; align-items: center; justify-content: center; color: var(--muted);
    transform: translateY(-60px); transition: color .2s;
}
.pull-refresh-indicator.ready { color: var(--p1); }
.pull-refresh-indicator.loading i { animation: pullRefreshSpin .7s linear infinite; }
@keyframes pullRefreshSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pull-refresh-indicator.loading i { animation-duration: 1.4s; } }

/* ─── Toast: feedback non bloccante (salvataggi, errori), si impila in alto a destra — angolo
   scelto per essere ben visibile subito dopo un salvataggio senza sovrapporsi alle barre azioni
   sticky in fondo alla pagina (.pro-actions), che occupano già l'angolo in basso in molte schermate. */
.ui-toast-stack {
    /* 72px (altezza min di .mkt-nav, sticky-top) + 16px di margine: senza questo offset i toast
       comparivano proprio sopra la navbar fissa, sovrapponendosi al logo/menu. */
    position: fixed; top: 88px; inset-inline-end: 20px; z-index: 2100; display: flex; flex-direction: column;
    gap: 10px; max-width: min(360px, calc(100vw - 40px));
}
.ui-toast {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 14px;
    padding: 12px 14px; box-shadow: 0 12px 30px rgba(15,23,42,.15); border: 1px solid var(--border);
    font-size: .86rem; font-weight: 600; color: var(--ink);
    opacity: 0; transform: translateY(-10px) scale(.97); transition: opacity .2s, transform .2s;
}
.ui-toast-bar-track { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; height: 3px; background: rgba(15,23,42,.06); flex: none !important; }
.ui-toast-bar { display: block; height: 100%; width: 0%; background: currentColor; transition: width linear; }
.ui-toast-success .ui-toast-bar { background: var(--green); }
.ui-toast-error .ui-toast-bar { background: #dc2626; }
.ui-toast-info .ui-toast-bar { background: var(--p1); }
@media (prefers-reduced-motion: reduce) { .ui-toast-bar { transition: none; } }
.ui-toast.ui-toast-in { opacity: 1; transform: none; }
.ui-toast.ui-toast-out { opacity: 0; transform: translateY(-6px) scale(.97); }
.ui-toast span { flex: 1; }
.ui-toast i { font-size: 1.1rem; flex-shrink: 0; }
.ui-toast-success i { color: var(--green); }
.ui-toast-error i { color: #dc2626; }
.ui-toast-info i { color: var(--p1); }
.ui-toast-close {
    border: none; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 2px;
    cursor: pointer; flex-shrink: 0; transition: color .15s;
}
.ui-toast-close:hover { color: var(--ink); }
@media (max-width: 575px) {
    .ui-toast-stack { inset-inline-start: 14px; inset-inline-end: 14px; top: 82px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-toast { transition: opacity .01s; } }

/* ─── Target di tocco più ampi su mobile (attrito UX reale) ──────────
   .chat-action-btn/.chat-emoji-opt a 26px sono sotto la soglia minima consigliata (~44px):
   difficili da toccare con precisione su schermo piccolo. Ingranditi solo sotto i 992px,
   dove il mouse di precisione lascia il posto al dito. */
@media (max-width: 991px) {
    .chat-action-btn { width: 36px; height: 36px; font-size: .9rem; }
    .chat-emoji-opt { width: 36px; height: 36px; font-size: 1.3rem; }
    .chat-menu-btn { width: 44px; height: 44px; }
    .pro-card-fav-btn { width: 40px; height: 40px; }
}

/* ─── Pagina Piani (piani.php): estetica "SaaS High-End" (Linear/Vercel/Stripe) ───
   Scoped a .pricing-page (non tocca --p1/--grad globali usati nel resto del sito).
   Niente Tailwind reale (il progetto non ha una build pipeline): stesse classi CSS
   scoped di prima, estese per ottenere l'effetto vetro/gradient/glow richiesto. */
.pricing-page {
    --pr-ink: #1e293b;        /* slate-800: titoli, mai nero pieno */
    --pr-muted: #64748b;      /* slate-500 */
    --pr-border: #e5e9f0;     /* grigio-blu molto tenue */
    --pr-blue: #008af7;       /* blu professionale, per CTA e accenti */
    --pr-blue-dark: #0070cc;
    --pr-blue-soft: #e6f2fe;  /* blu pastello per sfondi/badge discreti */
    --pr-blue-soft-border: #d9d4ff;
    position: relative;
    background: #f8fafc; /* slate-50 */
    isolation: isolate;
}

/* Sfondo "mesh gradient": alcuni glow radiali sfocati in blu/indigo pastello dietro al contenuto,
   fissi (non animati: eleganti, non distraenti) e tagliati fuori dal flusso con pointer-events:none. */
.pricing-page::before,
.pricing-page::after {
    content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
    filter: blur(70px); opacity: .55;
}
.pricing-page::before {
    top: -160px; inset-inline-start: -120px; width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(0,138,247,.20), transparent 70%);
}
.pricing-page::after {
    top: 260px; inset-inline-end: -160px; width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(99,102,241,.16), transparent 70%);
}
.pricing-page .hero-title { color: var(--pr-ink); }
.pricing-page .hero-title .grad-text { color: var(--pr-blue); background: none; -webkit-text-fill-color: currentColor; }
.pricing-page .hero-sub { color: var(--pr-muted); }

/* Card: glassmorphism leggero (bianco semi-trasparente + blur) e bordo ultra-sottile,
   con hover dinamico (lift + ombra più profonda e morbida). */
.pricing-card {
    position: relative; background: rgba(255,255,255,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 22px; border: 1px solid rgba(148,163,184,.14);
    padding: 44px 38px; height: 100%; display: flex; flex-direction: column; text-align: start;
    box-shadow: 0 30px 60px -20px rgba(15,23,42,.08);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 80px -20px rgba(15,23,42,.12);
    border-color: rgba(0,138,247,.35);
}
.pricing-card-icon {
    width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; margin-bottom: 24px; transition: transform .3s ease;
}
.pricing-card:hover .pricing-card-icon { transform: scale(1.1) rotate(-4deg); }
.pricing-card-icon.free { background: #f1f5f9; color: var(--pr-muted); }
.pricing-card-icon.pro { background: var(--pr-blue-soft); color: var(--pr-blue); }
.pricing-card-icon.business { background: #eef2ff; color: #4f46e5; }
.pricing-card-name { font-size: .95rem; font-weight: 700; color: var(--pr-ink); letter-spacing: .01em; margin-bottom: 10px; }
/* Stesso font-family dei titoli principali (es. .hero-title): entrambi ereditavano già lo stack
   di sistema del body, ma qui lo rendiamo esplicito così il numero del prezzo non rischia di
   scollegarsi visivamente se in futuro un font diverso (es. quello usato sui tag) si allargasse
   per errore ad altri componenti. */
.pricing-card-price {
    font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--pr-ink); letter-spacing: -.02em;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.pricing-card-price.grad-text { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--pr-blue); }
.pricing-card-price-suffix { font-size: .85rem; font-weight: 500; color: var(--pr-muted); margin-inline-start: 2px; }
.pricing-feature-list { list-style: none; padding: 0; margin: 28px 0; flex-grow: 1; }
.pricing-feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .87rem; margin-bottom: 15px; line-height: 1.45; color: var(--pr-ink); }
.pricing-feature-check {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,138,247,.12); color: var(--pr-blue);
    display: flex; align-items: center; justify-content: center; font-size: .62rem; margin-top: 1px;
}
/* Ingresso a cascata delle voci: ogni checkmark appare un filo dopo il precedente quando la card
   entra in vista (stesso IntersectionObserver di .reveal, tramite la classe .in-view del genitore). */
.reveal.in-view .pricing-feature-list li { animation: pricingLiIn .45s ease backwards; }
.pricing-feature-list li:nth-child(1) { animation-delay: .05s; }
.pricing-feature-list li:nth-child(2) { animation-delay: .10s; }
.pricing-feature-list li:nth-child(3) { animation-delay: .15s; }
.pricing-feature-list li:nth-child(4) { animation-delay: .20s; }
.pricing-feature-list li:nth-child(5) { animation-delay: .25s; }
.pricing-feature-list li:nth-child(6) { animation-delay: .30s; }
.pricing-feature-list li:nth-child(7) { animation-delay: .35s; }
.pricing-feature-list li:nth-child(8) { animation-delay: .40s; }
@keyframes pricingLiIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .reveal.in-view .pricing-feature-list li { animation: none !important; opacity: 1; }
}
.pricing-card-cta { margin-top: auto; }
.pricing-card-cta .btn-pricing-solid {
    background: var(--pr-blue); border: 1px solid var(--pr-blue); color: #fff; font-weight: 600;
    border-radius: 8px; transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.pricing-card-cta .btn-pricing-solid:hover { background: var(--pr-blue-dark); border-color: var(--pr-blue-dark); color: #fff; transform: translateY(-1px); }
.pricing-card-cta .btn-pricing-outline {
    background: var(--surface); border: 1px solid var(--pr-border); color: var(--pr-ink); font-weight: 600; border-radius: 8px;
    transition: border-color .2s, background .2s;
}
.pricing-card-cta .btn-pricing-outline:hover { border-color: var(--pr-blue); background: var(--pr-blue-soft); color: var(--pr-blue); }

/* Card "Più scelto" (Pro): deve dominare visivamente — sfondo a gradiente pastello-blu → bianco,
   bordo con glow blu luminoso (statico, non animato) e CTA che risalta più delle altre due. */
.pricing-card-featured {
    background: linear-gradient(160deg, rgba(0,138,247,.10), rgba(255,255,255,.85) 55%);
    border-color: rgba(0,138,247,.4);
    box-shadow: 0 22px 60px rgba(0,138,247,.28), 0 8px 20px rgba(15,23,42,.08), 0 0 0 1px rgba(0,138,247,.1) inset;
    position: relative; z-index: 2; transform: scale(1.06);
}
.pricing-card-featured:hover {
    transform: scale(1.06) translateY(-8px);
    box-shadow: 0 32px 70px rgba(0,138,247,.34), 0 10px 24px rgba(15,23,42,.1), 0 0 0 1px rgba(0,138,247,.14) inset;
    border-color: rgba(0,138,247,.55);
}
@media (max-width: 767px) { .pricing-card-featured { transform: none; } .pricing-card-featured:hover { transform: translateY(-6px); } }
.pricing-card-featured .pricing-card-cta .btn-pricing-solid {
    box-shadow: 0 10px 24px rgba(0,138,247,.35);
}
.pricing-card-featured .pricing-card-cta .btn-pricing-solid:hover {
    box-shadow: 0 14px 30px rgba(47,91,192,.42);
}

/* Card Business: look "lussuoso" — fondo scuro elegante con accenti oro/indigo, per distinguerla
   nettamente dai piani inferiori (chiesto esplicitamente: la Business deve dare senso di premium,
   non essere una card "come le altre" senza fronzoli). L'oro è usato solo sui dettagli
   (bordo superiore, icona, spunte) — mai come sfondo dominante, per non risultare kitsch. */
.pricing-card-business {
    background: linear-gradient(165deg, #1e293b 0%, #0f172a 100%);
    border-color: rgba(212,175,55,.35);
    box-shadow: 0 24px 60px rgba(15,23,42,.28), 0 0 0 1px rgba(212,175,55,.15) inset;
    color: #f8fafc;
    position: relative; overflow: hidden;
}
/* Filo dorato in cima, firma visiva "premium" */
.pricing-card-business::before {
    content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px;
    background: linear-gradient(90deg, transparent, #d4af37 30%, #f4d160 50%, #d4af37 70%, transparent);
}
.pricing-card-business .pricing-card-name,
.pricing-card-business .pricing-card-price,
.pricing-card-business .pricing-feature-list li { color: #f8fafc; }
.pricing-card-business .pricing-card-price.grad-text {
    background: linear-gradient(135deg, #f4d160 0%, #d4af37 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pricing-card-business .pricing-card-price-suffix { color: #cbd5e1; }
.pricing-card-business .pricing-card-icon.business {
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
    color: #0f172a;
    box-shadow: 0 6px 16px rgba(212,175,55,.35);
}
.pricing-card-business .pricing-feature-check {
    background: rgba(212,175,55,.18); color: #f4d160;
}
.pricing-card-business:hover {
    box-shadow: 0 32px 70px rgba(15,23,42,.36), 0 0 0 1px rgba(212,175,55,.25) inset;
    border-color: rgba(212,175,55,.55);
}
/* CTA Business: bottone oro su fondo scuro, contrasto forte */
.pricing-card-business .pricing-card-cta .btn-pricing-solid {
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
    border-color: #d4af37; color: #0f172a; font-weight: 700;
    box-shadow: 0 8px 20px rgba(212,175,55,.28);
}
.pricing-card-business .pricing-card-cta .btn-pricing-solid:hover {
    background: linear-gradient(135deg, #f4d160 0%, #d4af37 100%);
    border-color: #f4d160; color: #0f172a;
    box-shadow: 0 12px 26px rgba(212,175,55,.4);
}
.pricing-card-business .pricing-card-cta .btn-pricing-outline {
    background: transparent; border-color: rgba(212,175,55,.45); color: #f4d160;
}
.pricing-card-business .pricing-card-cta .btn-pricing-outline:hover {
    border-color: #d4af37; background: rgba(212,175,55,.1); color: #f4d160;
}

.pricing-ribbon {
    position: static; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    background: var(--pr-blue); color: #fff; font-size: .72rem; font-weight: 700;
    letter-spacing: .02em; padding: 4px 12px; border-radius: 999px; margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(0,138,247,.3);
}
.pricing-ribbon::after { content: none; }

/* ─── Tabella di confronto: "borderless", solo divisori ultra-sottili, icone minimali ─── */
.pricing-compare-card {
    border-radius: 22px; overflow-x: auto; border: 1px solid rgba(148,163,184,.14);
    background: rgba(255,255,255,.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.pricing-compare-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pr-muted); padding: 8px 12px 18px; font-weight: 600; border: 0; }
.pricing-compare-table thead th.col-pro { color: var(--pr-blue); position: relative; }
.pricing-compare-table thead th.col-pro .col-pro-tag {
    display: block; text-transform: none; font-size: .68rem; font-weight: 700; letter-spacing: 0;
    color: #fff; background: var(--pr-blue); border-radius: 999px; padding: 2px 10px; margin: 0 auto 6px; width: fit-content;
}
.pricing-compare-table tbody tr { transition: background .15s; }
.pricing-compare-table tbody tr:hover { background: rgba(0,138,247,.02); }
.pricing-compare-table td, .pricing-compare-table th { border: 0; border-bottom: 1px solid rgba(148,163,184,.16); padding: 14px 12px; }
.pricing-compare-table tbody tr:last-child td { border-bottom: 0; }
.pricing-compare-table td.col-pro-cell { background: rgba(0,138,247,.05); border-inline-start: 1px solid rgba(0,138,247,.1); border-inline-end: 1px solid rgba(0,138,247,.1); }
.pricing-compare-table tbody tr:hover td.col-pro-cell { background: rgba(0,138,247,.08); }
.pricing-compare-table .pr-check, .pricing-compare-table .pr-cross {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: .68rem;
}
/* Check e croce erano quasi indistinguibili (stesso peso visivo, tono pallido su entrambi) — il check
   ora è pieno/colorato (segnale positivo netto), la croce resta ma più tenue e "spenta" per far
   arretrare visivamente ciò che NON è incluso invece di dargli lo stesso peso di ciò che lo è. */
.pricing-compare-table .pr-check { color: #fff; background: var(--pr-blue); box-shadow: 0 2px 6px rgba(0,138,247,.35); }
.pricing-compare-table .pr-cross { color: rgba(100,116,139,.55); background: transparent; opacity: .7; font-size: .6rem; }
@media (max-width: 575px) {
    .pricing-compare-table { min-width: 620px; }
    .pricing-compare-table th:first-child, .pricing-compare-table td:first-child {
        position: sticky; left: 0; z-index: 2; background: rgba(255,255,255,.97);
        box-shadow: 4px 0 8px -2px rgba(0,0,0,.06); max-width: 140px; font-size: .78rem;
    }
}

/* ─── Credits explainer: card con 3 tier visuali ────── */
.credits-explainer {
    background: rgba(255,255,255,.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(148,163,184,.14); border-radius: 20px;
    box-shadow: 0 20px 50px rgba(15,23,42,.06); overflow: hidden;
}
.credits-explainer-header {
    display: flex; align-items: center; gap: 16px; padding: 24px 28px 20px;
    border-bottom: 1px solid rgba(148,163,184,.12);
}
.credits-explainer-icon {
    width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
    background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    box-shadow: 0 6px 16px rgba(245,158,11,.3);
}
.credits-explainer-tiers {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.credits-tier {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 24px 16px; text-align: center;
    border-inline-end: 1px solid rgba(148,163,184,.1);
    transition: background .2s;
}
.credits-tier:last-child { border-inline-end: none; }
.credits-tier:hover { background: rgba(0,138,247,.03); }
.credits-tier-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.credits-tier-icon.free { background: #f1f5f9; color: var(--pr-muted); }
.credits-tier-icon.pro { background: var(--pr-blue-soft); color: var(--pr-blue); }
.credits-tier-icon.business { background: #1e293b; color: #f4d160; }
.credits-tier-name { font-size: .78rem; font-weight: 700; color: var(--pr-ink); text-transform: uppercase; letter-spacing: .04em; }
.credits-tier-value { font-size: .85rem; font-weight: 600; color: var(--pr-muted); }
@media (max-width: 480px) {
    .credits-explainer-header { flex-direction: column; text-align: center; gap: 10px; }
}

/* ─── Credits extra: pacchetti acquistabili ────── */
.credits-extra-section {
    background: rgba(255,255,255,.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(148,163,184,.14); border-radius: 20px;
    box-shadow: 0 20px 50px rgba(15,23,42,.06); overflow: hidden;
}
.credits-extra-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 24px 28px 20px; border-bottom: 1px solid rgba(148,163,184,.12);
}
.credits-extra-header h2 { color: var(--pr-blue); }
.credits-extra-saldo {
    flex-shrink: 0; font-size: .82rem; font-weight: 600; color: var(--pr-blue);
    background: var(--pr-blue-soft); padding: 6px 14px; border-radius: 999px;
    display: flex; align-items: center; gap: 6px;
}
.credits-extra-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0;
}
.credits-extra-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 28px 20px; text-align: center; position: relative;
    border-inline-end: 1px solid rgba(148,163,184,.1);
    transition: background .2s;
}
.credits-extra-card:last-child { border-inline-end: none; }
.credits-extra-card:hover { background: rgba(0,138,247,.03); }
.credits-extra-card.popular { background: rgba(0,138,247,.04); }
.credits-extra-card.popular:hover { background: rgba(0,138,247,.07); }
.credits-extra-popular {
    position: absolute; top: 10px; inset-inline-end: 10px;
    font-size: .62rem; font-weight: 700; color: #fff; background: var(--pr-blue);
    padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .02em;
}
.credits-extra-amount {
    font-size: 2.2rem; font-weight: 800; color: var(--pr-ink); line-height: 1;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.credits-extra-label { font-size: .78rem; color: var(--pr-muted); font-weight: 500; }
.credits-extra-price { font-size: 1.15rem; font-weight: 700; color: var(--pr-ink); margin-top: 4px; }
.credits-extra-unit { font-size: .72rem; color: var(--pr-muted); margin-bottom: 12px; }
.credits-extra-card .btn { border-radius: 8px; font-weight: 600; }
.credits-extra-card .btn-pricing-solid {
    background: var(--pr-blue); border: 1px solid var(--pr-blue); color: #fff;
    transition: background .2s, box-shadow .2s, transform .2s;
}
.credits-extra-card .btn-pricing-solid:hover { background: var(--pr-blue-dark); border-color: var(--pr-blue-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,138,247,.3); }
.credits-extra-card .btn-pricing-outline {
    background: var(--surface); border: 1px solid var(--pr-border); color: var(--pr-ink);
    transition: border-color .2s, background .2s;
}
.credits-extra-card .btn-pricing-outline:hover { border-color: var(--pr-blue); background: var(--pr-blue-soft); color: var(--pr-blue); }
@media (max-width: 575px) {
    .credits-extra-header { flex-direction: column; }
    .credits-extra-grid { grid-template-columns: 1fr; }
    .credits-extra-card { border-inline-end: none; border-bottom: 1px solid rgba(148,163,184,.1); padding: 20px; }
    .credits-extra-card:last-child { border-bottom: none; }
}

/* ─── Benefici finali: icone in badge circolare, tono blu tenue coerente ────── */
.pricing-benefit-icon {
    width: 52px; height: 52px; border-radius: 14px; background: var(--pr-blue-soft, #e6f2fe); color: var(--pr-blue, #008af7);
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 0 auto 16px;
}
.pricing-benefit h3 { color: var(--pr-ink); }

/* ─── Ritorno da PayPal (premium-return.php): card di conferma, non solo testo centrato ─── */
.premium-return-card {
    position: relative; background: rgba(255,255,255,.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(148,163,184,.14); border-radius: 24px; padding: 44px 38px;
    box-shadow: 0 20px 50px rgba(15,23,42,.08);
}
.premium-return-card.attivo { border-color: rgba(var(--p1-rgb),.3); box-shadow: 0 20px 50px rgba(var(--p1-rgb),.14); }
.premium-return-icon {
    width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center;
    justify-content: center; font-size: 1.8rem; background: var(--grad); color: #fff;
    animation: premiumReturnPop .5s cubic-bezier(.34,1.56,.64,1) backwards, premiumReturnRing 2.2s ease-in-out .5s infinite;
}
.premium-return-icon-pending { background: #f1f5f9; color: var(--pr-muted, #64748b); animation: premiumReturnPop .5s ease backwards; }
.premium-return-icon-error { background: #fef2f2; color: #ef4444; animation: premiumReturnPop .5s ease backwards; }
@keyframes premiumReturnPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes premiumReturnRing {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--p1-rgb),.35); }
    50% { box-shadow: 0 0 0 12px rgba(var(--p1-rgb),0); }
}
@media (prefers-reduced-motion: reduce) {
    .premium-return-icon { animation: none !important; }
}

/* ─── Portfolio: riordino a trascinamento + editor inquadratura ────────────── */
.portfolio-item { cursor: grab; transition: opacity .15s, transform .15s; }
.portfolio-item.dragging { opacity: .4; }
.portfolio-item.drag-over { transform: scale(.95); }
.portfolio-item img { -webkit-user-drag: none; }

.portfolio-focus-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,.75); z-index: 2300; display: flex;
    align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s; padding: 16px;
}
.portfolio-focus-overlay.open { opacity: 1; pointer-events: auto; }
.portfolio-focus-box { background: var(--surface); border-radius: 20px; padding: 24px; width: 100%; max-width: 420px; }
.portfolio-focus-frame {
    position: relative; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
    background: #0f172a; cursor: grab; touch-action: none;
}
.portfolio-focus-frame.grabbing { cursor: grabbing; }
.portfolio-focus-frame img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* ─── Stato disabilitato coerente (in tutto il sito) ──────────────────────
   Prima ogni componente gestiva "disabled" a modo suo (o non lo gestiva affatto): qui una
   regola unica, con !important e in fondo al foglio per vincere sempre la cascata, spegne
   qualunque hover/ombra/trasformazione attiva così un elemento disabilitato non dà mai un
   feedback visivo che suggerisce "puoi ancora interagirci". */
.btn:disabled, .btn.disabled, button:disabled, input:disabled, textarea:disabled, select:disabled,
a.disabled, [aria-disabled="true"] {
    opacity: .5 !important; cursor: not-allowed !important; box-shadow: none !important;
    transform: none !important; filter: none !important; pointer-events: none;
}
/* pointer-events:none sopra basta a bloccare i normali :hover — ma i bottoni che ricevono lo
   stato "disabled" dinamicamente via JS restando cliccabili un istante (transizioni in corso)
   vanno comunque coperti esplicitamente. */
.btn:disabled:hover, button:disabled:hover, a.disabled:hover {
    box-shadow: none !important; transform: none !important;
}

/* ─── Ritardo di 300ms prima dei tooltip grafici (vedi .info-tip in app.js) ──
   Il ritardo vero e proprio è gestito in JS (serve un timer cancellabile al mouseout, non
   ottenibile con solo CSS su un elemento mostrato/nascosto via classi) — qui solo la nota di
   riferimento; la transizione di comparsa resta quella già definita su .info-tip-box. */

/* ─── Icona di successo animata (cerchio + spunta disegnata) ──────────────
   Usata nel toast di successo al posto della solita icona a font: il cerchio si disegna
   tracciando il contorno (stroke-dashoffset da piena lunghezza a 0), poi la spunta fa lo stesso
   subito dopo, infine tutto l'elemento fa un piccolo "pulse" di espansione — puro CSS, nessun JS
   oltre all'inserimento dell'SVG stesso. */
.svg-success-check { overflow: visible; flex-shrink: 0; animation: successPulse .5s ease-out .55s; }
.svg-success-check-circle {
    stroke: #16a34a; stroke-width: 3; stroke-dasharray: 145; stroke-dashoffset: 145;
    animation: successDraw .4s ease-out forwards;
}
.svg-success-check-mark {
    stroke: #16a34a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 36; stroke-dashoffset: 36; animation: successDraw .25s ease-out .35s forwards;
}
@keyframes successDraw { to { stroke-dashoffset: 0; } }
@keyframes successPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) {
    .svg-success-check, .svg-success-check-circle, .svg-success-check-mark { animation: none; stroke-dashoffset: 0; }
}

/* ─── Nessuna selezione accidentale su icone categoria e badge ───────────
   Click ripetuti/veloci su questi elementi piccoli e ravvicinati capitava selezionassero il testo
   circostante invece di attivare il click — puramente decorativi/informativi, non c'è testo utile
   da copiare qui. */
.req-ico, .cat-icon-wrap, .tag-pill, .badge-verificato-pill, .dash-status-badge,
.pro-req-meta-count, .stat-ico, .badge-piva {
    user-select: none; -webkit-user-select: none;
}

/* ─── Supporto RTL (arabo) ────────────────────────────────────────────────
   Tutto il resto del foglio di stile usa proprietà logiche (margin-inline-start/end,
   padding-inline-start/end, inset-inline-start/end, text-align:start/end, border-*-radius
   logiche) invece di left/right fisici: si specchiano da sole in base all'attributo dir
   sull'elemento <html> (impostato da includes/header.php via i18n_direzione()), senza bisogno
   di regole [dir="rtl"] duplicate qui. Restano da gestire esplicitamente solo le cose che le
   proprietà logiche NON coprono automaticamente: le icone "direzionali" (frecce/chevron/caret),
   il cui SIGNIFICATO ("avanti"/"indietro") dipende dal verso di lettura e non dalla loro forma
   grafica fissa — un fa-arrow-right che punta a destra significa "avanti" in LTR ma "indietro"
   in RTL se non viene specchiato. */
[dir="rtl"] .fa-arrow-right, [dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-chevron-right, [dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-caret-right, [dir="rtl"] .fa-caret-left,
[dir="rtl"] .fa-angle-right, [dir="rtl"] .fa-angle-left {
    transform: scaleX(-1);
}
/* Alcune icone hanno già una propria transizione/animazione su transform (es. bottoni con hover):
   qui si applica solo lo scaleX fisso via classe wrapper quando serve un mix — per i casi semplici
   sopra non c'è nessun'altra transform in conflitto, verificato nelle regole esistenti del file. */

/* Calendario disponibilità orarie settimanali (dashboard.php, professional_orari): una riga per
   giorno con le fasce orarie aggiunte, invece di 7 select rigidi — un professionista su turni può
   avere più fasce nello stesso giorno (es. mattina+pomeriggio). */
.orari-giorno-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.orari-giorno-row:last-child { border-bottom: none; }
.orari-giorno-label { width: 90px; flex-shrink: 0; font-weight: 700; font-size: .85rem; }
.orari-fasce { display: flex; flex-wrap: wrap; gap: 8px; flex-grow: 1; }
.orari-fascia { display: flex; align-items: center; gap: 6px; background: var(--soft, #f8f9ff); border-radius: 8px; padding: 4px 8px; }
.orari-fascia input[type="time"] { width: 100px; }
.orari-fascia-rimuovi {
    display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0;
    border-radius: 50%; background: rgba(220,38,38,.12); border: none; color: #dc2626; font-size: .65rem; cursor: pointer;
}
.orari-fascia-rimuovi:hover { background: rgba(220,38,38,.25); }
.orari-aggiungi-btn {
    border: 1px dashed var(--border); border-radius: 8px; background: none; color: var(--p1);
    font-size: .78rem; font-weight: 600; padding: 5px 10px; cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
.orari-aggiungi-btn:hover { border-color: var(--p1); background: var(--grad-soft); }
@media (max-width: 576px) { .orari-giorno-label { width: 100%; } }

/* Stessa griglia, versione sola-lettura per il profilo pubblico (professionista.php). */
.orari-pubblico-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: .88rem; }
.orari-pubblico-giorno { width: 90px; flex-shrink: 0; font-weight: 700; }
.orari-pubblico-fasce { display: flex; flex-wrap: wrap; gap: 6px; }
.orari-pubblico-fascia { background: var(--grad-soft); color: var(--p1); border-radius: 999px; padding: 3px 12px; font-weight: 600; }

/* ─── Testo nitido sulle card all'hover ───────────────────────────────────────
   Su Chrome/Windows un elemento con `transform` diventa un layer GPU che perde l'antialiasing
   ClearType: il testo dentro appare "sfocato" al passaggio del mouse. Togliamo lo spostamento
   verticale dalle CARD DI CONTENUTO (non da icone/bottoni, dove il testo è corto o assente): a
   segnalare l'hover resta l'ombra già definita in ciascuna regola, e il testo rimane perfettamente
   nitido. Posizionato in fondo al foglio per battere per ordine di sorgente gli hover originali. */
.pro-card:hover,
.cat-card:hover,
.annuncio-card:hover,
.dash-kpi:hover,
.dash-quick-card:hover,
.qa-card:hover,
.pro-req:hover,
.step-card:hover,
.trust-badge:hover,
.lav-gestione-card:hover,
.pagamenti-env-card:hover,
.pro-trust-stat:hover,
.dash-cat-card:hover,
.req-filter-field:hover,
.req-detail-card:hover,
.pro-profile-wrap .req-detail-card:hover,
.lav-detail-wrap .req-detail-card:not(.req-detail-card-cta):hover,
.lav-detail-wrap .req-detail-stat:hover {
    transform: none;
}

/* ─── Filtri AJAX: stato di caricamento sul blocco risultati ─────────────────
   Durante il fetch il contenitore prende .af-loading: i risultati si sfumano e appare uno spinner
   centrato in alto, senza far "saltare" l'altezza della pagina. */
.af-loading { position: relative; min-height: 160px; }
.af-loading > * { opacity: .35; pointer-events: none; transition: opacity .2s ease; }
.af-loading::after {
    content: ''; position: absolute; top: 34px; inset-inline-start: 50%; width: 36px; height: 36px;
    margin-inline-start: -18px; border: 3px solid rgba(var(--p1-rgb),.22); border-top-color: var(--p1);
    border-radius: 50%; animation: afSpin .7s linear infinite; z-index: 2;
}
@keyframes afSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .af-loading::after { animation-duration: 1.4s; } }
/* Contenuto risultati inserito via AJAX: forzato visibile (l'IntersectionObserver non lo osserva)
   con una dissolvenza pulita del blocco, invece dell'animazione stagger che si incastrerebbe. */
.af-in .reveal, .af-in.reveal { opacity: 1 !important; transform: none !important; }
.af-in .stagger-item { animation: none !important; opacity: 1 !important; }
.af-in { animation: afFadeIn .35s ease; }
@keyframes afFadeIn { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .af-in { animation: none; } }

/* Secondo percorso nell'hero della home (bacheca lavoro): rende esplicita la doppia natura del sito
   — preventivi + offerte di lavoro — già nel primo impatto, non solo scorrendo. */
.hero-alt-path {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px;
    font-size: .9rem; color: var(--muted);
}
.hero-alt-path > i { color: var(--p1); }
.hero-alt-path a { color: var(--p1); font-weight: 700; text-decoration: none; }
.hero-alt-path a:hover { text-decoration: underline; }
.hero-alt-sep { color: var(--border); }

/* Barra "Completamento CV" (includes/cv_panel.php): mostra a colpo d'occhio quanto è completo il CV
   + un tip motivazionale (più info = più chance con i datori di lavoro). */
.cv-completion { background: var(--grad-soft); border: 1px solid rgba(var(--p1-rgb),.15); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; }
.cv-completion-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cv-completion-label { font-weight: 700; font-size: .9rem; }
.cv-completion-label i { color: var(--p1); margin-inline-end: 5px; }
.cv-completion-pct { font-weight: 800; color: var(--p1); font-size: 1.05rem; }
.cv-completion-bar { height: 9px; border-radius: 999px; background: rgba(var(--p1-rgb),.12); overflow: hidden; }
.cv-completion-bar > span { display: block; height: 100%; background: var(--grad-vivid); border-radius: 999px; transition: width .7s cubic-bezier(.22,1,.36,1); }
.cv-completion-tip { font-size: .82rem; color: var(--muted); margin-top: 8px; }
.cv-completion-tip i { color: #f59e0b; margin-inline-end: 4px; }
@media (prefers-reduced-motion: reduce) { .cv-completion-bar > span { transition: none; } }

/* Bottoni "Registra video / Carica file" del CV: più arrotondati e leggermente più grandi (richiesto). */
.cv-video-cta { padding: 10px 20px; font-size: .95rem; font-weight: 700; }

/* Widget "Confronto storico" ultime 4 settimane (piano Business): sparkline SVG + label per settimana.
   Contenitore .storico-chart evita che il grafico esca dai bordi della card e mantiene lo stesso
   respiro delle altre stat sopra. */
.storico-chart { width: 100%; overflow: hidden; padding: 8px 0; }
.storico-chart svg { filter: drop-shadow(0 2px 4px rgba(0,138,247,.15)); }
.storico-labels { padding: 0 12px; }
.storico-labels span { text-align: center; line-height: 1.3; font-size: .78rem; }
.storico-labels strong { font-size: .95rem; font-weight: 700; }

/* Annunci sponsorizzati (Business): l'annuncio pubblicato da un datore col piano Business sale in
   cima alla griglia (boost lato query) e riceve un'evidenziazione visiva — bordo/sfondo soft con
   accenti oro e badge "In evidenza". Vantaggio automatico del piano, nessun pagamento extra.
   Solo su .pro-req sponsorizzate: se il datore è Pro/Free niente stile speciale. */
.pro-req.pro-req-sponsorizzato {
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 60%);
    border-color: rgba(212,175,55,.45);
    box-shadow: 0 10px 24px rgba(212,175,55,.15), 0 0 0 1px rgba(212,175,55,.15) inset;
    position: relative;
}
.pro-req.pro-req-sponsorizzato::before {
    content: ''; position: absolute; top: 0; inset-inline: 0; height: 4px;
    background: linear-gradient(90deg, transparent, #d4af37 30%, #f4d160 50%, #d4af37 70%, transparent);
    border-radius: inherit; border-radius: 18px 18px 0 0;
}
.pro-req-sponsor-badge {
    position: absolute; top: -10px; inset-inline-end: 16px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
    color: #fff; font-weight: 700; font-size: .72rem; padding: 4px 10px 4px 9px;
    border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
    box-shadow: 0 6px 14px rgba(212,175,55,.35);
}
.pro-req-sponsor-badge i { font-size: .78em; }

/* Gerarchia visiva sponsor (modello Subito): vetrina è più forte dell'evidenza, che è più forte del
   business auto. Riflette l'investimento in crediti dell'utente in un feedback visivo proporzionato. */
.pro-req.pro-req-vetrina {
    background: linear-gradient(135deg, #fff9db 0%, #ffffff 50%);
    border-color: rgba(217,119,6,.55);
    box-shadow: 0 14px 30px rgba(217,119,6,.22), 0 0 0 1px rgba(217,119,6,.22) inset;
}
.pro-req.pro-req-vetrina::before {
    background: linear-gradient(90deg, transparent, #f59e0b 25%, #d97706 50%, #f59e0b 75%, transparent);
    height: 5px;
}
.pro-req-sponsor-badge-vetrina {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 8px 18px rgba(217,119,6,.45);
    font-size: .74rem;
}
.pro-req.pro-req-evidenza {
    background: linear-gradient(135deg, #fef9c3 0%, #ffffff 55%);
    border-color: rgba(202,138,4,.4);
    box-shadow: 0 8px 20px rgba(202,138,4,.14);
}
.pro-req-sponsor-badge-evidenza {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
    box-shadow: 0 6px 14px rgba(202,138,4,.3);
}
/* .pro-req-business-auto usa lo stile di default .pro-req-sponsorizzato (bordo dorato tenue) */

/* Pannello "Promuovi" nella gestione annunci (lavoro-gestione.php): 3 pulsanti sponsor affiancati,
   ognuno con icona + label + prezzo in crediti. Stile "shopping" leggero — chiaro cosa costa, cosa
   ottieni, e se già attivo mostra scadenza + "Rinnova" invece del prezzo iniziale. */
.lav-promuovi-strip { background: var(--grad-soft); border: 1px solid rgba(var(--p1-rgb),.15); border-radius: 14px; padding: 14px 16px; }
.lav-promuovi-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.lav-promuovi-title { font-weight: 700; font-size: .9rem; }
.lav-promuovi-title i { color: var(--p1); margin-inline-end: 5px; }
.lav-promuovi-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 640px) { .lav-promuovi-actions { grid-template-columns: 1fr; } }
.lav-promuovi-btn {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border);
    background: var(--surface); border-radius: 12px; cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    text-align: start; font-size: .88rem; color: var(--ink);
}
.lav-promuovi-btn:hover:not(:disabled) { border-color: rgba(var(--p1-rgb),.5); box-shadow: 0 6px 14px rgba(var(--p1-rgb),.1); }
.lav-promuovi-btn:disabled { opacity: .5; cursor: not-allowed; }
.lav-promuovi-btn > i { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; }
.lav-promuovi-btn strong { display: block; font-weight: 700; line-height: 1.2; }
.lav-promuovi-btn span { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
/* Colori per tipo (crescenti come nella lista pubblica: bump blu neutro, evidenza giallo, vetrina oro) */
.lav-promuovi-bump > i     { background: rgba(var(--p1-rgb),.12); color: var(--p1); }
.lav-promuovi-evidenza > i { background: rgba(234,179,8,.15);      color: #ca8a04; }
.lav-promuovi-vetrina > i  { background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; box-shadow: 0 4px 10px rgba(217,119,6,.35); }
.lav-promuovi-btn[data-attiva="1"] { border-color: rgba(234,179,8,.5); background: linear-gradient(180deg, rgba(254,249,195,.35), var(--surface)); }
.lav-promuovi-btn[data-attiva="1"].lav-promuovi-vetrina { border-color: rgba(217,119,6,.5); background: linear-gradient(180deg, rgba(255,249,219,.5), var(--surface)); }
.lav-promuovi-nocrediti { font-size: .82rem; color: var(--muted); }
.lav-promuovi-nocrediti i { color: #d97706; margin-inline-end: 4px; }
.lav-promuovi-nocrediti a { color: var(--p1); font-weight: 700; text-decoration: none; }
.lav-promuovi-nocrediti a:hover { text-decoration: underline; }

/* Sticky footer: <main> occupa tutto lo spazio verticale rimasto tra header e footer. Il footer
   sale automaticamente quando c'è contenuto, ma su pagine corte (es. lavoro-gestione senza annunci)
   resta ancorato in basso invece di flottare a metà pagina. */
body > main { flex: 1 0 auto; }
body > footer, body > .footer { flex-shrink: 0; }

/* ─── Polish UI Gestione Annunci (lavoro-gestione.php) ──────────────────
   Scoped a .lav-gestione-wrap: nessun impatto su altre pagine che usano le stesse classi
   condivise (.req-detail-stat, .lav-gestione-card, .dash-empty, ecc.). */

/* KPI card: numeri più grandi + più aria + hover lift con ombra brand + micro-scale sull'icona */
.lav-gestione-wrap .req-detail-stat {
    padding: 18px 20px; border-radius: 18px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lav-gestione-wrap .req-detail-stat:hover {
    transform: translateY(-3px); box-shadow: 0 16px 34px rgba(var(--p1-rgb),.12); border-color: rgba(var(--p1-rgb),.25);
}
.lav-gestione-wrap .req-detail-stat i {
    width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center;
    justify-content: center; font-size: 1.15rem; flex-shrink: 0; transition: transform .2s ease;
}
.lav-gestione-wrap .req-detail-stat:hover i { transform: scale(1.1); }
.lav-gestione-wrap .req-detail-stat.lav-stat-green i  { background: rgba(22,163,74,.14); }
.lav-gestione-wrap .req-detail-stat.lav-stat-blue i   { background: rgba(37,99,235,.14); }
.lav-gestione-wrap .req-detail-stat.lav-stat-amber i  { background: rgba(245,158,11,.14); }
.lav-gestione-wrap .req-detail-stat strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.lav-gestione-wrap .req-detail-stat span   { font-size: .82rem; margin-top: 2px; }

/* Card annuncio: hover lift discreto + filo gradiente in cima all'hover (firma "premium") */
.lav-gestione-wrap .lav-gestione-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; position: relative;
    /* overflow: visible: i tooltip (title HTML) escono dalla card senza essere tagliati.
       Il border-top animato usa border-radius del contenitore per restare visivamente in linea. */
    overflow: visible;
}
/* Border-top gradient SEMPRE visibile (prima solo su hover): identifica ogni card come "attiva",
   effetto di scorrimento colore lento che aggiunge vita senza distrarre.
   border-radius sui top corners per seguire la card, così il gradient non sporge dalla card. */
.lav-gestione-wrap .lav-gestione-card::before {
    content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px;
    border-top-left-radius: inherit; border-top-right-radius: inherit;
    background: linear-gradient(90deg, var(--p1), var(--p2), var(--p1));
    background-size: 200% 100%;
    opacity: 1;
    animation: lavCardBorderShift 6s linear infinite;
}
.lav-gestione-wrap .lav-gestione-card:hover::before { animation-duration: 2s; }
@keyframes lavCardBorderShift {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
.lav-gestione-wrap .lav-gestione-card:hover .lav-job-ico { transform: rotate(-6deg) scale(1.08); }
.lav-gestione-wrap .lav-job-ico { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
/* Titolo annuncio: gradient text al hover, effetto premium */
.lav-gestione-wrap .lav-gestione-card a.fw-semibold { transition: background .2s; background-clip: border-box; }
.lav-gestione-wrap .lav-gestione-card:hover a.fw-semibold {
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
@media (prefers-reduced-motion: reduce) {
    .lav-gestione-wrap .lav-gestione-card::before { animation: none; background: var(--grad-vivid); }
}

/* Empty state "Nessuna candidatura ancora": box centrato, più bello del text muto */
.lav-empty-cand {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px;
    background: var(--grad-soft); border: 1px dashed rgba(var(--p1-rgb),.22);
    position: relative; overflow: hidden;
}
/* Wave sottile che scorre da sinistra a destra, effetto "in attesa di qualcuno" */
.lav-empty-cand::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    animation: lavEmptyWave 3.5s ease-in-out infinite;
}
@keyframes lavEmptyWave { 0%,100% { left: -40%; } 50% { left: 100%; } }
.lav-empty-cand-ico {
    width: 46px; height: 46px; border-radius: 12px; background: var(--surface); color: var(--p1);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(var(--p1-rgb),.12);
    animation: lavEmptyBob 3s ease-in-out infinite;
}
@keyframes lavEmptyBob {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .lav-empty-cand::before, .lav-empty-cand-ico { animation: none; }
}

/* Termometro: aggiunge una progress bar sottile sotto il testo che rappresenta la posizione
   (1° su 5 = barra piena verde; 5° su 5 = quasi vuota, rossa). Segnale visivo istantaneo. */
.lav-termo { flex-wrap: wrap; }
.lav-termo-progress {
    width: 100%; height: 4px; border-radius: 999px; background: rgba(15,23,42,.06);
    overflow: hidden; margin-top: 8px;
}
.lav-termo-progress-fill {
    height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.4,0,.2,1);
    background: linear-gradient(90deg, currentColor, currentColor);
}
.lav-termo-caldo   .lav-termo-progress-fill { background: linear-gradient(90deg, #22c55e, #16a34a); }
.lav-termo-tiepido .lav-termo-progress-fill { background: linear-gradient(90deg, #f59e0b, #d97706); }
.lav-termo-freddo  .lav-termo-progress-fill { background: linear-gradient(90deg, #ef4444, #b91c1c); }

/* Badge "Consigliato" su Vetrina Top: ribbon dorato piccolo in alto a destra. Segnala l'opzione
   di miglior valore senza gridare (visibile ma non invadente). Solo quando non è attiva. */
.lav-promuovi-vetrina:not([data-attiva="1"]):not(:disabled) .lav-promuovi-badge-top {
    position: absolute; top: -9px; right: 10px;
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #fff; font-size: .56rem; font-weight: 800; letter-spacing: .4px;
    padding: 3px 7px; border-radius: 999px; text-transform: uppercase; line-height: 1;
    box-shadow: 0 3px 6px rgba(180,83,9,.35);
    white-space: nowrap;
    z-index: 2;
}
.lav-promuovi-vetrina .lav-promuovi-badge-top { display: none; }
.lav-promuovi-vetrina:not([data-attiva="1"]):not(:disabled) .lav-promuovi-badge-top { display: inline-block; }

/* Hover 3D lift più marcato sui bottoni Promuovi, con ombra colorata per tipo. Sposta il focus
   visivo istantaneamente su ciò che stai per cliccare. */
.lav-promuovi-btn { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.lav-promuovi-btn:hover:not(:disabled) { transform: translateY(-3px); }
.lav-promuovi-bump:hover:not(:disabled)     { box-shadow: 0 12px 22px -8px rgba(var(--p1-rgb),.35); }
.lav-promuovi-evidenza:hover:not(:disabled) { box-shadow: 0 12px 22px -8px rgba(245,158,11,.45); }
.lav-promuovi-vetrina:hover:not(:disabled)  { box-shadow: 0 14px 26px -8px rgba(217,119,6,.55); border-color: rgba(217,119,6,.5); }
@media (prefers-reduced-motion: reduce) {
    .lav-promuovi-btn:hover:not(:disabled) { transform: none; }
}

/* Hero card top ("I tuoi annunci e candidature"): micro-shimmer diagonale una volta al load,
   segnala "pagina aggiornata". */
.lav-gestione-wrap .req-list-hero { position: relative; overflow: hidden; }
.lav-gestione-wrap .req-list-hero::after {
    content: ''; position: absolute; top: 0; left: -30%; width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
    animation: lavHeroShimmer 2.5s ease-out 1;
    pointer-events: none;
}
@keyframes lavHeroShimmer {
    0%   { left: -30%; }
    100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) { .lav-gestione-wrap .req-list-hero::after { animation: none; display: none; } }

/* Tab toggle: transizione più fluida quando cambio sezione (Annunci ↔ Candidature) */
.lav-gestione-wrap .lav-tab-toggle button { transition: background-color .2s, color .2s, transform .15s; }
.lav-gestione-wrap .lav-tab-toggle button:not(.active):hover { transform: translateY(-1px); }

/* Bottone chiusura annuncio: colore rosso più chiaro quando hover (era generico outline-accent) */
.lav-gestione-wrap .btn-chiudi-annuncio:hover { border-color: #dc2626; color: #dc2626; background: #fef2f2; }

@media (prefers-reduced-motion: reduce) {
    .lav-gestione-wrap .req-detail-stat,
    .lav-gestione-wrap .req-detail-stat i,
    .lav-gestione-wrap .lav-gestione-card,
    .lav-gestione-wrap .lav-job-ico { transition: none; }
    .lav-gestione-wrap .req-detail-stat:hover,
    .lav-gestione-wrap .req-detail-stat:hover i,
    .lav-gestione-wrap .lav-gestione-card:hover .lav-job-ico { transform: none; }
}

@media (max-width: 575.98px) {
    .lav-gestione-wrap .req-detail-stat {
        flex-direction: column; text-align: center; padding: 12px 8px; gap: 6px;
    }
    .lav-gestione-wrap .req-detail-stat i { width: 34px; height: 34px; font-size: .95rem; border-radius: 9px; }
    .lav-gestione-wrap .req-detail-stat strong { font-size: 1.2rem; }
    .lav-gestione-wrap .req-detail-stat span { font-size: .7rem; }
}

/* "Termometro annuncio": indicatore visivo della freddezza — quanti annunci più recenti nella
   stessa categoria stanno davanti. Verde = nei primi 3, ambra = 4-10 davanti, rosso = 10+ davanti.
   Pallino colorato + testo con posizione reale ("Sei al 5° posto su 12"). Il rosso ha un lieve
   pulse per attirare l'occhio, senza essere aggressivo. */
.lav-termo {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--surface);
}
.lav-termo-dot {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}
.lav-termo-caldo   { background: linear-gradient(180deg, rgba(34,197,94,.06), transparent); border-color: rgba(34,197,94,.28); }
.lav-termo-caldo   .lav-termo-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.22); }
.lav-termo-tiepido { background: linear-gradient(180deg, rgba(245,158,11,.06), transparent); border-color: rgba(245,158,11,.32); }
.lav-termo-tiepido .lav-termo-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.22); }
.lav-termo-freddo  { background: linear-gradient(180deg, rgba(239,68,68,.07), transparent); border-color: rgba(239,68,68,.36); }
.lav-termo-freddo  .lav-termo-dot {
    background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.24);
    animation: lavTermoPulse 2.5s ease-in-out infinite;
}
@keyframes lavTermoPulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(239,68,68,.24); }
    50%     { box-shadow: 0 0 0 7px rgba(239,68,68,.06); }
}
/* Pulse leggero anche sul verde "caldo": conferma vitale (annuncio ben posizionato) senza urlare.
   Ampiezza minore del rosso (rgba lower) per non attirare l'occhio quanto lo stato critico. */
.lav-termo-caldo .lav-termo-dot {
    animation: lavTermoPulseOk 3.2s ease-in-out infinite;
}
@keyframes lavTermoPulseOk {
    0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.22); }
    50%     { box-shadow: 0 0 0 6px rgba(34,197,94,.05); }
}
@media (prefers-reduced-motion: reduce) {
    .lav-termo-freddo .lav-termo-dot,
    .lav-termo-caldo  .lav-termo-dot { animation: none; }
}

/* Vetrina Top: shimmer diagonale sul bottone premium quando non attivo — attira l'occhio verso
   l'opzione di maggior valore senza forzare (nessun colore fisso in più, usa il gradiente esistente). */
/* overflow: visible per non tagliare il badge "MIGLIOR VALORE" che sporge in alto (top: -9px).
   Lo shimmer resta contenuto via clip-path (inset con lo stesso border-radius del bottone). */
.lav-promuovi-vetrina:not([data-attiva="1"]):not(:disabled) {
    position: relative; overflow: visible;
}
.lav-promuovi-vetrina:not([data-attiva="1"]):not(:disabled)::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
    animation: lavVetrinaShimmer 3.8s ease-in-out infinite;
    animation-delay: 1.2s;
    pointer-events: none;
    clip-path: inset(0 round 12px);
}
@keyframes lavVetrinaShimmer {
    0%       { left: -60%; opacity: 0; }
    20%      { opacity: 1; }
    60%,100% { left: 120%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lav-promuovi-vetrina::after { animation: none; display: none; }
}

/* Saldo crediti nell'header "Promuovi": da testo grigio a pill dorato — leggibile a colpo d'occhio
   e coerente col crediti-badge-header. */
.lav-promuovi-head .lav-saldo-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    background: linear-gradient(135deg, #fff7e6, #fef3c7);
    color: #b45309; font-weight: 700; font-size: .78rem;
    border: 1px solid #fde68a;
}
.lav-promuovi-head .lav-saldo-pill i { color: #d97706; }

/* Info piano (visibile solo per Pro/Business): "Sei Business — sconto -66% sui prezzi Free". */
.lav-promuovi-piano-info {
    display: flex; align-items: center; gap: 8px;
    font-size: .78rem; color: #b45309; font-weight: 600;
    background: linear-gradient(135deg, rgba(217,119,6,.08), rgba(217,119,6,.02));
    border: 1px solid rgba(217,119,6,.2);
    border-radius: 999px;
    padding: 5px 12px;
    margin: -4px 0 10px;
    width: fit-content;
}
.lav-promuovi-piano-info i { color: #d97706; }

/* Benchmark categoria (Pro/Business): confronto candidature con la media della categoria */
.lav-benchmark {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--surface);
}
.lav-benchmark i { font-size: 1rem; flex-shrink: 0; }
.lav-benchmark-ok  { border-color: rgba(34,197,94,.28); background: linear-gradient(180deg, rgba(34,197,94,.05), transparent); }
.lav-benchmark-ok  i { color: #16a34a; }
.lav-benchmark-giu { border-color: rgba(245,158,11,.32); background: linear-gradient(180deg, rgba(245,158,11,.06), transparent); }
.lav-benchmark-giu i { color: #d97706; }

/* Storico promozioni (Pro/Business): chip line con ultime 4 promozioni */
.promo-history { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.promo-history-header { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.promo-history-header i { color: var(--p1); }
.promo-history-timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 20px; }
.promo-history-timeline::before { content: ''; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: var(--border); border-radius: 2px; }
.promo-history-row { display: flex; align-items: flex-start; gap: 14px; padding: 8px 0; position: relative; }
.promo-history-dot {
    width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .7rem; flex-shrink: 0; position: relative; z-index: 1;
}
.promo-history-bump .promo-history-dot { background: rgba(var(--p1-rgb),.12); color: var(--p1); }
.promo-history-evidenza .promo-history-dot { background: #fef3c7; color: #d97706; }
.promo-history-vetrina .promo-history-dot { background: #fde68a; color: #b45309; }
.promo-history-label { font-size: .84rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.promo-history-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .75rem; color: var(--muted); margin-top: 2px; }
.promo-history-meta i { margin-right: 2px; }

.cand-card {
    display: flex; gap: 16px; align-items: center; padding: 16px 18px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
    margin-bottom: 10px; transition: box-shadow .2s, border-color .2s;
    border-inline-start: 4px solid var(--border);
}
.cand-card:hover { box-shadow: 0 4px 18px rgba(15,23,42,.08); }
.cand-card[data-stato="ricevuta"]    { border-inline-start-color: #3b82f6; background: linear-gradient(to right, #eff6ff 0%, var(--surface) 60%); }
.cand-card[data-stato="in_revisione"]{ border-inline-start-color: #f59e0b; background: linear-gradient(to right, #fffbeb 0%, var(--surface) 60%); }
.cand-card[data-stato="accettata"]   { border-inline-start-color: #22c55e; background: linear-gradient(to right, #f0fdf4 0%, var(--surface) 60%); }
.cand-card[data-stato="rifiutata"]   { border-inline-start-color: #ef4444; background: linear-gradient(to right, #fff1f2 0%, var(--surface) 60%); }
.cand-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.cand-card-stato {
    font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    white-space: nowrap; letter-spacing: .2px; text-transform: uppercase;
}
.cand-card-body { flex: 1; min-width: 0; }
.cand-card-title { font-size: .95rem; font-weight: 700; color: var(--ink); text-decoration: none; display: block; margin-bottom: 5px; transition: color .15s; }
.cand-card-title:hover { color: var(--p1); }
.cand-card-info { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--muted); }
.cand-card-info i { margin-right: 3px; color: var(--muted); }
.cand-card-pay { color: #059669; font-weight: 600; }
.cand-card-date { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.cand-card-date i { margin-right: 3px; }
.cand-card-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-self: center; }
@media (max-width: 640px) {
    .cand-card { flex-wrap: wrap; }
    .cand-card-actions { flex-direction: row; width: 100%; }
}

/* Simulatore ROI Vetrina (Business only): mini card con proiezione onesta */
.lav-roi-sim {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(217,119,6,.06), rgba(217,119,6,.02));
    border: 1px dashed rgba(217,119,6,.35);
}
.lav-roi-sim-ico {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(217,119,6,.3);
}

/* Card annuncio: entra con un leggero fade+slide invece del solo opacity — sensazione più snappy */
.lav-gestione-wrap .lav-gestione-card { animation: lavCardIn .35s ease backwards; }
@keyframes lavCardIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .lav-gestione-wrap .lav-gestione-card { animation: none; } }

/* Badge crediti in header (professionisti). Discreto, non "invadente" — micro-badge oro accanto
   al bell / chat, link diretto a piani.php per acquistare pacchetti extra. */
.crediti-badge-header {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    background: linear-gradient(135deg, #fff7e6 0%, #fef3c7 100%);
    color: #b45309; font-weight: 700; font-size: .82rem; line-height: 1;
    text-decoration: none; border: 1px solid #fde68a;
    transition: transform .12s ease, box-shadow .12s ease;
}
.crediti-badge-header:hover { color: #92400e; box-shadow: 0 2px 6px rgba(180,83,9,.15); }
.crediti-badge-lbl { font-size: .72rem; font-weight: 600; opacity: .85; margin-left: 2px; }
.user-trigger-name { display: none; flex-direction: column; line-height: 1.1; text-align: left; }
@media (min-width: 576px) { .user-trigger-name { display: inline-flex; } }
.user-trigger-nome, .user-trigger-crediti { display: block; }
.user-trigger-nome { font-weight: 600; font-size: .95rem; }
.user-trigger-crediti { font-size: .72rem; font-weight: 700; color: #b45309; margin-top: 2px; }
.user-trigger-crediti i { font-size: .68rem; }
.crediti-badge-header i { font-size: .78rem; }
.crediti-badge-header .crediti-badge-n { min-width: 10px; text-align: center; }

/* Widget "Prossime scadenze sponsor" — lista compatta con badge, giorni residui, link rinnovo. */
.sponsor-scad-list { list-style: none; padding: 0; margin: 0; }
.sponsor-scad-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
}
.sponsor-scad-row:last-child { border-bottom: 0; }
.sponsor-scad-badge {
    font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: .3px; flex-shrink: 0;
}
.sponsor-scad-vetrina { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.sponsor-scad-evidenza { background: #dbeafe; color: #1e40af; }
.sponsor-scad-titolo {
    flex: 1; min-width: 0; color: var(--ink); text-decoration: none; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92rem;
}
.sponsor-scad-titolo:hover { color: var(--p1); }
.sponsor-scad-giorni { font-size: .82rem; color: #64748b; font-weight: 600; flex-shrink: 0; }
.sponsor-scad-giorni.urgente { color: #b91c1c; }
.sponsor-scad-renew {
    font-size: .82rem; color: var(--p1); text-decoration: none; font-weight: 600; flex-shrink: 0;
}
.sponsor-scad-renew:hover { text-decoration: underline; }
@media (max-width: 576px) {
    .sponsor-scad-row { flex-wrap: wrap; }
    .sponsor-scad-titolo { flex-basis: 100%; order: 3; }
}

.piano-scad-row { display: flex; align-items: center; gap: .75rem; padding: .5rem .25rem; border-left: 3px solid transparent; padding-left: .75rem; border-radius: 4px; }
.piano-scad-ok { border-left-color: #16a34a; background: rgba(22,163,74,.05); }
.piano-scad-attenzione { border-left-color: #d97706; background: rgba(217,119,6,.06); }
.piano-scad-urgente { border-left-color: #b91c1c; background: rgba(185,28,28,.07); }
.piano-scad-info { flex-grow: 1; display: flex; flex-direction: column; gap: .1rem; }
.piano-scad-nome { font-weight: 700; color: var(--p1); font-size: .95rem; }
.piano-scad-giorni { font-size: .82rem; color: #475569; }
.piano-scad-urgente .piano-scad-giorni { color: #b91c1c; font-weight: 600; }
.piano-scad-attenzione .piano-scad-giorni { color: #b45309; font-weight: 600; }
@media (max-width: 576px) {
    .piano-scad-row { flex-wrap: wrap; }
    .piano-scad-info { flex-basis: 100%; }
}

/* Benchmark categoria (Business): posizione reale per ogni categoria — barra visiva + rank. */
.benchmark-list { list-style: none; padding: 0; margin: 0; }
.benchmark-row {
    display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid #f1f5f9;
}
.benchmark-row:last-child { border-bottom: 0; }
.benchmark-cat { font-weight: 600; font-size: .92rem; color: var(--ink); }
.benchmark-bar-wrap { height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.benchmark-bar { height: 100%; border-radius: 999px; transition: width .8s ease; }
.benchmark-bar-top { background: linear-gradient(90deg, #22c55e, #16a34a); }
.benchmark-bar-mid { background: linear-gradient(90deg, #f59e0b, #d97706); }
.benchmark-bar-low { background: linear-gradient(90deg, #ef4444, #dc2626); }
.benchmark-pos { font-weight: 700; font-size: .88rem; color: var(--ink); white-space: nowrap; }
@media (max-width: 576px) {
    .benchmark-row { grid-template-columns: 1fr auto; }
    .benchmark-bar-wrap { grid-column: 1 / -1; }
}

/* Widget "Annunci più visti" — top 3 job_offers per views con barra proporzionale. */
.top-annunci-list { list-style: none; padding: 0; margin: 0; }
.top-annunci-row {
    display: grid; grid-template-columns: 2fr 3fr auto; align-items: center; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid #f1f5f9;
}
.top-annunci-row:last-child { border-bottom: 0; }
.top-annunci-titolo {
    color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-annunci-titolo:hover { color: var(--p1); }
.top-annunci-bar-wrap { height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.top-annunci-bar { height: 100%; background: linear-gradient(90deg, var(--p1), var(--p2, var(--p1))); border-radius: 999px; transition: width .8s ease; }
.top-annunci-n { font-size: .82rem; color: #64748b; white-space: nowrap; }
.top-annunci-n strong { color: var(--ink); font-weight: 700; }
@media (max-width: 576px) {
    .top-annunci-row { grid-template-columns: 1fr auto; }
    .top-annunci-bar-wrap { grid-column: 1 / -1; }
}

/* Chips filtro notifiche in /notifiche.php: tab-like, no reload. */
.notif-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.notif-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: #f1f5f9; color: #475569; border: 1px solid transparent;
    font-size: .85rem; font-weight: 600; cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.notif-filter-chip:hover { background: #e2e8f0; color: var(--ink); }
.notif-filter-chip.active {
    background: var(--p1); color: #fff; border-color: var(--p1);
}
.notif-filter-count {
    display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px;
    background: rgba(0,0,0,.08); font-size: .72rem; font-weight: 700; text-align: center;
}
.notif-filter-chip.active .notif-filter-count { background: rgba(255,255,255,.25); }

/* Micro-onboarding 3 tip in dashboard pro (prima visita, dismissible via localStorage). */
.dash-onboard {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 20px 22px;
    box-shadow: 0 2px 12px rgba(0,138,247,.06);
}
.dash-onboard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dash-onboard-head strong { color: var(--ink); font-size: 1rem; }
.dash-onboard-head strong i { color: var(--p1); margin-right: 6px; }
.dash-onboard-close {
    background: transparent; border: 0; font-size: 1.4rem; line-height: 1;
    color: #94a3b8; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.dash-onboard-close:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.dash-onboard-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dash-onboard-tip {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px; background: var(--soft); border-radius: 12px; border: 1px solid var(--border);
    text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s, box-shadow .2s;
}
.dash-onboard-tip:hover { border-color: var(--p1); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,138,247,.10); }
.dash-onboard-ico {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
    background: var(--grad); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    box-shadow: 0 3px 10px rgba(0,138,247,.20);
}
.dash-onboard-ico i { color: #fff !important;
}
.dash-onboard-tip strong { display: block; font-size: .92rem; line-height: 1.3; margin-bottom: 3px; }
.dash-onboard-tip small { display: block; font-size: .8rem; color: var(--muted); line-height: 1.35; }
@media (max-width: 768px) { .dash-onboard-tips { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   BATCH MIGLIORIE UI — RAL verde, altre offerte simili, filtri, notifiche popup
   ═══════════════════════════════════════════════════════════════════════════ */

/* RAL/soldi con sfondo verdino — netto/lordo/compenso lavoro. Verde di successo
   (associazione psicologica: soldi = verde = positivo), più marcato del vecchio ambra. */
.req-detail-stat.lav-stat-money {
    background: linear-gradient(135deg, rgba(22,163,74,.10), rgba(16,185,129,.04));
    border-color: rgba(22,163,74,.28);
    position: relative;
    transition: transform .2s, box-shadow .2s;
}
.req-detail-stat.lav-stat-money:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(22,163,74,.28); }
.req-detail-stat.lav-stat-money i { color: #16a34a; background: rgba(22,163,74,.15); }
.req-detail-stat.lav-stat-money strong { color: #15803d; font-weight: 800; }
.req-detail-stat.lav-stat-money::after {
    content: ''; position: absolute; top: 6px; right: 8px; width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2);
}

/* Info strip compatta (retribuzione, esperienza, posizioni) */
.lav-info-strip {
    display: flex; flex-wrap: wrap; gap: 0;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface); overflow: hidden;
}
.lav-info-strip-item {
    flex: 1 1 0; min-width: 140px; display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-right: 1px solid var(--border);
}
.lav-info-strip-item:last-child { border-right: none; }
.lav-info-strip-item strong { display: block; font-size: .9rem; line-height: 1.2; }
.lav-info-strip-item span { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.lav-strip-ico { font-size: 1.2rem; flex-shrink: 0; }
.lav-strip-ico-money { color: #16a34a; }
.lav-strip-ico-blue { color: var(--p1); }
.lav-strip-ico-green { color: #059669; }
@media (max-width: 575.98px) {
    .lav-info-strip-item { min-width: 50%; border-right: none; border-bottom: 1px solid var(--border); }
    .lav-info-strip-item:last-child { border-bottom: none; }
}

/* Descrizione lavoro: più leggibilità */
.lav-desc-body {
    white-space: pre-line; line-height: 1.7; font-size: .92rem;
    padding: 4px 0;
}

/* Banner rifiutata */
.usp-banner-rejected {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 50%, #f9a8d4 100%);
    color: #7f1d1d;
}

/* Altre offerte simili: card più eleganti con hover premium, arrow che scivola a destra. */
.lav-simili-wrap .badge-count-mini {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px;
    background: var(--grad-soft); color: var(--p1); font-weight: 800; font-size: .75rem;
}
.lav-simili-card {
    display: block; padding: 14px 16px; border-radius: 14px;
    border: 1px solid var(--border); background: var(--surface);
    transition: all .2s cubic-bezier(.34,1.56,.64,1);
    position: relative; overflow: hidden;
}
.lav-simili-card::before {
    content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%;
    background: var(--grad); transform: scaleY(0); transform-origin: top;
    transition: transform .25s ease;
}
.lav-simili-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--p1-rgb),.4);
    box-shadow: 0 14px 28px -12px rgba(var(--p1-rgb),.25);
}
.lav-simili-card:hover::before { transform: scaleY(1); }
.lav-simili-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.lav-simili-title { font-weight: 700; font-size: .95rem; color: var(--ink); line-height: 1.3; }
.lav-simili-arrow { color: var(--p1); opacity: 0; transform: translateX(-6px); transition: all .25s ease; }
.lav-simili-card:hover .lav-simili-arrow { opacity: 1; transform: translateX(0); }
.lav-simili-meta {
    display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .78rem; color: var(--muted); margin-bottom: 10px;
}
.lav-simili-meta i { margin-right: 3px; color: var(--muted); }
.lav-simili-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lav-simili-money {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(16,185,129,.06));
    color: #15803d; font-weight: 700; font-size: .78rem;
    border: 1px solid rgba(22,163,74,.24);
}
.lav-simili-time { font-size: .75rem; }

/* Notifiche popup: header con gradient di sfondo, tabs più professionali, transizioni migliori. */
.notif-menu {
    box-shadow: 0 24px 48px -12px rgba(15,23,42,.18), 0 8px 16px -8px rgba(15,23,42,.10);
    border-radius: 16px !important;
}
.notif-menu-head {
    background: linear-gradient(180deg, rgba(var(--p1-rgb),.04), transparent);
    padding-bottom: 10px !important;
}
.notif-menu-title {
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: -.02em;
}
.notif-tabs {
    background: var(--soft); border-radius: 12px; margin: 0 16px 10px; padding: 4px !important;
    gap: 2px !important;
}
.notif-tab {
    flex: 1; padding: 6px 10px !important; font-size: .84rem !important; border-radius: 8px !important;
    background: transparent !important; text-align: center;
}
.notif-tab.active {
    background: var(--surface) !important; color: var(--p1) !important;
    box-shadow: 0 2px 6px rgba(15,23,42,.06);
}
.notif-item {
    padding: 12px 12px !important; margin: 2px 6px; border-radius: 12px;
    transition: all .18s ease;
}
.notif-item:hover { transform: translateX(2px); background: var(--soft); }
.notif-item.unread {
    background: linear-gradient(90deg, rgba(var(--p1-rgb),.08), rgba(var(--p1-rgb),.02));
}
.notif-ico { transition: transform .2s ease; }
.notif-item:hover .notif-ico { transform: scale(1.08) rotate(-4deg); }
.notif-unread-dot { animation: notifDotPulse 2.5s ease-in-out infinite; }
@keyframes notifDotPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(var(--p1-rgb),.4); }
    50%     { box-shadow: 0 0 0 4px rgba(var(--p1-rgb),0); }
}
@media (prefers-reduced-motion: reduce) {
    .notif-unread-dot, .notif-ico, .notif-item { animation: none; transition: none; }
}

/* Filtri form: input/select con look più moderno, focus glow, hover subtile */
.req-filter-bar { gap: 8px !important; }
.req-filter-field {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    transition: all .2s ease; box-shadow: 0 1px 2px rgba(15,23,42,.02);
    padding: 4px 12px !important;
}
.req-filter-field:hover { border-color: rgba(var(--p1-rgb),.35); box-shadow: 0 2px 8px rgba(var(--p1-rgb),.08); }
.req-filter-field:focus-within {
    border-color: var(--p1) !important;
    box-shadow: 0 0 0 4px rgba(var(--p1-rgb),.14), 0 4px 12px rgba(var(--p1-rgb),.08) !important;
    background: var(--surface);
}
.req-filter-field i { color: var(--muted); transition: color .2s; }
.req-filter-field:focus-within i { color: var(--p1); }
.req-filter-field .form-control,
.req-filter-field .form-select {
    background: transparent; padding-inline-start: 6px !important;
}

/* Autoload spinner sotto la lista annunci: badge "caricamento" più visibile del semplice bottone */
#reqLoadMoreBtn { transition: all .2s ease; }
#reqLoadMoreBtn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 16px -6px rgba(var(--p1-rgb),.28); }

/* ── OVERLAY SUCCESS CANDIDATURA: post-invio, prima del reload ─── */
.cand-success-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,.7); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center; z-index: 9999;
    animation: candOverlayIn .28s ease;
    padding: 20px;
}
@keyframes candOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.cand-success-card {
    background: var(--surface); border-radius: 24px; padding: 36px 32px;
    max-width: 440px; width: 100%; text-align: center;
    box-shadow: 0 40px 80px -20px rgba(15,23,42,.4);
    animation: candCardIn .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes candCardIn {
    from { opacity: 0; transform: translateY(20px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cand-success-check {
    width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 20px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem; color: #fff;
    box-shadow: 0 12px 32px rgba(34,197,94,.4);
    animation: candCheckPop .6s cubic-bezier(.34,1.56,.64,1) .1s backwards;
    position: relative;
}
.cand-success-check::after {
    content: ''; position: absolute; inset: -8px;
    border: 3px solid #22c55e; border-radius: 50%; opacity: 0;
    animation: candCheckRing 1.2s ease-out .3s;
}
@keyframes candCheckPop {
    from { transform: scale(0) rotate(-180deg); }
    to   { transform: scale(1) rotate(0); }
}
@keyframes candCheckRing {
    from { transform: scale(1); opacity: 1; }
    to   { transform: scale(1.5); opacity: 0; }
}
.cand-success-title {
    font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em;
    margin: 0 0 8px; color: var(--ink);
}
.cand-success-body { color: var(--muted); font-size: .92rem; margin: 0 0 22px; line-height: 1.5; }
.cand-success-next {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px; background: var(--soft); border-radius: 14px; margin-bottom: 22px;
    text-align: start;
}
.cand-success-step {
    display: flex; align-items: center; gap: 12px;
    font-size: .88rem; color: var(--ink); font-weight: 600;
}
.cand-success-step i {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: var(--grad-soft); color: var(--p1);
    display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
@media (prefers-reduced-motion: reduce) {
    .cand-success-overlay, .cand-success-card, .cand-success-check, .cand-success-check::after { animation: none; }
}

/* Professionista pubblico: hero più elegante, KPI cards con hover, badges premium più visibili */
.req-detail.pro-detail-wrap .req-detail-hero,
.pro-public-hero {
    background: linear-gradient(135deg, var(--surface) 0%, var(--grad-soft) 100%);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px 24px;
    position: relative; overflow: hidden;
}
.req-detail.pro-detail-wrap .req-detail-hero::before {
    content: ''; position: absolute; top: 0; right: -40%; width: 60%; height: 200%;
    background: radial-gradient(circle, rgba(var(--p1-rgb),.06) 0%, transparent 60%);
    pointer-events: none; z-index: 0;
}
.req-detail.pro-detail-wrap .req-detail-hero > * { position: relative; z-index: 1; }
.req-detail.pro-detail-wrap .req-detail-icon { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.req-detail.pro-detail-wrap .req-detail-hero:hover .req-detail-icon { transform: rotate(-4deg) scale(1.05); }

/* Badge "Risposta veloce": pill dorata con lampo, segnale di affidabilità per il cliente */
.tag-pill.tag-fast-reply {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f; font-weight: 700; border: none;
    box-shadow: 0 2px 6px rgba(245,158,11,.3);
    animation: fastReplyPulse 3s ease-in-out infinite;
}
.tag-pill.tag-fast-reply i { color: #78350f; }
@keyframes fastReplyPulse {
    0%,100% { box-shadow: 0 2px 6px rgba(245,158,11,.3); }
    50%     { box-shadow: 0 2px 10px rgba(245,158,11,.55); }
}
@media (prefers-reduced-motion: reduce) { .tag-pill.tag-fast-reply { animation: none; } }

/* ─── Ricerche salvate su /lavoro (feature Pro/Business) ───
   Strip di chip cliccabili sopra la lista annunci: link per riaprire la ricerca +
   bottone x per eliminarla. Stile allineato ai tag-pill esistenti ma con accento viola. */
.lav-saved-searches { display: block; }
.lav-saved-chip {
    display: inline-flex; align-items: center; gap: 0;
    background: rgba(124, 58, 237, .08);
    border: 1px solid rgba(124, 58, 237, .18);
    border-radius: 999px;
    padding: 0 .25rem 0 .75rem;
    font-size: .82rem; font-weight: 600;
    transition: background .15s ease, border-color .15s ease;
}
.lav-saved-chip:hover { background: rgba(124, 58, 237, .14); border-color: rgba(124, 58, 237, .28); }
.lav-saved-chip-link { color: var(--p1); text-decoration: none; padding: .3rem 0; }
.lav-saved-chip-link:hover { color: var(--p1); text-decoration: none; }
.lav-saved-chip-del {
    background: transparent; border: 0; padding: 0 .35rem;
    color: rgba(0,0,0,.4); font-size: .8rem; line-height: 1;
    cursor: pointer; margin-left: .15rem;
    transition: color .15s ease;
}
.lav-saved-chip-del:hover { color: #dc2626; }

/* ─── Pannello filtri "flat + grouped" (.flt-*) ───────────────
   Rimpiazza il vecchio pattern .req-filter-bar/.req-filter-field (card grigie separate
   con ombra propria per ogni campo) con un unico pannello bianco che raggruppa i filtri
   per contesto (Cosa cerchi / Dove / Condizioni / Ordina), input flat con solo
   border-bottom, label sopra ogni campo (niente più placeholder truncati).
   Le vecchie classi restano definite più in alto per pagine che non sono ancora
   migrate; le nuove convivono senza collisioni. */
.flt-panel {
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03); padding: 0; overflow: visible;
    display: flex; flex-direction: column;
}
.flt-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px; border-bottom: 1px solid var(--border);
}
.flt-panel-title {
    font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: #1a1a1a; margin: 0; display: inline-flex; align-items: center; gap: 6px;
}
.flt-panel-title i { color: var(--p1); font-size: .9rem; }
.flt-panel-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    padding: 0 6px; border-radius: 999px; background: var(--grad); color: #fff;
    font-size: .7rem; font-weight: 700;
}
.flt-panel-reset {
    font-size: .78rem; font-weight: 600; color: var(--muted); text-decoration: none;
    border: 0; background: transparent; cursor: pointer; padding: 4px 8px; border-radius: 6px;
    transition: color .15s ease, background .15s ease;
}
.flt-panel-reset:hover { color: var(--p1); background: var(--grad-soft); text-decoration: none; }
.flt-panel-reset.d-none { display: none; }

.flt-group { padding: 12px 16px; }
.flt-group + .flt-group { border-top: 1px solid var(--border); }
.flt-group-title {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
    color: var(--muted); margin: 0 0 10px; display: flex; align-items: center; gap: 6px;
}
.flt-group-title i { color: var(--p1); font-size: .78rem; width: 14px; text-align: center; }

.flt-field { position: relative; margin-bottom: 10px; }
.flt-field:last-child { margin-bottom: 0; }
.flt-field > label {
    display: block; font-size: .72rem; font-weight: 600; color: var(--muted);
    margin: 0 0 3px; letter-spacing: .2px;
}
.flt-input {
    width: 100%; border: 0; border-bottom: 1.5px solid var(--border);
    background: transparent; padding: 6px 0 8px; font-size: .92rem; font-weight: 600;
    color: #1a1a1a; outline: none; border-radius: 0; box-shadow: none !important;
    transition: border-color .18s ease;
    -webkit-appearance: none; appearance: none;
}
.flt-input:focus { border-bottom-color: var(--p1); background: transparent; }
.flt-input::placeholder { color: var(--muted); font-weight: 500; }
select.flt-input {
    /* Freccia SVG inline così non dipende da FontAwesome/immagini esterne */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%236b5b95' d='M2 4l4 4 4-4z'/></svg>");
    background-position: right 2px center; background-repeat: no-repeat; background-size: 12px;
    padding-right: 20px; cursor: pointer;
}
select.flt-input option { color: #1a1a1a; }

/* Campo "città" con bottone geolocalizzazione integrato + suggerimenti */
.flt-field-geo { position: relative; }
.flt-field-geo .flt-input { padding-right: 30px; }
.flt-geo-btn {
    position: absolute; right: 0; bottom: 4px;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--muted); border-radius: 6px; cursor: pointer;
    transition: color .18s ease, background .18s ease;
}
.flt-geo-btn:hover { color: var(--p1); background: var(--grad-soft); }
.flt-geo-btn.active { color: #fff; background: var(--grad); }
.flt-geo-btn:disabled { cursor: wait; opacity: .7; }

/* Checkbox in linea, non finto-card come i vecchi req-filter-check */
.flt-check {
    display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer;
    font-size: .88rem; font-weight: 600; color: #1a1a1a;
    border-bottom: 1px solid transparent; transition: border-color .15s ease;
}
.flt-check input[type="checkbox"] {
    width: 1.05em; height: 1.05em; margin: 0; accent-color: var(--p1); cursor: pointer;
}
.flt-check:hover { border-bottom-color: var(--border); }
.flt-check i { color: var(--p1); font-size: .95em; margin-right: 4px; }

/* Bottoni azione in fondo al pannello (Salva ricerca, Applica su mobile) */
.flt-panel-actions {
    padding: 12px 16px 14px; border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 8px;
}
.flt-panel-actions:empty { display: none; padding: 0; border: 0; }

/* Suggerimenti città posizionati sotto il campo Città */
.flt-field-geo .hero-search-suggest {
    left: 0; right: 0; top: calc(100% + 4px);
}

/* Menu custom-select aperto: alza z-index del gruppo così non finisce coperto dai successivi */
.flt-field:has(.cs-wrap.open) { position: relative; z-index: 50; }
.flt-field:has(.hero-search-suggest.open) { position: relative; z-index: 50; }

/* ─── Chip filtri attivi sopra i risultati ───
   Feedback immediato di cosa filtri sono applicati; un click rimuove il singolo filtro.
   Complementare al Reset del pannello (che li toglie tutti). */
.flt-active-chips {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.flt-active-chips-label {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--muted); margin-right: 4px;
}
.flt-active-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(var(--p1-rgb),.08); color: var(--p1);
    border: 1px solid rgba(var(--p1-rgb),.18);
    border-radius: 999px; padding: 4px 6px 4px 12px;
    font-size: .82rem; font-weight: 600; text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
    line-height: 1.2;
}
.flt-active-chip:hover { background: rgba(var(--p1-rgb),.15); color: var(--p1); text-decoration: none; border-color: rgba(var(--p1-rgb),.3); }
.flt-active-chip-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; background: rgba(var(--p1-rgb),.12);
    font-size: .65rem;
}
.flt-active-chip:hover .flt-active-chip-x { background: rgba(var(--p1-rgb),.25); }
.flt-active-chip-reset {
    color: var(--muted); text-decoration: underline; font-size: .78rem; font-weight: 600;
    margin-left: 4px;
}
.flt-active-chip-reset:hover { color: var(--p1); }

/* Il vecchio bottone di filtro "Filtra" ora è nascosto su desktop (l'AJAX riparte onchange);
   resta visibile solo dentro il drawer offcanvas su mobile come CTA di conferma. */
@media (min-width: 992px) {
    .flt-panel-actions .flt-mobile-only { display: none; }
}

/* ─── Range slider per filtri numerici (stipendio/budget) ───
   Sostituisce input[type=number] con un cursore visivo: track viola nella parte
   selezionata, thumb tonda accento, label live "≥ €N" sopra al cursore.
   Progress dinamico via var CSS --pct impostata da JS al drag. */
.flt-range-wrap { padding-top: 4px; }
.flt-range-head {
    display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px;
}
.flt-range-val {
    font-size: .95rem; font-weight: 700; color: var(--p1);
}
.flt-range-val.is-zero { color: var(--muted); font-weight: 600; }
.flt-range-max {
    font-size: .7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px;
}
.flt-range {
    width: 100%; -webkit-appearance: none; appearance: none; background: transparent;
    height: 28px; padding: 0; margin: 0; cursor: pointer;
}
.flt-range:focus { outline: none; }
/* Track: gradiente viola fino alla posizione corrente, poi grigio chiaro — controllato
   dalla custom property --pct impostata da JS (0..100). */
.flt-range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 999px;
    background: linear-gradient(to right, var(--p1) 0%, var(--p1) var(--pct, 0%), rgba(0,0,0,.08) var(--pct, 0%), rgba(0,0,0,.08) 100%);
}
.flt-range::-moz-range-track {
    height: 6px; border-radius: 999px; background: rgba(0,0,0,.08);
}
.flt-range::-moz-range-progress {
    height: 6px; border-radius: 999px; background: var(--p1);
}
.flt-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 2px solid var(--p1);
    box-shadow: 0 2px 6px rgba(var(--p1-rgb),.35);
    margin-top: -7px; cursor: grab;
    transition: transform .12s ease, box-shadow .12s ease;
}
.flt-range::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--p1);
    background: #fff; box-shadow: 0 2px 6px rgba(var(--p1-rgb),.35); cursor: grab;
}
.flt-range:hover::-webkit-slider-thumb { transform: scale(1.08); box-shadow: 0 3px 10px rgba(var(--p1-rgb),.45); }
.flt-range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.12); }
.flt-range:hover::-moz-range-thumb { transform: scale(1.08); box-shadow: 0 3px 10px rgba(var(--p1-rgb),.45); }
.flt-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--p1-rgb),.2), 0 2px 6px rgba(var(--p1-rgb),.35); }

/* ══════════════════════════════════════════════════════════════
   CV Panel – Professional Redesign (cvp-* classes)
   ══════════════════════════════════════════════════════════════ */
@keyframes cvpSlideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cvpPulse   { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--p1-rgb),.25); } 50% { box-shadow: 0 0 0 8px rgba(var(--p1-rgb),0); } }
@keyframes cvpShine   { to { background-position: 200% center; } }

.cvp.active { display: flex; flex-direction: column; gap: 24px; }
.cvp > * { animation: cvpSlideUp .45s ease both; }
.cvp > *:nth-child(2) { animation-delay: .06s; }
.cvp > *:nth-child(3) { animation-delay: .12s; }
.cvp > *:nth-child(4) { animation-delay: .18s; }
.cvp > *:nth-child(5) { animation-delay: .24s; }
.cvp > *:nth-child(6) { animation-delay: .30s; }
.cvp > *:nth-child(7) { animation-delay: .36s; }
.cvp > *:nth-child(8) { animation-delay: .42s; }
.cvp > *:nth-child(9) { animation-delay: .48s; }
.cvp > *:nth-child(10) { animation-delay: .54s; }

/* Hero */
.cvp-hero {
    display: flex; align-items: center; gap: 18px; padding: 26px 28px;
    background: linear-gradient(135deg, var(--p1) 0%, #6366f1 100%);
    border-radius: 20px; color: #fff; position: relative; overflow: hidden;
    margin-bottom: 16px;
}
.cvp-hero::before {
    content: ''; position: absolute; inset: 0; opacity: .08;
    background: radial-gradient(circle at 85% 20%, #fff 0%, transparent 50%),
                radial-gradient(circle at 15% 80%, #fff 0%, transparent 40%);
}
.cvp-hero-icon {
    width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.2); backdrop-filter: blur(8px); color: #fff; font-size: 1.35rem; flex-shrink: 0;
    position: relative;
}
.cvp-hero-text { flex: 1; min-width: 0; position: relative; }
.cvp-hero-title { font-size: 1.25rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.cvp-hero-sub { font-size: .82rem; opacity: .85; margin: 5px 0 0; }
.cvp-hero-action {
    flex-shrink: 0; position: relative; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
    color: #fff; backdrop-filter: blur(6px); border-radius: 12px; padding: 8px 18px; font-weight: 600;
    font-size: .82rem; transition: all .2s ease;
}
.cvp-hero-action:hover { background: rgba(255,255,255,.32); color: #fff; transform: translateY(-1px); }

/* Cards */
.cvp-card {
    background: var(--card-bg, #fff); border-radius: 14px; padding: 16px 20px;
    border: 1px solid var(--border, #e5e7eb); position: relative;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
    overflow: hidden; margin-bottom: 6px;
}
.cvp-card:last-of-type { margin-bottom: 0; }
.cvp-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
    border-radius: 18px 0 0 18px; opacity: 0; transition: opacity .25s ease;
}
.cvp-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.06); transform: translateY(-2px); border-color: rgba(var(--p1-rgb),.2); }
.cvp-card:hover::before { opacity: 1; }

.cvp-card:nth-child(odd)::before  { background: linear-gradient(180deg, var(--p1), #6366f1); }
.cvp-card:nth-child(even)::before { background: linear-gradient(180deg, #8b5cf6, #ec4899); }

.cvp-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 0; cursor: pointer; user-select: none; }
.cvp-card:not(.cvp-collapsed) .cvp-card-head { margin-bottom: 16px; }
.cvp-card-head::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .7rem;
    margin-inline-start: auto; color: var(--muted); transition: transform .25s ease;
}
.cvp-card.cvp-collapsed .cvp-card-head::after { transform: rotate(-90deg); }
.cvp-card.cvp-collapsed .cvp-card-body { display: none; }
.cvp-card.cvp-collapsed .cvp-card-hint { display: none; }
.cvp-card-ico {
    width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0; transition: transform .2s ease;
}
.cvp-card:hover .cvp-card-ico { transform: scale(1.08) rotate(-3deg); }
.cvp-card-ico--blue   { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #2563eb; }
.cvp-card-ico--purple { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #7c3aed; }
.cvp-card-ico--rose   { background: linear-gradient(135deg, #fce7f3, #fbcfe8); color: #db2777; }
.cvp-card-ico--teal   { background: linear-gradient(135deg, #ccfbf1, #99f6e4); color: #0d9488; }
.cvp-card-ico--amber  { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706; }
.cvp-card-ico--green  { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #16a34a; }
.cvp-card-ico--indigo { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #4f46e5; }
.cvp-card-title { font-size: .95rem; font-weight: 700; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvp-card-badge { font-size: .7rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; }
.cvp-card-badge--ok { background: #dcfce7; color: #16a34a; }
.cvp-card-badge--warn { background: #fff7ed; color: #ea580c; }
.cvp-card-hint {
    font-size: .72rem; color: var(--text-secondary, #888); margin-left: auto;
    background: var(--bg-subtle, #f1f5f9); padding: 4px 10px; border-radius: 20px;
}

/* File rows */
.cvp-file-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; border-radius: 12px; background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border, #e5e7eb); transition: all .2s ease;
}
.cvp-file-row:hover { background: rgba(var(--p1-rgb),.05); border-color: rgba(var(--p1-rgb),.15); transform: translateX(4px); }
.cvp-file-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .88rem; font-weight: 500; }
.cvp-file-name i { color: #dc2626; font-size: 1.1rem; }

/* Upload area */
.cvp-upload-area { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }

/* Field groups & subsections */
.cvp-field-group { margin-bottom: 18px; }
.cvp-subsection-title {
    font-size: .78rem; font-weight: 700; color: var(--text-secondary, #64748b);
    text-transform: uppercase; letter-spacing: .06em; margin: 24px 0 14px;
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 8px; border-bottom: 2px solid var(--border, #e5e7eb);
}

/* Timeline items (esperienze, istruzione) */
.cvp-timeline-item {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-radius: 14px; background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border, #e5e7eb); transition: all .2s ease;
    border-left: 3px solid transparent;
}
.cvp-timeline-item:hover { background: rgba(var(--p1-rgb),.04); border-left-color: var(--p1); transform: translateX(4px); }

/* Inline forms */
.cvp-inline-form {
    margin-top: 14px; padding: 20px; border-radius: 16px;
    background: var(--bg-subtle, #f8fafc); border: 1px solid var(--border, #e5e7eb);
    border-left: 3px solid var(--p1);
}

/* Raccomandazioni cards */
.cvp-racc-card {
    display: flex; gap: 14px; padding: 16px 20px; border-radius: 14px;
    background: var(--bg-subtle, #f8fafc); border: 1px solid var(--border, #e5e7eb);
    transition: all .2s ease; border-left: 3px solid #4f46e5;
}
.cvp-racc-card:hover { background: rgba(var(--p1-rgb),.04); transform: translateX(4px); }
.cvp-racc-pending {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; border-radius: 12px; background: var(--bg-subtle, #f8fafc);
    border: 1px dashed rgba(var(--p1-rgb),.3);
}

/* Save bar */
.cvp-checkbox-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cvp-checkbox-card { cursor: pointer; }
.cvp-checkbox-card input { display: none; }
.cvp-checkbox-card-inner {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    border-radius: 10px; border: 2px solid var(--border, #e2e8f0);
    background: var(--bg-subtle, #f8fafc); font-size: .85rem; font-weight: 600;
    color: var(--text-secondary, #64748b); transition: all .2s;
}
.cvp-checkbox-card-inner i { font-size: 1rem; }
.cvp-checkbox-card input:checked + .cvp-checkbox-card-inner {
    border-color: var(--p1, #4f46e5); background: rgba(var(--p1-rgb, 79,70,229),.08);
    color: var(--p1, #4f46e5);
}

.cvp-save-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px; position: sticky; bottom: 0; z-index: 5;
    background: var(--bg, #fff); border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.06); border-top: 1px solid var(--border, #e5e7eb);
}
.cvp-save-bar .btn-accent { animation: cvpPulse 2.5s ease infinite; border-radius: 14px; font-weight: 700; }

/* Completion bar animation */
.cvp .cv-completion-bar span {
    background: linear-gradient(90deg, var(--p1), #6366f1, var(--p1));
    background-size: 200% 100%;
    animation: cvpShine 3s linear infinite;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .cvp-hero { background: linear-gradient(135deg, var(--p1) 0%, #4338ca 100%); }
    .cvp-card { background: var(--card-bg, #1e1e2e); border-color: var(--border, #2d2d44); }
    .cvp-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.3); border-color: rgba(var(--p1-rgb),.3); }
    .cvp-file-row, .cvp-timeline-item, .cvp-inline-form, .cvp-racc-card { background: var(--bg-subtle, #252538); border-color: var(--border, #2d2d44); }
    .cvp-racc-pending { background: var(--bg-subtle, #252538); border-color: rgba(var(--p1-rgb),.25); }
    .cvp-save-bar { background: var(--bg, #12121a); box-shadow: 0 -4px 20px rgba(0,0,0,.3); border-top-color: var(--border, #2d2d44); }
    .cvp-card-hint { background: var(--bg-subtle, #252538); }
    .cvp-card-ico--blue   { background: linear-gradient(135deg, #1e3a5f, #1e40af30); color: #60a5fa; }
    .cvp-card-ico--purple { background: linear-gradient(135deg, #2e1065, #5b21b630); color: #a78bfa; }
    .cvp-card-ico--rose   { background: linear-gradient(135deg, #4a1942, #9d174d30); color: #f472b6; }
    .cvp-card-ico--teal   { background: linear-gradient(135deg, #134e4a, #0f766e30); color: #5eead4; }
    .cvp-card-ico--amber  { background: linear-gradient(135deg, #451a03, #92400e30); color: #fbbf24; }
    .cvp-card-ico--green  { background: linear-gradient(135deg, #14532d, #15803d30); color: #4ade80; }
    .cvp-card-ico--indigo { background: linear-gradient(135deg, #1e1b4b, #3730a330); color: #818cf8; }
    .cvp-subsection-title { border-bottom-color: var(--border, #2d2d44); }
}

@media (max-width: 576px) {
    .cvp-hero { flex-wrap: wrap; padding: 20px 18px; gap: 14px; border-radius: 16px; }
    .cvp-hero-action { width: 100%; text-align: center; }
    .cvp-card { padding: 14px 14px; border-radius: 12px; }
    .cvp-card-head { gap: 8px; }
    .cvp-card-ico { width: 34px; height: 34px; font-size: .85rem; border-radius: 9px; }
    .cvp-card-badge { font-size: .65rem; padding: 2px 7px; }
    .cvp-upload-area { flex-direction: column; }
    .cvp-save-bar { padding: 14px 16px; border-radius: 14px 14px 0 0; }
    .cvp-timeline-item:hover, .cvp-file-row:hover, .cvp-racc-card:hover { transform: none; }
}

/* ─── Admin list (richieste + lavoro) ──────────────────────── */
.adm-stato-tabs{display:flex;gap:4px;flex-wrap:wrap;padding:5px;background:var(--bg2,#f1f5f9);border-radius:12px;}
.adm-stato-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:.82rem;font-weight:600;color:var(--tx2,#64748b);text-decoration:none;transition:all .15s;}
.adm-stato-tab:hover{background:var(--surface,#fff);color:var(--ink);}
.adm-stato-tab.active{background:var(--surface,#fff);color:var(--p1);box-shadow:0 1px 4px rgba(0,0,0,.08);}
.adm-stato-count{font-size:.7rem;background:var(--bg2,#e2e8f0);padding:2px 7px;border-radius:99px;font-weight:700;min-width:18px;text-align:center;}
.adm-stato-tab.active .adm-stato-count{background:rgba(var(--p1-rgb),.12);color:var(--p1);}

.adm-search-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.adm-search-input{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 14px;flex:1;min-width:200px;}
.adm-search-input i{color:var(--tx2);font-size:.85rem;flex-shrink:0;}
.adm-search-input input{border:none;background:transparent;outline:none;font-size:.85rem;width:100%;color:var(--ink);}
.adm-search-select{border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:.82rem;background:var(--surface);color:var(--ink);outline:none;}

.adm-list{display:flex;flex-direction:column;gap:6px;}
.adm-row{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:visible;transition:all .15s;}
.adm-row:hover{box-shadow:0 2px 10px rgba(0,0,0,.05);}
.adm-row.expanded{box-shadow:0 4px 20px rgba(0,0,0,.08);border-color:rgba(var(--p1-rgb),.3);}
.adm-row-check{display:flex;align-items:center;padding:0 6px 0 14px;}
.adm-row-main{flex:1;min-width:0;}
.adm-row-head{display:flex;align-items:center;gap:14px;padding:14px 16px 14px 0;cursor:pointer;}
.adm-row-ico{width:40px;height:40px;border-radius:10px;background:var(--bg2,#f1f5f9);display:flex;align-items:center;justify-content:center;color:var(--p1);font-size:1rem;flex-shrink:0;}
.adm-row-info{flex:1;min-width:0;}
.adm-row-title{font-weight:700;font-size:.9rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.adm-row-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.76rem;color:var(--tx2);margin-top:3px;}
.adm-row-meta i{margin-right:2px;}
.adm-row-badges{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap;}
.adm-count-pill{font-size:.72rem;font-weight:700;color:var(--p1);background:rgba(var(--p1-rgb),.08);padding:3px 9px;border-radius:99px;display:inline-flex;align-items:center;gap:4px;}
.tag-sm{font-size:.7rem!important;padding:2px 8px!important;}
.adm-row-actions{flex-shrink:0;}
.adm-btn-expand{background:none;border:none;color:var(--tx2);padding:8px;border-radius:8px;cursor:pointer;transition:all .2s;font-size:.85rem;}
.adm-btn-expand:hover{background:var(--bg2);color:var(--p1);}
.adm-row.expanded .adm-btn-expand i{transform:rotate(180deg);}
.adm-row-expand{display:none;padding:0 16px 16px 68px;animation:admSlide .2s ease;}
.adm-row.expanded .adm-row-expand{display:block;}
@keyframes admSlide{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.adm-row-desc{font-size:.84rem;color:var(--tx2);margin-bottom:10px;line-height:1.6;}
.adm-row-detail{font-size:.82rem;color:var(--tx2);margin-bottom:4px;}
.adm-row-quick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.adm-quick-stato,.adm-quick-stato-job{border:2px solid var(--p1)!important;border-radius:10px!important;font-weight:600;font-size:.82rem!important;padding:5px 28px 5px 10px!important;background:var(--surface)!important;color:var(--p1)!important;cursor:pointer;min-width:110px;}
.adm-quick-stato:focus,.adm-quick-stato-job:focus{box-shadow:0 0 0 3px rgba(var(--p1-rgb),.2)!important;}
.adm-cat-drag{cursor:grab;color:var(--tx2);padding:0 4px;opacity:.5;transition:opacity .15s;}
.adm-row:hover .adm-cat-drag{opacity:1;}
.adm-cat-drag:active{cursor:grabbing;}
.adm-cat-stats{display:flex;gap:14px;font-size:.78rem;color:var(--tx2);}
.adm-cat-stats span{display:inline-flex;align-items:center;gap:4px;}
.adm-cat-slug{font-size:.75rem;color:var(--tx2);font-family:monospace;background:var(--bg2);padding:2px 8px;border-radius:6px;}
.adm-row.js-drop-target{border-color:var(--p1)!important;background:rgba(var(--p1-rgb),.04);}

@media(max-width:768px){
    .adm-row-head{flex-wrap:wrap;gap:10px;}
    .adm-row-badges{width:100%;order:3;}
    .adm-row-expand{padding-left:16px;}
    .adm-row-meta{flex-direction:column;gap:2px;}
    .adm-row-quick{flex-direction:column;align-items:stretch;}
    .adm-search-bar{flex-direction:column;}
}
@media(prefers-color-scheme:dark){
    .adm-stato-tabs{background:var(--bg2,#1e293b);}
    .adm-stato-tab.active{background:var(--surface,#334155);}
    .adm-stato-count{background:rgba(255,255,255,.08);}
}

/* ─── Banner "attiva notifiche push" (PWA) ───────────────────── */
.push-banner {
    position: fixed; z-index: 1075; left: 12px; right: 12px; bottom: 12px; margin-inline: auto; max-width: 460px;
    display: none; align-items: center; gap: 14px; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 12px 40px rgba(15,23,42,.18);
    transform: translateY(20px); opacity: 0; transition: transform .3s ease, opacity .3s ease;
}
.push-banner.show { display: flex; transform: none; opacity: 1; }
.push-banner-ico {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center; background: rgba(var(--p1-rgb),.12); color: var(--p1);
}
.push-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.push-banner-text strong { font-size: .92rem; }
.push-banner-text span { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.push-banner-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.push-banner-no {
    border: none; background: transparent; color: var(--muted); font-size: .82rem; font-weight: 600;
    padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background .15s, color .15s;
}
.push-banner-no:hover { background: var(--soft); color: var(--ink); }
.push-banner-yes {
    border: none; background: var(--grad-vivid, var(--p1)); color: #fff; font-size: .85rem; font-weight: 700;
    padding: 9px 18px; border-radius: 10px; cursor: pointer; box-shadow: 0 4px 12px var(--vivid-shadow, rgba(0,138,247,.3));
    transition: transform .12s;
}
.push-banner-yes:active { transform: scale(.96); }
/* Sopra la tabbar mobile se presente; mai sulla chat a tutto schermo (coprirebbe l'input). */
body:has(.mobile-tabbar) .push-banner { bottom: 66px; }
body:has(.chat-app) .push-banner { display: none !important; }
@media (max-width: 560px) {
    .push-banner { flex-wrap: wrap; }
    .push-banner-text { flex-basis: calc(100% - 56px); }
    .push-banner-actions { width: 100%; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════
   RESTYLE DASHBOARD PROFESSIONISTA
   Allinea sidebar, nav, KPI e onboarding al linguaggio visivo
   introdotto con la dashboard cliente (.cd-*).
   TUTTO scoperto sotto .dash-refresh (classe sul .pro-layout del
   solo dashboard professionista) così il pannello ADMIN — che
   condivide .pro-sidebar/.pro-nav-link/.dash-kpi/.onboard-item —
   resta invariato.
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidebar ── */
.dash-refresh .pro-sidebar {
    border-radius: 18px; padding: 0; overflow: hidden;
    box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.dash-refresh .pro-sidebar-head {
    padding: 18px 16px 14px; margin-bottom: 0; gap: 12px;
}
.dash-refresh .pro-sidebar-head-link { margin: 0; padding: 18px 16px 14px; border-radius: 0; }
.dash-refresh .pro-sidebar-head-link:hover { background: var(--bg2); }
.dash-refresh .pro-avatar { border-radius: 14px; }
.dash-refresh .pro-sidebar > .mb-1,
.dash-refresh .pro-sidebar > .d-flex.align-items-center.justify-content-between { padding-inline: 16px; }
.dash-refresh .pro-progress-mini { margin: 0 12px 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg2); }

/* ── Nav ── */
.dash-refresh .pro-nav { padding: 8px; gap: 1px; }
.dash-refresh .pro-nav-link {
    padding: 9px 12px; border-radius: 10px; font-size: .9rem; font-weight: 600; gap: 10px;
}
.dash-refresh .pro-nav-link i { width: 18px; text-align: center; font-size: .95rem; color: var(--muted); }
.dash-refresh .pro-nav-link:hover { background: var(--bg2); }
.dash-refresh .pro-nav-link.active { background: var(--grad-soft); font-weight: 700; }
.dash-refresh .pro-nav-link.active i { color: var(--p1); }
.dash-refresh .pro-nav-link .badge {
    font-size: .68rem; font-weight: 800; padding: 1px 7px; border-radius: 999px;
}
.dash-refresh .pro-nav-sep { margin: 8px 6px; }

/* ── KPI card ── */
.dash-refresh .dash-kpi {
    border-radius: 16px; padding: 18px; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.dash-refresh .dash-kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(var(--p1-rgb),.12); border-color: var(--p1); }
.dash-refresh .dash-kpi::after { display: none; }
.dash-refresh .dash-kpi .icon, .dash-refresh .dash-kpi .stat-ico {
    width: 38px; height: 38px; border-radius: 11px; font-size: .92rem; margin-bottom: 14px; box-shadow: none;
}
.dash-refresh .dash-kpi:hover .icon, .dash-refresh .dash-kpi:hover .stat-ico { transform: none; }
.dash-refresh .dash-kpi .n { font-size: 1.95rem; font-weight: 900; letter-spacing: -.6px; }
.dash-refresh .dash-kpi .l {
    font-size: .83rem; font-weight: 700; color: var(--ink); margin-top: 5px; min-height: 0;
}
.dash-refresh .dash-kpi .kpi-sub { font-size: .73rem; color: var(--muted); margin-top: 3px; }
/* Sparkline a filo del bordo inferiore della card (i margini negativi annullano il padding) */
.dash-refresh .dash-kpi .cd-spark { display: block; width: calc(100% + 36px); height: 34px; margin: 12px -18px -18px; }

/* ── Onboarding checklist: voci a riga con chevron (come il cliente) ── */
.dash-refresh .onboard-card { border-radius: 18px; padding: 22px 24px; }
.dash-refresh .onboard-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) { .dash-refresh .onboard-checklist { grid-template-columns: 1fr; } }
.dash-refresh .onboard-item {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px;
    font-size: .84rem; font-weight: 600; border: 1.5px solid var(--border); background: var(--surface);
    color: var(--ink); transition: all .2s;
}
.dash-refresh .onboard-item i { font-size: .9rem; width: 20px; text-align: center; color: var(--p1); flex-shrink: 0; }
.dash-refresh .onboard-item span { flex: 1; min-width: 0; }
.dash-refresh .onboard-item:not(.onboard-done)::after {
    content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: .75rem; color: var(--border); flex-shrink: 0; transition: transform .2s, color .2s;
}
.dash-refresh .onboard-item:not(.onboard-done):hover {
    border-color: var(--p1); background: var(--grad-soft); color: var(--p1); transform: none;
}
.dash-refresh .onboard-item:not(.onboard-done):hover::after { color: var(--p1); transform: translateX(3px); }
.dash-refresh .onboard-item.onboard-done { border-color: #a7f3d0; background: #ecfdf5; color: #065f46; opacity: 1; }
.dash-refresh .onboard-item.onboard-done i { color: #10b981; }
.dash-refresh .onboard-item.onboard-done span { text-decoration: line-through; opacity: .75; }

/* ── Titoli di sezione ── */
.dash-refresh .dash-section-title {
    font-size: .82rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .5px;
}
.dash-refresh .dash-section-title::before { display: none; }