/* =========================================================
   Quote popup — 2026 skin (Figma "Car Details" pop-up, node 190:56883)

   A reskin only. HeroQuoteModal and CarDetailsStep keep their markup, fields, buttons and
   behaviour; this sheet loads right after hero-quote.css (from HeroQuoteModal) and wins on
   source order at equal specificity. Colours are literals with their own dark set rather than
   --al-* tokens: the same card also renders on wizard pages (.hq-modal--inline) whose layout
   does not load home-base.css.
   ========================================================= */

/* .hq-capture-page is the inline entry of the same card (the wizard's own step 1). It has no
   .hq-overlay ancestor, so it needs the token set spelled out here too, and App.razor links
   this sheet right after hero-quote.css. */
.hq-overlay,
.hq-capture-page {
  --hq-card-bg: #ffffff;
  --hq-card-glow: rgba(24, 201, 47, 0.16);
  --hq-card-border: transparent;
  --hq-title: #000000;
  --hq-muted: #858aa3;
  --hq-body: #515151;
  --hq-input-bg: transparent;
  --hq-input-border: #cfcfcf;
  --hq-input-text: #000000;
  --hq-input-placeholder: #adadad;
  --hq-input-icon: #adadad;
  --hq-ghost-text: #1e4aab;
  --hq-ghost-border: #e6e6e6;
  --hq-divider: #e6e6e6;
  --hq-track-bg: rgba(234, 239, 252, 0.5);
  --hq-tab-active-bg: #ffffff;
  --hq-tab-active-border: #e6e6e6;
  --hq-tab-idle: #adadad;
  --hq-radio-border: #adadad;
  --hq-radio-on: #2863e4;
  --hq-green: #18c92f;
  --hq-green-hover: #16b52a;
  --hq-secondary-bg: #e8faea;
  --hq-secondary-bg-hover: #d7f5db;
  --hq-secondary-text: #129723;
  --hq-radius: 999px;
  --hq-action-h: 48px;
  --hq-focus-ring: 0 0 0 3px rgba(24, 201, 47, 0.18);
}

[data-theme="dark"] .hq-overlay,
[data-theme="dark"] .hq-capture-page {
  --hq-card-bg: #161d2e;
  --hq-card-glow: rgba(24, 201, 47, 0.12);
  --hq-card-border: rgba(255, 255, 255, 0.08);
  --hq-title: #ffffff;
  --hq-muted: #9aa1ae;
  --hq-body: #c3c8d2;
  --hq-input-border: rgba(255, 255, 255, 0.18);
  --hq-input-text: #f2f4f8;
  --hq-input-placeholder: #7d879e;
  --hq-input-icon: #7d879e;
  --hq-ghost-text: #7aa3ff;
  --hq-ghost-border: rgba(255, 255, 255, 0.14);
  --hq-divider: rgba(255, 255, 255, 0.1);
  --hq-track-bg: rgba(255, 255, 255, 0.06);
  --hq-tab-active-bg: rgba(255, 255, 255, 0.12);
  --hq-tab-active-border: rgba(255, 255, 255, 0.14);
  --hq-tab-idle: #9aa1ae;
  --hq-radio-border: #5b6478;
  --hq-radio-on: #5b8bff;
  --hq-secondary-bg: rgba(24, 201, 47, 0.16);
  --hq-secondary-bg-hover: rgba(24, 201, 47, 0.24);
  --hq-secondary-text: #3ddc52;
}

/* ── Card ─────────────────────────────────────────────────────────────── */

.hq-modal {
  border-radius: 16px;
  border: 1px solid var(--hq-card-border);
  /* Figma: a green wash fading out over the top fifth of the card */
  background:
    linear-gradient(180deg, var(--hq-card-glow) 0%, transparent 20.833%),
    var(--hq-card-bg);
  padding: 40px;
  font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
}

@media (min-width: 561px) {
  .hq-modal--wizard {
    width: 640px;
    padding: 40px;
  }
}

/* Logo centred over the title; close pinned to the card's end corner (left under RTL). */
.hq-modal__header {
  position: relative;
  justify-content: center;
  margin: 0;
  padding-top: 24px;
  margin-bottom: 12px;
}

.hq-modal__close {
  position: absolute;
  top: -14px;
  inset-inline-end: -14px;
  color: var(--hq-title);
  border-radius: 999px;
}

.hq-modal__close:hover { background: var(--hq-track-bg); }
[data-theme="dark"] .hq-modal__close:hover { background: var(--hq-track-bg); }
.hq-modal__close svg { width: 16px; height: 16px; }

.hq-modal__logo img {
  width: 49.42px;
  height: 44px;
  opacity: 1;
}

.hq-modal__title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--hq-title);
  margin: 0 0 12px;
}

