/* ==========================================================================
   GameSouq — Core Styles
   Mobile-first single column app shell, capped at --max-width so it also
   reads fine on desktop. Loaded on every page after theme.css.
   ========================================================================== */

@import url('theme.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--nav-height) + 18px);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
input, textarea, select { font-family: inherit; }

::selection { background: var(--accent-dim); }

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

.app-shell {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  min-height: 100vh;
  background: var(--bg-app);
}

.h-display { font-family: var(--font-display); letter-spacing: -0.01em; }
.container { padding: 0 16px; }

/* ---------- Skeleton / loading ---------- */
.skel {
  background: linear-gradient(100deg, var(--bg-surface-2) 30%, var(--bg-elevated) 50%, var(--bg-surface-2) 70%);
  background-size: 200% 100%;
  animation: skel-shine 1.3s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes skel-shine { to { background-position: -150% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ========================================================================
   Top bar
   ======================================================================== */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--bg-app); padding: 14px 16px 10px; }
.topbar-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.location-pill { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.location-pill svg { color: var(--accent); width: 20px; height: 20px; }

.icon-btn {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  width: 38px; height: 38px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary); position: relative; flex: 0 0 auto;
}
.icon-btn svg { width: 19px; height: 19px; }

.notif-dot {
  position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-cyan); box-shadow: 0 0 0 2px var(--bg-app);
}

.search-bar {
  display: flex; align-items: center; gap: 10px; background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 12px 14px; color: var(--text-secondary);
}
.search-bar svg { width: 18px; height: 18px; flex: 0 0 auto; }
.search-bar input { background: none; border: none; outline: none; color: var(--text-primary); width: 100%; font-size: 14.5px; }
.search-bar input::placeholder { color: var(--text-muted); }

.page-header {
  position: sticky; top: 0; z-index: 30; background: var(--bg-app);
  display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border-subtle);
}
.page-header h1 { font-family: var(--font-display); font-size: 17px; margin: 0; flex: 1; }
.page-header .icon-btn { background: var(--bg-surface); }

/* ========================================================================
   Hero banner
   ======================================================================== */
