/* woo-checkout/index.css — page composition CSS. Mobile-first. */

/* ─── Atoms ────────────────────────────────────────────────────────── */
@import url('../../_components/atoms/btn-primary/btn-primary.css');
@import url('../../_components/atoms/terms-checkbox/terms-checkbox.css');

/* ─── Molecules ────────────────────────────────────────────────────── */
@import url('../../_components/molecules/progress-stepper/progress-stepper.css');
@import url('../../_components/molecules/order-item/order-item.css');
@import url('../../_components/molecules/order-total-row/order-total-row.css');
@import url('../../_components/molecules/terms-row/terms-row.css');

/* ─── Sections ─────────────────────────────────────────────────────── */
@import url('../../_components/sections/header-full/header-full.css');
@import url('../../_components/sections/footer-full/footer-full.css');
@import url('../../_components/sections/mobile-menu/mobile-menu.css');
@import url('../../_components/sections/order-summary/order-summary.css');
@import url('../../_components/sections/crypto-select-card/crypto-select-card.css');

/* ─── Page-scoped overrides ─────────────────────────────────────────── */

.page-woo-checkout [data-wins-counter] { display: none !important; }

.page-woo-checkout .woo-main {
  position: relative;
  overflow: hidden;
}
.page-woo-checkout .woo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

/* Progress stepper — Figma 1530:151 y=136 (with --lg from progress-stepper component) */
.page-woo-checkout .woo-progress { margin-top: 32px; }

/* Hero — "Checkout" title (Figma 1530:150 y=232) */
.page-woo-checkout .woo-hero {
  text-align: center;
  margin-top: 48px;
  margin-bottom: 24px;
}
.page-woo-checkout .woo-hero__title {
  font-family: 'Nationale', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.02em;
  color: rgb(var(--color-lead));
  margin: 0;
}

/* Crypto select card region (Figma 1531:298 y=304) */
.page-woo-checkout .woo-crypto-region {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* Order summary region (Figma 1530:3 y=560) */
.page-woo-checkout .woo-order-region {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* Terms row (Figma 1531:216 y=800, left-aligned) */
.page-woo-checkout .woo-terms-region {
  display: flex;
  justify-content: flex-start;
  margin-top: 24px;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Place order CTA region (Figma 1531:214 y=872, full-width 960) */
.page-woo-checkout .woo-cta-region {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 48px;
}

/* GOTCHA #2 — woo-checkout "Place order" CTA: 18px font (NOT default 16) + width 960 cap */
.page-woo-checkout .btn-primary--place-order {
  width: 100%;
  max-width: 960px;
  font-size: 18px;
  line-height: 28px;
}

/* GOTCHA #4 — woo-checkout order-total-row uses --with-rule (1px soft top border) */
/* (already correctly applied at markup level — comment only) */

/* Decorative glows hidden on mobile */
.page-woo-checkout .woo-glow { display: none; }

/* ─── Desktop ─────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .page-woo-checkout .woo-container { padding: 0 24px; }
  .page-woo-checkout .woo-progress { margin-top: 56px; }
  .page-woo-checkout .woo-hero {
    margin-top: 64px;
    margin-bottom: 24px;
  }
  .page-woo-checkout .woo-hero__title {
    font-size: 36px;
    line-height: 48px;
  }

  .page-woo-checkout .woo-glow {
    display: block;
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
  }
  .page-woo-checkout .woo-glow--top {
    top: -184px;
    left: -8px;
    width: 1456px;
    height: 448px;
  }
  .page-woo-checkout .woo-glow--bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 98px;
  }
}