.hq-modal__subtitle {
  font-size: 16px;
  line-height: 24px;
  color: var(--hq-muted);
  margin: 0 0 24px;
}

.hq-form { gap: 24px; }
.hq-mode-fields { gap: 16px; }

/* ── Identification tabs (row without a label) ────────────────────────── */

.hq-modes { margin: 0; }

.hq-modes__track {
  gap: 0;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--hq-track-bg);
}

.hq-mode {
  height: 40px;
  padding-inline: 16px;
  border: 0.5px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  color: var(--hq-tab-idle);
}

.hq-mode:hover { color: var(--hq-title); }

.hq-mode.is-active,
[data-theme="dark"] .hq-mode.is-active {
  background: var(--hq-tab-active-bg);
  border-color: var(--hq-tab-active-border);
  /* Figma adds a 0 1px 160px 12%-grey glow here; browsers band a blur that wide into visible
     rings across the card, so it is left out. */
  box-shadow: none;
  color: var(--hq-title);
  font-weight: 700;
}

/* Divider under the identification tabs */
.hq-form > .hq-modes:not(:has(.hq-modes__label)) {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hq-divider);
}

/* ── Insurance type (row with a label) → radio buttons ────────────────── */

.hq-modes:has(.hq-modes__label) .hq-modes__label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--hq-muted);
  margin-bottom: 16px;
}

.hq-modes:has(.hq-modes__label) .hq-modes__track,
[data-theme="dark"] .hq-modes:has(.hq-modes__label) .hq-modes__track {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px 32px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.hq-modes:has(.hq-modes__label) .hq-mode,
.hq-modes:has(.hq-modes__label) .hq-mode.is-active,
[data-theme="dark"] .hq-modes:has(.hq-modes__label) .hq-mode.is-active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: auto;
  min-block-size: 44px;          /* touch target; the circle stays 24px */
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--hq-title);
  overflow: visible;
}

.hq-modes:has(.hq-modes__label) .hq-mode::before {
  content: "";
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--hq-radio-border);
  box-sizing: border-box;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.hq-modes:has(.hq-modes__label) .hq-mode.is-active::before {
  border-color: var(--hq-radio-on);
  background: var(--hq-radio-on);
  box-shadow: inset 0 0 0 3px var(--hq-card-bg);
}

/* ── Fields ───────────────────────────────────────────────────────────── */

.hq-field {
  height: 56px;
  border-radius: 999px;
  border-color: var(--hq-input-border);
  background: var(--hq-input-bg);
}

.hq-field:focus-within {
  border-color: var(--hq-green);
  box-shadow: var(--hq-focus-ring);
}

/* Figma's inputs carry no leading icon; the select chevron stays (it signals a picker). */
.hq-field__icon { display: none; }

.hq-field input,
.hq-field .hq-trigger {
  font-size: 14px;
  padding-inline: 24px;
  color: var(--hq-input-text);
}

.hq-field--select input,
.hq-field--select .hq-trigger { padding-inline-end: 44px; }
.hq-field__chevron { inset-inline-end: 20px; }

.hq-error {
  margin: -8px 0 0;
  padding-inline: 24px;
}

.hq-error--page { padding: 9px 16px; border-radius: 16px; }

/* ── Terms (round green checkbox) + divider above the actions ─────────── */

.hq-terms {
  align-items: center;
  gap: 12px;
  margin: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hq-divider);
  font-size: 16px;
  line-height: 24px;
  color: var(--hq-body);
}

.hq-terms input {
  appearance: none;
  -webkit-appearance: none;
  inline-size: 24px;
  block-size: 24px;
  margin: 0;
  border-radius: 50%;
  border: 1.5px solid var(--hq-radio-border);
  background: transparent center / 15px 15px no-repeat;
  transition: background-color .2s ease, border-color .2s ease;
}

.hq-terms input:checked {
  border-color: var(--hq-green);
  background-color: var(--hq-green);
  background-image: url('../../assets/home/modal-check.svg');
}

.hq-terms input:focus-visible {
  outline: 2px solid var(--hq-radio-on);
  outline-offset: 2px;
}

.hq-terms a {
  color: var(--hq-ghost-text);
  text-decoration: none;
}

.hq-terms a:hover { text-decoration: underline; }

/* ── Actions ──────────────────────────────────────────────────────────── */

.hq-submit,
.hq-secondary {
  height: 48px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
}

