/*
 * D-078 (owner, 26 Oct): one look for every product quote / lead form, modelled on the renewal card (renew/index).
 *   - fields 44px tall (were 48px: the owner found the forms a little big) and 12px apart
 *   - the field's name is its placeholder; the label stays for screen readers (choice groups such as gender keep a
 *     small visible heading, since buttons have no placeholder)
 *   - the same primary button (.cy-btn--primary --lg --block): "View Quote" where the form opens live quotes (PI,
 *     health, motor), "Request a Callback" where it creates a lead for an advisor
 *   - below the button: the RM badge, the WhatsApp toggle where the form stores it, and the consent line
 * Forms: PI, health, motor, the five hospital pages (.pl-input), renewal (.rn-input), term, cyber, home and
 * investment (.quote-form). Loaded site-wide in head.blade.php; page stylesheets load later, so rules start with
 * `body` to win ties.
 */
:root { --cy-qf-h: 44px; --cy-qf-gap: 12px; }

/* ---------- field height and spacing ---------- */
body .pl-input .cy-input,
body .pdl-name .cy-input { height: var(--cy-qf-h); }
body .pl-input > img,
body .pl-input > .cy-icon { top: calc((var(--cy-qf-h) - 24px) / 2); }
body .pdl-reg .pl-input > .cy-icon { top: calc((var(--cy-qf-h) - 32px) / 2); }
body .rn-input { height: var(--cy-qf-h); }
body .quote-form .form-field,
body .quote-form .gender-option,
body .pdl-choice { height: var(--cy-qf-h); }

body .pl-form__fields,
body .pdl-form__fields,
body .hp-form__fields,
body .rn-form { gap: var(--cy-qf-gap); }
body .pl-form,
body .pdl-form,
body .hp-form { gap: 16px; }
body .quote-form .form-group { margin-bottom: var(--cy-qf-gap); }

/* ---------- labels: inside the field (placeholder), kept for screen readers ---------- */
body .hp-form .hp-field__label,
body .pdl-field > label.pdl-field__label,
body .quote-form .form-group:not(:has(.gender-toggle-wrapper)) > .form-label-top {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- one button ---------- */
body .quote-form > .cy-btn,
body .rn-form > .cy-btn { margin-top: 4px; }

/* ---------- under the button: RM badge, WhatsApp, consent (as on the renewal card) ---------- */
.cy-qf-trust { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 4px; }
.cy-qf-trust .pl-rm {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 302px; max-width: 100%; margin: 0; padding: 2px 8px;
  border-radius: 8px; background: linear-gradient(to right, #fff 0.871%, #fdeeec 41.791%);
  font: 500 var(--cy-fs-xs)/16px var(--cy-font); color: var(--cy-neutral-1000);
}
.cy-qf-trust .pl-rm__icon,
.cy-qf-trust .pl-rm__smile { position: relative; display: block; flex-shrink: 0; overflow: hidden; }
.cy-qf-trust .pl-rm__icon { width: 32px; height: 32px; }
.cy-qf-trust .pl-rm__smile { position: absolute; }
.cy-qf-trust .pl-rm__icon span,
.cy-qf-trust .pl-rm__smile span { position: absolute; display: block; }
.cy-qf-trust .pl-rm__icon img { display: block; width: 100%; height: 100%; }

/* consent line on the older product pages: centred, as on the renewal card (was left-aligned) */
body .quote-form .quote-disclaimer-wrapper { justify-content: center; }
body .quote-form .quote-disclaimer { text-align: center; }