/* ==========================================================================
   Contatti Kura — pagina contatti completa (hero + info + form)
   Palette e font coerenti col resto del sito:
   blu #24538e, cream #f0ebdd, arancio #cf5648, ocra #f5b349
   ========================================================================== */

/* Sfondo a tutta larghezza in crema Kura (mai bianco puro: non è nella
   palette del brand), dietro al contenuto centrato.
   "width:100%" da solo riempie solo la larghezza del contenitore Elementor
   che racchiude lo shortcode: se quella sezione/colonna è "boxed" (piu'
   stretta della finestra), a destra restava il bianco della pagina.
   Con questo trucco (100vw + margini negativi calcolati su 50vw) lo sfondo
   esce da qualunque contenitore ed occupa sempre l'intera larghezza della
   finestra, indipendentemente da come è impostata la sezione in Elementor. */
.kc-contact-page-outer {
  background: #f0ebdd;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: hidden;
}

.kc-contact-page {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 190px 24px 120px;
  font-family: 'All Round Gothic', sans-serif;
  box-sizing: border-box;
}
.kc-contact-page *, .kc-contact-page *::before, .kc-contact-page *::after {
  box-sizing: border-box;
}

/* ---- Hero ---- */
.kc-contact-hero {
  max-width: 760px;
  margin: 0 0 64px;
}
.kc-hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #cf5648;
  margin-bottom: 18px;
}
.kc-hero-title {
  font-family: 'All Round Gothic', sans-serif !important;
  font-weight: 900;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.05;
  color: #24538e;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}
.kc-hero-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: rgba(36,83,142,0.75);
  margin: 0;
  max-width: 560px;
}

/* ---- Layout a due colonne ---- */
/* align-items: stretch cosi' le due colonne (info e form) hanno sempre la
   stessa altezza, qualunque sia la piu' alta delle due. */
.kc-contact-grid {
  display: flex;
  align-items: stretch;
  gap: 48px;
  flex-wrap: wrap;
}

/* ---- Colonna info ---- */
/* Flex in colonna con lo spazio extra (dato dallo stretch sull'altezza
   della card form) distribuito tra il blocco alto e quello basso, cosi'
   whatsapp/social restano ancorati in fondo invece di lasciare un vuoto. */
.kc-contact-info {
  flex: 1 1 320px;
  min-width: 280px;
  background: #24538e;
  border-radius: 28px;
  padding: 44px 36px;
  color: #f0ebdd;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.kc-info-top,
.kc-info-bottom {
  display: flex;
  flex-direction: column;
}
.kc-info-title {
  font-family: 'All Round Gothic', sans-serif !important;
  font-weight: 800;
  font-size: 24px;
  color: #f0ebdd;
  margin: 0 0 14px;
}
.kc-info-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(240,235,221,0.75);
  margin: 0 0 36px;
}
.kc-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.kc-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.kc-info-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(240,235,221,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f0ebdd;
}
.kc-info-item > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kc-info-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240,235,221,0.55);
}
.kc-info-item a,
.kc-info-item span:not(.kc-info-label) {
  font-size: 15px;
  font-weight: 600;
  color: #f0ebdd;
  text-decoration: none;
}
.kc-info-item a:hover {
  color: #f5b349 !important;
  text-decoration: underline;
}

.kc-whatsapp-quick-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #24538e !important;
  background: #f0ebdd !important;
  border-radius: 100px;
  padding: 14px 26px;
  margin-top: 22px;
  text-decoration: none;
  transition: background 0.3s ease, gap 0.3s ease;
  align-self: flex-start;
}
.kc-whatsapp-quick-cta:hover {
  background: #e7ded0 !important;
  gap: 18px;
}

.kc-info-social-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(240,235,221,0.6);
  margin: 0 0 14px;
}
.kc-info-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.kc-info-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(240,235,221,0.35);
  color: #f0ebdd;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.kc-info-social a svg {
  width: 17px;
  height: 17px;
}
.kc-info-social a:hover {
  background: #f0ebdd;
  border-color: #f0ebdd;
  color: #24538e;
}
.kc-info-social a.kc-social-disabled {
  opacity: 0.4;
  cursor: default;
}
.kc-info-social a.kc-social-disabled:hover {
  background: transparent;
  border-color: rgba(240,235,221,0.35);
  color: #f0ebdd;
}

/* ---- Colonna form ---- */
/* Stessa combinazione blu/crema del box "Restiamo in contatto": card blu,
   testi in crema, campi in crema chiara per il contrasto. */
.kc-contact-form-card {
  flex: 1 1 480px;
  min-width: 300px;
  background: #24538e;
  border-radius: 28px;
  padding: 44px 40px;
  color: #f0ebdd;
}
.kc-form-card-title {
  font-family: 'All Round Gothic', sans-serif !important;
  font-weight: 800;
  font-size: 22px;
  color: #f0ebdd;
  margin: 0 0 28px;
}

.kc-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.kc-form-row {
  display: flex;
  gap: 22px;
}

.kc-field {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kc-field-full {
  width: 100%;
}

/* !important su tutte le proprieta': il tema/Elementor applica alcuni
   siti stili di default diversi ai <label> abbinati a <select> rispetto a
   quelli abbinati a <input>, causando dimensioni incoerenti (es. "Servizio"
   piu' grande di "Telefono"). Forziamo qui lo stesso identico stile per
   ogni label del form, indipendentemente dal campo a cui e' abbinata.
   ESCLUSO il label della privacy (.kc-checkbox-label): quello ha il suo
   font-size/white-space dedicato piu' sotto, e "white-space:nowrap" qui
   sopra e' esattamente cio' che faceva uscire il testo dal box. */
.kc-field label:not(.kc-checkbox-label) {
  display: block !important;
  font-family: 'All Round Gothic', sans-serif !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(240,235,221,0.65) !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

.kc-field input,
.kc-field select,
.kc-field textarea {
  font-family: 'All Round Gothic', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #1a1a1a !important;
  /* Crema chiara Kura, per contrasto sulla card blu (come la CTA
     WhatsApp nel box "Restiamo in contatto"). */
  background: #f0ebdd !important;
  border: 1.5px solid rgba(240,235,221,0.25) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  outline: none;
  box-shadow: none !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  width: 100% !important;
  height: 54px !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.kc-field textarea {
  resize: vertical !important;
  min-height: 120px !important;
  height: auto !important;
}

.kc-field input:focus,
.kc-field select:focus,
.kc-field textarea:focus {
  border-color: #f0ebdd !important;
  box-shadow: 0 0 0 3px rgba(240,235,221,0.25) !important;
}

.kc-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2324538e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 42px !important;
}

.kc-form-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 6px;
}

/* Stessa identica pillola della CTA "Scrivici su WhatsApp" (crema piena,
   testo blu), solo con il testo "Invia richiesta". Tutto forzato con
   !important: essendo un <button>, il tema/Elementor gli applica spesso
   uno stile globale (bordo, nessun fill) con specificita' piu' alta della
   nostra, che lo rendeva un rettangolo vuoto e illeggibile. */
.kc-submit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  font-family: 'All Round Gothic', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #24538e !important;
  background: #f0ebdd !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 100px !important;
  padding: 14px 26px !important;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  cursor: pointer;
  transition: background 0.3s ease, gap 0.3s ease, opacity 0.3s ease;
}

.kc-submit-btn:hover:not(:disabled) {
  background: #e7ded0 !important;
  color: #24538e !important;
  gap: 18px !important;
}

.kc-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.kc-submit-arrow {
  transition: transform 0.3s ease;
}

.kc-form-note {
  font-size: 12.5px;
  color: rgba(240,235,221,0.6);
  margin: 0;
  line-height: 1.5;
}

.kc-form-message {
  font-size: 13.5px;
  font-weight: 600;
  padding: 0;
  min-height: 0;
}

.kc-form-message:empty {
  display: none;
}

.kc-form-message.kc-success {
  color: #a8e6a1;
}

.kc-form-message.kc-error {
  color: #ffb4a8;
}

.kc-field.kc-field-invalid input,
.kc-field.kc-field-invalid textarea,
.kc-field.kc-field-invalid .kc-checkbox-box {
  border-color: #ffb4a8;
  box-shadow: 0 0 0 3px rgba(255,180,168,0.2);
}

/* ---- Checkbox privacy ---- */
.kc-field-checkbox {
  gap: 0;
}
.kc-checkbox-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer;
  color: rgba(240,235,221,0.75) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.55 !important;
  white-space: normal !important;
  width: 100%;
  max-width: 100%;
}
/* Senza flex + min-width:0 il testo non si restringe mai sotto la sua
   larghezza "naturale" (tutto su una riga) ed esce dal box invece di
   andare a capo: e' il motivo per cui la privacy risultava tagliata. */
