/* Refer and earn: the React referral page rendered by Django.

   Copied from egreact so the two stay one page:
   - apps/customer/src/pages/Referral/Referral.css (navbar offset removed)
   - packages/shared/src/WalletPage/RedeemCouponSheet.css (sheet parts)
   - packages/shared/src/WalletPage/RedeemInfoSheet.css
   Change those first and copy the change here. Overrides for the Django
   page are at the end.

   Every rem is written out in px (1rem = 16px, as in the React app):
   the site navbar needs index.css, which sets html to 62.5%, and a rem
   left as it is would shrink the whole page by that much. */

/* ─── Referral Page ──────────────────────────────────────────────────── */

:root {
  --ref-brown:    #9f7866;
  --ref-brown-dk: #7a5244;
  --ref-teal:     #0d7575;
  --ref-bg:       #f5efe9;
  --ref-navbar:   70px;
}

.ref-page {
  min-height: 100vh;
  background: var(--ref-bg);
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT: mobile, single column, scroll;
              desktop (≥1024px): 2-column grid, no scroll
═══════════════════════════════════════════════════════════ */

.ref-layout {
  display: flex;
  flex-direction: column;
  /* no navbar on the Django page */
  padding-top: env(safe-area-inset-top);
}

/* ─── LEFT column ─────────────────────────────────────── */
.ref-left {
  display: flex;
  flex-direction: column;
  gap: 17.6px;
  padding: 24px 20px 16px;
}

/* ─── RIGHT column ────────────────────────────────────── */
.ref-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 20px 16px;
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP OVERRIDE  (≥ 1024px)
═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* full-viewport layout, no centering box */
  .ref-page {
    height: 100vh;
    overflow: hidden;
  }

  .ref-layout {
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
    padding-top: 0;
    gap: 0;
  }

  /* ── left: rich gradient, full height ── */
  .ref-left {
    flex: 0 0 48%;
    background: linear-gradient(150deg, #5c3727 0%, #7a5244 30%, #9f7866 65%, #c4957f 100%);
    padding: 48px 56px 40px 64px;
    gap: 24px;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }

  /* decorative circles on the gradient bg */
  .ref-left::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 70px solid rgba(255,255,255,0.05);
    bottom: -120px;
    left: -100px;
    pointer-events: none;
  }

  .ref-left::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 50px solid rgba(255,255,255,0.06);
    top: -80px;
    right: -60px;
    pointer-events: none;
  }

  /* ── right: clean white panel ── */
  .ref-right {
    flex: 1;
    background: #fff;
    padding: 48px 64px 40px 56px;
    gap: 20px;
    justify-content: center;
    overflow: hidden;
    border-left: none;
  }

}

/* ═══════════════════════════════════════════════════════════
   HERO
   – laptop: an off-white card on the brown column
   – mobile: no card; the same words open the reward band
═══════════════════════════════════════════════════════════ */
.ref-hero {
  display: none;
}

.ref-hero-eyebrow {
  font-size: 11.52px;
  letter-spacing: 0.07em;
  font-weight: 700;
  opacity: 0.78;
  text-transform: uppercase;
  margin-bottom: 9.6px;
}

