/* khr-sticker — LINE Sticker Giveaway (DPA × Vithita Group)
 * Built from the mockup PNGs in mockup/v2-plus-desktop/ as the source of truth,
 * cross-checked against DESIGN_GUIDELINES.md. Mobile-first; one desktop
 * breakpoint at 768px. Not a port of the Figma HTML export.
 *
 * Measured off the mockups:
 *   header band          80px tall, full-bleed blue
 *   mobile content column ~342px (390 frame − 24px side padding)
 *   desktop content column ~512px, centered under a full-width header
 *   sticker artwork       shown ~215–272px (asset is 215×200 native)
 *   footer divider        full column width
 * ------------------------------------------------------------------------- */

:root {
  /* Prompt covers Thai + Latin. Inter covers Latin only, so the "Inter" font in
   * Figma must fall through to Prompt for Thai glyphs — a per-glyph stack:
   * Latin renders in Inter, Thai in Prompt. This is what the mockups actually
   * show (Figma renders Inter's missing Thai in a Prompt-like fallback), and it
   * is deterministic, unlike relying on the OS Thai font. Verified against the
   * Figma REST API (file DHuvezuTYqCQjIFz60bt9p). */
  --font-prompt: 'Prompt', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-inter: 'Inter', 'Prompt', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --blue: rgb(0, 15, 250);          /* header, links, outlined/filled-blue buttons */
  --navy: rgb(10, 10, 165);         /* description block */
  --green-text: rgb(54, 180, 10);   /* green headlines / privacy title */
  --green-cta: rgb(55, 180, 10);    /* CTA + back button fill */
  --green-cta-hover: rgb(46, 150, 8);
  --green-cta-active: rgb(40, 128, 6);
  --gray: rgb(130, 130, 130);       /* secondary/body text */
  --black: rgb(0, 0, 0);
  --white: rgb(255, 255, 255);
  --border: rgb(237, 237, 237);     /* #EDEDED divider */
  --icon-bg: rgb(242, 242, 242);    /* error icon circle #F2F2F2 */
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  min-height: 100vh;    /* fallback for browsers without dvh support */
  min-height: 100dvh;   /* actual visible viewport — accounts for the
                            address bar / toolbar on iOS & Android Chrome,
                            which 100vh does not (it uses the largest
                            possible viewport, chrome collapsed) */
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-inter);
  line-height: 1.5;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------------------
 * Header — full-bleed blue bar, ~80px tall, centered white uppercase text.
 * ------------------------------------------------------------------------- */
.hdr { width: 100%; background: var(--blue); flex: none; }   /* fixed height, never shrink */

.hdr__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px 16px 12px;   /* Figma: 26 top / 25 bottom → 80px header */
  text-align: center;
}

.hdr__title {
  font-family: var(--font-prompt);
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;   /* Figma: 30px → 80px header with 26/25 padding */
  text-transform: uppercase;
  color: var(--white);
}

/* ---------------------------------------------------------------------------
 * Main content column = Figma "Contains" frame: 382px wide inside the 390px
 * artboard (4px inset), grow=1 (fills the height between header and footer),
 * SPACE_BETWEEN with a 30px minimum gap. So the content stretches to fill a
 * tall screen (footer pinned to the bottom edge) and scrolls on a short one.
 * NOT a uniform 24px column — each element carries its own Figma width below.
 * ------------------------------------------------------------------------- */
.shell {
  flex: 1 0 auto;            /* grow to fill; never shrink → scroll when short */
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* default: top-aligned (already, privacy) */
  gap: 7px;                     /* spacing between items */
}

/* Per-page vertical distribution — matches each Figma frame's Contains align:
   landing = SPACE_BETWEEN (auto gap fills height); sold-out / error = CENTER.
   The footer is always pinned to the bottom edge by the body flex column. */
.shell--between { justify-content: space-between; }
.shell--center  { justify-content: center; }
.shell--tight   { gap: 6px; }   /* Figma already-claimed Contains gap */

