/* =====================================================================
   V60 NEON — Game Charger Hub design port (Cyber-Neon RTL)
   V60.1 perf+mobile pass:
     - Removed background-attachment: fixed (kills iOS scroll perf).
     - Cut backdrop-filter to nav/hero-card/CTA only (was on 15+ elements).
     - Disabled marquee/pulse/float animations on mobile + on
       prefers-reduced-motion. Marquee runs on transform only (cheap).
     - Dropped Rakkas font (heavy + only used for headings) — Cairo carries
       both display and body, saving ~150KB and removing FOIT.
     - Mobile-first paddings/typography (was 5–7rem on phones, way too much).
     - Hero card hidden by JS on small screens to skip its 520px image.
   ===================================================================== */

:root {
  --neon-radius: 1rem;

  /* V83: theme reset — palette now mirrors the noir portal at /. The CSS
     class hooks below keep using the legacy ``--neon`` / ``--neon-2``
     names so 3000+ lines of styling don't need to be rewritten; only
     the *values* change to champagne-gold + jade-aurora on noir black,
     matching the portal so the visitor never sees a jarring purple
     handoff between the portal and the games shop. */
  --bg-0: #050505;
  --bg-1: #0a0a0a;
  --bg-2: #101010;
  --card-bg: #101010;
  --card-bg-2: #0a0a0a;

  --fg: #f3eede;
  --fg-muted: #a59f8c;
  --border-soft: rgba(247, 219, 130, 0.16);

  --neon: #f7db82;        /* champagne gold (was magenta) */
  --neon-2: #6fd1b8;      /* jade aurora    (was cyan) */
  --gold: #f7db82;
  --primary-fg: #0a0a0a;

  --gradient-hero:
      radial-gradient(ellipse at top, rgba(247, 219, 130, 0.18), transparent 60%),
      radial-gradient(ellipse at bottom right, rgba(111, 209, 184, 0.16), transparent 60%),
      linear-gradient(180deg, #0a0a0a, #050505);
  --gradient-neon: linear-gradient(135deg, var(--neon), var(--neon-2));
  --gradient-card: linear-gradient(160deg, rgba(20, 20, 20, 0.88), rgba(10, 10, 10, 0.78));

  --shadow-neon: 0 0 28px rgba(247, 219, 130, 0.30), 0 0 48px rgba(111, 209, 184, 0.16);
  --shadow-glow: 0 10px 28px -8px rgba(247, 219, 130, 0.42);

  --font-display: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ============================ RESET / BASE ============================ */
*, *::before, *::after { box-sizing: border-box; }

html { direction: rtl; -webkit-text-size-adjust: 100%; }
/* V61 perf: native CSS smooth-scroll is paint-heavy on Android. We already
   handle anchor clicks with a JS smooth-scroll, so disable native and let
   wheel/touch scrolling stay perfectly buttery. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  html { scroll-behavior: smooth; }
}
html, body {
  background: var(--gradient-hero);
  /* V60.1: dropped background-attachment:fixed — caused jank on iOS scroll. */
  color: var(--fg);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;       /* prevent horizontal scroll on small screens */
}

h1, h2, h3, h4, .font-display, .v60-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--fg);
  margin: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

.v60-text-muted { color: var(--fg-muted) !important; }
.v60-text-gradient {
  background: var(--gradient-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================ ANIMATIONS ============================== */
@keyframes v60-pulse-glow {
  0%, 100% { box-shadow: 0 0 22px rgba(247, 219, 130, 0.40); }
  50%      { box-shadow: 0 0 40px rgba(247, 219, 130, 0.65); }
}
.v60-anim-pulse { animation: v60-pulse-glow 3s ease-in-out infinite; }

@keyframes v60-float-y {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}
.v60-anim-float { animation: v60-float-y 6s ease-in-out infinite; will-change: transform; }

@keyframes v60-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(50%, 0, 0); }
}

@keyframes v60-fade-up {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.v60-anim-fade-up { animation: v60-fade-up .55s ease-out both; }

@keyframes v60-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* V60.1: respect user motion preferences AND auto-disable on phones to
   keep them buttery smooth. */
@media (prefers-reduced-motion: reduce) {
  .v60-anim-pulse, .v60-anim-float, .v60-anim-fade-up,
  .v60-marquee-track, .v60-hero-pill .dot::before {
    animation: none !important;
  }
}
@media (max-width: 720px) {
  .v60-anim-pulse, .v60-anim-float { animation: none; }
}

/* ================================ NAV ================================ */
.v60-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 5, 5, 0.82);
  border-bottom: 1px solid rgba(247, 219, 130, 0.10);
  /* keep one blur — nav is small + fixed area */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* V61 perf: backdrop-filter is the single biggest paint cost on mid-range
   Android — dropping it on phones gives ~10–15ms back per frame and the
   solid 0.95 alpha is visually very close on a small screen. */
@media (max-width: 720px) {
  .v60-nav {
    background: rgba(5, 5, 5, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.v60-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
}
@media (min-width: 768px) {
  .v60-nav-inner { padding: 0.9rem 2rem; gap: 1rem; }
}
@media (min-width: 1100px) {
  .v60-nav-inner { padding: 1rem 3rem; }
}

.v60-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--fg);
  white-space: nowrap;
}
@media (min-width: 768px) { .v60-brand { font-size: 1.4rem; gap: 0.6rem; } }

.v60-brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--gradient-neon);
  box-shadow: var(--shadow-glow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-fg);
  flex-shrink: 0;
}
@media (min-width: 768px) { .v60-brand-logo { width: 42px; height: 42px; } }
.v60-brand-logo svg { width: 20px; height: 20px; }

.v60-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(247, 219, 130, 0.04);
  border: 1px solid rgba(247, 219, 130, 0.10);
}
@media (min-width: 768px) { .v60-nav-links { gap: 0.5rem; font-size: 0.92rem; padding: 0.3rem; } }
@media (min-width: 1024px) { .v60-nav-links { gap: 0.55rem; } }

/* V83: each nav link is now a pill with a champagne underline that grows
   on hover — gives the header a clear "tabbed" rhythm so the visitor
   sees الصفحة الرئيسية / الألعاب / جميع الألعاب as a coordinated set
   instead of three loose text links. */
.v60-nav-links > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  color: var(--fg);
  letter-spacing: 0.005em;
  transition: color .18s ease, background .25s ease, transform .2s ease;
}
.v60-nav-links > a::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  right: 1.05rem;
  bottom: 0.35rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition: opacity .25s ease, transform .3s ease;
}
.v60-nav-links > a:hover {
  color: var(--neon);
  background: rgba(247, 219, 130, 0.07);
  transform: translateY(-1px);
}
.v60-nav-links > a:hover::after { opacity: 0.9; transform: scaleX(1); }

/* Pinned nav link — used for "my orders" so the player can reach their
   order history in one tap from any inner page or from the games shop.
   Sits in the top bar with a soft neon outline so it stands out without
   shouting at the rest of the navigation. */
.v60-nav-links a.v60-nav-pinned {
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(247, 219, 130, 0.14), rgba(111, 209, 184, 0.10));
  border: 1px solid rgba(247, 219, 130, 0.35);
  color: var(--neon);
  box-shadow: 0 4px 14px -8px rgba(247, 219, 130, 0.45);
  transition: color .18s, border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.v60-nav-links a.v60-nav-pinned::after { display: none; }
.v60-nav-links a.v60-nav-pinned:hover {
  color: var(--primary-fg);
  background: var(--gradient-neon);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

/* U6: active-section state — the nav link for the section the visitor is
   currently in keeps its champagne underline lit + neon text, so the
   current location is always obvious. Mirrors the existing hover look. */
.v60-nav-links > a.is-active {
  color: var(--neon);
  background: rgba(247, 219, 130, 0.07);
}
.v60-nav-links > a.is-active::after { opacity: 1; transform: scaleX(1); }
.v60-nav-links a.v60-nav-pinned.is-active,
.v60-nav-links a.v60-nav-pinned-admin.is-active {
  color: var(--primary-fg);
  background: var(--gradient-neon);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}

.v60-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
@media (min-width: 768px) { .v60-nav-actions { gap: 0.55rem; } }

.v60-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s, color .18s;
  text-decoration: none;
  font-family: var(--font-body);
  white-space: nowrap;
  min-height: 40px;            /* touch target */
}
@media (min-width: 768px) {
  .v60-btn { padding: 0.7rem 1.3rem; font-size: 0.9rem; }
}
.v60-btn:active { transform: scale(.97); }
.v60-btn:hover  { transform: translateY(-1px); }
.v60-btn-primary {
  background: var(--gradient-neon);
  color: var(--primary-fg) !important;
  box-shadow: var(--shadow-glow);
}
.v60-btn-glass {
  background: rgba(247, 219, 130, 0.07);
  border: 1px solid var(--border-soft);
  color: var(--fg);
}
.v60-btn-glass:hover { border-color: var(--neon-2); color: var(--neon-2); }
.v60-btn-ghost { color: var(--fg); }
.v60-btn-ghost:hover { color: var(--neon-2); }

.v60-nav-balance {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(247, 219, 130, 0.07);
  border: 1px solid var(--border-soft);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--fg);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .v60-nav-balance { padding: 0.55rem 1rem; font-size: 0.85rem; max-width: none; }
}

/* Brand-as-home-page link — replaces the old logo+icon variant. Sits in
   the top-left and reads "الصفحة الرئيسية" so the user always knows
   exactly where the link goes.
   V81.2: warmer gold tint on hover + icon, harmonising with the portal
   SPA whose primary accent is champagne gold. */
.v60-brand-home {
  gap: 0.45rem;
  color: var(--fg);
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.4rem 0.65rem;
  border-radius: 12px;
  border: 1px solid rgba(217, 168, 90, 0.18);
  transition: color .18s, background .18s, border-color .18s;
}
.v60-brand-home:hover {
  color: #f5d28a;
  background: rgba(217, 168, 90, 0.10);
  border-color: rgba(217, 168, 90, 0.45);
}
.v60-brand-home svg { color: #f5d28a; flex-shrink: 0; }
@media (max-width: 600px) {
  .v60-brand-home { font-size: 0.95rem; padding: 0.35rem 0.5rem; }
  .v60-brand-home svg { width: 16px; height: 16px; }
}

/* hide secondary nav buttons in compact mode (small phones) */
@media (max-width: 480px) {
  .v60-nav-actions .v60-btn-ghost { display: none; }
}

/* =============================== HERO ================================ */
.v60-hero {
  position: relative;
  overflow: hidden;
}
.v60-hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  filter: grayscale(0.6) brightness(0.5);
  z-index: 0;
}
.v60-hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(111, 209, 184, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 209, 184, 0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.30;
  pointer-events: none;
  z-index: 1;
}
.v60-hero-bg-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5,5,5,0.55), rgba(5,5,5,0.82) 60%, rgba(5,5,5,1));
  z-index: 1;
}
.v60-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.4rem 1rem 2.6rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  align-items: center;
}
@media (min-width: 768px) {
  .v60-hero-inner { padding: 4rem 2rem 4.4rem; gap: 2.4rem; }
}
@media (min-width: 1024px) {
  .v60-hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
    padding: 5.5rem 3rem 6rem;
    gap: 3rem;
  }
}

.v60-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.72rem;
  background: rgba(20, 20, 20, 0.7);
  border: 1px solid var(--border-soft);
  margin-bottom: 1rem;
}
@media (min-width: 768px) { .v60-hero-pill { font-size: 0.78rem; margin-bottom: 1.4rem; } }
.v60-hero-pill .dot {
  position: relative;
  display: inline-flex;
  width: 0.55rem;
  height: 0.55rem;
}
.v60-hero-pill .dot::before, .v60-hero-pill .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--neon-2);
}
.v60-hero-pill .dot::before {
  animation: v60-ping 2.2s cubic-bezier(0,0,0.2,1) infinite;
  opacity: 0.75;
}

.v60-hero-title {
  font-family: var(--font-display);
  /* V60.1: 9vw on phones got too big. Cap with min/max. */
  font-size: clamp(2rem, 8vw, 5rem);
  line-height: 1.05;
  margin: 0 0 1rem;
  font-weight: 900;
}
@media (min-width: 768px) { .v60-hero-title { margin-bottom: 1.4rem; } }
.v60-hero-title span {
  background: var(--gradient-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.v60-hero-desc {
  max-width: 32rem;
  color: var(--fg-muted);
  font-size: 0.95rem;
  line-height: 1.75;
  margin: 0 0 1.4rem;
}
@media (min-width: 768px) { .v60-hero-desc { font-size: 1.05rem; margin-bottom: 2rem; } }

.v60-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.8rem;
}
@media (min-width: 768px) { .v60-hero-actions { gap: 0.9rem; margin-bottom: 2.4rem; } }
.v60-hero-actions .v60-btn { padding: 0.85rem 1.4rem; font-size: 0.92rem; }
@media (min-width: 768px) { .v60-hero-actions .v60-btn { padding: 0.95rem 1.7rem; font-size: 1rem; } }

.v60-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  max-width: 28rem;
}
@media (min-width: 768px) { .v60-hero-stats { gap: 1rem; } }
.v60-hero-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  background: var(--gradient-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}
.v60-hero-stat-label {
  display: block;
  font-size: 0.72rem;
  color: var(--fg-muted);
  margin-top: 0.15rem;
}
@media (min-width: 768px) { .v60-hero-stat-label { font-size: 0.78rem; } }

.v60-hero-card {
  position: relative;
  display: none;            /* hidden until ≥1024px to skip a 520px image on phones */
}
@media (min-width: 1024px) { .v60-hero-card { display: block; } }
.v60-hero-card-glow {
  position: absolute;
  inset: -1rem;
  border-radius: 2rem;
  background: var(--gradient-neon);
  opacity: 0.25;
  filter: blur(36px);
}
.v60-hero-card-frame {
  position: relative;
  border-radius: 1.8rem;
  overflow: hidden;
  box-shadow: var(--shadow-neon);
  background: var(--card-bg);
}
.v60-hero-card-frame img {
  display: block;
  width: 100%;
  height: 480px;
  object-fit: cover;
  /* V61: fade in to match game cards — no white flash if SW returns
     a stale cache while the live image decodes. */
  opacity: 0;
  transition: opacity .35s ease;
}
.v60-hero-card-frame img.is-loaded,
.v60-hero-card-frame img[data-loaded="1"] {
  opacity: 1;
}
.v60-hero-card-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 22, 56, 1), transparent 55%);
}
.v60-hero-card-info {
  position: absolute;
  inset-inline-start: 1.4rem;
  inset-inline-end: 1.4rem;
  bottom: 1.4rem;
}
.v60-hero-card-info h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 0.3rem 0 0.2rem;
}
.v60-hero-card-info p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.9rem;
}

.v60-hot-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  background: var(--gradient-neon);
  color: var(--primary-fg);
  box-shadow: var(--shadow-glow);
}

/* ============================ MARQUEE ================================ */
.v60-marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid rgba(255,255,255,0.06);
  background: rgba(28, 22, 56, 0.45);
  padding: 0.8rem 0;
}
@media (min-width: 768px) { .v60-marquee { padding: 1rem 0; } }

.v60-marquee-track {
  display: flex;
  gap: 2rem;
  white-space: nowrap;
  animation: v60-marquee 32s linear infinite;
  width: max-content;
  will-change: transform;
}
@media (min-width: 768px) { .v60-marquee-track { gap: 3rem; } }

.v60-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
}
@media (min-width: 768px) { .v60-marquee-item { font-size: 1.4rem; } }
.v60-marquee-item span {
  background: var(--gradient-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================ SECTIONS ============================== */
.v60-section {
  position: relative;
  padding: 2.6rem 1rem;
}
@media (min-width: 768px) { .v60-section { padding: 4rem 2rem; } }
@media (min-width: 1024px) { .v60-section { padding: 5rem 3rem; } }

/* V61 perf: skip layout/paint for off-screen sections.
   `content-visibility:auto` lets the browser defer rendering for blocks
   the user hasn't reached — measured ~25% TBT win on mid-range Android.
   `contain-intrinsic-size` reserves height so scrollbars stay accurate. */
#features,
#how-it-works,
#testimonials,
#cta {
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
}

.v60-container {
  max-width: 1280px;
  margin: 0 auto;
}

.v60-section-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--neon-2);
  text-transform: uppercase;
  display: inline-block;
}
.v60-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 5.5vw, 3.4rem);
  font-weight: 900;
  margin: 0.5rem 0 0;
  line-height: 1.15;
}
.v60-section-title span {
  background: var(--gradient-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v60-section-sub {
  margin-top: 0.55rem;
  color: var(--fg-muted);
  max-width: 36rem;
  font-size: 0.92rem;
}

/* ====================== GAMES GRID (POPULAR) ======================== */
.v60-games-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: 1.8rem;
}
@media (min-width: 768px) {
  .v60-games-head {
    flex-direction: row;
    align-items: flex-end;
    gap: 1.2rem;
    margin-bottom: 2.4rem;
  }
}

.v60-search { position: relative; width: 100%; }
@media (min-width: 768px) { .v60-search { width: 22rem; } }
.v60-search input {
  width: 100%;
  padding: 0.85rem 2.8rem 0.85rem 1rem;
  border-radius: 0.9rem;
  background: rgba(28, 22, 56, 0.55);
  border: 1px solid var(--border-soft);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  min-height: 44px;
}
.v60-search input:focus {
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(247, 219, 130, 0.18);
}
.v60-search svg {
  position: absolute;
  inset-inline-end: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-muted);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   V61 GAMES GRID — refined for mobile smoothness + visual polish.
   Fixes the tear/static look reported on Android: square SVG fallbacks
   no longer get stretched into a 3:4 frame, soft gradient placeholders
   remove the white empty-area flash before lazy images decode, and the
   dark overlay was lifted so cover colours stay vivid.
   ═══════════════════════════════════════════════════════════════════ */
.v60-games-grid {
  display: grid;
  /* Mobile-first: 2 columns on phones so each card (and its cover image,
     title, price) has room to breathe. 3-up only kicks in from tablets. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  /* Skip painting cards far below the fold on slow phones. */
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}
@media (min-width: 540px) { .v60-games-grid { gap: 0.85rem; } }
@media (min-width: 720px) {
  .v60-games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }
}
@media (min-width: 1024px) {
  .v60-games-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.3rem;
  }
}

.v60-game-card {
  position: relative;
  border-radius: 1.1rem;
  overflow: hidden;
  /* Soft glassy gradient — avoids hard #1c1638 block while images load. */
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(247, 219, 130, 0.10), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(111, 209, 184, 0.10), transparent 55%),
    linear-gradient(160deg, #1f1746 0%, #14102a 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--fg);
  transform: translate3d(0, 0, 0);                 /* GPU layer = smoother scroll */
  transition: transform .28s cubic-bezier(.2, .7, .2, 1),
              box-shadow .28s ease,
              border-color .28s ease;
  will-change: transform;
}
@media (min-width: 768px) { .v60-game-card { border-radius: 1.4rem; } }

.v60-game-card::after {
  /* Subtle inner stroke that lights up on hover for that "premium" feel. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: box-shadow .28s ease;
}
@media (hover: hover) {
  .v60-game-card:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow:
      0 18px 38px -16px rgba(247, 219, 130, 0.55),
      0 8px 24px -10px rgba(111, 209, 184, 0.35);
    border-color: rgba(247, 219, 130, 0.45);
  }
  .v60-game-card:hover::after {
    box-shadow: inset 0 0 0 1px rgba(247, 219, 130, 0.35);
  }
}
.v60-game-card:active { transform: translate3d(0, -2px, 0) scale(.985); }

.v60-game-cover {
  position: relative;
  /* Phones get a calmer 4:5 ratio so square SVG fallbacks aren't stretched
     into a tall 3:4 frame (the old ratio is what looked "torn" on Android). */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* Pre-decoded gradient placeholder — replaces the white flash that lazy
     images leave behind. Same palette as the card so it blends seamlessly. */
  background:
    linear-gradient(135deg, #2a1f5c 0%, #1a1438 50%, #14102a 100%);
}
@media (min-width: 540px) { .v60-game-cover { aspect-ratio: 3 / 4; } }

.v60-game-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Fade in once decoded — kills the "pop in" jank on slow networks. */
  opacity: 0;
  transition: opacity .35s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}
.v60-game-cover img.is-loaded,
.v60-game-cover img[data-loaded="1"] {
  opacity: 1;
}
/* Fallback for cached images that fire 'load' before our listener runs. */
.v60-game-cover img.complete,
.v60-game-cover img:not([loading="lazy"]):not([src=""]) {
  opacity: 1;
}
@media (hover: hover) {
  .v60-game-card:hover .v60-game-cover img { transform: scale(1.06); }
}

.v60-game-cover-fade {
  position: absolute;
  inset: 0;
  /* Lighter than V60: top 35% stays bright, bottom dims just enough to
     keep the title legible. The old gradient was opaque all the way to
     50% which washed out the artwork. */
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.78) 0%,
    rgba(10, 10, 10, 0.35) 35%,
    transparent 65%
  );
  pointer-events: none;
}
.v60-game-cover .v60-hot-badge {
  position: absolute;
  top: 0.6rem;
  inset-inline-start: 0.6rem;
  z-index: 2;
}

