/* ==========================================================================
   Fastkava — request-form dialog
   Skins the Contact Form 7 markup carried over from the old theme, so the
   selectors here are mostly CF7's own (.wpcf7-*) plus the two Bootstrap grid
   classes (.row / .col-md-*) that live inside the form's stored content.
   ========================================================================== */

/* ---- Shell ---------------------------------------------------------------
   The <dialog> is a transparent full-viewport flex box; the visible card is
   .fk-formdlg__panel. That split is deliberate: with showModal() a click on
   the backdrop reports the dialog itself as the target, so "click outside to
   close" is a plain `e.target === dialog` test — which would misfire if the
   dialog were also the padded card.

   [open] gates `display` because the UA stylesheet closes a dialog with
   `display: none`; an unconditional `display: flex` here would leave it
   permanently visible. */
.fk-formdlg {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(12px, 3vw, 32px);
  border: 0;
  background: transparent;
  overflow: hidden;
  color: var(--fk-text);
}
.fk-formdlg[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fk-formdlg::backdrop {
  background: var(--fk-overlay);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Fallback path for a browser without showModal(): no top layer, so the
   dialog needs its own stacking position and scrim (::backdrop never paints). */
.fk-formdlg.is-fallback {
  z-index: 1000;
  background: var(--fk-overlay);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.fk-formdlg__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--fk-glass-solid);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--fk-border-strong);
  border-radius: var(--fk-radius-lg);
  box-shadow: var(--fk-shadow);
  overflow: hidden;
}

/* The panel is a fixed-height box; only the form scrolls, so the close button
   stays reachable on a short viewport. */
.fk-formdlg__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.fk-formdlg__body {
  padding: clamp(28px, 4vw, 40px) clamp(20px, 4vw, 40px) clamp(24px, 3.5vw, 36px);
}

.fk-formdlg__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--fk-text-muted);
  transition: background-color var(--fk-dur) var(--fk-ease), color var(--fk-dur) var(--fk-ease);
}
.fk-formdlg__close:hover { background: var(--fk-surface-hover); color: var(--fk-text-strong); }
/* Sized wrapper: the raw SVG carries only a viewBox, and base.css's
   `svg { max-width:100%; height:auto }` would let it fill the whole button. */
.fk-formdlg__close-icon { display: block; width: 16px; height: 16px; }
.fk-formdlg__close-icon svg { width: 100%; height: 100%; display: block; }

/* ---- CF7 scaffolding ----------------------------------------------------- */
.fk-formdlg .wpcf7 { margin: 0; }
.fk-formdlg .hidden-fields-container { display: none; }

.fk-formdlg .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Hidden inputs are display:none per the UA stylesheet, so they never add a
   phantom flex gap. */

.fk-formdlg .wpcf7-form p {
  position: relative;   /* positioning context for the submit spinner */
  margin: 0;
}
/* wpautop leaves <br> around every control; the label is a flex column instead. */
.fk-formdlg .wpcf7-form br { display: none; }

/* ---- Heading + lead ------------------------------------------------------ */
.fk-formdlg .wpcf7-form h2 {
  margin: 0;
  padding-right: 34px;      /* clear the close button */
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--fk-heading);
}
.fk-formdlg .wpcf7-form h2 + p {
  margin-top: -6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fk-text-muted);
}

/* ---- Field grid ----------------------------------------------------------
   .row / .col-md-* come from the form's stored content (the old theme was on
   Bootstrap). Re-implemented as a two-column grid rather than pulled in. */
.fk-formdlg .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.fk-formdlg .row .col-md-6  { grid-column: span 1; }
.fk-formdlg .row .col-md-12 { grid-column: 1 / -1; }
.fk-formdlg .mt-5 { margin-top: 0; }   /* Bootstrap spacing utility, unused here */

.fk-formdlg .wpcf7-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fk-text-muted);
}
.fk-formdlg .wpcf7-form-control-wrap { display: block; }

/* ---- Controls ------------------------------------------------------------ */
.fk-formdlg input[type="text"],
.fk-formdlg input[type="tel"],
.fk-formdlg input[type="email"],
.fk-formdlg textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--fk-text-strong);
  background: var(--fk-surface-soft);
  border: 1px solid var(--fk-border-strong);
  border-radius: var(--fk-radius);
  transition: border-color var(--fk-dur) var(--fk-ease), background-color var(--fk-dur) var(--fk-ease);
}
.fk-formdlg input::placeholder { color: var(--fk-text-dim); }
.fk-formdlg input:focus {
  outline: none;
  border-color: var(--fk-accent);
  background: var(--fk-surface-hover);
}
.fk-formdlg input:focus-visible { outline: none; }   /* the border IS the focus ring here */

/* Chrome/Safari autofill repaints the field with its own yellow. Nothing can
   override that background directly, so an inset shadow the size of the box
   stands in for it and the text colour is forced back. */
.fk-formdlg input:-webkit-autofill,
.fk-formdlg input:-webkit-autofill:hover,
.fk-formdlg input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fk-text-strong);
  -webkit-box-shadow: 0 0 0 1000px var(--fk-bg-elev) inset;
  caret-color: var(--fk-text-strong);
}

/* ---- Consent checkbox ---------------------------------------------------- */
.fk-formdlg .wpcf7-acceptance .wpcf7-list-item { margin: 0; display: block; }
.fk-formdlg .wpcf7-acceptance label {
  flex-direction: row;
  align-items: flex-start;
  gap: 11px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--fk-text-dim);
  cursor: pointer;
}
.fk-formdlg .wpcf7-acceptance input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--fk-accent);
  cursor: pointer;
}
.fk-formdlg .wpcf7-list-item-label { display: block; }

