/* ======================================================================
   style.css  -  420 video packs  -  mobile-first dark theme
   ======================================================================

   TABLE OF CONTENTS
   1. Base ............ reset, page background, links
   2. Layout .......... containers, hero, cards, steps
   3. Navbar
        3.1  Bar and brand
        3.2  Icon buttons and badge
        3.3  Guest buttons and hamburger
        3.4  Profile button and dropdown
        3.5  Menu links (phone drawer)
        3.6  Backdrops and scroll lock
        3.7  Notifications (phone bottom sheet)
        3.8  Larger screens (480 / 640 / 900px)
   4. Forms ........... fields, password toggle, auth pages
   5. Referral ........ share box, progress bar, share buttons
   6. Packs ........... pack cards, latest-purchase banner
   7. Orders .......... my-orders.php, order confirmation
   8. Popups .......... login / sign-up <dialog> boxes
   9. Admin ........... admin.php (more admin rules: ui-system.css)
   10. Reduced motion

   RULES OF THIS FILE
   - Colours, fonts, spacing: use the variables from ui-system.css (:root).
   - Phone styles first. @media (min-width: ...) only ADDS for bigger screens.
   - One component = one block. Names follow BLOCK__element--modifier.
   - ui-system.css loads AFTER this file, so it wins when both style the same thing.
   ====================================================================== */

/* ======================================================================
   1. BASE
   reset, page background, links
   ====================================================================== */

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

/* `hidden` must always win over component display rules (the notification
   sheet is display:flex). Also repeated in ui-system.css on purpose. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* one soft glow behind the top of the page, nothing else */
  background:
    radial-gradient(90% 420px at 50% -80px, rgba(255, 79, 155, .12), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}

/* Overflow guard: no element may make the page wider than the phone screen.
   When that happens the browser widens the layout, and fixed things (like the
   notification sheet) end up cut off. `clip` is used where supported because,
   unlike `hidden`, it does not break position: sticky (the navbar). */
html, body { max-width: 100%; }
body { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

img, svg { max-width: 100%; }
h1, h2, h3, p { overflow-wrap: break-word; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }

body.center-page { display: flex; flex-direction: column; padding: 16px; }

/* ======================================================================
   2. LAYOUT
   containers, hero, cards, steps
   ====================================================================== */

.levels, .dashboard {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 16px 16px 72px;
}
.dashboard { max-width: 720px; }

.levels__head, .dashboard__head { margin: 8px 0 20px; }
.levels__head .auth__rule, .dashboard__head .auth__rule, .auth__head .auth__rule { display: none; }

.dashboard__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 6.5vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.015em;
}
.dashboard__subtitle { margin: 0; max-width: 52ch; color: var(--text-muted); font-size: 1rem; line-height: 1.55; }
.dashboard__hint { margin: 6px 0 0; color: var(--text-muted); font-size: var(--fs-md); line-height: 1.5; }

.section-title {
  margin: 36px 0 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -.01em;
}
.section-lead { margin: 0 0 16px; color: var(--text-muted); font-size: var(--fs-md); }

/* Hero (home page) */
.hero { padding: 20px 0 4px; }
.hero__title {
  max-width: 17ch;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 9vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.02em;
}
.hero__lead { max-width: 46ch; margin: 0 0 22px; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.55; }
.hero__actions { display: grid; gap: 10px; }
.hero__card { margin: 16px 0 0; }
.hero__goal { margin: 0 0 14px; font-size: 1.125rem; line-height: 1.4; }
.hero__goal strong { color: var(--gold); font-family: var(--font-display); font-size: 1.5rem; }

/* Cards */
.card {
  margin: 0 0 16px;
  padding: 20px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.card__label { margin: 0 0 14px; font-size: 1.0625rem; font-weight: 600; color: var(--text); }

/* Numbered steps - only used where the content really is a sequence */
.steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; color: var(--text-muted); font-size: var(--fs-md); line-height: 1.5; counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  font-weight: 700; font-size: var(--fs-sm);
}
.steps strong { color: var(--text); }

/* ======================================================================
   3. NAVBAR
   header.navbar and the notification sheet. Markup: nav.php
   ====================================================================== */