/* ---------------------------------------------------------------------------
 * Shared content pieces
 * ------------------------------------------------------------------------- */

/* Green headline — landing (Inter 24/700). */
.headline {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.35;
  text-align: center;
  color: var(--green-text);
}

/* Black status heading — already-claimed / sold-out (Inter 24/700). */
.status-title {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.21;   /* Figma: 29px for 24px (27px for the 22px error title) */
  text-align: center;
  color: var(--black);
}

/* Sticker artwork. Native asset is 215×200; cap the upscale so it stays
   legible (mockup shows ~215–272px). Re-export at 2–3× for a crisp hero. */
.sticker { width: 100%; display: flex; justify-content: center; }
.sticker img { width: 160px; max-width: 100%; }   /* Figma node: 215×200, native */


/* Navy mascot description. Thai has no inter-word spaces, so wrapping is
   controlled explicitly: each phrase is a no-break unit (.nb) and the gaps
   between phrases are the only break points. This yields clean line breaks at
   any column width — ~4 lines on the 360px mobile column, ~2 on the 600px
   desktop column — without the browser breaking mid-word. */
.desc { width: 100%; max-width: 360px; text-align: center; color: var(--navy); }
.desc__lead {
  font-family: var(--font-prompt);
  font-weight: 700;
  font-size: 20px;
  line-height: 20px;     /* Figma description node: 20px line spacing throughout */
  margin-bottom: 10px;
  white-space: nowrap;   /* lead stays on one line */
}
.desc__body {
  font-family: var(--font-prompt);
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;     /* Figma: 20px (ratio 1.25) — tight, not 1.75 */
}
.desc__body strong { font-weight: 600; }   /* Figma: น้องปกป้อง is Prompt 600 */

/* No-break phrase unit — used to control Thai line wrapping. */
.nb { white-space: nowrap; }

/* Gray subtitle — Figma width 322px. */
.subtitle {
  max-width: 322px;
  font-family: var(--font-prompt);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  color: var(--gray);
}

/* Gray status body — already-claimed / sold-out / error. */
.status-body {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  text-align: center;
  color: var(--gray);
  max-width: 320px;
}

/* Figma size variants: error/not-started title is 22 (others 24); the
   already-claimed body is 14 (sold-out/error bodies are 16). */
.status-title--sm { font-size: 22px; }
.status-body--sm { font-size: 14px; line-height: 1.5; }   /* Figma already body: 21px */

/* ---------------------------------------------------------------------------
 * CTA cluster — button + fine print + consent
 * ------------------------------------------------------------------------- */
/* CTA cluster — Figma "Frame 1" is 342px wide, 10px item spacing. */
.cta { width: 100%; max-width: 342px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cta form { width: 100%; display: flex; justify-content: center; }

.fine-print {
  font-family: var(--font-prompt);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--gray);
}