.v60-game-body {
  padding: 0.75rem 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
@media (min-width: 768px) { .v60-game-body { padding: 1rem 1.15rem 1.25rem; gap: 0.55rem; } }

.v60-game-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  margin: 0;
  line-height: 1.25;
  flex: 1;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 540px) { .v60-game-title { font-size: 1.05rem; } }
@media (min-width: 768px) { .v60-game-title { font-size: 1.3rem; } }

.v60-game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.v60-game-tag {
  color: var(--neon-2);
  font-weight: 800;
  font-size: 0.7rem;
  white-space: nowrap;
  background: rgba(111, 209, 184, 0.10);
  border: 1px solid rgba(111, 209, 184, 0.25);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
}
.v60-game-price {
  color: var(--gold);
  font-weight: 800;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v60-game-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--neon);
  font-weight: 800;
  font-size: 0.78rem;
  white-space: nowrap;
}
.v60-game-cta svg { transition: transform .25s ease; }
@media (hover: hover) {
  .v60-game-card:hover .v60-game-cta svg {
    transform: translateX(var(--cta-arrow-dir, -3px));
  }
}
[dir="ltr"] .v60-game-cta { --cta-arrow-dir: 3px; }
@media (min-width: 768px) {
  .v60-game-tag { font-size: 0.75rem; }
  .v60-game-price, .v60-game-cta { font-size: 0.85rem; }
}

/* Reduce-motion: kill scale + arrow animations. */
@media (prefers-reduced-motion: reduce) {
  .v60-game-card,
  .v60-game-cover img,
  .v60-game-cta svg {
    transition: none !important;
  }
  .v60-game-card:hover { transform: none !important; }
}

/* ============================ FEATURES ============================== */
.v60-features-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
}
@media (min-width: 540px) { .v60-features-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .v60-features-grid { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } }

.v60-feature {
  position: relative;
  overflow: hidden;
  padding: 1.3rem;
  border-radius: 1.2rem;
  background: var(--gradient-card);
  border: 1px solid rgba(255,255,255,0.07);
  transition: border-color .25s, transform .25s;
}
@media (min-width: 768px) { .v60-feature { padding: 1.7rem; border-radius: 1.5rem; } }
.v60-feature:hover {
  border-color: rgba(247, 219, 130, 0.45);
  transform: translateY(-3px);
}
.v60-feature::before {
  content: "";
  position: absolute;
  top: -2.5rem;
  inset-inline-end: -2.5rem;
  width: 9rem;
  height: 9rem;
  border-radius: 999px;
  background: rgba(247, 219, 130, 0.10);
  filter: blur(36px);
  pointer-events: none;
}

.v60-feature-icon {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 0.9rem;
  background: var(--gradient-neon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-fg);
  box-shadow: var(--shadow-glow);
  margin-bottom: 0.9rem;
}
@media (min-width: 768px) { .v60-feature-icon { width: 56px; height: 56px; border-radius: 1rem; margin-bottom: 1.1rem; } }
.v60-feature-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
}
@media (min-width: 768px) { .v60-feature-title { font-size: 1.15rem; } }
.v60-feature-desc {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--fg-muted);
  margin: 0;
}

/* ============================== STEPS =============================== */
.v60-steps-wrap {
  position: relative;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 540px) { .v60-steps-wrap { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; } }
@media (min-width: 1024px) { .v60-steps-wrap { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.v60-steps-line {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: 3rem;
  height: 1px;
  background: linear-gradient(to left, transparent, rgba(247, 219, 130, 0.40), transparent);
}
@media (min-width: 1024px) { .v60-steps-line { display: block; } }

.v60-step { position: relative; text-align: center; }
.v60-step-orb {
  position: relative;
  width: 5rem;
  height: 5rem;
  border-radius: 999px;
  margin: 0 auto 0.9rem;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-neon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--neon-2);
}
@media (min-width: 768px) { .v60-step-orb { width: 5.6rem; height: 5.6rem; margin-bottom: 1rem; } }
.v60-step-orb svg { width: 30px; height: 30px; }
@media (min-width: 768px) { .v60-step-orb svg { width: 34px; height: 34px; } }

.v60-step-num {
  position: absolute;
  top: -0.3rem;
  inset-inline-end: -0.3rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--gradient-neon);
  color: var(--primary-fg);
  font-weight: 900;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow);
}
.v60-step-title { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.35rem; }
@media (min-width: 768px) { .v60-step-title { font-size: 1.15rem; } }
.v60-step-desc { color: var(--fg-muted); font-size: 0.85rem; margin: 0; }

/* ========================== TESTIMONIALS ============================ */
.v60-testimonials-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .v60-testimonials-grid { grid-template-columns: repeat(3, 1fr); gap: 1.3rem; } }

.v60-testimonial {
  border-radius: 1.2rem;
  background: var(--gradient-card);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 1.4rem;
}
@media (min-width: 768px) { .v60-testimonial { padding: 1.7rem; border-radius: 1.5rem; } }
.v60-testimonial-stars {
  display: flex;
  gap: 0.2rem;
  color: var(--gold);
  margin-bottom: 0.7rem;
}
.v60-testimonial-stars svg { width: 16px; height: 16px; fill: var(--gold); }
.v60-testimonial-text {
  font-size: 0.95rem;
  line-height: 1.75;
  margin: 0 0 1.1rem;
}
@media (min-width: 768px) { .v60-testimonial-text { font-size: 1rem; margin-bottom: 1.3rem; } }
.v60-testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 0.8rem;
}
.v60-testimonial-avatar {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-neon);
  color: var(--primary-fg);
  font-weight: 800;
  flex-shrink: 0;
}
.v60-testimonial-name { font-weight: 800; font-size: 0.92rem; }
.v60-testimonial-role { color: var(--fg-muted); font-size: 0.78rem; }

/* =============================== CTA ================================ */
.v60-cta-wrap {
  position: relative;
  border-radius: 1.6rem;
  overflow: hidden;
  padding: 2rem 1.2rem;
  text-align: center;
  background: var(--gradient-card);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-neon);
}
@media (min-width: 768px) { .v60-cta-wrap { padding: 3rem 2rem; border-radius: 2rem; } }
@media (min-width: 1024px) { .v60-cta-wrap { padding: 4rem 3rem; border-radius: 2.4rem; } }
.v60-cta-wrap::before, .v60-cta-wrap::after {
  content: "";
  position: absolute;
  width: 12rem;
  height: 12rem;
  border-radius: 999px;
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}
.v60-cta-wrap::before { top: -4rem; inset-inline-end: -4rem; background: rgba(247, 219, 130, 0.30); }
.v60-cta-wrap::after  { bottom: -4rem; inset-inline-start: -4rem; background: rgba(111, 209, 184, 0.30); }
.v60-cta-overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-neon);
  opacity: 0.08;
  z-index: 0;
}
.v60-cta-inner { position: relative; z-index: 1; }
.v60-cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6vw, 3.4rem);
  margin: 0 0 0.8rem;
  line-height: 1.1;
  font-weight: 900;
}
.v60-cta-title span {
  background: var(--gradient-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v60-cta-desc {
  max-width: 32rem;
  margin: 0 auto;
  color: var(--fg-muted);
  font-size: 0.92rem;
}
.v60-cta-btn {
  margin-top: 1.5rem;
  padding: 0.9rem 2rem;
  font-size: 0.95rem;
}
@media (min-width: 768px) {
  .v60-cta-btn { margin-top: 1.8rem; padding: 1rem 2.4rem; font-size: 1rem; }
}

/* ============================== FOOTER ============================== */
.v60-footer {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 2.4rem 1rem 1.6rem;
  margin-top: 1rem;
  /* V61 perf: footer is always below the fold on first paint. */
  content-visibility: auto;
  contain-intrinsic-size: 1px 420px;
}
@media (min-width: 768px) { .v60-footer { padding: 3.5rem 2rem 2rem; } }
@media (min-width: 1024px) { .v60-footer { padding: 4.5rem 3rem 2rem; } }

.v60-footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .v60-footer-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

.v60-footer-col h4 {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0 0 0.8rem;
  color: var(--fg);
}
.v60-footer-col a, .v60-footer-col p {
  display: block;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 0.86rem;
  margin-bottom: 0.45rem;
  transition: color .18s;
}
.v60-footer-col a:hover { color: var(--neon-2); }

.v60-footer-bottom {
  max-width: 1280px;
  margin: 1.6rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--fg-muted);
  font-size: 0.8rem;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* ============== HIDE LEGACY BACKGROUND/STAGE ELEMENTS =============== */
#cs-stage, #cs-particles, #cs-fx, #cs-stars { display: none !important; }
.tg-nav, .v43-nav, .footer.v43-footer { display: none !important; }

main.container {
  max-width: none;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}
.messages {
  max-width: 1280px;
  margin: 0.8rem auto 0;
  padding: 0 1rem;
}
@media (min-width: 768px) { .messages { padding: 0 2rem; } }
.messages .alert {
  border-radius: 0.9rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  color: var(--fg);
  font-size: 0.9rem;
}
.messages .alert.danger { border-color: rgba(244, 63, 94, 0.55); }
.messages .alert.success { border-color: rgba(111, 209, 184, 0.55); }

/* Internal page heads (products, profile, etc.) */
.page-head {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.2rem 1rem 0.5rem !important;
}
@media (min-width: 768px) { .page-head { padding: 3rem 2rem 1rem !important; } }
@media (min-width: 1024px) { .page-head { padding: 4rem 3rem 1rem !important; } }
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  margin: 0.4rem 0;
}
.page-head .muted, .muted { color: var(--fg-muted); }
.page-head .tg-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.7);
  border: 1px solid var(--border-soft);
  color: var(--neon-2);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Search & products styling reused on /products and /all-games */
.tg-search-wrap {
  max-width: 1280px;
  margin: 0.4rem auto 1.2rem;
  padding: 0 1rem;
}
@media (min-width: 768px) { .tg-search-wrap { padding: 0 2rem; } }
@media (min-width: 1024px) { .tg-search-wrap { padding: 0 3rem; } }

.tg-search-input {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border-radius: 0.9rem;
  background: rgba(28, 22, 56, 0.55);
  border: 1px solid var(--border-soft);
  color: var(--fg);
  font-size: 0.95rem;
  outline: none;
  font-family: var(--font-body);
  min-height: 44px;
}
.tg-search-input:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(247, 219, 130, 0.18); }

.tg-game-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}
@media (min-width: 720px) { .tg-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 2rem; } }
@media (min-width: 1024px) { .tg-game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.3rem; padding-inline: 3rem; } }

.tg-game-card {
  position: relative;
  border-radius: 1.1rem;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
@media (min-width: 768px) { .tg-game-card { border-radius: 1.4rem; } }
.tg-game-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-neon); }
.tg-game-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-1);
}
.tg-game-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
@media (hover: hover) { .tg-game-card:hover .tg-game-cover img { transform: scale(1.06); } }

