/* ============================================================
   PowerFix — form.css
   BEM: pf-dialog__*, pf-form__*, pf-seg__*
   T4: the enquiry dialog is a two-column sheet — navy left rail
   (36%) with the brand surface and three trust rows, white form
   column on the right. Below 900px it collapses to a single
   column with a sticky submit footer inside the sheet's own
   scroll box.
   Colours inherit --pf-navy / --pf-blue from styles.css
   ============================================================ */

/* ---- Dialog shell ----------------------------------------- */
dialog#requestDialog {
  border: none;
  border-radius: 14px;
  padding: 0;
  margin: auto; /* override legacy reset that zeroes margin */
  width: min(920px, calc(100vw - 1.5rem));
  max-width: none;
  max-height: calc(100dvh - 1.5rem);
  background: #fff;
  color: var(--pf-text, #102233);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(15, 27, 42, .38);
}

dialog#requestDialog::backdrop {
  background: rgba(15, 27, 42, .62);
  backdrop-filter: blur(2px);
}

/* ---- Two-column layout ------------------------------------ */
.pf-dialog__inner {
  display: grid;
  grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  max-height: calc(100dvh - 1.5rem);
  min-height: 0;
}

/* ---- Left rail (navy) ------------------------------------- */
.pf-dialog__rail {
  background: #0f1b2a;
  color: #fff;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.pf-dialog__eyebrow {
  font-family: var(--pf-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7fa8f5;
}

.pf-dialog__title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  color: #fff;
}

.pf-dialog__copy {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: #a9bcd0;
}

.pf-dialog__trust {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.pf-dialog__trust-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: .86rem;
  line-height: 1.4;
  color: #dbe5ef;
}

.pf-dialog__trust-icon {
  display: block;
  color: #7fa8f5;
}

.pf-dialog__icon {
  display: block;
  width: 22px;
  height: 22px;
}

/* ---- Right column (form) ---------------------------------- */
.pf-dialog__body {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 28px 28px;
  background: #fff;
}

.pf-dialog__topbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 4px;
}

.pf-dialog__close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pf-line, #dce3ec);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--pf-mut, #5b6878);
  transition: background .15s, color .15s, border-color .15s;
}