.hero-banner {
  margin: 6px 16px 22px; border-radius: var(--r-lg); padding: 22px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(46,230,214,0.22) 0%, transparent 45%), var(--accent-gradient);
  color: #06101f; position: relative; overflow: hidden; box-shadow: var(--shadow-card);
}
.hero-banner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 110%, rgba(255,255,255,0.18), transparent 60%); }
.hero-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; margin: 0 0 6px; position: relative; }
.hero-banner h2 { font-family: var(--font-display); font-size: 24px; line-height: 1.15; margin: 0 0 8px; max-width: 80%; position: relative; }
.hero-banner p { margin: 0 0 16px; font-size: 13.5px; opacity: .85; max-width: 78%; position: relative; }
.hero-cta { display: inline-flex; align-items: center; gap: 6px; background: #06101f; color: #fff; font-weight: 600; font-size: 13.5px; padding: 10px 16px; border-radius: var(--r-pill); position: relative; border: none; }

/* ========================================================================
   Section header
   ======================================================================== */
.section-header { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 16px 14px; }
.section-header h3 { font-family: var(--font-display); font-size: 18px; margin: 0; }
.see-all { font-size: 13px; font-weight: 600; color: var(--accent-cyan); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ========================================================================
   Categories row
   ======================================================================== */
.categories-row { display: flex; gap: 18px; overflow-x: auto; padding: 2px 16px 6px; scrollbar-width: none; }
.categories-row::-webkit-scrollbar { display: none; }
.category-item { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; width: 76px; text-align: center; }
.category-circle {
  width: 60px; height: 60px; border-radius: 50%; background: var(--accent-dim);
  border: 1px solid rgba(59,124,246,0.3); display: flex; align-items: center; justify-content: center;
  color: var(--accent); transition: transform .15s ease, box-shadow .15s ease;
}
.category-circle svg { width: 26px; height: 26px; }
.category-item:active .category-circle { transform: scale(0.93); box-shadow: 0 0 0 4px var(--accent-dim); }
.category-item span { font-size: 12px; color: var(--text-secondary); line-height: 1.25; }

/* ========================================================================
   Product grid + card
   ======================================================================== */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 16px; }
.product-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; display: block; position: relative; }
.product-card .thumb-wrap { position: relative; aspect-ratio: 4 / 3; background: var(--bg-surface-2); overflow: hidden; }
.product-card .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.product-card .fav-btn {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(10,13,20,0.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; border: none; color: #fff;
}
.product-card .fav-btn svg { width: 15px; height: 15px; }
.product-card .cat-tag {
  position: absolute; bottom: 8px; left: 8px; font-size: 10.5px; font-weight: 600;
  background: rgba(10,13,20,0.6); backdrop-filter: blur(4px); color: var(--accent-cyan); padding: 3px 8px; border-radius: var(--r-pill);
}
.product-card .body { padding: 10px 12px 12px; }
.product-card .price { font-family: var(--font-display); font-weight: 700; color: var(--accent-cyan); font-size: 14.5px; margin: 0 0 4px; }
.product-card .title { font-size: 13px; color: var(--text-primary); margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.product-card .meta { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.cat-section { margin-bottom: 6px; }

/* ========================================================================
   Buttons
   ======================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14.5px; border-radius: var(--r-pill); border: none; padding: 13px 20px; transition: transform .1s ease, opacity .15s ease; }
.btn:active { transform: scale(0.97); }
.btn-block { width: 100%; }
.btn-primary { background: var(--accent-gradient); color: #06101a; }
.btn-primary:disabled { opacity: .45; }
.btn-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-primary); }
.btn-ghost { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-subtle); }
.btn-danger { background: var(--danger-dim); color: var(--danger); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-whatsapp { background: #1fae5e; color: #fff; }
.btn-whatsapp svg { width: 18px; height: 18px; }

/* ========================================================================
   Bottom navigation
   ======================================================================== */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--bg-surface); border-top: 1px solid var(--border-subtle); display: flex; justify-content: center; }
.bottom-nav-inner { width: 100%; max-width: var(--max-width); display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; align-items: center; height: var(--nav-height); padding: 0 6px; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-muted); font-size: 11px; position: relative; }
.nav-item svg { width: 22px; height: 22px; }
.nav-item.active { color: var(--accent); }
.nav-item .nav-badge {
  position: absolute; top: -3px; right: 18px; background: var(--danger); color: #fff; font-size: 9px; font-weight: 700;
  min-width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.nav-sell { display: flex; flex-direction: column; align-items: center; transform: translateY(-14px); }
.nav-sell-circle {
  width: 52px; height: 52px; border-radius: 50%; background: var(--accent-gradient);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 5px var(--bg-app), 0 6px 18px rgba(59,124,246,0.5); color: #06101a; margin-bottom: 2px;
}
.nav-sell-circle svg { width: 24px; height: 24px; }
.nav-sell span { font-size: 11px; color: var(--text-muted); }

/* ========================================================================
   Forms
   ======================================================================== */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 7px; }
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.form-error { font-size: 12px; color: var(--danger); margin-top: 6px; }

.input, .textarea, .select {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
  padding: 13px 14px; color: var(--text-primary); font-size: 14.5px; outline: none; transition: border-color .15s ease;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); }
.textarea { resize: vertical; min-height: 100px; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }

.input-group { display: flex; gap: 8px; }
.input-prefix { background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--r-sm); display: flex; align-items: center; padding: 0 12px; font-size: 14px; color: var(--text-secondary); flex: 0 0 auto; }

.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.select { appearance: none; }

/* ========================================================================
   Cards / surfaces / misc
   ======================================================================== */
.card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 16px; }

.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: var(--r-pill); }
.badge-pro { background: var(--accent-gradient); color: #06101a; }
.badge-free { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-strong); }
.badge-success { background: var(--success-dim); color: var(--success); }
.badge-warning { background: var(--warning-dim); color: var(--warning); }
.badge-danger { background: var(--danger-dim); color: var(--danger); }

.avatar { border-radius: 50%; object-fit: cover; background: var(--bg-elevated); flex: 0 0 auto; }
.divider { height: 1px; background: var(--border-subtle); margin: 18px 0; border: none; }