.tg-game-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 22, 56, 1), rgba(28, 22, 56, 0.30) 50%, transparent);
}
.tg-game-badge {
  position: absolute;
  top: 0.55rem;
  inset-inline-start: 0.55rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  background: var(--gradient-neon);
  color: var(--primary-fg);
  box-shadow: var(--shadow-glow);
}
.tg-game-body { padding: 0.75rem 0.85rem 0.95rem; }
@media (min-width: 768px) { .tg-game-body { padding: 1rem 1.1rem 1.2rem; } }
.tg-game-body h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0 0 0.3rem;
  font-weight: 800;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) { .tg-game-body h3 { font-size: 1.25rem; } }
.tg-game-sub { color: var(--fg-muted); font-size: 0.78rem; margin: 0; }
@media (min-width: 768px) { .tg-game-sub { font-size: 0.85rem; } }

/* Products grid */
.products-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (min-width: 768px) {
  .products-grid {
    padding: 1.2rem 2rem 4rem;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}
@media (min-width: 1024px) { .products-grid { padding-inline: 3rem; } }

.product-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 1.1rem;
  border-radius: 1.1rem;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
@media (min-width: 768px) { .product-card { padding: 1.3rem; border-radius: 1.3rem; gap: 1rem; } }
.product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(247, 219, 130, 0.45);
  box-shadow: var(--shadow-glow);
}
.product-card h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0; line-height: 1.3; }
@media (min-width: 768px) { .product-card h3 { font-size: 1.15rem; } }
.product-card .product-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.product-card strong { color: var(--gold); font-size: 1.15rem; font-weight: 800; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(20, 20, 20, 0.7);
  color: var(--fg);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.88rem;
  transition: transform .18s, box-shadow .18s;
  min-height: 40px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn.primary {
  background: var(--gradient-neon);
  color: var(--primary-fg);
  border: none;
  box-shadow: var(--shadow-glow);
}

.empty-state {
  max-width: 760px;
  margin: 1.5rem auto;
  padding: 1.2rem;
  text-align: center;
  color: var(--fg-muted);
  border-radius: 0.9rem;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  font-size: 0.92rem;
}

/* Cards used in dashboard/profile/checkout/wallet */
.card {
  max-width: 1280px;
  margin: 1rem auto;
  padding: 1.2rem;
  border-radius: 1.1rem;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--fg);
}
@media (min-width: 768px) { .card { padding: 1.6rem; border-radius: 1.4rem; } }
.card h2, .card h1 { font-family: var(--font-display); margin-top: 0; }

/* Tables */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.9rem;
  border: 1px solid var(--border-soft);
}
table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  background: rgba(28, 22, 56, 0.40);
}
table th, table td {
  padding: 0.65rem 0.75rem;
  text-align: start;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--fg);
  font-size: 0.88rem;
}
table th { background: rgba(247, 219, 130, 0.10); color: var(--neon-2); }

/* Form fields */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="search"], input[type="date"], select, textarea {
  background: rgba(28, 22, 56, 0.55);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  border-radius: 0.8rem;
  padding: 0.65rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  width: 100%;
  min-height: 44px;             /* iOS friendly */
  -webkit-appearance: none;
  appearance: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(247, 219, 130, 0.18);
}

/* Back-to-top */
.tg-to-top {
  position: fixed;
  bottom: 1rem;
  inset-inline-end: 1rem;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 999px;
  background: var(--gradient-neon);
  color: var(--primary-fg);
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 800;
  box-shadow: var(--shadow-glow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  z-index: 60;
}
@media (min-width: 768px) { .tg-to-top { bottom: 1.5rem; inset-inline-end: 1.5rem; width: 3rem; height: 3rem; font-size: 1.4rem; } }
.tg-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

.logout-modal-box {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: 1.1rem;
  padding: 1.4rem;
  max-width: 26rem;
  width: calc(100% - 2rem);
  text-align: center;
  color: var(--fg);
}
.logout-modal-box h3 { font-family: var(--font-display); margin-top: 0; }
.logout-modal-actions { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }

/* ============== LEGACY TEMPLATE SUPPORT (auth, wallet, checkout) ============== */
.grid.two {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .grid.two { padding: 0 2rem; gap: 1.4rem; } }
@media (min-width: 880px) { .grid.two { grid-template-columns: 1.05fr 0.95fr; padding-inline: 3rem; } }
/* Mobile: on the wallet page surface the deposit form (with the payment
   methods) ABOVE the balance card, so users who tapped "أضف رصيد" see the
   payment methods immediately without scrolling past the balance summary. */
@media (max-width: 879px) { .grid.two #deposit-card { order: -1; } }


.form, .auth-card, .checkout-card {
  max-width: 480px;
  margin: 2.5rem auto 2rem;
  padding: 1.2rem;
  background: var(--card-bg);
  border-radius: 1.2rem;
  border: 1px solid var(--border-soft);
}
@media (min-width: 768px) { .form, .auth-card, .checkout-card { margin: 4rem auto 2.5rem; padding: 1.6rem; border-radius: 1.4rem; } }
.checkout-card { max-width: 560px; }
label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0.6rem 0 0.35rem;
  color: var(--fg);
}
.form .muted, .card .muted { font-size: 0.85rem; }

.field-error {
  display: block;
  color: #f87171;
  font-size: 0.8rem;
  margin-top: 0.25rem;
  min-height: 0.9rem;
}
.input-err { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15) !important; }

.pw-wrap { position: relative; }
.pw-wrap input { padding-inline-end: 2.6rem; }
.pw-toggle {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0.4rem;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 0 0.4rem;
}

.auth-links { display: flex; gap: 0.8rem; flex-wrap: wrap; font-size: 0.85rem; }
.auth-links a { color: var(--neon-2); }

