/* ============================================================================
   RAC Day Insure — shared components (Phase 2)
   Built from the rac-component-measure workflow specs (multi-method PIL vs the
   reference screenshots). Values come from tokens.css. Items noted LOCK are
   pixel-locked visually in Phase 3.
   ========================================================================== */
@import url("base.css");

/* ---- Orange header bar + rac wordmark ----------------------------------- */
.site-header {
  background: var(--rac-orange);
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 var(--page-pad-x);
}
.site-header .rac-logo {
  width: 94px;             /* ref logo = 93.7x31.3 CSS, aspect 2.97 (verified) */
  height: auto;
  color: var(--rac-orange-ink);
}

/* ---- Page title ("Policy info" / "Retrieve your information") ----------- */
.page-title {
  margin: 52px 0 23px;
  text-align: center;
  font-size: var(--fs-title);
  font-weight: var(--fw-regular);
  line-height: 1.1;
  color: var(--ink-title);
}

/* ---- Card stack --------------------------------------------------------- */
.cards {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding: 0 var(--page-pad-x);
}
.card {
  background: var(--card-grey);
  border-radius: var(--r-card);
  padding: var(--card-pad-y) var(--card-pad-x);
}
.card__h {
  margin: 0 0 24px;
  font-size: var(--fs-card-h);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--ink-title);
}

/* ---- Field row: grey icon+label, then dark value ------------------------ */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;   /* 16px row + 16px = 32px line rhythm (ref value-to-value 64) */
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--label);
}
.field__value {
  font-size: var(--fs-value);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--ink-value);
}

/* line icons (Lucide-style outline) */
.ico {
  flex: none;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Policy card: countdown + progress bar ------------------------------ */
.countdown__bar {
  height: 8px;
  margin: 22px 0 16px;
  background: var(--pill-grey);
  border-radius: var(--r-bar);
  overflow: hidden;
}
.countdown__fill {
  height: 100%;
  width: 0%;                 /* pending = 0; live = %elapsed; expired = 100 */
  background: var(--rac-orange);
  border-radius: inherit;
}
.countdown__status {
  font-size: var(--fs-value);
  font-weight: var(--fw-regular);
  color: var(--muted);
}

/* ---- Vehicle card: reg-plate pill + value ------------------------------- */
.reg-pill {
  display: inline-block;
  background: var(--pill-grey);
  border-radius: var(--r-pill);
  padding: 4px 9px;
  font-size: var(--fs-reg);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0.3px;
  color: var(--ink-value);
  text-transform: uppercase;
}
.vehicle__value {
  margin-top: 15px;
  font-size: var(--fs-value);
  font-weight: var(--fw-regular);
  color: var(--ink-value);
}

/* ---- Documents card ----------------------------------------------------- */
.docs__help {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--muted);
}
.docs__h {
  margin: 36px 0 18px;
  font-size: var(--fs-docs-h);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--ink-title);
}
.docs__list { display: flex; flex-direction: column; gap: 16px; }
.doc-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--rac-orange);
  font-size: var(--fs-doc-link);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.doc-link .ico { width: 17px; height: 17px; margin-top: 2px; }
.docs__post {           /* "Send documents in the post" — dark, no underline */
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: var(--fs-value);
  color: var(--ink-title);
}

/* ---- Dark "Total price" card -------------------------------------------- */
.card--dark {
  background: var(--card-dark);
  border-radius: var(--r-btn);
  padding: 16px;
  text-align: center;
  color: var(--white);
}
.price__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--price-label);
}
.price__label .ico { width: 18px; height: 18px; stroke: var(--price-label); }
.price__amount {
  margin-top: 8px;
  font-size: var(--fs-price);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  color: var(--white);
}
.price__excess {
  margin-top: 8px;
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--card-grey);
}

/* ---- Claims card (lighter grey) ----------------------------------------- */
.card--claims { background: var(--claims-grey); }
.claims__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--claims-ink);
}
.claims__phone {
  color: var(--rac-orange);
  font-weight: var(--fw-bold);
  text-decoration: underline;
}

/* ---- Footer (dark) ------------------------------------------------------ */
.site-footer {
  background: var(--footer-dark);
  padding: 38px 28px;
  text-align: center;
}
.site-footer a.footer-link {
  display: block;
  color: var(--white);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 40px;
  text-decoration: none;
}
.site-footer .footer-link .ico {
  width: 12px; height: 12px; margin-left: 6px;
  vertical-align: -1px; stroke: currentColor;
}
.footer-legal {
  margin-top: 24px;
  font-size: var(--fs-legal);
  line-height: 16px;
  color: var(--legal);
}

/* ---- Login: card, fields, inputs ---------------------------------------- */
.login-card {
  margin: 0 var(--page-pad-x);
  background: var(--card-grey);
  border-radius: var(--r-card);
  padding: var(--login-pad);
}
.login-card .intro {
  margin: 0 0 28px;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  color: var(--slate-soft);
}
.form-error {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: #FDE7E7;
  border-radius: var(--r-input);
  font-size: var(--fs-value);
  color: #B3261E;
}
.login-field { margin-bottom: 22px; }
.login-field:last-of-type { margin-bottom: 0; }
.login-field .label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--slate);
}
.login-field .label .ico { width: 18px; height: 18px; stroke: var(--slate); stroke-width: 2; }
.inp {
  width: 100%;
  height: var(--input-h);
  box-sizing: border-box;
  padding: 0 13px;
  background: var(--white);
  border: none;
  border-radius: var(--r-input);
  font-size: var(--fs-body);
  color: var(--slate);
}
.inp::placeholder { color: var(--placeholder); opacity: 1; }
.dob-row { display: flex; gap: 2px; }
.dob-row .inp { flex: 1 1 0; text-align: center; }

/* ---- Primary button ----------------------------------------------------- */
.btn-primary {
  display: block;
  width: 100%;
  height: var(--input-h);
  margin-top: 28px;
  padding: 0 16px;
  background: var(--rac-orange);
  color: var(--rac-orange-ink);
  border: none;
  border-radius: var(--r-btn);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--input-h);
  text-align: center;
}

/* ---- Loading screen ----------------------------------------------------- */
.loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--white);
  text-align: center;
  padding: 0 24px;
}
.loading__h {
  margin: 0;
  font-size: var(--fs-loading-h);
  line-height: 1.12;
  font-weight: var(--fw-light);
  color: #787B83;
  max-width: 240px;   /* wraps "Loading your" / "details" like the reference */
}
.loading__cup { width: 97px; height: auto; margin: 78px 0 80px; }
.loading__sub {
  margin: 0;
  font-size: var(--fs-loading-sub);
  line-height: 1.28;
  font-weight: var(--fw-regular);
  color: #90939A;
  max-width: 300px;   /* 2-line wrap like the reference */
}
.loading__spinner {
  width: 45px; height: 45px;
  margin-top: 37px;
  border: 2px solid var(--spinner);
  border-top-color: transparent;
  border-radius: 50%;
  animation: loading-spin .9s linear infinite;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }