/* ============================================================
   Wizard "AI Email Composer", step 4: card delle proposte (.jo-aip)
   ------------------------------------------------------------
   Stessa scelta di template-picker.css: CSS puro servito da
   public/ perche' il pannello non compila Tailwind su queste
   viste. Tema scuro agganciato a `.dark`, mai colori cablati
   nella vista (l'unica eccezione e' DENTRO l'iframe srcdoc, che
   e' un documento email e resta chiaro per natura).
   ============================================================ */

.jo-aip {
    --jo-aip-line: var(--jo-surface-200, #e4e4e7);
    --jo-aip-bg: #ffffff;
    --jo-aip-bg-sunk: var(--jo-surface-50, #fafafa);
    --jo-aip-title: var(--jo-surface-800, #27272a);
    --jo-aip-muted: var(--jo-surface-500, #71717a);
    --jo-aip-accent: var(--jo-primary-base, #7400ff);
    --jo-aip-accent-strong: #6100d6;
    --jo-aip-accent-text: #6100d6;
    --jo-aip-badge-bg: var(--jo-surface-100, #f4f4f5);

    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.dark .jo-aip {
    --jo-aip-line: rgba(255, 255, 255, .1);
    --jo-aip-bg: #27272a;
    --jo-aip-bg-sunk: #18181b;
    --jo-aip-title: #f4f4f5;
    --jo-aip-muted: #a1a1aa;
    --jo-aip-accent: #a970ff;
    --jo-aip-accent-strong: #b98aff;
    --jo-aip-accent-text: #c9a5ff;
    --jo-aip-badge-bg: rgba(255, 255, 255, .06);
}

/* ---------- intestazione + riepilogo scelte ---------- */
.jo-aip-head { display: flex; flex-direction: column; gap: .3rem; }

.jo-aip-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--jo-aip-title);
}

.jo-aip-sub { font-size: .85rem; color: var(--jo-aip-muted); }

.jo-aip-recap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--jo-aip-accent-text);
}

.jo-aip-recap-item { display: inline-flex; align-items: center; gap: .3rem; }
.jo-aip-recap-icon { width: .95rem; height: .95rem; }
.jo-aip-recap-sep { color: var(--jo-aip-muted); }

/* ---------- card ---------- */
.jo-aip-card {
    border: 1px solid var(--jo-aip-line);
    border-radius: .75rem;
    background: var(--jo-aip-bg);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.jo-aip-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.jo-aip-card-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--jo-aip-title);
}

.jo-aip-tone {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--jo-aip-muted);
    background: var(--jo-aip-badge-bg);
    border-radius: 999px;
    padding: .2rem .65rem;
    white-space: nowrap;
}

.jo-aip-field { display: flex; flex-direction: column; gap: .1rem; }

.jo-aip-field-label {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: none;
    color: var(--jo-aip-muted);
}

.jo-aip-field-value { font-size: .875rem; color: var(--jo-aip-title); }
.jo-aip-field-value--strong { font-weight: 600; }

/* ---------- riga azioni della card ---------- */
.jo-aip-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .25rem;
}

.jo-aip-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--jo-aip-accent-text);
}
.jo-aip-toggle:hover { text-decoration: underline; }
.jo-aip-toggle-icon { width: 1rem; height: 1rem; }

.jo-aip-nopreview { font-size: .8125rem; color: var(--jo-aip-muted); font-style: italic; }

.jo-aip-use {
    background: var(--jo-aip-accent);
    color: #ffffff;
    font-size: .8125rem;
    font-weight: 600;
    padding: .5rem 1.1rem;
    border-radius: .6rem;
    transition: background .15s;
}
.jo-aip-use:hover { background: var(--jo-aip-accent-strong); }
.jo-aip-use:disabled { opacity: .6; cursor: wait; }

/* ---------- anteprima espansa ---------- */
.jo-aip-preview {
    margin: .35rem -1.1rem -1rem;           /* sfonda il padding della card */
    border-top: 1px solid var(--jo-aip-line);
    border-radius: 0 0 .75rem .75rem;
    background: var(--jo-aip-bg-sunk);
    padding: 0;
}

.jo-aip-preview-frame {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0 0 .75rem .75rem;
    /* L'altezza vera la scrive l'onload (scrollHeight del documento):
       questa e' solo il segnaposto mentre carica. */
    height: 16rem;
}