/* Wallet / price display */
.price {
  font-family: var(--font-display);
  font-size: 2rem;
  background: var(--gradient-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  margin: 0.4rem 0 0.8rem;
}
@media (min-width: 768px) { .price { font-size: 2.5rem; } }

.links { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; }
.payment-method-card {
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  background: rgba(28, 22, 56, 0.55);
  border: 1px dashed var(--border-soft);
  font-size: 0.9rem;
}

/* ===== V90: clearer wallet deposit flow ===== */
.deposit-step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.2rem 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--fg, #fff);
}
.deposit-step:first-of-type { margin-top: 0.4rem; }
.deposit-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--gradient-neon);
  color: #0a0a0a;
  font-size: 0.85rem;
  font-weight: 900;
}
.deposit-step__label { font-weight: 800; }
.deposit-select {
  width: 100%;
  padding: 0.85rem 0.9rem;
  border-radius: 0.85rem;
  background: rgba(20, 18, 40, 0.85);
  border: 1px solid var(--border-soft);
  color: #fff;
  font-size: 1rem;
}
.deposit-amount-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.deposit-amount-input {
  width: 100%;
  padding: 0.95rem 3.2rem 0.95rem 1rem;
  border-radius: 0.85rem;
  background: rgba(20, 18, 40, 0.85);
  border: 1px solid var(--border-soft);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
}
.deposit-amount-input:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(247,219,130,.18); }
.deposit-amount-cur {
  position: absolute;
  inset-inline-end: 1rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--gold);
  pointer-events: none;
}
.deposit-hint { margin: 0.45rem 0 0; font-size: 0.84rem; }
.pm-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.pm-key { color: var(--fg-muted); font-size: 0.84rem; }
.pm-val { color: #fff; font-weight: 800; }
.pm-addr-block { margin-top: 0.75rem; }
.pm-addr-head { margin-bottom: 0.4rem; }
.pm-address {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  border-radius: 0.75rem;
  background: rgba(247, 219, 130, 0.08);
  border: 1px solid rgba(247, 219, 130, 0.32);
  color: var(--gold);
  cursor: pointer;
  text-align: start;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.pm-address:hover { background: rgba(247, 219, 130, 0.16); border-color: var(--gold); }
.pm-address:active { transform: scale(0.99); }
.pm-address__text {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  word-break: break-all;
  white-space: pre-wrap;
  color: #fff;
}
.pm-address__icon { color: var(--gold); flex-shrink: 0; display: inline-flex; }
.pm-address__copied {
  display: none;
  flex-shrink: 0;
  color: #6fd1b8;
  font-weight: 800;
  font-size: 0.85rem;
}
.pm-address.is-copied { background: rgba(111, 209, 184, 0.14); border-color: #6fd1b8; }
.pm-address.is-copied .pm-address__icon { display: none; }
.pm-address.is-copied .pm-address__copied { display: inline; }
.pm-instructions { margin-top: 0.75rem; font-size: 0.86rem; }

.file-input {
  width: 100%;
  padding: 0.55rem;
  border-radius: 0.8rem;
  background: rgba(28, 22, 56, 0.55);
  border: 1px dashed var(--border-soft);
  color: var(--fg-muted);
  font-size: 0.88rem;
}

/* Checkout summary */
.checkout-game-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.checkout-game-img {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 0.9rem;
  object-fit: cover;
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
@media (min-width: 768px) { .checkout-game-img { width: 5rem; height: 5rem; border-radius: 1rem; } }
.checkout-game-name { font-family: var(--font-display); font-size: 1.2rem; }
@media (min-width: 768px) { .checkout-game-name { font-size: 1.4rem; } }
.checkout-pkg-name { color: var(--fg-muted); font-size: 0.88rem; }
.checkout-summary {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.9rem;
  border-radius: 0.9rem;
  background: rgba(28, 22, 56, 0.40);
  border: 1px solid var(--border-soft);
}
.checkout-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.92rem;
  gap: 0.5rem;
}
.checkout-price { color: var(--gold); font-size: 1.1rem; font-weight: 800; }
.balance-ok { color: #34d399; }
.balance-low { color: #f87171; }
.balance-after { color: var(--fg-muted); font-size: 0.85rem; }
.checkout-insufficient {
  margin-top: 0.55rem;
  padding: 0.65rem 0.85rem;
  background: rgba(244, 63, 94, 0.10);
  border: 1px solid rgba(244, 63, 94, 0.45);
  border-radius: 0.75rem;
  font-size: 0.88rem;
}
.checkout-insufficient a { color: var(--neon-2); font-weight: 800; }
.checkout-confirm-btn { font-size: 1rem; padding: 0.9rem 1.3rem; }

.tg-pill.small { padding: 0.22rem 0.65rem; font-size: 0.68rem; }
.tg-breadcrumb {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--fg-muted);
  margin-bottom: 0.4rem;
}
.tg-breadcrumb a { color: var(--neon-2); }

/* Unified back button — word "رجوع" instead of the ← symbol, identical on every browse page */
.tg-back {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.8rem;
  border: 1px solid var(--neon-2);
  border-radius: 999px;
  color: var(--neon-2) !important;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  margin-inline-end: 0.5rem;
  transition: background .15s ease;
}
.tg-back:hover { background: rgba(255,255,255,0.07); }



/* ======================================================================
   V65: "الأكثر طلباً" featured carousel — small design addition ported
   from neon-gaming-topup-updated/src/routes/index.tsx. Swipeable strip
   sits above the main games grid on the home page only.
   ====================================================================== */
.v60-featured-row {
  margin: 0 0 1.4rem;
}
@media (min-width: 768px) { .v60-featured-row { margin-bottom: 2rem; } }

.v60-featured-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.7rem;
}
.v60-featured-row-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0;
  font-weight: 800;
}
@media (min-width: 768px) { .v60-featured-row-head h3 { font-size: 1.4rem; } }
.v60-featured-row-head h3 svg { color: var(--neon); }
.v60-featured-row-hint {
  font-size: 0.72rem;
  color: var(--fg-muted);
  font-weight: 700;
}

.v60-featured-track {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  padding: 0.2rem 0.2rem 0.6rem;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.v60-featured-track::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .v60-featured-track { gap: 1rem; } }

.v60-featured-card {
  position: relative;
  flex: 0 0 60%;
  max-width: 220px;
  scroll-snap-align: start;
  border-radius: 1.1rem;
  overflow: hidden;
  background: var(--gradient-card, linear-gradient(160deg, #1f1746 0%, #14102a 100%));
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  color: var(--fg);
  box-shadow: 0 10px 30px -10px rgba(247, 219, 130, 0.45);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease, border-color .28s ease;
}
@media (min-width: 540px) { .v60-featured-card { flex: 0 0 240px; max-width: 240px; } }
@media (min-width: 768px) { .v60-featured-card { flex: 0 0 260px; max-width: 260px; border-radius: 1.4rem; } }
@media (hover: hover) {
  .v60-featured-card:hover {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(247, 219, 130, 0.45);
    box-shadow:
      0 18px 40px -16px rgba(247, 219, 130, 0.6),
      0 8px 24px -10px rgba(111, 209, 184, 0.35);
  }
}

.v60-featured-cover {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.v60-featured-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
  .v60-featured-card:hover .v60-featured-cover img { transform: scale(1.08); }
}
.v60-featured-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.92) 0%,
    rgba(10, 10, 10, 0.45) 35%,
    transparent 65%
  );
  pointer-events: none;
}
.v60-featured-badge {
  position: absolute;
  top: 0.55rem;
  inset-inline-end: 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  color: #160b29;
  background: linear-gradient(135deg, var(--neon, #f7db82), var(--neon-2, #6fd1b8));
  box-shadow: 0 4px 14px -4px rgba(247, 219, 130, 0.55);
  z-index: 2;
}
@media (min-width: 768px) { .v60-featured-badge { font-size: 0.72rem; padding: 0.28rem 0.7rem; } }
.v60-featured-badge svg { color: #160b29; }

.v60-featured-info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.7rem 0.85rem 0.85rem;
  z-index: 2;
}
.v60-featured-info h4 {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--fg);
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) { .v60-featured-info h4 { font-size: 1.2rem; } }
.v60-featured-info span {
  font-size: 0.72rem;
  color: var(--neon-2);
  font-weight: 700;
}
@media (min-width: 768px) { .v60-featured-info span { font-size: 0.78rem; } }

@media (prefers-reduced-motion: reduce) {
  .v60-featured-card,
  .v60-featured-cover img {
    transition: none !important;
  }
  .v60-featured-card:hover { transform: none !important; }
}



/* =====================================================================
   V67 — User-facing fixes (orders page, checkout ID field, balance pulse,
   flash link). The orders page used CSS classes that lived only in the
   legacy stylesheets we no longer load; the page rendered as plain
   inline content. This block ports them into v60-neon.css so the
   "طريقة عرض الطلبات" complaint is fully resolved.
   ===================================================================== */

/* ---- Orders page header + filter bar ---- */
.orders-header {
  max-width: 1100px;
  margin: 0 auto 1.4rem;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
@media (min-width: 768px) {
  .orders-header {
    padding: 0 2rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
.orders-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  margin: 0;
  background: var(--gradient-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.orders-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
#orders-service-filter {
  padding: 0.22rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
#orders-status-filter {
  opacity: 0.92;
}
.service-filter-btn.active {
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), var(--shadow-glow);
}
.status-filter-btn {
  min-height: 34px;
  padding: 0.42rem 0.78rem;
  font-size: 0.8rem;
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid var(--border-soft);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .15s;
  min-height: 38px;
}
.filter-btn:hover { border-color: var(--neon-2); color: var(--neon-2); }
.filter-btn:active { transform: scale(.97); }
.filter-btn.active {
  background: var(--gradient-neon);
  color: var(--primary-fg);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45em;
  height: 1.45em;
  padding: 0 0.42em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.72em;
  font-weight: 900;
  line-height: 1;
}
.filter-btn.active .filter-count {
  background: rgba(0, 0, 0, 0.18);
}

/* ---- Orders list (cards) ---- */
.orders-list {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}
@media (min-width: 768px) {
  .orders-list { padding: 0 2rem; gap: 1rem; }
}
@media (min-width: 1024px) {
  .orders-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
}

.order-card {
  position: relative;
  border-radius: 1.1rem;
  background: var(--gradient-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.order-card:hover {
  border-color: rgba(247, 219, 130, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(247, 219, 130, 0.45);
}
.order-card[data-status="completed"] { border-inline-start: 3px solid #22c55e; }
.order-card[data-status="rejected"]  { border-inline-start: 3px solid #ef4444; }
.order-card[data-status="waiting"],
.order-card[data-status="processing"],
.order-card[data-status="supplier_pending"],
.order-card[data-status="manual_pending"] {
  border-inline-start: 3px solid var(--neon-2);
}

.order-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
}
.order-game-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}
.order-game-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--fg);
  line-height: 1.3;
  word-break: break-word;
}
.order-pkg {
  font-size: 0.85rem;
  color: var(--fg-muted);
  word-break: break-word;
}

.order-status-wrap { flex-shrink: 0; }
.order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}
.order-status-badge.s-waiting {
  background: rgba(111, 209, 184, 0.12);
  color: #6fd1b8;
  border: 1px solid rgba(111, 209, 184, 0.35);
}
.order-status-badge.s-processing {
  background: rgba(251, 191, 36, 0.12);
  color: #f7db82;
  border: 1px solid rgba(251, 191, 36, 0.35);
  animation: tg-status-pulse 2s ease-in-out infinite;
}
/* V75: distinct badge for supplier_pending so user perceives progress */
.order-status-badge.s-supplier {
  background: rgba(168, 85, 247, 0.14);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.40);
  animation: tg-status-pulse 2.5s ease-in-out infinite;
}
.order-status-badge.s-pending {
  background: rgba(168, 85, 247, 0.14);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
}
.order-status-badge.s-completed {
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.order-status-badge.s-rejected {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}
@keyframes tg-status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

/* V74: live-update animations + toast.
   Triggered by /static/js/pages/orders.js when the polling layer
   detects a status change or a freshly-placed order. CSS-only so
   the strict CSP (no inline animation styles) is happy. */
@keyframes tg-card-flash {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); background-color: transparent; }
  20%  { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.25); background-color: rgba(74, 222, 128, 0.06); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); background-color: transparent; }
}
.order-card-flash {
  animation: tg-card-flash 1.4s ease-out 1;
}

@keyframes tg-card-slide-in {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.order-card-new {
  animation: tg-card-slide-in .45s ease-out 1;
  outline: 2px solid rgba(247, 219, 130, 0.55);
  outline-offset: 2px;
  transition: outline-color .9s ease 1.2s;
}
.order-card-new.fade-outline {
  outline-color: transparent;
}

/* Toast host — sits above everything, dismisses itself via JS. */
#orders-toast-host {
  position: fixed;
  inset: auto 1rem 1.2rem 1rem;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
}
.orders-toast {
  pointer-events: auto;
  max-width: min(92vw, 420px);
  padding: 0.85rem 1.1rem;
  border-radius: 0.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #fff;
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 18px 42px -18px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease;
}
.orders-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.orders-toast-ok {
  border: 1px solid rgba(74, 222, 128, 0.55);
  box-shadow: 0 18px 42px -18px rgba(74, 222, 128, 0.55);
}
.orders-toast-ok::before {
  content: "✅ ";
}
.orders-toast-err {
  border: 1px solid rgba(248, 113, 113, 0.55);
  box-shadow: 0 18px 42px -18px rgba(248, 113, 113, 0.55);
}
.orders-toast-err::before {
  content: "❌ ";
}

@media (prefers-reduced-motion: reduce) {
  .order-card-flash,
  .order-card-new {
    animation: none;
  }
  .orders-toast {
    transition: none;
  }
}

.order-card-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
  padding-top: 0.75rem;
}
.order-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  min-width: 0;
}
.order-code-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}
.order-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  background: rgba(28, 22, 56, 0.7);
  border: 1px solid var(--border-soft);
  padding: 0.2rem 0.55rem;
  border-radius: 0.5rem;
  color: var(--fg);
  user-select: all;
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 28px;
  min-height: 28px;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.7);
  border: 1px solid var(--border-soft);
  color: var(--fg-muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  transition: color .18s, border-color .18s, background .18s, transform .16s, box-shadow .18s;
}
.copy-btn:hover {
  color: var(--neon-2);
  border-color: var(--neon-2);
  background: rgba(111, 209, 184, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -14px var(--neon-2);
}
.copy-btn.copied {
  color: #07130f;
  border-color: rgba(111, 209, 184, 0.75);
  background: linear-gradient(135deg, var(--neon-2), #d9ffe9);
  box-shadow: 0 10px 24px -16px rgba(111, 209, 184, 0.85);
}
.copy-btn.copy-failed {
  color: #ffe4e6;
  border-color: rgba(248, 113, 113, 0.65);
  background: rgba(248, 113, 113, 0.16);
  box-shadow: 0 10px 24px -18px rgba(248, 113, 113, 0.75);
}
.copy-btn-label {
  display: inline-block;
  white-space: nowrap;
}
.order-player {
  font-size: 0.82rem;
  color: var(--fg-muted);
  word-break: break-all;
}
.order-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  margin-inline-start: auto;
}
.order-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--neon);
}
.orders-section-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gold);
  margin: 1.8rem 0 0.9rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--border-soft);
}
.order-date {
  font-size: 0.75rem;
  color: var(--fg-muted);
}

/* Empty state used by orders / wallet pages */
.empty-state {
  max-width: 600px;
  margin: 2rem auto;
  text-align: center;
  padding: 1.6rem;
  border-radius: 1.1rem;
  background: var(--gradient-card);
  border: 1px solid var(--border-soft);
  color: var(--fg-muted);
}
.empty-state p { margin: 0 0 1rem; }

/* ---- Checkout — bigger Player ID input ---- */
.checkout-field-label {
  display: block;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 0.55rem;
  color: var(--fg);
}
.checkout-id-wrap {
  position: relative;
  background: linear-gradient(135deg, rgba(247, 219, 130, 0.15), rgba(111, 209, 184, 0.15));
  padding: 2px;
  border-radius: 1rem;
  transition: box-shadow .25s;
}
.checkout-id-wrap:focus-within {
  box-shadow: 0 0 0 3px rgba(247, 219, 130, 0.25);
}
.checkout-id-input {
  width: 100%;
  background: rgba(10, 10, 10, 0.95);
  border: none !important;
  border-radius: 0.9rem;
  padding: 1rem 1.1rem !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.25rem !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--fg);
  text-align: center;
  outline: none;
  min-height: 60px !important;
}
.checkout-id-input::placeholder {
  color: rgba(247, 219, 130, 0.4);
  font-weight: 500;
  letter-spacing: normal;
}
.checkout-id-hint {
  font-size: 0.85rem !important;
  margin-top: 0.7rem !important;
  color: var(--fg-muted);
}

/* ---- Live navbar balance pulse on update ---- */
@keyframes tg-balance-pulse-anim {
  0%   { transform: scale(1);    color: var(--fg); }
  40%  { transform: scale(1.18); color: #4ade80; text-shadow: 0 0 12px rgba(74, 222, 128, 0.6); }
  100% { transform: scale(1);    color: var(--fg); }
}
.tg-balance-pulse {
  display: inline-block;
  animation: tg-balance-pulse-anim 1.1s ease-out;
}

/* ---- Flash alert link styling (for "اضغط هنا" links) ---- */
.alert .alert-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 800;
}
.alert .alert-link:hover { opacity: 0.85; }



/* =====================================================================
   V67.1 — provider tabs + provider badges (admin pages).
   The user explicitly asked for a clear visual separation between the
   two suppliers (Shop2Topup is primary; G2Bulk is secondary). Tabs sit
   above status filters; badges colour-code each row.
   ===================================================================== */
.provider-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.55);
  border: 1px solid var(--border-soft);
  color: var(--fg);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: border-color .18s, background .18s, transform .15s;
  min-height: 40px;
}
.provider-tab:hover { border-color: var(--neon-2); }
.provider-tab.is-active {
  background: rgba(111, 209, 184, 0.12);
  border-color: var(--neon-2);
  color: var(--neon-2);
  box-shadow: 0 0 0 3px rgba(111, 209, 184, 0.10);
}
.provider-tab-pill {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--gradient-neon);
  color: var(--primary-fg);
  font-size: 0.65rem;
  font-weight: 800;
  margin-inline-start: 0.3rem;
}

.provider-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}
.provider-server2 {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.provider-server1 {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

/* Status pills used in the admin orders table (port from legacy css). */
.status {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}
.status.waiting    { background: rgba(111, 209, 184, 0.12); color: #6fd1b8;  border: 1px solid rgba(111, 209, 184, 0.35); }
.status.processing { background: rgba(251, 191, 36, 0.14); color: #f7db82;  border: 1px solid rgba(251, 191, 36, 0.4); }
.status.pending    { background: rgba(168, 85, 247, 0.14); color: #c084fc;  border: 1px solid rgba(168, 85, 247, 0.4); }
.status.completed  { background: rgba(34, 197, 94, 0.14);  color: #4ade80;  border: 1px solid rgba(34, 197, 94, 0.4); }
.status.rejected   { background: rgba(239, 68, 68, 0.14);  color: #f87171;  border: 1px solid rgba(239, 68, 68, 0.4); }

/* V84: admin orders → user name link. Highlights the owner of each
   purchase and signals it is clickable (opens the user's profile). */
.user-link {
  display: inline-block;
  color: #93c5fd;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.15s ease, transform 0.15s ease;
}
.user-link:hover,
.user-link:focus-visible {
  color: #bfdbfe;
  text-decoration: underline;
  transform: translateY(-1px);
}
.user-link strong { font-weight: 800; }
.user-link .muted { color: #94a3b8; font-weight: 500; }

.btn.success {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #052e16;
  border: none;
}
.btn.danger {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #1f0606;
  border: none;
}


/* ============================================================
   V68: admin games tab — two-server columns, server toggle,
   and easy ordering controls.
   ============================================================ */

.admin-servers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 1024px) {
  .admin-servers-grid { grid-template-columns: 1fr; }
}

.admin-server-col {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.admin-server-col[data-provider="server1"] {
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.08) inset;
}
.admin-server-col[data-provider="server2"] {
  border-color: rgba(34, 197, 94, 0.35);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.08) inset;
}

.admin-server-col.server-off {
  opacity: 0.55;
  filter: grayscale(60%);
}
.admin-server-col.server-off::after {
  content: "ألعاب هذا السيرفر مخفية من الواجهة الرئيسية";
  display: block;
  margin-top: 4px;
  text-align: center;
  font-size: 0.85rem;
  color: #f7db82;
  background: rgba(251, 191, 36, 0.08);
  border: 1px dashed rgba(251, 191, 36, 0.35);
  border-radius: 10px;
  padding: 8px;
}

.admin-server-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 4px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-server-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-server-title .small { font-size: 0.78rem; }

/* Server enable/disable toggle (styled checkbox) */
.server-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.85rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.server-toggle input { width: auto; margin: 0; }
.server-toggle .on-label  { color: #4ade80; display: inline; }
.server-toggle .off-label { color: #f87171; display: none; }
.server-toggle:has(input:not(:checked)) {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
}
.server-toggle:has(input:not(:checked)) .on-label  { display: none; }
.server-toggle:has(input:not(:checked)) .off-label { display: inline; }

/* Game list inside a column */
.server-games {
  max-height: 620px;
  overflow: auto;
  padding-inline-end: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.server-games .admin-game-row {
  margin: 0;
}

/* "إظهار في الرئيسية" inline label */
.home-cb-label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 0.82rem;
}
.home-cb-label input { width: auto; margin: 0; }

/* Sort controls — Up / Number / Down */
.sort-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 2px;
}
.sort-controls .sort-input {
  width: 56px;
  padding: 6px 4px;
  margin: 0;
  text-align: center;
  font-weight: 700;
  border: none;
  background: transparent;
  border-radius: 6px;
}
.sort-controls .icon-btn {
  padding: 4px 8px;
  min-width: 28px;
  font-size: 0.85rem;
  line-height: 1;
}

/* Brief flash highlight after a row is moved */
@keyframes rowFlash {
  0%   { background: rgba(132, 204, 22, 0.22); }
  100% { background: rgba(255, 255, 255, 0.04); }
}
.admin-game-row.row-flash {
  animation: rowFlash 0.4s ease-out;
}


/* ─────────────────────────────────────────────────────────────────────
   V78 — Per-game profit margin (admin/games.html)
   Compact inline control + badge on the row title.
   ───────────────────────────────────────────────────────────────────── */
.margin-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 2px 6px;
}
.margin-control .small {
  font-size: 0.75rem;
}
.margin-control .margin-input {
  width: 64px;
  padding: 6px 4px;
  text-align: center;
  background: transparent;
  border: none;
  color: inherit;
}
.margin-control .margin-input::placeholder {
  opacity: 0.5;
}

.badge-margin {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: 6px;
  padding: 1px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.22), rgba(245, 158, 11, 0.22));
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.45);
  border-radius: 999px;
  white-space: nowrap;
}



/* ─────────────────────────────────────────────────────────────────────
   V67.3 — بطاقة تأكيد طلب شحن المحفظة (deposit toast)
   تُستخدم داخل .alert.success كرسالة موحّدة، مرتّبة، وبأسلوب نيون.
   ───────────────────────────────────────────────────────────────────── */
.messages .alert .tg-deposit-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
}
.tg-deposit-toast__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(111, 209, 184, 0.25), rgba(124, 58, 237, 0.25));
  border: 1px solid rgba(111, 209, 184, 0.55);
  color: #5eefc2;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 0 14px rgba(111, 209, 184, 0.25);
}
.tg-deposit-toast__body {
  flex: 1 1 auto;
  min-width: 0;
}
.tg-deposit-toast__title {
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.45;
  margin-bottom: 0.25rem;
  color: var(--fg, #f1f1ff);
}
.tg-deposit-toast__title strong {
  color: var(--neon, #6fd1b8);
  font-weight: 800;
}
.tg-deposit-toast__desc {
  font-size: 0.86rem;
  line-height: 1.6;
  opacity: 0.92;
}
.tg-deposit-toast__link {
  display: inline-block;
  margin-inline-start: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(111, 209, 184, 0.12);
  border: 1px solid rgba(111, 209, 184, 0.45);
  color: #5eefc2;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
  transition: background-color .15s ease, transform .15s ease;
}
.tg-deposit-toast__link:hover {
  background: rgba(111, 209, 184, 0.22);
  transform: translateY(-1px);
}


/* ----------------------------------------------------------------------- */
/* V71: Player-name validation button + result message on /checkout page.   */
/* The button calls /api/validate-player and shows the player's display     */
/* name (when the supplier returns one) before the user confirms purchase.  */
/* ----------------------------------------------------------------------- */
.player-validate-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.player-validate-btn {
  align-self: flex-start;
  padding: 0.45rem 0.95rem;
  font-size: 0.88rem;
  border-radius: 0.75rem;
  background: rgba(111, 209, 184, 0.10);
  border: 1px solid rgba(111, 209, 184, 0.45);
  color: var(--neon-2);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, border-color .15s ease;
}
.player-validate-btn:hover:not(:disabled) {
  background: rgba(111, 209, 184, 0.20);
  border-color: var(--neon-2);
  transform: translateY(-1px);
}
.player-validate-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.player-validate-result {
  min-height: 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0;
  border-radius: 0.6rem;
  transition: background-color .15s ease, color .15s ease, padding .15s ease;
}
.player-validate-result.vp-ok {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.30);
  padding: 0.5rem 0.75rem;
}
.player-validate-result.vp-warn {
  color: #f7db82;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.30);
  padding: 0.5rem 0.75rem;
}
.player-validate-result.vp-err {
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.30);
  padding: 0.5rem 0.75rem;
}



/* ═══════════════════════════════════════════════════════════════════
   V79 — Admin home-page inline editor + simplified /admin/games page.

   The admin-only DOM is wrapped in `.tg-home-admin-bar` (top of the
   home grid) and per-card `.tg-card-admin-toolbar` (overlay on each
   game card). For non-admin visitors none of these elements render,
   so this whole block is dormant until an admin logs in.
   ═══════════════════════════════════════════════════════════════════ */

/* Admin search/add bar above the home games grid */
.tg-home-admin-bar {
  background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(111, 209, 184, .08));
  border: 1px solid rgba(124, 58, 237, .35);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 1.2rem;
  position: relative;
}
.tg-home-admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tg-home-admin-tag {
  font-weight: 700;
  color: #c4b5fd;
  font-size: 14px;
}
.tg-home-admin-hint { font-size: 12.5px; }
.tg-home-admin-search-wrap { position: relative; }
.tg-home-admin-search-wrap input[type="search"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10, 10, 10, .7);
  color: #fff;
  font: inherit;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tg-home-admin-search-wrap input[type="search"]:focus {
  border-color: rgba(247, 219, 130, .55);
  box-shadow: 0 0 0 3px rgba(247, 219, 130, .18);
}

.tg-home-admin-suggest {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: rgba(10, 10, 10, .98);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 18px 42px -16px rgba(0,0,0,.7);
  max-height: 360px;
  overflow-y: auto;
  z-index: 30;
}
.tg-home-admin-suggest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.tg-home-admin-suggest-row:last-child { border-bottom: 0; }
.tg-home-admin-suggest-thumb {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  overflow: hidden; flex-shrink: 0;
}
.tg-home-admin-suggest-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.tg-home-admin-suggest-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.tg-home-admin-suggest-meta b {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tg-home-admin-add-btn {
  appearance: none;
  background: linear-gradient(135deg, #f7db82, #6fd1b8);
  border: 0;
  color: #0b0820;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  transition: transform .15s ease, opacity .15s ease;
}
.tg-home-admin-add-btn:hover:not(:disabled) { transform: scale(1.03); }
.tg-home-admin-add-btn:disabled {
  background: rgba(255,255,255,.08);
  color: #94a3b8;
  cursor: not-allowed;
}
.tg-home-admin-empty {
  padding: 14px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}
.tg-home-admin-msg {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.tg-home-admin-msg.is-ok {
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.35);
  color: #bbf7d0;
}
.tg-home-admin-msg.is-err {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.4);
  color: #fecaca;
}
.tg-home-admin-msg.is-info {
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.35);
  color: #bfdbfe;
}

/* Per-card slot wrapper + admin toolbar overlay.
   V79.1: shown by default — was opacity:0 + :hover, but hover-revealed
   UI is invisible on touch devices and was getting swallowed by stacking
   contexts created by .v60-game-card's transform:translate3d. Visible-
   by-default is more discoverable AND more bulletproof against weird
   z-index regressions. */
.tg-game-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tg-game-slot > .v60-game-card {
  flex: 1;
  width: 100%;
}
.tg-card-admin-toolbar {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  display: flex;
  gap: 4px;
  /* z-index 10 wins decisively over the .v60-game-card inner stacking
     context (transform-induced, paints at z=auto in the slot's parent
     stacking context). */
  z-index: 10;
  background: rgba(11, 8, 32, .88);
  border: 1px solid rgba(247, 219, 130, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 4px;
  pointer-events: auto;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.6);
}
@media (hover: hover) {
  /* On desktop add a subtle reveal-on-hover effect, but the toolbar is
     ALWAYS clickable — we just dim it slightly when not hovered so the
     card art stays unobstructed at rest. */
  .tg-card-admin-toolbar { opacity: .85; transition: opacity .18s ease; }
  .tg-game-slot:hover .tg-card-admin-toolbar,
  .tg-game-slot:focus-within .tg-card-admin-toolbar { opacity: 1; }
}
.tg-card-admin-btn {
  appearance: none;
  border: 0;
  background: rgba(255,255,255,.10);
  color: #fff;
  width: 30px; height: 30px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
  transition: background .15s ease, transform .12s ease;
  /* Make sure absolutely nothing blocks clicks. */
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
.tg-card-admin-btn:hover { background: rgba(247, 219, 130, .55); transform: scale(1.06); }
.tg-card-admin-btn:active { transform: scale(.94); }
.tg-card-admin-btn.danger:hover { background: rgba(239, 68, 68, .65); }
.tg-game-slot.row-flash > .v60-game-card {
  outline: 2px solid rgba(247, 219, 130, .55);
  outline-offset: 2px;
  transition: outline .35s ease;
}
.tg-game-slot.is-moving > .v60-game-card,
.tg-game-slot.is-removing > .v60-game-card {
  filter: brightness(.75) saturate(.7);
}

/* ═══════════════════════════════════════════════════════════════════
   /admin/games — simplified list rows.
   ═══════════════════════════════════════════════════════════════════ */
.admin-games-list-simple {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.admin-game-simple-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.admin-game-simple-row:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}
.admin-game-simple-row input[type="checkbox"] { width: auto; flex-shrink: 0; }
.admin-game-simple-row .game-emoji { font-size: 18px; }
.admin-game-simple-row .game-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.admin-game-simple-row .btn.tiny {
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 6px;
}



/* ─────────────────────────────────────────────────────────────────────
   V79.1 — Admin quick-link banner above /products and /products/.../group
   pages. Sticky-feel, gradient-bordered, shown to admin only. The button
   carries the .btn.primary styling already defined above; this wrapper
   provides the page-wide layout + the muted helper text underneath.
   ───────────────────────────────────────────────────────────────────── */
.tg-admin-quicklink {
  max-width: 1280px;
  margin: 0.8rem auto 0;
  padding: 0.8rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(247, 219, 130, .12), rgba(111, 209, 184, .10));
  border: 1px solid rgba(247, 219, 130, .35);
  border-radius: 0.9rem;
  position: relative;
}
@media (min-width: 768px) {
  .tg-admin-quicklink { padding: 0.9rem 1.4rem; margin-inline: 2rem; }
}
@media (min-width: 1024px) {
  .tg-admin-quicklink { margin-inline: 3rem; }
}
.tg-admin-quicklink .btn.primary {
  flex-shrink: 0;
  font-weight: 800;
}
.tg-admin-quicklink .muted {
  font-size: 0.82rem;
  line-height: 1.45;
}



/* ─────────────────────────────────────────────────────────────────────
   V79.2 — Golden "show on home" star checkbox in /admin/games.
   A distinctive gold-bordered checkbox sits next to the regular
   active-game checkbox. When checked the game appears on the public
   homepage grid. The star shape makes it instantly distinguishable
   from the standard blue active toggle even at a glance.
   ───────────────────────────────────────────────────────────────────── */
