/* ==========================================================================
   Nubikk Loyalty dashboard, static MVP
   Built from Figma RVL9LdavOYTUCOuKIzhHdo, node 1918:5187.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts, self-hosted via @fontsource woff2 (no CDN).

   Note on Inter: Inter sits on our no-default list, but it is the body face in
   the client's Figma file, so it is kept here for fidelity. To swap it for a
   self-hosted alternative later, replace the two Inter @font-face blocks and
   the --font-ui token below. Nothing else references Inter by name.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-500-normal.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-400-normal.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin-500-normal.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;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --accent: #c19f7f;
  --ink: #111;
  --cream: #f4f0ec;   /* hero panel */
  --tile: #f3f2ee;    /* product tiles, reward banner */
  --light: #f3f4f6;   /* locked step, nav border */
  --border: #eaeaea;
  --line: #e5e7eb;
  --text-600: #4b5563;
  --text-500: #6b7280;
  --text-400: #9ca3af;
  --text-300: #d1d5db;

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;

  --gap: 16px;
}

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

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

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
a { color: inherit; text-decoration: none; }
ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

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

.skip-link {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 20;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: #fff;
}

.panel {
  width: 100%;
  max-width: 1360px;
  padding: 20px 32px;
  background: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .05));
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 17px;
  margin-bottom: var(--gap);
  border-bottom: 1px solid var(--light);
}

.logo img { width: 79.882px; height: 27.748px; }

.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
  height: 21.5px;
}

.nav-link {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  line-height: 21.5px;
  letter-spacing: 1.56px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-500);
}
.nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -16px;
  height: 2px;
  background: var(--accent);
}

.nav-utils {
  display: flex;
  gap: 20px;
  align-items: center;
}

.nav-util {
  font-size: 13px;
  line-height: 19.5px;
  color: var(--text-600);
  white-space: nowrap;
}

.nav-icon {
  display: flex;
  align-items: center;
  color: var(--text-600);
}
.nav-icon svg { width: 13px; height: 13px; fill: currentColor; }

/* --------------------------------------------------------------------------
   Hero row
   -------------------------------------------------------------------------- */
.hero-row {
  display: flex;
  gap: var(--gap);
  align-items: stretch;
  padding-top: 4px;
}

.hero {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  background: var(--cream);
}

/* Photo is anchored to the right edge and vertically centred, as in the frame. */
.hero-shoe {
  position: absolute;
  top: 50%;
  right: 0;
  width: 638px;
  height: 359px;
  transform: translateY(-50%);
  object-fit: cover;
  pointer-events: none;
}

/* Fades the photo's left edge back into the cream panel so the copy stays legible. */
.hero-fade {
  position: absolute;
  top: 50%;
  left: calc(100% - 638px);
  width: 193px;
  height: 359px;
  transform: translateY(-50%);
  background: linear-gradient(to right, var(--cream), rgba(244, 240, 236, 0));
}

.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22.75px;
  padding: 39.095px 40px 40px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 49px;
  line-height: 1.06;
  letter-spacing: 1.96px;
  color: var(--ink);
}

.hero-sub {
  font-size: 14px;
  line-height: 22.75px;
  color: var(--text-600);
}

.accent { color: var(--accent); }

/* --------------------------------------------------------------------------
   Unbox panel
   -------------------------------------------------------------------------- */
.unbox {
  display: flex;
  flex: 0 0 380px;
  flex-direction: column;
  gap: 24px;
  width: 380px;
  padding: 32px 32px 50px;
  background: var(--ink);
}

.unbox-intro { display: flex; flex-direction: column; gap: 15px; }

.unbox-title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 42px;
  color: #fff;
}

.unbox-copy {
  padding-bottom: 12.9px;
  font-size: 14px;
  line-height: 21.13px;
  color: var(--text-300);
}

.unbox-form { display: flex; flex-direction: column; gap: 15px; }

.code-input {
  width: 100%;
  padding: 13px 1px;
  border: 1px solid var(--text-600);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: 1.5px;
  text-align: center;
  transition: border-color .15s ease;
}
.code-input::placeholder { color: var(--text-400); opacity: 1; }
.code-input:hover { border-color: var(--text-400); }
.code-input:focus { border-color: var(--accent); outline: none; }
.code-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.code-input.is-invalid { border-color: #e08a7a; }

.unbox-help {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-300);
}
.unbox-help .help-icon { width: 12px; height: 12px; fill: currentColor; flex: none; }
.unbox-help a:hover { text-decoration: underline; text-underline-offset: 2px; }

.code-status { font-size: 12px; line-height: 18px; text-align: center; color: var(--accent); }
.code-status.is-error { color: #e08a7a; }
.code-status:empty { display: none; }

.unbox-form.is-unlocked .code-input { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 0;
  border-radius: 500px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 19.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--tile); }

.btn-outline {
  padding: 16px 1px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  line-height: 18px;
}
.btn-outline:hover { background: #fff; color: var(--ink); }

.btn-bordered {
  border: 1px solid rgba(0, 0, 0, .08);
  background: #fff;
  color: var(--ink);
}
.btn-bordered:hover { background: var(--tile); }

/* --------------------------------------------------------------------------
   Bottom row
   -------------------------------------------------------------------------- */
.bottom-row {
  display: flex;
  gap: var(--gap);
  align-items: stretch;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 25px;
  border: 1px solid var(--border);
}

/* Card B takes the slack; A and C are fixed, matching the frame at 1360px. */
.card-collection { flex: 1 0 0; min-width: 0; }
.card-rewards { flex: 0 0 380px; gap: 20px; }

/* --- Card A: recent unlock ------------------------------------------------ */
.card-unlock {
  position: relative;
  display: flex;
  flex: 0 0 350px;
  flex-direction: column;
  width: 350px;
  padding: 24px;
  background: var(--ink);
  overflow: hidden;
}

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  line-height: 16.5px;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: var(--accent);
}

.unlock-name {
  padding-top: 9px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 36px;
  letter-spacing: .48px;
  color: #fff;
}

.unlock-colour { font-size: 13px; line-height: 19.5px; color: var(--text-400); }

/* Glowing-shoe visual: textured plate vignetted into the card on all four edges.
   The plate is decoration and sits out of flow, exactly as in the frame; the shoe
   is the in-flow element that gives this block its height. */
/* 182x149 is the shoe's in-flow box in the frame; it sets card A's height. The
   shoe itself is smaller than the box and sits low and slightly right of centre,
   so it lands on the ring. */
.glow {
  position: relative;
  align-self: center;
  width: 182px;
  height: 149px;
  margin-top: 10px;
}

.glow-bg {
  position: absolute;
  left: 44px;
  top: 99.59px;
  width: 261px;
  height: 195.676px;
  background-image: url('glow-bg.webp');
  background-size: cover;
  background-position: center;
}
.glow-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--ink), rgba(17, 17, 17, 0)) top    / 100% 28.967px no-repeat,
    linear-gradient(to top,    var(--ink), rgba(17, 17, 17, 0)) bottom / 100% 28.08px  no-repeat,
    linear-gradient(to right,  var(--ink), rgba(17, 17, 17, 0)) left   / 41.086px 100% no-repeat,
    linear-gradient(to left,   var(--ink), rgba(17, 17, 17, 0)) right  / 28.967px 100% no-repeat;
}

.glow-shoe {
  position: absolute;
  z-index: 1;
  left: 16.5px;
  top: 12.1px;
  width: 157.9px;
  height: auto;
}

/* 10px stack gap + the button block's own 32px top padding, as in the frame. */
.card-unlock .btn-outline { margin-top: 42px; }

/* --- Card B: collection --------------------------------------------------- */
.card-head-group { display: flex; flex-direction: column; gap: 12px; }

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.card-title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 27px;
  color: var(--ink);
}
.card-title-center { text-align: center; }

.card-link { font-size: 12px; line-height: 18px; color: var(--accent); }
.card-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.filters { display: flex; gap: 8px; }