.jo-aip-empty { font-size: .875rem; color: var(--jo-aip-muted); }

/* ---------- titoletto in testa a ogni step (.jo-aih) ---------- */
.jo-aih {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.jo-aih-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--jo-surface-800, #27272a);
}

.jo-aih-sub {
    font-size: .85rem;
    color: var(--jo-surface-500, #71717a);
}

.dark .jo-aih-title { color: #f4f4f5; }
.dark .jo-aih-sub { color: #a1a1aa; }

/* ---------- riquadro "Tip" in coda allo step Contenuto (.jo-ait) ----------
   Ancorato 10px sopra il footer del dialog (che e' absolute, alto ~4.25rem:
   2rem di padding + il bottone), non nel flusso dopo la checkbox: cosi'
   resta attaccato al fondo anche con lo step semivuoto. Vive nel container
   dello step 2, quindi negli altri step sparisce da solo (display:none). */
.jo-aiw .jo-ait {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: calc(4.25rem + 10px);
    z-index: 4;
}

.jo-ait {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    padding: .7rem .9rem;
    border: 1px solid #bfdbfe;                /* blue-200 */
    border-radius: .6rem;
    background: #eff6ff;                      /* blue-50 */
    font-size: .8125rem;
    line-height: 1.5;
    color: #1e40af;                           /* blue-800 */
}

.dark .jo-ait {
    border-color: rgba(96, 165, 250, .35);
    background: rgba(59, 130, 246, .1);
    color: #93c5fd;                           /* blue-300 */
}

.jo-ait-icon { flex: 0 0 auto; }

/* ---------- step 1: card degli obiettivi (.jo-aio) ---------- */
.jo-aio {
    --jo-aio-line: var(--jo-surface-200, #e4e4e7);
    --jo-aio-bg: #ffffff;
    --jo-aio-title: var(--jo-surface-800, #27272a);
    --jo-aio-muted: var(--jo-surface-500, #71717a);
    --jo-aio-accent: var(--jo-primary-base, #7400ff);
    --jo-aio-accent-soft: #f7f0ff;

    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.dark .jo-aio {
    --jo-aio-line: rgba(255, 255, 255, .1);
    --jo-aio-bg: #27272a;
    --jo-aio-title: #f4f4f5;
    --jo-aio-muted: #a1a1aa;
    --jo-aio-accent: #a970ff;
    --jo-aio-accent-soft: rgba(169, 112, 255, .12);
}

.jo-aio-group { display: flex; flex-direction: column; gap: .5rem; }

.jo-aio-group-label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--jo-aio-muted);
}

.jo-aio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

@media (max-width: 40rem) {
    .jo-aio-grid { grid-template-columns: 1fr; }
}

.jo-aio-card {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    text-align: left;
    padding: .75rem .85rem;
    border: 1px solid var(--jo-aio-line);
    border-radius: .75rem;
    background: var(--jo-aio-bg);
    transition: border-color .15s, background .15s;
}

.jo-aio-card:hover { border-color: var(--jo-aio-accent); }

.jo-aio-card--on {
    border-color: var(--jo-aio-accent);
    background: var(--jo-aio-accent-soft);
    box-shadow: 0 0 0 1px var(--jo-aio-accent);
}

.jo-aio-card-icon {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    margin-top: .1rem;
    color: var(--jo-aio-accent);
}

.jo-aio-card-title {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--jo-aio-title);
}

.jo-aio-card-desc {
    display: block;
    margin-top: .15rem;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--jo-aio-muted);
}

/* ---------- step 3: card dei preset audience (.jo-aiu) ---------- */
.jo-aiu {
    --jo-aiu-line: var(--jo-surface-200, #e4e4e7);
    --jo-aiu-bg: #ffffff;
    --jo-aiu-title: var(--jo-surface-800, #27272a);
    --jo-aiu-muted: var(--jo-surface-500, #71717a);
    --jo-aiu-accent: var(--jo-primary-base, #7400ff);
    --jo-aiu-accent-soft: #f7f0ff;
    --jo-aiu-badge-bg: var(--jo-surface-100, #f4f4f5);

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

.dark .jo-aiu {
    --jo-aiu-line: rgba(255, 255, 255, .1);
    --jo-aiu-bg: #27272a;
    --jo-aiu-title: #f4f4f5;
    --jo-aiu-muted: #a1a1aa;
    --jo-aiu-accent: #a970ff;
    --jo-aiu-accent-soft: rgba(169, 112, 255, .12);
    --jo-aiu-badge-bg: rgba(255, 255, 255, .06);
}

@media (max-width: 52rem) {
    .jo-aiu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 36rem) {
    .jo-aiu { grid-template-columns: 1fr; }
}

.jo-aiu-card {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    text-align: left;
    padding: .8rem .9rem;
    border: 1px solid var(--jo-aiu-line);
    border-radius: .75rem;
    background: var(--jo-aiu-bg);
    transition: border-color .15s, background .15s;
}

.jo-aiu-card:hover { border-color: var(--jo-aiu-accent); }

.jo-aiu-card--on {
    border-color: var(--jo-aiu-accent);
    background: var(--jo-aiu-accent-soft);
    box-shadow: 0 0 0 1px var(--jo-aiu-accent);
}

.jo-aiu-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.jo-aiu-card-icon {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--jo-aiu-accent);
}

.jo-aiu-card-badge {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--jo-aiu-muted);
    background: var(--jo-aiu-badge-bg);
    border-radius: 999px;
    padding: .15rem .6rem;
    white-space: nowrap;
}

.jo-aiu-card-title {
    margin-top: .25rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--jo-aiu-title);
}

.jo-aiu-card-desc {
    font-size: .75rem;
    line-height: 1.4;
    color: var(--jo-aiu-muted);
}

/* ---------- navigazione del wizard nel footer del dialog (.jo-aiw) ----------
   Il footer nativo della modale e' vuoto (submit spento: si conferma dalla
   card della proposta), quindi la riga Indietro/Avanti del wizard — ultimo
   figlio di .fi-fo-wizard — fa da footer del dialog.

   ANCORAGGIO ASSOLUTO alla finestra della modale, non sticky/flex nel flusso:
   sticky non incolla nulla finche' il contenuto non scrolla (step corti =
   bottoni a mezz'aria), e la catena flex si spezza sui wrapper-griglia che
   Filament mette tra corpo e wizard. Il corpo si riserva lo spazio del
   footer con un padding-bottom, cosi' l'ultimo contenuto non ci finisce
   sotto a fine scroll. */
.fi-modal-window.jo-aiw { position: relative; }

.jo-aiw .fi-modal-content { padding-bottom: 5.5rem; }

.jo-aiw .fi-fo-wizard > div:last-child {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    margin: 0;
    padding: 1rem 1.5rem;
    background: #ffffff;
    border-top: 1px solid var(--jo-surface-200, #e4e4e7);
    /* Stesso raggio della finestra (rounded-xl), o gli angoli sbordano. */
    border-radius: 0 0 .75rem .75rem;
}

.dark .jo-aiw .fi-fo-wizard > div:last-child {
    background: #18181b;
    border-top-color: rgba(255, 255, 255, .1);
}

/* Riordino dei bottoni del footer. Ordine nel DOM del wizard blade:
   1 Indietro (previous) · 2 Chiudi (cancel) · 3 Avanti (next) · 4 submit
   (vuoto, spento). Qui: Chiudi a sinistra e SEMPRE visibile (il display
   !important scavalca lo style inline di x-show, che lo terrebbe solo sul
   primo step), Indietro e Avanti raggruppati a destra col gap del wizard
   come distanza. */
.jo-aiw .fi-fo-wizard > div:last-child > span:nth-child(1) {
    order: 2;
    margin-left: auto;              /* spinge il gruppo Indietro+Avanti a dx */
}

.jo-aiw .fi-fo-wizard > div:last-child > span:nth-child(2) {
    order: 1;
    display: block !important;
}

.jo-aiw .fi-fo-wizard > div:last-child > span:nth-child(3) { order: 3; }
.jo-aiw .fi-fo-wizard > div:last-child > span:nth-child(4) { order: 4; }

/* ---------- step Contenuto: link "Apri la pagina del soggiorno" ----------
   Nell'helper della checkbox wiz_stay_cta (EmailTemplateResource::
   stayCtaHelperText): apre in nuova scheda l'anteprima pre-stay dell'hotel. */
.jo-stay-cta-preview {
    display: inline-block;
    margin-left: .25rem;
    /* fuori da .jo-aip: niente variabili locali delle card */
    color: var(--jo-primary-base, #7400ff);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.jo-stay-cta-preview:hover { color: #6100d6; }