.empty-state { text-align: center; padding: 60px 24px; color: var(--text-muted); }
.empty-state svg { width: 48px; height: 48px; color: var(--border-strong); margin-bottom: 14px; }
.empty-state h4 { color: var(--text-primary); font-family: var(--font-display); margin: 0 0 6px; }
.empty-state p { font-size: 13.5px; margin: 0 0 18px; }

/* ========================================================================
   Toast
   ======================================================================== */
#toast-root { position: fixed; bottom: calc(var(--nav-height) + 14px); left: 0; right: 0; display: flex; justify-content: center; z-index: 200; pointer-events: none; }
.toast { background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text-primary); padding: 11px 18px; border-radius: var(--r-pill); font-size: 13.5px; box-shadow: var(--shadow-pop); animation: toast-in .2s ease; }
.toast.error { border-color: var(--danger); color: var(--danger); }
.toast.success { border-color: var(--success); color: var(--success); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ========================================================================
   Overlay / modal / sheet
   ======================================================================== */
.overlay { position: fixed; inset: 0; background: rgba(5,7,12,0.7); display: flex; align-items: flex-end; justify-content: center; z-index: 100; }
.sheet { width: 100%; max-width: var(--max-width); background: var(--bg-surface); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 22px 18px 28px; border: 1px solid var(--border-subtle); animation: sheet-up .2s ease; }
@keyframes sheet-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sheet h3 { font-family: var(--font-display); margin: 0 0 6px; }
.sheet p { color: var(--text-secondary); font-size: 13.5px; margin: 0 0 18px; }
.sheet-actions { display: flex; gap: 10px; }

/* ========================================================================
   Auth pages
   ======================================================================== */
.auth-wrap { padding: 40px 24px; min-height: 100vh; display: flex; flex-direction: column; }
.auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; }
.auth-logo .mark { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; color: #06101a; font-family: var(--font-display); font-weight: 800; }
.auth-logo span { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.auth-wrap h1 { font-family: var(--font-display); font-size: 25px; margin: 0 0 6px; }
.auth-wrap .sub { color: var(--text-secondary); font-size: 13.5px; margin: 0 0 28px; }
.auth-foot { text-align: center; margin-top: 22px; font-size: 13.5px; color: var(--text-secondary); }
.auth-foot a { color: var(--accent-cyan); font-weight: 600; }
.divider-or { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 12.5px; margin: 18px 0; }
.divider-or::before, .divider-or::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

/* ========================================================================
   Photo upload grid (sell page)
   ======================================================================== */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.photo-slot {
  aspect-ratio: 1; border-radius: var(--r-sm); border: 1.5px dashed var(--border-strong);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text-muted); position: relative; overflow: hidden; background: var(--bg-input); gap: 4px; font-size: 11px; text-align: center;
}
.photo-slot svg { width: 20px; height: 20px; }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot .remove-btn { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(10,13,20,0.7); border: none; color: #fff; display: flex; align-items: center; justify-content: center; }
.photo-slot.locked { border-color: var(--border-subtle); opacity: .55; }
.photo-slot.locked svg { color: var(--text-muted); }

/* ========================================================================
   Tabs (My Ads)
   ======================================================================== */
.tabs { display: flex; gap: 8px; padding: 0 16px 16px; }
.tab-btn { flex: 1; text-align: center; padding: 10px 0; border-radius: var(--r-pill); border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-secondary); font-size: 13.5px; font-weight: 600; }
.tab-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-cyan); }

/* ========================================================================
   My Ads list item
   ======================================================================== */