.kc-checkbox-text {
  display: inline !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.kc-checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.kc-checkbox-box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid rgba(240,235,221,0.4);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  margin-top: 1px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.kc-checkbox-label input[type="checkbox"]:checked + .kc-checkbox-box {
  background: #f0ebdd;
  border-color: #f0ebdd;
  color: #24538e;
}
.kc-checkbox-label input[type="checkbox"]:focus-visible + .kc-checkbox-box {
  box-shadow: 0 0 0 3px rgba(240,235,221,0.3);
}
.kc-checkbox-text a {
  color: #f0ebdd;
  text-decoration: underline;
}
.kc-checkbox-text a:hover {
  color: #f5b349;
}

/* ---- Blocco di conferma post-invio ---- */
.kc-success-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}
.kc-success-box[hidden] {
  display: none;
}
.kc-success-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(240,235,221,0.15);
  color: #f0ebdd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.kc-success-box h3 {
  font-family: 'All Round Gothic', sans-serif !important;
  font-weight: 800;
  font-size: 22px;
  color: #f0ebdd;
  margin: 0;
}
.kc-success-box p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(240,235,221,0.8);
  margin: 0;
}
.kc-success-sub {
  margin-top: 6px !important;
}
.kc-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
}
.kc-btn-fill,
.kc-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'All Round Gothic', sans-serif !important;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 15px 30px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}
/* Il blocco di conferma vive dentro la card blu: bottoni invertiti
   (crema pieno / crema outline) cosi' restano leggibili, come le CTA
   usate nell'hero scuro di Chi Siamo. */
.kc-btn-fill {
  background: #f0ebdd;
  color: #24538e !important;
  border: 1.5px solid #f0ebdd;
}
.kc-btn-fill:hover {
  background: #f5b349;
  border-color: #f5b349;
  color: #24538e !important;
  gap: 18px;
}
.kc-btn-outline {
  background: transparent;
  color: #f0ebdd !important;
  border: 1.5px solid rgba(240,235,221,0.4);
}
.kc-btn-outline:hover {
  background: rgba(240,235,221,0.1);
  border-color: #f0ebdd;
  gap: 18px;
}

/* ---- Responsive ---- */
/* Solo desktop/laptop: frase del sottotitolo hero tutta su una riga,
   senza andare a capo (su mobile/tablet resta libera di avvolgersi). */
@media (min-width: 901px) {
  .kc-hero-sub {
    white-space: nowrap;
    max-width: none;
  }
  /* Solo desktop/laptop: le due colonne hanno gia' la stessa altezza
     (align-items:stretch su .kc-contact-grid). Qui la card del form
     diventa a sua volta una colonna flessibile e il bottone "Invia
     richiesta" viene spinto in fondo con margin-top:auto, cosi' resta
     alla stessa altezza del bottone "Scrivici su WhatsApp" a sinistra
     (gia' ancorato in fondo da .kc-contact-info), qualunque sia la
     lunghezza del form sopra. */
  .kc-contact-form-card {
    display: flex;
    flex-direction: column;
  }
  .kc-form {
    flex: 1 1 auto;
  }
  .kc-form-footer {
    margin-top: auto;
  }
}
@media (max-width: 900px) {
  .kc-contact-page {
    padding: 130px 20px 70px;
  }
  .kc-contact-info,
  .kc-contact-form-card {
    padding: 34px 26px;
  }
}

@media (max-width: 640px) {
  .kc-form-row {
    flex-direction: column;
    gap: 22px;
  }
  .kc-success-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .kc-btn-fill, .kc-btn-outline {
    justify-content: center;
  }

  /* Card "Restiamo in contatto": su desktop lo spazio tra il blocco alto
     (titolo/testo/lista contatti) e quello basso (social + CTA WhatsApp)
     arriva da "justify-content: space-between" sull'altezza extra data
     dallo stretch con la colonna del form. Su mobile le due colonne si
     impilano e quell'altezza extra non esiste piu': senza margini propri
     tutto il contenuto resta incollato, uno sotto l'altro senza respiro. */
  .kc-info-title { margin-bottom: 10px; }
  .kc-info-text { margin-bottom: 28px; }
  .kc-info-list { gap: 22px; margin-bottom: 30px; }
  .kc-info-item > div { gap: 5px; }
  .kc-info-social-label { margin-top: 0; margin-bottom: 14px; }
  .kc-info-social { margin-bottom: 22px; }
  .kc-whatsapp-quick-cta {
    width: 100%;
    justify-content: center;
    margin-top: 0;
  }
}