.home-star-cb {
  width: auto !important;
  flex-shrink: 0;
  accent-color: #f7db82;
  /* Custom appearance: golden border, slightly larger than normal. */
  appearance: none;
  -webkit-appearance: none;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid rgba(251, 191, 36, 0.6);
  border-radius: 4px;
  background: rgba(251, 191, 36, 0.08);
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.home-star-cb:hover {
  border-color: #f7db82;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18);
}
.home-star-cb:checked {
  background: linear-gradient(135deg, #f7db82, #f59e0b);
  border-color: #f59e0b;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}
.home-star-cb:checked::after {
  content: "★";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #1a0d2a;
  font-weight: 900;
  line-height: 1;
}

/* ============================================================
   V81 — Compact footer (used on every Flask page now).
   Heavy multi-column footer (quick links / legal / support)
   was moved to the React portal SPA at / per user request, so
   inner pages only carry a single hairline copyright bar.
   ============================================================ */
.v60-footer.v60-footer-compact {
  margin-top: 3rem;
  padding: 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(12, 10, 20, 0.85);
}
.v60-footer.v60-footer-compact .v60-footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  font-size: 0.78rem;
  color: var(--fg-muted, rgba(255,255,255,0.55));
  flex-wrap: wrap;
}
@media (min-width: 720px) {
  .v60-footer.v60-footer-compact .v60-footer-bottom {
    flex-direction: row;
    text-align: start;
  }
}
.v60-footer-mini-links {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
}
.v60-footer-mini-links a {
  color: var(--fg, #fff);
  opacity: .8;
  transition: opacity .18s, color .18s;
}
.v60-footer-mini-links a:hover { opacity: 1; color: var(--neon-2, #6fd1b8); }

/* ============================================================
   V81 — Mobile navbar polish.
   When all links (Games / All games / My orders / balance /
   profile / logout) collide on a narrow phone, the inner row
   was wrapping in awkward ways. Allow horizontal scroll for
   the link cluster so the action chips stay visible.
   ============================================================ */
@media (max-width: 640px) {
  .v60-nav-inner {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .v60-nav-links {
    width: 100%;
    order: 3;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .v60-nav-links::-webkit-scrollbar { display: none; }
  .v60-nav-links a { white-space: nowrap; }
  .v60-brand { font-size: 1rem; }
  .v60-brand svg { width: 16px; height: 16px; }
  .v60-nav-actions { gap: 0.3rem; }
  .v60-nav-actions .v60-btn { padding: 0.45rem 0.7rem; font-size: 0.78rem; min-height: 36px; }
  .v60-nav-balance { padding: 0.4rem 0.7rem; font-size: 0.8rem; }
}

/* ============================================================
   V81 — /all-games + /orders mobile fix.
   Page hero padding was eating screen real-estate on narrow
   phones; tighten it so the grid/list starts higher.
   ============================================================ */
@media (max-width: 640px) {
  .page-head {
    padding: 1.2rem 0.85rem 0.4rem !important;
  }
  .page-head h1 { font-size: 1.45rem; }
  .page-head p  { font-size: 0.88rem; line-height: 1.5; }
  .tg-search-wrap { padding: 0 0.85rem; margin-bottom: 0.9rem; }
  .v60-games-grid {
    padding: 0 clamp(0.7rem, 4vw, 1rem) 3rem !important;
    /* 2 columns on phones so each card's artwork, title and price have
       room to breathe (3-up was cramped and washed out the covers). */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(0.6rem, 3vw, 0.85rem) !important;
  }
  .v60-game-card { border-radius: clamp(0.95rem, 3.5vw, 1.2rem); }
  /* Taller 4:5 cover — the artwork is the hero on a 2-up grid. */
  .v60-game-cover { aspect-ratio: 4 / 5; }
  .v60-game-body { padding: clamp(0.7rem, 3vw, 0.9rem) clamp(0.6rem, 2.8vw, 0.85rem) clamp(0.8rem, 3.2vw, 1rem); }
  .v60-game-title {
    font-size: clamp(0.9rem, 4vw, 1.05rem);
    line-height: 1.2;
    min-height: 2.2em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .v60-game-price { font-size: clamp(0.78rem, 3.4vw, 0.9rem); }
  .orders-header  { padding: 0 0.85rem; }
  .orders-list    { padding: 0 0.85rem; }
  .orders-filter  { gap: 0.35rem; }
  .filter-btn     { padding: 0.4rem 0.7rem; font-size: 0.78rem; }
  .order-card     { padding: 0.85rem 0.9rem; }
}

/* ============================================================
   V81.1 — Orders page deep mobile polish.
   The card-top + card-bottom rows were wrapping badly on
   narrow phones: the status badge floated below the game
   name, and the order code + price overlapped the player ID.
   Lock the layout to a clean column on phones so each line
   stays whole and readable.
   ============================================================ */
@media (max-width: 640px) {
  .order-card { gap: 0.6rem; }

  /* Top row: game info | status badge — keep on the same line. */
  .order-card-top {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
  }
  .order-game-info { min-width: 0; }
  .order-game-name { font-size: 0.95rem; }
  .order-pkg       { font-size: 0.78rem; }
  .order-status-wrap { flex-shrink: 0; }
  .order-status-badge {
    padding: 0.28rem 0.55rem;
    font-size: 0.7rem;
  }

  /* Bottom row: meta on top, price/date on right — but allow wrap. */
  .order-card-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding-top: 0.6rem;
  }
  .order-meta {
    width: 100%;
    gap: 0.4rem 0.7rem;
    flex-wrap: wrap;
  }
  .order-code {
    font-size: 0.74rem;
    padding: 0.18rem 0.45rem;
  }
  .copy-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    padding: 0;
    border-radius: 0.45rem;
  }
  .copy-btn-label { display: none; }
  .order-player { font-size: 0.74rem; max-width: 100%; }
  .order-right {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-inline-start: 0;
    width: 100%;
    gap: 0.7rem;
  }
  .order-price { font-size: 0.95rem; }
  .order-date  { font-size: 0.7rem; }

  .orders-header h1 { font-size: 1.3rem; }
  .orders-filter {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .orders-filter::-webkit-scrollbar { display: none; }
  .filter-btn { white-space: nowrap; flex-shrink: 0; min-height: 34px; }
}

/* ============================================================
   V81.2 — Pinned "Admin" link in navbar.
   Re-uses the .v60-nav-pinned pill so admins can reach the
   dashboard in one tap from any inner page, matching the
   existing "my orders" affordance.
   ============================================================ */
.v60-nav-links a.v60-nav-pinned-admin {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(60, 40, 110, 0.55);
  border: 1px solid rgba(247, 219, 130, 0.45);
  color: #f5d0fe;
  transition: color .18s, border-color .18s, background .18s, transform .18s;
}
.v60-nav-links a.v60-nav-pinned-admin:hover {
  color: #fff;
  background: linear-gradient(135deg, #f7db82, #a855f7);
  border-color: transparent;
  transform: translateY(-1px);
}

/* ============================================================
   V81.2 — Unify Flask side with the portal noir/gold accents.
   Subtle: keeps the neon CSS intact but adds a faint gold edge
   to the navbar + footer so the visual jump from `/` to `/shop`
   is much softer. No structural changes required.
   ============================================================ */
.v60-nav {
  border-bottom-color: rgba(217, 168, 90, 0.22);
}
.v60-footer.v60-footer-compact {
  border-top-color: rgba(217, 168, 90, 0.22);
}

/* ============================================================
   V86 — Language + Currency switcher for Flask pages.
   Renders inside the games-shop + every other inner-page header
   so the visitor can swap lang/cur without bouncing back to the
   portal SPA. Visually mirrors the SPA's `LangCurrencySwitcher`
   (segmented AR/EN pill + currency dropdown with flag + code).
   ============================================================ */
.v60-langcur {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.v60-langcur-pills {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(247, 219, 130, 0.04);
  border: 1px solid rgba(217, 168, 90, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.v60-langcur-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(247, 219, 130, 0.7);
  transition: color .18s ease, background .25s ease;
  text-decoration: none;
}
.v60-langcur-pill:hover {
  color: var(--neon, #f7db82);
  background: rgba(247, 219, 130, 0.08);
}
.v60-langcur-pill.is-active {
  background: var(--gradient-neon, linear-gradient(135deg, #f7db82, #d9a85a));
  color: #1a1410;
  box-shadow: 0 0 14px -4px rgba(247, 219, 130, 0.55);
}
.v60-langcur-cur {
  position: relative;
}
.v60-langcur-cur > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(247, 219, 130, 0.85);
  background: rgba(247, 219, 130, 0.04);
  border: 1px solid rgba(217, 168, 90, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.v60-langcur-cur > summary::-webkit-details-marker { display: none; }
.v60-langcur-cur > summary:hover {
  color: var(--neon, #f7db82);
  border-color: rgba(217, 168, 90, 0.5);
}
.v60-langcur-flag {
  font-size: 1rem;
  line-height: 1;
}
.v60-langcur-code {
  font-variant-numeric: tabular-nums;
}
.v60-langcur-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  border-radius: 14px;
  background: rgba(10, 8, 14, 0.96);
  border: 1px solid rgba(217, 168, 90, 0.35);
  box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 60;
}
[dir="rtl"] .v60-langcur-menu {
  right: auto;
  left: 0;
}
.v60-langcur-opt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(247, 219, 130, 0.82);
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.v60-langcur-opt:hover {
  background: rgba(247, 219, 130, 0.08);
  color: var(--neon, #f7db82);
}
.v60-langcur-opt.is-active {
  background: rgba(247, 219, 130, 0.14);
  color: var(--neon, #f7db82);
}
.v60-langcur-opt .v60-langcur-code {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  width: 2.6rem;
  opacity: 0.7;
}
.v60-langcur-opt .v60-langcur-name {
  flex: 1 1 auto;
  font-weight: 400;
  font-size: 0.78rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.v60-langcur-opt .v60-langcur-sym {
  font-size: 0.7rem;
  opacity: 0.55;
}
@media (max-width: 640px) {
  .v60-langcur { order: 4; width: 100%; justify-content: flex-end; }
  .v60-langcur-pill { padding: 0.28rem 0.45rem; font-size: 0.68rem; }
  .v60-langcur-cur > summary { padding: 0.28rem 0.55rem; font-size: 0.68rem; }
}

/* V87.3 — inline Syrian flag (swapped at runtime from the 🇸🇾 emoji).
   Sized to track the surrounding font, with the same aspect ratio (3:2)
   the regional flag emoji uses across modern OSes. */
.tg-syr-flag-wrap {
  display: inline-block;
  vertical-align: -0.18em;
  line-height: 1;
}
.tg-syr-flag-wrap .tg-syr-flag {
  display: inline-block;
  width: 1.35em;
  height: 0.9em;
  border-radius: 2px;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.35);
}

/* ===================================================================
   Phase 1 — Wallet recharge payment-method TILES (3 per row).
   Replaces the legacy <select> dropdown with a logo grid that mirrors
   the reference layout: large, proportional brand tiles, three across.
   =================================================================== */
.pay-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin:6px 0 4px;
}
/* User request: remove the "رائج"/Hot trending badge from games everywhere.
   Templates were cleaned; this is a belt-and-braces guard for any remaining
   or cached markup. */
.v60-hot-badge{ display:none !important; }

   (the square full-width logo wasted a lot of vertical space). */
@media (max-width:640px){
  .pay-grid{ gap:8px; }
  .pay-tile{ padding:8px 6px 9px; gap:6px; border-radius:14px; }
  .pay-tile__logo{
    width:auto; height:46px; aspect-ratio:auto;
    border-radius:10px; background:transparent;
  }
  .pay-tile__logo img{ width:auto; max-width:100%; height:100%; }
  .pay-tile__logo span{ font-size:30px !important; }
  .pay-tile__name{ font-size:11.5px; line-height:1.2; }
  .pay-tile__check{ width:18px; height:18px; top:5px; font-size:11px; }
}

.pay-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:12px 10px 14px;
  border-radius:18px;
  border:1.5px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.pay-tile:hover{
  transform:translateY(-3px);
  border-color:rgba(243,201,105,.55);
  background:rgba(255,255,255,.05);
}
.pay-tile__logo{
  width:100%;
  aspect-ratio:1/1;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.25);
}
.pay-tile__logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.pay-tile__name{
  font-size:13.5px;
  font-weight:700;
  line-height:1.25;
  text-align:center;
  color:var(--ink, #e9eef5);
}
.pay-tile__radio{ position:absolute; opacity:0; pointer-events:none; }

/* selected state */
.pay-tile.is-selected{
  border-color:#f3c969;
  background:linear-gradient(180deg, rgba(243,201,105,.16), rgba(243,201,105,.04));
  box-shadow:0 0 0 1px #f3c969, 0 10px 28px -12px rgba(243,201,105,.55);
}
.pay-tile__check{
  position:absolute;
  top:8px; inset-inline-start:8px;
  width:22px; height:22px;
  border-radius:50%;
  background:#f3c969; color:#11141a;
  display:none; align-items:center; justify-content:center;
  font-size:13px; font-weight:900;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.pay-tile.is-selected .pay-tile__check{ display:flex; }

/* in-store address reveal */
.store-addr-toggle{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:6px;
  background:none; border:none; cursor:pointer;
  color:#f3c969; font-size:13.5px; font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
}
.store-addr-box{
  margin-top:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px dashed rgba(243,201,105,.45);
  background:rgba(243,201,105,.06);
  font-size:14px; line-height:1.6;
}
.store-addr-box .store-addr-map{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px; padding:7px 14px;
  border-radius:999px; background:#f3c969; color:#11141a;
  font-weight:800; text-decoration:none; font-size:13px;
}
/* V93 — admin bulk rejection + linked-provider attempt trail. */
.admin-orders-reject-all {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.07);
}

.admin-orders-reject-all .btn {
  min-height: 44px;
}

.provider-attempts {
  width: min(300px, 100%);
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  text-align: start;
  white-space: normal;
}

.provider-attempts__title {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 800;
}

.provider-attempt {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  padding-bottom: 10px;
}

.provider-attempt:last-child {
  padding-bottom: 0;
}

.provider-attempt:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 11px;
  top: 24px;
  bottom: 2px;
  width: 2px;
  background: rgba(255, 255, 255, 0.14);
}

.provider-attempt__index {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(94, 159, 232, 0.45);
  border-radius: 50%;
  background: #17171a;
  color: #8fc0f3;
  font-size: 11px;
  font-weight: 800;
}

.provider-attempt__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
}

.provider-attempt__outcome {
  color: #a9d2fa;
  font-size: 11px;
  font-weight: 800;
}

.provider-attempt--completed .provider-attempt__outcome,
.provider-attempt--accepted .provider-attempt__outcome {
  color: #72bc8f;
}

.provider-attempt--rejected .provider-attempt__outcome,
.provider-attempt--failed .provider-attempt__outcome,
.provider-attempt--duplicate .provider-attempt__outcome {
  color: #e97366;
}

.provider-attempt__reason {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .admin-orders-reject-all {
    align-items: stretch;
  }

  .admin-orders-reject-all .btn {
    width: 100%;
  }
}