.consent {
  width: 100%;
  max-width: 364px;   /* Figma consent frame width */
  font-family: var(--font-prompt);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  color: var(--gray);
}
.consent a { color: var(--blue); text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * Buttons — one base, three variants (guidelines §4). Full width on mobile,
 * capped and centered on desktop. 44px min tap target.
 * ------------------------------------------------------------------------- */
.btn {
  display: block;
  width: 100%;
  max-width: 342px;
  min-height: 48px;          /* Figma button height */
  padding: 12px 20px;
  border-radius: 14px;
  border: none;
  font-family: var(--font-prompt);
  font-weight: 600;   /* Figma: all buttons are Prompt SemiBold 600, not 700 */
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, color 120ms ease;
}
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Primary CTA — green fill, white, Prompt 17. */
.btn--cta { background: var(--green-cta); color: var(--white); font-size: 17px; }
.btn--cta:hover { background: var(--green-cta-hover); }
.btn--cta:active { background: var(--green-cta-active); }

/* Back button (privacy) — same green fill, Prompt 17. */
.btn--back { background: var(--green-cta); color: var(--white); font-size: 17px; }
.btn--back:hover { background: var(--green-cta-hover); }
.btn--back:active { background: var(--green-cta-active); }

/* Secondary — outlined blue on white. */
.btn--outline {
  background: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
}
.btn--outline:hover { background: rgba(0, 15, 250, 0.06); }

/* Tertiary — filled blue (error "try again"). */
.btn--blue { background: var(--blue); color: var(--white); }
.btn--blue:hover { background: var(--navy); }

/* ---------------------------------------------------------------------------
 * Error icon — gray circle with a warning glyph.
 * ------------------------------------------------------------------------- */
.error-icon {
  width: 88px;
  height: 88px;
  border-radius: 44px;
  background: var(--icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.error-icon svg { width: 36px; height: 36px; display: block; }

/* ---------------------------------------------------------------------------
 * Privacy policy body — Prompt 12, left-aligned, long-form (guidelines §3.6).
 * ------------------------------------------------------------------------- */
.legal-title {
  width: 100%;
  max-width: 342px;
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.35;
  text-align: center;
  color: var(--green-text);
}
/* Figma privacy: the text sits in a fixed area that scrolls, with "กลับ" pinned
   below it — on mobile and desktop alike. legal-body grows to fill the space
   between the title and the button and scrolls internally. */
.legal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  max-width: 342px;
  padding-right: 10px;
  font-family: var(--font-prompt);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.7;
  text-align: left;
  color: var(--gray);
  white-space: pre-line;   /* preserve the section breaks in the source text */
}
.btn--back { flex: none; }   /* pinned below the scroll area */

/* Privacy: bound the page to the viewport so the legal body scrolls inside its
   own area (button pinned below it), instead of the whole page scrolling. */
.page-locked {
  height: 100vh;    /* fallback */
  height: 100dvh;   /* see body's min-height comment above — same bug, worse
                        here since overflow:hidden made the excess
                        unreachable rather than just unscrolled-to */
  overflow: hidden;
}
.page-locked .shell { flex: 1 1 auto; min-height: 0; }

/* ---------------------------------------------------------------------------
 * Footer — divider (full column width), DPA + Vithita logos, attribution.
 * ------------------------------------------------------------------------- */
.ft {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  padding: 0 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.ft { flex: none; }   /* fixed footer — never shrinks; pinned to the bottom edge */
.ft__divider { width: 100%; border-top: 1px solid var(--border); }
.ft__logos { display: flex; align-items: center; justify-content: center; gap: 20px; }
.ft__logos img { display: block; }
.ft__logo-dpa { width: 149px; }
.ft__logo-vithita { width: 80px; }
.ft__attr {
  font-family: var(--font-prompt);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray);
}

/* ---------------------------------------------------------------------------
 * Desktop — full-width header (already handled). The content column widens to
 * 600px so the description reads in ~2 lines instead of wrapping many times.
 * Same full-height model: Contains grows and distributes, footer at the bottom.
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .shell { max-width: 600px; padding: 20px 24px; gap: 10px;}   /* Figma Contains Top/Bottom 20 */
  .ft { max-width: 600px; gap: 12px;}
  .desc { max-width: 600px; }        /* let phrases pack onto ~2 lines */
  .btn { max-width: 280px; }
  .status-body { max-width: 460px; }
  .legal-title, .legal-body { max-width: 600px; }   /* Figma desktop privacy body = 600 */
  .hdr__inner { padding: 26px 16px 25px; }   /* Figma: 26 top / 25 bottom → 80px header */
  .sticker img { width: 215px; max-width: 100%; }   /* Figma node: 215×200, native */
  .subtitle { line-height: 1.6; }
  .btn { min-height: 56px; padding: 16px 20px; }         /* Figma button height */
  .cta { gap: 10px; }  
}