/* ===========================================================================
   CE-24 · Formularz kontaktowy (contact form)
   Root:     cr-contact-form.ce-contact-form (data-ce="CE-24") – the markup
             is rendered by chrome.js, never written by hand
   Design:   Figma crear-v2.0, frame 316:494 (23.09.2026) – the first CE in the
             UI standard: colours from the UI tokens at the end of site.css
             (--ui-*), TT Hoves Pro 400/500, icons from assets/icons/ at their
             own size (chevron-down, upload-cloud, arrow-up-right)
   Parts:    form.ce-form, __grid (two columns: a field spans both, --pair and
             --half take one), __service („Dotyczy: …” with
             __service-name, from data-service of the opener – 30.09;
             inside the topic field, under its select),
             __field (--pair: topic and budget, --half: name and e-mail,
             --files, --consent), __label, __req (the asterisk), __input
             (text fields and selects), __control + __select + __chevron,
             __drop (the drop zone: __file = the
             invisible file input spread over it, __drop-icon, __drop-text,
             __drop-strong, __files = chosen names, written by site.js),
             __check + __checkbox (consent), __error (filled by site.js),
             __actions, __submit (__blob = the colour smear, __submit-label,
             __submit-icon), __note, __done (confirmation: __done-title,
             __done-text, __again = "Zamknij" in the drawer / "Wyślij
             kolejne" on a page)
   States:   .is-invalid (missing field), .is-prefilled (topic set by
             data-topic) on __field; .is-dragover on __drop (site.js)
   Variants: in-drawer (inside CE-03) · on-page (Kontakt: name and e-mail
             side by side ≥ 900 px; the confirmation in a frame)
   Base:     kontakt.html#formularz · registry: ce-registry.js → CE-24
   =========================================================================== */

/* The host is a size container: topic and budget share a row only where the
   form is wide enough for the longest topic in the select – „Jeszcze nie
   wiem – zacznijmy od rozmowy”, 294 px at 16 px plus 60 px of the field's
   padding and arrow, so 720 px for the pair (30.09: the canonical names of
   Usługi v6; before, 472 px – "Orientacyjny budżet (opcjonalnie)" on one
   line). The drawer (about 490 px) and Kontakt below 1440 px get them one
   under the other, each across the row. */
.ce-contact-form {
  display: block;
  container-type: inline-size;
  color: var(--ui-text);
}

.ce-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 8px;
}

.ce-form__field {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ce-form__field--pair { grid-column: auto; }
@media (max-width: 480px) {
  .ce-form__field--pair { grid-column: 1 / -1; }
}
@container (max-width: 719px) {
  .ce-form__field--pair { grid-column: 1 / -1; }
}

.ce-form__label {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.375;           /* 22 px: label + 8 + field = the design's 90 px */
  letter-spacing: -.01em;
  color: var(--ui-text);
}
.ce-form__req { color: inherit; }

/* ---- text fields and selects: 60 px, outline #ACB0B8, radius 8 ----------- */
.ce-form__input {
  display: block;
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--ui-stroke);
  border-radius: 8px;
  background: #fff;
  color: var(--ui-text);
  font: inherit;
  font-size: 1rem;              /* 16 px: no zoom on focus in iOS Safari */
  line-height: 1.4;
  letter-spacing: -.01em;
  -webkit-appearance: none;
  appearance: none;
}
/* the message (05.10.2026): the input look, several lines tall */
.ce-form__textarea {
  height: auto;
  min-height: 140px;
  padding: 16px;
  resize: vertical;
}

.ce-form__input::placeholder { color: var(--ui-text-40); opacity: 1; }
.ce-form__input:hover { border-color: var(--ui-text-60); }
.ce-form__input:focus-visible {
  outline: none;
  border-color: var(--ui-ink);
  box-shadow: 0 0 0 1px var(--ui-ink);
}

/* select: no native arrow; the chevron of the design (20 px box, 60%)
   stands where the design has it – 16 px inside the right edge */
.ce-form__control { position: relative; }
.ce-form__select {
  padding-right: 44px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.ce-form__select:has(option[value=""]:checked) { color: var(--ui-text-40); }
.ce-form__select option { color: var(--ui-text); }
.ce-form__chevron {
  position: absolute;
  top: 20px;
  right: 17px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  opacity: .6;
  pointer-events: none;
}
.ce-form__chevron img { width: 11.5px; height: 6.5px; }

/* ---- errors and states ---------------------------------------------------- */
.ce-form__error {
  font-size: .875rem;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ui-error);
}
.ce-form__field.is-invalid .ce-form__input,
.ce-form__field.is-invalid .ce-form__drop,
.ce-form__field.is-invalid .ce-form__checkbox { border-color: var(--ui-error); }
.ce-form__field.is-invalid .ce-form__input:focus-visible { box-shadow: 0 0 0 1px var(--ui-error); }

/* a topic set by data-topic is framed in ink */
.ce-form__field.is-prefilled .ce-form__select { border-color: var(--ui-ink); }

/* „Dotyczy: <usługa>” (30.09, Usługi v6): the service of the opener
   (data-service, chrome.js) – one quiet line in the topic field, right
   under its select (the field's 8 px gap above it); the service also goes
   in the hidden field "service". Hidden when the opener has no service.
   #0A2526 at 65% – 5 : 1 at 14 px. */