/* ---- 3.1 Bar and brand ---- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--nav-h);
  padding: 0 max(16px, calc((100% - 1048px) / 2));
}
/* The blurred bar lives on a pseudo-element so the phone drawer
   (position: fixed) is not trapped inside a backdrop-filter parent. */
.navbar::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(15, 11, 20, .88);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.navbar__brand {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  text-decoration: none;
}
.navbar__brand:hover { color: var(--text); }
.navbar__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* Every tappable control in the bar: no grey flash, no double-tap delay */
.navbar__icon-link, .navbar__menu-button, .navbar__profile-btn,
.navbar__notification-close, .navbar__drawer-close {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---- 3.2 Icon buttons and badge ---- */
.navbar__icon-link {
  position: relative;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.navbar__icon-link:hover { background: var(--surface-3); color: var(--text); }
.navbar__icon-link svg { width: 22px; height: 22px; pointer-events: none; } /* taps always land on the button itself */
.navbar__actions > .navbar__icon-link[href="plan.php"] { display: none; }   /* phones use the drawer instead */

.navbar__notification-badge {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--primary); color: var(--on-primary);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  pointer-events: none;
}

/* ---- 3.3 Guest buttons and hamburger ---- */
.navbar__profile { position: relative; display: flex; align-items: center; gap: 6px; }
/* .btn.xxx: ui-system.css loads after this file, so the extra class is needed to win */
.btn.navbar__login, .btn.navbar__logout { width: auto; min-height: 40px; padding: 0 14px; font-size: var(--fs-md); }
.btn.navbar__login { --btn-bg: transparent; --btn-bg-hover: var(--surface-3); --btn-bg-press: var(--surface-2); --btn-fg: var(--text); --btn-bd: var(--border-strong); }
.btn.navbar__logout { display: none; }

.navbar__menu-button {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
}
.navbar__menu-button:hover { background: var(--surface-3); }
.navbar__menu-button span { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--text); pointer-events: none; }

/* ---- 3.4 Profile button and dropdown (logged-in) ---- */
.navbar__profile-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface-1); color: var(--text); font: inherit;
  cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.navbar__profile-btn:hover, .navbar__profile-btn[aria-expanded="true"] { border-color: var(--primary); background: var(--primary-soft); }
.navbar__avatar, .navbar__drawer-avatar {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
}
.navbar__username, .navbar__chevron { display: none; }               /* both appear from 640px */
.navbar__chevron { width: 16px; height: 16px; color: var(--text-muted); transition: transform .2s var(--ease); }
.navbar__profile-btn[aria-expanded="true"] .navbar__chevron { transform: rotate(180deg); }

.navbar__dropdown {
  display: none;
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  flex-direction: column;
  width: 220px; padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.navbar__dropdown--open { display: flex; }
.navbar__dropdown-header { padding: 10px 12px 4px; }
.navbar__dropdown-name { font-weight: 600; }
.navbar__dropdown-item { margin: 0; padding: 0 12px 10px; color: var(--text-muted); font-size: var(--fs-sm); border-bottom: 1px solid var(--border); }
.navbar__dropdown-item strong { color: var(--text); }
.navbar__dropdown-logout-form { margin: 0; }
.navbar__dropdown a.navbar__dropdown-logout, button.navbar__dropdown-logout {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--text); font: inherit; font-size: var(--fs-md); text-align: left; text-decoration: none; cursor: pointer;
}
.navbar__dropdown a.navbar__dropdown-logout:hover, button.navbar__dropdown-logout:hover { background: var(--surface-3); }

/* ---- 3.5 Menu links: phone = slide-in drawer (desktop row is in 3.8) ---- */
.navbar__links {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; flex-direction: column; gap: 4px;
  width: min(320px, 86vw);
  padding: 0 12px env(safe-area-inset-bottom, 0px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .25s var(--ease), visibility 0s linear .25s;
}
.navbar--menu-open .navbar__links { transform: none; visibility: visible; transition: transform .25s var(--ease); }

.navbar__drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); padding-left: 4px; }
.navbar__drawer-branding { display: flex; align-items: baseline; gap: 10px; }
.navbar__drawer-brand { color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; text-decoration: none; }
.navbar__drawer-brand span { display: none; }
.navbar__drawer-label { color: var(--text-muted); font-size: var(--fs-sm); }
.navbar__drawer-close {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 1.75rem; line-height: 1; cursor: pointer;
}
.navbar__drawer-close:hover { background: var(--surface-3); color: var(--text); }

