/*
 * apply-theme.css — đưa trang form (/apply), trang pháp lý và unsubscribe về
 * cùng tông trắng + xanh da trời với trang chủ.
 *
 * Nạp SAU landing.css. Không viết lại form, captcha, màn chờ — chỉ đè biến
 * màu/font mà landing.css đang dùng, và đổi phần bìa đầu trang từ tối sang
 * sáng. Phần logic giao diện của form giữ nguyên, không rủi ro hỏng luồng lead.
 */

:root {
  --brand:       #0284c7;
  --navy:        #0c4a6e;
  --navy-deep:   #0c4a6e;
  --text:        #1e293b;
  --muted:       #5b6b80;
  --muted-soft:  #94a3b8;
  --border:      #dbe7f1;
  --surface:     #f0f9ff;
  --surface-alt: #e0f2fe;

  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

body { background: #fff; color: var(--text); font-family: var(--font-body); }

/* --- Bìa đầu trang form: sáng, ảnh mờ dần sang phải ----------------------- */

.cover { background: var(--surface); }

/* Lớp phủ chỉ đậm bên phía chữ, sang phải nhạt dần để ảnh còn thấy rõ —
   phủ trắng đều cả khung là trang bị "trắng xoá". */
.cover__scrim {
  background: linear-gradient(100deg,
    rgb(255 255 255 / 96%) 0%,
    rgb(255 255 255 / 84%) 34%,
    rgb(240 249 255 / 30%) 62%,
    rgb(240 249 255 / 0%) 82%);
}

.cover .on-dark,
.cover__inner { color: var(--muted); }

.cover__back { color: var(--muted); }
.cover__back:hover { color: var(--brand); }

.cover__eyebrow { color: var(--v); }

.cover__title { color: var(--text); }
.cover__title em { color: var(--v); }

.cover .on-dark :where(a, button, input):focus-visible { outline-color: var(--v); }

/* --- Nút chính: bỏ hết cam / đỏ, về màu xanh của loại bảo hiểm ------------- */

.btn--brand { background: var(--v); }
.btn--brand:hover { background: color-mix(in srgb, var(--v) 82%, #000); }

/* --- Thân trang: nền xanh nhạt để form trắng nổi lên ---------------------- */

.split { background: var(--surface); }

/* Lợi ích: thẻ trắng có dấu tích thay cho dòng kẻ mảnh */
.reason-list {
  border-top: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.reason-list li {
  position: relative;
  padding: 14px 16px 14px 44px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  font-weight: 600; line-height: 1.45;
}
.reason-list li::before {
  content: '';
  position: absolute; left: 14px; top: 14px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--v-light) no-repeat center / 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
  .reason-list { grid-template-columns: 1fr; }
}

/* --- Đầu form: dải màu của loại bảo hiểm, chữ trắng (giống trang chủ) ----- */

.quote-form__head {
  border-top: 0;
  background: linear-gradient(135deg, var(--v), color-mix(in srgb, var(--v) 70%, #38bdf8));
}
.quote-form__title { color: #fff; }
.quote-form__step { color: rgb(255 255 255 / 80%); }
.quote-form__progress { background: var(--surface-alt); height: 4px; }

/* Dải service khác: nền trắng xen kẽ với thân trang xanh nhạt */
.apply-more { background: #fff; }