/* -------------------------------------------------------------------------
 * Design tokens
 * Taken verbatim from the design_references mockups so ports stay faithful.
 * ------------------------------------------------------------------------- */

:root {
  --blue: #354ec1;
  --text: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --border: #E5E7EB;
  --bg: #F9FAFB;
  --white: #FFFFFF;
  --green: #49b034;
}

/* -------------------------------------------------------------------------
 * Reset
 *
 * Wrapped in `@layer base` so Tailwind v4 utilities (which live in
 * `@layer utilities` after the tailwind.css build) can actually override
 * padding/margin/box-sizing per-element. An unlayered reset would beat
 * any layered utility on the cascade regardless of specificity, which
 * breaks every inline Tailwind migration. Step 3 is the first migrated
 * view and needed this to land.
 * ------------------------------------------------------------------------- */

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

  html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--white);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }

  button {
    font-family: inherit;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

/* -------------------------------------------------------------------------
 * Primary button
 * ------------------------------------------------------------------------- */

.btn-primary {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.btn-primary:hover {
  opacity: 0.92;
}

/* -------------------------------------------------------------------------
 * Demo landing page
 * Dev-only wrapper for the "Start checkout (demo)" page. Not a mockup port.
 * ------------------------------------------------------------------------- */

.demo-wrap {
  max-width: 600px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
}

.demo-wrap h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
}

.demo-wrap .brand-descriptor {
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.demo-wrap .store-meta {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 16px;
}

/* Step-specific styles live in their own files (step1.css, step2.css, ...)
   and are loaded via content_for :stylesheets on each page. */

/* Reserve space for the fixed welcome-sticky popup.

   Padding lives on the LEFT column (.checkout-page-shell__left) — NOT on
   the wrapper, NOT on body. The flex row uses `items-stretch`, so the
   right column matches the left column's height; both column backgrounds
   (white on the left, --bg gray on the right) extend through the reserved
   area together, perfectly anchored to the column boundary.

   The earlier wrapper-padding approach (Session GM) exposed the wrapper's
   `linear-gradient(to right, white 55%, --bg 55%)` in a 90px band below
   the columns. On viewports wider than 1080px the gradient's 55% transition
   (55% of viewport width) is offset from the column boundary (55% of the
   centered 1080px container), producing a visible white notch where the
   right column's gray ended and the wrapper's white began. The body-padding
   approach (pre-GM) had a different bug: wrapper didn't grow, body's
   default white showed below the wrapper.

   Column-level padding fixes both: the wrapper's gradient is never
   directly visible below the row (the columns cover it), so the transition
   misalignment is moot. Session GR (2026-05-15). */
body.has-welcome-sticky .checkout-page-shell__left { padding-bottom: 90px; }

/* -------------------------------------------------------------------------
 * Shared footer-policy modal keyframe animations.
 * The modal chrome itself lives inline as Tailwind utilities in
 * checkout/shared/_policy_modal. Custom keyframes can't go inline.
 * ------------------------------------------------------------------------- */

@keyframes policyFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes policySlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}