/* ==========================================================================
   Newsletter — shortcode [kura_newsletter]
   Blocco a piena larghezza in stile "CTA finale" (stesse grandezze testo
   di quel pattern: eyebrow con trattino, titolo grande maiuscolo, testo,
   riga campo email + bottone), con il simbolo K in filigrana sullo
   sfondo come nella hero/CTA di Chi Siamo. Sfondo gradiente ocra
   (#f5b349), testi neri, CTA blu (#24538e).
   ========================================================================== */
/* Full-bleed: se lo shortcode e' dentro una sezione/colonna Elementor
   "boxed" (piu' stretta della finestra), ".kn-newsletter" da solo
   riempirebbe solo quella larghezza, lasciando spazio vuoto ai lati.
   Con 100vw + margini negativi calcolati su 50vw il blocco esce da
   qualunque contenitore ed occupa sempre l'intera larghezza della
   finestra, indipendentemente da come e' impostata la sezione. */
.kn-newsletter-outer {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: hidden;
}
/* Elementor a volte aggiunge un proprio padding/margine (diverso sopra
   e sotto) alla sezione/colonna/widget-wrap che contiene lo shortcode,
   che si somma al padding gia' simmetrico di .kn-newsletter facendo
   sembrare lo spazio sopra e sotto diverso. Azzerato cosi' l'unico
   spazio visibile resta quello, identico, impostato qui sotto. */