.adrow { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.adrow .thumb { width: 78px; height: 78px; border-radius: var(--r-sm); object-fit: cover; background: var(--bg-surface-2); flex: 0 0 auto; }
.adrow .info { flex: 1; min-width: 0; }
.adrow .info .title { font-size: 13.5px; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.adrow .info .price { font-family: var(--font-display); color: var(--accent-cyan); font-weight: 700; font-size: 14px; margin: 0 0 6px; }
.adrow .actions { display: flex; gap: 8px; margin-top: 8px; }
.adrow .actions button { font-size: 12px; padding: 7px 11px; border-radius: var(--r-pill); border: 1px solid var(--border-subtle); background: var(--bg-surface-2); color: var(--text-secondary); }

/* ========================================================================
   Notifications
   ======================================================================== */
.notif-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
.notif-item.unread { background: var(--accent-dim); }
.notif-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; color: var(--accent); flex: 0 0 auto; }
.notif-icon svg { width: 18px; height: 18px; }
.notif-body p { margin: 0 0 3px; font-size: 13.5px; }
.notif-body span { font-size: 11.5px; color: var(--text-muted); }

/* ========================================================================
   Product detail page
   ======================================================================== */
.gallery { position: relative; aspect-ratio: 1/1; background: var(--bg-surface-2); overflow: hidden; }
.gallery-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track img { width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; flex: 0 0 100%; }
.gallery-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.gallery-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.35); }
.gallery-dots span.active { background: #fff; width: 16px; border-radius: 3px; }
.gallery-back { position: absolute; top: 14px; left: 14px; z-index: 5; }
.gallery-fav { position: absolute; top: 14px; right: 14px; z-index: 5; }

.pd-price { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--accent-cyan); margin: 0 0 6px; }
.pd-title { font-size: 17px; margin: 0 0 10px; }
.pd-meta-row { display: flex; gap: 14px; color: var(--text-muted); font-size: 12.5px; margin-bottom: 18px; flex-wrap: wrap; }
.pd-meta-row span { display: flex; align-items: center; gap: 5px; }
.pd-meta-row svg { width: 14px; height: 14px; }
.pd-section h4 { font-family: var(--font-display); font-size: 14px; margin: 0 0 10px; color: var(--text-secondary); }
.pd-section p { font-size: 14px; color: var(--text-primary); white-space: pre-wrap; }
.specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spec-box { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-sm); padding: 10px 12px; }
.spec-box span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.spec-box strong { font-size: 13.5px; }

.seller-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.seller-card .info { flex: 1; min-width: 0; }
.seller-card .info strong { display: block; font-size: 14.5px; }
.seller-card .info span { font-size: 12px; color: var(--text-muted); }
.chev { width: 16px; height: 16px; color: var(--text-muted); flex: 0 0 auto; }

.sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: var(--bg-surface); border-top: 1px solid var(--border-subtle); display: flex; justify-content: center; }
.sticky-cta-inner { width: 100%; max-width: var(--max-width); display: flex; gap: 10px; padding: 12px 16px; }

/* ========================================================================
   Account / Profile
   ======================================================================== */
.profile-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 20px 22px; }
.profile-hero .avatar { width: 84px; height: 84px; margin-bottom: 14px; border: 3px solid var(--bg-surface); box-shadow: 0 0 0 3px var(--accent-dim); }
.profile-hero h2 { font-family: var(--font-display); margin: 0 0 4px; font-size: 19px; }
.profile-hero .sub { color: var(--text-muted); font-size: 13px; margin: 0; }
.profile-stats { display: flex; justify-content: center; gap: 28px; margin-top: 16px; }
.profile-stats div { text-align: center; }
.profile-stats strong { display: block; font-family: var(--font-display); font-size: 17px; }
.profile-stats span { font-size: 11.5px; color: var(--text-muted); }

.menu-list { padding: 0 16px; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 15px 4px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); font-size: 14px; font-weight: 500; }
.menu-item .ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--bg-surface); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.menu-item .ic svg { width: 17px; height: 17px; }
.menu-item span.lbl { flex: 1; }

/* ========================================================================
   Utility
   ======================================================================== */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.w-full { width: 100%; }
.hidden { display: none !important; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.25); border-top-color: #fff; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 481px) {
  body { background: #050709; }
  .app-shell { box-shadow: 0 0 60px rgba(0,0,0,0.6); min-height: 100vh; }
  .bottom-nav, .sticky-cta, #toast-root { left: 50%; transform: translateX(-50%); right: auto; width: var(--max-width); }
}

.site-logo-link { display: flex; align-items: center; }
.site-logo { height: 36px; width: auto; display: block; border-radius: 8px; }

/* ========================================================================
   Banner Carousel (home page, admin-controlled)
   ======================================================================== */
