/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Contact Form ("Napíšte nám", stránka "Kontakt")

   Figma "VypocetCeny-R" (795:35610) — NOVÝ blok (nie rozšírenie sales-contact,
   zdôvodnenie v template.php hlavičke). Kostra: ľavý stĺpec (nadpis 56 + text +
   tlačidlo „Spýtať sa Zen AI") + pravá 580px form-karta (CF7) + vlnitý spodok.

   Karta = teal gradient (#8ECAE6 + biely fade zhora 36.871%→0), rounded-top-40.
   Text/nadpis na nej = #023047 (svetlé pozadie). Formulár = natívne CF7 elementy
   (rovnaký princíp cielenia ako sales-contact/status-contact), + navyše SELECT
   (chevron cez CSS background) a FILE upload (::file-selector-button). Farby/
   spacing len cez theme tokeny.

   MOBIL: Figma 1202:137983 (var_defs mobilný mód) — single-column (Meno/Priezvisko pod
   seba), H1 40, card 16, form-karta p8, príloha nad tlačidlom, pt 16/pb 48.
   TABLET: generický medzikrok (stack).
   ══════════════════════════════════════════════════════════════════════════ */

.zn-cf {
  position: relative;
  background: var(--color-white);              /* Scheme A/Background Light */
  padding-inline: var(--space-16);             /* Page Padding/padding-global 64 */
}
/* 2-triedny selektor (CLAUDE.md kaskáda vs components.css .zn-block). */
.zn-cf.zn-block {
  --zn-pt: var(--space-6);                      /* Div Padding/div-padding-small 24 */
  --zn-pb: var(--space-20);                     /* Section Padding/section-medium 80 */
}

.zn-cf__container {
  max-width: 1024px;                            /* Figma Container max-width 1024 */
  margin-inline: auto;
  position: relative;
}

.zn-cf__card {
  position: relative;
  z-index: 2;
  /* Figma: biely fade zhora (0.5 @ 36.871% → 0 @ 100%) NAD plnou secondary-light */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 36.871%, rgba(255, 255, 255, 0) 100%),
    var(--color-secondary-light);              /* #8ECAE6 */
  padding: var(--space-10, 40px) var(--space-10, 40px) var(--space-4) var(--space-10, 40px);  /* pt40 px40 pb16 */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;   /* Radius/XLarge 40 top */
  overflow: hidden;
}

.zn-cf__row {
  display: flex;
  align-items: flex-start;                     /* Figma items-start */
  gap: 40px;                                   /* Figma Component gap 40 */
}

/* ── Ľavý stĺpec ── */
.zn-cf__col {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;                                   /* Figma Column gap 40 */
  padding-block: var(--space-6);               /* Figma Column py 24 */
}
.zn-cf__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                         /* Figma gap 8 (nadpis ↔ text) */
}
.zn-cf__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);          /* Sans Regular */
  font-size: var(--text-7xl);                  /* Size/H1 56 */
  line-height: 1.1;
  color: var(--color-text);                    /* #023047 (svetlé pozadie karty) */
}
.zn-cf__heading-accent {
  display: inline;                             /* Figma: „nám" pokračuje v riadku (inline) */
  font-style: italic;
  font-weight: var(--weight-tagline);          /* Mix Regular Italic */
  /* ŽIADNA farba — accent má rovnakú farbu ako nadpis, len italic (label „italic časť"). */
}
.zn-cf__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);           /* Text/Regular/Medium = Sans Medium 550 */
  font-size: var(--text-base);                 /* Size/Regular 16 */
  line-height: 1.5;
  color: var(--color-text);
}
.zn-cf__actions { display: flex; }
/* „Spýtať sa Zen AI" = globálna .btn--white (biela, čierny text). Lokálne len ikona. */
.zn-cf__zenai-icon { display: block; width: 32px; height: 32px; flex-shrink: 0; }

/* ── Pravá form-karta ── */
.zn-cf__form-card {
  flex-shrink: 0;
  width: 580px;                                /* Figma pevná šírka 580 */
  background: var(--color-white);
  padding: var(--space-6);                     /* 24 */
  border-radius: var(--radius-md);             /* 12 */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                         /* 8 — Figma „Frame 15882": submit → súhlas (795:35676 vnútorný gap) */
}

/* Natívne CF7 elementy + fallback formulár — spoločné štýlovanie. */
.zn-cf__form-card .wpcf7-form,
.zn-cf__form-fallback {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                         /* Figma "License Info" gap 8 */
  width: 100%;
}
.zn-cf__form-card .wpcf7-form > p { margin: 0; }

/* Dvojpolový riadok (meno+priezvisko, firma+e-mail).
   POZOR CF7 markup: wpautop vloží DO môjho `.zn-cf__form-row` divu ešte `<p>`,
   ktorý obaľuje dva `.wpcf7-form-control-wrap` spany — flexnúť treba TEN `<p>`
   a flex:1 dať SPANOM (nie inputom, tie sú vnorené v spanoch). Fallback formulár
   (bez CF7) má v `.zn-cf__form-row` priamo `<input>`-y → flexuje sa samotný row. */