.pill {
  padding: 6px 16px;
  border: 0;
  border-radius: 9999px;
  background: var(--tile);
  color: var(--text-500);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.pill.is-active { background: var(--ink); color: #fff; }

/* `1 0 auto`, not `1 0 0`: the tiles still take the card's leftover height when the
   card is stretched by its row, but an auto basis keeps them from collapsing to
   zero height once the card stands alone and sizes to its own content. */
.tiles {
  display: flex;
  flex: 1 0 auto;
  gap: 12px;
  justify-content: center;
}

.tile {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  background: var(--tile);
}
/* Fixed 201x170 in the frame, centred in the wider tile; scales down on narrow screens. */
.tile img { width: 100%; max-width: 201px; height: auto; aspect-ratio: 201 / 170; }

.tile-meta { width: 100%; padding: 0 16px 16px; }
.tile-name { font-size: 12px; line-height: 18px; color: var(--ink); }
.tile-colour { font-size: 11px; line-height: 16.5px; color: var(--text-400); }

/* --- Card C: rewards ------------------------------------------------------ */
.tracker {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Track, then the accent fill that stops at the completed step. */
.tracker::before,
.tracker::after {
  content: '';
  position: absolute;
  top: 20.35px;
  height: 2px;
}
.tracker::before { left: 45px; right: 53px; background: var(--line); }
.tracker::after  { left: 12.73%; right: 47.58%; background: var(--accent); }

.step {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
}
.step-dot svg { width: 16px; height: 16px; fill: currentColor; }

.step.is-done .step-dot { background: var(--accent); color: #fff; }
.step.is-next .step-dot { background: #fff; border: 2px solid var(--accent); color: var(--accent); }
.step.is-locked .step-dot { background: var(--light); color: var(--text-400); }

.step-name {
  padding-top: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 16.5px;
  text-align: center;
  color: var(--ink);
}

.step-prize {
  padding-top: 6px;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  color: var(--text-400);
}

.banner {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: var(--tile);
}

.banner-icon { flex: none; width: 48px; height: 48px; }

.banner-copy { display: flex; flex-direction: column; gap: 4px; flex: 1 0 0; min-width: 0; }
.banner-title { font-size: 13px; line-height: 19.5px; color: var(--ink); }
.banner-sub { font-size: 11px; line-height: 16.5px; color: var(--text-500); }

.progress {
  width: 100%;
  height: 4px;
  border-radius: 9999px;
  background: var(--line);
}
.progress-fill {
  width: 70%;
  height: 100%;
  border-radius: 9999px;
  background: var(--accent);
}

.banner-count {
  align-self: flex-end;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-500);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 30;
  max-width: calc(100vw - 32px);
  padding: 13px 22px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  line-height: 19.5px;
  border-radius: 500px;
  border: 1px solid var(--accent);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { border-color: #e08a7a; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .bottom-row { flex-wrap: wrap; }
  .card-unlock { flex: 1 1 320px; width: auto; }
  .card-collection { flex: 1 1 380px; }
  .card-rewards { flex: 1 1 100%; }
}

@media (max-width: 900px) {
  .hero-row { flex-direction: column; }
  .unbox { flex: 1 1 auto; width: 100%; }

  /* Stacked, `flex: 1 0 0` becomes a height basis of 0 and `overflow: hidden`
     would clip the whole hero away, so hand the height back to the content. */
  .hero { flex: 1 0 auto; }

  /* There is no room to run the photo behind the copy and keep it legible, so it
     becomes its own band above the copy (.hero is a block: DOM order wins). */
  .hero-shoe {
    position: static;
    width: 100%;
    height: 240px;
    transform: none;
    object-position: center;
  }
  .hero-fade { display: none; }
}

@media (max-width: 720px) {
  .panel { padding: 16px; }
  .nav { flex-wrap: wrap; gap: 14px; justify-content: center; }
  .nav-links { order: 3; width: 100%; gap: 20px; justify-content: center; flex-wrap: wrap; height: auto; }
  .nav-link.is-active::after { bottom: -6px; }
  .nav-utils { gap: 14px; }

  .bottom-row { flex-direction: column; flex-wrap: nowrap; }
  .card-unlock, .card-collection, .card-rewards { flex: 1 1 auto; width: auto; }

  .hero-title { font-size: 38px; letter-spacing: 1.2px; }
  .hero-copy { padding: 28px 24px; }
  .unbox { padding: 28px 24px 36px; }
}

@media (max-width: 420px) {
  /* Same reasoning as .tiles above, now that the tiles themselves stack. */
  .tiles { flex-direction: column; }
  .tile { flex: 0 0 auto; }
  .tile img { max-width: 100%; }

  .banner { flex-wrap: wrap; }
  .banner-count { align-self: center; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}