.banner-carousel {
  margin: 6px 16px 22px;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  background: var(--bg-surface);
  touch-action: pan-y;
}
.banner-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 0.42s cubic-bezier(0.4,0,0.2,1);
}
.banner-slide {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 16/7;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.banner-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.banner-slide .banner-cta-badge {
  position: absolute; bottom: 12px; left: 14px;
  background: rgba(10,13,20,0.72); backdrop-filter: blur(6px);
  color: #fff; font-weight: 600; font-size: 13px;
  padding: 8px 14px; border-radius: var(--r-pill);
  display: flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255,255,255,0.12);
}
.banner-placeholder {
  flex: 0 0 100%; width: 100%; aspect-ratio: 16/7;
  background: radial-gradient(120% 140% at 100% 0%, rgba(46,230,214,0.22) 0%, transparent 45%), var(--accent-gradient);
  display: flex; flex-direction: column; justify-content: center;
  padding: 22px; box-sizing: border-box;
}
.banner-placeholder .hero-eyebrow { font-size: 12px; font-weight: 700; letter-spacing:.06em; text-transform:uppercase; opacity:.75; margin:0 0 6px; color:#06101f; }
.banner-placeholder h2 { font-family:var(--font-display); font-size:22px; line-height:1.15; margin:0 0 8px; color:#06101f; }
.banner-placeholder p { margin:0 0 16px; font-size:13px; opacity:.85; color:#06101f; }
.banner-placeholder a { display:inline-flex; align-items:center; gap:6px; background:#06101f; color:#fff; font-weight:600; font-size:13px; padding:9px 15px; border-radius:var(--r-pill); text-decoration:none; }

.banner-dots {
  position: absolute; bottom: 9px; right: 12px;
  display: flex; gap: 5px; align-items: center;
}
.banner-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.4); transition: all .2s ease;
}
.banner-dots span.active { background: #fff; width: 14px; border-radius: 3px; }
.banner-skel { aspect-ratio: 16/7; }

/* ========================================================================
   Admin Panel
   ======================================================================== */
.admin-wrap { padding: 0 0 40px; }
.admin-tabs { display: flex; border-bottom: 1px solid var(--border-subtle); position: sticky; top: 57px; background: var(--bg-app); z-index: 20; }
.admin-tab { flex: 1; text-align: center; padding: 13px 0; font-size: 13px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; }
.admin-tab.active { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); }
.admin-section { display: none; padding: 18px 16px; }
.admin-section.active { display: block; }

.admin-banner-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 18px; }
.admin-banner-card { position: relative; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border-subtle); }
.admin-banner-card img { width: 100%; aspect-ratio: 16/7; object-fit: cover; display: block; }
.admin-banner-card .del-btn { position: absolute; top: 6px; right: 6px; background: rgba(240,82,106,0.85); border: none; border-radius: var(--r-pill); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px; cursor: pointer; }

.admin-upload-box { border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); padding: 28px; text-align: center; color: var(--text-muted); cursor: pointer; }
.admin-upload-box svg { width: 28px; height: 28px; margin-bottom: 8px; }
.admin-upload-box p { margin: 0 0 12px; font-size: 13.5px; }

.admin-user-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.admin-user-row .info { flex: 1; min-width: 0; }
.admin-user-row .info strong { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-row .info span { font-size: 12px; color: var(--text-muted); }
.admin-user-row .ban-btn { flex: 0 0 auto; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--bg-surface-2); color: var(--text-secondary); cursor: pointer; }
.admin-user-row .ban-btn.banned { background: var(--danger-dim); color: var(--danger); border-color: var(--danger); }

