/* Bookbit - contact.css: strony zbiorcze/wpisy/kontakt. Port układu, w tokenach marki. */
/* ============================================================
   Pan od Informatyki — contact.css
   Sekcje strony "Kontakt — opisz problem".
   Wymaga base.css. Header, stopka, przyciski i :root są w base.css.

   Formularz jest renderowany przez plugin Form (Grav), a nie ręcznym HTML —
   style celują więc zarówno w klasy z projektu (.form-row, .form-field),
   jak i w markup generowany przez plugin.
   ============================================================ */

.page-contact  {
  --text-h1: 44px;
}

/* ---------- 1. Hero ---------- */

.contact-hero  {
  background-image: radial-gradient(rgba(46, 42, 40, 0.09) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
}

.contact-hero .container  {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-6);
  align-items: center;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.hero-kicker  {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--primary-text);
}

.hero-title  {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h1);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.7px;
  text-wrap: pretty;
}

.hero-lead  {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  line-height: 1.65;
  max-width: 54ch;
}

.hero-note-line  {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: 58ch;
}

.hero-actions  {
  display: flex;
  gap: 12px;
}


/* Karta kontaktowa po prawej */

.phone-card  {
  border: 2px solid var(--ink);
  background: var(--surface);
  padding: 26px 28px;
  box-shadow: 6px 6px 0 var(--shadow);
  transform: rotate(0.6deg);
}

.phone-card-kicker  {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--primary-text);
  font-weight: 500;
}

.phone-card-phone  {
  display: block;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  margin: 0 0 10px;
}
.phone-card-phone:hover  {
  color: var(--primary-text);
}

.phone-card-email  {
  display: block;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--primary-text);
  text-decoration: none;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}
.phone-card-email:hover  {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.phone-card-whatsapp  {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary-text);
  text-decoration: none;
  margin: 0 0 var(--space-2);
}
.phone-card-whatsapp:hover  {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.phone-card-whatsapp svg  {
  flex: none;
}

.phone-card-note  {
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--ink-subtle);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- 2. Po wysłaniu wiadomości ---------- */

.after-send  {
  border-top: 2px solid var(--ink);
  background: var(--surface-muted);
}

.after-send .container  {
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
}

.after-send-note  {
  margin: var(--space-2) 0 var(--space-5);
  font-size: var(--text-base);
  color: var(--ink-muted);
  max-width: 60ch;
}

.after-steps  {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.after-step  {
  border: 1.5px solid var(--ink);
  background: var(--surface);
  padding: 22px 24px;
  position: relative;
}

.after-step .step-number  {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--primary-text);
}

.after-step .step-icon  {
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--primary-text);
}

.after-step h3  {
  margin: 0 0 6px;
  font-size: var(--text-h3);
  font-weight: 600;
}
.after-step p  {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- 3. Formularz ---------- */

.contact-form-section  {
  border-top: 2px solid var(--ink);
}

.contact-form-section .container  {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-6);
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
  align-items: start;
}

.form-intro p  {
  margin: var(--space-3) 0 0;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 44ch;
}

.attachments-info  {
  margin-top: var(--space-4);
  border: 1.5px solid var(--ink);
  background: var(--surface);
  padding: 20px 22px;
  box-shadow: 4px 4px 0 var(--shadow);
}

.attachments-info h3  {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h3);
  font-weight: 600;
}

.format-tags  {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-2);
}

.format-tag  {
  font-family: var(--font-mono);
  font-size: 12.5px;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  padding: 4px 10px;
  color: var(--ink-soft);
}

.attachments-limit  {
  margin: 0 0 var(--space-2);
  font-size: 13.5px;
  color: var(--ink-muted);
}

.attachments-warning  {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--danger);
  background: var(--surface-muted);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* pola formularza */

