/* ===========================
   DirectCar - Layout I (bianco + card rosse) — FULL BLEED
   =========================== */

/* 🎯 Colori brand */
:root{
  --dc-primary: #000000;         /* Rosso DirectCar   #C1121F*/
  --dc-primary-contrast: #ffffff;

  --bg:   #ffffff;               /* Sfondo pagina bianco */
  --text: #0b0f14;               /* Testo scuro (fuori dalle card) */
  --muted:#475569;               /* Testo attenuato (fuori card) */
  --card: #1566b1;     /* Card blu BMW */

  /* gutter fluidi per i container full-bleed */
  --gutter: clamp(12px, 4vw, 48px);
}

/* Reset base */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  background:var(--bg);
  color:var(--text);
}

/* ➜ container FULL-BLEED con gutter fluidi */
.wrap{
  width:100%;
  max-width:none;             /* nessun limite: full width */
  margin:0 auto;
  padding:16px var(--gutter); /* gutter laterali fluidi */
}

/* ===== GRID DESKTOP: 2 colonne, 2 righe (riga2 = spazio immagine) ===== */
.grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr !important;
  grid-template-rows: auto 1fr !important;  /* riga1: card sx, riga2: immagine */
  gap:24px;
  align-items: stretch !important;          /* permette all’immagine di allungarsi */
}

/* ================= CARD ================= */
.card{
  background:var(--card);
  color:#fff; /* copy bianco */
  padding:20px;
  border-radius:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}