.admin-listing-row { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); align-items: flex-start; }
.admin-listing-row img { width: 64px; height: 64px; border-radius: var(--r-sm); object-fit: cover; flex: 0 0 auto; background: var(--bg-surface-2); }
.admin-listing-row .info { flex: 1; min-width: 0; }
.admin-listing-row .info strong { display: block; font-size: 13px; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-listing-row .info span { font-size: 11.5px; color: var(--text-muted); }
.admin-listing-row .del-listing-btn { flex: 0 0 auto; background: var(--danger-dim); color: var(--danger); border: 1px solid var(--danger); border-radius: var(--r-pill); font-size: 12px; font-weight: 600; padding: 6px 11px; cursor: pointer; }

/* ========================================================================
   Boost cards (plans page)
   ======================================================================== */
.boost-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 14px 14px 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: border-color .15s;
}
.boost-card.boost-popular {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.boost-badge-top {
  position: absolute;
  top: 0; right: 0;
  background: var(--accent);
  color: #06101a;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 11px;
  border-radius: 0 var(--r-md) 0 var(--r-sm);
  letter-spacing: .04em;
}
.boost-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.boost-icon {
  font-size: 22px;
  flex: 0 0 auto;
  line-height: 1;
}
.boost-left strong { display: block; font-size: 14px; margin-bottom: 2px; }
.boost-left span { font-size: 12px; color: var(--text-muted); }
.boost-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  flex: 0 0 auto;
}
.boost-price {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-cyan);
}

/* ========================================================================
   Boost select page (pick listing to boost)
   ======================================================================== */
.boost-summary {
  background: var(--accent-dim);
  border: 1px solid rgba(59,124,246,0.3);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 16px 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.boost-summary .label { font-size: 13px; color: var(--text-secondary); }
.boost-summary .value { font-family: var(--font-display); font-weight: 700; color: var(--accent-cyan); font-size: 15px; }

.boost-listing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background .12s;
}
.boost-listing-row:active { background: var(--bg-surface); }
.boost-listing-row img { width: 64px; height: 64px; border-radius: var(--r-sm); object-fit: cover; flex: 0 0 auto; background: var(--bg-surface-2); }
.boost-listing-row .info { flex: 1; min-width: 0; }
.boost-listing-row .info strong { display: block; font-size: 13.5px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boost-listing-row .info span { font-size: 12px; color: var(--text-muted); }
.boost-listing-row .radio-circle { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.boost-listing-row.selected .radio-circle { border-color: var(--accent); background: var(--accent); }
.boost-listing-row.selected .radio-circle::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* Newly posted ad highlight on My Ads page */
.adrow-new {
  background: var(--success-dim);
  border-left: 3px solid var(--success);
  animation: fade-highlight 3s ease forwards;
}
@keyframes fade-highlight {
  0%   { background: var(--success-dim); }
  100% { background: transparent; }
}

/* Plan cards */
.plan-card-pro { border-color:var(--accent);background:var(--accent-dim); }
.plan-card-ultimate { border-color:var(--warning);background:rgba(240,169,59,0.07);position:relative;overflow:hidden; }
.plan-price { font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--accent-cyan);margin:8px 0 14px; }
.plan-price span { font-size:14px;font-weight:500;color:var(--text-muted); }
.plan-features { display:flex;flex-direction:column;gap:7px; }
.pf { font-size:13.5px;color:var(--text-primary); }

/* Comparison table rows */
.ctr td { padding:10px 14px;border-bottom:1px solid var(--border-subtle);vertical-align:middle; }
.ctr td:first-child { color:var(--text-secondary);font-size:13px; }
.ctr td:not(:first-child) { text-align:center;font-weight:600;font-size:13px; }
.ctr:last-child td { border-bottom:none; }

/* Dashboard page */
.dash-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px; }
.stat-card { background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-md);padding:16px;text-align:center; }
.stat-card .stat-val { font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--accent-cyan); }
.stat-card .stat-lbl { font-size:12px;color:var(--text-muted);margin-top:4px; }

.lead-table { width:100%;border-collapse:collapse;font-size:13px; }
.lead-table th { padding:10px 12px;text-align:left;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-subtle);background:var(--bg-elevated); }
.lead-table td { padding:10px 12px;border-bottom:1px solid var(--border-subtle);vertical-align:middle; }
.lead-table tr:last-child td { border:none; }
.lead-section { background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-md);overflow:hidden;margin-bottom:14px; }
.lead-section-hdr { padding:12px 14px;font-family:var(--font-display);font-weight:700;font-size:14px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:8px; }

/* ========================================================================
   DCM Text Logo (replaces image logo)
   ======================================================================== */
.site-logo-link {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.site-logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .03em;
  color: #06101a;
  flex: 0 0 auto;
  box-shadow: 0 2px 10px rgba(59,124,246,0.35);
}
.site-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.site-logo-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.site-logo-sub {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .01em;
}