/* =============================================================
   Ethos Annuities — Shared Component Styles
   All screens import this file. Screen-specific rules (e.g.
   progress fill width) stay in each screen's own <style> block.
   ============================================================= */

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face { font-family: 'Hauss'; src: url('./fonts/Hauss-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Hauss'; src: url('./fonts/Hauss-Medium.ttf') format('truetype'); font-weight: 500; }
@font-face { font-family: 'Hauss'; src: url('./fonts/Hauss-Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'Portada'; src: url('./fonts/Portada-Semibold.ttf') format('truetype'); font-weight: 600; }

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Slide animations ───────────────────────────────────────── */
@keyframes slideInFromRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideOutToLeft {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}
.slide-container { flex: 1; position: relative; overflow: hidden; }
.slide-inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  animation: slideInFromRight 0.32s cubic-bezier(0.4,0,0.2,1) both;
}
.slide-inner.is-leaving {
  animation: slideOutToLeft 0.32s cubic-bezier(0.4,0,0.2,1) both;
  pointer-events: none;
}

/* ── Base ───────────────────────────────────────────────────── */
html, body { min-height: 100%; background: #e0e0e0; }
body {
  display: flex; justify-content: center; align-items: flex-start;
  padding: 32px 0 48px;
  font-family: 'Hauss', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* ── Phone frame ────────────────────────────────────────────── */
.phone {
  width: 375px; min-height: 812px; background: #fff;
  display: flex; flex-direction: column;
  border-radius: 48px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.1);
  position: relative;
}

/* ── Status bar ─────────────────────────────────────────────── */
.status-bar { height: 44px; position: relative; flex-shrink: 0; background: #fff; }
.status-bar__time {
  position: absolute; left: 29.5px; top: calc(50% + 1px); transform: translateY(-50%);
  font-family: -apple-system,'SF Pro Text','Helvetica Neue',sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: -0.165px; color: #000; line-height: 1;
}
.status-bar__island {
  position: absolute; top: 0; left: 102px; width: 171px; height: 38px;
  background: #000; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}
.status-bar__icons {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 6px;
}

/* ── Nav ────────────────────────────────────────────────────── */
.nav { height: 52px; position: relative; flex-shrink: 0; background: #fff; }
.nav__back {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; cursor: pointer; background: none; border: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.nav__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.nav__help {
  position: absolute; right: 16px; top: 10px;
  display: flex; flex-direction: column; align-items: flex-end; text-decoration: none;
}
.nav__help-label {
  font-family: 'Hauss',sans-serif; font-weight: 500; font-size: 11px; line-height: 16px;
  color: #525252; text-transform: uppercase; letter-spacing: 0.01em;
}
.nav__help-number {
  font-family: 'Hauss',sans-serif; font-weight: 500; font-size: 13px; line-height: 18px;
  color: #04463E;
}

/* ── Progress bar ───────────────────────────────────────────── */
.progress { padding: 0 16px; flex-shrink: 0; background: #fff; }
.progress__track { width: 100%; height: 8px; background: #F3F7F7; border-radius: 4px; overflow: hidden; }
.progress__fill { height: 100%; background: #056257; border-radius: 4px; }
/* Width is set per-screen: <div class="progress__fill" style="width:6%"> */

/* ── Content layout ─────────────────────────────────────────── */
.content { flex: 1; display: flex; flex-direction: column; padding: 36px 16px 112px; }
.question-and-input { display: flex; flex-direction: column; gap: 36px; }

/* Heading group: wraps heading + subtext so 8px gap is isolated
   from the parent's 36px gap */
.heading-group { display: flex; flex-direction: column; gap: 8px; }
.heading {
  font-family: 'Portada',Georgia,serif; font-weight: 600;
  font-size: 28px; line-height: 32px; letter-spacing: -0.03px; color: #272727;
}
.subtext {
  font-family: 'Hauss',sans-serif; font-weight: 400;
  font-size: 16px; line-height: 24px; color: #525252;
}

/* ── Input group ────────────────────────────────────────────── */
.input-group { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.input-label {
  font-family: 'Hauss',sans-serif; font-weight: 500;
  font-size: 16px; line-height: 20px; color: #272727;
}
.input-wrapper {
  width: 100%; min-height: 56px; background: #fff;
  border: 2px solid #D4D4D4; border-radius: 8px; padding: 16px 14px;
  box-shadow: 0px 1px 2px 0px rgba(16,24,40,0.05);
  display: flex; align-items: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input-wrapper:focus-within {
  border-color: #056257;
  box-shadow: 0px 1px 2px 0px rgba(16,24,40,0.05), 0 0 0 3px rgba(5,98,87,0.12);
}
.input-wrapper.is-destructive { border-color: #F44B40; box-shadow: none; }
.input-wrapper.is-destructive:focus-within {
  border-color: #F44B40;
  box-shadow: 0px 1px 2px 0px rgba(16,24,40,0.05), 0 0 0 3px rgba(244,75,64,0.12);
}
.input-wrapper input {
  flex: 1; border: none; outline: none;
  font-family: 'Hauss',sans-serif; font-weight: 400; font-size: 16px;
  line-height: 24px; color: #272727; background: transparent;
}
.input-wrapper input::placeholder { color: #7e7e7e; }
.alert-icon { flex-shrink: 0; display: none; margin-left: 8px; }
.input-wrapper.is-destructive .alert-icon { display: block; }

/* ── Hint text ──────────────────────────────────────────────── */
.hint-text {
  font-family: 'Hauss',sans-serif; font-weight: 400;
  font-size: 13px; line-height: 16px; color: #AD3530;
  display: none; margin-top: 4px;
}
.hint-text.visible { display: block; }

/* ── Security row ───────────────────────────────────────────── */
.security-row { display: flex; align-items: center; gap: 4px; padding: 18px 0; }
.security-icon { flex-shrink: 0; display: flex; align-items: center; }
.security-icon svg { display: block; }
.security-text {
  font-family: 'Hauss',sans-serif; font-weight: 400;
  font-size: 13px; line-height: 1; color: #525252;
}

/* ── Top group (question + security row) ────────────────────── */
.top-group { display: flex; flex-direction: column; gap: 12px; }

/* ── Spacer ─────────────────────────────────────────────────── */
.spacer { flex: 1; }

/* ── Legal text ─────────────────────────────────────────────── */
.legal {
  font-family: 'Hauss',sans-serif; font-weight: 400;
  font-size: 13px; line-height: 18px; color: #525252;
}
.legal a { color: #525252; text-decoration: underline; text-underline-offset: 1px; }

/* ── Footer / CTA ───────────────────────────────────────────── */
.footer {
  background: #fff; padding: 16px;
  box-shadow: 0px -2px 4px 0px rgba(16,24,40,0.06), 0px -4px 8px 0px rgba(16,24,40,0.10);
}
.btn-next {
  width: 100%; min-height: 64px; background: #272727;
  border: 1px solid #272727; border-radius: 8px;
  box-shadow: 0px 1px 2px 0px rgba(16,24,40,0.05);
  display: flex; align-items: center; justify-content: center;
  padding: 16px 20px; cursor: pointer;
  font-family: 'Hauss',sans-serif; font-weight: 500;
  font-size: 19px; line-height: 24px; color: #fff;
  transition: background 0.15s;
}
.btn-next:hover { background: #3a3a3a; }
.btn-next:active { background: #444; }

/* ── Bottom wrapper — v1 (keyboard + CTA slide together) ─────── */
.bottom-wrapper {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; flex-direction: column;
  z-index: 100;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}

/* ── Bottom wrapper — v2 (CTA only, keyboard is separate) ────── */
.bottom-wrapper--v2 {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 200;
  transition: none;
}

/* ── Keyboard wrapper — v2 (slides independently) ───────────── */
.keyboard-wrapper {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 250;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.keyboard-wrapper.is-open { transform: translateY(0); }

/* ── Numeric keyboard (v1 row style) ────────────────────────── */
.keyboard {
  background: #CDD0D5; padding: 8px 3px 4px;
  display: flex; flex-direction: column; gap: 8px;
  user-select: none;
}
.kb-row { display: flex; gap: 6px; justify-content: center; }
.kb-key {
  height: 42px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
  font-family: -apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size: 16px; font-weight: 400; color: #000;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.40), inset 0 0 0 0.5px rgba(0,0,0,0.12);
  flex-shrink: 0; -webkit-tap-highlight-color: transparent;
  transition: background 0.06s;
}
.kb-key:active { background: #E5E5EA; }
.kb-key--digit { width: 107px; font-size: 20px; font-weight: 300; }
.kb-key--special {
  background: #ADB5BD;
  box-shadow: 0 1px 0 rgba(0,0,0,0.40), inset 0 0 0 0.5px rgba(0,0,0,0.15);
}
.kb-key--special:active { background: #9ca3af; }
.kb-key--delete { width: 107px; }
.kb-del-icon { width: 20px; height: 16px; }
.kb-home-bar { height: 30px; display: flex; align-items: center; justify-content: center; background: #CDD0D5; }
.kb-home-bar__pill { width: 134px; height: 5px; background: #3a3a3c; border-radius: 3px; opacity: 0.7; }

/* ── iOS Phone Pad keyboard (v2 grid style) ─────────────────── */
.keyboard--ios {
  background: #CDD0D5; padding: 12px 4px 4px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px;
  user-select: none;
}
.keyboard--ios .kb-key {
  height: 54px; border-radius: 10px; flex-direction: column;
  font-size: unset; font-weight: unset;
  box-shadow: 0 1px 0 rgba(0,0,0,0.35), inset 0 0 0 0.5px rgba(0,0,0,0.10);
  width: auto;
}
.keyboard--ios .kb-key--special {
  background: #ADB5BD;
  box-shadow: 0 1px 0 rgba(0,0,0,0.35), inset 0 0 0 0.5px rgba(0,0,0,0.12);
}
.kb-digit-main {
  font-size: 28px; font-weight: 300; color: #000; line-height: 1;
  font-family: -apple-system,'Helvetica Neue',Arial,sans-serif;
}
.kb-digit-sub {
  font-size: 9px; font-weight: 500; color: #000; letter-spacing: 0.08em;
  line-height: 1; margin-top: 1px; text-transform: uppercase;
  font-family: -apple-system,'Helvetica Neue',Arial,sans-serif;
}
.keyboard--ios .kb-home-bar {
  grid-column: 1 / -1; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: #CDD0D5; margin: 4px -4px -4px;
}

/* ── QWERTY keyboard ────────────────────────────────────────── */
.keyboard--qwerty {
  background: #CDD0D5; padding: 8px 3px 4px;
  display: flex; flex-direction: column; gap: 8px;
  user-select: none;
}
.keyboard--qwerty .kb-key {
  height: 42px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
  font-family: -apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size: 16px; font-weight: 400; color: #000; background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.40), inset 0 0 0 0.5px rgba(0,0,0,0.12);
  flex-shrink: 0; -webkit-tap-highlight-color: transparent;
  transition: background 0.06s;
}
.keyboard--qwerty .kb-key:active { background: #E5E5EA; }
.keyboard--qwerty .kb-key--letter { flex: 1; }
.keyboard--qwerty .kb-key--special {
  background: #ADB5BD;
  box-shadow: 0 1px 0 rgba(0,0,0,0.40), inset 0 0 0 0.5px rgba(0,0,0,0.15);
  font-size: 14px;
}
.keyboard--qwerty .kb-key--special:active { background: #9ca3af; }
.keyboard--qwerty .kb-key--shift,
.keyboard--qwerty .kb-key--delete { width: 46px; }
.keyboard--qwerty .kb-row--2 { padding: 0 20px; }
.keyboard--qwerty .kb-key--alt,
.keyboard--qwerty .kb-key--return { width: 88px; font-size: 15px; }
.keyboard--qwerty .kb-key--space { flex: 1; font-size: 15px; }
.kb-shift-icon { width: 18px; height: 18px; }

/* ── EDS Dropdown ───────────────────────────────────────────── */
.select-wrapper { position: relative; width: 100%; }

.dropdown-trigger {
  width: 100%; min-height: 56px; background: #fff;
  border: 2px solid #D4D4D4; border-radius: 8px;
  padding: 16px 44px 16px 14px;
  box-shadow: 0px 1px 2px 0px rgba(16,24,40,0.05);
  display: flex; align-items: center; cursor: pointer; position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
  user-select: none;
}
.dropdown-trigger.is-open {
  border-color: #056257;
  box-shadow: 0px 1px 2px 0px rgba(16,24,40,0.05), 0 0 0 3px rgba(5,98,87,0.12);
}
.dropdown-trigger.is-destructive { border-color: #F44B40; box-shadow: none; }
.dropdown-value {
  font-family: 'Hauss',sans-serif; font-weight: 400;
  font-size: 16px; line-height: 24px; color: #7e7e7e; flex: 1;
}
.dropdown-value.selected { color: #272727; }
.dropdown-chevron {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; transition: transform 0.2s ease;
}
.dropdown-trigger.is-open .dropdown-chevron { transform: translateY(-50%) rotate(180deg); }
.dropdown-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 500;
  background: #fff; border: 1px solid #D4D4D4; border-radius: 8px;
  box-shadow: 0px 4px 6px -2px rgba(16,24,40,0.03), 0px 12px 16px -4px rgba(16,24,40,0.08);
  max-height: 288px; overflow-y: auto; display: none;
}
.dropdown-panel.is-open { display: block; }
.dropdown-divider { height: 1px; background: #F4F4F4; }
.dropdown-item { padding: 2px 6px; cursor: pointer; }
.dropdown-item-inner {
  padding: 10px 10px 10px 8px; border-radius: 6px;
  font-family: 'Hauss',sans-serif; font-weight: 400;
  font-size: 16px; line-height: 24px; color: #272727;
}
.dropdown-item.is-selected .dropdown-item-inner,
.dropdown-item:hover .dropdown-item-inner { background: #F3F7F7; }

/* ── OTP screen ─────────────────────────────────────────────── */
.otp-header { display: flex; flex-direction: column; gap: 16px; }
.otp-icon-wrap { display: flex; }
.otp-row { display: flex; gap: 8px; justify-content: space-between; }
.otp-box {
  flex: 1; height: 56px; max-width: 46px;
  border: 2px solid #D4D4D4; border-radius: 8px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Hauss',sans-serif; font-weight: 500;
  font-size: 24px; color: #272727;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.otp-box.is-active {
  border-color: #056257;
  box-shadow: 0px 1px 2px 0px rgba(16,24,40,0.05), 0 0 0 3px rgba(5,98,87,0.12);
}
.otp-box.is-filled { border-color: #056257; }
.otp-hint {
  font-family: 'Hauss',sans-serif; font-weight: 400;
  font-size: 13px; line-height: 18px; color: #525252; margin-top: 16px;
}
.otp-hint a { color: #056257; text-decoration: none; font-weight: 500; }
.btn-next:disabled { background: #D4D4D4; border-color: #D4D4D4; cursor: default; }
.btn-next:disabled:hover { background: #D4D4D4; }

/* ── Mobile overrides ───────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  body { align-items: flex-start; padding: 0; background: #fff; }
  .phone { width: 100%; min-height: 100dvh; border-radius: 0; box-shadow: none; }
  .bottom-wrapper { position: fixed; bottom: 0; transform: none !important; }
  .bottom-wrapper--v2 { position: fixed; bottom: 0; }
  .keyboard,
  .keyboard--ios,
  .keyboard--qwerty,
  .keyboard-wrapper { display: none !important; }
  .content { padding-bottom: 100px; }
}