.zn-cf__form-row,
.zn-cf__form-row > p {
  display: flex;
  gap: var(--space-2);                         /* 8 */
  width: 100%;
  margin: 0;
}
.zn-cf__form-row .wpcf7-form-control-wrap {
  flex: 1 1 0;
  min-width: 0;
}

/* Inputy / textarea / select — h48, border rgba(3,3,3,.15), radius 12 */
.zn-cf__form-card input[type="text"],
.zn-cf__form-card input[type="email"],
.zn-cf__form-card select,
.zn-cf__form-fallback input[type="text"],
.zn-cf__form-fallback input[type="email"],
.zn-cf__form-fallback select {
  width: 100%;
  height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);       /* Scheme A/Inputs/Base rgba(3,3,3,.15) */
  border-radius: var(--radius-input);          /* 12 */
  background: var(--color-white);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  flex: 1 1 0;
  min-width: 0;
}
.zn-cf__form-card textarea,
.zn-cf__form-fallback textarea {
  width: 100%;
  height: 152px;                               /* Figma Text Area h152 */
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: transparent;                      /* Figma A/Opacity/Transparent */
  resize: vertical;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
}
.zn-cf__form-card input::placeholder,
.zn-cf__form-card textarea::placeholder,
.zn-cf__form-fallback input::placeholder,
.zn-cf__form-fallback textarea::placeholder { color: var(--color-text-secondary); }
.zn-cf__form-card input:focus,
.zn-cf__form-card select:focus,
.zn-cf__form-card textarea:focus,
.zn-cf__form-fallback input:focus,
.zn-cf__form-fallback select:focus,
.zn-cf__form-fallback textarea:focus { outline: none; border-color: var(--color-secondary); }

/* Select: skryť natívnu šípku, vykresliť chevron cez background (Figma Icon/chevron-down).
   Prázdna hodnota (placeholder option) = text-secondary, po výbere = text. */
.zn-cf__form-card select,
.zn-cf__form-fallback select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  color: var(--color-text);                     /* vybraná hodnota = tmavá */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2333363F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
/* Placeholder (prázdna hodnota vybraná) = text-secondary. CF7 [select*] NEpridáva
   natívny `required` atribút (len JS validáciu), takže `:invalid` naň nefunguje —
   preto `:has(option[value=""]:checked)` (moderné prehliadače; fallback = tmavá,
   bezpečné). Fallback formulár má natívny required, tam funguje aj `:invalid`. */
.zn-cf__form-card select:has(option[value=""]:checked),
.zn-cf__form-fallback select:has(option[value=""]:checked),
.zn-cf__form-fallback select:invalid { color: var(--color-text-secondary); }

/* Príloha: label (Sans Medium 14 + hint text-secondary) + tlačidlo súboru.
   Ako pri form-row: CF7/wpautop vloží `<p>` medzi `.zn-cf__file-row` a obsah →
   flex treba aj na `> p`. Label sa nescvrkne, tlačidlo vyplní zvyšok (flex:1). */
.zn-cf__file-row,
.zn-cf__file-row > p {
  display: flex;
  align-items: center;
  gap: var(--space-2);                         /* 8 */
  width: 100%;
  margin: 0;
}
.zn-cf__file-label { flex-shrink: 0; }
.zn-cf__file-label {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);           /* Sans Medium */
  font-size: var(--text-sm);                   /* Size/Small 14 */
  line-height: 1.5;
  color: var(--color-text);
  white-space: nowrap;
}
.zn-cf__file-hint { color: var(--color-text-secondary); }
/* Tlačidlo „Vyberte súbor" (Figma 795:35936: outline, flex:1, h40, centrované,
   „Vyberte súbor" Sans SemiBold 16 + up-arrow 24). Natívny text file inputu sa
   NEDÁ zmeniť cez CSS (browser lokalizuje na „Vybrať súbor") ani nespraviť
   full-width centrovaný → `<label>` obaľuje vlastný text+ikonu + skrytý `[file]`
   input; klik na label otvorí dialóg (natívne, bez JS). */
.zn-cf__file-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);                         /* 8 */
  height: 40px;                                /* Figma h40 */
  padding: 10px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);         /* 12 */
  background: var(--color-white);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);                 /* 16 */
  color: var(--color-text);
  cursor: pointer;
}
.zn-cf__file-btn:hover { border-color: var(--color-text-secondary); }
.zn-cf__file-btn-icon { flex-shrink: 0; }
/* Skrytý (ale klikateľný cez obaľujúci label) natívny file input + jeho CF7 wrap. */
.zn-cf__file-btn input[type="file"],
.zn-cf__file-btn .wpcf7-form-control-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Submit „Odoslať formulár" = .btn--primary (globálne), tu len veľkosť 60/plná šírka/18. */
.zn-cf__form-card input[type="submit"],
.zn-cf__form-card button[type="submit"],
.zn-cf__form-fallback button[type="submit"],
.zn-cf__submit {
  width: 100%;
  height: 60px;                                /* Figma Button h60 (väčšie než sitewide 48) */
  padding: 10px var(--space-4);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-button);
  background: var(--color-primary);            /* žltá */
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);                   /* 18 */
  color: var(--color-black);
  cursor: pointer;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.zn-cf__form-card input[type="submit"]:hover,