.navbar__links > a {
  display: flex; align-items: center;
  min-height: 52px; padding: 0 14px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 1.0625rem; font-weight: 500; text-decoration: none;
}
.navbar__links > a:hover { background: var(--surface-2); color: var(--text); }
.navbar__links > a[aria-current="page"] { background: var(--primary-soft); color: var(--text); box-shadow: inset 3px 0 var(--primary); }

.navbar__drawer-footer { display: grid; gap: 10px; margin-top: auto; padding: 16px 0; border-top: 1px solid var(--border); }
.navbar__drawer-user { display: flex; align-items: center; gap: 12px; }
.navbar__drawer-user strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.navbar__drawer-tier { margin-left: auto; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }
.navbar__drawer-invites {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text); text-decoration: none;
}
.navbar__drawer-invites:hover { border-color: var(--primary); color: var(--text); }
.navbar__drawer-people { width: 20px; height: 20px; color: var(--primary); }
.navbar__drawer-logout-form { margin: 0; }
.navbar__drawer-logout {
  width: 100%; min-height: 48px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: transparent; color: var(--text-muted); font: inherit; font-weight: 600; cursor: pointer;
}
.navbar__drawer-logout:hover { color: var(--text); border-color: var(--border-strong); }
.navbar__drawer-guest { display: grid; gap: 10px; }
.navbar__drawer-guest a {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; border-radius: var(--radius-md);
  font-weight: 600; text-decoration: none;
}
.navbar__drawer-guest a:first-child { background: var(--primary); color: var(--on-primary); }
.navbar__drawer-guest a:last-child { border: 1px solid var(--border-strong); color: var(--text); }

/* ---- 3.6 Backdrops and scroll lock ----
   z-index ladder: bar 50 -> drawer 70 (inside the bar) -> notification backdrop 75 -> notification sheet 80 */
.navbar__menu-backdrop, .navbar__notification-backdrop {
  position: fixed; inset: 0; z-index: 40;
  border: 0; padding: 0; background: rgba(6, 4, 10, .66);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.navbar__notification-backdrop { z-index: 75; }

/* nav.php puts .is-scroll-locked on <html> AND <body>. Locking both is what
   works on iPhones (body alone is ignored by some iOS versions). */
html.is-scroll-locked, html.is-scroll-locked body { overflow: hidden; overscroll-behavior: none; }

/* ---- 3.7 Notifications: phone = bottom sheet (desktop popover is in 3.8) ---- */
.navbar__notification-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; flex-direction: column;
  width: 100%; max-height: 82vh; max-height: 82dvh;
  overflow: hidden;                      /* only the list scrolls, never the whole sheet */
  overscroll-behavior: contain;
  background: var(--surface-1);
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
}
.navbar__notification-head { display: flex; align-items: center; gap: 12px; flex: none; padding: 16px 12px 12px 20px; border-bottom: 1px solid var(--border); }
.navbar__notification-head > div { flex: 1; min-width: 0; }
.navbar__notification-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.navbar__notification-head p { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.navbar__notification-pending { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--warning-soft); color: var(--warning); font-size: var(--fs-xs); font-weight: 600; }
.navbar__notification-close {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.navbar__notification-close:hover { background: var(--surface-3); color: var(--text); }
.navbar__notification-empty { margin: 0; padding: 32px 20px; color: var(--text-muted); text-align: center; }

.navbar__notification-list { display: grid; align-content: start; gap: 8px; flex: 1 1 auto; min-height: 0; padding: 12px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.navbar__notification-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; align-items: start;
  padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text); text-decoration: none;
}
.navbar__notification-item:hover { border-color: var(--border-strong); background: var(--surface-3); color: var(--text); }
.navbar__purchase-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary); }
.navbar__purchase-icon svg { width: 20px; height: 20px; }
.navbar__notification-copy { font-size: var(--fs-sm); line-height: 1.5; }
.navbar__notification-copy > span { color: var(--text-muted); }
.navbar__notification-copy b { color: var(--success); font-variant-numeric: tabular-nums; }
.navbar__notification-item time { grid-column: 2; color: var(--text-muted); font-size: var(--fs-xs); }
.navbar__notification-status { margin-left: 8px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); font-size: var(--fs-xs); font-weight: 600; }
.navbar__notification-status.status-awaiting_payment { background: var(--warning-soft); color: var(--warning); }
.navbar__notification-status.status-canceled { background: rgba(169, 159, 184, .14); color: var(--text-muted); }

