/* ============================================================
   Ruleta del Reciclaje — global styles
   Mobile-first; phone frame is centered on desktop.
   ============================================================ */

:root {
  --cream:        #F5EEDC;
  --cream-soft:   #FBF6E9;
  --text:         #2A2A2A;
  --text-muted:   #6E6E6E;

  --green:        #7DBA8C;
  --green-dark:   #5DA371;
  --green-darker: #3F8A5B;

  --yellow:       #E5B92A;
  --yellow-soft:  #F3D156;
  --yellow-text:  #8A6B0E;

  --blue:         #5BA0BF;
  --blue-soft:    #82BCD3;
  --blue-text:    #285A75;

  --gray-wedge:   #8C8C8C;
  --gray-soft:    #B0B0B0;
  --gray-text:    #4A4A4A;

  --correct-bg:   #6FB58A;
  --correct-bg-d: #549B70;
  --incorrect-bg: #D27279;
  --incorrect-bd: #B85A60;

  --shadow-soft:  0 4px 14px rgba(0, 0, 0, .08);
  --shadow-card:  0 1px 2px rgba(0, 0, 0, .06);
  --radius-card:  14px;
  --radius-btn:   12px;

  /* Spin animation — overridden from JS via CONFIG.spin */
  --spin-duration: 1800ms;
  --spin-easing:   cubic-bezier(0.17, 0.67, 0.28, 1);
}

* { box-sizing: border-box; }

.multiline { white-space: pre-line; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: #E9E5D9;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

/* ---------- App shell (phone frame + desktop panel) ----------- */
.app-shell {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 48px;
  width: 100%;
}

/* ---------- Phone frame -------------------------------------- */
.phone-frame {
  position: relative;
  width: 100%;
  max-width: 440px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--cream);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

@media (min-width: 480px) {
  body { padding: 24px 0; }
  .phone-frame {
    min-height: 0;
    border-radius: 28px;
    margin: 0 auto;
    min-height: calc(100dvh - 48px);
  }
}

/* ---------- Screen routing ----------------------------------- */
.screen {
  display: none;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  position: absolute;
  inset: 0;
  padding: 0;
}

body[data-screen="splash"]          .screen--splash,
body[data-screen="pie"]             .screen--pie,
body[data-screen="wedge-title"]     .screen--wedge-title,
body[data-screen="question"]        .screen--question,
body[data-screen="feedback"]        .screen--feedback,
body[data-screen="wedge-finished"]  .screen--wedge-finished,
body[data-screen="end"]             .screen--end {
  display: flex;
}

.screen__cta {
  margin-top: auto;
  padding: 18px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Buttons ------------------------------------------ */
.btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .08s ease, background-color .15s ease, opacity .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: var(--green);
}

.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid rgba(0,0,0,.18); outline-offset: 2px; }

.btn--green       { background: var(--green); }
.btn--green:hover { background: var(--green-dark); }