/* Figma Button CTA: green gradient with inner highlights, turning blue on hover */
.hq-submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 0;
  background: linear-gradient(to bottom, var(--hq-green), var(--hq-green-hover));
  color: #ffffff;
  box-shadow:
    inset 0 2px 3.7px 0 rgba(255, 255, 255, 0.2),
    inset 0 4px 8px 0 var(--hq-green),
    inset 0 2px 2px 0 #b7eebf,
    0 4px 8px 0 rgba(8, 70, 16, 0.05),
    0 1px 1px 0 rgba(8, 70, 16, 0.12),
    0 4px 4px 0 rgba(0, 0, 0, 0.02);
  transition: box-shadow .3s cubic-bezier(0, 0, .58, 1);
}

.hq-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(to bottom, #2863e4, #2459cd);
  box-shadow:
    inset 0 2px 3.7px 0 rgba(255, 255, 255, 0.2),
    inset 0 4px 8px 0 #2863e4,
    inset 0 2px 2px 0 #bccff7;
  opacity: 0;
  transition: opacity .3s cubic-bezier(0, 0, .58, 1);
  pointer-events: none;
}

.hq-submit:hover:not(:disabled) { filter: none; transform: none; }
.hq-submit:hover:not(:disabled)::before { opacity: 1; }

/* The form's own gap (24px) would separate the two actions; Figma stacks them 12px apart. */
.hq-secondary {
  margin-top: -12px;
  border: 0;
  background: var(--hq-secondary-bg);
  color: var(--hq-secondary-text);
}

.hq-secondary:hover,
[data-theme="dark"] .hq-secondary:hover { background: var(--hq-secondary-bg-hover); }
[data-theme="dark"] .hq-secondary { background: var(--hq-secondary-bg); }

.hq-note {
  margin-top: 24px;
  font-size: 14px;
  line-height: 16px;
  color: var(--hq-body);
}

/* ── Small screens ────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .hq-modal {
    padding: 24px 16px;
    border-radius: 16px;
  }

  .hq-modal__header { padding-top: 16px; }
  .hq-modal__close { top: -10px; inset-inline-end: -6px; }
  .hq-modal__logo img { width: 40px; height: 36px; }

  .hq-modal__title { font-size: 20px; line-height: 28px; margin-bottom: 8px; }
  .hq-modal__subtitle { font-size: 14px; line-height: 22px; margin-bottom: 20px; }

  .hq-form { gap: 20px; }
  .hq-form > .hq-modes:not(:has(.hq-modes__label)) { padding-bottom: 20px; }
  .hq-terms { padding-bottom: 20px; font-size: 14px; }
  .hq-secondary { margin-top: -8px; }

  .hq-mode { padding-inline: 8px; font-size: 13px; }
  .hq-modes:has(.hq-modes__label) .hq-mode { font-size: 15px; }

  .hq-field { height: 52px; }
  .hq-field input,
  .hq-field .hq-trigger { font-size: 14px; padding-inline: 20px; }

  /* The auth card's native selects are a (0,2,0) rule, so they outrank the line above and
     would sit at 24px beside inputs at 20px. */
  .hq-modal--auth .hq-field select { padding-inline: 20px; padding-inline-end: 40px; }

  .hq-overlay,
  .hq-capture-page { --hq-action-h: 48px; }
  .hq-submit,
  .hq-secondary { height: 48px; font-size: 14px; }
}

/* ── Sign-in / sign-up card (AuthModal + PasswordlessAuthCard) ─────────────
   The same card, asking a different question. Everything above is reused as-is; these are
   only the shapes the capture form has never needed, and every one of them is scoped under
   .hq-modal--auth so the capture popup cannot regress on any of them.

   The capture form is placeholder-only and single-column, so it has no label, no hint, no
   two-up row, no native picker and no divider that is not already welded to .hq-modes or
   .hq-terms. The sign-in card has all five. */

/* Label / field / hint, as one stack. */
.hq-modal--auth .hq-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hq-modal--auth .hq-label,
.hq-modal--auth .ibs-recapture__label {
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  color: var(--hq-title);
}

.hq-modal--auth .hq-label__req {
  margin-inline-start: 4px;
  color: #e5484d;
}

/* Flush at the inline start, unlike .hq-error, which is inset 24px to line up under the text
   INSIDE a pill field. A hint belongs to the label above it, not to the box. */
.hq-modal--auth .hq-hint {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--hq-muted);
}

/* A native picker, dressed as the pill the .hq-field inputs already are. Same font, same
   padding, same chevron gutter — appearance:none is the only thing the input selector above
   does not already say. */
.hq-modal--auth .hq-field select {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--hq-input-text);
  padding-inline: 24px 44px;
  text-align: start;
  appearance: none;
  -webkit-appearance: none;
  border-radius: inherit;
  cursor: pointer;
}

/* "Not picked yet" in the placeholder colour. The hq pattern for that is
   .hq-trigger[data-empty], which cannot apply to a native control; `required` plus an empty
   first option is the standard equivalent. The option list is re-stated at full contrast
   because the open list inherits the select's colour, and a grey list of months reads as a
   disabled one. */
