/* ==========================================================================
   components.css — inputs, buttons, Yes/No rows, agent grid, star ratings
   Input / button / Yes-No patterns ported from v11. Agent grid and star
   rating are new: v11 had neither.
   ========================================================================== */

/* ── Text inputs ───────────────────────────────────────────────────────── */
.field-wrap { position: relative; margin-bottom: var(--s-3); }

.input-field {
  width: 100%;
  height: var(--h-control);
  padding: 13px 16px;
  border: 2px solid var(--c-accent);
  border-radius: var(--r-md);
  font-family: "Hespress", Arial, sans-serif;
  font-size: 18px;
  color: var(--c-body);
  text-align: right;
  background: var(--c-white);
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
  direction: rtl;
}
.input-field::placeholder { color: var(--c-faint); }
.input-field:focus {
    border-color: #5b5bf5;
    background: var(--c-white);
    box-shadow: 0 0 0 3px #dfdfff;
}
.input-field.has-error {
  border-color: var(--c-primary) !important;
  background: #fff8f8 !important;
  box-shadow: 0 0 0 3px rgba(212, 43, 43, .1) !important;
}

/* Phone field: a plain text box, optional, and international — the student
   may type +86 138 1234 5678, +33 6 12 34 56 78 or a bare national number.
   Normalisation happens in JS and again on the server, and neither guesses a
   country. The number always reads left-to-right. */
.phone-input {
  direction: ltr;
  text-align: right;
}
.phone-input::placeholder { direction: ltr; text-align: right; }

/* Label above a field that needs naming in its own right — the phone, which
   shares the name step and would otherwise have only a placeholder to say
   what it is and that it is optional. Matches .help-label. */
.field-label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
  text-align: right;
  direction: rtl;
}

.error-msg {
  display: none;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-primary);
  text-align: right;
  animation: fadeInDown .2s ease;
  direction: rtl;
}
.error-msg svg { width: 14px; height: 14px; flex-shrink: 0; }
.field-wrap.has-error .error-msg,
.error-msg.show { display: flex; }

/* ── Free-text follow-up under the questions ─────────────────────────────
   Same tokens as .input-field, but a growable box rather than a fixed-height
   control, and it must not answer to the .input-field auto-focus rule. */
.help-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: 15px;
  direction: rtl;
}
.help-block[hidden] { display: none; }

.help-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
  text-align: right;
}

.help-input {
  width: 100%;
  min-height: 84px;
  padding: 13px 16px;
  border: 2px solid var(--c-accent);
  border-radius: var(--r-md);
  font-family: "Hespress", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-body);
  text-align: right;
  background: var(--c-white);
  outline: none;
  resize: vertical;
  direction: rtl;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.help-input::placeholder { color: var(--c-faint); }
.help-input:focus {
  border-color: #5b5bf5;
  box-shadow: 0 0 0 3px #dfdfff;
}

/* ── Native capture input ────────────────────────────────────────────────
   The file input that opens the phone camera. It has to stay focusable and
   clickable (the wrapping label forwards the tap), but must never render
   anything of its own: several mobile engines draw a preview thumbnail of
   the captured photo inside the control, and a 0x0 box with opacity:0 does
   not reliably clip that shadow content. The clip-path/inset pair is the
   standard visually-hidden pattern and leaves nothing to paint. */
.capture-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  /* The label handles the tap; the control itself must not intercept one at
     whatever position it happens to occupy. */
  pointer-events: none;
}

/* ── Yes / No question rows (ported from v11 .yn-*) ────────────────────── */
.qa-list { display: flex; flex-direction: column; gap: 15px; direction: rtl;}

.qa-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 11px 14px;
    border: 1px solid #ededed;
    border-radius: 14px;
    background: #F5F6F5;
    transition: border-color .2s, background .2s, box-shadow .22s;
    min-height: 50px;
}