.ref-hero-title {
  font-size: 25.6px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

/* On the gold band: the band's own browns, under a divider like the note's. */
.ref-reward-hero {
  position: relative;
  margin-bottom: 16px;
  padding-bottom: 14.4px;
  border-bottom: 1px solid rgba(124,83,16,0.25);
}

.ref-reward-hero .ref-hero-eyebrow {
  color: #7c5310;
  opacity: 1;
}

.ref-reward-hero .ref-hero-title {
  color: #4a2d00;
}

@media (min-width: 1024px) {
  .ref-hero {
    display: block;
    position: relative;
    overflow: hidden;
    background: #fdf9f5;
    border-radius: 18px;
    padding: 28px 32px 25.6px;
    color: var(--ref-brown-dk);
    box-shadow: 0 10px 30px rgba(60,35,20,0.25);
  }

  /* faint ring, echoing the column's circles */
  .ref-hero::after {
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 46px solid rgba(159,120,102,0.08);
    top: -70px;
    right: -60px;
    pointer-events: none;
  }

  .ref-hero-eyebrow {
    color: var(--ref-brown);
    opacity: 1;
  }

  .ref-hero-title {
    font-size: 32px;
  }

  .ref-reward-hero {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP / MOBILE COPIES
   – the banner reads in a different place on each layout (in the left
     column on desktop, between the reward and How It Works on mobile),
     so it is rendered twice and one copy is hidden. Both copies now sit
     inside a padded column, so neither carries margins of its own. The
     share block used to be doubled the same way; it now sits under the
     hero on both, so one copy in the left column serves them.
═══════════════════════════════════════════════════════════ */
.ref-winwin.ref-winwin--desktop-only { display: none; }

@media (min-width: 1024px) {
  /* the left column is wide, so the banner reads better centred in it */
  .ref-winwin.ref-winwin--desktop-only {
    display: flex;
    justify-content: center;
    text-align: center;
  }
  .ref-winwin.ref-winwin--mobile-only  { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   WIN-WIN BANNER
   – always visible in left col
═══════════════════════════════════════════════════════════ */

.ref-winwin {
  display: flex;
  align-items: center;
  gap: 13.6px;
  background: linear-gradient(135deg, var(--ref-teal) 0%, #0f9090 100%);
  border-radius: 14px;
  padding: 16px 20px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(13,117,117,0.28);
}

.ref-winwin-icon {
  font-size: 25.6px;
  flex-shrink: 0;
  line-height: 1;
}

.ref-winwin-title {
  font-size: 14.4px;
  font-weight: 700;
  margin-bottom: 3.2px;
}

.ref-winwin-desc {
  font-size: 13.12px;
  opacity: 0.9;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   EG COINS REWARD BAND
═══════════════════════════════════════════════════════════ */
.ref-reward {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1.5px solid #d9a52c;
  background: linear-gradient(135deg, #fde39a 0%, #f4c957 45%, #dfa322 100%);
  box-shadow: 0 10px 30px rgba(180,120,10,0.3);
  padding: 20.8px 21.6px 16px;
}

/* warm glow behind the coins */
.ref-reward::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 70%);
  top: -110px;
  right: -70px;
  pointer-events: none;
}

.ref-reward-main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 17.6px;
}

/* ─── coin stack ────────────────────────────────────────── */
.ref-reward-coins {
  position: relative;
  width: 76px;
  height: 64px;
  flex-shrink: 0;
}

.ref-coin {
  position: absolute;
  border-radius: 50%;
  /* struck darker than the band, or gold on gold reads as one flat shape */
  background: linear-gradient(160deg, #ffd977 0%, #c07f06 48%, #7d5203 100%);
  color: #3d2400;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow:
    0 3px 10px rgba(90,56,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

.ref-coin--back  { width: 30px; height: 30px; left: 0;    top: 2px;  opacity: 0.9; }
.ref-coin--mid   { width: 34px; height: 34px; left: 6px;  top: 28px; opacity: 0.95; }
.ref-coin--front {
  width: 54px;
  height: 54px;
  left: 20px;
  top: 5px;
  font-size: 16px;
  letter-spacing: 0.02em;
  border-width: 3px;
  border-color: #fffaf0;
  box-shadow:
    0 5px 16px rgba(90,56,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

/* ─── copy ──────────────────────────────────────────────── */
.ref-reward-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ref-reward-eyebrow {
  font-size: 11.2px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7c5310;
}

.ref-reward-amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6.4px;
  margin: 3.2px 0 2.4px;
}

.ref-reward-number {
  font-size: 38.4px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #4a2d00;
}

.ref-reward-per {
  font-size: 11.52px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7c5310;
}

/* The eligibility floor, under the headline figure it qualifies. Sits on
   the gold card, so it borrows the same brown the rest of the card uses
   rather than a grey that would disappear into it. */
.ref-reward-note {
  position: relative;
  margin: 11.2px 0 0;
  padding-top: 9.6px;
  border-top: 1px solid rgba(124,83,16,0.25);
  font-size: 13.12px;
  font-weight: 600;
  color: #7c5310;
}

/* What the same coins fetch off the platform, on the line under the one
   that prices them on it. Sized to the label above rather than shrinking
   away from it: it is a second rate on the same figure, not a footnote. */
.ref-reward-alt {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6.4px;
  margin-top: 13.6px;
  font-size: 13.12px;
  font-weight: 700;
  color: #7c5310;
}

/* On a white pill: the logo's own slate and orange are made for a light
   background and go muddy straight on the gold. */
.ref-reward-alt-logo {
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.85);
}

.ref-reward-alt-logo img {
  display: block;
  height: 13.12px;
  width: auto;
}

/* Under the band that quotes the reward, in the wallet's own words. A
   quiet link rather than a button: it explains the figure above, it does
   not compete with sharing the code. */
.ref-redeem-info-link {
  align-self: center;
  margin: -4px 0 0;
  padding: 4px 8px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13.6px;
  font-weight: 700;
  text-decoration: underline;
  color: var(--ref-teal);
  cursor: pointer;
}

/* on the wide white panel the band gets room, so the statement is centred */
@media (min-width: 1024px) {
  .ref-reward {
    padding: 25.6px 28px 18.4px;
  }

  .ref-reward-main {
    justify-content: center;
  }

  .ref-reward-number {
    font-size: 44.8px;
  }
}

/* ═══════════════════════════════════════════════════════════
   RIGHT COLUMN: section wrapper
═══════════════════════════════════════════════════════════ */
.ref-section {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 3px 16px rgba(0,0,0,0.06);
  padding: 20px 20px;
}

.ref-section-title {
  font-size: 16.8px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 16px;
}

/* ─── Steps ─────────────────────────────────────────────── */
.ref-steps {
  display: flex;
  flex-direction: column;
}

.ref-step {
  display: flex;
  gap: 14.4px;
}

.ref-step-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.ref-step-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ref-brown);
  color: #fff;
  font-size: 14.08px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(159,120,102,0.35);
}

.ref-step-dot--final {
  background: linear-gradient(135deg, var(--ref-brown), #c4957f);
  font-size: 16px;
}

.ref-step-line {
  width: 2px;
  flex: 1;
  background: linear-gradient(to bottom, #d9c4bc 0%, transparent 100%);
  margin: 3px 0;
  min-height: 22px;
}

.ref-step-content {
  padding-bottom: 17.6px;
  flex: 1;
}

.ref-step--last .ref-step-content {
  padding-bottom: 0;
}

.ref-step-heading {
  display: flex;
  align-items: center;
  gap: 7.2px;
  margin-bottom: 2.88px;
}

.ref-step-icon {
  font-size: 18.4px;
  line-height: 1;
  flex-shrink: 0;
}

.ref-step-title {
  font-size: 13.76px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: left;
}

.ref-step-desc {
  font-size: 13.12px;
  color: #666;
  line-height: 1.5;
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE TWEAKS  (≤ 480px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .ref-hero-title { font-size: 22.4px; }

  .ref-reward { padding: 18.4px 17.6px 14.4px; }

  .ref-reward-main { gap: 13.6px; }

  .ref-reward-coins { width: 64px; height: 56px; }

  .ref-coin--back  { width: 26px; height: 26px; top: 2px; }
  .ref-coin--mid   { width: 30px; height: 30px; left: 5px; top: 24px; }
  .ref-coin--front { width: 46px; height: 46px; left: 17px; font-size: 13.6px; }

  .ref-reward-number { font-size: 32px; }
}


/* ═══════════════════════════════════════════════════════════
   REWARD SLABS
   – the band is one number on the card, the rest sits behind
     the info dot so the page stays a page, not a rate card
═══════════════════════════════════════════════════════════ */

.ref-reward-info {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(90,56,0,0.4);
  background: rgba(255,255,255,0.7);
  color: #5f4208;
  font-size: 13.6px;
  font-weight: 800;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.ref-reward-info:hover {
  background: #fff;
}

.ref-slabs-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(52,32,20,0.55);
}

.ref-slabs {
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--ref-bg);
  border-radius: 20px 20px 0 0;
  padding: 18.4px 20px 24px;
  box-shadow: 0 -10px 30px rgba(60,35,20,0.25);
  /* stated rather than inherited: the sheet renders at the end of the page
     and must not pick up centring from whatever encloses it */
  text-align: left;
}

.ref-slabs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.ref-slabs-eyebrow {
  font-size: 10.88px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ref-brown);
  margin-bottom: 2.4px;
}

.ref-slabs-title {
  font-size: 16.8px;
  font-weight: 800;
  color: var(--ref-brown-dk);
  margin: 0;
}

.ref-slabs-close {
  border: none;
  background: none;
  font-size: 25.6px;
  line-height: 1;
  color: var(--ref-brown);
  padding: 0 2.4px;
  cursor: pointer;
}

/* ─── rate chip ─────────────────────────────────────────────
   Lifted from the wallet card's corner chip so the coin's worth
   is stated the same way wherever it appears. Recoloured for the
   sheet's cream ground: the wallet's translucent white is built
   to sit on a dark card.
──────────────────────────────────────────────────────────── */
.ref-rate-chip {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  margin-bottom: 14.4px;
  padding: 4.48px 9.6px 4.48px 5.12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(122,82,68,0.18);
  color: var(--ref-brown-dk);
  font-size: 10.88px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(122,82,68,0.12);
}

.ref-rate-chip__coin {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f8d040, #c98a0a);
  color: #5a3800;
  font-size: 7px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 1px 4px rgba(180,120,0,0.45);
}

.ref-rate-chip__eq {
  opacity: 0.55;
  font-weight: 700;
}

.ref-rate-chip__rupee {
  color: #a5690a;
}

.ref-slabs-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ref-slab {
  background: #fff;
  border-radius: 14px;
  padding: 13.6px 15.2px;
  box-shadow: 0 4px 14px rgba(122,82,68,0.1);
}

.ref-slab-band {
  font-size: 13.12px;
  font-weight: 800;
  color: var(--ref-brown-dk);
  padding-bottom: 8.8px;
  margin-bottom: 9.6px;
  border-bottom: 1px dashed rgba(122,82,68,0.25);
}

.ref-slab-split {
  display: flex;
  gap: 10.4px;
}

.ref-slab-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3.2px;
  border-radius: 10px;
  padding: 8.8px 10.4px;
}

/* your half wears the coin gold, your friend's the page teal, so the two
   sides are told apart before either is read */
.ref-slab-half--you {
  background: linear-gradient(135deg, #fdf0c8 0%, #f7e2a2 100%);
}

.ref-slab-half--friend {
  background: rgba(13,117,117,0.08);
}

.ref-slab-who {
  font-size: 10.24px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.75;
}

.ref-slab-half--you .ref-slab-who { color: #7c5310; }
.ref-slab-half--friend .ref-slab-who { color: var(--ref-teal); }

.ref-slab-value {
  font-size: 13.44px;
  font-weight: 700;
  line-height: 1.35;
}

.ref-slab-half--you .ref-slab-value { color: #5f4208; }
.ref-slab-half--friend .ref-slab-value { color: #0a5c5c; }

.ref-slabs-foot {
  margin: 17.6px 0 0;
  font-size: 11.52px;
  line-height: 1.55;
  color: var(--ref-brown);
}

/* on the wide layout it stops being a sheet and becomes a card */
@media (min-width: 1024px) {
  .ref-slabs-backdrop {
    align-items: center;
    padding: 24px;
  }

  .ref-slabs {
    max-width: 496px;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(60,35,20,0.3);
  }
}

/* ═══════════════════════════════════════════════════════════
   SHARE CODE
   – the code is the referrer's own number, so the block only
     appears when the page knows who is looking
═══════════════════════════════════════════════════════════ */

.ref-share {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13.6px;
  /* the platform brown, deepened at one end so the card has some depth;
     the light border keeps it apart from the brown column at laptop width */
  background: linear-gradient(135deg, var(--ref-brown-dk) 0%, var(--ref-brown) 60%, #b48a76 100%);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 16px;
  padding: 16px 17.6px;
  box-shadow: 0 10px 26px rgba(92,55,39,0.35);
}

/* A slow sheen across the card, so the eye lands on the code. */
.ref-share::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: ref-share-sheen 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ref-share-sheen {
  0%, 55% { left: -60%; }
  100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .ref-share::after { display: none; }
}

/* above the sheen */
.ref-share-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6.4px;
  min-width: 0;
}

/* A message in place of the code has no buttons beside it, so it takes
   the whole card and sits in the middle. */
.ref-share-copy--note {
  flex: 1;
  align-items: center;
  text-align: center;
}

.ref-share-label {
  font-size: 10.56px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

/* Set like a coupon: a dashed tear-off chip in the reward band's gold. */
.ref-share-code {
  align-self: flex-start;
  max-width: 100%;
  padding: 4.8px 12px;
  border: 1.5px dashed rgba(255,231,163,0.75);
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  font-size: 20.8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.2;
  color: #ffe7a3;
  text-shadow: 0 1px 2px rgba(60,35,20,0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Logged out the code is replaced by a sentence, so it wraps instead of
   being clipped the way the single line code is. */
.ref-share-prompt {
  font-size: 13.6px;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}

.ref-share-actions {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Empty beside a message, and would otherwise still take the gap and
   pull the centred text off centre. */
.ref-share-actions:empty {
  display: none;
}

.ref-share-btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 41.6px;
  height: 41.6px;
  border: none;
  border-radius: 999px;
  background: var(--ref-teal);
  color: #fff;
  font-size: 18.4px;
  /* light ring so the teal holds its own on the brown card */
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 6px 14px rgba(13,117,117,0.4);
  cursor: pointer;
}

.ref-share-btn:hover {
  background: #0f8585;
}

.ref-share-btn:active {
  transform: translateY(1px);
}

/* Carries a word rather than an icon, so it sheds the fixed square. */
.ref-share-btn--login {
  width: auto;
  padding: 0 17.6px;
  font-size: 13.6px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* The copy sits beside the share, so it stays the quieter of the two. */
.ref-share-btn--ghost {
  background: rgba(255,255,255,0.18);
  color: #fff;
  box-shadow: none;
}

.ref-share-btn--ghost:hover {
  background: rgba(255,255,255,0.28);
}

/* ─── share card on phones ─────────────────────────────────
   The coupon and two buttons share one row, so on a phone the
   code and buttons step down a size to leave the code room. On
   the narrowest screens the buttons drop under the code instead
   of clipping it.
──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ref-share {
    gap: 9.6px;
    padding: 13.6px 14.4px;
    border-radius: 14px;
  }

  .ref-share-code {
    padding: 4px 9.6px;
    font-size: 17.6px;
    letter-spacing: 0.08em;
  }

  .ref-share-actions {
    gap: 6.4px;
  }

  /* the Login button keeps its own width; only the round icons shrink */
  .ref-share-btn:not(.ref-share-btn--login) {
    width: 37.6px;
    height: 37.6px;
    font-size: 16.8px;
  }
}

@media (max-width: 340px) {
  .ref-share {
    flex-wrap: wrap;
  }

  .ref-share-copy {
    flex: 1 1 100%;
  }

  .ref-share-actions {
    width: 100%;
    justify-content: flex-end;
  }
}


/* ─── RedeemCouponSheet.css (sheet parts) ─── */

.rcs-scrim {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(10, 34, 34, 0.55);
  backdrop-filter: blur(3px);
  animation: rcs-fade-in 0.2s ease-out both;
}

.rcs-scrim.closing {
  animation: rcs-fade-out 0.2s ease-in both;
}

.rcs-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  background: #fbf7f4;
  border-radius: 26px 26px 0 0;
  padding: 10.4px 22.4px 25.6px;
  box-shadow: 0 -12px 44px rgba(10, 34, 34, 0.32);
  animation: rcs-slide-up 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rcs-sheet.closing {
  animation: rcs-slide-down 0.2s ease-in both;
}

.rcs-grabber {
  display: block;
  width: 42px;
  height: 4px;
  margin: 0 auto 18.4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
}

.rcs-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.rcs-title {
  margin: 0 0 5.6px;
  font-size: 21.12px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -0.01em;
}

.rcs-primary {
  width: 100%;
  margin-top: 21.6px;
  padding: 15.2px 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(175deg, #2c9090 0%, #1a5f5f 100%);
  color: #fff;
  font-family: inherit;
  font-size: 15.68px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8.8px;
  box-shadow: 0 6px 20px rgba(26, 95, 95, 0.28);
  transition: transform 0.12s, box-shadow 0.15s, opacity 0.15s;
}

.rcs-primary:hover:not(:disabled) {
  box-shadow: 0 8px 26px rgba(26, 95, 95, 0.36);
}

.rcs-primary:active:not(:disabled) {
  transform: translateY(1px);
}

@keyframes rcs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rcs-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes rcs-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes rcs-slide-down {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* Desktop: a centred dialog reads better than a sheet stuck to the bottom. */
@media (min-width: 601px) {
  .rcs-scrim {
    align-items: center;
  }

  .rcs-sheet {
    border-radius: 22px;
    padding: 24px 30.4px 30.4px;
    animation-name: rcs-fade-in;
  }

  .rcs-sheet.closing {
    animation-name: rcs-fade-out;
  }

  .rcs-grabber {
    display: none;
  }
}


/* ─── RedeemInfoSheet.css ─── */

/* Built on the coupon sheet (RedeemCouponSheet.css) for the scrim, sheet,
   title and button; only the redeem options live here.

   Sized for the phone first, as the coupon sheet is, and stepped up at
   601px. On a narrow screen three columns share the row -- icon, name and
   rate -- so the icon column and the type are tighter here than they are
   on a laptop, or the name is squeezed into two lines to make room for
   space that is doing nothing. */

/* Its own size rather than the coupon sheet's .rcs-title: this heading is
   half again as long as 'Redeem a Coupon', so at that size it fills a
   narrow screen and reads as the loudest thing in a sheet whose point is
   the two rates underneath. Back to the shared size where there is room. */
.ris-heading {
  font-size: 16.8px;
}

.ris-balance {
  display: inline-flex;
  align-items: center;
  gap: 6.4px;
  margin: 2.4px 0 17.6px;
  padding: 4.8px 12px 4.8px 5.6px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(201, 138, 10, 0.3);
  font-size: 12.48px;
  font-weight: 700;
  color: #5a3800;
}

.ris-balance-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f8d040, #c98a0a);
  color: #5a3800;
  font-size: 8.8px;
  font-weight: 900;
}

.ris-options {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ris-option {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8.8px;
  padding: 12.8px 13.6px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-align: left;
}

.ris-option--best {
  border: 1.5px solid #8ed3ce;
  background: linear-gradient(135deg, #f3fbfa, #e4f4f2);
}

.ris-best-tag {
  position: absolute;
  top: -9.6px;
  right: 16px;
  padding: 2.4px 8.8px;
  border-radius: 999px;
  background: linear-gradient(175deg, #2c9090 0%, #1a5f5f 100%);
  color: #fff;
  font-size: 9.6px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ris-icon-slot {
  flex: none;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ris-icon-coin {
  width: 33.6px;
  height: 33.6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #f8d040, #c98a0a);
  color: #5a3800;
  font-size: 10.88px;
  font-weight: 900;
}

/* The logo is wide, so it sits on a tile rather than in a circle. */
.ris-icon-logo {
  box-sizing: border-box;
  width: 48px;
  height: 33.6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6.4px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.ris-icon-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.ris-text {
  flex: 1;
  min-width: 0;
}

.ris-option-title,
.ris-note,
.ris-rate-value,
.ris-rate-worth {
  margin: 0;
}

.ris-option-title {
  font-size: 13.6px;
  font-weight: 800;
  color: #1a1a2e;
}

.ris-note {
  margin-top: 2.4px;
  font-size: 11.36px;
  line-height: 1.4;
  color: #718096;
}

/* Names the coin sources the starred voucher card takes. Sits under
   both cards, in the note's grey, so it reads as small print. */
.ris-footnote {
  width: 100%;
  margin: 9.6px 0 0;
  font-size: 11.36px;
  line-height: 1.4;
  color: #718096;
}

/* What to do about it is a separate instruction from what the option is,
   so it starts its own line instead of running on from the description. */
.ris-note-line {
  display: block;
  margin-top: 3.2px;
}

/* The address is the one thing in the note worth acting on, and long
   enough to need breaking on a narrow phone. */
.ris-note-link {
  color: #12615f;
  font-weight: 700;
  text-decoration: underline;
  word-break: break-word;
}

.ris-rate {
  flex: none;
  text-align: right;
}

.ris-rate-value {
  font-size: 14.08px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  color: #1a1a2e;
}

.ris-option--best .ris-rate-value {
  color: #12615f;
}

.ris-rate-worth {
  margin-top: 3.2px;
  font-size: 11.36px;
  font-weight: 700;
  color: #5a3800;
}

/* Laptop: the row has width to spare, so the icon column opens back up and
   the type goes back to the size the wallet's other cards use. */
@media (min-width: 601px) {
  .ris-heading {
    font-size: 21.12px;
  }

  .ris-balance {
    gap: 7.2px;
    margin: 2.4px 0 20px;
    padding: 5.6px 13.6px 5.6px 6.4px;
    font-size: 13.6px;
  }

  .ris-option {
    gap: 13.6px;
    padding: 16px;
  }

  .ris-best-tag {
    font-size: 10.4px;
  }

  .ris-icon-slot {
    width: 67.2px;
  }

  .ris-icon-coin {
    width: 41.6px;
    height: 41.6px;
    font-size: 12.8px;
  }

  .ris-icon-logo {
    width: 67.2px;
    height: 41.6px;
  }

  .ris-option-title {
    font-size: 15.2px;
  }

  .ris-note {
    margin-top: 3.2px;
    font-size: 12.48px;
  }

  .ris-rate-value {
    font-size: 16px;
  }

  .ris-rate-worth {
    margin-top: 4px;
    font-size: 12.48px;
  }
}


/* ═══════════════════════════════════════════════════════════
   DJANGO PAGE OVERRIDES
═══════════════════════════════════════════════════════════ */

/* What Chakra's CSS reset and global styles put on the React page, which
   change how Montserrat renders as much as the font itself does. */
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  color: #1a202c;
  line-height: 1.5;
  font-feature-settings: "kern";
}

:where(.ref-page *, .ref-page *::before, .ref-page *::after) {
  border-width: 0;
  border-style: solid;
  box-sizing: border-box;
  word-wrap: break-word;
}

/* Rules from other React pages that the customer app's single CSS bundle
   also applies to the referral page, so the page looks as it does there:
   .App in GuestUpload.css, h2 in FaceSearch.css, h3 in DownloadZip.css. */
.ref-page {
  text-align: center;
  /* React's 16px base, which index.css's 62.5% html would otherwise
     shrink to 10px for every inherited and em size on the page. */
  font-size: 16px;
}

/* The share card's words sit at the start, as on the React page. */
.ref-share-copy {
  text-align: left;
}

.ref-page h2 {
  font-size: 1.5em !important;
}

.ref-page h3 {
  font-size: 1.17em !important;
  font-weight: bold !important;
}

/* The site navbar. It is fixed, transparent and white-texted, made for a
   dark hero, so as on the FAQ page it gets a solid background and stays
   light when scrolled. The page starts below it: --site-header is the
   navbar's own height, the logo plus its margins from #logo in
   index.css. */
:root {
  --site-header: calc(clamp(44px, 4vw, 56px) + clamp(14px, 1.6vw, 26px)
                      + clamp(10px, 1.2vw, 18px));
}

header,
header.scrolled {
  background-color: #000;
}

.topnav a.scrolled,
.dropdown .dropbtn.scrolled {
  color: #fff;
}

.book__btn.scrolled {
  background-color: #9f7a66 !important;
  color: #fff !important;
}

/* The React page fills the window (min-height and, on desktop, height of
   100vh); here it fills what the navbar leaves, or the navbar's height
   is added on top and the page scrolls onto empty space. */
.ref-page {
  box-sizing: content-box;
  padding-top: var(--site-header);
  min-height: calc(100vh - var(--site-header));
}

@media (min-width: 1024px) {
  /* Only the React layout fills the screen. The page itself grows, so
     the FAQ below the layout can be scrolled to. */
  .ref-page {
    height: auto;
    overflow: visible;
  }

  .ref-layout {
    height: calc(100vh - var(--site-header));
  }

  /* With the navbar taking its share of a short laptop screen, React's
     fixed-height columns would squeeze the cards and clip the reward
     card's voucher and floor lines. The cards keep their size and a
     column scrolls only when they do not fit; "safe" keeps the top of an
     overflowing column reachable instead of centring it out of view. */
  .ref-left > *,
  .ref-right > * {
    flex-shrink: 0;
  }

  /* Only the right column: its cards are the tall ones, and the left
     column's decorative circles hang past its edges, which would make it
     scroll for nothing. */
  .ref-right {
    overflow-y: auto;
    justify-content: safe center;
  }
}

/* Short laptop screens lose the navbar's height on top of that, so the
   right column's padding and gaps tighten to keep its cards on screen. */
@media (min-width: 1024px) and (max-height: 820px) {
  .ref-right {
    padding-top: 24px;
    padding-bottom: 24px;
    gap: 12px;
  }

  .ref-section {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .ref-section-title {
    margin-bottom: 12px;
  }
}

/* The FAQ under the React layout, built from its .ref-section card so it
   reads as part of the same page. */
.ref-faq-wrap {
  padding: 8px 20px 32px;
}

.ref-faq {
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}

.ref-faq .ref-section-title {
  text-align: center;
}

.ref-faq-item {
  border-top: 1px solid #efe6df;
}

.ref-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}

.ref-faq-question::-webkit-details-marker {
  display: none;
}

/* The step dots' brown, as a plus that turns into a cross when open */
.ref-faq-question::after {
  content: '+';
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--ref-brown);
  transition: transform 0.2s;
}

.ref-faq-item[open] .ref-faq-question::after {
  transform: rotate(45deg);
}

.ref-page .ref-faq-question h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a1a1a;
}

.ref-faq-answer {
  padding-bottom: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}

@media (min-width: 1024px) {
  .ref-faq-wrap {
    padding: 48px 64px 56px;
  }

  .ref-page .ref-faq-question h3 {
    font-size: 15px !important;
  }

  .ref-faq-answer {
    font-size: 14px;
  }
}

/* The React app's own reset (apps/customer/src/App.css), which puts
   Montserrat on every element and zeroes every margin and padding. Under
   :where so it carries no more weight than React's `*`, and every class
   rule above still wins as it does there. */
:where(.ref-page, .ref-page *) {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
}

/* The share button is a link here, not a button. */
a.ref-share-btn,
a.ref-share-btn:hover,
a.ref-share-btn:focus {
  color: #fff;
  text-decoration: none;
}

/* The sheets set display:flex, which would beat the hidden attribute. */
.ref-slabs-backdrop[hidden],
.rcs-scrim[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .rcs-scrim,
  .rcs-sheet {
    animation: none;
  }
}