.hq-modal--auth .hq-field select:invalid {
  color: var(--hq-input-placeholder);
}

.hq-modal--auth .hq-field select option {
  color: var(--hq-input-text);
}

/* The details step shows the national ID locked. Neither hero-quote.css nor the skin has a
   disabled rule, and the UA's own grey on a transparent pill reads as a field that failed to
   load. -webkit-text-fill-color because Safari ignores `color` on a disabled input. */
.hq-modal--auth .hq-field input:disabled,
.hq-modal--auth .hq-field select:disabled {
  color: var(--hq-muted);
  -webkit-text-fill-color: var(--hq-muted);
  opacity: 1;
  cursor: not-allowed;
}

/* The month | year pair: 272 + 16 + 272 across the 560px of content a 640px card leaves.
   auto-fit rather than a fixed two columns so the pair stacks instead of squeezing when the
   card narrows — at 200px a track can no longer hold "01 - جمادى الأولى". */
.hq-modal--auth .hq-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* The rules under the subtitle and above the actions. The existing dividers are welded to
   .hq-modes and .hq-terms, and neither is on every step. No margin: it lives inside .hq-form,
   whose 24px gap already spaces it on both sides. */
.hq-modal--auth .hq-divider {
  height: 1px;
  background: var(--hq-divider);
}

/* A four-digit code, read back a character at a time. LTR whatever the page direction is:
   an OTP is digits in the order they were sent. */
.hq-modal--auth .hq-field--otp input {
  text-align: center;
  direction: ltr;
  letter-spacing: .5em;
}

/* The step-up CAPTCHA, dressed as one of this card's own fields.
   auth.css tunes .ibs-recapture for "inside the auth modal" (auth.css:582-612) through a
   .auth-modal ancestor this shell does not have, and its own base is a 52px / 8px box on the
   glass palette: the canvas takes --auth-input-bg and --auth-input-border, 12% and 25% white,
   which on this card's white background is neither a background nor a border. This block is
   that lost set, re-stated in the card's own tokens, and scoped so the wizard's own recapture
   (CaptchaGate, where the base rules are correct) is untouched. */
.hq-modal--auth .ibs-recapture__label {
  margin-inline-start: 0;
}

/* 56px to line up with the answer pill beside it — the row is align-items:flex-start, so a
   52px canvas sits 4px proud of it. 12px, not 999px: the challenge is a rectangular image and
   a pill would clip its ends. */
.hq-modal--auth .ibs-recapture__canvas {
  height: 56px;
  border-radius: 12px;
  background: var(--hq-input-bg);
  border-color: var(--hq-input-border);
}

.hq-modal--auth .ibs-recapture__field {
  height: 56px;
  border-radius: 999px;
  background: var(--hq-input-bg);
  border-color: var(--hq-input-border);
}

.hq-modal--auth .ibs-recapture__field:hover,
.hq-modal--auth .ibs-recapture__field:focus-within {
  border-color: var(--hq-green);
  box-shadow: var(--hq-focus-ring);
}

/* Last of the three, at equal specificity, so an invalid field stays red while it is hovered
   or focused — the same shape .hq-field.is-invalid uses. */
.hq-modal--auth .ibs-recapture__field--error,
.hq-modal--auth .ibs-recapture__field--error:hover,
.hq-modal--auth .ibs-recapture__field--error:focus-within {
  border-color: #e5484d;
  box-shadow: 0 0 0 3px color-mix(in srgb, #e5484d 16%, transparent);
}

.hq-modal--auth .ibs-recapture__answer {
  color: var(--hq-input-text);
}

.hq-modal--auth .ibs-recapture__answer::placeholder {
  color: var(--hq-input-placeholder);
}

/* Hint and error occupy the SAME slot under a field, so validation must not shift the layout.
   The base .hq-error carries margin-block-start:-8px and padding-inline:24px, both measured for
   .hq-form's 24px gap and for an error sitting under a placeholder-only field. Inside .hq-group
   (gap 8px, label flush) those two make the error jump 8px up and indent 24px away from the hint
   it replaces. Reset both so the two read as one line that changes colour. */
.hq-modal--auth .hq-group .hq-error {
  margin: 0;
  padding-inline: 0;
}

/* The secondary action is disabled for real on two of the three steps — while the step submits,
   and for the whole 60-second resend countdown on the OTP step. hero-quote.css:1095 dims
   .hq-submit for exactly this reason but has no .hq-secondary companion, so without this the
   Resend button looks pressable for a minute. Matches .hq-submit:disabled's treatment. */
.hq-modal--auth .hq-secondary:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.hq-modal--auth .hq-secondary:disabled:hover {
  background: var(--hq-secondary-bg);
}