.qa-row.answered {
    border: 1px solid transparent;
    background: linear-gradient(to right, rgb(252 234 234), rgb(243 244 254)) padding-box, linear-gradient(to right, #F6252F, #5c5fff) border-box;
}


.qa-row.has-error { border-color: var(--c-primary); background: #fff8f8; }

.qa-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #666666;
    text-align: right;
    line-height: 1.5;
}

.qa-row.answered .qa-label { color: var(--c-accent); }

.qa-controls { display: flex; gap:10px; direction: ltr; flex-shrink: 0; }

.yn-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.yn-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--c-line);
  background: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all .2s;
}
.yn-btn:hover .yn-dot { border-color: var(--c-faint); }
.yn-btn svg { width: 14px; height: 14px; }

.yn-btn[data-answer="yes"].selected .yn-dot {
  background: var(--c-success);
  border-color: var(--c-success);
  color: var(--c-white);
}
.yn-btn[data-answer="no"].selected .yn-dot {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: var(--c-white);
}

/* ── Agent picker (new — no v11 equivalent) ────────────────────────────── */
.agent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.agent-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.agent-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: visible;
}
.agent-photo {
  width: 100%;
  height: 100%;
  /* The intrinsic 678x678 is square, but object-fit guarantees the circle
     crops rather than distorts if a future photo is not. */
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  /* Holds the circle while the image decodes, so the grid does not flash. */
  background: #d4d4d4;
  border: 3px solid transparent;
  transition: border-color .2s, transform .18s;
  display: block;
}
.agent-card:hover .agent-photo { transform: translateY(-2px); }
.agent-card.selected .agent-photo { border-color: var(--c-accent); }

.agent-check {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-white);
  display: none;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--c-white);
}
.agent-card.selected .agent-check { display: flex; }
.agent-check svg { width: 14px; height: 14px; }

.agent-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  transition: color .2s;
}
.agent-card.selected .agent-name { color: var(--c-accent); }

/* ── Star ratings (new — no v11 equivalent) ────────────────────────────── */
.rating-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  direction: rtl;
}
.rating-header-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
  text-align: center;
  line-height: 1.4;
  padding: 0px 8px;
}
.rating-laurel { width: 20px; height: auto; flex-shrink: 0; }
.rating-laurel.flip { transform: scaleX(-1); }

.rating-list { display: flex; flex-direction: column; gap: var(--s-5); }

.rating-card {
    border: 1px solid #ededed;
    border-radius: var(--r-lg);
    padding: var(--s-5);
    text-align: center;
    transition: border-color .2s, box-shadow .22s;
}

.rating-card.has-error { border-color: var(--c-primary); background: #fff8f8; }

.rating-card.rated {
    border-color: #efe1ba;
}

.rating-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: var(--s-4);
}

.stars {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  direction: ltr;
}
.star-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #DAD9D5;
  transition: color .15s, transform .15s;
  line-height: 0;
}
/* The icon is 30x29, so height follows the viewBox rather than being forced
   square — otherwise it stretches. */
.star-btn svg { width: 30px; height: auto; display: block; }
.star-btn:hover { transform: scale(1.12); }
.star-btn.filled { color: #ffc107; }

/* ── Review method chooser ─────────────────────────────────────────────── */
.mascot {
  width: 100%;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #eef0ff, #e8ebff);
  margin-bottom: var(--s-4);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 200px;
}
.mascot img { max-width: 70%; height: auto; display: block; }

.method-list { display: flex; flex-direction: column; gap: var(--s-3); }

.option-icon {
    width: 50px;
    order: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.option-icon .rating-laurel {
    width: 48px;
}

.method-card {
    /* Positioning context for the capture <input type="file">, which is
       absolutely positioned. Without it the input escapes to `.app` — the
       nearest positioned ancestor — and floats over the interface instead of
       staying inside the card it belongs to. */
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid #EDEDED;
    border-radius: 14px;
    background: var(--c-white);
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
    width: 100%;
    text-align: left;
    direction: ltr;
}


.method-card:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
.method-card.selected {
    border: 1px solid transparent;
    background: linear-gradient(to right, rgb(243 244 254), rgb(252 234 234)) padding-box, linear-gradient(to right, #5c5fff, #f6252f) border-box;
}

.method-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  order: 3;
}
.method-icon svg { width: 26px; height: 26px; }

.method-text {
    flex: 1;
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
}

.method-title { font-size: 16px; font-weight: 700; color: var(--c-ink); }
.method-note { font-size: 13px; color: var(--c-muted); margin-top: 2px; }

.method-radio {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--c-line);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  order: 1;
  transition: all .2s;
}
.method-card.selected .method-radio {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-white);
}
.method-radio svg { width: 14px; height: 14px; }