/* ---- Submit -------------------------------------------------------------- */
.fk-formdlg .wpcf7-submit {
  width: 100%;
  display: block;
  padding: 17px 28px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  background: var(--fk-accent);
  border: 1px solid transparent;
  border-radius: var(--fk-radius);
  cursor: pointer;
  transition: background-color var(--fk-dur) var(--fk-ease), transform var(--fk-dur) var(--fk-ease);
}
.fk-formdlg .wpcf7-submit:hover { background: var(--fk-accent-strong); }
.fk-formdlg .wpcf7-submit:active { transform: translateY(1px); }
.fk-formdlg .wpcf7-submit:disabled { opacity: 0.6; cursor: default; transform: none; }

/* CF7 appends the spinner as a sibling of the button; parked inside the
   button's right edge so a full-width submit does not push it onto its own row. */
.fk-formdlg .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 16px;
  margin: 0;
  transform: translateY(-50%);
}

/* ---- Validation + response ----------------------------------------------- */
.fk-formdlg .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: #FF6B5A;
}
.fk-formdlg input.wpcf7-not-valid { border-color: #FF6B5A; }

/* CF7 ships `.wpcf7 form .wpcf7-response-output` (0,2,1) and per-state rules at
   (0,3,1). The `.wpcf7` in the middle of each selector below is what outranks
   them — matching CF7's own specificity and relying on load order would break
   the moment LiteSpeed reorders the combined bundle. */
.fk-formdlg .wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 13px 16px;
  font-size: 13.5px;
  line-height: 1.45;
  border: 1px solid var(--fk-border-strong);
  border-radius: var(--fk-radius);
  color: var(--fk-text);
}
.fk-formdlg .wpcf7 form.invalid .wpcf7-response-output,
.fk-formdlg .wpcf7 form.unaccepted .wpcf7-response-output,
.fk-formdlg .wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #FF6B5A;
  color: #FF6B5A;
}
.fk-formdlg .wpcf7 form.failed .wpcf7-response-output,
.fk-formdlg .wpcf7 form.aborted .wpcf7-response-output,
.fk-formdlg .wpcf7 form.spam .wpcf7-response-output {
  border-color: #FFAF4A;
  color: #FFAF4A;
}
.fk-formdlg .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--fk-accent);
  background: var(--fk-accent-soft);
  color: var(--fk-text-strong);
}

/* The spinner sits ON the accent button, so CF7's near-black disc is replaced
   by a translucent scrim; its own light dot stays as the moving part. */
.fk-formdlg .wpcf7-spinner { background-color: rgba(0, 0, 0, 0.3); opacity: 1; }

/* Light theme: these reds/ambers are tuned for a dark panel and go muddy on
   cream, so both get a darker, higher-contrast pair. */
:root[data-theme="light"] .fk-formdlg .wpcf7-not-valid-tip,
:root[data-theme="light"] .fk-formdlg .wpcf7 form.invalid .wpcf7-response-output,
:root[data-theme="light"] .fk-formdlg .wpcf7 form.unaccepted .wpcf7-response-output,
:root[data-theme="light"] .fk-formdlg .wpcf7 form.payment-required .wpcf7-response-output { color: #C43A26; }
:root[data-theme="light"] .fk-formdlg input.wpcf7-not-valid,
:root[data-theme="light"] .fk-formdlg .wpcf7 form.invalid .wpcf7-response-output,
:root[data-theme="light"] .fk-formdlg .wpcf7 form.unaccepted .wpcf7-response-output,
:root[data-theme="light"] .fk-formdlg .wpcf7 form.payment-required .wpcf7-response-output { border-color: #C43A26; }
:root[data-theme="light"] .fk-formdlg .wpcf7 form.failed .wpcf7-response-output,
:root[data-theme="light"] .fk-formdlg .wpcf7 form.aborted .wpcf7-response-output,
:root[data-theme="light"] .fk-formdlg .wpcf7 form.spam .wpcf7-response-output { border-color: #A96500; color: #A96500; }

/* ---- Tablet -------------------------------------------------------------- */
@media (max-width: 834px) {
  .fk-formdlg__panel { width: min(520px, 100%); }
}

/* ---- Mobile --------------------------------------------------------------
   Below ~520px the two-column row would leave the phone field too narrow for
   its "+48 000 000 000" mask, so the grid collapses to one column. */
@media (max-width: 519px) {
  .fk-formdlg { padding: 10px; align-items: flex-end; }
  .fk-formdlg__panel { width: 100%; max-height: calc(100dvh - 20px); }
  .fk-formdlg .row { grid-template-columns: 1fr; gap: 14px; }
  .fk-formdlg .wpcf7-form { gap: 16px; }
  .fk-formdlg .wpcf7-form h2 { font-size: 20px; }
  /* 16px keeps iOS Safari from zooming the viewport on focus. */
  .fk-formdlg input[type="text"],
  .fk-formdlg input[type="tel"],
  .fk-formdlg input[type="email"] { font-size: 16px; padding: 13px 14px; }
  .fk-formdlg .wpcf7-submit { padding: 16px 20px; font-size: 14px; }
}

/* Very short viewports (a phone in landscape, or the software keyboard up). */
@media (max-height: 560px) {
  .fk-formdlg { align-items: flex-start; }
  .fk-formdlg__body { padding-top: clamp(20px, 4vw, 28px); }
}