/* ==========================================================================
   Mireia · makeup — enquiry form
   Mobile-first. Desktop layout from 760px.
   ========================================================================== */

/* ---- Fonts: DM Sans (variable, weights 100–1000), self-hosted ---------- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --ink: #4a2638;
  --bg: #faf2f3;
  --field: rgba(255, 255, 255, .62);
  --error: #9e2a50;
  --rail-off: rgba(0, 0, 0, .12);
  --slide: 40px;                 /* step transition distance (60px on desktop) */
  --radius-field: 999px;
  --radius-area: 20px;
}

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100%;
  background: transparent;   /* the background lives on <html> (see above) */
  color: var(--ink);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h2, p { margin: 0; }

button { font: inherit; color: inherit; }

::placeholder { color: currentColor; opacity: .38; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Background blobs -------------------------------------------------- */
.bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
}
.blob--pink  { left: -200px; top: 60px;   width: 460px; height: 460px; background: radial-gradient(circle, rgba(238, 170, 190, .85) 0%, transparent 68%); }
.blob--lilac { left: 150px;  top: -120px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(208, 195, 238, .95) 0%, transparent 68%); filter: blur(34px); }
.blob--peach { left: 60px;   top: 560px;  width: 460px; height: 460px; background: radial-gradient(circle, rgba(242, 196, 178, .90) 0%, transparent 68%); filter: blur(34px); }
.blob--white { left: 40px;   top: 300px;  width: 320px; height: 320px; background: radial-gradient(circle, rgba(255, 255, 255, .75) 0%, transparent 68%); }

/* Phones: iOS Safari paints the page behind its translucent bottom toolbar
   only where the document actually extends. The .under-toolbar strip adds
   that height below the app, the body does not scroll, and the blob layer is
   made tall enough to cover it, so the background keeps going under the bar. */
@media (max-width: 759px) {
  body { overflow: hidden; }
  .under-toolbar { height: 160px; }
  .bg {
    position: absolute;
    inset: auto;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100svh + 160px);
  }
}

/* ---- Page frame -------------------------------------------------------- */
.app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;   /* the screen with the browser toolbar shown */
  padding: 22px 24px calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Strip below the app; given a height on phones only (see the .bg rules) */
.under-toolbar { height: 0; }

.rail {
  display: flex;
  gap: 4px;
}
.rail span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--rail-off);
  transition: background .8s ease;
}
.rail span.is-done { background: var(--ink); }

.brand {
  margin-top: 13px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.brand span { font-weight: 400; }

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 22px;
}

.form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The stage centres the current step vertically. The bottom padding reserves
   room for the error line, which hangs below the step without moving it. */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 44px;
}
.centre { position: relative; }

.panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* A step on its way out is lifted out of the flow while it fades */
.panel.is-leaving {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

/* ---- Question + hint --------------------------------------------------- */
.q {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q h2 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
  text-wrap: balance;
}
.q label { cursor: text; }
.hint { font-size: 15px; }

/* ---- Fields ------------------------------------------------------------ */
.field {
  font: inherit;
  font-size: 17px;
  color: inherit;
  width: 100%;
  background: var(--field);
  border: 1px solid transparent;
  border-radius: var(--radius-field);
  padding: 15px 19px;
  outline: none;
  transition: border-color .15s ease;
}
.field:focus { border-color: var(--ink); }
.field:focus-visible { outline-offset: 2px; }
.field[aria-invalid="true"] { border-color: var(--error); }

.field--area {
  font-size: 16px;
  border-radius: var(--radius-area);
  resize: none;
  line-height: 1.4;
  display: block;
}

.datetime {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Native date/time pickers: same pill, consistent height, left-aligned value */
.field--picker {
  -webkit-appearance: none;
  appearance: none;
  min-height: 55px;
  text-align: left;
  cursor: pointer;
}
.field--picker::-webkit-date-and-time-value { text-align: left; }
.field--picker::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.field--picker:invalid { color: inherit; }
.datetime .sublabel {
  font-size: 15px;
  margin-top: 6px;
}

.pair {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.pair .q { gap: 10px; }
.pair .q h2 {
  font-size: 24px;
  line-height: 1.15;
}
.pair .hint {
  font-size: 14px;
  line-height: 1.4;
  text-wrap: pretty;
}

/* ---- Choice pills ------------------------------------------------------ */
.choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.choice {
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  width: 100%;
  padding: 15px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-field);
  background: var(--field);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.choice[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* "I don't know yet →" */
.skip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 20px;
  border: 0;
  border-radius: var(--radius-field);
  background: var(--field);
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

/* ---- Error line (aria-live) ------------------------------------------- */
/* Out of the flow: appearing or disappearing never shifts the fields above */
.error {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--error);
}

/* ---- Honeypot: off-screen, unreachable ---------------------------------- */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Consent line (last step) and privacy sheet ------------------------- */
.consent {
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}
.consent[hidden] { display: none; }
.consent__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.sheet {
  width: 100%;
  max-width: none;
  max-height: 100%;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  /* Phones: iOS Safari's toolbar sits over the bottom of the page. Push the
     card that far down and pad it, so the white keeps going under the
     toolbar instead of showing the backdrop. Zero on desktop. */
  --toolbar: 160px;
  margin-bottom: calc(-1 * var(--toolbar));
}
.sheet::backdrop { background: rgba(74, 38, 56, .4); }
.sheet__card {
  background: #fff;
  border-radius: 28px 28px 0 0;
  padding: 14px 24px calc(24px + var(--toolbar) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
}
.sheet[open] .sheet__card { animation: sheet-up .4s cubic-bezier(.2, .8, .2, 1) both; }
.sheet__handle {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: rgba(74, 38, 56, .22);
  margin: 0 auto 22px;
}
.sheet__title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.sheet__rows { margin: 0; }
.sheet__rows div {
  padding: 16px 0;
  border-bottom: 1px solid rgba(74, 38, 56, .12);
}
.sheet__rows div:last-child { border-bottom: 0; }
.sheet__rows dt {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}
.sheet__rows dd {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.sheet__rows a {
  color: inherit;
  font-weight: 700;
  text-underline-offset: 3px;
}
.sheet__ok {
  width: 100%;
  min-height: 56px;
  margin-top: 16px;
}
@keyframes sheet-up {
  from { opacity: 0; transform: translateY(40px); }
}

/* ---- Turnstile container ----------------------------------------------- */
/* Sits above the sending screen, just under the "Enviando" label. Empty
   (and hidden) unless Turnstile needs the visitor to interact. */
.turnstile {
  position: fixed;
  left: 16px;
  right: 16px;
  top: calc(50% + 48px);
  z-index: 3;
  display: flex;
  justify-content: center;
}
.turnstile:empty { display: none; }

/* ---- Navigation -------------------------------------------------------- */
.nav {
  display: flex;
  gap: 10px;
}
.nav[hidden] { display: none; }

.btn-back {
  flex: none;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  padding: 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .2s ease;
}
.btn-back:disabled {
  opacity: .35;
  cursor: default;
}

.btn-next {
  flex: 1;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: var(--radius-field);
  background: var(--ink);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.btn-next:disabled { cursor: progress; }
.btn-next__arrow[hidden] { display: none; }

/* Spinner shown while sending */
.btn-next__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.btn-next.is-loading .btn-next__spinner { display: inline-block; }

@keyframes spin { to { transform: rotate(360deg); } }

.btn-restart {
  width: 100%;
  padding: 17px;
  border: 0;
  border-radius: var(--radius-field);
  background: var(--field);
  color: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.btn-restart[hidden] { display: none; }

/* ---- Sending screen ---------------------------------------------------- */
/* The whole app fades out (background and blobs stay), the label fades in */
.app { transition: opacity .6s ease; }
.app.is-sending { opacity: 0; }

.sending {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in .6s both;
}
.sending[hidden] { display: none; }
.sending__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: rise-in .6s .3s both;
}
.sending__label {
  /* same type as the questions */
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
  text-align: center;
}
.sending__dots {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 12px;
  margin-top: 8px;
}
.sending__dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ink);
  animation: pill 1.5s ease-in-out infinite;
}
.sending__dots span:nth-child(2) { animation-delay: .22s; }
.sending__dots span:nth-child(3) { animation-delay: .44s; }

@keyframes pill {
  0%, 70%, 100% { transform: scale(.6); opacity: .3; }
  30%           { transform: scale(1.25); opacity: 1; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }

/* ---- Success screen ---------------------------------------------------- */
.thanks { animation: rise-in .6s both; }
.thanks h2 {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  outline: none;
}
.thanks p { font-size: 16px; }

.noscript {
  position: relative;
  z-index: 2;
  padding: 16px 24px;
  font-size: 14px;
}

/* ---- Failure screen ---------------------------------------------------- */
.failed { animation: rise-in .6s both; }
.fail-icon {
  width: 100px;
  height: 100px;
  margin: 14px 0 10px 14px;
  border-radius: 50%;
  background: #8f2c4d;
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 14px rgba(143, 44, 77, .14);
}
.failed h2 {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  outline: none;
}
.failed p {
  font-size: 16px;
  line-height: 1.45;
}
.fail-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.fail-actions[hidden] { display: none; }
.fail-actions .btn-next {
  width: 100%;
  flex: none;
}
.fail-link {
  font-size: 16px;
  color: var(--ink);
  text-underline-offset: 4px;
}

/* ---- Pressed feedback -------------------------------------------------- */
.choice:active, .skip:active, .btn-next:not(:disabled):active, .btn-back:not(:disabled):active, .btn-restart:active {
  transform: scale(.985);
}

/* ---- Desktop ----------------------------------------------------------- */
@media (min-width: 760px) {
  :root { --slide: 60px; }

  .blob--pink  { left: -13%; top: 180px;  width: 760px; height: 760px; filter: blur(40px); }
  .blob--lilac { left: 53%;  top: -260px; width: 760px; height: 760px; filter: blur(44px); }
  .blob--peach { left: 43%;  top: 440px;  width: 820px; height: 820px; filter: blur(44px); }
  .blob--white { left: 28%;  top: 140px;  width: 520px; height: 520px; filter: blur(40px); }

  .app { padding: 30px 48px calc(56px + env(safe-area-inset-bottom, 0px)); }

  .rail { gap: 6px; }
  .brand { margin-top: 21px; }

  .main {
    width: 560px;
    max-width: 100%;
    margin: 32px auto 0;
  }
  .form { gap: 20px; }

  .q h2 {
    font-size: 42px;
    line-height: 1.1;
  }
  .pair .q h2 { font-size: 30px; }
  .thanks h2 { font-size: 52px; }
  .failed h2 { font-size: 52px; }

  .sending__label { font-size: 42px; line-height: 1.1; }

  .sheet {
    width: min(480px, calc(100% - 48px));
    margin: auto;
    --toolbar: 0px;
  }
  .sheet__card { border-radius: 28px; padding: 18px 28px 28px; }

  .nav { height: 56px; }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn-next__spinner { animation: none; border-top-color: rgba(255, 255, 255, .35); }
}