.zn-cf__form-card button[type="submit"]:hover,
.zn-cf__form-fallback button[type="submit"]:hover,
.zn-cf__submit:hover { border-color: var(--color-primary-dark); box-shadow: var(--shadow-btn); }

/* Figma „Frame 15882" (795:35676): submit + súhlas = skupina s vnútorným gapom 8, a 24
   nad ňou (od „License Info" 795:35842). V našom DOM je submit posledné pole FORMULÁRA
   a súhlas je MIMO formulára (sibling v .zn-cf__form-card), preto:
   1) prázdny CF7 `.wpcf7-response-output` nafukoval submit→súhlas na ~54px (default WPCF7
      marginy 2em/1em aj pri height 0) → skryť ho, kým je prázdny (pri chybe validácie
      dostane aria-hidden="false" a zobrazí sa),
   2) submit dostane 24 nad seba = 8 (flex-gap formulára) + 16 (margin-top),
   3) form-card gap 8 (vyššie) rieši submit→súhlas. */
.zn-cf__form-card .wpcf7-response-output[aria-hidden="true"] { display: none; }
.zn-cf__form-card .wpcf7-form > p:has(input[type="submit"]),
.zn-cf__form-fallback > .zn-cf__submit { margin-top: var(--space-4); }
/* WPCF7 JS vkladá `.wpcf7-spinner` (loading indikátor) DOVNÚTRA submit <p> POD input
   → nafukoval <p> o ~30px (a tým submit→súhlas). Absolútne umiestnenie ho vyberie z toku
   (žiadna výška navyše); počas odosielania sa zobrazí vpravo v tlačidle. */
.zn-cf__form-card .wpcf7-form > p:has(input[type="submit"]) { position: relative; }
.zn-cf__form-card .wpcf7-spinner {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

/* Súhlasný text pod formulárom (Figma Tiny 12, odkaz podčiarknutý) */
.zn-cf__terms {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);                   /* Size/Tiny 12 */
  line-height: 1.2;
  color: var(--color-text);
}
.zn-cf__terms a { text-decoration: underline; }

/* ── Vlnitý spodok karty (secondary-light wave, rovnaká technika ako hero-contact) ── */
.zn-cf__wave {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  margin-top: -1px;
}
.zn-cf__wave-piece {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 34;
}
.zn-cf__wave-piece:first-child { margin-right: -3.415%; }

/* ══ Tablet (≤1199.98px) — stack ľavý stĺpec + form-karta ══ */
@media (max-width: 1199.98px) {
  .zn-cf__card { padding: var(--space-8); }
  .zn-cf__row { flex-direction: column; gap: var(--space-8); }
  .zn-cf__col { padding-block: 0; gap: var(--space-6); }
  .zn-cf__form-card { width: 100%; }
}

/* ══ Mobil (≤767.98px) — Figma 1202:137983 (var_defs mobilný mód) ══ */
@media (max-width: 767.98px) {
  .zn-cf { padding-inline: var(--space-4); }               /* page-padding mobil 16 (z 64) */
  /* pt = div-small 16, pb = section-medium 48 (space-20 = 48 pri mobile clamp);
     --zn-pt-m/-pb-m obídu auto-scale (dal by 12/40). */
  .zn-cf.zn-block { --zn-pt-m: var(--space-4); --zn-pb-m: var(--space-20); }
  .zn-cf__card { padding: var(--space-4); }                /* Component padding div-small mobil 16 (z pt40) */
  .zn-cf__form-card { padding: var(--space-2); }           /* Figma mobil form-karta p8 (z 24) */
  .zn-cf__heading,
  .zn-cf__heading-accent { font-size: 2.5rem; }            /* Size/H1 mobil 40 */
  /* Meno/Priezvisko + firma/e-mail pod seba (Figma mobil single-column). Stackuje sa
     vnútorný wpautop `<p>` (skutočný flex kontajner dvoch polí), nie len `.zn-cf__form-row`. */
  .zn-cf__form-row,
  .zn-cf__form-row > p { flex-direction: column; }
  .zn-cf__form-row .wpcf7-form-control-wrap { flex: 0 0 auto; width: 100%; }
  /* Príloha: label NAD tlačidlom, tlačidlo plná šírka (Figma mobil flex-col, node 1202:138012). */
  .zn-cf__file-row,
  .zn-cf__file-row > p { flex-direction: column; align-items: stretch; }
  .zn-cf__file-btn { flex: 0 0 auto; width: 100%; }
  .zn-cf__wave-piece:first-child { margin-right: -14.3%; }
}