/* ============================================================
   form.css  the home-customer quote form (_includes/quote-form.html)
   One copy of the panel and its fields for every page that shows
   it: the service pages, /services, Tech Tips, suburb pages and
   /quote-request. Loaded by _layouts/default.html for the service,
   suburb and tech-tip layouts, and for any page with
   "quote_form: true" in its front matter.

   Uses the page stylesheet's :root tokens (--ink, --blue, --m-*),
   which every page sheet repeats, so this file carries none.
   ============================================================ */

.audit-block { background: var(--ink); border-radius: 16px; padding: 2rem; margin: 2.5rem 0; position: relative; overflow: hidden; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.audit-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--teal), var(--wa)); }
.audit-block > .audit-block-title { font-family: var(--display); font-size: 1.3rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.014em; color: #fff; margin: 0 0 0.4rem; }
.audit-block > .audit-block-desc { font-size: 0.875rem; color: rgba(255,255,255,0.72); line-height: 1.7; margin: 0 0 1.5rem; }

.tq-form { display: flex; flex-direction: column; gap: 1.25rem; }
.tq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tq-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tq-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.tq-group > legend { padding: 0; margin: 0 0 0.55rem; }
.tq-label { font-size: 0.75rem; font-weight: 700; line-height: 1.6; color: rgba(255,255,255,0.75); letter-spacing: 0.02em; }
.tq-opt { font-weight: 400; color: rgba(255,255,255,0.62); margin-left: 0.25rem; }

.tq-input { width: 100%; font-family: var(--body); font-size: 1rem; line-height: 1.4; color: #fff; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 11px 14px; min-height: 48px; transition: border-color 0.18s var(--ease-settle), background 0.18s var(--ease-settle); }
textarea.tq-input { resize: vertical; min-height: 76px; }
.tq-input::placeholder { color: rgba(255,255,255,0.6); }
.tq-input:focus { outline: none; border-color: var(--blue); background: rgba(255,255,255,0.1); }
.tq-input[aria-invalid="true"] { border-color: #F87171; box-shadow: 0 0 0 4px rgba(248,113,113,0.18); }

/* Tap buttons: a radio under each label, so the choice is one tap and
   arrow keys still move through the group. The radio sits over the face
   and takes every tap; the face ignores the pointer, so its press scale
   can never land on top of the radio and swallow the tap. */
.tq-seg { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tq-seg-opt { position: relative; }
.tq-seg-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tq-seg-opt span:where(:not([class])) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1rem; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.16); font-size: 0.90625rem; font-weight: 500; line-height: 1.6; color: rgba(255,255,255,0.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: background-color 0.15s var(--ease-settle), border-color 0.15s var(--ease-settle), color 0.15s var(--ease-settle); }
.tq-seg-opt input:checked + span { background: rgba(21,96,255,0.22); border-color: var(--blue); color: #fff; font-weight: 600; }
.tq-seg-opt input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.tq-seg-opt input:active + span { transform: scale(0.97); }
.tq-group[aria-invalid="true"] .tq-seg-opt span:where(:not([class])) { border-color: rgba(248,113,113,0.6); }

/* Child selectors on the form's own paragraphs, so a page rule such as
   ".sub-body p" can never reach in and change their spacing. */
.tq-field > .tq-err, .tq-group > .tq-err, .tq-form .tq-err { margin: 0.35rem 0 0; font-size: 0.8125rem; font-weight: 500; line-height: 1.55; color: #FCA5A5; }
.tq-form .tq-err-form { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.35); font-weight: 600; }
.tq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* The email link in the business forms' error and confirmation lines.
   a.audit-mail outranks the article link rules on the industry pages. */
.tq-err-form > a.audit-mail, .audit-done-text > a.audit-mail { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.audit-mail:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }

.tq-submit { width: 100%; min-height: 48px; margin-top: 4px; font-family: var(--body); font-size: 0.9375rem; font-weight: 700; color: #fff; background: var(--blue); border: 0; border-radius: 50px; padding: 14px 24px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.18s var(--ease-settle), transform 0.1s var(--ease-press); }
.tq-submit:active { transform: scale(0.98); }
.tq-submit:disabled { opacity: 0.6; cursor: default; }
.tq-submit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tq-form .tq-trust { margin: 2px 0 0; text-align: center; font-size: 0.78125rem; line-height: 1.55; color: rgba(255,255,255,0.68); }
.tq-form .tq-trust > .tq-call { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

.audit-done { text-align: center; padding: 1.25rem 0 0.75rem; outline: none; }
.audit-done-tick { width: 52px; height: 52px; margin: 0 auto 1rem; border-radius: 50%; background: rgba(34,197,94,0.15); border: 1.5px solid rgba(34,197,94,0.4); display: flex; align-items: center; justify-content: center; color: #4ADE80; }
.audit-done-tick svg { width: 24px; height: 24px; }
.audit-done > .audit-done-title { font-family: var(--display); font-size: 1.15rem; font-weight: 800; line-height: 1.3; color: #fff; margin: 0 0 0.4rem; }
.audit-done > .audit-done-text { font-size: 0.90625rem; color: rgba(255,255,255,0.72); line-height: 1.7; max-width: 46ch; margin: 0 auto; }
/* After a send: carry on in WhatsApp, where a photo can go too. */
.tq-done-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 1.25rem; padding: 0 1.4rem; border-radius: 50px; background: #15803D; color: #fff; font-family: var(--body); font-size: 0.9375rem; font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background 0.15s var(--ease-settle), transform 0.1s var(--ease-press); }
.tq-done-wa > svg { width: 18px; height: 18px; flex-shrink: 0; }
.tq-done-wa:active { transform: scale(0.98); }
.tq-done-wa:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* The phone sticky bar steps aside while the form is on screen (the
   include's script toggles the class). */
.sticky-cta.sv-form-visible { transform: translateY(110%) !important; }

/* Light version: the same form on a white card (the homepage quote card,
   the Business IT card). Put .tq-light on the card body. */
.tq-light .tq-label { color: var(--ink2); }
.tq-light .tq-opt { color: var(--muted); }
.tq-light .tq-input { color: var(--ink); background: var(--bg2); border-color: #CBD5E1; }
.tq-light .tq-input::placeholder { color: #64748B; }
.tq-light .tq-input:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(21,96,255,0.12); }
.tq-light .tq-input[aria-invalid="true"] { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.tq-light .tq-seg-opt span:where(:not([class])) { background: #fff; border-color: #CBD5E1; color: var(--ink2); }
.tq-light .tq-seg-opt input:checked + span { background: var(--blue-lt); border-color: var(--blue); color: var(--blue-dk); }
.tq-light .tq-seg-opt input:focus-visible + span { outline-color: var(--blue); }
.tq-light .tq-group[aria-invalid="true"] .tq-seg-opt span:where(:not([class])) { border-color: #DC2626; }
.tq-light .tq-err, .tq-light .tq-form .tq-err-form { color: #B91C1C; }
.tq-light .tq-err-form { background: #FEF2F2; border-color: #FECACA; }
.tq-light .tq-form .tq-trust { color: var(--muted); }
.tq-light .tq-form .tq-trust > .tq-call { color: var(--blue-dk); }
.tq-light .tq-submit:focus-visible, .tq-light .tq-done-wa:focus-visible { outline-color: var(--blue); }
.tq-light .audit-done-tick { background: rgba(34,197,94,0.12); color: #15803D; }
.tq-light .audit-done > .audit-done-title { color: var(--ink); }
.tq-light .audit-done > .audit-done-text { color: var(--muted); }

@media (hover: hover) {
  .tq-submit:hover { background: var(--blue-dk); }
  .tq-light .tq-seg-opt:hover span:where(:not([class])) { background: var(--blue-lt); border-color: var(--blue-mid); }
  .tq-seg-opt:hover span:where(:not([class])) { background: rgba(255,255,255,0.12); }
  .tq-done-wa:hover { background: #166534; }
  .tq-form .tq-trust > .tq-call:hover { text-decoration-thickness: 2px; }
}

@media (max-width: 640px) {
  .audit-block { padding: 1.5rem 1.25rem; border-radius: 16px; }
  .tq-row { grid-template-columns: 1fr; }
  .tq-seg-opt span:where(:not([class])) { padding: 0 0.85rem; }
}

@media (prefers-contrast: more) {
  .tq-input, .tq-seg-opt span:where(:not([class])) { border-color: rgba(255,255,255,0.6); }
  .tq-label, .tq-opt, .audit-block > .audit-block-desc, .tq-form .tq-trust, .audit-done > .audit-done-text { color: #fff; }
  .tq-light .tq-input, .tq-light .tq-seg-opt span:where(:not([class])) { border-color: #0F172A; }
  .tq-light .tq-label, .tq-light .tq-opt, .tq-light .tq-form .tq-trust, .tq-light .audit-done > .audit-done-text { color: #0F172A; }
}
@media (prefers-reduced-transparency: reduce) {
  .tq-input, .tq-seg-opt span:where(:not([class])) { background: #1E293B; }
  .tq-light .tq-input, .tq-light .tq-seg-opt span:where(:not([class])) { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .tq-submit, .tq-input, .tq-seg-opt span:where(:not([class])), .tq-done-wa { transition: none; }
  .tq-submit:active, .tq-seg-opt input:active + span, .tq-done-wa:active { transform: none; }
}

/* Mobile standard (STATUS.md), same tokens as every page sheet. */
@media (max-width: 720px) {
  .audit-block { padding: var(--m-card-pad); border-radius: var(--m-card-radius); margin-top: var(--m-section); margin-bottom: var(--m-section); }
  .audit-block > .audit-block-title { font-size: var(--m-h2); margin-bottom: var(--m-h2-space); }
  .tq-label, .tq-form .tq-trust { font-size: var(--m-text-min); }
  .tq-submit, .tq-done-wa { min-height: var(--m-btn); padding-top: 0; padding-bottom: 0; width: 100%; justify-content: center; }
}