.navbar__notification-footer { display: grid; gap: 8px; flex: none; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); text-align: center; }
.navbar__notification-footer a {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  border-radius: var(--radius-md); background: var(--primary); color: var(--on-primary); font-weight: 600; text-decoration: none;
}
.navbar__notification-footer a:hover { background: var(--primary-hover); color: var(--on-primary); }
.navbar__notification-footer > span { color: var(--text-muted); font-size: var(--fs-xs); }

/* ---- 3.8 Larger screens ---- */
@media (min-width: 480px) {
  .btn.navbar__logout { display: inline-flex; }
}
@media (min-width: 640px) {
  .navbar__username { display: inline; padding-right: 2px; font-size: var(--fs-md); font-weight: 500; }
  .navbar__chevron { display: block; margin-right: 8px; }
  .navbar__profile-btn { padding-right: 6px; }
}
/* Menu links become an inline row, notifications become a popover under the bell */
@media (min-width: 900px) {
  .navbar { gap: 20px; }
  .navbar__menu-button, .navbar__menu-backdrop, .navbar__drawer-head, .navbar__drawer-footer { display: none; }
  .navbar__links {
    position: static; z-index: auto;
    flex-direction: row; align-items: center; gap: 2px;
    width: auto; padding: 0; overflow: visible;
    background: none; border: 0; box-shadow: none;
    transform: none; visibility: visible; transition: none;
  }
  .navbar__links > a { min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill); font-size: var(--fs-md); }
  .navbar__links > a[aria-current="page"] { box-shadow: none; background: var(--surface-3); }
  .navbar__actions > .navbar__icon-link[href="plan.php"] { display: inline-grid; }
  .navbar__notification-panel {
    top: calc(var(--nav-h) + 8px); right: max(16px, calc((100% - 1048px) / 2)); bottom: auto; left: auto;
    width: 400px; max-height: min(560px, calc(100dvh - var(--nav-h) - 24px));
    border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  }
  .navbar__notification-backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.is-scroll-locked, html.is-scroll-locked body { overflow: auto; } /* desktop never locks scrolling */
}

/* ======================================================================
   4. FORMS
   fields, password toggle, auth pages
   ====================================================================== */