/* ── Summary ───────────────────────────────────────────────────────────── */
.summary-list {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  direction: rtl;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 13px var(--s-4);
  border-bottom: 1px solid var(--c-line);
  font-size: 14px;
}
.summary-row:last-child { border-bottom: none; }
.summary-key { color: var(--c-muted); flex-shrink: 0; }
.summary-val { color: var(--c-ink); font-weight: 600; text-align: right; }

/* ── Navigation ────────────────────────────────────────────────────────── */
/* The footer is the last flex item in `.app`, never an overlay: `.app` is
   exactly as tall as the visible viewport and `.app-body` scrolls inside it.
   Being siblings that share the height is what makes it structurally
   impossible for content to scroll underneath the footer — no compensating
   padding on the body is needed or wanted.

   `.app` supplies the safe-area inset for the whole shell; the footer adds a
   little breathing room of its own. */
.app-footer {
  flex-shrink: 0;
  padding-top: var(--s-4);
}

/* Room under the last element so it never sits flush against the footer, and
   scroll-padding so scrollIntoView() cannot park a focused field half under
   it. */
.app-body {
  padding-bottom: var(--s-3);
  scroll-padding-bottom: var(--s-5);
}

.nav-row { display: flex; gap: 15px; direction: rtl; }

.btn {
  flex: 1;
  padding: 14px 10px;
  border-radius: var(--r-pill);
  border: none;
  font-family: "Hespress", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  transition: all .18s;
  min-height: var(--h-control);
}
.btn svg { width: 24px; height: 24px; flex-shrink: 0;rotate: 180deg; }

.btn-next { background: var(--c-primary); color: var(--c-white); }
.btn-next:hover { background: var(--c-primary-hover); transform: translateY(-1px); }
.btn-next:active { transform: translateY(0); }
.btn-next:disabled { opacity: .45; cursor: default; transform: none; }

.btn-back {
  background: var(--c-surface-2);
  color: var(--c-muted);
  max-width: 34%;
}
.btn-back:hover { background: var(--c-primary-soft); color: var(--c-primary-hover); }
.btn-back:disabled { opacity: .35; cursor: default; }
.btn-back:disabled:hover { background: var(--c-surface-2); color: var(--c-muted); }