.ce-form__service {
  font-size: .875rem;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ui-text-65);
}
.ce-form__service-name { color: var(--ui-text); }

/* ---- attachments: the drop zone ------------------------------------------ */
.ce-form__drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 169px;
  padding: 24px 16px;
  border: 1px solid var(--ui-stroke);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}
.ce-form__drop:hover { border-color: var(--ui-text-60); }
.ce-form__drop.is-dragover {
  border-color: var(--ui-ink);
  box-shadow: inset 0 0 0 1px var(--ui-ink);
}
.ce-form__drop:has(.ce-form__file:focus-visible) {
  outline: 2px solid var(--ui-ink);
  outline-offset: 2px;
}
/* the input covers the whole zone: a click opens the picker, a drop lands in it */
.ce-form__file {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.ce-form__file::file-selector-button { cursor: pointer; }
.ce-form__drop-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ui-stroke-soft);
  border-radius: 4px;
  background: #fff;
}
.ce-form__drop-icon img { width: 18.1667px; height: 16.5px; }
.ce-form__drop-text {
  max-width: 304px;
  font-size: .875rem;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ui-text-40);
  text-wrap: balance;
}
.ce-form__drop-strong { font-weight: 500; }
.ce-form__files {
  max-width: 100%;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--ui-text-60);
  overflow-wrap: anywhere;
}

/* ---- consent ------------------------------------------------------------ */
.ce-form__field--consent { margin-top: 24px; }
.ce-form__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .875rem;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ui-text);
}
.ce-form__check label { cursor: pointer; }
.ce-form__check .lf-link { color: inherit; }
.ce-form__checkbox {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--ui-stroke);
  border-radius: 4px;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
/* the tick: two borders of a rotated box, white on the dark fill */
.ce-form__checkbox::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 2.5px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.ce-form__checkbox:checked {
  border-color: var(--ui-ink);
  background: var(--ui-ink);
}
.ce-form__checkbox:checked::before { opacity: 1; }
.ce-form__checkbox:hover { border-color: var(--ui-text-60); }
.ce-form__checkbox:checked:hover { border-color: var(--ui-ink); }
.ce-form__checkbox:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 2px; }

/* ---- the button, the note ------------------------------------------------- */
.ce-form__actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ce-form__submit,
.ce-form__again {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 4px;
  background: var(--ui-button);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .9375rem;          /* 15 px, Expanded Regular */
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color .2s ease;
}
.ce-form__submit:hover,
.ce-form__again:hover { background: var(--ui-ink); }
.ce-form__submit:focus-visible,
.ce-form__again:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 2px; }
.ce-form__submit-label,
.ce-form__submit-icon { position: relative; z-index: 1; }
.ce-form__submit-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
}
.ce-form__submit-icon img { width: 9.3333px; height: 9.3333px; }

/* The colour smear at the right end (Figma 316:516): five stadium shapes,
   placed from the right edge as in the design, blurred together. The blur
   was fitted to the render of the design (22 px: mean error 1.3 of 255 on
   the smear); the button's overflow cuts it. */
.ce-form__blob {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: blur(22px);
  pointer-events: none;
}
.ce-form__blob > span {
  position: absolute;
  display: block;
  width: 31.403px;
  height: 59.665px;
  border-radius: 999px;
}
.ce-form__blob > span:nth-child(1) { right: 46.74px; top: 37.14px; background: var(--ui-blob-1); }
.ce-form__blob > span:nth-child(2) { right: 32.6125px; top: -47.0065px; background: var(--ui-blob-2); transform: rotate(-30deg); }
.ce-form__blob > span:nth-child(3) { right: 25.33px; top: -41.31px; width: 59.665px; height: 92.019px; background: var(--ui-blob-3); }
.ce-form__blob > span:nth-child(4) { right: 27.8965px; top: -40.5325px; background: var(--ui-blob-4); transform: rotate(24deg); }
.ce-form__blob > span:nth-child(5) { right: 32.61px; top: 22.28px; background: var(--ui-blob-5); }

.ce-form__note {
  font-size: .875rem;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ui-text-60);
}

/* ---- confirmation --------------------------------------------------------- */
.ce-form__done { scroll-margin-top: calc(var(--header-h) + 1rem); }
.ce-form__done-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.04em;
  color: var(--ui-ink);
}
.ce-form__done-text {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ui-text);
}
.ce-form__again { margin-top: 32px; }

/* ---- variants ------------------------------------------------------------ */
/* on-page: name and e-mail share a row on the desktop; the confirmation
   stands in a frame and its button fits its label. */
@media (min-width: 900px) {
  .ce-contact-form[data-ce-variant~="on-page"] .ce-form__field--half { grid-column: auto; }
}
.ce-contact-form[data-ce-variant~="on-page"] .ce-form__done {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--ui-stroke);
  border-radius: 12px;
}
.ce-contact-form[data-ce-variant~="on-page"] .ce-form__again {
  width: auto;
  padding: 0 32px;
}

/* honeypot (05.10.2026): off screen for people, a field like any other for
   bots – api/contact.php drops a post that fills it in */
.ce-form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ce-form__submit[aria-busy="true"] { cursor: progress; opacity: .6; }