.contact-form  {
  border: 2px solid var(--ink);
  background: var(--surface);
  padding: var(--space-4);
  box-shadow: 6px 6px 0 var(--shadow);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-row  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form-field  {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label  {
  font-weight: 600;
  font-size: var(--text-sm);
}

.form-field .field-hint  {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin: -2px 0 0;
}

.form-field input,
.form-field select,
.form-field textarea  {
  background: var(--background);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  padding: 12px 14px;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  width: 100%;
}

.form-field textarea  {
  resize: vertical;
  min-height: 84px;
}

.form-field input::placeholder,
.form-field textarea::placeholder  {
  color: var(--ink-subtle);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus  {
  outline: 2px solid var(--accent-text);
  outline-offset: 1px;
}

.form-field select  {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232E2A28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
}

/* radio: jak najlepiej się skontaktować */

.radio-group  {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.radio-pill  {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--ink);
  background: var(--background);
  padding: 10px 16px;
  font-size: var(--text-sm);
  cursor: pointer;
}

.radio-pill input  {
  accent-color: var(--primary-text);
  margin: 0;
  width: 15px;
  height: 15px;
}

.radio-pill:has(input:checked)  {
  background: var(--surface-muted);
  outline: 2px solid var(--accent-text);
  outline-offset: -1px;
}

/* drag & drop (wizualny) */

.dropzone  {
  border: 2px dashed var(--ink-subtle);
  background: var(--background);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  color: var(--ink-muted);
}

.dropzone:hover  {
  border-color: var(--primary);
  color: var(--ink-soft);
}
.dropzone svg  {
  color: var(--primary-text);
}
.dropzone .dropzone-text  {
  font-size: var(--text-sm);
  margin: 0;
}
.dropzone .dropzone-limit  {
  font-family: var(--font-mono);
  font-size: 12px;
  margin: 0;
  color: var(--ink-subtle);
}
.dropzone input  {
  display: none;
}

/* checkbox zgody */

.consent  {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  cursor: pointer;
}

.consent input  {
  accent-color: var(--primary-text);
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  flex: none;
}

.form-submit  {
  width: 100%;
  font-size: var(--text-md);
  padding: 16px;
}

.form-footnote  {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}

/* ---------- 4. Wolisz porozmawiać? ---------- */

.call-section  {
  border-top: 2px solid var(--ink);
  background: var(--primary-pressed);
  background-image: repeating-linear-gradient(-45deg, rgba(246, 243, 234, 0.035) 0 2px, transparent 2px 18px);
  color: var(--ink);
}

.call-section .container  {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-6);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  align-items: center;
}

.call-section .section-index  {
  color: var(--ink-subtle);
}
.call-section .section-title  {
  color: var(--background);
}

.call-copy p  {
  margin: var(--space-3) 0 0;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--border);
  max-width: 52ch;
}

.call-panel  {
  border: 2px solid var(--background);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
  font-style: normal;
}

.call-phone  {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 500;
  color: var(--background);
  text-decoration: none;
  letter-spacing: -0.5px;
}
.call-phone:hover  {
  color: var(--border);
}

.call-email  {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--ink-subtle);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.call-email:hover  {
  color: var(--background);
}

.call-whatsapp  {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-subtle);
  text-decoration: none;
}
.call-whatsapp:hover  {
  color: var(--background);
}
.call-whatsapp svg  {
  flex: none;
}

.call-note  {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-subtle);
}

/* ---------- 5. Ważna informacja ---------- */

.disclaimer  {
  border-top: 2px solid var(--ink);
}

.disclaimer .container  {
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-5);
  align-items: start;
}

.disclaimer-copy p  {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 62ch;
}

.disclaimer-copy p:first-child  {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
}

.disclaimer-copy p:last-child  {
  margin-bottom: 0;
}


/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .page-contact  {
  --text-h1: 34px;
}
  .contact-hero .container,
  .contact-form-section .container,
  .call-section .container,
  .disclaimer .container  {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
  /* karta telefoniczna zaraz pod treścią hero */
  .contact-hero .container  {
  gap: var(--space-4);
}
  .after-steps  {
  grid-template-columns: 1fr;
}
  .phone-card  {
  transform: none;
}
}

@media (max-width: 620px) {
  .page-contact  {
  --text-h1: 29px;
  --text-h2: 25px;
}
  .hero-actions  {
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}
  .form-row  {
  grid-template-columns: 1fr;
}
  .contact-form  {
  padding: var(--space-3);
}
  .call-phone  {
  font-size: 26px;
}
  .radio-group  {
  flex-direction: column;
  align-items: stretch;
}
}

/* ============================================================
   Formularz kontaktowy — style pod markup pluginu Form (Grav).

   Projekt graficzny zakładał ręcznie pisany HTML (.form-row, .radio-pill,
   .form-submit). Formularz renderuje jednak plugin Form, który generuje
   własną strukturę: .form-field > .form-label + .form-data, radio jako
   .radio > input + label.inline, przyciski w .buttons.

   Dlatego stylujemy TO, co plugin faktycznie wypluwa. Inaczej formularz
   wygląda jak goły HTML: radio jedno pod drugim z etykietą pod spodem,
   systemowy przycisk „Wyślij”, pola bez układu.
   ============================================================ */

