/* ════════════════════════════════════════════════════════════
   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;
    padding: 12px 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; }
}
.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; }

/* ================================================================
   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 */
body.theme-azarath .topbar {
    background: #0a0a0a;
    border-bottom: 1px solid rgba(245, 230, 211, 0.15);
}
body.theme-azarath .topbar .brand,
body.theme-azarath .topbar .brand a {
    color: #f5e6d3;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    letter-spacing: 0.08em;
}
body.theme-azarath .topbar .brand-logo-img { display: none; }
body.theme-azarath .topbar .brand::before {
    content: 'AZARATH';
    color: #f4c542;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    letter-spacing: 0.12em;
    font-size: 20px;
}
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; }

/* 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%;
    background: #0a0a0a;
    color: #0a0a0a;
    min-height: 100vh;
}

/* ─── HERO STRIP (top banner) ──────────────────────────────────── */
.az-hero {
    background: #0a0a0a;
    color: #f5e6d3;
    padding: 56px 24px;
    text-align: center;
    border-bottom: 2px solid #f5e6d3;
}
.az-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 900;
    letter-spacing: 0.06em;
    color: #f5e6d3;
    text-transform: uppercase;
    margin: 0;
    line-height: 0.95;
}
.az-hero-title span { color: #f4c542; }
.az-hero-sub {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    margin-top: 12px;
    color: #c9bfb0;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.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);
    gap: 0;
    width: 100%;
}
@media (max-width: 900px) {
    .az-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .az-bento { grid-template-columns: 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; }
.az-tile.is-off { filter: grayscale(0.4) brightness(0.7); }
.az-tile.is-off:hover { transform: none; }

/* Tile cartomante con foto background */
.az-tile-cm { color: #fff; }
.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. Solo
       leggera saturazione per coerenza con la palette colorata dei tile. */
    transition: filter .2s, transform .2s;
}
.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%);
}
.az-tile-cm:hover .az-tile-photo {
    transform: scale(1.04);  /* zoom leggero hover */
}
.az-tile-info {
    position: relative;
    z-index: 1;
    color: #fff;
}
.az-tile-name {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    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);
}
.az-tile-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.az-tile-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    background: rgba(255,255,255,0.92);
    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: 800;
    font-size: 14px;
    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;
}
.az-tile-promo .big {
    font-family: 'Playfair Display', serif;
    font-size: clamp(48px, 7vw, 72px);
    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: 10px;
    padding: 3px 10px;
    background: #0a0a0a;
    color: #fff;
    display: inline-block;
}
.az-tile-promo .desc {
    font-size: 13px;
    font-weight: 600;
    margin-top: 12px;
    max-width: 85%;
    line-height: 1.4;
    color: #0a0a0a;
}

/* ─── 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;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.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) */
.az-tile-cta-strong {
    color: #f4c542;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
}
.az-tile-cta-strong .cta-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.85;
    color: #fff;
}
.az-tile-cta-strong .cta-main {
    font-family: 'Playfair Display', serif;
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
    margin: 10px 0 6px;
}
.az-tile-cta-strong .cta-price {
    font-size: 13px;
    font-weight: 800;
    color: #f4c542;
    background: rgba(0,0,0,0.35);
    padding: 4px 10px;
    border-radius: 100px;
    margin-top: 6px;
}

/* 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 {
    font-size: 13px;
    line-height: 1.55;
    color: #2a1f00;
    margin: 0;
    opacity: 0.85;
}

/* 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; }