.btn--wedge       { background: var(--wedge, var(--green)); color: #fff; }

.btn--outline {
  background: #fff;
  color: var(--green-darker);
  border: 1.5px solid var(--green);
}
.btn--outline:hover { background: #F2FAF4; }

.btn--icon .btn__icon {
  width: 18px;
  height: 18px;
  filter: invert(1);
}
.btn--outline.btn--icon .btn__icon { filter: none; }

/* ---------- Top bars ----------------------------------------- */
.topbar {
  padding: 18px 24px 22px;
  text-align: center;
  color: #fff;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}
.topbar--green  { background: var(--green); }
.topbar--wedge  { background: var(--wedge, var(--green)); }

.topbar__title {
  margin: 0;
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .2px;
}
.topbar__sub {
  margin: 4px 0 0;
  font-size: 12px;
  letter-spacing: 4px;
  font-weight: 500;
  opacity: .85;
}

/* ---------- Splash ------------------------------------------- */
.screen--splash { background: var(--cream); }
.splash-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 24px;
  min-height: 100%;
  width: 100%;
}

.brand-title { text-align: center; margin: 0 0 6px; }
.brand-title__main {
  display: block;
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.05;
  color: var(--green-dark);
}
.brand-title__sub {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 6px;
  color: var(--text);
  font-weight: 600;
}

.splash-scene {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 16px 0 4px;
}
.splash-scene__img {
  display: block;
  width: 100%;
  height: auto;
}
.splash-pie {
  position: absolute;
  left: 50%;
  bottom: -10%;
  transform: translateX(-50%);
  width: 45%;
  aspect-ratio: 1;
}

.splash-cta {
  text-align: center;
  width: 100%;
  margin-top: 38px;
}
.kicker {
  font-family: 'Lora', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
}
.kicker__sub {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--text-muted);
}
.splash-cta .btn { max-width: 280px; margin: 0 auto; }

.splash-footer {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  gap: 16px;
}
.splash-footer img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

/* ---------- Pie composition ---------------------------------- */
.pie-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0 0;
}
.pie-stage .pie-pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}
.pie-pointer img {
  width: 22px;
  height: 22px;
  display: block;
}
.pie-wheel {
  position: relative;
  width: min(74vw, 320px);
  aspect-ratio: 1;
}
.pie-wheel.is-spinning {
  transition: transform var(--spin-duration) var(--spin-easing);
}
.pie-img {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Wedge icons sit on top of the pie. Positions follow the
   centroid of each wedge in pie.png. */
.pie-icon {
  position: absolute;
  width: 26%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.pie-icon--yellow { top: 33%; left: 65%; }
.pie-icon--blue   { top: 20%; left: 15%; }
.pie-icon--gray   { top: 74%; left: 27%; }

/* Splash uses a smaller pie; same positions still work since they're %. */

.pie-caption {
  text-align: center;
  font-family: 'Lora', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  margin: 24px 24px 0;
  line-height: 1.25;
}

/* ---------- Wedge title -------------------------------------- */
.wedge-title-cta {
  text-align: center;
  padding: 18px 24px 0;
}
.wedge-name {
  font-family: 'Lora', Georgia, serif;
  font-size: 24px;
  margin: 0;
  color: var(--wedge, var(--text));
}
.wedge-go {
  font-weight: 600;
  margin: 6px 0 0;
}

/* ---------- Question screen ---------------------------------- */
.qheader {
  background: linear-gradient(180deg, var(--wedge, var(--green)) 0%, var(--wedge-soft, var(--green-dark)) 100%);
  color: #fff;
  padding: 18px 22px 22px;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}
.qheader__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}
.qheader__count { flex: 0 0 auto; }
.qheader__progress {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: rgba(0,0,0,.18);
  overflow: hidden;
}
.qheader__progress > span {
  display: block;
  height: 100%;
  background: rgba(0,0,0,.6);
  width: 0%;
  transition: width .25s ease;
}
.qheader__points {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.qheader__points img {
  width: 14px;
  height: 14px;
  filter: invert(1);
}

.qheader__chip {
  display: inline-block;
  margin: 14px 0 10px;
  padding: 6px 12px;
  background: rgba(255,255,255,.7);
  color: var(--text);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.qheader__q {
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  margin: 0;
}

.qoptions {
  padding: 18px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qopt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.qopt:hover { background: #FAFAF8; }
.qopt[aria-checked="true"] {
  border-color: var(--wedge-strong, var(--green-dark));
  background: var(--wedge-tint, #ECF7EE);
}
.qopt__letter {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #E8E8E5;
  color: var(--text);
  font-weight: 700;
}
.qopt[aria-checked="true"] .qopt__letter {
  background: var(--wedge-strong, var(--green-dark));
  color: #fff;
}
.qopt__text { flex: 1 1 auto; }

/* ---------- Feedback ----------------------------------------- */
.fb-header {
  padding: 26px 22px 22px;
  text-align: center;
  color: #fff;
  background: var(--correct-bg);
}
.screen--feedback[data-mode="incorrect"] .fb-header {
  background: var(--incorrect-bg);
}
.fb-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #E9E9E9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: var(--correct-bg-d);
}
.screen--feedback[data-mode="incorrect"] .fb-badge { color: var(--incorrect-bd); }
.fb-badge img {
  width: 34px;
  height: 34px;
  filter: none;
}
.fb-title {
  margin: 0;
  font-family: 'Lora', Georgia, serif;
  font-size: 32px;
  font-weight: 700;
}
.fb-pill {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 14px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  background: rgba(255,255,255,.25);
}

.fb-body {
  padding: 14px 22px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fb-cards { display: flex; flex-direction: column; gap: 10px; }

.fb-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-card);
  background: #fff;
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-card);
  font-size: 14px;
}
.fb-card--correct {
  background: #F0FAF4;
  border-color: var(--correct-bg);
}
.fb-card--incorrect {
  background: #FEF1F2;
  border-color: var(--incorrect-bd);
}
.fb-card__letter {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
}
.fb-card--correct   .fb-card__letter { background: var(--correct-bg); }
.fb-card--incorrect .fb-card__letter { background: var(--incorrect-bd); }
.fb-card__body { flex: 1 1 auto; line-height: 1.25; }
.fb-card__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.fb-card__text { font-weight: 600; }

.fb-explain {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #E2F0F6;
  border: 1.5px solid var(--blue-soft);
  border-radius: var(--radius-card);
  padding: 12px 14px;
}
.fb-explain__icon { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.fb-explain__text { margin: 0; font-size: 13px; line-height: 1.4; color: var(--blue-text); }

.fb-streak {
  background: #FBF1CC;
  border: 1.5px solid #ECD56A;
  border-radius: var(--radius-card);
  padding: 12px 16px;
  text-align: center;
}
.fb-streak__line { margin: 0; font-weight: 700; color: var(--yellow-text); }
.fb-streak__sub  { margin: 2px 0 0; font-style: italic; color: var(--yellow-text); font-size: 13px; }

/* ---------- Wedge finished ----------------------------------- */
.screen--wedge-finished {
  align-items: center;
  text-align: center;
  padding: 28px 24px 0;
}
.screen--wedge-finished[data-wedge="yellow"] { background: var(--yellow); color: #fff; }
.screen--wedge-finished[data-wedge="blue"]   { background: var(--blue);   color: #fff; }
.screen--wedge-finished[data-wedge="gray"]   { background: var(--gray-wedge); color: #fff; }

.wf-art {
  width: min(70vw, 280px);
  aspect-ratio: 1;
  margin: 6px auto 12px;
}
.wf-art img { width: 100%; height: 100%; object-fit: contain; }

.wf-title {
  margin: 6px 0 0;
  font-family: 'Lora', Georgia, serif;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
}
.wf-sub {
  margin: 10px 0 16px;
  font-size: 14px;
  color: rgba(255,255,255,.92);
}

.wf-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}
.wf-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
}
.wf-dot--yellow { background: var(--yellow-soft); }
.wf-dot--blue   { background: var(--blue-soft); }
.wf-dot--gray   { background: var(--gray-soft); }
.wf-dot.is-earned { background: #fff; }
.wf-dot.is-earned svg {
  width: 18px;
  height: 18px;
  color: var(--green-darker);
}
.wf-dot:not(.is-earned) svg { display: none; }

.screen--wedge-finished .screen__cta .btn--outline {
  background: rgba(255,255,255,.0);
  color: #fff;
  border-color: rgba(255,255,255,.7);
}
.screen--wedge-finished .screen__cta .btn--outline:hover { background: rgba(255,255,255,.1); }
.screen--wedge-finished .btn--outline.btn--icon .btn__icon { filter: invert(1); }

/* ---------- End screen --------------------------------------- */
.screen--end {
  align-items: center;
  text-align: center;
  padding: 26px 24px 0;
  overflow-y: auto;          /* the sorteo form makes this screen taller than the frame */
  -webkit-overflow-scrolling: touch;
}
.end-check {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 10px;
}
.end-check img { width: 24px; height: 24px; filter: invert(1); }
.end-title {
  font-family: 'Lora', Georgia, serif;
  font-size: 27px;
  color: var(--green-darker);
  margin: 0;
}
.end-sub { margin: 6px 0 14px; color: var(--text-muted); font-size: 14px; }

.end-art {
  flex: none;
  width: min(46vw, 190px);
  margin: 2px auto 14px;
}
.end-art img { width: 100%; height: auto; display: block; }

.end-cta {
  flex-direction: row;
  gap: 12px;
  padding-top: 16px;
}
.end-cta .btn { flex: 1 1 0; padding: 14px 16px; font-size: 15px; }

/* ---------- Toast -------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.86);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.toast.is-visible { opacity: 1; }

/* ---------- Wedge color helpers ------------------------------ */
body[data-wedge="yellow"] {
  --wedge: var(--yellow);
  --wedge-soft: var(--yellow-soft);
  --wedge-strong: var(--yellow-text);
  --wedge-tint: #FBF2D5;
}
body[data-wedge="blue"] {
  --wedge: var(--blue);
  --wedge-soft: var(--blue-soft);
  --wedge-strong: var(--blue-text);
  --wedge-tint: #E2F0F6;
}
body[data-wedge="gray"] {
  --wedge: var(--gray-wedge);
  --wedge-soft: var(--gray-soft);
  --wedge-strong: var(--gray-text);
  --wedge-tint: #ECECEC;
}

/* ---------- Motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pie-wheel.is-spinning { transition: none !important; }
  .qheader__progress > span { transition: none; }
}

/* ---------- Desktop panel (QR + fullscreen/share) -------------
   Hidden by default (mobile-first); shown next to the phone frame
   once there's enough room for both columns.
   ---------------------------------------------------------------- */
.desktop-panel {
  display: none;
}

@media (min-width: 900px) {
  .app-shell .phone-frame {
    /* Cancel the auto-margin centering meant for when phone-frame is
       the sole flex child — with the panel as a sibling it would
       otherwise swallow all free space between the two columns. */
    margin: 0;
  }

  .desktop-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    width: 320px;
    flex: 0 0 auto;
  }

  .desktop-panel__qr {
    width: 220px;
    height: 220px;
    padding: 20px;
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
  }
  .desktop-panel__qr svg { display: block; width: 100%; height: 100%; }

  .desktop-panel__info { display: flex; flex-direction: column; gap: 4px; }

  .desktop-panel__title {
    margin: 0;
    font-family: 'Lora', Georgia, serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--text);
  }
  .desktop-panel__place {
    margin: 0 0 12px;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
  }
  .desktop-panel__logos {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
  }
  .desktop-panel__logo {
    max-height: 72px;
    width: auto;
    object-fit: contain;
  }
  .desktop-panel__kicker {
    margin: 0 0 8px;
    font-family: 'Lora', Georgia, serif;
    font-weight: 700;
    font-size: 19px;
  }
  .desktop-panel__desc {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
  }
  .desktop-panel__info .btn { width: 100%; margin-bottom: 12px; }
  .desktop-panel__info .btn:last-child { margin-bottom: 0; }
}

/* ---------- Fullscreen mode ------------------------------------
   Requested on <html>; the phone frame's chrome (rounded card,
   shadow, page margins) drops away so its own screen background
   fills the viewport, while each screen's content stays capped at
   phone width and centered.
   ---------------------------------------------------------------- */
.fullscreen-exit {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 60;
  appearance: none;
  border: 0;
  padding: 10px 20px;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--green);
  cursor: pointer;
}
.fullscreen-exit:hover { background: var(--green-dark); }

body.is-fullscreen .fullscreen-exit { display: block; }
body.is-fullscreen .desktop-panel { display: none; }

body.is-fullscreen { padding: 0; }
body.is-fullscreen .phone-frame {
  max-width: none;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
body.is-fullscreen .screen > * {
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Share modal ---------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, .55);
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .2s ease;
}
.modal-backdrop:not([hidden]) { display: flex; }
.modal-backdrop.is-visible { opacity: 1; }

.modal {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 20px 24px 24px;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.modal__header h2 {
  margin: 0;
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  font-size: 20px;
}
.modal__close {
  appearance: none;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

.share-modal__buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.share-modal__btn {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-modal__btn img { width: 24px; height: 24px; filter: invert(1); }
.share-modal__btn--whatsapp { background: #25D366; }
.share-modal__btn--telegram { background: #229ED9; }
.share-modal__btn--facebook { background: #1877F2; }
.share-modal__btn--x        { background: #000; }

.modal__text {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
}
.modal__actions {
  display: flex;
  gap: 10px;
}
.modal__actions .btn { flex: 1 1 0; padding: 13px 12px; font-size: 15px; }

/* ---------- Sorteo signup (end screen) ----------------------- */
.signup { width: 100%; text-align: left; }

.signup__title {
  font-family: 'Lora', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--green-darker);
  text-align: center;
  margin: 0 0 4px;
}
.signup__copy {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: center;
}

.signup__form { display: flex; flex-direction: column; gap: 10px; }

.field { display: block; }
.field__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.field__input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #DCD6C4;
  border-radius: var(--radius-btn);
  background: #fff;
  font-family: inherit;
  font-size: 16px;          /* 16px keeps iOS from zooming on focus */
  color: var(--text);
}
.field__input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(125, 186, 140, .28);
}
.field__error { display: none; margin-top: 4px; font-size: 12px; color: var(--incorrect-bd); }
.field.is-invalid .field__input { border-color: var(--incorrect-bd); }
.field.is-invalid .field__error { display: block; }

.signup__error {
  margin: 2px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--incorrect-bd);
}
.signup__form .btn { margin-top: 4px; }

.signup-done {
  width: 100%;
  background: #EEF7F0;
  border: 1.5px solid var(--green);
  border-radius: var(--radius-card);
  padding: 18px 16px;
}
.signup-done__check {
  width: 40px;
  height: 40px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.signup-done__check img { width: 20px; height: 20px; filter: invert(1); }
.signup-done__title {
  font-family: 'Lora', Georgia, serif;
  font-size: 19px;
  margin: 0;
  color: var(--green-darker);
}
.signup-done__sub { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); }