/* ===== Contact Booster (J4/J5) — CLEAN ===== */
:root{
  --primary:#0a5898;
  --text:#192430;
  --muted:#6b7785;
  --bg-soft:#f6f9fc;
  --card:#ffffff;
  --card-bd:#e6edf3;
  --radius:14px;
  --shadow:0 18px 48px rgba(0,0,0,.22);
}

/* wrapper pagina contatti */
.contact-view{
  --container: min(1200px, 92vw);
  width:var(--container);
  margin:clamp(12px,2vw,28px) auto 64px;
  padding-bottom:40px;
}

/* card base (riuso per il form) */
.card{
  background:var(--card);
  border:1px solid var(--card-bd);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(16px,2vw,24px);
}
.card-title{
  margin:0 0 16px;
  font-size:clamp(1.1rem,1.6vw,1.4rem);
  font-weight:800;
  color:var(--text);
}

/* ===== FORM (com_contact) ===== */
.contact-form-card form fieldset{ border:0; padding:0; margin:0; }
.contact-form-card label{
  display:block; font-weight:600; margin:14px 0 6px; color:var(--text);
}

/* inputs */
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card input[type="tel"],
.contact-form-card select,
.contact-form-card textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  border:1px solid var(--card-bd);
  border-radius:12px;
  padding:.85rem 1rem;
  font:inherit; color:var(--text);
  background:#fff;
  transition: box-shadow .12s ease, border-color .12s ease;
  margin-bottom: 1rem;
}
.contact-form-card textarea{ min-height:160px; resize:vertical; }

/* focus */
.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus{
  outline:none;
  border-color: color-mix(in srgb, var(--primary) 40%, #fff);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* errori / required */
.contact-form-card .invalid{
  border-color:#e03131 !important;
  box-shadow:0 0 0 4px rgba(224,49,49,.09) !important;
}
.contact-form-card .star{ color:#e03131; }

/* submit */
.contact-form-card button,
.contact-form-card input[type="submit"],
.contact-form-card .btn.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.9rem 1.2rem;
  border-radius:12px; border:1px solid var(--primary);
  background:var(--primary); color:#fff; font-weight:800;
  cursor:pointer;
  transition: transform .12s ease, opacity .2s ease, background .2s;
}
/* hover su tutti i pulsanti submit nel form */
.contact-form-card input[type="submit"]:hover,
.contact-form-card button[type="submit"]:hover,
.contact-form-card .btn.btn-primary:hover {
transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
  background: color-mix(in srgb, var(--primary) 90%, #fff 10%);
}

.contact-form-card input[type="submit"]:active,
.contact-form-card button[type="submit"]:active,
.contact-form-card .btn.btn-primary:active { transform:translateY(0) scale(.98); }

/* hCaptcha */
.h-captcha{ display:block; margin-top:12px; margin-bottom: 12px; }
@media (max-width:420px){
  .h-captcha{ transform:scale(.92); transform-origin:top left; }
}

/* Accessibilità */
.contact-view a:focus,
.contact-view button:focus,
.contact-view input:focus,
.contact-view textarea:focus{
  outline:2px solid #111; outline-offset:2px;
}

/* ===== Opzionale: stile per modulo "mappa" se userai questa classe nel modulo ===== */
.contact-map-full{
  margin-top:clamp(16px, 2.2vw, 32px);
  border-radius:14px; overflow:hidden;
  background:#fff; border:1px solid var(--card-bd, #e6edf3);
  box-shadow:var(--shadow, 0 6px 22px rgba(10,88,152,.08));
}
.contact-map-full iframe{ width:100%; min-height:420px; border:0; display:block; }

/* Variante full-bleed (se vuoi farla a tutta larghezza viewport)
.contact-map-full{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-radius:0; border-left:0; border-right:0; box-shadow:none;
}
*/

.contact-form-card .contact-form-title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 800;
  color: var(--primary, #0a5898);
  text-align: left;
}
/* ==== Align mobile del form con CTA (padding simmetrico + fix griglia bootstrap) ==== */
@media (max-width: 768px){
  /* porta il container a 100% e aggiungi padding come i CTA */
  .contact-view{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 20px;   /* stesso respiro dei box */
    padding-right: 20px;  /* idem */
    box-sizing: border-box;
  }

  /* annulla eventuali margini/gutter bootstrap dentro il componente */
  .contact-view .row{
    margin-left: 0;
    margin-right: 0;
  }
  .contact-view [class*="col-"]{
    padding-left: 0;
    padding-right: 0;
  }

  /* assicura che la card del form non “sbordi” */
  .contact-form-card.card{
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* campi sempre a piena larghezza */
  .contact-form-card .control-group,
  .contact-form-card .controls,
  .contact-form-card .control-label,
  .contact-form-card input[type="text"],
  .contact-form-card input[type="email"],
  .contact-form-card input[type="tel"],
  .contact-form-card select,
  .contact-form-card textarea{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* bottone coerente e non a filo bordo destro */
  .contact-form-card .btn,
  .contact-form-card input[type="submit"],
  .contact-form-card button[type="submit"]{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* opzionale: stessa “spaziatura respiro” anche su tablet */
@media (min-width: 769px) and (max-width: 992px){
  .contact-view{
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
}