/* ════════════════════════════════════════════════════════════
   Cartomanti.AI – Design System
   Mobile-first, palette mistica calda (viola + oro + rosa)
   ════════════════════════════════════════════════════════════ */

:root {
    /* ── Palette ── */
    --c-bg:           #faf6f2;         /* sabbia caldissima */
    --c-bg-elev:      #ffffff;
    --c-ink:          #2a1f3d;         /* nero-viola */
    --c-ink-soft:     #5a4d6b;
    --c-ink-mute:     #8c7f9f;
    --c-line:         #ebe2e8;

    --c-primary:      #6b21a8;         /* viola mistico */
    --c-primary-700:  #581c87;
    --c-primary-300:  #c4a8e8;
    --c-primary-50:   #f5edff;

    --c-accent:       #d4a017;         /* oro */
    --c-accent-700:   #a47a0c;
    --c-accent-50:    #fdf6e0;

    --c-rose:         #c9356c;         /* rosa caldo */
    --c-rose-50:      #fce8ef;

    --c-success:      #1f8f3a;
    --c-warning:      #d48806;
    --c-danger:       #c0392b;

    /* CTA "Chiama" — accent caldo per distinguere dalla CTA primaria chat (viola).
       Usato sia nella riga home (.cmr-cta-call) sia nel profilo (.btn-primary.btn-call). */
    --c-call:         #f59e0b;
    --c-call-dark:    #d97706;

    /* ── Tipografia ── */
    --f-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --f-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Spazio / radius / shadow ── */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    --sh-sm: 0 2px 8px  rgba(42, 31, 61, 0.06);
    --sh-md: 0 8px 24px rgba(42, 31, 61, 0.10);
    --sh-lg: 0 18px 48px rgba(42, 31, 61, 0.16);
    --sh-glow: 0 0 0 4px rgba(107, 33, 168, 0.12);

    --maxw: 480px;                     /* mobile-first: container massimo per leggibilità */
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--c-ink);
    background:
        radial-gradient(ellipse 85% 65% at 8% 5%,  rgba(248, 130, 175, 0.55), transparent 60%),
        radial-gradient(ellipse 75% 55% at 95% 20%, rgba(170, 130, 240, 0.50), transparent 60%),
        radial-gradient(ellipse 95% 65% at 50% 105%, rgba(253, 200, 110, 0.42), transparent 60%),
        linear-gradient(160deg, #fcd9e6 0%, #f0dcfa 50%, #ffeac0 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* ── Typography ── */
.h-display {
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.h-1 { font-size: clamp(28px, 7vw, 36px); font-weight: 800; line-height: 1.15; }
.h-2 { font-size: 22px; font-weight: 800; line-height: 1.2; }
.h-3 { font-size: 18px; font-weight: 700; line-height: 1.25; }
.t-mute { color: var(--c-ink-mute); }
.t-soft { color: var(--c-ink-soft); }
.t-accent { color: var(--c-accent-700); }
.t-rose { color: var(--c-rose); }

/* ── Layout ── */
.app {
    max-width: var(--maxw);
    margin: 0 auto;
    min-height: 100vh;
    background: transparent;
    position: relative;
}
.section { padding: 24px 20px; }
.section-tight { padding: 16px 20px; }
.stack > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 8px; }
.stack-lg > * + * { margin-top: 24px; }

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 15px;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    text-align: center;
    width: 100%;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-rose) 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(107, 33, 168, 0.32);
}
.btn-primary:hover { box-shadow: 0 10px 28px rgba(107, 33, 168, 0.42); }
/* Riga di 1+ bottoni CTA centrata (hero profilo + sticky bottom) */
.cm-actions-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
/* Variante "Chiama" — accent caldo per distinguerla dal primario chat */
.btn-primary.btn-call {
    background: linear-gradient(135deg, var(--c-call) 0%, var(--c-call-dark) 100%);
    box-shadow: 0 8px 22px rgba(217, 119, 6, 0.30);
}
.btn-primary.btn-call:hover { box-shadow: 0 10px 28px rgba(217, 119, 6, 0.42); }
.btn-gold {
    background: linear-gradient(135deg, var(--c-accent) 0%, #e8b738 100%);
    color: #2a1f3d;
    box-shadow: 0 8px 22px rgba(212, 160, 23, 0.30);
}
.btn-ghost {
    background: var(--c-bg-elev);
    color: var(--c-ink);
    border: 1px solid var(--c-line);
}
.btn-sm { padding: 10px 16px; font-size: 13px; }

/* ── Header / topbar mobile ── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(180deg, #1f1235 0%, #2a1f3d 100%);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Bottoni nav su topbar scura: testo chiaro + ghost trasparente */
.topbar .btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #f5edff;
    border-color: rgba(255, 255, 255, 0.22);
}
.topbar .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
}
.topbar-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    /* Diego (2026-05-15 sera): "altezza di toolbar +10px" → padding verticale
       da 12px a 17px (5+5 = +10px totali). */
    padding: 17px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topbar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--c-primary);
    letter-spacing: -0.02em;
}
.brand-logo {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-rose));
    display: grid; place-items: center;
    color: #fff;
    font-size: 18px;
}
.brand-logo-img {
    height: 38px;
    width: auto;
    display: block;
    object-fit: contain;
}
@media (max-width: 480px) {
    .brand-logo-img { height: 32px; }
}

/* Fallback testo se logo image manca (es. Azarath senza grafica definitiva).
   Diego (2026-05-13 PM2): "in alto mancano i tasti accedi/registrati" → ho
   incluso topbar.php anche su Azarath; il logo non esiste come file quindi
   uso il nome del brand come testo decorato.
   Update (2026-05-13 PM3): "guarda in alto" → il testo AZARATH della topbar
   si sovrapponeva all'hero AZARATH della pagina (ridondante). Su Azarath
   sostituisco il testo con un piccolo simbolo decorativo ✦ così l'hero
   AZARATH grande della pagina fa da unica identity. */
.brand-text-fallback {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: #f4c542;
    text-transform: uppercase;
    line-height: 1;
}
@media (max-width: 480px) {
    .brand-text-fallback { font-size: 18px; letter-spacing: 0.14em; }
}
/* Su Azarath: solo simbolo decorativo al posto del testo. Niente doppio
   "AZARATH" topbar + hero. */
body.theme-azarath .brand-text-fallback {
    font-size: 0;  /* nasconde testo, manteniamo l'<a> cliccabile per home */
    width: 28px;
    height: 28px;
    display: inline-block;
    background:
        radial-gradient(circle at center, #f4c542 0%, #f4c542 35%, transparent 60%);
    border-radius: 50%;
    /* Glow soft attorno al simbolo per coerenza estetica con hero */
    box-shadow: 0 0 14px rgba(244, 197, 66, 0.4);
}
body.theme-azarath .brand-text-fallback::before {
    content: '✦';
    font-size: 16px;
    color: #0a0a0a;
    line-height: 28px;
    display: block;
    text-align: center;
    font-weight: 900;
}
.brand-suffix {
    color: var(--c-accent-700);
    font-weight: 800;
    font-family: var(--f-body);
    font-size: 13px;
    letter-spacing: 0.04em;
    background: var(--c-accent-50);
    padding: 2px 8px;
    border-radius: var(--r-pill);
}

/* ── Hero ── */
.hero {
    padding: 28px 20px 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 60%;
    background:
        radial-gradient(60% 60% at 30% 30%, rgba(107, 33, 168, 0.10), transparent 70%),
        radial-gradient(50% 50% at 80% 20%, rgba(212, 160, 23, 0.10), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-primary-50);
    color: var(--c-primary-700);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    margin-bottom: 14px;
}
.hero-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-success);
    box-shadow: 0 0 0 3px rgba(31, 143, 58, .18);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .4; }
}
.hero-title {
    font-family: var(--f-display);
    font-size: clamp(30px, 8vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--c-ink);
}
.hero-title .accent {
    background: linear-gradient(120deg, var(--c-primary), var(--c-rose));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
}
.hero-sub {
    font-size: 16px;
    color: var(--c-ink-soft);
    margin: 0 auto 22px;
    max-width: 380px;
}
.hero-cta-row { display: flex; flex-direction: column; gap: 10px; padding: 0 8px; }
.hero-trust {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 20px;
    font-size: 12px;
    color: var(--c-ink-mute);
    flex-wrap: wrap;
}
.hero-trust strong { color: var(--c-ink); font-weight: 800; }

/* ── Card cartomante (lista) ── */
.cartomanti-list {
    display: grid;
    gap: 12px;
}
.cm-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--c-bg-elev);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cm-card:active { transform: translateY(1px); }
.cm-card:hover {
    border-color: var(--c-primary-300);
    box-shadow: var(--sh-md);
}
.cm-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary-50), var(--c-accent-50));
    display: grid; place-items: center;
    font-family: var(--f-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--c-primary);
    position: relative;
    flex-shrink: 0;
}
.cm-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.cm-status-dot {
    position: absolute;
    bottom: 0; right: 0;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--c-success);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(31, 143, 58, .25);
}
.cm-name {
    font-weight: 800;
    font-size: 16px;
    color: var(--c-ink);
    margin: 0 0 2px;
}
.cm-title {
    font-size: 13px;
    color: var(--c-ink-soft);
    margin: 0;
    line-height: 1.3;
}
.cm-tags {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin-top: 6px;
}
.cm-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--c-primary-50);
    color: var(--c-primary-700);
    letter-spacing: 0.02em;
    text-transform: lowercase;
}
.cm-card-cta {
    background: linear-gradient(135deg, var(--c-primary), var(--c-rose));
    color: #fff;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(107, 33, 168, 0.30);
    flex-shrink: 0;
}

/* ── Strip "come funziona" ── */
.steps {
    display: grid;
    gap: 14px;
}
.step {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: start;
    padding: 14px;
    background: var(--c-bg-elev);
    border-radius: var(--r-md);
    border: 1px solid var(--c-line);
}
.step-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--c-primary-50);
    color: var(--c-primary);
    display: grid; place-items: center;
    font-weight: 800;
    font-family: var(--f-display);
    font-size: 18px;
}
.step h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.step p  { margin: 0; font-size: 14px; color: var(--c-ink-soft); }

/* ── FAQ (details/summary) ── */
.faq {
    display: block;
    padding: 16px 18px;
    background: var(--c-bg-elev);
    border-radius: var(--r-md);
    border: 1px solid var(--c-line);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.faq[open] {
    border-color: var(--c-primary-300);
    box-shadow: var(--sh-sm);
}
.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 800;
    font-size: 15px;
    color: var(--c-ink);
    user-select: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--c-primary-50);
    color: var(--c-primary);
    display: grid; place-items: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    transition: transform .2s ease, background .2s ease;
}
.faq[open] summary::after {
    content: '−';
    background: var(--c-primary);
    color: #fff;
    transform: rotate(180deg);
}
.faq p {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--c-ink-soft);
    line-height: 1.55;
}
.faq a { color: var(--c-primary); font-weight: 700; }

