/* ===========================================================================
   SPJ — Marketing, trasparenza e livelli di servizio
   Usa le variabili del sito (--spj-*): se un giorno la palette cambia,
   questo foglio la segue da solo.
   =========================================================================== */

/* --------------------------------------------------------------- LIVELLI */
.apjm-liv .apjm-liv-grid{
  display:grid; gap:18px; margin-top:30px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:900px){ .apjm-liv .apjm-liv-grid{ grid-template-columns:1fr; } }

.apjm-liv-c{
  background:var(--spj-pan); border:1px solid var(--spj-line);
  border-radius:var(--spj-r); padding:24px 22px 22px;
  display:flex; flex-direction:column; cursor:pointer;
  transition:border-color .18s ease, transform .18s ease;
}
.apjm-liv-c:hover{ border-color:var(--spj-goldd); transform:translateY(-2px); }
.apjm-liv-c[aria-selected="true"]{
  border-color:var(--spj-gold); box-shadow:0 0 0 1px var(--spj-gold) inset;
}

/* Le stelle devono vedersi da lontano: sono il primo segnale della scheda. */
.apjm-stars{ line-height:1; margin:0 0 14px; white-space:nowrap; }
.apjm-stars .apjm-st{
  font-size:30px; color:var(--spj-gold); letter-spacing:2px;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.apjm-liv-mini .apjm-stars .apjm-st{ font-size:26px; }

.apjm-liv-n{
  font:600 21px/1.2 var(--spj-serif); color:var(--spj-gold2);
  margin:0 0 3px; letter-spacing:.2px;
}
.apjm-liv-cat{
  font:500 12px/1.35 var(--spj-sans); color:var(--spj-tx3);
  text-transform:uppercase; letter-spacing:.9px; margin:0 0 14px;
}
/* L'altezza minima la scrive lo script, misurando le tre schede: cosi'
   «Cosa succede spesso» parte dalla stessa riga in tutte e cinque le lingue.
   Ci ho provato prima con subgrid: in Chromium il padding della scheda sfasa
   le righe della sotto-griglia e l'allineamento salta senza dare errore.
   Se lo script non gira, resta l'allineamento in basso del flex: meno bello,
   non rotto. */
.apjm-liv-cos{
  font:400 14.5px/1.65 var(--spj-sans); color:var(--spj-tx2); margin:0 0 18px;
}

/* «Cosa succede spesso»: e' il cuore della scheda, non una nota a pie'. */
.apjm-sp{
  border-top:1px solid var(--spj-line); padding-top:16px; margin-top:0;
}
.apjm-sp-h{
  display:block; font:600 11.5px/1 var(--spj-sans); color:var(--spj-amb);
  text-transform:uppercase; letter-spacing:1px; margin:0 0 10px;
}
.apjm-sp ul{ list-style:none; margin:0; padding:0; }
.apjm-sp li{
  font:400 13.5px/1.6 var(--spj-sans); color:var(--spj-tx2);
  padding-left:18px; position:relative; margin:0 0 9px;
}
.apjm-sp li:last-child{ margin-bottom:0; }
.apjm-sp li::before{
  content:"—"; position:absolute; left:0; top:0; color:var(--spj-goldd);
}

/* La tendina: c'e' per chi la vuole, non intralcia chi non la vuole. */
.apjm-det{ margin-top:16px; }
.apjm-det summary{
  cursor:pointer; list-style:none;
  font:600 13px/1.4 var(--spj-sans); color:var(--spj-gold2);
  padding:9px 0; border-top:1px solid var(--spj-line);
}
.apjm-det summary::-webkit-details-marker{ display:none; }
.apjm-det summary::after{
  content:"+"; float:right; color:var(--spj-goldd);
  font-weight:400; font-size:16px; line-height:1.2;
}
.apjm-det[open] summary::after{ content:"\2013"; }
.apjm-det summary:hover{ color:var(--spj-gold); }
.apjm-det summary:focus-visible{ outline:2px solid var(--spj-gold); outline-offset:3px; }
.apjm-det p{
  font:400 13.5px/1.7 var(--spj-sans); color:var(--spj-tx2); margin:4px 0 0;
}

.apjm-liv-b{
  margin-top:18px; width:100%; cursor:pointer;
  background:transparent; color:var(--spj-gold2);
  border:1px solid var(--spj-goldd); border-radius:10px; padding:11px 14px;
  font:600 13.5px/1 var(--spj-sans); letter-spacing:.2px;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.apjm-liv-b:hover{ background:var(--spj-gold); color:#0B1219; border-color:var(--spj-gold); }
.apjm-liv-c[aria-selected="true"] .apjm-liv-b{
  background:var(--spj-gold); color:#0B1219; border-color:var(--spj-gold);
}

.apjm-liv-nota{
  font:400 12.5px/1.7 var(--spj-sans); color:var(--spj-tx3);
  margin:22px 0 0; max-width:780px;
}

/* ------------------------------------------------------- PENALI E TABELLA */
.apjm-tab{
  width:100%; border-collapse:collapse; margin-top:26px;
  font:400 14.5px/1.5 var(--spj-sans);
}
.apjm-tab th{
  text-align:left; background:var(--spj-pan2); color:var(--spj-tx);
  font-weight:600; font-size:13px; letter-spacing:.4px;
  padding:12px 16px; border:1px solid var(--spj-line);
}
.apjm-tab td{
  padding:12px 16px; border:1px solid var(--spj-line); color:var(--spj-tx2);
}
.apjm-tab td.apjm-pc{
  color:var(--spj-gold2); font-weight:600; text-align:right; white-space:nowrap;
}
.apjm-tab tr:last-child td.apjm-pc{ color:var(--spj-red); }

.apjm-nota{
  font:400 12.5px/1.75 var(--spj-sans); color:var(--spj-tx3);
  margin:18px 0 0; max-width:820px;
}

/* ---------------------------------------------------------------- COSTI */
.apjm-costi-grid{
  display:grid; gap:16px; margin-top:30px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:900px){ .apjm-costi-grid{ grid-template-columns:1fr; } }
.apjm-costo{
  background:var(--spj-pan); border:1px solid var(--spj-line);
  border-radius:var(--spj-r); padding:20px;
}
.apjm-costo h3{
  font:600 16px/1.3 var(--spj-sans); color:var(--spj-gold2); margin:0 0 8px;
}
.apjm-costo p{
  font:400 13.8px/1.65 var(--spj-sans); color:var(--spj-tx2); margin:0;
}

/* Sul telefono le stelle restano grandi: sono il segnale, non un ornamento,
   e la tabella diventa una scheda per riga perche' due colonne su 390 px
   spezzano le parole. */
@media (max-width:640px){
  .apjm-liv-c{ padding:20px 18px 18px; }
  .apjm-stars .apjm-st{ font-size:27px; }
  .apjm-tab, .apjm-tab thead, .apjm-tab tbody,
  .apjm-tab tr, .apjm-tab td, .apjm-tab th{ display:block; }
  .apjm-tab thead{ display:none; }
  .apjm-tab tr{
    border:1px solid var(--spj-line); border-radius:12px;
    margin-bottom:10px; overflow:hidden;
  }
  .apjm-tab td{ border:0; padding:11px 15px; }
  .apjm-tab td.apjm-pc{
    text-align:left; border-top:1px solid var(--spj-line); background:var(--spj-pan);
  }
}

/* ------------------------------------------------ DIVIDERE IL COSTO */
.apjm-cond-grid{
  display:grid; gap:16px; margin-top:28px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:900px){ .apjm-cond-grid{ grid-template-columns:1fr; } }
.apjm-cond-c{
  background:var(--spj-pan); border:1px solid var(--spj-line);
  border-radius:var(--spj-r); padding:20px 22px; position:relative;
}
.apjm-cond-n{
  display:block; font:600 12px/1 var(--spj-sans); color:var(--spj-goldd);
  letter-spacing:1.5px; margin:0 0 10px;
}
.apjm-cond-c h3{
  font:600 16px/1.3 var(--spj-sans); color:var(--spj-gold2); margin:0 0 8px;
}
.apjm-cond-c p{
  font:400 13.8px/1.65 var(--spj-sans); color:var(--spj-tx2); margin:0;
}

/* La casella e' grande apposta: e' una scelta, non una postilla. */
.apjm-cond-ck{
  display:flex; align-items:flex-start; gap:13px; cursor:pointer;
  margin:24px 0 0; padding:16px 20px;
  background:var(--spj-pan); border:1px solid var(--spj-goldd);
  border-radius:var(--spj-r);
  font:500 15px/1.5 var(--spj-sans); color:var(--spj-tx);
}
.apjm-cond-ck:hover{ border-color:var(--spj-gold); }
.apjm-cond-ck input{
  width:20px; height:20px; margin:1px 0 0; flex:0 0 auto;
  accent-color:var(--spj-gold); cursor:pointer;
}
.apjm-cond-ck:focus-within{ outline:2px solid var(--spj-gold); outline-offset:3px; }

/* ------------------------------- LA STRISCIA DENTRO I MODULI */
.apjm-strip{
  margin:22px 0; padding:18px 20px;
  background:var(--spj-pan); border:1px solid var(--spj-line);
  border-radius:var(--spj-r);
}
.apjm-strip-h{
  display:block; font:600 11.5px/1 var(--spj-sans); color:var(--spj-gold);
  text-transform:uppercase; letter-spacing:1.1px; margin:0 0 13px;
}
.apjm-strip-row{ display:flex; gap:10px; flex-wrap:wrap; }
.apjm-strip-b{
  flex:1 1 150px; cursor:pointer; text-align:center;
  background:transparent; color:var(--spj-tx2);
  border:1px solid var(--spj-line); border-radius:10px; padding:11px 12px;
  font:inherit; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.apjm-strip-b .s{
  display:block; font-size:17px; line-height:1; color:var(--spj-goldd); letter-spacing:2px;
}
.apjm-strip-b .n{
  display:block; margin-top:5px; font:600 13px/1 var(--spj-sans);
}
.apjm-strip-b:hover{ border-color:var(--spj-goldd); color:var(--spj-tx); }
.apjm-strip-b.on{
  border-color:var(--spj-gold); background:rgba(201,169,97,.10); color:var(--spj-tx);
}
.apjm-strip-b.on .s{ color:var(--spj-gold); }
.apjm-strip-b:focus-visible{ outline:2px solid var(--spj-gold); outline-offset:2px; }

.apjm-strip-ck{
  display:flex; align-items:flex-start; gap:11px; cursor:pointer; margin:14px 0 0;
  font:400 13.5px/1.5 var(--spj-sans); color:var(--spj-tx2);
}
.apjm-strip-ck input{
  width:17px; height:17px; margin:1px 0 0; flex:0 0 auto;
  accent-color:var(--spj-gold); cursor:pointer;
}
.apjm-strip-a{
  display:inline-block; margin:12px 0 0;
  font:500 12.5px/1.4 var(--spj-sans); color:var(--spj-gold2);
}
.apjm-strip-n{
  font:400 12px/1.6 var(--spj-sans); color:var(--spj-tx3); margin:8px 0 0;
}

/* ============================================================== ARABO
   Da destra a sinistra. Il sito serve /ar/ con dir="rtl": qui si girano solo
   le cose che hanno un verso — il trattino degli elenchi, il segno + della
   tendina, l'incolonnamento della tabella. Le stelle NON si girano: tre
   stelle restano tre stelle in qualunque verso si legga. */
[dir="rtl"] .apjm-sp li{ padding-left:0; padding-right:18px; }
[dir="rtl"] .apjm-sp li::before{ left:auto; right:0; }
[dir="rtl"] .apjm-det summary::after{ float:left; }
[dir="rtl"] .apjm-tab th,
[dir="rtl"] .apjm-tab td{ text-align:right; }
[dir="rtl"] .apjm-tab td.apjm-pc{ text-align:left; }
[dir="rtl"] .apjm-stars{ direction:ltr; text-align:right; }
[dir="rtl"] .apjm-strip-b .s{ direction:ltr; }
@media (max-width:640px){
  [dir="rtl"] .apjm-tab td.apjm-pc{ text-align:right; }
}

/* ------------------- IL BLOCCO DENTRO IL CONFIGURATORE DEL PREVENTIVO
   Qui NON si mette una cornice: il blocco deve sembrare — ed essere — un
   passo del modulo come «Dove vuoi andare» e «Che bagagli portate». Le
   classi della testata sono quelle del configuratore (.spj-blk-h e il
   pallino .ic): quello che serve qui è solo l'aria intorno. */
.apjm-blk{ margin:26px 0 0; }
.apjm-blk .apjm-strip-row{ margin-top:14px; }
.apjm-blk .apjm-strip-ck{ margin-top:14px; }
.apjm-blk .spj-blk-h s a{ color:var(--spj-gold2); white-space:nowrap; }

/* ===========================================================================
   LEGGIBILITÀ — nero su nero nel configuratore
   Andrea, 31/08/2026: «attento ai caratteri non leggibili, nero su nero non va
   bene. Solo termini ecc vanno in piccolo e con colori poco evidenti, il resto
   deve essere chiaro e leggibile.»

   🔴 LA CAUSA, trovata sul sito vivo e non a occhio.
   In `spj.css` c'è la regola:
       .spj-cats span { padding:7px 14px; border:1px solid var(--spj-line);
                        border-radius:20px; background:var(--spj-pan); … }
   Nasce per delle pastiglie, ma dentro le schede «Che tipo di aeromobile hai
   in mente» OGNI riga è uno span — `.cn` il nome, `.cd` la descrizione, `.ce`
   l'esempio, `.cq` la nota. Risultato: quattro pastiglie per scheda, con un
   fondo scuro tutto suo. Poi `page-booking.css` ci mette sopra il colore
   terziario, e il testo finisce a 3,69:1 su quel fondo — sotto il minimo di
   4,5:1, e a occhio molto peggio per via dei bordi.
   Verificato: `.spj-chips2 span` su questa pagina non esiste, quindi la regola
   delle pastiglie qui dentro non serve a nessuno.

   ⚠️ Questa è una correzione dall'esterno perché il foglio del sito da qui non
   si ricompila: alla prossima ricompilazione va ripiegata dentro `spj.css` e
   `page-booking.css`, restringendo il selettore delle pastiglie.
   =========================================================================== */
.spj-scope-booking .spj .spj-cats span,
#spjCats span{
  padding:0; border:0; border-radius:0; background:none;
}
.spj-scope-booking .spj .spj-cats .cn,
#spjCats .cn{
  display:block; font:600 14.5px/1.3 var(--spj-sans);
  color:var(--spj-tx); margin:0 0 6px;
}
.spj-scope-booking .spj .spj-cats .cd,
#spjCats .cd{
  display:block; font-size:12.2px; line-height:1.55;
  color:var(--spj-tx2);
}
.spj-scope-booking .spj .spj-cats .ce,
#spjCats .ce{
  display:block; font-size:11.5px; line-height:1.5; font-style:italic;
  color:var(--spj-tx2); margin-top:7px; opacity:.88;
}
/* `.cq` è una nota, non un titolo: piccola e dorata, ma leggibile. */
.spj-scope-booking .spj .spj-cats .cq,
#spjCats .cq{
  display:block; font:600 10.5px/1.3 var(--spj-sans);
  letter-spacing:.8px; text-transform:uppercase;
  color:var(--spj-gold); margin-top:8px;
}

/* La casella della condivisione dentro il configuratore: il tema veste le
   etichette dei moduli in maiuscolo spaziato e ciano. Qui è una frase, non
   un'etichetta di campo, e va letta come tale. */
.apjm-strip-ck span,
.apjm-cond-ck span{
  text-transform:none !important;
  letter-spacing:normal !important;
  color:var(--spj-tx) !important;
  font-size:13.5px;
  font-weight:400;
}
.apjm-cond-ck span{ font-size:15px; font-weight:500; }

/* I passi non ancora fatti — «Aeromobile · Dettagli · Prezzo · Richiesta» —
   stavano a 3,69:1 su 11,5 px: sono nomi di passi, cioè contenuto, non
   postille. Restano più spenti di quello attivo, ma si leggono. */
.spj-scope-booking .spj .spj-steps > div,
#spjSteps > div{ color:var(--spj-tx2); }
.spj-scope-booking .spj .spj-steps > div.on,
#spjSteps > div.on{ color:var(--spj-tx); }