.contact-form-shell form  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-3);
  border: 2px solid var(--ink);
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--shadow);
  padding: var(--space-4);
  align-items: start;
}

.contact-form-shell .form-field  {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Pola długie i złożone zajmują całą szerokość; krótkie (imię, e-mail,
   telefon, firma) układają się po dwa w rzędzie — tak jak w projekcie. */
.contact-form-shell .form-field:has(textarea),
.contact-form-shell .form-field:has(select),
.contact-form-shell .form-field:has(.dropzone),
.contact-form-shell .form-field:has(.radio),
.contact-form-shell .form-field:has(input[type="checkbox"]),
.contact-form-shell .buttons,
.contact-form-shell .form-honeybear  {
  grid-column: 1 / -1;
}

/* Honeypot — pułapka na roboty. MUSI być niewidoczny, inaczej człowiek
   go wypełni i formularz uzna go za spam. */
.contact-form-shell .form-honeybear  {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.contact-form-shell .form-label  {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}

.contact-form-shell .form-label .required,
.contact-form-shell .form-label sup  {
  color: var(--danger);
}

.contact-form-shell input[type="text"],
.contact-form-shell input[type="email"],
.contact-form-shell input[type="tel"],
.contact-form-shell textarea,
.contact-form-shell select  {
  width: 100%;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: 11px 13px;
}

.contact-form-shell textarea  {
  min-height: 110px;
  resize: vertical;
}

.contact-form-shell input:focus,
.contact-form-shell textarea:focus,
.contact-form-shell select:focus  {
  outline: 2px solid var(--accent-text);
  outline-offset: 1px;
  border-color: var(--primary);
}

.contact-form-shell ::placeholder  {
  color: var(--ink-subtle);
}

/* ---------- Radio: poziome „pigułki”, jak w projekcie ---------- */

.contact-form-shell .form-data[data-grav-field="radio"]  {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.contact-form-shell .radio  {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--line);
  background: var(--background);
  padding: 10px 16px;
  cursor: pointer;
}

.contact-form-shell .radio:has(input:checked)  {
  border-color: var(--primary);
  background: var(--accent-soft);
}

.contact-form-shell .radio label.inline  {
  display: inline !important;
  font-size: var(--text-sm);
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
  /* „E-mail” nie ma się łamać na dwie linie */;
}

.contact-form-shell .radio input[type="radio"]  {
  accent-color: var(--primary-text);
  margin: 0;
}

/* ---------- Zgoda (checkbox) ---------- */

.contact-form-shell .form-field:has(input[type="checkbox"]) .form-data  {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1.5px solid var(--line);
  background: var(--background);
  padding: 14px 16px;
}

.contact-form-shell input[type="checkbox"]  {
  accent-color: var(--primary-text);
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: none;
}

.contact-form-shell .form-field:has(input[type="checkbox"]) label  {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- Załączniki ---------- */

.contact-form-shell .dropzone  {
  border: 2px dashed var(--line);
  background: var(--background);
  padding: var(--space-4);
  text-align: center;
  cursor: pointer;
  min-height: 96px;
}

.contact-form-shell .dropzone:hover  {
  border-color: var(--primary);
  background: var(--accent-soft);
}
.contact-form-shell .dropzone .dz-message  {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* ---------- Przycisk wysyłki ----------
   `!important` jest tu świadomą decyzją, nie lenistwem: bez tego przycisk
   renderował się bez tła (kremowy tekst na kremowym tle = niewidoczny),
   mimo że żaden inny arkusz tej reguły nie nadpisywał. Wygląda na starcie
   z domyślnymi stylami przycisku przeglądarki w markupie pluginu Form.
   Wymuszenie jest odporne także na przyszłe aktualizacje pluginu. */

.contact-form-shell .buttons  {
  margin-top: var(--space-2);
}

.contact-form-shell .buttons button,
.contact-form-shell input[type="submit"]  {
  background: var(--primary) !important;
  color: var(--ink);
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  padding: 15px 32px !important;
  cursor: pointer;
  width: auto;
  justify-self: start;
}

.contact-form-shell .buttons button:hover  {
  background: var(--primary-pressed) !important;
}

/* ---------- Komunikaty i błędy ---------- */

.contact-form-shell .form-errors,
.contact-form-shell .form-message  {
  grid-column: 1 / -1;
  border-left: 4px solid var(--danger);
  background: #f6e7e2;
  padding: 12px 16px;
  font-size: var(--text-sm);
}

@media (max-width: 760px) {
  .contact-form-shell form  {
  grid-template-columns: 1fr;
  padding: var(--space-3);
}
}

/* ---------- Dropzone: komunikat i podgląd plików ----------
   Dropzone renderuje komunikat jako <button class="dz-button">, więc bez stylowania
   wygląda jak systemowy przycisk przyklejony z boku ramki. Chcemy zwykły tekst
   na środku pola. */

.contact-form-shell .dropzone  {
  position: relative;
  display: grid;
  place-items: center;
}

.contact-form-shell .dz-message,
.contact-form-shell .dz-default  {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  text-align: center;
}

.contact-form-shell .dz-button  {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--ink-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  cursor: pointer;
}

.contact-form-shell .dropzone:hover .dz-button  {
  color: var(--primary-text) !important;
}

/* Miniatury wgranych plików */
.contact-form-shell .dz-preview  {
  border: 1.5px solid var(--ink);
  background: var(--surface);
  padding: 8px;
}
.contact-form-shell .dz-preview .dz-image,
.contact-form-shell .dz-preview .dz-image img  {
  border-radius: 0 !important;
}
.contact-form-shell .dz-preview .dz-filename  {
  font-size: var(--text-xs);
  color: var(--ink);
}
.contact-form-shell .dz-preview .dz-remove  {
  background: var(--danger) !important;
  border-radius: 0 !important;
}

/* ---------- Komunikat po wysłaniu ----------
   Plugin Form renderuje go jako <div class="notices success green">.
   Motyw nie miał dla tego żadnego stylu, więc potwierdzenie przelatywało
   niezauważone — użytkownik nie wiedział, czy zgłoszenie w ogóle poszło. */

.contact-form-shell .notices  {
  grid-column: 1 / -1;
  border: 2px solid var(--ink);
  border-left: 6px solid var(--primary);
  background: var(--accent-soft);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  box-shadow: 4px 4px 0 var(--shadow);
}

.contact-form-shell .notices p  {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
}

.contact-form-shell .notices.red,
.contact-form-shell .notices.error  {
  border-left-color: var(--danger);
  background: #f6e7e2;
}

.contact-form-shell .notices.yellow,
.contact-form-shell .notices.warning  {
  border-left-color: var(--primary-text);
  background: var(--primary-soft);
}

/* ---------- Lista wyboru: ma wyglądać jak lista ----------
   Domyślnie select wyglądał identycznie jak pole tekstowe — nie było widać,
   że to rozwijana lista ani co jest w niej wybrane. */

.contact-form-shell select  {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 44px;
  /* Strzałka w dół (SVG jako tło — bez dodatkowego elementu w HTML) */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E2A28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

/* Dopóki nic nie wybrano, tekst jest wyszarzony jak podpowiedź. */
.contact-form-shell select:invalid,
.contact-form-shell select option[value=""]  {
  color: var(--ink-subtle);
}
.contact-form-shell select option  {
  color: var(--ink);
}

/* ---------- Wypełnione pola ----------
   Na długim formularzu nie było widać, co już uzupełnione, a co jeszcze nie —
   wszystko zlewało się w jedną plamę. Klasę `is-filled` dokłada js/form-enhance.js. */

.contact-form-shell .form-field.is-filled input,
.contact-form-shell .form-field.is-filled textarea,
.contact-form-shell .form-field.is-filled select  {
  border-color: var(--primary);
  background: var(--surface);
}

.contact-form-shell .form-field.is-filled > .form-label::after,
.contact-form-shell .form-field.is-filled > label::after  {
  content: "✓";
  margin-left: 8px;
  color: var(--primary-text);
  font-weight: 700;
}

/* Zgoda i radio: ptaszek przy etykiecie byłby mylący (obok jest checkbox),
   więc podświetlamy samą ramkę. */
.contact-form-shell .form-field.is-filled:has(input[type="checkbox"]) .form-data,
.contact-form-shell .form-field.is-filled .radio:has(input:checked)  {
  border-color: var(--primary);
}

.contact-form-shell .form-field.is-filled:has(input[type="checkbox"]) > label::after,
.contact-form-shell .form-field.is-filled:has(.radio) > .form-label::after  {
  content: none;
}

/* Pole doprecyzowania tematu — ukrywane przez JS, dopóki nie jest potrzebne. */
.contact-form-shell .form-field[hidden]  {
  display: none;
}