/* ── Section title ── */
.sec-title {
    font-family: var(--f-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--c-ink);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.sec-sub {
    font-size: 14px;
    color: var(--c-ink-soft);
    margin: 0 0 18px;
}

/* ── Footer ── */
/* Footer: full-width bleed (esce dal max-width di .app per arrivare ai bordi
   estremi del viewport, come la topbar e l'hero karmica). Diego (2026-05-10):
   "anche il footer è tagliato e come l'header vorrei proseguisse fino ai lati
   estremi". Trick: width:100vw + margin negativi sulle metà; il contenuto
   interno resta naturalmente centrato grazie a text-align:center. */
.footer {
    padding: 32px 24px 40px;
    text-align: center;
    border-top: 1px solid var(--c-line);
    margin-top: 24px;
    font-size: 12px;
    color: var(--c-ink-mute);
    background: #faf6f2;                 /* sfondo caldo: rende visibile il bleed */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
/* Evita scroll orizzontale (la 100vw include la scrollbar). Vale per entrambi
   i temi; karmica già aveva la stessa regola per l'hero. */
body { overflow-x: hidden; }
.footer a { color: var(--c-ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.footer-links { margin-bottom: 10px; }
.footer-links a + a { margin-left: 14px; }
/* Dati societari: tipografia ridotta e tono molto sobrio (info legale
   obbligatoria, ma non deve dominare il footer). */
.footer-legal {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 10.5px;
    color: var(--c-ink-mute, #6b7280);
    letter-spacing: 0.01em;
    opacity: 0.85;
}
body.theme-karmica .footer-legal {
    border-top-color: #f0e2eb;
}

/* ── Sticky bottom CTA (mobile) ── */
.bottom-cta {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: calc(var(--maxw) - 24px);
    z-index: 40;
    background: var(--c-bg-elev);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    padding: 8px 8px 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: var(--sh-lg);
}
.bottom-cta-text {
    font-size: 13px;
    color: var(--c-ink);
    font-weight: 700;
    line-height: 1.2;
}
.bottom-cta-text small { display: block; font-weight: 500; color: var(--c-ink-mute); font-size: 11px; }
.bottom-cta .btn { width: auto; padding: 10px 18px; font-size: 13px; }

/* lascia spazio in fondo per non far coprire il contenuto */
.app { padding-bottom: 80px; }

/* ════════════════════════════════════════════════════════════
   Mobile fixes — iPhone 12 e schermi stretti (≤480px)
   ════════════════════════════════════════════════════════════ */

/* Topbar: i bottoni .btn-sm devono stare in linea SENZA andare a capo
   né prendere width:100% (che ereditano da .btn) */
.topbar-nav .btn {
    width: auto;
    white-space: nowrap;
}

/* ── Badge saldo nel topbar (loggato) — display only, NON cliccabile ──
   Colori coerenti con la topbar scura: pill semi-trasparente, bordo soft chiaro. */
.topbar-wallet {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 6px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    transition: background .15s, border-color .15s, transform .1s;
}
.topbar-wallet:hover  { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); }
.topbar-wallet:active { transform: scale(0.97); }

/* Bottone profilo cliente in topbar — link a /area-cliente */
.topbar-profile {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}
.topbar-profile:hover  { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); }
.topbar-profile:active { transform: scale(0.95); }

/* Moneta dorata col simbolo € */
.topbar-wallet-coin {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #f7d878 0%, #d6a838 50%, #b88828 100%);
    color: #4a3408;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 900;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    line-height: 1;
    box-shadow:
        inset 0 -2px 0 rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.5),
        0 1px 2px rgba(184, 136, 40, 0.4);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

/* Importo: oro chiaro per coerenza con la moneta dorata su topbar scura */
.topbar-wallet-amount {
    color: #fde68a;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
}
/* Pseudo-elemento '€' rimosso: l'HTML emette già <span class="topbar-wallet-coin">€</span>
   PRIMA dell'amount. Avere ::after qui aggiungeva un secondo simbolo euro alla
   fine, generando "€173,92 €" (visto da Diego il 2026-05-07 su iPhone 12). */

@media (max-width: 480px) {
    /* Topbar più compatta: brand più piccolo, padding ridotto */
    .topbar-inner {
        padding: 10px 12px;
        gap: 8px;
    }
    .brand {
        font-size: 17px;
        gap: 6px;
        min-width: 0;            /* permette al brand di restringersi se serve */
    }
    .brand-logo {
        width: 28px;
        height: 28px;
        font-size: 16px;
        flex-shrink: 0;
    }
    .brand-suffix {
        font-size: 11px;
        padding: 1px 6px;
    }
    .topbar-nav {
        gap: 6px;
    }
    .topbar-nav .btn-sm {
        padding: 8px 12px;
        font-size: 12.5px;
    }

    /* Sticky bottom CTA: un filo più snella così copre meno della lista */
    .bottom-cta {
        bottom: 10px;
        padding: 6px 6px 6px 14px;
        gap: 8px;
    }
    .bottom-cta-text { font-size: 12.5px; }
    .bottom-cta-text small { font-size: 10.5px; }
    .bottom-cta .btn { padding: 9px 14px; font-size: 12.5px; }

    /* ── Lista cartomanti: griglia 2 colonne per risparmiare scroll ── */
    .cartomanti-list {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    /* Card compatta verticale: avatar in alto, nome + badge sotto, centrati */
    .cm-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        text-align: center;
        gap: 8px;
        padding: 14px 10px 12px;
        position: relative;
    }
    .cm-avatar {
        width: 60px;
        height: 60px;
        margin: 0 auto;
        font-size: 22px;
    }
    .cm-status-dot {
        width: 12px;
        height: 12px;
    }
    .cm-card-body {
        text-align: center;
    }
    .cm-card-head {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        margin-bottom: 0;
    }
    .cm-name {
        font-size: 14px;
        line-height: 1.15;
    }
    .cm-badge {
        font-size: 9px;
        padding: 2px 7px;
    }
    /* Nascondi titolo e tag su mobile: la card resta pulita e leggibile */
    .cm-title,
    .cm-tags {
        display: none;
    }
    /* Su mobile la pill "OCCUPATA" già comunica lo stato:
       nascondiamo la riga "In consulto" per non duplicare l'info */
    .cm-busy-line {
        display: none;
    }
    /* La CTA fumetto è solo decorativa (tutta la card è già un <a>):
       nascondiamola su mobile per non rubare spazio nella card stretta */
    .cm-card-cta {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════
   Avatar + status (cartomanti / voci amiche)
   ════════════════════════════════════════════════════════════ */

.cm-avatar img {
    /* assicura il riempimento totale anche con SVG DiceBear */
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.cm-avatar-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-weight: 700;
}

/* avatar grande per la pagina dettaglio */
.cm-avatar.cm-avatar-xl {
    width: 104px;
    height: 104px;
    font-size: 42px;
    margin: 0 auto 16px;
}

/* status dot — varianti online / occupata */
.cm-status-dot.is-online {
    background: var(--c-success);
    box-shadow: 0 0 0 2px rgba(31, 143, 58, .25);
    animation: cm-pulse-green 2.4s ease-out infinite;
}
.cm-status-dot.is-busy {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, .30);
    animation: cm-pulse-red 2.4s ease-out infinite;
}
.cm-status-dot.cm-status-dot-lg {
    width: 18px;
    height: 18px;
    border-width: 3px;
}
@keyframes cm-pulse-green {
    0%   { box-shadow: 0 0 0 2px rgba(31, 143, 58, .35), 0 0 0 0 rgba(31, 143, 58, .35); }
    70%  { box-shadow: 0 0 0 2px rgba(31, 143, 58, .25), 0 0 0 8px rgba(31, 143, 58, 0); }
    100% { box-shadow: 0 0 0 2px rgba(31, 143, 58, .25), 0 0 0 0 rgba(31, 143, 58, 0); }
}
@keyframes cm-pulse-red {
    0%   { box-shadow: 0 0 0 2px rgba(239, 68, 68, .40), 0 0 0 0 rgba(239, 68, 68, .40); }
    70%  { box-shadow: 0 0 0 2px rgba(239, 68, 68, .30), 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, .30), 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ════════════════════════════════════════════════════════════
   Card layout: body + head con badge tipo
   ════════════════════════════════════════════════════════════ */

.cm-card-body {
    min-width: 0; /* permette il truncate del titolo se serve */
}
.cm-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    flex-wrap: wrap;
}
.cm-card-head .cm-name {
    margin: 0;
}

/* badge tipo */
.cm-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1;
}
.cm-badge-cart {
    background: linear-gradient(135deg, #f3e8ff, #fce7f3);
    color: #7c2d92;
}
.cm-badge-voce {
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    color: #b45309;
}
/* Badge "Vera" — distingue cartomanti reali (vere persone) dalle AI */
.cm-badge-real {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #f59e0b;
    font-weight: 800;
}

/* Prezzo €/min sulle cartomanti vere */
.cm-prezzo {
    font-size: 12px;
    font-weight: 800;
    color: #1f8f3a;
    margin: 4px 0 0;
    line-height: 1;
}

/* Card "offline" (operatore non al lavoro) — leggermente sbiadita */
.cm-card.is-offline {
    opacity: 0.65;
    filter: grayscale(0.3);
}
.cm-card.is-offline .cm-status-dot.is-off {
    background: #94a3b8;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.30);
    animation: none;
}
.cm-card.is-offline .cm-busy-line-off {
    color: #64748b;
}
.cm-card.is-offline .cm-card-cta {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.30);
}

/* Status dot variante "offline" */
.cm-status-dot.is-off {
    background: #94a3b8;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.25);
}

/* Avatar XL in stato "offline" sulla pagina profilo cartomante reale */
.cm-avatar-xl.is-offline {
    opacity: 0.65;
    filter: grayscale(0.4);
}

/* ════════════════════════════════════════════════════════════
   Cartomanti REALI — card "pulita" stile Telegram
   Layout orizzontale: avatar | nome+sub+prezzo | CTA pillola
   Più ordinata e leggibile rispetto alle card AI.
   ════════════════════════════════════════════════════════════ */

.cmr-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cmr-row {
    position: relative; /* ancora per .cmr-overlay (link al profilo "stretched") */
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 2px 14px rgba(107, 33, 168, 0.07);
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
    border: 1px solid rgba(107, 33, 168, 0.06);
}
.cmr-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(107, 33, 168, 0.14);
    border-color: rgba(107, 33, 168, 0.12);
}
.cmr-row:active {
    transform: translateY(0);
}

/* Link "stretched" che copre tutta la riga e punta al profilo cartomante.
   I bottoni CTA (Chatta/Chiama) stanno sopra grazie a position:relative+z-index in .cmr-actions.
   Avatar e info sono pointer-events:none così i tap su quelle zone arrivano all'overlay.       */
.cmr-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    text-decoration: none;
}
/* A11y: l'overlay è invisibile, ma quando navigato via tastiera deve mostrare un focus ring.
   Browser di default disegnerebbe un outline su tutto il rettangolo ma con z-index:0 verrebbe
   coperto dall'avatar; lo rendiamo esplicito con un ring sulla riga padre. */
.cmr-overlay:focus-visible {
    outline: none;
}
.cmr-row:has(.cmr-overlay:focus-visible) {
    outline: 2.5px solid var(--c-primary);
    outline-offset: 2px;
}

/* Avatar */
.cmr-avatar {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* niente overflow:hidden — l'<img> dentro è già clippata circolare via border-radius:50%
       e così il pallino di status (figlio absolute) non viene tagliato sul bordo */
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 20px;
    background: linear-gradient(135deg, #f5edfa, #ede4f6);
    color: #6b21a8;
    pointer-events: none; /* tap qui → arriva all'overlay (link al profilo) */
}
.cmr-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.cmr-avatar-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}
.cmr-status-dot {
    position: absolute;
    /* posizionato sul bordo SE del cerchio, non dell'angolo del bounding box */
    bottom: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    background: #1f8f3a; /* online di default */
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
    z-index: 2;
}
.cmr-status-dot.is-on   { background: #1f8f3a; }
.cmr-status-dot.is-busy { background: #ef4444; }
.cmr-status-dot.is-off  { background: #94a3b8; }

/* Info centrale */
.cmr-info {
    flex: 1;
    min-width: 0;
    pointer-events: none; /* idem: tap qui → overlay → profilo */
}
.cmr-name {
    font-family: 'Manrope', -apple-system, sans-serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 1.2;
    color: #1f1235;
    margin: 0 0 2px;
}
.cmr-sub {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 4px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmr-price {
    font-size: 14px;
    font-weight: 800;
    color: #6b21a8;
    margin: 0;
    line-height: 1.25;
    letter-spacing: 0.01em;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}
/* Ogni "pill" prezzo (chat o voce) sta tutto in una riga: icona+€/min insieme,
   no break interno. Su schermi piccoli vanno a capo come unità intera. */
.cmr-price-chip {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
/* Prezzo voce: colore arancio (coerente con CTA Chiama) */
.cmr-price-voice {
    color: var(--c-call-dark);
    font-weight: 700;
}

/* Area CTA: 1 o 2 pillole (Chatta + Chiama, oppure singola pillola di stato).
   Sta SOPRA l'overlay-link, così i bottoni restano cliccabili separatamente. */
.cmr-actions {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

/* CTA pillola — base condivisa */
.cmr-cta {
    display: inline-block;
    padding: 11px 16px;
    background: linear-gradient(135deg, #8b5cf6, #6b21a8);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(107, 33, 168, 0.30);
    white-space: nowrap;
    text-align: center;
    line-height: 1;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}
.cmr-cta:hover {
    box-shadow: 0 6px 16px rgba(107, 33, 168, 0.40);
}
.cmr-cta:active {
    transform: scale(0.97);
}

/* Variante CHIAMA — accent caldo per distinguerla dal chat (CTA principale: chat) */
.cmr-cta-call {
    background: linear-gradient(135deg, var(--c-call), var(--c-call-dark));
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.30);
}
.cmr-cta-call:hover {
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.40);
}

/* Stato BUSY (la singola pillola .cmr-cta-state vale per busy/offline).
   Vale sia nelle card lista (.cmr-row.is-busy) sia nella pagina profilo
   (.cmr-actions.is-busy) — Diego (2026-05-10) ha notato un tasto viola
   vuoto nel profilo cartomante quando offline: era proprio perché qui i
   selettori erano scoped solo a .cmr-row e nel profilo non scattavano. */
.cmr-row.is-busy .cmr-cta-state,
.cmr-actions.is-busy .cmr-cta-state {
    background: linear-gradient(135deg, #f87171, #dc2626);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

/* Stato OFFLINE */
.cmr-row.is-offline {
    opacity: 0.7;
}
.cmr-row.is-offline .cmr-cta-state,
.cmr-actions.is-offline .cmr-cta-state {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    box-shadow: 0 2px 6px rgba(100, 116, 139, 0.20);
}

/* Variante "profilo": il testo dello stato resta sempre visibile (override
   del font-size:0 di karmica, che era pensato per la card lista dove al
   suo posto vengono iniettati i pseudo-elementi). Sul profilo non abbiamo
   pseudo-elementi → mostriamo il textContent così com'è. */
.cmr-cta-state-profile {
    font-size: 14px !important;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 12px 18px !important;
}

/* Pillola di stato (busy/offline): non navigabile, no hover lift */
.cmr-cta-state {
    cursor: default;
}
.cmr-cta-state:hover {
    box-shadow: 0 4px 12px rgba(107, 33, 168, 0.30);
}

/* Mobile */
@media (max-width: 480px) {
    /* Su iPhone 12 e simili (390px) le card devono andare quasi a filo del bordo
       per dare massimo spazio interno: meno wrap del prezzo, più respiro al CTA. */
    .section { padding: 18px 8px; }
    .cmr-row {
        padding: 12px 12px;
        gap: 10px;
    }
    .cmr-avatar { width: 54px; height: 54px; }
    .cmr-name   { font-size: 16px; }
    .cmr-sub    { font-size: 12px; }
    .cmr-price  { font-size: 13px; gap: 4px 8px; }
    .cmr-actions { gap: 6px; }
    .cmr-cta {
        padding: 9px 12px;
        font-size: 12.5px;
    }
}

/* riga "in consulto" sotto il titolo */
.cm-busy-line {
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* card "occupata" leggermente attenuata */
.cm-card.is-busy .cm-avatar { filter: saturate(0.85); }
.cm-card.is-busy { opacity: 0.96; }

/* ════════════════════════════════════════════════════════════
   CTA fumetto chat (al posto della freccia)
   ════════════════════════════════════════════════════════════ */

.cm-card-cta {
    /* Default = ONLINE: verde (matcha lo status dot) */
    background: linear-gradient(135deg, #1f8f3a, #2faf52);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(31, 143, 58, 0.30);
    flex-shrink: 0;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
/* Stato OCCUPATO: rosso (matcha lo status dot rosso) */
.cm-card.is-busy .cm-card-cta {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.30);
}
.cm-card-cta svg {
    display: block;
    width: 22px;
    height: 22px;
}
.cm-card:hover .cm-card-cta {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(31, 143, 58, 0.40);
}
.cm-card.is-busy:hover .cm-card-cta {
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.40);
}

/* ════════════════════════════════════════════════════════════
   Mobile (≤480px) — CTA card: pill orizzontale a tutta larghezza
   con icona chat + etichetta "CHIAMA" (online) / "OCCUPATA" (busy).
   Posizionato a fondo file per vincere il cascade sulle rules
   desktop di .cm-card-cta sopra.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .cm-card-cta {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100% !important;
        height: 38px !important;
        border-radius: 999px;
        padding: 0 14px;
        box-sizing: border-box;
        margin-top: 4px;
        justify-self: stretch;
        align-self: stretch;
    }
    .cm-card-cta svg {
        width: 16px;
        height: 16px;
    }
    .cm-card-cta::after {
        content: "Chiama";
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        line-height: 1;
    }
    .cm-card.is-busy .cm-card-cta::after {
        content: "Occupata";
    }
    .cm-card.is-offline .cm-card-cta::after {
        content: "Offline";
    }
    /* La pill "OCCUPATA" già comunica lo stato: nascondiamo la riga
       "In consulto" su mobile per non duplicare l'info */
    .cm-busy-line {
        display: none !important;
    }
    /* Prezzo €/min visibile sulla card mobile (le AI non hanno questo campo) */
    .cm-prezzo {
        font-size: 11px;
        margin-top: 2px;
    }
}

/* ════════════════════════════════════════════════════════════
   CHAT REALE — UI cliente (cr-* prefix)
   Mobile-first, occupa tutta la viewport.
   ════════════════════════════════════════════════════════════ */

.cr-shell {
    position: fixed;
    inset: 0;
    /* Fallback per browser/contesti che non riconoscono inset:0 sul fixed
       (capita in webview e contenitori con transform/filter sui parent) */
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;        /* tiene conto della URL bar dinamica iOS/Android */
    display: flex;
    flex-direction: column;
    background-color: #1a1430;
    background-image: url("/assets/img/sfondi/sfondo-chat.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 50;
}
.cr-shell > .cr-messages { flex: 1 1 auto; min-height: 0; }
/* Safety net: anche se il cr-shell per qualunque motivo non riempie tutto
   (parent transform, viewport bug, ecc.) il body resta dark sotto, non bianco.
   Fallback `body.cr-active` per Chrome Android <105 e Samsung Internet vecchi
   (impostata da JS in chat_reale.php) che non supportano :has(). */
body:has(.cr-shell),
body.cr-active { overflow: hidden; background-color: #1a1430; }

/* Topbar */
.cr-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #efe4f7;
    box-shadow: 0 2px 8px rgba(107, 33, 168, 0.06);
}
.cr-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: #6b21a8;
    font-size: 22px;
    font-weight: 700;
    background: #f5edfa;
    flex-shrink: 0;
}
.cr-top-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
.cr-top-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.cr-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #94a3b8;
}
.cr-status-dot.is-on  { background: #1f8f3a; }
.cr-status-dot.is-off { background: #94a3b8; }
.cr-status-dot.is-pulse {
    background: #f59e0b;
    animation: crPulseDot 1.2s infinite;
}
@keyframes crPulseDot {
    0%,100% { transform: scale(1); opacity: 1; }
    50%     { transform: scale(1.3); opacity: 0.7; }
}
.cr-top-info {
    flex: 1;
    min-width: 0;
}
.cr-top-name {
    font-weight: 800;
    font-size: 15px;
    color: #1f1235;
    line-height: 1.2;
}
.cr-top-sub {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.2;
    margin-top: 2px;
}
.cr-top-meter {
    text-align: right;
    flex-shrink: 0;
}
.cr-timer {
    font-weight: 800;
    font-size: 14px;
    color: #1f1235;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.cr-cost {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

/* "Termina" in topbar — squadrato, compatto, sul lato destro accanto al meter.
   Sostituisce il vecchio cr-close-btn floating in basso, che rubava spazio. */
.cr-top-end[hidden] { display: none; }
.cr-top-end {
    appearance: none;
    background: #faf6fd;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.cr-top-end:hover  { background: #fef2f2; border-color: #fca5a5; }
.cr-top-end:active { background: #fee2e2; }

/* Banner stato */
.cr-banner {
    padding: 10px 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 1px solid transparent;
}
.cr-banner-info  { background: #fef3c7; color: #92400e; border-bottom-color: #fde68a; }
.cr-banner-ok    { background: #d1fae5; color: #065f46; border-bottom-color: #a7f3d0; }
.cr-banner-warn  { background: #f0bfd6; color: #1f1235; border-bottom-color: #e09cbc; }
.cr-banner-error { background: #fee2e2; color: #991b1b; border-bottom-color: #fecaca; }

/* Lista messaggi — trasparente: lo sfondo (pattern mistico) è dipinto sul
   .cr-shell, così copre sempre l'intera area visibile e non "cresce coi messaggi". */
.cr-messages {
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}
.cr-empty {
    margin: auto;
    text-align: center;
    color: #6b7280;
    max-width: 280px;
}
.cr-empty-emoji { font-size: 48px; margin-bottom: 12px; }
.cr-empty p { margin: 4px 0; font-size: 14px; }

/* ── Waiting card grande e leggibile (cliente in attesa cartomante) ── */
.cr-waiting-card {
    margin: auto;
    max-width: 360px;
    padding: 32px 28px;
    background: rgba(255,255,255,0.96);
    border-radius: 22px;
    box-shadow: 0 12px 36px -8px rgba(0,0,0,0.18);
    text-align: center;
    backdrop-filter: blur(8px);
}
.cr-waiting-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    margin: 0 auto 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #f3eef9, #fff);
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(123,79,160,0.2);
    animation: cr-waiting-pulse 1.6s ease-in-out infinite;
}
.cr-waiting-avatar img { width: 100%; height: 100%; object-fit: cover; }
@keyframes cr-waiting-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(123,79,160,0.2); }
    50%      { transform: scale(1.04); box-shadow: 0 8px 24px rgba(123,79,160,0.32); }
}

.cr-waiting-name {
    margin: 0 0 6px;
    font-family: var(--f-display, 'Playfair Display', serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--c-ink, #1a1a2e);
}
.cr-waiting-status {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--c-ink-mute, #6b7280);
}
.cr-waiting-countdown {
    font-family: var(--f-display, 'Playfair Display', serif);
    font-size: 56px;
    font-weight: 700;
    color: var(--c-primary, #6b21a8);
    line-height: 1;
    margin: 12px 0 4px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.cr-waiting-label {
    margin: 0 0 18px;
    font-size: 12px;
    color: var(--c-ink-mute, #6b7280);
    text-transform: lowercase;
    letter-spacing: 0.04em;
}
.cr-waiting-tariffa {
    margin: 14px 0 0;
    padding: 10px 14px;
    background: rgba(123, 79, 160, 0.06);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--c-ink-mute, #6b7280);
}
.cr-waiting-tariffa strong { color: var(--c-ink, #1a1a2e); }

/* CTA "Avvia consulto" — comparso quando NON c'è una sessione attiva, così
   il refresh accidentale non fa ripartire la chiamata alla cartomante. */
.cr-start-btn[hidden] { display: none; }
.cr-start-btn {
    appearance: none;
    margin: 14px auto 6px;
    display: block;
    padding: 14px 22px;
    background: linear-gradient(135deg, #6b21a8, #8b5cf6);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 18px -4px rgba(107, 33, 168, 0.45);
    transition: transform .1s ease, box-shadow .15s ease;
}
.cr-start-btn:hover  { transform: translateY(-1px); box-shadow: 0 8px 22px -4px rgba(107, 33, 168, 0.55); }
.cr-start-btn:active { transform: translateY(0); }
.cr-start-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Animazione comparsa messaggi (whatsapp-like soft) ── */
@keyframes cr-msg-in {
    0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.cr-msg {
    display: flex;
    max-width: 85%;
    animation: cr-msg-in .26s cubic-bezier(.2,.8,.2,1);
    transform-origin: bottom right;
}
.cr-msg-her {
    transform-origin: bottom left;
}
.cr-msg-mine { align-self: flex-end; justify-content: flex-end; }
.cr-msg-her  { align-self: flex-start; }
.cr-bubble {
    /* Font stack identico a WhatsApp Web per coerenza visiva */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
    font-size: 17.5px;
    line-height: 24px;
    padding: 9px 14px;
    border-radius: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
    transition: opacity .25s ease, background .25s ease;
}
/* Bubble cliente = rosa cipria (in palette col tema cartomanzia, contrasta sul
   viola notturno). Bubble cartomante = bianco crema. */
.cr-msg-mine .cr-bubble {
    background: #f0bfd6;
    color: #1f1235;
    border-bottom-right-radius: 4px;
}

/* Card "istruzioni iniziali": appare una volta quando la cartomante accetta.
   Larga (full-width della chat), stesso rosa delle bolle cliente, padding ampio
   e tipografia leggibile per ricordare al cliente le regole basi del consulto. */
.cr-msg-intro {
    align-self: stretch;
    max-width: 100%;
    margin: 4px 0 8px;
}
.cr-bubble-intro {
    background: #c14b86;
    color: #fff;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: 0 2px 12px rgba(31, 18, 53, 0.18);
    white-space: normal;
}

/* "Sta scrivendo": bolla con 3 puntini animati. Identica forma alle bolle
   normali (her per cartomante, mine per cliente) ma con animazione. */
.cr-msg-typing { animation: cr-msg-in .2s ease; }
.cr-bubble-typing {
    display: inline-flex;
    gap: 4px;
    padding: 12px 14px;
    align-items: center;
    min-height: 40px;
}
.cr-bubble-typing span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(31, 18, 53, 0.45);
    animation: cr-typing-bounce 1.2s infinite ease-in-out;
}
.cr-bubble-typing span:nth-child(2) { animation-delay: .15s; }
.cr-bubble-typing span:nth-child(3) { animation-delay: .30s; }
@keyframes cr-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .35; }
    30%           { transform: translateY(-4px); opacity: 1; }
}
.cr-msg-her .cr-bubble {
    background: #ffffff;
    color: #1f1235;
    border-bottom-left-radius: 4px;
}
/* Stato "in invio" e "errore" per messaggi ottimistici.
 * Diego (2026-05-12): aggiunto stato "retry" (giallo) per quando il sistema sta
 * tentando di re-inviare un messaggio fallito (rete persa su iPhone Safari). */
.cr-msg-pending .cr-bubble {
    opacity: 0.65;
}
.cr-msg-retry .cr-bubble {
    background: #fef3c7 !important;
    color: #78350f !important;
    border: 1px solid #fde047 !important;
    position: relative;
}
.cr-msg-retry .cr-bubble::after {
    content: '⏳ riprovo…';
    display: block;
    font-size: 10px;
    margin-top: 4px;
    opacity: .7;
    font-style: italic;
}
.cr-msg-failed .cr-bubble {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
    cursor: pointer;
    position: relative;
}
.cr-msg-failed .cr-bubble::after {
    content: '⚠ Tocca per riprovare';
    display: block;
    font-size: 10.5px;
    margin-top: 4px;
    font-weight: 700;
    text-decoration: underline;
}

/* Composer */
.cr-composer {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: #fff;
    border-top: 1px solid #efe4f7;
    align-items: flex-end;
}
.cr-composer textarea {
    flex: 1;
    border: 1px solid #d8c8e8;
    border-radius: 22px;
    padding: 10px 14px;
    font-size: 15px;
    font-family: inherit;
    resize: none;
    outline: none;
    max-height: 120px;
    background: #faf6fd;
}
.cr-composer textarea:focus {
    border-color: #8b5cf6;
    background: #fff;
}
.cr-composer textarea:disabled {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}
.cr-composer button {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #6b21a8, #8b5cf6);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(107, 33, 168, 0.30);
}
.cr-composer button:disabled {
    background: #d1d5db;
    box-shadow: none;
    cursor: not-allowed;
}
.cr-composer button svg { width: 20px; height: 20px; }

/* Override Android testo grande (accessibility): se l'utente ha font-scale alto,
   il composer rischia di occupare metà schermo e nascondere i messaggi.
   Forziamo dimensioni leggibili ma compatte. */
.cr-composer textarea { font-size: 16px !important; line-height: 1.4 !important; }
.cr-composer button { width: 44px !important; height: 44px !important; min-width: 44px; }
/* Safe-area-inset per iPhone con notch (e Android con navigation bar) */
.cr-composer { padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; }

/* ════════════════════════════════════════════════════════════════════════
   Iubenda nascosto in chat reale: fallback compatibile con browser senza
   :has() (Chrome Android <105, Samsung Internet vecchi). Usa classe sul
   body aggiunta via JS in chat_reale.php.
   ════════════════════════════════════════════════════════════════════════ */
body.cr-active .iubenda-tp-btn,
body.cr-active [class*="iubenda-cs-"][class*="floating"],
body.cr-active [class*="iubenda-tp-"],
body.cr-active [class*="iubenda-pri-"],
body.cr-active [class^="_iub"],
body.cr-active .iub-cs-button,
body.cr-active .iub-z-bottom-right,
body.cr-active .iub-z-top-right,
body.cr-active [id^="iubenda-"],
body.cr-active iframe[src*="iubenda"],
body.cr-active iframe[title*="iubenda" i] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Bottone chiudi consulto (sticky bottom) — DEPRECATO, mantenuto per il lato cliente */
.cr-close-btn {
    position: fixed;
    bottom: 78px;
    right: 14px;
    background: #fff;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.20);
    z-index: 51;
}
.cr-close-btn:hover { background: #fef2f2; }

/* ── Kebab menu nell'header chat (sostituisce il vecchio cr-close-btn) ── */
.cr-top { position: relative; } /* per il dropdown absolute */
.cr-top-menu {
    background: transparent;
    border: 0;
    padding: 8px;
    margin-left: 4px;
    cursor: pointer;
    color: #6b21a8;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background .15s;
}
.cr-top-menu:hover, .cr-top-menu:active { background: #f5edfa; }
.cr-top-menu-drop {
    position: absolute;
    top: calc(100% + 4px);
    right: 8px;
    background: #fff;
    border: 1px solid #efe4f7;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(31, 18, 53, 0.18);
    z-index: 200;
    min-width: 180px;
    overflow: hidden;
    animation: crMenuIn .14s ease;
}
@keyframes crMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cr-top-menu-item {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 13px 16px;
    text-align: left;
    color: #1f1235;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.cr-top-menu-item:hover { background: #faf5ff; }
.cr-top-menu-item.is-danger { color: #dc2626; }
.cr-top-menu-item.is-danger:hover { background: #fef2f2; }

/* ── Dialog di conferma (custom, no browser confirm) ── */
.cr-confirm[hidden] { display: none !important; }
.cr-confirm {
    position: fixed;
    inset: 0;
    background: rgba(31, 18, 53, .55);
    display: grid;
    place-items: center;
    z-index: 300;
    padding: 20px;
    animation: crConfirmIn .16s ease;
}
@keyframes crConfirmIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cr-confirm-box {
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px 18px;
    width: 100%;
    max-width: 340px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    animation: crConfirmBoxIn .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes crConfirmBoxIn {
    from { opacity: 0; transform: scale(.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.cr-confirm-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 800;
    color: #1f1235;
}
.cr-confirm-text {
    margin: 0 0 18px;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.45;
}
.cr-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.cr-confirm-no, .cr-confirm-yes {
    border: 0;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
}
.cr-confirm-no  { background: #f3f4f6; color: #374151; }
.cr-confirm-no:hover  { background: #e5e7eb; }
.cr-confirm-yes { background: #dc2626; color: #fff; }
.cr-confirm-yes:hover { background: #b91c1c; }

/* ── Toast notifiche (feedback immediato dopo azioni) ── */
.cr-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    z-index: 400;
    animation: crToastIn .25s ease;
    max-width: 90vw;
    text-align: center;
}
.cr-toast.is-ok    { background: #059669; }
.cr-toast.is-warn  { background: #d97706; }
.cr-toast.is-err   { background: #dc2626; }
@keyframes crToastIn {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ════════════════════════════════════════════════════════════
   CHIAMATE AUDIO (M3 cliente)
   ──────────────────────────────────────────────────────────── */

/* Pulsante telefono nella topbar chat */
.cr-call-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(22, 163, 74, .35);
    transition: transform .15s ease, box-shadow .15s ease;
    margin-right: 6px;
}
.cr-call-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(22, 163, 74, .5);
}
.cr-call-btn:active { transform: scale(.96); }
.cr-call-btn:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    box-shadow: none;
}
.cr-call-btn svg { width: 18px; height: 18px; }

/* Container topbar action: contiene phone btn + meter timer/cost chat */
.cr-top-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ─── Overlay generico (pre-call, calling, in-call) ─── */
.cl-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 32, .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 32px 24px env(safe-area-inset-bottom, 32px);
    color: #fff;
    animation: clOverlayIn .25s ease;
}
@keyframes clOverlayIn {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* Pre-call: dialog modale (più piccolo, non full-screen) */
.cl-precall {
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 32, .8);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    animation: clOverlayIn .2s ease;
}
.cl-precall-card {
    background: #fff;
    border-radius: 24px;
    max-width: 420px;
    width: 100%;
    padding: 28px 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
    color: #1f1235;
    text-align: center;
    animation: clCardIn .3s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes clCardIn {
    from { opacity: 0; transform: translateY(20px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cl-precall-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    margin: 0 auto 14px;
    object-fit: cover;
    border: 3px solid #f5e6c8;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}
.cl-precall-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px;
    color: #1f1235;
}
.cl-precall-sub {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 20px;
}
.cl-precall-info {
    background: #fff7e6;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 20px;
    text-align: left;
    font-size: 13px;
    line-height: 1.5;
    color: #4b3a16;
}
.cl-precall-info b { color: #1f1235; }
.cl-precall-info-row {
    display: flex;
    justify-content: space-between;
    margin: 2px 0;
}
.cl-mic-test {
    background: #f1f5f9;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 18px;
    text-align: center;
}
.cl-mic-test-label {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    font-weight: 600;
}
.cl-vu-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
    margin-top: 6px;
    position: relative;
}
.cl-vu-fill {
    height: 100%;
    background: linear-gradient(90deg, #16a34a, #84cc16, #facc15, #f97316);
    width: 0%;
    transition: width .08s linear;
    border-radius: 99px;
}
.cl-mic-test-btn {
    background: #6b21a8;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 8px;
}
.cl-mic-test-btn:disabled { opacity: .5; cursor: default; }
.cl-mic-error {
    color: #dc2626;
    font-size: 12px;
    margin-top: 6px;
}
.cl-precall-actions {
    display: flex;
    gap: 10px;
}
.cl-btn {
    flex: 1;
    padding: 14px 18px;
    border-radius: 99px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.cl-btn:active { transform: scale(.97); }
.cl-btn-secondary {
    background: #f1f5f9;
    color: #475569;
}
.cl-btn-primary {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(22, 163, 74, .4);
}
.cl-btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, .4);
}
.cl-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

/* ─── Calling/In-call: full-screen ─── */
.cl-overlay-top { width: 100%; text-align: center; }
.cl-overlay-status {
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
    margin-top: 16px;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-weight: 600;
}
.cl-overlay-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
}
.cl-avatar-big {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, .2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    margin-bottom: 24px;
}
.cl-avatar-big.is-pulsing {
    animation: clPulse 1.4s ease-in-out infinite;
}
@keyframes clPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, .55), 0 12px 40px rgba(0,0,0,.5); }
    50%      { box-shadow: 0 0 0 22px rgba(168, 85, 247, 0), 0 12px 40px rgba(0,0,0,.5); }
}
.cl-name {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 4px;
    text-align: center;
}
.cl-tagline {
    font-size: 14px;
    color: rgba(255, 255, 255, .65);
    margin: 0 0 32px;
    text-align: center;
}

/* Timer + costo durante chiamata */
.cl-timer {
    font-size: 56px;
    font-weight: 200;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
    margin: 0;
    color: #fff;
}
.cl-cost {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.cl-saldo {
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    margin-top: 14px;
    font-variant-numeric: tabular-nums;
}
.cl-warning {
    background: #b91c1c;
    color: #fff;
    padding: 10px 18px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 700;
    margin-top: 18px;
    animation: clBlink 1s ease-in-out infinite;
}
@keyframes clBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

/* Countdown squillo (vecchio stile small — kept for retrocompat) */
.cl-countdown {
    font-size: 14px;
    color: rgba(255, 255, 255, .55);
    margin-top: 18px;
    font-variant-numeric: tabular-nums;
}

/* Countdown squillo BIG (visibile prominente al cliente) */
.cl-countdown-big {
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    margin: 28px 0 6px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.cl-countdown-label {
    margin: 0 0 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, .65);
    text-transform: lowercase;
    letter-spacing: 0.04em;
}

/* Action bar bottom: bottoni mute + end */
.cl-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding-bottom: 12px;
}
.cl-action-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease;
}
.cl-action-btn:active { transform: scale(.92); }
.cl-action-btn svg { width: 26px; height: 26px; }
.cl-action-btn.is-mute {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(10px);
}
.cl-action-btn.is-mute.is-on {
    background: #f59e0b;
}
.cl-action-btn.is-speaker {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(10px);
}
.cl-action-btn.is-end {
    width: 76px;
    height: 76px;
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    box-shadow: 0 8px 24px rgba(239, 68, 68, .55);
}
.cl-action-label {
    font-size: 11px;
    color: rgba(255, 255, 255, .6);
    text-align: center;
    margin-top: 6px;
    font-weight: 600;
    letter-spacing: .3px;
}
.cl-action-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .cl-avatar-big { width: 120px; height: 120px; margin-bottom: 20px; }
    .cl-name { font-size: 24px; }
    .cl-timer { font-size: 48px; }
    .cl-action-btn { width: 56px; height: 56px; }
    .cl-action-btn.is-end { width: 68px; height: 68px; }
}

/* ════════════════════════════════════════════════════════════
   KARMICA — brand override (body.theme-karmica)
   Sfondo bianco pulito + magenta/viola del logo karmica.
   Stati cartomanti (online/busy/offline → green/yellow/red) restano
   identici al tema base per coerenza tra i due siti — il cliente vede
   gli stessi semafori a colpo d'occhio.
   La chat, il flow chiamata e tutto ciò che è dentro /chat-reale e
   /chiama* eredita questi colori automaticamente via CSS variables.
   ════════════════════════════════════════════════════════════ */
body.theme-karmica {
    /* Font karmica.it: Google Sans (proprietario, fallback automatico browser)
       + Roboto come secondo fallback. Sia body che display (titoli) usano lo
       stesso font: karmica.it non ha serif → niente Playfair su questo brand. */
    --f-body:    "Google Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --f-display: "Google Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Override variabili tema: il resto del sito le legge automaticamente */
    --c-bg:           #ffffff;
    --c-bg-elev:      #ffffff;
    --c-line:         #f0e2eb;

    --c-primary:      #d63384;          /* magenta logo karmica */
    --c-primary-700:  #a02766;
    --c-primary-300:  #f0a8cf;
    --c-primary-50:   #fce7f3;

    --c-rose:         #6b21a8;          /* viola scuro karmica (gradient secondary) */
    --c-rose-50:      #f5edff;

    --c-accent:       #6b21a8;          /* CTA / accenti decorativi → viola */
    --c-accent-700:   #4c1582;
    --c-accent-50:    #f5edff;

    --sh-glow:        0 0 0 4px rgba(214, 51, 132, 0.14);

    /* Sfondo: niente più radial gradient mistico, white solid + sottilissimo
       wash magenta in alto per dare un minimo di carattere senza rompere
       l'estetica "pulita e semplice" richiesta. */
    background:
        radial-gradient(ellipse 100% 40% at 50% 0%, rgba(214, 51, 132, 0.045), transparent 70%),
        #ffffff !important;
    background-attachment: scroll;
}

/* Hero "accent" gradient (titolo H1) — mantiene effetto a sfumatura ma in palette karmica */
body.theme-karmica .hero-title .accent {
    background: linear-gradient(120deg, #d63384, #6b21a8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* CTA primaria — gradient magenta→viola */
body.theme-karmica .btn-primary {
    background: linear-gradient(135deg, #d63384 0%, #6b21a8 100%);
    box-shadow: 0 8px 22px rgba(214, 51, 132, 0.32);
}
body.theme-karmica .btn-primary:hover {
    box-shadow: 0 10px 28px rgba(214, 51, 132, 0.42);
}
/* CTA "Chiama" → mantiene arancio caldo (accent universale per audio) */

/* Pill "online ora" nella hero (eyebrow) — verde resta verde,
   ma il pulsino ha un alone magenta delicato */
body.theme-karmica .hero-eyebrow .dot {
    box-shadow: 0 0 0 3px rgba(214, 51, 132, 0.12);
}

/* Topbar: white minimale invece del gradient scuro mistico
   — coerente con la richiesta "sfondo bianco e semplice". */
body.theme-karmica .topbar {
    background: #ffffff;
    border-bottom: 1px solid #f0e2eb;
    box-shadow: 0 2px 8px rgba(214, 51, 132, 0.04);
}
body.theme-karmica .topbar .btn-ghost {
    background: rgba(214, 51, 132, 0.06);
    color: #6b21a8;
    border-color: rgba(214, 51, 132, 0.18);
}
body.theme-karmica .topbar .btn-ghost:hover {
    background: rgba(214, 51, 132, 0.10);
    border-color: rgba(214, 51, 132, 0.28);
}
body.theme-karmica .topbar-wallet {
    background: rgba(214, 51, 132, 0.06);
    border-color: rgba(214, 51, 132, 0.20);
    color: #1f1235;
    box-shadow: none;
}
body.theme-karmica .topbar-wallet:hover {
    background: rgba(214, 51, 132, 0.10);
    border-color: rgba(214, 51, 132, 0.30);
}
body.theme-karmica .topbar-wallet-amount {
    color: #6b21a8;
}
body.theme-karmica .topbar-profile {
    background: rgba(214, 51, 132, 0.06);
    border-color: rgba(214, 51, 132, 0.20);
    color: #6b21a8;
}
body.theme-karmica .topbar-profile:hover {
    background: rgba(214, 51, 132, 0.10);
    border-color: rgba(214, 51, 132, 0.30);
}
body.theme-karmica .brand {
    color: #d63384;
}
/* Logo karmica un po' più alto: il marchio è orizzontale, beneficia di più altezza */
body.theme-karmica .brand-logo-img { height: 42px; }
@media (max-width: 480px) {
    body.theme-karmica .brand-logo-img { height: 34px; }
}

/* Hero "trust strip" — i numeri restano leggibili su bianco */
body.theme-karmica .hero-trust strong { color: #1f1235; }

/* Sticky bottom CTA — sfondo bianco con bordo magenta soffuso */
body.theme-karmica .bottom-cta {
    background: #ffffff;
    border-top: 1px solid #f0e2eb;
    box-shadow: 0 -4px 16px rgba(214, 51, 132, 0.06);
}

/* Footer karmica: sfondo neutro chiaro (vs crema di cartomanti.ai). Eredita
   il full-width bleed dalla regola base .footer (width:100vw + margin trick). */
body.theme-karmica .footer {
    background: #fafafa;
    border-top: 1px solid #f0e2eb;
}

/* ── Status text ("Disponibile"/"Occupata"/"Non disponibile") sulla riga ──
   Su cartomanti.ai il dot sull'avatar basta. Su karmica vogliamo l'etichetta
   leggibile per leggibilità extra (richiesta utente: "un po' diverso da cartomanti").
   Stessi colori semantici (verde/giallo/grigio) per mantenere "uguale nei colori". */
.cmr-info-status { display: none; }
body.theme-karmica .cmr-info-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 4px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1f1235;
}
body.theme-karmica .cmr-info-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
body.theme-karmica .cmr-info-status-dot.is-on {
    background: #1f8f3a;
    box-shadow: 0 0 0 3px rgba(31, 143, 58, 0.18);
    animation: pulse 2s ease-in-out infinite;
}
body.theme-karmica .cmr-info-status-dot.is-busy {
    background: #d48806;
    box-shadow: 0 0 0 3px rgba(212, 136, 6, 0.18);
}
body.theme-karmica .cmr-info-status-dot.is-off {
    background: #9ca3af;
}

/* ── CTA su karmica: rettangolari grandi con prezzo dentro ──
   Layout che ricalca la karmica.it esistente: due bottoni full-width sotto la
   card (CHIAMA verde + INIZIA CHAT arancio), border-radius dolce non a pillola,
   testo in 2 righe (label + prezzo "X,XX€/MIN"). Il prezzo viene da data-price
   sull'<a>, popolato server-side; nessun JS necessario per il primo render. */
body.theme-karmica .cmr-cta {
    border-radius: 12px;
    padding: 11px 8px 9px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
body.theme-karmica .cmr-cta::after {
    content: attr(data-price);
    font-size: 11px;
    font-weight: 700;
    opacity: 0.95;
    letter-spacing: 0.04em;
}
body.theme-karmica .cmr-cta-chat {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.28);
}
body.theme-karmica .cmr-cta-chat:hover {
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.42);
}
body.theme-karmica .cmr-cta-call {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.28);
}
body.theme-karmica .cmr-cta-call:hover {
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.42);
}

/* ── Card layout karmica: avatar+info SOPRA, due CTA full-width SOTTO ──
   Su cartomanti.ai resta horizontal (avatar | info | CTA stacked); su karmica
   passiamo a vertical wrap così i bottoni grandi si distribuiscono in fondo. */
body.theme-karmica .cmr-row {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 16px;
    border-radius: 18px;
    border-color: rgba(214, 51, 132, 0.10);
    box-shadow: 0 2px 14px rgba(214, 51, 132, 0.06);
}
body.theme-karmica .cmr-actions {
    flex-direction: row;
    flex-basis: 100%;
    width: 100%;
    align-items: stretch;
    gap: 8px;
    margin-top: 6px;
}
body.theme-karmica .cmr-actions > .cmr-cta { flex: 1; }
/* La pillola di stato "Occupata"/"Non disponibile" copre tutta la riga sotto.
   Stile karmica.it: gradient magenta→viola, due righe (label maiuscolo + sublabel),
   come la card "OCCUPATO / RIPROVA PIÙ TARDI" del sito esistente. */
body.theme-karmica .cmr-cta-state {
    width: 100%;
    padding: 12px 8px 10px;
    border-radius: 12px;
    font-size: 0;                         /* nasconde il textContent legacy */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body.theme-karmica .cmr-row.is-busy .cmr-cta-state {
    background: linear-gradient(135deg, #ec4899 0%, #d63384 100%);
    box-shadow: 0 4px 12px rgba(214, 51, 132, 0.32);
}
body.theme-karmica .cmr-row.is-busy .cmr-cta-state::before {
    content: '⊘ Occupato';
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
}
body.theme-karmica .cmr-row.is-busy .cmr-cta-state::after {
    content: 'Riprova più tardi';
    font-size: 10px;
    font-weight: 700;
    opacity: 0.95;
    letter-spacing: 0.05em;
    line-height: 1.1;
}

/* Avatar leggermente più grande su karmica per ricalcare il look pieno della card */
body.theme-karmica .cmr-avatar { width: 72px; height: 72px; }
body.theme-karmica .cmr-avatar { border: 3px solid #d63384; box-sizing: content-box; }

/* Status orange su busy (matching karmica.it: arancio acceso) */
body.theme-karmica .cmr-info-status-dot.is-busy {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.20);
}
body.theme-karmica .cmr-status-dot.is-busy { background: #f59e0b; }

/* Nascondiamo i price-chip nell'info: il prezzo ora vive dentro ai bottoni */
body.theme-karmica .cmr-price { display: none; }

/* ── Topbar karmica: bianco con accenti magenta ──
   Su richiesta: il banner in alto col logo resta bianco (l'hero sotto è scuro
   con costellazioni — quello tiene il "carattere" del brand karmica). Il logo
   karmica originale è scuro, su bianco si legge perfettamente.
   Full-width come l'hero: margin-trick per uscire dal container .app. */
body.theme-karmica .topbar {
    background: #ffffff;
    border-bottom: 1px solid #f0e2eb;
    box-shadow: 0 2px 8px rgba(214, 51, 132, 0.04);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
/* Pulsanti topbar karmica: fucsia pieno + testo bianco (stile "SCARICA APP"
   del karmica.it esistente). Vale per FAQ/Accedi (guest) e wallet/profilo/esci
   (loggato). Effetto: bottoni-CTA molto visibili sul bianco del topbar. */
body.theme-karmica .topbar .btn-ghost {
    background: #d63384;
    color: #fff;
    border-color: #d63384;
    font-weight: 800;
    letter-spacing: 0.02em;
}
body.theme-karmica .topbar .btn-ghost:hover {
    background: #c02672;
    border-color: #c02672;
    color: #fff;
}
body.theme-karmica .topbar-wallet {
    background: #d63384;
    border-color: #d63384;
    color: #fff;
    box-shadow: 0 2px 8px rgba(214, 51, 132, 0.30);
    padding: 7px 16px;             /* meno padding-left, niente più moneta da contenere */
    gap: 0;
}
body.theme-karmica .topbar-wallet:hover {
    background: #c02672;
    border-color: #c02672;
}
/* Karmica: il coin €  (prefix HTML) è visibile, ma cambiato lo stile.
   Su Cartomanti.AI è una moneta dorata (gradient gold). Su Karmica Diego ha
   chiesto un € bianco minimale, niente moneta — coerente con la grafica più
   pulita del brand. Override: niente gradient, niente cerchio, € bianco. */
body.theme-karmica .topbar-wallet-coin {
    background: transparent !important;
    color: #fff !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-right: 2px;
}
/* Importo più grande e in evidenza (era 14px, ora 16-17px e bold maggiore) */
body.theme-karmica .topbar-wallet-amount {
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.01em;
}
/* Karmica '€' suffix rimosso (idem fix sopra). Il prefisso HTML è già nel template. */
body.theme-karmica .topbar-profile {
    background: #d63384;
    border-color: #d63384;
    color: #fff;
}
body.theme-karmica .topbar-profile:hover {
    background: #c02672;
    border-color: #c02672;
}
body.theme-karmica .brand { color: #d63384; }

/* ── Hero karmica: copia diretta del banner karmica.it esistente ──
   Background: solid #453752 (purple scuro) + pattern costellazioni "sf-2.png"
   (asset preso pari pari dalla karmica.it esistente). Banner compatto: solo
   titolo + sottotitolo. Tutto il resto (descrizione, trust strip) sta SOTTO
   al banner come da richiesta utente.

   Full-width bleed: il banner deve arrivare ai bordi del viewport anche su
   desktop, dove .app ha max-width 960/1140px. Trick classico: width:100vw +
   margin negativi di compensazione. Il contenuto interno resta naturalmente
   centrato grazie a text-align:center + max-width sul subtitle. */
body.theme-karmica .hero {
    background-color: #453752;
    background-image: url('/assets/img/brands/karmica/sf-2.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    color: #fff;
    padding: 32px 20px 44px;     /* titolo più in alto: meno spazio sopra */
    margin-bottom: 0;
    text-align: center;
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
/* Niente scroll orizzontale a causa del 100vw che include la scrollbar */
body.theme-karmica { overflow-x: hidden; }
/* Su karmica niente sticky bottom CTA → niente bisogno del padding-bottom 80px */
body.theme-karmica .app { padding-bottom: 24px; }
/* Layer di sfumatura per garantire leggibilità del testo sopra il pattern */
body.theme-karmica .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(69, 55, 82, 0.55) 0%, rgba(69, 55, 82, 0.78) 100%);
    pointer-events: none;
    z-index: 0;
    display: block;
}
body.theme-karmica .hero > * { position: relative; z-index: 1; }

/* Eyebrow ("X online ora") leggermente translucido su sfondo scuro */
body.theme-karmica .hero-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.20);
}

/* TITOLO: gradient magenta→corallo identico a karmica.it (.text-purple-gradient).
   Sottotitolo bianco. STESSA grandezza per entrambi (richiesta utente). */
body.theme-karmica .hero-title {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0 0 10px;
}
body.theme-karmica .hero-title,
body.theme-karmica .hero-title .accent {
    background: linear-gradient(-135deg, #d33c94 57%, #f8525e 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: normal;
}
body.theme-karmica .hero-sub {
    color: rgba(255, 255, 255, 0.95);
    font-size: clamp(28px, 5vw, 44px);    /* stessa misura del titolo */
    font-weight: 500;                      /* peso minore per gerarchia */
    line-height: 1.2;
    max-width: 760px;
    margin: 0 auto;
}

/* Trust strip + CTA hero NASCOSTI su karmica: il banner è solo titolo+pill */
body.theme-karmica .hero-trust { display: none; }
body.theme-karmica .hero-eyebrow { display: none; }
body.theme-karmica .hero-cta-row { display: none; }

/* Pill "X cartomanti in linea ora" — sotto il sottotitolo, gradient pieno */
body.theme-karmica .km-online-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 11px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ec4899 0%, #d33c94 100%);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(214, 51, 132, 0.40);
    transition: transform .15s ease, box-shadow .15s ease;
}
body.theme-karmica .km-online-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(214, 51, 132, 0.50);
}
body.theme-karmica .km-online-pill .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.30);
    animation: pulse 2s ease-in-out infinite;
}
body.theme-karmica .km-online-pill strong { font-weight: 900; }

/* "Valutata: 4,9/5" + 5 stelline (4 piene + 1 mezza) come karmica.it esistente.
   Stelline gold #fbbf24 a piena, l'ultima ha il riempimento al 50% via ::before
   sovrapposto (effetto half-star senza immagini né font icon). */
body.theme-karmica .km-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.40);
}
body.theme-karmica .km-rating-label strong { font-weight: 800; }
body.theme-karmica .km-stars {
    display: inline-flex;
    gap: 2px;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 1px;
    color: #fbbf24;
}
body.theme-karmica .km-stars .star.is-half {
    position: relative;
    color: rgba(255, 255, 255, 0.30);   /* parte vuota dell'ultima stella */
}
body.theme-karmica .km-stars .star.is-half::before {
    content: '★';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
    color: #fbbf24;                       /* parte piena (50% sx) */
}

/* Trust pills sotto il rating: 🔒 Pagamenti sicuri · 🛡 Anonimo · 🕒 7gg/7 · 🚫 No abbonamenti.
   Inline list, niente bullet, separati da punto centrato su mobile e wrap pulito. */
body.theme-karmica .km-trust {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.30);
}
body.theme-karmica .km-trust li {
    white-space: nowrap;
}
@media (min-width: 768px) {
    body.theme-karmica .km-trust { font-size: 14px; gap: 8px 22px; }
}

/* Footer Trustpilot link: piccola CTA per spingere recensioni dai clienti
   soddisfatti. Niente widget vero finché non ci sono abbastanza reviews. */
.footer-trustpilot {
    margin-bottom: 14px;
    padding: 10px 16px;
    border: 1px solid #f0e2eb;
    border-radius: 999px;
    display: inline-block;
}
.footer-trustpilot a {
    color: #1f1235;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color .15s ease;
}
.footer-trustpilot a strong {
    color: #d63384;
    font-weight: 700;
}
.footer-trustpilot a:hover { color: #d63384; }
.footer-trustpilot a:hover strong { text-decoration: underline; }

@media (min-width: 768px) {
    body.theme-karmica .hero {
        padding: 48px 40px 60px;     /* desktop: titolo alto anche qui */
    }
}

/* ── Sezione "Chiedilo agli Esperti" (intro testuale dopo la lista) ──
   Replica della sezione omonima su karmica.it: eyebrow grigio + titolo
   magenta-gradient + paragrafo con logo Karmica inline. */
.km-intro {
    padding: 48px 20px 32px;
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
}
.km-intro-eyebrow {
    font-size: 16px;
    font-weight: 500;
    color: #7e7282;
    margin: 0 0 14px;
    line-height: 1.3;
}
.km-intro h2 {
    font-size: clamp(34px, 6vw, 52px);          /* allineato a hero/FAQ titles karmica */
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 24px;
    background: linear-gradient(-135deg, #d33c94 57%, #f8525e 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -0.01em;
}
.km-intro p {
    font-size: 16px;
    line-height: 1.65;
    color: #6e6478;
    margin: 0 0 16px;
}
.km-intro p strong { color: #1f1235; font-weight: 700; }
.km-intro-lead { font-size: 18px !important; margin-bottom: 24px !important; }
.km-intro-logo {
    height: 22px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    margin: -3px 4px 0 0;
}
@media (min-width: 768px) {
    .km-intro { padding: 72px 24px 48px; }
    .km-intro-eyebrow { font-size: 18px; }
    .km-intro p { font-size: 17px; }
    .km-intro-lead { font-size: 20px !important; }
    .km-intro-logo { height: 26px; }
}

/* ── FAQ stile karmica.it: blocchi aperti in 2 colonne, no accordion ──
   Replica della sezione "Domande e Risposte" del karmica.it esistente.
   Titolo magenta-corallo gradient centrato, sottotitolo in grigio,
   griglia 2 colonne con Q (h3 in dark) + A (p in grigio). */
.km-faq-section {
    padding: 36px 20px 56px;
}
.km-faq-title {
    font-size: clamp(34px, 6vw, 52px);          /* coerente con hero/intro titles karmica */
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-align: center;
    margin: 0 0 14px;
    background: linear-gradient(-135deg, #d33c94 57%, #f8525e 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.km-faq-sub {
    text-align: center;
    color: #7e7282;
    font-size: 15px;
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto 36px;
}
.km-faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px 36px;
}
.km-faq-item h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
    color: #1f1235;
    line-height: 1.3;
}
.km-faq-item p {
    margin: 0;
    color: #6e6478;
    font-size: 14.5px;
    line-height: 1.65;
}
.km-faq-item p strong { color: #1f1235; font-weight: 700; }

@media (min-width: 768px) {
    .km-faq-section { padding: 64px 24px 80px; }
    .km-faq-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px 48px;
    }
    .km-faq-item h3 { font-size: 17px; }
    .km-faq-item p  { font-size: 15px; }
}

/* ── Banner Telegram (alternativa al sito) — stile karmica.it download-6 ──
   Sezione full-width con sfondo foresta + overlay scuro per leggibilità.
   Layout 2 colonne su desktop (testo + card CTA Telegram), stack su mobile.
   La card Telegram è la stessa di karmica.it: pillola scura con animazione
   "pulse ring" e link al bot @cartomanziachatbot. */
.km-telegram {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 56px 20px;
    background: url('/assets/img/brands/karmica/forest-bg.jpg') center/cover no-repeat;
    color: #fff;
    overflow: hidden;
}
.km-telegram-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(31, 18, 53, 0.72) 0%, rgba(69, 55, 82, 0.55) 60%, rgba(31, 18, 53, 0.45) 100%);
    z-index: 0;
}
.km-telegram-inner {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}
.km-telegram-text { padding: 0 4px; }
.km-telegram-eyebrow {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-shadow: 1px 2px 3px rgba(0,0,0,0.55);
    margin: 0 0 10px;
    opacity: 0.95;
}
.km-telegram-title {
    font-size: clamp(34px, 6vw, 52px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.55);
}
.km-telegram-desc {
    font-size: 17px;
    line-height: 1.55;
    margin: 0;
    text-shadow: 1px 1px rgba(0,0,0,0.40);
    max-width: 540px;
}

/* Card Telegram CTA */
.km-telegram-card {
    background: rgba(31, 18, 53, 0.70);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 22px 22px 18px;
    text-align: center;
    color: #fff;
}
.km-telegram-headline {
    font-size: 16px;
    line-height: 1.45;
    margin: 0 0 14px;
}
.km-telegram-headline strong { color: #38bdf8; font-weight: 700; }
.km-telegram-promo-wrap { margin-bottom: 10px; }
.km-telegram-promo {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.34);
}
.km-telegram-cta {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    background: #fff;
    color: #1e3a8a;
    border-radius: 999px;
    padding: 11px 14px 11px 18px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
    margin-top: 4px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.km-telegram-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
}
.km-telegram-cta-main {
    flex: 1;
    align-self: center;
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #1f1235;
}
.km-telegram-cta-arrow {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    color: #fff;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.04em;
    align-self: center;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .km-telegram { padding: 80px 32px; }
    .km-telegram-inner {
        grid-template-columns: 1.1fr 1fr;
        gap: 48px;
    }
    .km-telegram-eyebrow { font-size: 16px; }
    .km-telegram-headline { font-size: 17px; }
    .km-telegram-cta-main { font-size: 13px; }
}

/* ── Modale Ricarica credito su karmica ──
   Le badge "+5€ in regalo", "Consigliato", "Best value" sono pillole su sfondo
   viola scuro (var(--c-accent) → #6b21a8 in tema karmica) ma il colore testo
   default era #2a1f3d (nero su viola scuro = illeggibile). Forziamo bianco. */
body.theme-karmica .pkg-badge {
    background: linear-gradient(135deg, #6b21a8 0%, #4c1582 100%);
    color: #fff;
    box-shadow: 0 4px 10px rgba(107, 33, 168, 0.30);
}
/* Card "consigliato" / selezionata: bordo magenta + fill rosa chiaro coerente */
body.theme-karmica .pkg.is-selected {
    border-color: #d63384;
    background: #fce7f3;
}
/* Prezzo card in viola karmica + bonus testo magenta */
body.theme-karmica .pkg-price { color: #6b21a8; }
body.theme-karmica .pkg-bonus strong { color: #d63384; }

/* ════════════════════════════════════════════════════════════
   DESKTOP — adattamento per schermi ≥ 768px
   ────────────────────────────────────────────────────────────
   Il sito è mobile-first (--maxw: 480px → colonna stretta centrata).
   Su desktop la colonna stretta lascia un mare di vuoto ai lati ed è
   anti-ergonomica. Allarghiamo container + facciamo griglia delle
   liste cartomanti, mantenendo invariate le pagine di chat / chiamata
   (.cr-shell e .cl-shell) che lavorano meglio strette.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    /* Container principale — più largo, con padding laterale.
       Non tocchiamo .cr-shell e .cl-shell che hanno layout proprio. */
    .app {
        max-width: 960px;
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 40px;       /* niente più sticky bottom-cta da bypassare */
    }
    .topbar-inner {
        max-width: 960px;
    }

    /* Sezioni con padding interno più ampio per "respirare". */
    .section { padding: 36px 8px; }
    .section-tight { padding: 24px 8px; }

    /* HERO un po' più imponente — il claim emoziona, non vogliamo
       che si perda nel vuoto. */
    .hero { padding: 64px 20px 48px; }
    .hero-title { font-size: clamp(38px, 5vw, 56px); margin-bottom: 16px; }
    .hero-sub   { font-size: 18px; max-width: 580px; }
    .hero-cta-row {
        flex-direction: row;
        justify-content: center;
        gap: 14px;
        padding: 0;
    }
    .hero-cta-row .btn { min-width: 240px; }

    /* CARTOMANTI LIST: griglia 2 colonne su tablet/laptop.
       I .cmr-row restano "horizontal cards" (avatar + info + CTA),
       solo distribuiti su due colonne anziché stack verticale. */
    .cmr-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* COME FUNZIONA: 3 step affiancati invece che impilati. */
    .steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
    .step { padding: 18px; }

    /* FAQ resta in colonna singola ma con max-width leggibile (~720px) per
       non costringere l'occhio a saltare riga troppo lontano. */
    .stack { max-width: 760px; margin: 0 auto; }

    /* Sticky bottom CTA: su desktop la gente clicca i CTA inline,
       il fixed in basso diventa solo rumore visivo. */
    .bottom-cta { display: none; }

    /* Footer più arioso. */
    .footer { padding: 32px 20px; }
}

@media (min-width: 1100px) {
    /* Schermo grande: container ancora più largo + 3 colonne cartomanti */
    .app           { max-width: 1140px; }
    .topbar-inner  { max-width: 1140px; }

    .cmr-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    /* Hero ancora più "presence" su 1440-1920 */
    .hero { padding: 80px 20px 56px; }
    .hero-title { font-size: clamp(42px, 4.5vw, 64px); }
}

/* Hover state più ricco solo su device con puntatore preciso (mouse).
   Su touch il :hover può "sticky-ttare" e dare effetti visivi indesiderati. */
@media (hover: hover) and (pointer: fine) {
    .cmr-row:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(107, 33, 168, 0.18);
    }
}

/* ════════════════════════════════════════════════════════════
   IUBENDA: nascondi il floating preferences button su chat/chiamata.
   Su queste due pagine occupa il bottom-right e copre il bottone "Invia"
   del composer chat (e i tasti di chiamata). Resta visibile su tutte le
   altre pagine (home, /profilo, /ricarica, ecc.) per rispettare il
   requisito GDPR: l'utente può sempre rivedere le preferenze cookie da
   qualsiasi pagina meno quelle "in sessione" di consulto.
   ════════════════════════════════════════════════════════════ */
/* Selettori coperti:
     .cr-shell    → chat_reale.php (chat scritta in corso)
     .cl-launchpad → chiama_reale.php (loading prima dell'overlay)
     #cl-root     → overlay call.js iniettato a runtime (cl-precall, cl-overlay,
                    cl-incoming) — qualsiasi sia la classe specifica.
   Selettori target (cosa nascondiamo):
     .iubenda-tp-btn         → bottone preferences fluttuante in basso a dx
     [class*="iubenda-cs-"][class*="floating"] → varianti floating del consent
     #iubenda-cs-banner      → banner consenso pieno schermo
     .iub-z-bottom-right     → contenitore generico Iubenda bottom-right
     [id^="iubenda-iframe"]  → eventuale iframe widget Iubenda */
/* In chat/chiamata nascondiamo il lucchetto Iubenda perché in bottom-right
   copre il pulsante "Invia" del composer. Selettori specifici (non aggressivi)
   per evitare di nascondere elementi non-Iubenda. */
/* Selettori Iubenda noti (varianti emerse fra versioni). Niente catch-all
   "[class*=iub]" perché matcherebbe falsi positivi. */
body:has(.cr-shell) .iubenda-tp-btn,
body:has(.cr-shell) [class*="iubenda-cs-"][class*="floating"],
body:has(.cr-shell) [class*="iubenda-tp-"],
body:has(.cr-shell) [class*="iubenda-pri-"],
body:has(.cr-shell) [class^="_iub"],
body:has(.cr-shell) .iub-cs-button,
body:has(.cr-shell) .iub-z-bottom-right,
body:has(.cr-shell) .iub-z-top-right,
body:has(.cr-shell) [id^="iubenda-"],
body:has(.cr-shell) iframe[src*="iubenda"],
body:has(.cr-shell) iframe[title*="iubenda" i],
body:has(.cl-launchpad) .iubenda-tp-btn,
body:has(.cl-launchpad) [class*="iubenda-cs-"][class*="floating"],
body:has(.cl-launchpad) [class*="iubenda-tp-"],
body:has(.cl-launchpad) [class*="iubenda-pri-"],
body:has(.cl-launchpad) [class^="_iub"],
body:has(.cl-launchpad) .iub-cs-button,
body:has(.cl-launchpad) .iub-z-bottom-right,
body:has(.cl-launchpad) .iub-z-top-right,
body:has(.cl-launchpad) [id^="iubenda-"],
body:has(.cl-launchpad) iframe[src*="iubenda"],
body:has(.cl-launchpad) iframe[title*="iubenda" i],
body:has(#cl-root) .iubenda-tp-btn,
body:has(#cl-root) [class*="iubenda-cs-"][class*="floating"],
body:has(#cl-root) [class*="iubenda-tp-"],
body:has(#cl-root) [class*="iubenda-pri-"],
body:has(#cl-root) [class^="_iub"],
body:has(#cl-root) .iub-cs-button,
body:has(#cl-root) .iub-z-bottom-right,
body:has(#cl-root) .iub-z-top-right,
body:has(#cl-root) [id^="iubenda-"],
body:has(#cl-root) iframe[src*="iubenda"],
body:has(#cl-root) iframe[title*="iubenda" i],
/* Area OPERATRICE (dashboard cartomante /area) — il lucchetto copre i tasti
   rispondi/rifiuta chiamata e il pulsante invia chat. Scope: .op-app è il
   container della dashboard, presente sia in lista chat che durante consulto. */
body:has(.op-app) .iubenda-tp-btn,
body:has(.op-app) [class*="iubenda-cs-"][class*="floating"],
body:has(.op-app) [class*="iubenda-tp-"],
body:has(.op-app) [class*="iubenda-pri-"],
body:has(.op-app) [class^="_iub"],
body:has(.op-app) .iub-cs-button,
body:has(.op-app) .iub-z-bottom-right,
body:has(.op-app) .iub-z-top-right,
body:has(.op-app) [id^="iubenda-"],
body:has(.op-app) iframe[src*="iubenda"],
body:has(.op-app) iframe[title*="iubenda" i],
/* Chat AI (incluso il tutorial-bot) — il lucchetto Iubenda copre il tasto
   Invia. Scope: .chat-screen è il container del template chat.php. Diego:
   "togli iubenda anche dalla prova di chat". */
body:has(.chat-screen) .iubenda-tp-btn,
body:has(.chat-screen) [class*="iubenda-cs-"][class*="floating"],
body:has(.chat-screen) [class*="iubenda-tp-"],
body:has(.chat-screen) [class*="iubenda-pri-"],
body:has(.chat-screen) [class^="_iub"],
body:has(.chat-screen) .iub-cs-button,
body:has(.chat-screen) .iub-z-bottom-right,
body:has(.chat-screen) .iub-z-top-right,
body:has(.chat-screen) [id^="iubenda-"],
body:has(.chat-screen) iframe[src*="iubenda"],
body:has(.chat-screen) iframe[title*="iubenda" i],
/* Profilo cliente (/profilo, area_cliente.php) — il lucchetto Iubenda
   copre i bottoni "Salva" / "Avvia test" / "Ricarica" sul lato destro
   in basso. Diego: "togli iubenda dal profilo utente". Scope: .acl-wrap
   è il container <main> del template area_cliente.php. */
body:has(.acl-wrap) .iubenda-tp-btn,
body:has(.acl-wrap) [class*="iubenda-cs-"][class*="floating"],
body:has(.acl-wrap) [class*="iubenda-tp-"],
body:has(.acl-wrap) [class*="iubenda-pri-"],
body:has(.acl-wrap) [class^="_iub"],
body:has(.acl-wrap) .iub-cs-button,
body:has(.acl-wrap) .iub-z-bottom-right,
body:has(.acl-wrap) .iub-z-top-right,
body:has(.acl-wrap) [id^="iubenda-"],
body:has(.acl-wrap) iframe[src*="iubenda"],
body:has(.acl-wrap) iframe[title*="iubenda" i] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   Stelle valutazione card cartomante (sotto "Cartomante verificata")
   Dorate, leggermente piccole. Carattere ★ Unicode — niente immagini.
   ════════════════════════════════════════════════════════════ */
.cmr-stars {
    margin: 2px 0 4px;
    font-size: 13px;
    line-height: 1;
    color: #fbbf24;             /* gold-400 */
    letter-spacing: 1px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
body.theme-karmica .cmr-stars {
    font-size: 14px;
    color: #f59e0b;             /* amber-500, leggermente più caldo per karmica */
    letter-spacing: 2px;
}
.cmr-stars-count {
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
    letter-spacing: 0;
}

/* ════════════════════════════════════════════════════════════
   Pulsante "Telegram" nel topbar (solo brand karmica): porta in
   anchor #telegram nella home dove c'è il banner. Stile
   azzurro Telegram con icona aerea, leggermente in evidenza.
   ════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }

/* Pulsanti chat-style nel topbar karmica: Q+ (ghost) + Telegram (azzurro) + WhatsApp (verde).
   Tutti e 3 con stessa altezza compatta. "Accedi" un filo più grande per gerarchia visiva. */
.topbar-nav .btn-ghost.btn-sm {
    /* Q+ e Accedi (entrambi btn-ghost btn-sm) */
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.2;
}
/* Accedi: pillola scura (stesso viola dell'hero karmica) con testo bianco.
   Visivamente coerente col branding scuro, più moderno della sottolineatura. */
.topbar-accedi {
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    font-weight: 700;
    color: #fff !important;
    background: #453752 !important;
    border-radius: 999px !important;
    border: 0 !important;
    text-decoration: none !important;
    transition: transform .15s, background .15s;
}
.topbar-accedi:hover {
    color: #fff !important;
    background: #2d2438 !important;
    transform: translateY(-1px);
}
/* Registrati: CTA principale, leggermente più grande e colorato (richiama codice BENVENUTO) */
.topbar-registrati {
    padding: 7px 14px !important;
    font-size: 13.5px !important;
    font-weight: 800;
    background: #d63384 !important;
    color: #fff !important;
    border-radius: 999px !important;
    border: 0 !important;
}
.topbar-registrati:hover { background: #b02670 !important; color: #fff !important; transform: translateY(-1px); }
@media (max-width: 480px) {
    /* Su mobile: Accedi solo testo piccolo, Registrati prominente */
    .topbar-accedi { padding: 4px 8px !important; font-size: 11px !important; }
    .topbar-registrati { padding: 6px 12px !important; font-size: 12.5px !important; }
}
/* Telegram: pillola azzurra (card) con etichetta. */
.topbar-telegram {
    color: #fff !important;
    font-weight: 700;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.2;
    border-radius: 999px;
    border: 0 !important;
    background: #0088cc !important;
    transition: transform .15s;
}
.topbar-telegram:hover { background: #006fa8 !important; color: #fff !important; transform: translateY(-1px); }
.topbar-telegram:focus-visible { outline: 3px solid #66bdff; outline-offset: 2px; }
.topbar-telegram svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════
   Banner COUPON BENVENUTO: bannerino oro accecante con shine animato.
   Posizionato sotto l'hero, click porta al paywall ricarica.
   ════════════════════════════════════════════════════════════════ */
.km-coupon-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Sovrapposto leggermente all'hero (margin-top negativo) per creare effetto
       "ribbon" che lega l'hero alla sezione bianca sotto. z-index alto. */
    margin: -28px auto 14px;
    position: relative;
    z-index: 5;
    max-width: 720px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #fde047 0%, #facc15 35%, #f59e0b 65%, #fde047 100%);
    background-size: 200% 200%;
    border: 2px solid #d97706;
    border-radius: 16px;
    color: #78350f;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45), inset 0 0 0 1px rgba(255,255,255,0.4);
    position: relative;
    overflow: hidden;
    animation: kmCouponGlow 3s ease-in-out infinite;
    transition: transform .2s, box-shadow .2s;
}
.km-coupon-banner:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 28px rgba(245, 158, 11, 0.55), inset 0 0 0 1px rgba(255,255,255,0.55);
    color: #78350f;
}
.km-coupon-banner::before {
    /* Effetto "shine" che attraversa il banner */
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: kmCouponShine 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes kmCouponGlow {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes kmCouponShine {
    0%   { left: -100%; }
    50%  { left: 130%; }
    100% { left: 130%; }
}
.km-coupon-icon {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.km-coupon-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
}
.km-coupon-text strong {
    display: block;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #7c2d12;
    margin-bottom: 2px;
}
.km-coupon-code {
    display: inline-block;
    background: #fff;
    color: #b45309;
    padding: 2px 10px;
    border-radius: 6px;
    /* Font sans-serif (non monospace) per evitare confusione tra O e 0:
       in monospace lo zero barrato si confondeva con la O. */
    font-family: 'Quicksand', system-ui, -apple-system, sans-serif;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0 2px;
    border: 1px solid rgba(124, 45, 18, 0.2);
}
.km-coupon-arrow {
    font-size: 22px;
    font-weight: 800;
    flex-shrink: 0;
    color: #7c2d12;
}
@media (max-width: 480px) {
    .km-coupon-banner { padding: 12px 14px; gap: 10px; margin: -24px 12px 12px; }
    .km-coupon-icon { font-size: 24px; }
    .km-coupon-text { font-size: 12px; }
    .km-coupon-text strong { font-size: 15px; }
    .km-coupon-arrow { font-size: 18px; }
}

/* WhatsApp: SOLO icona, niente card di sfondo. Posizionata a sinistra di Telegram. */
.topbar-whatsapp-icon {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: 50%;
    transition: transform .15s, background .15s;
}
.topbar-whatsapp-icon:hover { background: rgba(37, 211, 102, 0.12); transform: translateY(-1px); }
.topbar-whatsapp-icon:focus-visible { outline: 3px solid #95efb5; outline-offset: 2px; }
.topbar-whatsapp-icon svg { display: block; flex-shrink: 0; }

@media (max-width: 480px) {
    .topbar-telegram .topbar-btn-label { display: none; }
    .topbar-telegram { padding: 6px 10px; }
    .topbar-whatsapp-icon svg { width: 24px; height: 24px; }
}

/* Pulsante "Esperti" (link a #chiedilo) — viola coerente col tema karmica */
.topbar-chiedilo {
    background: #d63384 !important;
    color: #fff !important;
    border: 1px solid #d63384 !important;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.topbar-chiedilo:hover {
    background: #b02670 !important;
    border-color: #b02670 !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.topbar-chiedilo:focus-visible {
    outline: 3px solid #f0bfd6;
    outline-offset: 2px;
}
@media (max-width: 480px) {
    .topbar-chiedilo { padding-left: 8px; padding-right: 8px; font-size: 0; }
    .topbar-chiedilo > span[aria-hidden] { font-size: 16px; line-height: 1; }
}

/* Offset anchor scroll: senza questo lo scroll-to si ferma sotto il
   topbar fisso e copre il titolo della sezione. ~80px = altezza topbar. */
section#telegram,
section#chiedilo { scroll-margin-top: 80px; }

/* ================================================================
   CONSULENZE — portale lavoro operatrici (body.theme-consulenze)
   ================================================================
   Diego (2026-05-14): brand neutro/corporate per il dominio
   consulenze.live. Palette slate (grigi neutri) + accent blu —
   niente esoterico, niente caldi/rosa/oro. L'idea è far percepire
   il dominio come un "tool di lavoro" e non come un sito di
   cartomanzia. Coverage minima qui: solo body/topbar/auth (le
   pagine operatore esistenti riereditano i colori). Le pagine
   pubbliche di cartomanzia verranno bloccate via routing (FASE 2).
   ---------------------------------------------------------------- */
body.theme-consulenze {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #f1f5f9;       /* slate-100, neutro */
    color: #0f172a;            /* slate-900 testo */
}

/* Topbar: dark slate + bottoni accent blu, niente decorazioni esoteriche */
body.theme-consulenze .topbar {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);  /* slate-800 → slate-900 */
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
body.theme-consulenze .topbar .brand,
body.theme-consulenze .topbar .brand a {
    color: #e2e8f0;            /* slate-200 */
}
body.theme-consulenze .topbar .brand-logo-img { display: none; }
body.theme-consulenze .brand-text-fallback {
    /* Override del simbolo ✦ di Azarath: per consulenze testo "CONSULENZE"
       sobrio in maiuscolo, sans-serif, senza glow/serif. */
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    color: #f1f5f9 !important;
    text-transform: uppercase;
    background: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}
body.theme-consulenze .brand-text-fallback::before { content: none !important; }

body.theme-consulenze .topbar .btn-ghost,
body.theme-consulenze .topbar a,
body.theme-consulenze .topbar-profile {
    color: #e2e8f0;
}
body.theme-consulenze .topbar .btn-primary {
    background: #2563eb;       /* blue-600 */
    color: #fff;
}
body.theme-consulenze .topbar .btn-primary:hover {
    background: #1d4ed8;       /* blue-700 */
}
body.theme-consulenze .topbar-wallet {
    background: rgba(148, 163, 184, 0.15);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.3);
}

/* Nasconde decorazioni del tema cartomanti.ai che non hanno senso qui */
body.theme-consulenze .hero-strip-old,
body.theme-consulenze .footer-legal {
    display: none;
}

/* ================================================================
   AZARATH — bento grid theme (body.theme-azarath)
   ================================================================
   Diego (2026-05-13): tema a quadri colorati. Ogni tile sfondo pieno,
   no bordo, gap 0 (si toccano). Palette mista. Foto cartomante grande
   come hero del tile. Status integrato come pillola.
   ----------------------------------------------------------------
   Strategia: questo CSS sostituisce TUTTO il layout della home + scheda
   cartomante quando body.theme-azarath è attivo. Le view dedicate
   (home_azarath.php / cartomante_reale_azarath.php) usano queste classi.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:wght@700;800;900&display=swap');

body.theme-azarath {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #0a0a0a;
    color: #0a0a0a;
}

/* Topbar: dark, minimale, restano funzioni utente.
   Diego (2026-05-13 PM3): "guarda in alto" → il doppio "AZARATH" topbar
   (via ::before content) + hero AZARATH della pagina creavano confusione
   visiva. Rimosso il ::before; ora il brand-text-fallback gestisce il
   logo via simbolo ✦ piccolo (vedi sopra). */
/* ═══════════════════════════════════════════════════════════════
   TOPBAR AZARATH stile landing/magazine (Diego 2026-05-19):
   logo + sottotitolo sx | nav testuale centro | bottoni Accedi/
   Registrati dx | hamburger su mobile. Sfondo bianco/avorio.
   Ispirato a screenshot mockup classico di cartomanzia.
   ═══════════════════════════════════════════════════════════════ */
body.theme-azarath .topbar.topbar-az-nav {
    /* Diego (2026-05-19): sfondo nero per logo black + hamburger bianco. */
    background: #000000;
    border-bottom: 1px solid #1a1a1a;
    box-shadow: 0 1px 0 rgba(0,0,0,0.6);
    position: relative;
    z-index: 100;
}
body.theme-azarath .topbar.topbar-az-nav .topbar-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 24px;
    max-width: 1280px;
    margin: 0 auto;
}
/* Brand: logo + sottotitolo sotto in colonna (Diego 2026-05-19) */
body.theme-azarath .topbar.topbar-az-nav .az-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex-shrink: 0;
    text-decoration: none;
    margin-right: auto;            /* spinge tutto il resto a dx */
}
body.theme-azarath .topbar.topbar-az-nav .az-brand-logo {
    height: 80px;
    width: auto;
    display: block;
}
body.theme-azarath .topbar.topbar-az-nav .az-brand-tagline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #d4a017;                 /* oro su nero, brand-coherent */
    text-transform: uppercase;
    white-space: nowrap;
}
/* Diego (2026-05-19): voci menu spostate dentro l'hamburger →
   nav testuale orizzontale nascosta sempre. */
body.theme-azarath .topbar.topbar-az-nav .az-nav-links {
    display: none;
}
/* Bottoni Accedi/Registrati a destra */
body.theme-azarath .topbar.topbar-az-nav .az-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
body.theme-azarath .topbar.topbar-az-nav .az-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}
/* Diego (2026-05-19): entrambi i bottoni outline bianco + scritta bianca */
body.theme-azarath .topbar.topbar-az-nav .az-btn-ghost,
body.theme-azarath .topbar.topbar-az-nav .az-btn-primary {
    color: #ffffff;
    border: 1.5px solid #ffffff;
    background: transparent;
    box-shadow: none;
}
body.theme-azarath .topbar.topbar-az-nav .az-btn-ghost:hover,
body.theme-azarath .topbar.topbar-az-nav .az-btn-primary:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: none;
}
/* Hamburger SEMPRE visibile, bianco su sfondo nero (Diego 2026-05-19). */
body.theme-azarath .topbar.topbar-az-nav .az-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 8px;
    color: #ffffff;
    cursor: pointer;
    border-radius: 8px;
}
body.theme-azarath .topbar.topbar-az-nav .az-burger:hover {
    background: rgba(255, 255, 255, 0.10);
}
body.theme-azarath .topbar.topbar-az-nav .az-burger-menu {
    position: absolute;
    top: 100%;
    right: 14px;
    background: #0f0f0f;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(244, 197, 66, 0.08);
    min-width: 240px;
    padding: 8px;
    margin-top: 8px;
    z-index: 1000;
    display: none;
}
body.theme-azarath .topbar.topbar-az-nav .az-burger-menu.is-open {
    display: block;
}
body.theme-azarath .topbar.topbar-az-nav .az-burger-menu a {
    display: block;
    padding: 11px 14px;
    border-radius: 8px;
    color: #f5f5f5;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
body.theme-azarath .topbar.topbar-az-nav .az-burger-menu a:hover {
    background: linear-gradient(135deg, #1a1a1a, #2a2a1a);
    color: #f4c542;
}
body.theme-azarath .topbar.topbar-az-nav .az-burger-sep {
    height: 1px;
    background: #2a2a2a;
    margin: 6px 8px;
}
body.theme-azarath .topbar.topbar-az-nav .az-burger-wa {
    color: #166534 !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
body.theme-azarath .topbar.topbar-az-nav .az-burger-wa svg {
    flex-shrink: 0;
    margin: 0 !important;
}
body.theme-azarath .topbar.topbar-az-nav .az-burger-wa:hover {
    background: #f0fdf4 !important;
    color: #15803d !important;
}
/* Responsive: <900px collassa nav links + bottoni Accedi/Registrati in hamburger */
@media (max-width: 900px) {
    body.theme-azarath .topbar.topbar-az-nav .topbar-inner {
        padding: 10px 14px;
        gap: 12px;
    }
    body.theme-azarath .topbar.topbar-az-nav .az-brand-logo {
        height: 44px;
    }
    body.theme-azarath .topbar.topbar-az-nav .az-brand-tagline {
        display: none;       /* spazio mobile: nascondi sottotitolo */
    }
    body.theme-azarath .topbar.topbar-az-nav .az-nav-links,
    body.theme-azarath .topbar.topbar-az-nav .az-nav-actions .az-btn {
        display: none;
    }
    body.theme-azarath .topbar.topbar-az-nav .az-nav-actions {
        margin-left: auto;
    }
    body.theme-azarath .topbar.topbar-az-nav .az-burger {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
body.theme-azarath .topbar .brand,
body.theme-azarath .topbar .brand a {
    color: #f5e6d3;
}
/* Diego (2026-05-19): logo molto più grande nell'hero unificata (mostra
   il design dettagliato con la carta dei tarocchi). Su mobile resta
   proporzionato. Cap di 110px desktop / 64px mobile. */
body.theme-azarath .topbar.topbar-az-hero .brand-logo-img {
    display: block;
    height: 110px;
    width: auto;
}
@media (max-width: 700px) {
    body.theme-azarath .topbar.topbar-az-hero .brand-logo-img { height: 64px; }
}
/* Pagine Azarath non-home (topbar standard, no marquee inline): logo più piccolo */
body.theme-azarath .topbar:not(.topbar-az-hero) .brand-logo-img {
    display: block;
    height: 50px;
}
@media (max-width: 480px) {
    body.theme-azarath .topbar:not(.topbar-az-hero) .brand-logo-img { height: 40px; }
}
/* Nascondiamo il fallback testuale ✦ AZARATH ora che c'è il logo IMG. */
body.theme-azarath .topbar .brand-text-fallback { display: none; }
body.theme-azarath .topbar .btn-ghost,
body.theme-azarath .topbar a,
body.theme-azarath .topbar-profile {
    color: #f5e6d3;
}
body.theme-azarath .topbar-wallet {
    background: #f4c542;
    color: #0a0a0a;
    font-weight: 700;
}
body.theme-azarath .topbar-wallet-amount { color: #0a0a0a; }
/* Compatto bottoni topbar su Azarath mobile small così non collidono col simbolo ✦ */
@media (max-width: 480px) {
    body.theme-azarath .topbar-nav .btn-sm {
        padding: 7px 11px;
        font-size: 12px;
    }
}

/* Nascondi tutta la grafica del tema cartomanti.ai che non serve */
body.theme-azarath .hero-strip-old,
body.theme-azarath .footer-legal {
    display: none;
}

/* ─── AZ BENTO WRAPPER ─────────────────────────────────────────── */
.az-bento-wrap {
    width: 100%;
    /* Diego (2026-05-19): griglia tra tile NERA (coerente con toolbar
       nera). Il bg del wrap fa da "rete" che si vede tra i tile. */
    background: #000000;
    color: #0a0a0a;
    min-height: 100vh;
    padding: 1px 0 5px;
}
/* Linea bianca anche fra hero-split e bento (riga orizzontale) */
.az-bento-wrap .az-hero-split + .az-bento { margin-top: 5px; }
.az-bento-wrap .az-hero-centered + .az-bento { margin-top: 5px; }
.az-bento-wrap .az-marquee + .az-bento { margin-top: 5px; }

/* ─── Marquee specialità (Diego 2026-05-15 sera): scrolling ticker
   da destra a sinistra in loop. Items duplicati nel track così
   l'animazione 0 → -50% sembra seamless. ─── */
.az-marquee {
    overflow: hidden;
    /* Diego (2026-05-19): hero unificata Azarath con sfondo bianco. Il
       marquee inline eredita lo sfondo della topbar (white). Versione
       standalone (su altre pagine) ricade qui col gradient scuro come
       backup. */
    background: linear-gradient(135deg, #0a0e27 0%, #1e1b4b 100%);
    color: #f5e6d3;
    padding: 14px 0;
    border-bottom: 1px solid rgba(245, 230, 211, 0.10);
    position: relative;
}
/* Versione inline dentro topbar Azarath (fondo blu notte→indaco):
   eredita lo sfondo del flex parent, testo crema, no border. */
.az-marquee.az-marquee-inline {
    background: transparent;
    color: #f5e6d3;
    padding: 0;
    border-bottom: none;
}
.az-marquee.az-marquee-inline::before {
    background: linear-gradient(90deg, #0a0e27, transparent);
}
.az-marquee.az-marquee-inline::after {
    background: linear-gradient(270deg, #1e1b4b, transparent);
}
/* Sfumature ai bordi per nascondere l'edge dell'animazione (fade in/out) */
.az-marquee::before,
.az-marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 1;
}
.az-marquee::before {
    left: 0;
    background: linear-gradient(90deg, #0a0a0a, transparent);
}
.az-marquee::after {
    right: 0;
    background: linear-gradient(270deg, #15081f, transparent);
}
.az-marquee-track {
    display: flex;
    width: max-content;
    /* Diego (2026-05-16): aggiunta frase lunga di chiusura + durata più
       generosa così il testo scorre lento e leggibile. Linear infinite
       garantisce loop continuo senza salti. */
    animation: azMarqueeScroll 90s linear infinite;
    /* Niente gap sulla track: lo spacing inter-item è gestito dal
       padding-right di .az-marquee-item così è coerente sia per item
       con icona sia per item solo testo (claim finale). */
    gap: 0;
    will-change: transform;
}
.az-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 0;
    /* Spacing fra items uniforme → quando il loop si chiude (-50%) il
       secondo blocco entra continuativamente da destra senza salti. */
    padding-right: 28px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #f5e6d3;
    /* Diego (2026-05-15 sera): "usa lo stesso font delle tile" →
       Playfair Display come .az-tile-name. */
    font-family: 'Playfair Display', Georgia, serif;
}
.az-marquee-emoji {
    font-size: 20px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(244, 197, 66, 0.3));
    /* Diego (2026-05-15 sera): "ovviamente uno spazio Parola SPAZIO (icona)
       SPAZIO Parola" → 8px su entrambi i lati dell'emoji. */
    padding: 0 8px;
}
/* Icona SVG line-style (Diego 2026-05-16): sostituisce le emoji con icone
   coerenti tipo Lucide/Feather. Stroke color = currentColor → eredita la
   tinta del testo cream. */
.az-marquee-icon {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    color: #f4c542;   /* oro Azarath: leggermente più visibile del cream */
}
.az-marquee-icon svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 2px rgba(244, 197, 66, 0.25));
}
@media (max-width: 480px) {
    .az-marquee-icon { padding: 0 8px; }
    .az-marquee-icon svg { width: 18px; height: 18px; }
}
.az-marquee-text {
    /* Diego: "minuscolo con prima lettera maiuscola" → niente uppercase. */
    text-transform: none;
    color: #f5e6d3;
}
@keyframes azMarqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .az-marquee-track { animation: none; }
}
@media (max-width: 480px) {
    .az-marquee { padding: 12px 0; }
    .az-marquee-track { animation-duration: 65s; }
    .az-marquee-item { font-size: 15px; padding-right: 22px; }
    .az-marquee-emoji { font-size: 17px; }
}

/* ─── HERO CENTRATO (Diego 2026-05-15 sera): "logo al centro" ─────────
   Non-loggato: logo grande centrato (sostituisce hero-split). Loggato:
   stesso layout ma più compatto con classe .az-hero-mini, perché poco
   sotto compare la tile user-info nella bento. ─────────────────────── */
.az-hero-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px 24px;
    background: #000;
    width: 100%;
}
.az-hero-centered .az-hero-logo {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    object-fit: contain;
}
.az-hero-centered.az-hero-mini { padding: 14px 16px 12px; }
.az-hero-centered.az-hero-mini .az-hero-logo { max-width: 280px; }
@media (max-width: 480px) {
    .az-hero-centered { padding: 20px 14px 18px; }
    .az-hero-centered .az-hero-logo { max-width: 320px; }
    .az-hero-centered.az-hero-mini { padding: 12px 14px 10px; }
    .az-hero-centered.az-hero-mini .az-hero-logo { max-width: 220px; }
}

/* ─── HERO STRIP (top banner) — Diego (2026-05-13): più decorato + trust stats ──
   Diego (2026-05-13 PM3): "guarda in alto" → il titolo AZARATH dell'hero
   era visivamente attaccato al "AZARATH" della topbar (entrambi gialli su
   sfondo nero, sembravano la stessa parola). Aumento padding-top per
   respiro chiaro tra topbar e hero. */
.az-hero {
    background: linear-gradient(160deg, #000 0%, #0a0410 45%, #15081f 100%);
    color: #f5e6d3;
    padding: 0;
    text-align: center;
}
/* 2 tile come cartomante: stesse misure del bento (4 col desktop / 2 mobile),
   ciascuna tile occupa 2 col → hanno la stessa larghezza dei tile bento. */
.az-hero-split {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Stessa griglia bianca 6px del bento sotto */
    gap: 6px;
    background: #ffffff;
    align-items: stretch;
    text-align: center;
}
.az-hero-split-left,
.az-hero-split-right { grid-column: span 2; }
.az-hero-split-left,
.az-hero-split-right {
    aspect-ratio: 1 / 1;
    border-radius: 0;
    border: 0;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.az-hero-split-left {
    background: #0a0a0a;
}
.az-hero-split-right {
    background: #2a1a3e;
    flex-direction: column;
    gap: 14px;
    position: relative;
    isolation: isolate;
}
/* Vortice di colori che ruotano e si mischiano dietro lo stats. Conic-gradient
   blurred + rotazione lenta = effetto "spirale fluida". */
.az-hero-split-right::before {
    content: '';
    position: absolute;
    inset: -40%;
    z-index: -1;
    background: conic-gradient(
        from 0deg,
        #6b21a8 0%,
        #c9356c 25%,
        #f4c542 50%,
        #4a148c 75%,
        #6b21a8 100%
    );
    filter: blur(36px);
    animation: az-vortex 14s linear infinite;
    pointer-events: none;
}
.az-hero-split-right::after {
    /* Secondo strato controruota più lento per arricchire la trama */
    content: '';
    position: absolute;
    inset: -30%;
    z-index: -1;
    background: conic-gradient(
        from 90deg,
        rgba(244, 197, 66, 0.35) 0%,
        transparent 30%,
        rgba(201, 53, 108, 0.5) 60%,
        transparent 100%
    );
    filter: blur(50px);
    animation: az-vortex-reverse 22s linear infinite;
    pointer-events: none;
}
@keyframes az-vortex {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes az-vortex-reverse {
    0%   { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}
.az-hero-split-right > * { position: relative; z-index: 1; }
.az-hero-split-logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}
/* Titolo "Cartomanti professioniste" sopra ai due contatori */
.az-hero-split-title {
    font-family: 'Cinzel', 'Playfair Display', serif;
    font-size: clamp(15px, 2.3vw, 22px);
    font-weight: 700;
    color: #f4c542;
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 6px;
}
.az-hero-split .az-hero-stats {
    /* Counter + rank affiancati orizzontalmente */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 4vw, 36px);
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    margin: 0;
}
.az-hero-split .az-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.az-hero-split .az-stat-num {
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1;
}
.az-hero-split .az-stat-lbl {
    font-size: clamp(12px, 1.8vw, 14px);
}
@media (max-width: 900px) {
    /* Mobile: bento è 2 col → ciascuna hero tile occupa 1 col (= 1 bento tile). */
    .az-hero-split { grid-template-columns: repeat(2, 1fr); }
    .az-hero-split-left,
    .az-hero-split-right { grid-column: span 1; padding: 14px; }
    .az-hero-split .az-stat-num { font-size: clamp(18px, 5.5vw, 28px); }
    .az-hero-split .az-stat-lbl { font-size: clamp(10px, 2.6vw, 13px); }
}

/* Diego (2026-05-13 PM3): banner immagine "AZARATH.IT" custom usata
   come hero quando presente in /assets/img/brands/azarath/banner.* —
   altrimenti fallback all'hero testuale SVG sopra. */
.az-hero-banner {
    padding: 0;
    background: #0a0a0a;
    border-bottom: 2px solid rgba(244, 197, 66, 0.25);
    position: relative;
    overflow: hidden;
}
/* Alleggerimento banner: filter per ridurre saturazione/contrasto e opacity
   leggera così l'oro non grida, l'immagine resta elegante ma non pesante. */
.az-hero-banner-img {
    filter: brightness(0.92) saturate(0.85) contrast(0.94);
    opacity: 0.92;
}
/* Strip stats sotto al banner: fascia piatta full-width, no pill */
.az-hero-stats-strip {
    background: #0a0a0a;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(244, 197, 66, 0.18);
    text-align: center;
}
.az-hero-stats-strip .az-hero-stats {
    /* Override: niente più pill (border + background + border-radius pieno).
       Solo allineamento centrale e gap tra i numeri. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 3vw, 28px);
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    flex-wrap: wrap;
    max-width: 760px;
}
.az-hero-banner-img {
    display: block;
    width: 100%;
    /* Aspect ratio fissa + object-fit cover: il banner si adatta a qualunque
       viewport (mobile stretto / desktop largo) senza distorcersi e senza
       diventare gigantesco su schermi ultra-wide. */
    aspect-ratio: 3 / 1;
    max-height: 280px;
    object-fit: cover;
    object-position: center;
    height: auto;
    /* Diego (2026-05-13 PM3): "troppo grande in altezza" → ridotto banner
       cinematico. Object-position center mantiene il logo+scritta visibili
       anche con crop verticale. */
    max-height: 320px;
    object-fit: cover;
    object-position: center center;
    /* Fade verso lo sfondo dark in basso → fusione morbida con le tile */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 85%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 85%, transparent 100%);
}
/* Stats sotto al banner: padding ridotto perché il banner ha già la propria
   composizione visiva; basta una striscia trust info compatta. */
.az-hero-banner .az-hero-stats {
    margin-top: -8px;      /* sovrapponi leggermente alla mask fade */
    padding: 10px 16px 16px;
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    .az-hero-banner-img { max-height: 220px; }
}
@media (max-width: 480px) {
    .az-hero-banner-img { max-height: 170px; }
    .az-hero-banner .az-hero-stats { padding: 8px 12px 12px; }
}
@media (max-width: 380px) {
    .az-hero-banner-img { max-height: 150px; }
}
/* Simbolo luna+stelle sopra il titolo (placeholder logo) */
.az-hero-symbol {
    display: flex;
    justify-content: center;
    color: #f4c542;
    opacity: 0.85;
    margin-bottom: 10px;
}
.az-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 7vw, 84px);
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #f5e6d3;
    text-transform: uppercase;
    margin: 0;
    line-height: 0.95;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 24px);
}
.az-hero-accent { color: #f4c542; }
/* Ornamenti decorativi laterali (✦ ✦) */
.az-hero-orn {
    color: #f4c542;
    font-size: 0.45em;
    opacity: 0.7;
    font-weight: 400;
    transform: translateY(-0.15em);
}
.az-hero-sub {
    font-family: 'Inter', sans-serif;
    font-size: clamp(14.5px, 2.5vw, 16px);
    margin-top: 14px;
    color: #d4cab5;
    letter-spacing: 0.04em;
    font-weight: 500;
    line-height: 1.4;
}
/* Trust mini-stats inline sotto la tagline */
.az-hero-stats {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: clamp(10px, 2vw, 24px);
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 22px;
    border: 1px solid rgba(244, 197, 66, 0.22);
    border-radius: 100px;
    background: rgba(245, 230, 211, 0.04);
}
.az-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'Inter', sans-serif;
}
.az-stat-num {
    font-weight: 800;
    color: #f4c542;
    font-size: clamp(15px, 2.4vw, 17px);
    letter-spacing: 0.02em;
}
.az-stat-lbl {
    font-size: clamp(12px, 1.9vw, 13.5px);
    color: #d4cab5;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.05em;
}
.az-stat-sep {
    color: rgba(244, 197, 66, 0.4);
    font-weight: 700;
}
@media (max-width: 480px) {
    /* Niente padding orizzontale: le 2 tile devono toccare i bordi schermo. */
    .az-hero { padding: 0; }
    .az-hero-stats { padding: 10px 16px; gap: 10px; }
    .az-hero-orn { display: none; }  /* su mobile semplifichiamo */
}
.az-hero-compact { padding: 24px; }
.az-hero-compact .az-hero-title-small {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #f5e6d3;
    text-transform: uppercase;
    text-align: center;
    margin-top: 10px;
}
.az-hero-back {
    display: inline-block;
    color: #f4c542;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.az-hero-back:hover { color: #f5e6d3; }

/* ─── BENTO GRID ───────────────────────────────────────────────── */
.az-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Diego (2026-05-19): griglia tra tile NERA. */
    gap: 5px;
    background: #000000;
    width: 100%;
}
@media (max-width: 900px) {
    .az-bento { grid-template-columns: repeat(2, 1fr); }
}
/* Diego (2026-05-13): su cellulare 2 colonne (era 1). Più cartomanti
   visibili in scroll, ognuna leggermente più piccola. */
@media (max-width: 480px) {
    .az-bento { grid-template-columns: repeat(2, 1fr); }
}

/* Profilo: layout simile alla home (no special big hero tile, già grande) */
.az-bento-profile { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .az-bento-profile { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .az-bento-profile { grid-template-columns: 1fr; } }

/* ─── TILE BASE ────────────────────────────────────────────────── */
.az-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 18px;
    overflow: hidden;
    color: #0a0a0a;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    transition: transform .25s cubic-bezier(.2,.7,.3,1);
    cursor: pointer;
    border: none;
}
.az-tile:hover { transform: scale(1.025); z-index: 2; }
/* Offline: grayscale molto leggero, mantiene il colore vivido della palette
   (Diego 2026-05-13). Lo status "Offline" della pillola fa già da indicatore. */
.az-tile.is-off { filter: grayscale(0.15); }
.az-tile.is-off:hover { transform: none; }

/* Tile cartomante: foto pieno cubetto + 2 mini-pulsanti circolari OVERLAY.
   Diego (2026-05-13): "i pulsanti devono stare nel quadrato grande, non a
   fianco". Cubetto intero cliccabile (→ profilo), mini-pulsanti chat/call
   sopra come "quick action" ad alto z-index. */
.az-tile-cm {
    color: #fff;
    position: relative;
    padding: 0;  /* il main interno ha già padding */
    /* Bg = colore palette della cartomante (via --cm-color), fallback nero.
       Inline style nel template setta sia background sia --cm-color, ma
       se per qualunque race-condition l'inline non viene applicato, il
       var() qui garantisce comunque un colore opaco (no griglia bianca). */
    background: var(--cm-color, #0a0a0a);
    background-color: #0a0a0a;   /* hard fallback ulteriore: mai trasparente */
    overflow: hidden;
    /* Isolation: stacking context dedicato impedisce che animazioni 3D/filter
       di altre tile lascino artefatti "bianchi" su questa (bug iOS Safari
       segnalato da Diego — "ogni tanto una card diventa bianca"). */
    isolation: isolate;
}
/* Backup: anche se l'inline style del template non si applica, la tile
   conserva il colore palette via --cm-color (settato da data-cm-id-N) e in
   ultima istanza il nero del fallback sopra. Mai bianca. */
.az-tile-cm[data-cm-id] { background-color: var(--cm-color, #0a0a0a); }

.az-tile-cm-main {
    position: relative;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px;
    /* Lasciamo spazio a destra per i pulsanti azione (56px + gap) in basso-dx,
       così nome/prezzo non si sovrappongono. */
    padding-right: 80px;
    height: 100%;
    width: 100%;
    transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.az-tile-cm-main:hover { transform: scale(1.02); z-index: 2; }
@media (max-width: 480px) {
    /* Padding-right ridotto: 44px (largh pulsante) + 8 (offset right) + 8 (spazio
       respiro testo) = 60. Padding stretto a sinistra per dare spazio al nome. */
    .az-tile-cm-main { padding: 14px 60px 14px 14px; }
}

/* Quick actions overlay (quadrati colorati in BASSO a destra).
   Diego (2026-05-13): spostati da top a bottom + ingranditi. */
.az-tile-cm-quick {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Quick buttons: quadrati colorati netti, no bordo, no cerchio.
   Diego (2026-05-13): "non metterli in cerchio ma in quadrato. Senza bordo.
   I due quadrati falli colorati". Due colori distinti: chat=oro, chiama=rosso. */
.az-quick-btn {
    width: 56px;
    height: 56px;
    border-radius: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform .15s ease, filter .15s ease;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
}
.az-quick-btn svg {
    width: 26px;
    height: 26px;
}
/* Diego (2026-05-13): pulsanti che prendono il COLORE DELLA CARD propria
   (passato via custom property --cm-color), in versione più scura per
   distinguersi dal fondo. color-mix scurisce di 35% verso il nero —
   abbastanza per stacco visivo, ma identità di colore mantenuta. */
.az-quick-btn[aria-label^="Chat"],
.az-quick-btn[aria-label^="Chiama"] {
    background: color-mix(in srgb, var(--cm-color, #6a1b9a) 100%, #000 38%);
    color: #ffffff;
    /* Fallback per browser senza color-mix: nero semi-trasparente */
    background: rgba(0, 0, 0, 0.45);
    background: color-mix(in srgb, var(--cm-color, #6a1b9a) 100%, #000 38%);
}
/* In consulto (busy): rosso burgundy semi-trasparente, NON cliccabile,
   pulse leggero per attirare l'attenzione. */
.az-quick-btn.az-quick-busy {
    background: rgba(196, 25, 42, 0.72);
    color: #ffffff;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    cursor: not-allowed;
    animation: az-busy-pulse 1.8s ease-in-out infinite;
}
.az-quick-btn.az-quick-busy:hover {
    transform: none;
    filter: none;
}
@keyframes az-busy-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(196, 25, 42, 0.4); }
    50%      { box-shadow: 0 2px 14px rgba(196, 25, 42, 0.85); }
}
.az-quick-btn:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* Mobile: con 2 colonne (Diego 2026-05-13) i cubetti sono ~50% larghezza
   schermo, quindi pulsanti tornano a 44x44 per non occupare troppa foto.
   Sempre tappabili — soglia Apple raccomandata 44px = ok. */
@media (max-width: 480px) {
    .az-quick-btn { width: 44px; height: 44px; }
    .az-quick-btn svg { width: 22px; height: 22px; }
    .az-tile-cm-quick { bottom: 8px; right: 8px; gap: 5px; }
}

/* Tile "Tutte le cartomanti" — sub-label con numero offline */
.az-tile-all .az-tile-all-sub {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(244, 197, 66, 0.65);
    margin-top: 4px;
}
.az-tile-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    /* Foto su Azarath sono 600x600 AI-upscaled via Real-ESRGAN (servite da
       /assets/img/cartomanti/azarath/) → niente più blur necessario. */
    transition: filter .2s, transform .2s;

    /* Animazione "reveal a sparso": al caricamento le foto sono nascoste,
       JS le rivela una alla volta in ordine random così l'utente vede prima
       la griglia di colori (i tile bento), poi le foto compaiono a sorpresa.
       Diego (2026-05-13): "potrebbe essere interessante far caricare le foto
       a random sparse in modo che prima vedano i colori dei cubi". */
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1), filter .2s;
}
.az-tile-photo.az-revealed {
    opacity: 1;
    /* Diego (2026-05-13 PM2): zoom base 1.05 sempre attivo → margine di
       sicurezza così durante Ken Burns / idle-zoom / idle-pan i bordi
       della foto non escono mai dal frame del tile. */
    transform: scale(1.05);
}
/* Quando JS disabilitato / fallback: foto visibili comunque */
.no-js .az-tile-photo,
html.no-js .az-tile-photo {
    opacity: 1;
    transform: scale(1);
}

/* ============================================================
   AZARATH — Tile entry animations MIXATE
   Diego (2026-05-13): "possiamo caricare i profili con transizioni
   diverse miste? per dare più movimento". 6 varianti random
   assegnate via JS, stagger 30-80ms tra tile.
   ============================================================ */
/* Diego (2026-05-13 PM2): RIMOSSO opacity:0 di base — se il JS non gira
   (errore, blocking script, network slow) le tile devono restare visibili.
   Le keyframe partono comunque da 0% { opacity: 0 } quando l'animazione gira.
   Solo se la classe variante è applicata (sotto), nascondiamo durante l'anim. */
.az-tile.az-anim {
    animation-duration: .55s;
    animation-timing-function: cubic-bezier(.2,.85,.25,1);
    animation-fill-mode: backwards; /* eredita lo stato del frame 0% PRIMA che parta */
    will-change: transform, opacity, filter;
}
.az-tile.az-anim-up    { animation-name: az-tile-up; }
.az-tile.az-anim-down  { animation-name: az-tile-down; }
.az-tile.az-anim-left  { animation-name: az-tile-left; }
.az-tile.az-anim-right { animation-name: az-tile-right; }
.az-tile.az-anim-scale { animation-name: az-tile-scale; }
.az-tile.az-anim-blur  { animation-name: az-tile-blur; animation-duration: .7s; }

@keyframes az-tile-up {
    0%   { opacity: 0; transform: translate3d(0, 28px, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes az-tile-down {
    0%   { opacity: 0; transform: translate3d(0, -24px, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes az-tile-left {
    0%   { opacity: 0; transform: translate3d(-32px, 0, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes az-tile-right {
    0%   { opacity: 0; transform: translate3d(32px, 0, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes az-tile-scale {
    0%   { opacity: 0; transform: scale(.82); }
    60%  { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes az-tile-blur {
    0%   { opacity: 0; filter: blur(8px); transform: scale(.96); }
    100% { opacity: 1; filter: blur(0);   transform: scale(1); }
}

/* Fallback: utenti con prefers-reduced-motion = no animazioni, tile visibili */
@media (prefers-reduced-motion: reduce) {
    .az-tile.az-anim {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}
/* No-JS: tile visibili comunque */
.no-js .az-tile.az-anim,
html.no-js .az-tile.az-anim {
    animation: none !important;
    opacity: 1 !important;
}

/* ============================================================
   AZARATH — LIFE EFFECTS (idle continui dopo l'entry)
   Diego (2026-05-13): "rendere vivo e dinamico il sito"
   - breathing leggero sui tile cartomanti online
   - glow alone soft sulle libere ora
   - dot pulse verde online
   - shimmer su foto random (JS-driven, classe .az-shimmer)
   - particles dorate fluttuanti sullo sfondo
   - hover tilt 3D (JS-driven via CSS variabili)
   ============================================================ */

/* --- 1) LIFE LOOP solo sul 50% delle tile online (breathe + drift) + glow ---
   Diego (2026-05-14): "l'effetto deve essere sul 50% non tutte". JS aggiunge
   .az-active alla metà random delle tile online a ogni refresh. Le altre
   restano completamente ferme — niente glitch subpixel = niente righe bianche.
   4 varianti di keyframes assegnate per nth-of-type così tile adiacenti non
   si muovono uguale. */
/* Animazioni applicate SOLO sulla foto (.az-tile-photo), NON sul cm-main:
   così testi e chip restano fermi mentre solo l'immagine drifta + respira.
   Il cell esterno ha overflow:hidden quindi anche il drift della foto
   resta contenuto. */
.az-tile-cm.az-active:not(.is-off):not(.is-busy) .az-tile-photo {
    animation: az-life-a 7.5s ease-in-out infinite;
    animation-delay: var(--az-breathe-delay, 0s);
}
.az-tile-cm.az-active:not(.is-off):not(.is-busy) {
    animation: az-glow 3.4s ease-in-out infinite;
    animation-delay: var(--az-glow-delay, 0s);
}
.az-tile-cm.az-active:nth-of-type(4n+2):not(.is-off):not(.is-busy) .az-tile-photo {
    animation: az-life-b 9.2s ease-in-out infinite;
}
.az-tile-cm.az-active:nth-of-type(4n+2):not(.is-off):not(.is-busy) {
    animation: az-glow 4.1s ease-in-out infinite;
}
.az-tile-cm.az-active:nth-of-type(4n+3):not(.is-off):not(.is-busy) .az-tile-photo {
    animation: az-life-c 6.8s ease-in-out infinite;
}
.az-tile-cm.az-active:nth-of-type(4n+3):not(.is-off):not(.is-busy) {
    animation: az-glow 3.7s ease-in-out infinite;
}
.az-tile-cm.az-active:nth-of-type(4n+4):not(.is-off):not(.is-busy) .az-tile-photo {
    animation: az-life-d 8.4s ease-in-out infinite;
}
.az-tile-cm.az-active:nth-of-type(4n+4):not(.is-off):not(.is-busy) {
    animation: az-glow 4.6s ease-in-out infinite;
}
/* Solo la foto è scalata 1.10 (inner main no, così testi restano fermi). */
.az-tile-cm.az-active .az-tile-photo {
    transform: scale(1.1);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* --- BUSY TILES: filtro rossastro sulla foto + glow rosso pulsante esterno ---
   Diego (2026-05-13 PM3): "per le cartomanti in chiamata su azarath
   potremmo mettere un filtro leggermente rosso sull'immagine, così
   mostriamo meglio che è occupata". Combo:
   - filter sulla foto: sepia + hue-rotate verso rosso + brightness ridotta
   - box-shadow esterno rosso pulsante (sostituisce il glow dorato)
   - dim opacity leggera per "spegnere" la tile rispetto alle libere */
.az-tile-cm.is-busy {
    animation: az-busy-tile-pulse 2s ease-in-out infinite;
    position: relative;
}
.az-tile-cm.is-busy .az-tile-photo {
    /* Diego (2026-05-13 PM3): "troppo poco, deve essere più intenso".
       Filter aggressivo: brightness scura + sepia forte spostato a rosso
       saturo. */
    filter: brightness(0.55) sepia(0.85) hue-rotate(-35deg) saturate(2.4) contrast(1.1);
}
/* Overlay rosso aggiuntivo SOPRA la foto per non dipendere solo dal filter
   (filter dipende dalla foto originale: foto molto scure danno meno effetto).
   L'overlay garantisce un veil rosso visibile su qualsiasi immagine. */
.az-tile-cm.is-busy .az-tile-cm-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(220, 38, 38, 0.32) 0%,
        rgba(180, 20, 20, 0.42) 60%,
        rgba(140, 10, 10, 0.55) 100%);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: multiply;
}
@keyframes az-busy-tile-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.0);
    }
    50% {
        box-shadow: 0 0 36px 8px rgba(220, 38, 38, 0.7);
    }
}
/* Non applicare Ken Burns + idle effects su busy → resta "ferma e rossa" */
.az-tile-cm.is-busy .az-tile-photo.az-kb-on,
.az-tile-cm.is-busy .az-tile-photo.az-idle-zoom,
.az-tile-cm.is-busy .az-tile-photo.az-idle-pan {
    animation: none !important;
}
/* Scale base 1.1 incorporato nei keyframes per coprire i drift senza
   esporre il bg nero del cell. Diego (2026-05-15). */
@keyframes az-life-a {
    0%, 100% { transform: translate3d(0, 0, 0)         scale(1.10); }
    25%      { transform: translate3d(2px, -3px, 0)    scale(1.106); }
    50%      { transform: translate3d(-1px, 2px, 0)    scale(1.112); }
    75%      { transform: translate3d(-2px, -1px, 0)   scale(1.106); }
}
@keyframes az-life-b {
    0%, 100% { transform: translate3d(0, 0, 0)         rotate(0deg) scale(1.10); }
    33%      { transform: translate3d(-4px, 1px, 0)    rotate(-0.4deg) scale(1.108); }
    66%      { transform: translate3d(4px, -1px, 0)    rotate(0.4deg) scale(1.114); }
}
@keyframes az-life-c {
    0%, 100% { transform: translate3d(0, 0, 0)         scale(1.10); }
    20%      { transform: translate3d(3px, 3px, 0)     scale(1.12); }
    50%      { transform: translate3d(0, -2px, 0)      scale(1.105); }
    80%      { transform: translate3d(-3px, 3px, 0)    scale(1.118); }
}
@keyframes az-life-d {
    0%, 100% { transform: translate3d(0, 0, 0)         rotate(0deg) scale(1.10); }
    25%      { transform: translate3d(-5px, -1px, 0)   rotate(-0.8deg) scale(1.11); }
    75%      { transform: translate3d(5px, -1px, 0)    rotate(0.8deg)  scale(1.11); }
}
/* Manteniamo az-life come alias di -a per compatibilità con eventuali altri usi. */
@keyframes az-life {
    0%, 100% { transform: translate3d(0, 0, 0)         scale(1); }
    25%      { transform: translate3d(2px, -3px, 0)    scale(1.006); }
    50%      { transform: translate3d(-1px, 2px, 0)    scale(1.012); }
    75%      { transform: translate3d(-2px, -1px, 0)   scale(1.006); }
}
@keyframes az-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 197, 66, 0.0); }
    50%      { box-shadow: 0 0 28px 4px rgba(244, 197, 66, 0.28); }
}
/* Pause life loop in hover per non confliggere con tilt 3D + hover scale */
.az-tile-cm:not(.is-off):not(.is-busy):hover { animation-play-state: paused; }

/* --- 3) Dot pulse anche per stato online (più morbido del busy rosso) --- */
.az-tile-status:not(.busy):not(.offline) .dot {
    animation: az-dot-pulse 2.2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
}
@keyframes az-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); }
    50%      { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}

/* --- 4) Shimmer diagonale che passa su foto random (JS aggiunge .az-shimmer) --- */
.az-tile-photo { overflow: hidden; }
.az-tile-photo.az-shimmer::before {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 50%; height: 100%;
    background: linear-gradient(110deg,
        transparent 0%,
        rgba(255, 245, 200, 0.0) 30%,
        rgba(255, 245, 200, 0.35) 50%,
        rgba(255, 245, 200, 0.0) 70%,
        transparent 100%);
    transform: skewX(-18deg);
    animation: az-shimmer-pass 1.1s ease-out forwards;
    pointer-events: none;
    z-index: 3;
}
@keyframes az-shimmer-pass {
    0%   { left: -60%; opacity: 0; }
    20%  { opacity: 1; }
    100% { left: 160%; opacity: 0; }
}

/* --- 5) Particles dorate fluttuanti sullo sfondo --- */
.az-bento-wrap {
    position: relative;
    overflow: hidden;
}
.az-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.az-particle {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff5c8 0%, rgba(244,197,66,0.4) 60%, transparent 100%);
    opacity: 0;
    will-change: transform, opacity;
}
.az-particle.p1 { left: 10%; bottom: -10px; animation: az-float-up 24s linear infinite; animation-delay: 0s; }
.az-particle.p2 { left: 35%; bottom: -10px; animation: az-float-up 31s linear infinite; animation-delay: -8s; width: 3px; height: 3px; }
.az-particle.p3 { left: 60%; bottom: -10px; animation: az-float-up 27s linear infinite; animation-delay: -14s; }
.az-particle.p4 { left: 82%; bottom: -10px; animation: az-float-up 34s linear infinite; animation-delay: -3s; width: 5px; height: 5px; }
.az-particle.p5 { left: 50%; bottom: -10px; animation: az-float-up 29s linear infinite; animation-delay: -19s; width: 2px; height: 2px; }
@keyframes az-float-up {
    0%   { transform: translate3d(0, 0, 0)         scale(0.6); opacity: 0; }
    10%  { opacity: 0.45; }
    50%  { transform: translate3d(40px, -50vh, 0)  scale(1);   opacity: 0.65; }
    90%  { opacity: 0.25; }
    100% { transform: translate3d(-20px, -100vh, 0) scale(0.8); opacity: 0; }
}
/* Su mobile riduco a 3 particles per non pesare */
@media (max-width: 768px) {
    .az-particle.p4, .az-particle.p5 { display: none; }
}

/* --- 6) Hover tilt 3D leggero (JS aggiorna --az-rx / --az-ry) --- */
.az-tile-cm-main {
    transform-style: preserve-3d;
    transition: transform .25s ease-out;
}
.az-tile-cm-main.az-tilt {
    transform:
        perspective(800px)
        rotateX(var(--az-rx, 0deg))
        rotateY(var(--az-ry, 0deg))
        scale(1.025);
}

/* ─── IDLE MICRO-EVENTS ───────────────────────────────────────────
   Diego (2026-05-13 PM2): "quando il sito è caricato, potremmo
   valle per esempio un leggero zoom su una foto, un piccolo movimento
   su altro, cose molto leggere che rendono il sito vivo e non statico".
   JS scheduler ogni 4-8s picka una tile online + un effetto random:
     - photo zoom in lento (4.5s scale 1 → 1.06 → 1)
     - photo pan slow (slide-up della foto, come un occhio che si alza)
     - name flash dorato (text-shadow accento per 1.5s)
     - tile brighten (filter brightness 1.08 per 3s, no transform-conflict
       con .az-tile-cm breathe già attivo)
   Tutti SU SUB-ELEMENTI o filter così non confliggono con breathe/glow.
   ──────────────────────────────────────────────────────────────── */
/* ── Ken Burns lento SOLO su 50% random delle foto (cambia a ogni refresh)
   Diego (2026-05-13 PM2): "non va fatto su tutta ma su un 50% che cambia
   ad ogni refresh". JS picka random 50% online e aggiunge .az-kb-on.
   Scale base 1.1 + range 1.1→1.18 → translate ±2% sempre coperto dal
   margine, MAI bordi della foto visibili (sfondo nero che si vedeva). */
.az-tile-photo.az-kb-on {
    animation: az-kenburns 14s ease-in-out infinite alternate;
    animation-delay: var(--az-kb-delay, 0s);
}
@keyframes az-kenburns {
    0%   { transform: scale(1.10) translate3d(0, 0, 0); }
    100% { transform: scale(1.18) translate3d(-2%, 1%, 0); }
}
.az-tile-cm-main:hover .az-tile-photo { animation-play-state: paused; }

/* ── Idle micro-events amplificati ──────────────────────────────────
   Diego (2026-05-13 PM2): "più visibili / più frequenti". Zoom 1.06→1.10,
   brightness 1.1→1.18 saturate 1.15→1.25, frequenza dimezzata via JS. */
.az-tile-photo.az-idle-zoom {
    animation: az-idle-zoom 4.5s ease-in-out forwards;
}
@keyframes az-idle-zoom {
    /* Diego (2026-05-13 PM2): parto da 1.05 (= base zoom) → 1.18, mai
       sotto 1 per non scoprire i bordi dello sfondo nero del tile. */
    0%, 100% { transform: scale(1.05); }
    50%      { transform: scale(1.18); }
}
.az-tile-photo.az-idle-pan {
    animation: az-idle-pan 5s ease-in-out forwards;
}
/* Flip 3D della foto: rotazione 360° su asse Y. Necessita perspective sul
   genitore (.az-tile-cm-main) e preserve-3d, già implicito qui. */
.az-tile-cm-main { perspective: 900px; }
.az-tile-photo.az-idle-flip {
    animation: az-idle-flip 2.2s cubic-bezier(.55,.1,.4,.95) forwards;
    transform-style: preserve-3d;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}
@keyframes az-idle-flip {
    0%   { transform: scale(1.1) rotateY(0deg); }
    50%  { transform: scale(1.1) rotateY(180deg); }
    100% { transform: scale(1.1) rotateY(360deg); }
}
@keyframes az-idle-pan {
    /* Pan stretto attorno al center (15%→35%) → mai esce dal frame */
    0%, 100% { background-position: center 18%; }
    50%      { background-position: center 38%; }
}
.az-tile-name.az-idle-flash {
    animation: az-idle-flash 1.6s ease-in-out forwards;
}
@keyframes az-idle-flash {
    0%, 100% { text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
    50%      {
        text-shadow:
            0 2px 12px rgba(0,0,0,0.6),
            0 0 16px rgba(244, 197, 66, 0.95),
            0 0 32px rgba(244, 197, 66, 0.55);
    }
}
.az-tile-cm.az-idle-bright {
    animation: az-idle-bright 3s ease-in-out forwards;
}
@keyframes az-idle-bright {
    0%, 100% { filter: brightness(1) saturate(1); }
    50%      { filter: brightness(1.18) saturate(1.25); }
}

/* ── 4 NUOVI effetti idle (Diego 2026-05-13 PM2): "nuovi effetti random" ── */

/* a) Border pulse: inset bordo dorato che pulsa */
.az-tile-cm.az-idle-border {
    animation: az-idle-border 2.5s ease-in-out forwards;
}
@keyframes az-idle-border {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(244, 197, 66, 0); }
    50%      { box-shadow: inset 0 0 0 3px rgba(244, 197, 66, 0.45); }
}

/* b) Hue shift: leggera variazione cromatica (foto + tile) */
.az-tile-cm.az-idle-hue {
    animation: az-idle-hue 3.5s ease-in-out forwards;
}
@keyframes az-idle-hue {
    0%, 100% { filter: hue-rotate(0deg); }
    50%      { filter: hue-rotate(12deg) saturate(1.1); }
}

/* c) Gentle shake: micro-rotazione (come un "ehi guardami") */
.az-tile-cm.az-idle-shake {
    animation: az-idle-shake 1.4s ease-in-out forwards;
}
@keyframes az-idle-shake {
    0%, 100%   { transform: rotate(0deg); }
    20%, 60%   { transform: rotate(-0.6deg); }
    40%, 80%   { transform: rotate(0.6deg); }
}

/* d) Vignette: scurimento radiale ai bordi della foto */
.az-tile-photo.az-idle-vignette::after {
    /* overlay temporaneo — non confligge con il gradient esistente */
}
.az-tile-cm.az-idle-vignette .az-tile-photo {
    animation: az-idle-vignette 3s ease-in-out forwards;
}
@keyframes az-idle-vignette {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(0,0,0,0); }
    50%      { box-shadow: inset 0 0 60px 10px rgba(0,0,0,0.55); }
}

/* Reduced motion: spegne tutto */
@media (prefers-reduced-motion: reduce) {
    .az-tile-cm,
    .az-tile-status .dot,
    .az-particle,
    .az-tile-photo,
    .az-tile-photo.az-shimmer::before,
    .az-tile-photo.az-idle-zoom,
    .az-tile-photo.az-idle-pan,
    .az-tile-name.az-idle-flash,
    .az-tile-cm.az-idle-bright,
    .az-tile-cm.az-idle-border,
    .az-tile-cm.az-idle-hue,
    .az-tile-cm.az-idle-shake,
    .az-tile-cm.az-idle-vignette .az-tile-photo {
        animation: none !important;
    }
    .az-tile-cm-main.az-tilt { transform: none !important; }
}
.az-tile-cm .az-tile-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Gradient: tile color sopra (12% bordo top per "fondere" col tile),
       trasparente al centro (foto visibile), nero sotto (testo leggibile) */
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, transparent 30%, rgba(0,0,0,0.78) 100%);
}
/* Hover zoom solo sul main (non si attiva se hoveri i mini-tile chat/call).
   Diego (2026-05-13 PM2): base è scale(1.05) → hover passa a scale(1.10). */
.az-tile-cm-main:hover .az-tile-photo {
    transform: scale(1.10);
}

/* Diego (2026-05-13 PM2): "in caso di mancanza provvisoria di fotografia,
   non mettiamo più il set di default ma possiamo lasciare lo sfondo di base".
   La tile mostra solo il colore palette del tile + gradient di leggibilità.
   No background-image, no DiceBear, no animazioni Ken Burns. */
.az-tile-photo.az-tile-photo-empty {
    background-image: none !important;
    background-color: transparent;
    /* Disabilita tutte le animazioni su tile senza foto reale */
    animation: none !important;
    transform: none !important;
}
/* Niente hover scale su tile senza foto */
.az-tile-cm-main:hover .az-tile-photo.az-tile-photo-empty { transform: none !important; }
.az-tile-info {
    position: relative;
    z-index: 1;
    color: #fff;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}
.az-tile-name {
    font-family: 'Playfair Display', serif;
    font-size: clamp(24px, 4.2vw, 30px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
    /* Diego (2026-05-13): nomi lunghi (CASSANDRA/MORRIGAN/SIBILLA) sui telefoni
       piccoli sbordavano. Permette wrap se serve + previene overflow visivo. */
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}
/* Diego (2026-05-19): 5 stelle nelle tile cartomante Azarath, oro su
   sfondo scuro, leggibili anche sopra le foto. */
.az-tile-stars {
    font-size: clamp(13px, 2.4vw, 16px);
    color: #f4c542;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    line-height: 1;
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.az-tile-stars-count {
    font-size: 0.75em;
    color: #f5e6d3;
    font-weight: 600;
    margin-left: 4px;
    opacity: 0.85;
}
@media (max-width: 480px) {
    .az-tile-stars {
        font-size: 12px;
        margin-bottom: 6px;
    }
}

/* Mobile small (iPhone 12/SE/mini): tile ≈ 180px, spazio nome ≈ 110px dopo
   il padding-right dei quick btn. Font ridotto + letter-spacing tighter
   così "CASSANDRA" (9 chars) entra senza troncamenti. */
@media (max-width: 480px) {
    .az-tile-name {
        font-size: clamp(16px, 4.8vw, 22px);
        letter-spacing: 0.015em;
        margin-bottom: 8px;
    }
    /* Diego (2026-05-13 PM2): "su iphone 1 rimpicciolire prezzo e LIBERO".
       Su iPhone 12/13/14 (~390-393px) i tile sono ~187px e prezzo/status
       occupavano troppo spazio rispetto al nome. */
    .az-tile-price {
        font-size: 13px;
        font-weight: 700;
    }
    .az-tile-status {
        font-size: 10.5px;
        padding: 3px 9px;
        letter-spacing: 0.06em;
    }
    .az-tile-status .dot { width: 7px; height: 7px; }
    /* Diego (2026-05-13 PM3): "vedi una cartomante in consulto e la parola
       viene tagliata". "IN CONSULTO" è 11 lettere → font ridotto + letter
       spacing minore + padding più stretto per busy. */
    .az-tile-status.busy {
        font-size: 9px;
        letter-spacing: 0.02em;
        padding: 3px 7px;
        gap: 5px;
    }
}
/* iPhone SE/mini (≤ 380px): ulteriore stretta */
@media (max-width: 380px) {
    .az-tile-cm-main { padding: 12px 54px 12px 12px; }
    .az-tile-name {
        font-size: clamp(14px, 4.5vw, 18px);
        letter-spacing: 0.01em;
    }
    .az-quick-btn { width: 40px; height: 40px; }
    .az-quick-btn svg { width: 20px; height: 20px; }
    .az-tile-cm-quick { bottom: 6px; right: 6px; gap: 4px; }
    .az-tile-price { font-size: 11.5px; }
    .az-tile-status {
        font-size: 9.5px;
        padding: 2px 7px;
        letter-spacing: 0.05em;
    }
    .az-tile-status .dot { width: 6px; height: 6px; }
    .az-tile-status.busy {
        font-size: 8px;
        letter-spacing: 0.01em;
        padding: 2px 6px;
        gap: 4px;
    }
}
.az-tile-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.az-tile-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 0;             /* squadrato netto, coerente col bento */
    font-size: clamp(12px, 2vw, 13px);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    background: rgba(255,255,255,0.94);
    color: #0a0a0a;
    white-space: nowrap;
}
.az-tile-status .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #16a34a;
}
.az-tile-status.busy .dot {
    background: #dc2626;
    animation: az-pulse 1.5s ease-in-out infinite;
}
.az-tile-status.offline .dot { background: #6b7280; }
@keyframes az-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.az-tile-price {
    color: #fff;
    font-weight: 500;
    font-size: clamp(13px, 2.2vw, 15px);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ─── TILE PROMO (giallo / mente / colore pieno) ──────────────── */
.az-tile-promo {
    color: #0a0a0a;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 14px 10px;  /* respiro orizzontale per testi lunghi su mobile */
}
.az-tile-promo .big {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 6.5vw, 64px);  /* leggermente ridotto da 48-72 → 40-64 */
    font-weight: 900;
    line-height: 1;
    color: #0a0a0a;
}
.az-tile-promo .label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 8px;
    padding: 3px 10px;
    background: #0a0a0a;
    color: #fff;
    display: inline-block;
}
.az-tile-promo .desc {
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
    max-width: 92%;
    line-height: 1.35;
    color: #0a0a0a;
}

/* Tile "Lavora con noi" — vortice fluo che ruota di 360° in continuo.
   Conic-gradient su pseudo-elemento ruotato: non ha "ritorno" come il
   linear → niente salti. Diego (2026-05-15). */
.az-tile-fluo {
    position: relative;
    background: #0a0a0a;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    overflow: hidden;
    isolation: isolate;
}
.az-tile-fluo::before {
    content: '';
    position: absolute;
    inset: -50%;
    /* Palette monocromatica oro: dal cream chiaro all'ambra profondo,
       senza salti netti = sembra una luce dorata che ruota. */
    background: conic-gradient(
        from 0deg,
        #fff4d0,
        #f4c542,
        #d4a015,
        #8b6914,
        #d4a015,
        #f4c542,
        #fff4d0
    );
    animation: az-fluo-rotate 18s linear infinite;
    z-index: -1;
    filter: blur(14px);
}
.az-tile-fluo-label {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(26px, 4.5vw, 44px);
    font-weight: 900;
    line-height: 1.05;
    color: #0a0a0a;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    letter-spacing: -0.01em;
}
@keyframes az-fluo-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Bio lunga della cartomante: su Azarath va ingrandita (Diego 2026-05-16:
   "il secondo testo, quello più lungo, è scritto troppo piccolo"). 14→17px
   con line-height 1.6 e tinta scura per leggibilità su card grigio chiaro. */
body.theme-azarath .cmr-bio-lunga {
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #1f2937 !important;
}
@media (max-width: 480px) {
    body.theme-azarath .cmr-bio-lunga { font-size: 16px !important; }
}

/* ─── Tile "Scopri il tuo destino" — foto tarocchi sparpagliati + overlay
   scuro + titolo oro al centro. Diego (2026-05-16). ─── */
.az-tile-destino {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #f4c542;
    text-decoration: none !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
    isolation: isolate;
}
.az-tile-destino::before {
    /* Overlay scuro radiale: scurisce i bordi e lascia il centro più
       leggibile, esalta il titolo oro al centro. */
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.55) 100%);
    z-index: 1;
}
.az-tile-destino-label {
    position: relative;
    z-index: 2;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(18px, 3.2vw, 28px);
    font-weight: 900;
    color: #f4c542;
    text-align: center;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-shadow:
        0 2px 12px rgba(0,0,0,0.85),
        0 0 24px rgba(0,0,0,0.6);
    padding: 0 8px;
}
.az-tile-destino:hover::before {
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.55) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);
}
@media (max-width: 480px) {
    .az-tile-destino-label { font-size: clamp(15px, 4vw, 20px); }
}

/* Tile "Assistenza WhatsApp" — verde brand WhatsApp, link a /contatti.
   Diego (2026-05-15): in fondo alla home, stile coerente con la
   pagina /contatti (cerchio verde grande). */
.az-tile-assist {
    background: #25D366;
    color: #fff !important;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    text-align: center;
    transition: background .15s ease;
}
.az-tile-assist:hover { background: #1ebe5b; }
.az-tile-assist-icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.az-tile-assist-label {
    font-size: clamp(14px, 2.4vw, 18px);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    letter-spacing: -0.005em;
}
@media (max-width: 480px) {
    .az-tile-assist-icon { width: 44px; height: 44px; }
    .az-tile-assist-icon svg { width: 28px; height: 28px; }
    .az-tile-assist-label { font-size: 13px; }
}

/* ─── Tile user (solo loggati su Azarath) ──────────────────────────
   Diego (2026-05-15 sera, secondo round): "togli la card col credito e
   il credito lo metti nel card profilo". Ora ci sono 2 tile:
   - Profilo (span 3) con credito grande sopra e "Profilo →" sotto
   - Esci (span 1) nera col solo simbolo + label ─────────────────── */
.az-tile-user-profile {
    grid-column: span 3;
    background: linear-gradient(135deg, #fbcfe8, #f9a8d4);
    color: #1a1d2a !important;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 14px 18px;
    gap: 10px;
    transition: filter .15s;
}
.az-tile-user-profile:hover { filter: brightness(0.97); }
.az-tile-user-balance {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.az-tile-user-balance-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.az-tile-user-balance-amount {
    font-size: clamp(28px, 6vw, 42px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}
.az-tile-user-profile-action {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: flex-end;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.az-tile-user-profile-action svg { flex-shrink: 0; }

.az-tile-user-logout {
    background: #1a1d2a;
    color: #fbcfe8 !important;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    transition: background .15s;
}
.az-tile-user-logout:hover { background: #0a0a0a; }
.az-tile-user-logout-lbl {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
@media (max-width: 900px) {
    .az-tile-user-profile { grid-column: span 1; }
}
@media (max-width: 480px) {
    .az-tile-user-profile {
        grid-column: span 1;
        padding: 12px 14px;
    }
    .az-tile-user-balance-amount { font-size: clamp(26px, 9vw, 36px); }
    .az-tile-user-profile-action {
        font-size: 11.5px;
        padding: 5px 10px;
    }
    .az-tile-user-profile-action svg { width: 18px; height: 18px; }
    .az-tile-user-logout { padding: 12px; gap: 6px; }
    .az-tile-user-logout svg { width: 26px; height: 26px; }
    .az-tile-user-logout-lbl { font-size: 12px; }
}

/* Diego (2026-05-13 PM2): "rimpicciolire testo coupon e rendere il tile
   cliccabile". Su mobile small il "+10€" e la desc sono ulteriormente
   ridotti per non occupare metà tile. */
@media (max-width: 480px) {
    .az-tile-promo { padding: 10px 8px; }
    .az-tile-promo .big {
        font-size: clamp(32px, 9vw, 44px);  /* più piccolo su mobile */
    }
    .az-tile-promo .label {
        font-size: 9.5px;
        letter-spacing: 0.08em;
        margin-top: 6px;
        padding: 2px 7px;
    }
    .az-tile-promo .desc {
        font-size: 10.5px;
        margin-top: 6px;
        line-height: 1.3;
    }
}
@media (max-width: 380px) {
    .az-tile-promo .big   { font-size: 28px; }
    .az-tile-promo .label { font-size: 9px; }
    .az-tile-promo .desc  { font-size: 10px; }
}

/* Quando il promo è un link (cliccabile), no underline, cursor pointer,
   piccolo lift in hover per segnalare interattività. */
a.az-tile-promo-link {
    text-decoration: none;
    color: inherit;
    transition: filter .2s ease;
}
a.az-tile-promo-link:hover {
    filter: brightness(1.06) saturate(1.1);
}

/* ─── TILE BIG (2 colonne, CTA grande) ───────────────────────── */
.az-tile-big {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
}
@media (max-width: 480px) {
    .az-tile-big { grid-column: span 1; aspect-ratio: 1 / 1; }
}

/* ─── TILE CTA (CTA principale, sfondo nero + scritta oro) ──── */
.az-tile-cta {
    background: #0a0a0a;
    color: #f4c542;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.az-tile-cta:hover { background: #1a1a1a; transform: scale(1.025); }
.az-tile-cta .arrow {
    font-family: 'Playfair Display', serif;
    font-size: 72px;
    font-weight: 900;
    color: #f4c542;
    line-height: 1;
}
.az-tile-cta .label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-top: 8px;
    color: #f4c542;
}

/* ─── TILE STATS (numero + label) ───────────────────────────── */
.az-tile-stats {
    color: #fff;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.az-tile-stats .num {
    font-family: 'Playfair Display', serif;
    font-size: clamp(54px, 8vw, 80px);
    font-weight: 900;
    line-height: 1;
    color: #fff;
}
.az-tile-stats .label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 8px;
    opacity: 0.9;
    line-height: 1.3;
    color: #fff;
}

/* ─── TRUST STRIP (footer cinta) ─────────────────────────────── */
.az-trust-strip {
    background: #f5e6d3;
    color: #0a0a0a;
    padding: 24px 18px;
    text-align: center;
    font-size: clamp(12.5px, 2vw, 13.5px);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
}
.az-trust-strip strong { font-weight: 900; }

/* ─── PROFILO CARTOMANTE: HERO PHOTO TILE (grande, occupa 2x2) ── */
.az-tile-hero-photo {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1 / 1;
    color: #fff;
}
@media (max-width: 480px) {
    .az-tile-hero-photo { grid-column: span 1; grid-row: span 1; }
}
.az-tile-hero-photo .az-tile-photo {
    /* Foto HD 600x600 — niente blur necessario. */
    filter: saturate(1.05);
}
.az-tile-hero-photo .az-tile-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.75) 100%);
}
.az-tile-photo-info {
    position: relative;
    z-index: 1;
    margin-top: auto;
}
.az-name-big {
    font-family: 'Playfair Display', serif;
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #fff;
    margin: 0;
    text-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.az-titolo {
    font-size: 14px;
    font-weight: 600;
    color: #f5e6d3;
    margin: 8px 0 14px;
    opacity: 0.95;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.az-status-row {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.az-price-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #f4c542;
    color: #0a0a0a;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: none;
    white-space: nowrap;
}

/* CTA strong (Chat/Voce nella scheda profilo).
   DESKTOP: cubo quadrato 1:1 — icona, label centrati.
   MOBILE (≤480px): stripe orizzontale piena, icona sx + label centro + freccia dx.
   Diego (2026-05-13): "su cellulare al posto dei 2 cubi grandi fammi 2 strisce". */
.az-tile-cta-strong {
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.az-tile-cta-strong .cta-icon,
.az-tile-cta-strong .cta-arrow {
    flex: 0 0 auto;
}
.az-tile-cta-strong .cta-arrow { display: none; }  /* freccia visibile solo su mobile */
.az-tile-cta-strong .cta-eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.78;
}
.az-tile-cta-strong .cta-main {
    font-family: 'Playfair Display', serif;
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    margin: 4px 0 0;
}
.az-tile-cta-strong .cta-fallback-note {
    display: block;
    font-size: 11px;
    margin-top: 6px;
    opacity: 0.7;
    font-weight: 600;
}

/* CTA "Occupata" (cartomante busy): tile rosso al posto dei 2 CTA chat/voce.
   Diego (2026-05-13). Non cliccabile, pulse rosso per attirare l'attenzione. */
.az-cta-busy {
    cursor: not-allowed;
    animation: az-busy-pulse-strong 2s ease-in-out infinite;
}
.az-cta-busy .cta-fallback-note {
    opacity: 0.9;
    line-height: 1.3;
    max-width: 280px;
}
@keyframes az-busy-pulse-strong {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196, 25, 42, 0.45); }
    50%      { box-shadow: 0 0 0 14px rgba(196, 25, 42, 0); }
}

/* MOBILE: stripe orizzontale piena */
@media (max-width: 480px) {
    .az-tile-cta-strong {
        aspect-ratio: auto;
        min-height: 76px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 14px 18px;
        text-align: left;
    }
    .az-tile-cta-strong .cta-text {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .az-tile-cta-strong .cta-main {
        font-size: 26px;
        margin: 0;
    }
    .az-tile-cta-strong .cta-eyebrow {
        font-size: 11px;
        opacity: 0.85;
    }
    .az-tile-cta-strong .cta-arrow {
        display: block;
        opacity: 0.7;
    }
    .az-tile-cta-strong .cta-icon {
        width: 30px;
        height: 30px;
    }
    .az-tile-cta-strong .cta-fallback-note {
        font-size: 10.5px;
        margin-top: 2px;
    }
}
.az-tile-cta-strong .cta-fallback-note {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.04em;
    margin-top: 6px;
    font-style: italic;
}

/* Tile text (descrizione / chi è) */
.az-tile-text {
    justify-content: flex-start;
    text-align: left;
    color: #0a0a0a;
}
.az-tile-wide { grid-column: span 2; }
@media (max-width: 480px) { .az-tile-wide { grid-column: span 1; } }
.az-tile-eyebrow {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #0a0a0a;
    margin-bottom: 12px;
    opacity: 0.7;
}
.az-tile-descr {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.az-tile-bio {
    /* Diego (2026-05-16): "il secondo testo, quello più lungo, è scritto
       troppo piccolo, ingrandiscilo" → 13 → 17px, opacity più piena. */
    font-size: 17px;
    line-height: 1.6;
    color: #1f1208;
    margin: 0;
    opacity: 0.95;
}
@media (max-width: 480px) {
    .az-tile-bio { font-size: 16px; }
}

/* Tile tags (specialità) */
.az-tile-tags {
    color: #fff;
    justify-content: flex-start;
}
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.az-tag {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    backdrop-filter: blur(4px);
}

/* Fix display dei link in az-tile (Plesk default può sottolineare) */
body.theme-azarath a.az-tile { text-decoration: none; }
body.theme-azarath a.az-tile:hover { text-decoration: none; }

/* Nascondi elementi base che non vogliamo su Azarath */
body.theme-azarath .hero,
body.theme-azarath .hero-trust,
body.theme-azarath .bottom-cta {
    display: none;
}

/* Footer su sfondo nero */
body.theme-azarath .footer {
    background: #0a0a0a;
    color: #c9bfb0;
    border-top: 1px solid rgba(245, 230, 211, 0.12);
}
body.theme-azarath .footer a { color: #f4c542; }
body.theme-azarath .footer a:hover { color: #f5e6d3; }

/* ─── Pulsanti & form Azarath (override globale) ────────────────────
   Diego (2026-05-13): "anche accedi e registrazione e pulsanti vari fai
   con lo stile del sito". Squadrati, niente gradient, palette Azarath.
   Override di .btn / .btn-primary / .btn-ghost / .btn-sm su tutto il sito
   quando siamo sul brand Azarath. */
body.theme-azarath .btn,
body.theme-azarath .btn-primary,
body.theme-azarath .btn-ghost,
body.theme-azarath button.btn,
body.theme-azarath input[type="submit"],
body.theme-azarath button[type="submit"] {
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    font-family: 'Inter', system-ui, sans-serif;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

body.theme-azarath .btn-primary,
body.theme-azarath button[type="submit"]:not(.btn-ghost),
body.theme-azarath input[type="submit"] {
    background: #f4c542 !important;
    color: #0a0a0a !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(244, 197, 66, 0.32);
}
body.theme-azarath .btn-primary:hover,
body.theme-azarath button[type="submit"]:not(.btn-ghost):hover {
    background: #ffd75e !important;
    box-shadow: 0 6px 22px rgba(244, 197, 66, 0.50);
    transform: translateY(-1px);
}

body.theme-azarath .btn-ghost {
    background: transparent !important;
    color: #f5e6d3 !important;
    border: 1.5px solid #f5e6d3 !important;
    box-shadow: none !important;
}
body.theme-azarath .btn-ghost:hover {
    background: #f5e6d3 !important;
    color: #0a0a0a !important;
}

/* Topbar specifico: Accedi (ghost) + Registrati (primary) */
body.theme-azarath .topbar-accedi {
    /* eredita btn-ghost */
}
body.theme-azarath .topbar-registrati {
    /* eredita btn-primary (oro su nero) */
}

body.theme-azarath .btn-sm {
    padding: 9px 16px !important;
    font-size: 12px !important;
}

/* Form inputs Azarath: stessa palette dark del tema */
body.theme-azarath input[type="text"],
body.theme-azarath input[type="email"],
body.theme-azarath input[type="tel"],
body.theme-azarath input[type="password"],
body.theme-azarath input[type="number"],
body.theme-azarath input[type="search"],
body.theme-azarath select,
body.theme-azarath textarea {
    background: #15101c;
    color: #f5e6d3;
    border: 1px solid rgba(244, 197, 66, 0.18);
    border-radius: 0;
    padding: 12px 14px;
    font-family: 'Inter', sans-serif;
}
body.theme-azarath input:focus,
body.theme-azarath select:focus,
body.theme-azarath textarea:focus {
    outline: none;
    border-color: #f4c542;
    box-shadow: 0 0 0 2px rgba(244, 197, 66, 0.25);
}
body.theme-azarath ::placeholder {
    color: rgba(245, 230, 211, 0.4);
    font-style: italic;
}

/* Labels e link nei form */
body.theme-azarath label,
body.theme-azarath .form-label {
    color: #d4cab5;
    font-weight: 600;
    letter-spacing: 0.02em;
}
body.theme-azarath a:not(.btn):not(.az-tile):not(.az-tile-cm-main):not(.az-quick-btn):not(.az-tile-cta-strong) {
    color: #f4c542;
}
body.theme-azarath a:not(.btn):hover {
    color: #f5e6d3;
}

/* Card / containers generici (pagine login, register, profilo cliente) */
body.theme-azarath .card,
body.theme-azarath .auth-box,
body.theme-azarath .panel {
    background: #15101c;
    border: 1px solid rgba(244, 197, 66, 0.15);
    border-radius: 0;
    color: #f5e6d3;
}

/* Pallino stato top-left sulle tile cartomante Azarath. Verde per online,
   rosso per in chiamata. +30% rispetto al pallino chip originale. */
.az-tile-online-dot {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #22c55e;
    z-index: 3;
    pointer-events: none;
    animation: az-dot-pulse-bright 2.2s ease-in-out infinite;
}
@keyframes az-dot-pulse-bright {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    50%      { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}
/* Variante busy: rosso + pulse rosso */
.az-tile-online-dot--busy {
    background: #dc2626;
    animation: az-dot-pulse-busy 1.6s ease-in-out infinite;
}
@keyframes az-dot-pulse-busy {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
    50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

/* ════════════════════════════════════════════════════════════
   AZARATH — pagina /lavora-con-noi in dark theme (nero + oro).
   Diego (2026-05-15): "form aprilo in black" — testi nero su
   nero non si vedevano. Override degli inline style con !important.
   ════════════════════════════════════════════════════════════ */
body.theme-azarath .lcn-hero h1 {
    color: #f4c542 !important;
}
body.theme-azarath .lcn-hero p {
    color: #d8c8b5 !important;
}
body.theme-azarath form[action="/lavora-con-noi"] input,
body.theme-azarath form[action="/lavora-con-noi"] textarea,
body.theme-azarath form[action="/lavora-con-noi"] select {
    background: #14091f !important;
    color: #f5e6d3 !important;
    border: 1px solid rgba(244, 197, 66, 0.28) !important;
    border-radius: 0 !important;
}
body.theme-azarath form[action="/lavora-con-noi"] input::placeholder,
body.theme-azarath form[action="/lavora-con-noi"] textarea::placeholder {
    color: rgba(245, 230, 211, 0.4) !important;
}
body.theme-azarath form[action="/lavora-con-noi"] label > span {
    color: #f5e6d3 !important;
}
body.theme-azarath form[action="/lavora-con-noi"] small {
    color: rgba(245, 230, 211, 0.55) !important;
}
body.theme-azarath form[action="/lavora-con-noi"] button[type="submit"] {
    background: #f4c542 !important;
    color: #0a0a0a !important;
    border: 0 !important;
    border-radius: 0 !important;
}
body.theme-azarath form[action="/lavora-con-noi"] button[type="submit"]:hover {
    background: #f7d264 !important;
}