.elementor-section:has(.kn-newsletter-outer),
.elementor-container:has(.kn-newsletter-outer),
.elementor-column:has(.kn-newsletter-outer),
.elementor-widget-wrap:has(.kn-newsletter-outer),
.elementor-element:has(> .elementor-widget-container .kn-newsletter-outer) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.kn-newsletter {
  background: linear-gradient(135deg, #f5b349 0%, #f8c876 100%);
  width: 100%;
  padding: 120px 64px;
  font-family: 'All Round Gothic', sans-serif;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.kn-newsletter *, .kn-newsletter *::before, .kn-newsletter *::after {
  box-sizing: border-box;
}
/* Simboli decorativi in volo — stesso pattern della hero di Chi Siamo
   (.ak-hero-sym): piccole forme sparse con animazione float, non una
   filigrana grande unica. */
.kn-sym { position: absolute; pointer-events: none; will-change: transform; z-index: 1; }
@keyframes knFloat1 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-26px) rotate(180deg); } }
@keyframes knFloat2 { 0%,100% { transform: translateY(0) translateX(0); } 40% { transform: translateY(-18px) translateX(10px); } 80% { transform: translateY(12px) translateX(-6px); } }
@keyframes knFloat3 { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(18px) rotate(6deg); } }
.kn-newsletter-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kn-newsletter-eyebrow {
  font-family: 'All Round Gothic', sans-serif !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.kn-newsletter-eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: #24538e;
  display: inline-block;
  flex-shrink: 0;
}
.kn-newsletter-title {
  font-family: 'All Round Gothic', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(28px, 3.6vw, 52px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #1a1a1a !important;
  max-width: 780px;
  margin: 0 0 24px;
}
.kn-newsletter-text {
  font-family: 'All Round Gothic', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6;
  color: rgba(26,26,26,0.75);
  max-width: 560px;
  margin: 0 0 40px;
}
.kn-newsletter-row {
  display: flex !important;
  /* nowrap forzato: sopra i 480px il campo e il bottone DEVONO restare
     sulla stessa riga, restringendosi (flex-shrink) se serve, invece di
     lasciare che il browser decida di mandarli a capo in base a calcoli
     di larghezza facilmente falsati da CSS del tema/Elementor. Il
     wrap viene riattivato esplicitamente solo nel breakpoint <480px. */
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: auto !important;
  max-width: 100%;
}
/* Il tema/Elementor applica ai <button> e <input> del sito uno stile
   globale di default (spesso un rosa/rosso acceso su border/focus, il
   colore "accent" del kit Elementor, oltre a un frequente
   "width: 100% !important" sui campi input) con selettori a basso
   livello che possono comunque vincere su singole proprieta' non
   blindate. Il campo email risultava quindi molto piu' largo del
   "max-width: 340px" previsto (quel width:100% del tema vinceva),
   spingendo il bottone a capo perche' la riga non ci stava piu'
   dentro. Ogni proprieta' di dimensione va quindi forzata con
   !important. */
.kn-newsletter-input {
  flex: 1 1 280px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 340px !important;
  padding: 18px 30px !important;
  border-radius: 100px !important;
  border: 1.5px solid rgba(26,26,26,0.35) !important;
  background: rgba(255,255,255,0.35) !important;
  box-shadow: none !important;
  outline: none !important;
  color: #1a1a1a !important;
  font-family: 'All Round Gothic', sans-serif !important;
  font-size: 14px !important;
  transition: border-color 0.22s, background 0.22s;
}
.kn-newsletter-input::placeholder { color: rgba(26,26,26,0.55) !important; }
.kn-newsletter-input:focus {
  border-color: #24538e !important;
  background: rgba(255,255,255,0.55) !important;
  box-shadow: none !important;
  outline: none !important;
}
.kn-newsletter-input:invalid { box-shadow: none !important; }
.kn-newsletter-input.kn-invalid { border-color: #cf5648 !important; }
.kn-newsletter-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-shrink: 0;
  width: auto !important;
  padding: 18px 38px !important;
  border-radius: 100px !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: #24538e !important;
  color: #f0ebdd !important;
  font-family: 'All Round Gothic', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.22s, gap 0.22s, opacity 0.22s;
}
.kn-newsletter-btn:hover, .kn-newsletter-btn:focus, .kn-newsletter-btn:active {
  background: #1a1a1a !important;
  color: #f0ebdd !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  gap: 18px;
}
.kn-newsletter-btn:disabled { opacity: 0.6; cursor: default; }
.kn-newsletter-btn svg { stroke: #f0ebdd !important; }
.kn-newsletter-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
/* Vuoto di default (nessun margine/altezza riservata): lo spazio sotto
   al bottone appariva anche senza nessun messaggio d'errore/successo
   perche' il paragrafo, anche vuoto, teneva comunque margine e
   min-height. Compaiono solo quando JS ci scrive dentro un messaggio. */
.kn-newsletter-msg {
  margin: 0;
  font-size: 13px;
  min-height: 0;
  color: rgba(26,26,26,0.75);
}
.kn-newsletter-msg:not(:empty) {
  margin: 18px 0 0;
  min-height: 1.4em;
}
.kn-newsletter-msg.kn-error { color: #cf5648; }
.kn-newsletter-msg.kn-success { color: #24538e; }

/* ── Responsive — stessa progressione della CTA finale ── */
@media (max-width: 1023px) {
  .kn-newsletter { padding: 100px 48px; }
}
@media (max-width: 767px) {
  .kn-newsletter { padding: 80px 24px; }
  .kn-newsletter-eyebrow { margin-bottom: 20px; }
  .kn-newsletter-title { margin-bottom: 18px; }
  .kn-newsletter-text { margin-bottom: 32px; }
  /* Il campo email e il bottone restano affiancati anche qui: si
     restringono (flex-shrink) invece di andare a capo uno sopra
     l'altro. Vanno in colonna solo sotto i 480px, quando anche
     restringendosi al massimo non ci sta piu' spazio per entrambi
     sulla stessa riga. */
  .kn-newsletter-row { width: 100% !important; }
  .kn-newsletter-input { flex: 1 1 120px !important; min-width: 0 !important; max-width: 340px !important; }
  .kn-newsletter-btn { flex-shrink: 0; }
}
@media (max-width: 480px) {
  /* Solo qui, quando anche restringendosi al massimo non c'e' piu'
     spazio per entrambi sulla stessa riga, si torna a impilarli. */
  .kn-newsletter-row { flex-wrap: wrap !important; flex-direction: column !important; align-items: stretch; }
  /* In colonna l'asse principale del flex diventa verticale: il
     "flex: 1 1 120px" ereditato dal breakpoint 767px (pensato per la
     LARGHEZZA in riga) si applicava invece all'ALTEZZA, facendo
     "crescere" l'input in verticale fino a diventare un enorme cerchio
     (border-radius:100px su un box altissimo). Va azzerato qui: niente
     grow/shrink, altezza naturale, solo width:100%. */
  .kn-newsletter-input {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
  }
  .kn-newsletter-btn { flex: 0 0 auto !important; width: 100% !important; }
}