.btn.is-clicked { animation: btnTap .22s ease; }
@keyframes btnTap {
  0%   { transform: scale(1); }
  50%  { transform: scale(.97); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   Motion — selection feedback
   Every interactive element confirms the tap it just received. Selection
   uses the springy curve so it feels like a physical toggle; colour and
   size changes use the soft curve so they stay in the background.
   ========================================================================== */

/* ── Text inputs ───────────────────────────────────────────────────────── */
.input-field {
  transition:
    border-color var(--d-base) var(--e-soft),
    background var(--d-base) var(--e-soft),
    box-shadow var(--d-base) var(--e-soft);
}
.input-field.has-error { animation: shake .4s var(--e-soft); }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

/* ── Yes / No ──────────────────────────────────────────────────────────── */
.qa-row {
  transition:
    border-color var(--d-base) var(--e-soft),
    background var(--d-base) var(--e-soft),
    box-shadow var(--d-base) var(--e-soft),
    transform var(--d-fast) var(--e-out);
}



.yn-dot {
  transition:
    background var(--d-fast) var(--e-soft),
    border-color var(--d-fast) var(--e-soft),
    color var(--d-fast) var(--e-soft),
    transform var(--d-base) var(--e-spring);
}
.yn-btn:active .yn-dot { transform: scale(.88); }
.yn-btn.selected .yn-dot { animation: dotPop .34s var(--e-spring); }

@keyframes dotPop {
  0%   { transform: scale(.75); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* The tick / cross itself fades up rather than snapping in. */
.yn-dot svg { transition: opacity var(--d-fast) var(--e-soft), transform var(--d-base) var(--e-spring); }
.yn-btn:not(.selected) .yn-dot svg { opacity: 0; transform: scale(.5); }
.yn-btn.selected .yn-dot svg { opacity: 1; transform: scale(1); }

/* ── Agent picker ──────────────────────────────────────────────────────── */
.agent-card { transition: transform var(--d-fast) var(--e-out); }
.agent-card:active { transform: scale(.96); }
.agent-photo {
  transition:
    border-color var(--d-base) var(--e-soft),
    transform var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-soft);
}
.agent-card.selected .agent-photo { box-shadow: 0 6px 18px rgba(92, 95, 255, .22); }

.agent-check {
  transform: scale(0);
  display: flex;                       /* animate instead of display toggling */
  transition: transform var(--d-base) var(--e-spring);
}
.agent-card.selected .agent-check { transform: scale(1); }

/* ── Stars ─────────────────────────────────────────────────────────────── */
.star-btn { transition: color var(--d-fast) var(--e-soft), transform var(--d-base) var(--e-spring); }
.star-btn:active { transform: scale(.85); }
.star-btn.pop { animation: starPop .42s var(--e-spring); }

@keyframes starPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35) rotate(-6deg); }
  70%  { transform: scale(.95) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

.rating-card { transition: border-color var(--d-base) var(--e-soft), box-shadow var(--d-base) var(--e-soft); }

/* ── Method chooser ────────────────────────────────────────────────────── */
.method-card {
  transition:
    border-color var(--d-base) var(--e-soft),
    background var(--d-base) var(--e-soft),
    box-shadow var(--d-base) var(--e-soft),
    transform var(--d-fast) var(--e-out);
}
.method-card:active { transform: scale(.985); }

.method-radio { transition: background var(--d-fast) var(--e-soft), border-color var(--d-fast) var(--e-soft), transform var(--d-base) var(--e-spring); }
.method-card.selected .method-radio { animation: dotPop .34s var(--e-spring); }
.method-radio svg { transition: opacity var(--d-fast) var(--e-soft), transform var(--d-base) var(--e-spring); }
.method-card:not(.selected) .method-radio svg { opacity: 0; transform: scale(.5); }

.method-icon { transition: transform var(--d-base) var(--e-spring); }
.method-card.selected .method-icon { transform: scale(1.08); }

/* ── Navigation ────────────────────────────────────────────────────────── */
.btn { transition: background var(--d-base) var(--e-soft), color var(--d-base) var(--e-soft), transform var(--d-fast) var(--e-out), opacity var(--d-base) var(--e-soft); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn svg { transition: transform var(--d-base) var(--e-out); }
.btn-next:hover:not(:disabled) svg { transform: translateX(-4px); }   /* the forward arrow points left, so nudge it left */
.btn-back:hover:not(:disabled) svg { transform: translateX(4px); }

/* ── Summary ───────────────────────────────────────────────────────────── */
.summary-row { transition: background var(--d-fast) var(--e-soft); }
.summary-row:hover { background: var(--c-surface-2); }

/*
img#photo-shot {
    transform: scaleX(-1);
}
    */