.pf-dialog__close:hover {
  background: var(--pf-paper, #f3f6fa);
  color: #0f1b2a;
  border-color: #c7d2e0;
}

.pf-dialog__close:focus-visible {
  outline: 2px solid var(--pf-blue, #1a69f1);
  outline-offset: 2px;
}

/* ---- Form rhythm ------------------------------------------ */
.pf-form {
  display: grid;
  gap: 22px;
}

/* Field group: 2 columns on desktop, 8-12px inside, 20-28px between groups */
.pf-form__group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 16px;
}

.pf-form__section--solution,
.pf-form__section--repair {
  display: grid;
  gap: 16px;
}

/* Field wrapper */
.pf-form__field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.pf-form__field--hidden {
  display: none !important;
}

/* Labels */
.pf-form__label {
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--pf-navy, #0f1b2a);
}

/* Inputs, selects, textareas */
.pf-form__input,
.pf-form__select,
.pf-form__textarea {
  width: 100%;
  padding: .62rem .78rem;
  border: 1px solid var(--pf-line, #dce3ec);
  border-radius: 9px;
  font: inherit;
  font-size: .94rem;
  color: var(--pf-text, #102233);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

.pf-form__input:focus,
.pf-form__select:focus,
.pf-form__textarea:focus {
  outline: none;
  border-color: var(--pf-blue, #1a69f1);
  box-shadow: 0 0 0 3px rgba(26, 105, 241, .15);
}

.pf-form__input--error,
.pf-form__select--error,
.pf-form__textarea--error {
  border-color: #d93025;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, .12);
}

/* The error state must survive focus (validation focuses the failing field) */
.pf-form__input--error:focus,
.pf-form__select--error:focus,
.pf-form__textarea--error:focus {
  border-color: #d93025;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, .18);
}

.pf-form__textarea {
  resize: vertical;
  min-height: 96px;
}

/* Inline error message */
.pf-form__error {
  font-size: .8rem;
  color: #c81e11;
  display: none;
}

.pf-form__error--visible {
  display: block;
}

/* ---- Segmented intent control ----------------------------- */
.pf-seg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--pf-paper, #f3f6fa);
  border: 1px solid var(--pf-line, #dce3ec);
  border-radius: 11px;
}

.pf-seg__opt {
  position: relative;
  display: flex;
  min-width: 0;
}

/* The real radio stays in the group (name/value/keyboard semantics unchanged)
   but is visually replaced by the .pf-seg__face pill. */
.pf-seg__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.pf-seg__face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--pf-mut, #5b6878);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}

.pf-seg__face:hover {
  color: var(--pf-navy, #0f1b2a);
}

.pf-seg__input:checked + .pf-seg__face {
  background: #fff;
  color: var(--pf-navy, #0f1b2a);
  border-color: rgba(15, 27, 42, .1);
  box-shadow: 0 1px 4px rgba(15, 27, 42, .16);
}

.pf-seg__opt:has(.pf-seg__input:focus-visible) .pf-seg__face {
  outline: 2px solid var(--pf-blue, #1a69f1);
  outline-offset: 2px;
}

.pf-seg__input:disabled + .pf-seg__face {
  opacity: .6;
  cursor: not-allowed;
}

/* Contact-preference radio row (same control, tighter rhythm) */
.pf-form__intent {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.pf-form__intent label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  cursor: pointer;
  padding: .45rem .75rem;
  border: 1px solid var(--pf-line, #dce3ec);
  border-radius: 9px;
  transition: border-color .15s, background .15s;
}

.pf-form__intent label:has(input:checked) {
  border-color: var(--pf-blue, #1a69f1);
  background: var(--pf-blue-soft, #eaf1fe);
}

.pf-form__intent input[type="radio"] {
  accent-color: var(--pf-blue, #1a69f1);
}

/* ---- Status feedback -------------------------------------- */
.pf-form__status {
  font-size: .9rem;
  border-radius: 9px;
  padding: .75rem 1rem;
  display: none;
}

.pf-form__status--success {
  display: block;
  background: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #a5d6a7;
}

.pf-form__status--error {
  display: block;
  background: #fce8e6;
  color: #7f1c18;
  border: 1px solid #f5c6c3;
}

/* ---- Footnote + submit ------------------------------------ */
.pf-form__footer {
  display: grid;
  gap: 14px;
}

.pf-form__note {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--pf-mut, #5b6878);
}

.pf-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .8rem 1.4rem;
  border: none;
  border-radius: 10px;
  background: var(--pf-blue, #1a69f1);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: .97rem;
  cursor: pointer;
  transition: opacity .15s;
  width: 100%;
}

.pf-form__submit:disabled,
.pf-form__submit[aria-busy="true"] {
  opacity: .65;
  cursor: not-allowed;
}

.pf-form__submit:not(:disabled):hover {
  opacity: .88;
}

/* Honeypot: hidden from AT and visual users */
.pf-form__honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

/* ---- Mobile: single column, navy header band, sticky footer ---- */
@media (max-width: 899px) {
  dialog#requestDialog {
    width: calc(100vw - 1rem);
    border-radius: 12px;
  }

  .pf-dialog__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* Navy band reduced to eyebrow + heading */
  .pf-dialog__rail {
    padding: 16px 20px 18px;
    gap: 4px;
  }

  .pf-dialog__title {
    font-size: 1.2rem;
  }

  .pf-dialog__copy,
  .pf-dialog__trust {
    display: none;
  }

  .pf-dialog__body {
    padding: 6px 18px 0;
  }

  .pf-form {
    gap: 18px;
  }

  .pf-form__group {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  /* Submit stays reachable while the sheet scrolls internally */
  .pf-form__footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 -18px;
    padding: 12px 18px 16px;
    background: #fff;
    border-top: 1px solid var(--pf-line, #dce3ec);
    box-shadow: 0 -10px 20px rgba(15, 27, 42, .07);
  }

  .pf-form__note {
    font-size: .78rem;
  }
}

@media (max-width: 400px) {
  .pf-form__intent {
    flex-direction: column;
    align-items: stretch;
  }

  .pf-form__intent label {
    justify-content: flex-start;
  }
}