.field { margin: 0 0 18px; }
.field label { display: block; margin-bottom: 6px; color: var(--text); font-size: var(--fs-md); font-weight: 600; }
.field input, .field select {
  display: block; width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font: inherit; font-size: 1rem; /* 16px stops iPhones zooming in on focus */
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:hover { border-color: #5a5070; }
.field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field input:user-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.field__hint { margin: 6px 0 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.45; }

.field__control { position: relative; }
.field__control input { padding-right: 72px; }
.field__toggle {
  position: absolute; top: 4px; right: 4px;
  min-width: 60px; height: 40px; padding: 0 10px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.field__toggle:hover { color: var(--text); background: var(--surface-3); }

.auth { width: min(420px, 100%); }
.auth__head { margin-bottom: 20px; }
.auth__title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.15; letter-spacing: -.01em; }
.auth__subtitle { margin: 0; color: var(--text-muted); font-size: var(--fs-md); line-height: 1.5; }
.auth__form .btn { width: 100%; min-height: 52px; font-size: 1rem; }
.auth__footer { margin: 20px 0 0; color: var(--text-muted); font-size: var(--fs-md); text-align: center; }
.auth__footer a { display: inline-block; padding: 8px 4px; font-weight: 600; text-decoration: none; }
.auth__footer a:hover { text-decoration: underline; }
.auth__error, .auth__notice { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius-md); font-size: var(--fs-md); line-height: 1.45; }
.auth__error { background: var(--danger-soft); border: 1px solid rgba(242, 102, 94, .4); color: #ffc2bd; }
.auth__notice { background: var(--primary-soft); border: 1px solid rgba(255, 79, 155, .35); color: var(--text); }
body.center-page > .auth { margin: 24px auto; }

/* ======================================================================
   5. REFERRAL
   share box, progress bar, share buttons
   ====================================================================== */

.share { display: grid; gap: 10px; }
.share__input {
  width: 100%; min-width: 0; min-height: 48px; padding: 0 14px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font: inherit; font-size: 1rem;
}
.share__input:disabled { color: var(--text-muted); cursor: not-allowed; }
.share__copy {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px;
  background: var(--primary); color: var(--on-primary);
  border: 0; border-radius: var(--radius-md);
  font: inherit; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s var(--ease);
}
.share__copy:hover { background: var(--primary-hover); color: var(--on-primary); }
.share__copy:active { background: var(--primary-press); }

.referral-card__blurb { margin: 0 0 16px; color: var(--text-muted); font-size: var(--fs-md); line-height: 1.55; }
.referral-card__stat { margin: 0 0 14px; color: var(--text-muted); font-size: var(--fs-md); }
.referral-card__stat strong { color: var(--gold); font-family: var(--font-display); font-size: 1.5rem; }
.referral-card__share-text { margin-top: 20px; }
.referral-card__share-text .share__copy { width: 100%; background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.referral-card__share-text .share__copy:hover { background: var(--surface-3); color: var(--text); }
.referral-card__note { margin: 12px 0 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; }
.share-textarea {
  display: block; width: 100%; min-height: 128px; margin: 8px 0 10px; padding: 12px 14px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font: inherit; font-size: 1rem; line-height: 1.5; resize: vertical;
}
.referral-card__platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.platform-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 14px;
  background: transparent; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font: inherit; font-size: var(--fs-md); font-weight: 600; text-decoration: none; cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.platform-btn:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }
#nativeShareBtn { grid-column: 1 / -1; background: var(--surface-3); }
.referral-card__platforms:has(> [hidden]:only-child) { display: none; }

.progress { height: 10px; margin: 0 0 10px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-3); }
.progress__bar { height: 100%; min-width: 6px; border-radius: var(--radius-pill); background: var(--primary); transition: width .4s var(--ease); }
.progress__text { margin: 0 0 4px; color: var(--text-muted); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.reward { margin-top: 14px; padding: 14px; background: var(--success-soft); border: 1px solid rgba(61, 220, 151, .3); border-radius: var(--radius-md); }
.reward p { margin: 0; color: var(--text); font-size: var(--fs-md); }

/* ======================================================================
   6. PACKS
   pack cards, latest-purchase banner
   ====================================================================== */

.level-card { margin-bottom: 20px; }
.level-list { display: grid; gap: 12px; }

.level-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "info  info"
    "price btn";
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  scroll-margin-top: calc(var(--nav-h) + 12px);
}
.level-row:target { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.level-row__info { grid-area: info; min-width: 0; align-self: start; }
.level-row__name { margin: 0 0 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.3125rem; line-height: 1.2; }
.level-row__meta { margin: 0; color: var(--text-muted); font-size: var(--fs-md); font-weight: 500; }
.level-row__info .dashboard__hint { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.level-row__info > a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: var(--fs-md); font-weight: 600; text-decoration: none; }
.level-row__info > a:hover { text-decoration: underline; }
.level-row__price { grid-area: price; color: var(--gold); font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1; font-variant-numeric: lining-nums; }
.level-row__btn { grid-area: btn; width: auto; min-width: 112px; min-height: 48px; padding: 0 24px; font-size: 1rem; }

/* Latest purchase banner */
.purchase-activity {
  display: flex; align-items: center; gap: 12px;
  width: min(1048px, calc(100% - 32px));
  margin: 14px auto 0; padding: 10px 12px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.purchase-activity__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--success-soft); color: var(--success); }
.purchase-activity__icon svg { width: 20px; height: 20px; }
.purchase-activity__message { flex: 1; min-width: 0; margin: 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.45; }
.purchase-activity__message strong { color: var(--text); }
.purchase-activity__message b { color: var(--success); }
.purchase-activity__eyebrow { display: block; margin-bottom: 1px; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }
.purchase-activity__link { display: grid; place-items: center; flex: none; width: 44px; height: 44px; color: var(--text-muted); font-size: 1.75rem; line-height: 1; text-decoration: none; }
.purchase-activity__link:hover { color: var(--primary); }

@media (min-width: 560px) {
  .hero__actions { display: flex; flex-wrap: wrap; }
  .hero__actions .btn { min-width: 200px; }
  .share { grid-template-columns: minmax(0, 1fr) auto; }
  .referral-card__platforms { grid-template-columns: repeat(3, auto); justify-content: start; }
  #nativeShareBtn { grid-column: auto; }
}
@media (min-width: 720px) {
  .levels, .dashboard { padding-top: 28px; }
  .card { padding: 24px; }
  .level-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .level-row { padding: 20px; }
}
@media (min-width: 1040px) {
  .level-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ======================================================================
   7. ORDERS
   my-orders.php and the order confirmation
   ====================================================================== */

.order-list { display: grid; gap: 12px; }
.order-card { padding: 18px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); scroll-margin-top: calc(var(--nav-h) + 12px); }
.order-card--ready { border-color: rgba(61, 220, 151, .4); }
.order-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.order-card__name { margin: 0 0 2px; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
.order-card__meta { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.order-card__price { flex: none; color: var(--gold); font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; }
.order-status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; }
.order-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.order-status--waiting { background: var(--warning-soft); color: var(--warning); }
.order-status--ready { background: var(--success-soft); color: var(--success); }
.order-status--canceled { background: rgba(169, 159, 184, .14); color: var(--text-muted); }
.order-card__note { margin: 0 0 14px; color: var(--text-muted); font-size: var(--fs-md); line-height: 1.55; }
.order-card__note:last-child { margin-bottom: 0; }
@media (min-width: 720px) { .order-card { padding: 22px; } }

/* Order-sent confirmation (order-request.php) */
.order-confirmed h2 { margin: 0 0 8px; font-size: 1.25rem; }

/* ======================================================================
   8. POPUPS
   login and sign-up <dialog> boxes (login-modal.php)
   ====================================================================== */

.payment-dialog::backdrop { background: rgba(6, 4, 10, .76); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.payment-dialog__content { position: relative; color: var(--text); }
.payment-dialog__close {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-muted);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.payment-dialog__close:hover { background: var(--surface-3); color: var(--text); }

/* ======================================================================
   9. ADMIN
   admin.php. More admin rules (tables, sidebar, chips) are in ui-system.css
   ====================================================================== */

/* Overflow guard: let grid/flex children shrink and long words wrap */
.admin-shell > *, .admin-content > *, .admin-section > * { min-width: 0; }
.admin-section, .admin-message, .admin-error, .admin-empty, .fp-admin__item, .admin-payment-grid label {
  min-width: 0; max-width: 100%; overflow-wrap: anywhere;
}
.admin-wrap code { overflow-wrap: anywhere; }

/* ROOT CAUSE of the cut-off notification sheet on the admin page:
   .visually-hidden is position:absolute. Inside a table that scrolls sideways,
   it used the whole PAGE as its box, sat ~700px to the right and made the page
   wider than the phone. position:relative makes the scrolling box its container. */
.admin-table-wrap { position: relative; }

/* Page frame */
.admin-wrap { width: min(1180px, 100%); margin: 38px auto 64px; padding-inline: 16px; }
.admin-page-head, .admin-section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.admin-page-head { margin-bottom: 24px; }
.admin-page-head h1, .admin-section-head h2 { margin: 0; font-family: var(--font-display); font-weight: 500; }
.admin-page-head h1 { font-size: clamp(1.8rem, 4vw, 2.35rem); }
.admin-section-head { margin-bottom: 20px; }
.admin-section-head h2 { font-size: 1.45rem; }
.admin-eyebrow, .admin-section-kicker { margin: 0 0 7px; color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .11em; }
.admin-intro, .admin-section-head p { margin: 7px 0 0; color: var(--text-muted); font-size: .9rem; line-height: 1.55; }

/* Messages */
.admin-message, .admin-error { display: flex; align-items: center; gap: 10px; margin: 16px 0; padding: 13px 15px; border: 1px solid; border-radius: 9px; }
.admin-message { border-color: rgba(74, 222, 128, .28); background: rgba(18, 59, 43, .45); color: #b8f2ca; }
.admin-error   { border-color: rgba(255, 93, 114, .34); background: rgba(84, 40, 40, .42); color: #ffc2c6; }
.admin-feedback-icon { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .08); font-weight: 700; }
.admin-empty { margin: 0; padding: 18px; border: 1px dashed var(--border); border-radius: 9px; color: var(--text-muted); text-align: center; }
.admin-private-note { color: var(--text-muted); font-size: .75rem; }

/* Stat cards and sections */
.admin-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 20px 0 24px; }
.admin-stat-card { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-height: 118px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: rgba(17, 19, 24, .75); }
.admin-stat-label, .admin-stat-hint { color: var(--text-muted); font-size: .82rem; }
.admin-stat-card strong { color: var(--text); font-size: 1.8rem; line-height: 1.1; }
.admin-section { margin: 20px 0; padding: clamp(16px, 3vw, 24px); border: 1px solid var(--border); border-radius: 14px; background: rgba(15, 17, 22, .72); scroll-margin-top: 88px; }
.admin-count { flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: .76rem; }

/* Form controls inside the admin */
.admin-wrap input:not([type="checkbox"]), .admin-wrap select, .admin-wrap textarea {
  width: 100%; min-width: 0; min-height: 42px; padding: 10px 11px;
  border: 1px solid var(--border); border-radius: 7px;
  background: #0c0e11; color: var(--text);
  font: inherit; font-size: .88rem; color-scheme: dark;
}
.admin-wrap textarea { min-height: 76px; resize: vertical; }
.admin-wrap :is(input, select, textarea):focus-visible { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.admin-check { display: flex !important; align-items: center; align-self: center; gap: 9px !important; color: var(--text) !important; font-size: .83rem !important; font-weight: 500 !important; }
.admin-check input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }

/* Status pills */
.admin-status-pill { flex: 0 0 auto; padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: .72rem; white-space: nowrap; }
.admin-status-pill.is-active, .admin-status-pill.status-paid, .admin-status-pill.status-sent, .admin-status-pill.status-complete { border-color: rgba(74, 222, 128, .28); background: rgba(74, 222, 128, .08); color: #8be0a5; }
.admin-status-pill.is-inactive, .admin-status-pill.status-canceled { border-color: rgba(255, 93, 114, .26); background: rgba(255, 93, 114, .08); color: #ff9da9; }
.admin-status-pill.status-new, .admin-status-pill.status-awaiting_payment, .admin-status-pill.status-available { border-color: rgba(251, 79, 152, .28); background: var(--accent-soft); color: var(--accent-strong); }

/* Wallet addresses */
.admin-payment-settings { padding: clamp(14px, 2.5vw, 22px); border: 1px solid rgba(251, 79, 152, .2); border-radius: 14px; background: rgba(15, 17, 22, .62); }
.admin-payment-settings > .admin-private-note { margin: 16px 0; }
.admin-payment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.admin-payment-grid label { display: grid; gap: 7px; color: var(--text); font-size: .88rem; font-weight: 600; }
.admin-payment-grid label small { color: var(--text-muted); font-size: .75rem; font-weight: 400; }
.admin-payment-grid input { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; background: #101216; color: var(--text); font: inherit; font-size: .86rem; }
.admin-payment-grid input:focus-visible { outline: 2px solid rgba(251, 79, 152, .5); outline-offset: 2px; }

/* Admin on small screens */
@media (max-width: 760px) {
  .admin-wrap { margin-top: 26px; }
}
@media (max-width: 640px) {
  .admin-payment-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .admin-page-head, .admin-section-head { align-items: flex-start; }
  .admin-page-head { flex-direction: column; }
  .admin-section-head { gap: 10px; }
  .admin-overview { grid-template-columns: 1fr; gap: 9px; }
  .admin-stat-card { min-height: 88px; padding: 14px 16px; }
  .admin-count { padding: 5px 7px; font-size: .68rem; }
}

/* ======================================================================
   10. REDUCED MOTION
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  .navbar__links, .navbar__chevron, .progress__bar { transition: none; }
}