.card h1,.card h2,.card h3,.card p,.card li,.card label,.card small{color:#fff}
.card a, .card a:visited{color:#fff; text-decoration: underline;}
.card a:hover{filter:brightness(1.1)}

/* Pricing */
.pricing .price-row{
  display:flex;
  gap:24px;
  align-items:flex-start;
}
.pricing .price-row strong{font-size:2rem; color:#fff}
.pricing .price-row span{color:#fff; opacity:.85}
.pricing ul{margin:8px 0 0 18px}
.pricing ul li::marker{ color:#fff }

/* FAQ/Details */
details{margin-top:12px}
summary{
  cursor:pointer;
  color:#fff; /* testo FAQ bianco */
}
summary:hover{filter:brightness(1.08)}

/* ================= FORM ================= */
.form .form-control{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.35);
  background:#ffffff;             /* input bianchi */
  color:#0f172a;                  /* testo scuro negli input */
}
.form .form-control::placeholder{color:#64748b}
.form .form-control:focus{
  outline:2px solid rgba(255,255,255,.85);
  outline-offset:2px;
}

.form .form-group-privacy p.small{color:rgba(255,255,255,.95)}
.form label{color:#fff}

/* ================= CTA ================= */
/* Default: bottone bianco con testo rosso (anche se ha .rosso-bg .bianco) */
.btn-custom{
  display:inline-block;
  padding:12px 18px;
  border-radius:10px;
  border:2px solid #ffffff;
  background:#ffffff;                           /* CTA bianca */
  color:var(--dc-primary);                      /* testo rosso */
  cursor:pointer;
  font-weight:700;
  transition:transform .05s ease, filter .2s ease, box-shadow .2s;
}
.btn-custom:hover{
  filter:brightness(0.98);
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.btn-custom:active{transform:translateY(1px)}


/* CTA dentro la card del form: più grande e centrata */
.card.form .btn-custom{
  display: block;          /* così il margin auto la centra */
  margin: 16px auto 0;     /* centratura orizzontale */
  padding: 14px 24px;      /* più grande */
  font-size: 1.125rem;     /* ~18px */
  line-height: 1.1;
  min-width: 240px;        /* larghezza minima per dare presenza */
}

.card.form .btn-custom strong{
  font-weight: 800;
  letter-spacing: .2px;
}

/* (opzionale) su mobile la rendi full width */
@media (max-width: 480px){
  .card.form .btn-custom{
    width: 100%;
  }
}


/* Utility storiche */
.rosso-bg{ background: var(--dc-primary) !important; }
.bianco{ color: #ffffff !important; }

/* Override: mantieni CTA bianca con testo rosso anche se ha .rosso-bg .bianco */
.btn-custom.rosso-bg,
.btn-custom.bianco,
.btn-custom.rosso-bg.bianco{
  background:#ffffff !important;
  color:var(--dc-primary) !important;
  border-color:#ffffff !important;
}

/* ================= TEXT SECONDARIO / FOOTER ================= */
.legal{color:#fff; font-size:.9rem; margin-top:12px}     /* note legali dentro card: bianche */
.foot{padding:24px var(--gutter); color:#334155}         /* footer full-bleed con gutter */

/* ================= THANK YOU ================= */
.ty-body{background:#ffffff; color:#0b0f14}
.ty{max-width:680px;margin:80px auto;padding:24px;text-align:center}
.btn{
  display:inline-block;
  margin-top:16px;
  padding:10px 16px;
  border-radius:10px;
  background:#ffffff;
  color:var(--dc-primary);
  border:2px solid #ffffff;
  text-decoration:none;
}

/* === Spaziatura campi del form (colonna .form) === */
.form .form-group,
.form .form-group-privacy { 
  margin-bottom: 16px; 
}
.form .form-group.mb-3 { margin-bottom: 18px; } /* rinforza spacing dove già usi mb-3 */
.form .form-group.mb-4 { margin-bottom: 24px; } /* rinforza spacing dove già usi mb-4 */

/* Privacy più piccola e leggibile dentro la card rossa */
.form .form-group-privacy p.small{
  font-size: .82rem;   /* ↓ rimpicciolisci qui se vuoi ancora più piccolo */
  line-height: 1.45;
  opacity: .95;
}
.form .form-group-privacy a{
  color: #fff;               /* link bianchi nella card rossa */
  text-decoration: underline;
}
.form .form-group-privacy label{ font-size: .86rem; }
.form .form-group-privacy sup{   font-size: .68rem; }

/* === Note legali in fondo pagina (allineate ai blocchi sopra) === */
.legal-page{
  /* la classe .wrap gestisce già i gutter orizzontali */
  width: 100%;
  max-width: none;
  margin: 24px 0 40px;
  padding: 0;                 /* niente padding: evita doppi gutter */
}

.legal-page .legal-text{
  color: #334155;
  opacity: .9;
  font-size: .9rem;
  line-height: 1.55;
}


/* ===== POSIZIONAMENTO ELEMENTI IN GRIGLIA (desktop) ===== */
/* card sinistra: riga 1, colonna 1 */
.pricing.card{ grid-column:1 !important; grid-row:1 !important; }

/* card destra: colonna 2, occupa 2 righe (1 -> 2) */
.form{ grid-column:2 !important; grid-row:1 / 3 !important; }

/* immagine: riga 2, colonna 1, riempie lo spazio fino al fondo */
.variant-image{
  grid-column:1 !important;
  grid-row:2 !important;
  height:100%;
  align-self:stretch;
  margin:0;                 /* nessun margine extra: bordi allineati */
}
.variant-image img{
  display:block;
  width:100%;
  height:100%;              /* riempi verticalmente la riga 2 */
  object-fit:cover;         /* copri l’area senza deformazioni */
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  background:#f8fafc;
}
/* Se il CSV non fornisce l'immagine → nascondi */
.variant-image img[src=""], 
.variant-image img:not([src]){ display:none; }

/* ================= RESPONSIVE ================= */
@media(max-width:960px){
  .grid{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important; /* ordine: card sx, card dx, immagine */
  }
  .pricing.card{ grid-column:auto !important; grid-row:auto !important; }
  .form{          grid-column:auto !important; grid-row:auto !important; }
  .variant-image{
    grid-column:auto !important; 
    grid-row:auto !important; 
    height:auto;
    margin-top:12px;
  }
  .variant-image img{ height:auto; }
  .pricing .price-row{flex-direction:column}
}