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

    /* ── 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); }
.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: rgba(250, 246, 242, 0.92);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--c-line);
}
.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-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 {
    padding: 32px 20px 40px;
    text-align: center;
    border-top: 1px solid var(--c-line);
    margin-top: 24px;
    font-size: 12px;
    color: var(--c-ink-mute);
}
.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; }

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

@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;
}

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