/* ===============================
   BidMystery Theme: RETRO (Neo-Tokyo)
   - Full standalone bundle
   - Requires:
       /assets/css/themes/retro/bg.gif
       /assets/css/themes/retro/fonts/MegamaxJonathanToo-YqOq2.ttf
   =============================== */

/* ---------- FONTS ---------- */
@font-face{
  font-family: "Megamax";
  src: url("/assets/css/themes/retro/fonts/MegamaxJonathanToo-YqOq2.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* ---------- TOKENS ---------- */
:root{
  /* Colors */
  --bg:#070a12;                /* deep night */
  --surface:#0b1120;
  --text:#fff2e0;              /* warm retro-pixel */
  --muted:#96a2bd;

  --accent:#ff66c4;            /* hot magenta */
  --accent2:#38f9ff;           /* neon cyan */
  --accent3:#b38cff;           /* violet */
  --amber:#ffb86b;             /* sunset */

  /* Panels / borders / glow */
  --panel: rgba(15, 20, 36, .62);
  --panel-strong: rgba(15, 20, 36, .80);
  --stroke-lite: rgba(147,215,255,.28);
  --stroke-dim: rgba(255,255,255,.10);
  --ring: rgba(255,255,255,.14);

  --glowA: rgba(255,102,196,.22);
  --glowB: rgba(56,249,255,.16);

  /* Rounding / motion / z */
  --radius:18px; --radius-sm:12px; --radius-lg:26px;
  --speed-fast:.15s; --speed:.28s; --speed-slow:.6s;
  --z-bg:0; --z-ui:1; --z-nav:10; --z-modal:1000;

  /* Asset */
  --retro-bg-image:url("/assets/css/themes/retro/bg.gif");

  color-scheme: dark;
}

/* Optional light – kept minimal */
:root[data-theme="light"]{
  --bg:#f8fbff; --surface:#eef2ff; --panel:rgba(255,255,255,.76); --panel-strong:rgba(255,255,255,.9);
  --text:#111422; --muted:#475a6b; --stroke-lite:rgba(0,0,0,.12); --stroke-dim:rgba(0,0,0,.08);
  color-scheme: light;
}

/* ---------- RESET & BASE ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);               /* solid fallback only */
  color:var(--text);
  font-family: Inter, Segoe UI, system-ui, -apple-system, Roboto, Arial, sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Pin the animated background to ::before (never “cuts off”) */
body.theme-retro::before,
body.theme-retro::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:var(--z-bg);
}

/* Animated city / grid sky (image + nebula + horizon) */
body.theme-retro::before{
  background:
    /* faint scanlines */
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    /* horizon glow */
    radial-gradient(1200px 600px at 50% 10%, rgba(255,184,107,.18), transparent 60%),
    /* cyan / violet pads */
    radial-gradient(900px 520px at 10% 15%, rgba(56,249,255,.10), transparent 60%),
    radial-gradient(1000px 560px at 90% 20%, rgba(179,140,255,.10), transparent 60%),
    /* local animated city bg */
    var(--retro-bg-image);
  background-size:
    auto,
    1600px 900px, 1400px 900px, 1400px 900px,
    cover;
  background-position:
    center 0,
    50% -10%, 10% 0%, 90% 0%,
    center;
  background-repeat:no-repeat;
  filter: drop-shadow(0 0 18px rgba(56,249,255,.12));
}

/* CRT vignette + heavier scanlines for contrast */
body.theme-retro::after{
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.65) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
  opacity:.9;
}

/* Keep UI above background layers */
.container, .site-nav, main, header, footer, .hud, .panel, .card{
  position:relative;
  z-index:var(--z-ui);
}

/* Reduced motion safety */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  body.theme-retro::before{ background-attachment:initial; }
}

/* A11y focus */
:where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline:2px dashed var(--accent2);
  outline-offset:2px;
  border-radius:10px;
}
::selection{ background:rgba(56,249,255,.28); color:var(--text); }

/* Scrollbar */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--accent2), var(--accent));
  border-radius:10px; border:2px solid transparent; background-clip:padding-box;
}
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); }

/* ---------- NAV / HUD ---------- */
.hud{
  position:sticky; top:0; z-index:var(--z-nav);
  padding:10px 0;
  background:linear-gradient(180deg, rgba(0,0,0,.28), transparent);
}

.site-nav, .hud .nav, .topbar{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}

/* Frosted nav pills */
.hud nav a, .site-nav a, .btn, .pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.54rem .9rem;
  border-radius:12px;
  color:var(--text); text-decoration:none;
  border:1px solid var(--stroke-lite);
  background:rgba(12,18,34,.72);
  transition:transform var(--speed-fast) ease, box-shadow var(--speed), border-color var(--speed), background var(--speed);
  letter-spacing:.02em;
}

.hud nav a:hover, .site-nav a:hover, .btn:hover, .pill:hover{
  transform:translateY(-1px);
  box-shadow:0 0 18px rgba(56,249,255,.28), 0 0 24px rgba(255,102,196,.18);
  border-color:var(--accent2);
  background:rgba(12,18,34,.82);
}

/* Brand chip in retro font */
.site-nav .brand .brand-link,
.brand .brand-link{
  font-family:"Megamax", system-ui, sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:1.05rem;
  padding:.5rem .9rem;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(56,249,255,.18), rgba(255,102,196,.18));
  border:1px solid var(--stroke-lite);
  box-shadow:0 0 14px rgba(56,249,255,.18) inset;
}

/* Buttons */
.btn--primary{
  background:linear-gradient(90deg, var(--accent2), var(--accent));
  color:#081417; font-weight:800; border-color:transparent;
}
.btn--ghost{ background:transparent; }
.btn--danger{ border-color:rgba(255,80,110,.5); color:#ffd9df; }

/* Sticky variant if you ever toggle it */
.site-nav.sticky{ position:sticky; top:10px; z-index:var(--z-nav); }

/* ---------- TYPOGRAPHY ---------- */
h1, .retro-title{
  font-family:"Megamax", system-ui, sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:clamp(1.6rem, 2.8vw, 2.6rem);
  margin:.9rem 0 .5rem;
  color:#fff8ec;
  text-shadow:
    0 0 1px #fff,
    0 0 6px rgba(56,249,255,.5),
    0 0 14px rgba(255,102,196,.35);
}
h2{
  font-family:"Megamax", system-ui, sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:clamp(1.2rem, 2.2vw, 1.6rem);
  margin:.7rem 0;
  color:#ffeedd;
}
.muted{ color:var(--muted); }
p, li, small{ line-height:1.55; }

/* ---------- GLASS / PANELS ---------- */
.panel, .card, .tile, .kpi, .box, .hud .panel, .auction-card, .listing, .modal, .dropdown, .tooltip{
  background:var(--panel);
  border:1px solid var(--stroke-lite);
  border-radius:var(--radius);
  padding:14px;
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  box-shadow:
    0 0 0 1px rgba(56,249,255,.18) inset,
    0 6px 28px rgba(0,0,0,.45),
    0 0 24px var(--glowA), 0 0 36px var(--glowB);
}
.holo-edge{ position:relative; }
.holo-edge::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:conic-gradient(from 180deg, var(--accent), var(--accent2), var(--accent3), var(--accent));
  filter:blur(14px); opacity:.16; z-index:-1; pointer-events:none;
}

/* ---------- GRID / CARDS ---------- */
.cards, .grid, .listings, .auction-list, .gallery{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
}
@media (hover:hover){
  .card, .auction-card{
    transition:transform var(--speed) ease, box-shadow var(--speed) ease;
  }
  .card:hover, .auction-card:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 22px rgba(56,249,255,.22);
  }
}

/* ---------- AUCTION / COUNTDOWN ---------- */
svg.ring{ width:56px; height:56px; transform:rotate(-90deg); }
.ring circle.bg{ stroke:rgba(173,216,230,.35); stroke-width:4; fill:none; }
.ring circle.fg{ stroke:rgba(56,249,255,.95); stroke-width:4; fill:none; stroke-linecap:round; transition:stroke-dashoffset .3s linear; }

.price-line{ display:flex; gap:14px; align-items:baseline; margin:10px 0 4px; }
.price-line .now{
  font-family:"Megamax", system-ui, sans-serif;
  font-size:28px; font-weight:800; color:#c7f1ff;
  text-shadow:0 0 10px rgba(56,249,255,.35);
}
.timer-chip{
  display:inline-grid; place-items:center;
  min-width:44px; height:28px; border-radius:999px;
  border:1px solid var(--stroke-lite);
  background:rgba(255,255,255,.06);
  font:600 12px/1 system-ui, sans-serif; color:#cfeaff;
}

/* “NEW” badge look */
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px;
  border:1px solid var(--stroke-lite);
  color:#ffd9ff;
  background:linear-gradient(180deg, rgba(255,102,196,.14), rgba(56,249,255,.12));
  text-transform:uppercase; letter-spacing:.08em;
}

/* ---------- FORMS ---------- */
.input, input[type=text], input[type=password], input[type=email],
input[type=number], input[type=datetime-local], textarea, select{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--stroke-lite); background:#0a111e; color:var(--text);
  outline:none; transition:border-color var(--speed);
}
.input:focus, input:focus, textarea:focus, select:focus{ border-color:var(--accent2); }
.input.invalid{ border-color:#ff4d7a; }
.form{ max-width:560px; margin:20px auto; display:flex; flex-direction:column; gap:10px; }
label{ display:block; margin:6px 0; opacity:.9; }
.input-row{ display:flex; gap:10px; } .input-row>*{ flex:1; }
.searchbar{ display:flex; gap:8px; align-items:center; padding:8px; border-radius:12px; background:rgba(14,21,33,.65); border:1px solid var(--stroke-lite); }
.searchbar input{ background:transparent; border:0; padding:.4rem .5rem; }

/* ---------- TABLES ---------- */
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ border-bottom:1px solid rgba(255,255,255,.1); padding:10px 8px; text-align:left; }
.table tr:hover{ background:rgba(255,255,255,.03); }
.table .num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- FEEDBACK ---------- */
.alert{ padding:10px 12px; border:1px solid rgba(240,240,120,.35); border-radius:10px; background:rgba(240,240,120,.08); }
.alert.success{ border-color:rgba(67,233,123,.45); background:rgba(67,233,123,.12); }
.alert.danger{ border-color:rgba(255,77,122,.5); background:rgba(255,77,122,.12); }
.toast-wrap{ position:fixed; right:16px; bottom:16px; display:grid; gap:10px; z-index:var(--z-modal); }
.toast{ animation:toastIn var(--speed-slow) ease both; }
@keyframes toastIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; z-index:var(--z-modal); }
.backdrop.show{ display:block; }
.modal{ max-width:640px; margin:10vh auto; padding:18px; }
.modal .head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.modal .close{ cursor:pointer; }
.dropdown{ position:absolute; min-width:220px; padding:10px; display:none; }
.dropdown.show{ display:block; }
.menu{ display:grid; gap:4px; }
.menu a{ padding:.45rem .55rem; border-radius:8px; display:flex; align-items:center; gap:.6rem; }
.menu a:hover{ background:rgba(255,255,255,.06); }
.tooltip{ position:absolute; padding:6px 8px; font-size:.85rem; transform:translate(-50%, -100%); }

/* ---------- ACCORDION / SKELETON ---------- */
.accordion{ display:grid; gap:10px; }
.acc-item{ border:1px solid var(--stroke-lite); border-radius:12px; overflow:hidden; background:var(--panel); }
.acc-head{ padding:10px 12px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.acc-body{ padding:10px 12px; display:none; }
.acc-item.open .acc-body{ display:block; }
.skeleton{
  border-radius:10px;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  animation:shimmer 1.2s infinite;
}
@keyframes shimmer{ from{background-position:-200% 0;} to{background-position:200% 0;} }

/* ---------- PROGRESS / LOADER ---------- */
.progress{ height:10px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.progress .bar{ height:100%; background:linear-gradient(90deg, var(--accent2), var(--accent)); width:0%; transition:width .35s ease; }
.loader{ width:28px; height:28px; border-radius:50%; border:3px solid rgba(255,255,255,.25); border-top-color:var(--accent2); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- FOOTER ---------- */
.footer{ margin-top:60px; padding:30px 0; border-top:1px solid rgba(255,255,255,.12); opacity:.95; }
.footer .links{ display:flex; gap:10px; flex-wrap:wrap; }
.footer .legal{ font-size:.9rem; opacity:.85; }

/* ---------- UTILITIES ---------- */
.center{ display:grid; place-items:center; }
.right{ margin-left:auto; }
.row-8{ display:flex; gap:8px; align-items:center; }
.row-12{ display:flex; gap:12px; align-items:center; }
.stack-8>*+*{ margin-top:8px; }
.stack-12>*+*{ margin-top:12px; }
.round{ border-radius:999px; }
.shadow-0{ box-shadow:0 0 0 transparent; }
.shadow-1{ box-shadow:0 0 22px var(--glowA), 0 0 44px var(--glowB); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px){
  .hud .nav, .site-nav{ gap:.4rem; }
  .hud nav a{ padding:.46rem .7rem; }
  .cards, .grid, .listings, .auction-list{ grid-template-columns:1fr; }
}
@media (max-width: 768px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:10px; cursor:pointer; }
  .nav-toggle .hamburger{ display:block; position:relative; width:24px; height:2px; background:var(--text); }
  .nav-toggle .hamburger::before, .nav-toggle .hamburger::after{
    content:""; position:absolute; left:0; width:24px; height:2px; background:var(--text); transition:transform .25s ease, top .25s ease, opacity .25s ease;
  }
  .nav-toggle .hamburger::before{ top:-8px; } .nav-toggle .hamburger::after{ top:8px; }
  .site-nav.open .nav-toggle .hamburger{ background:transparent; }
  .site-nav.open .nav-toggle .hamburger::before{ top:0; transform:rotate(45deg); }
  .site-nav.open .nav-toggle .hamburger::after{ top:0; transform:rotate(-45deg); }

  .site-nav .nav-links{ flex-direction:column; align-items:stretch; }
  .site-nav[data-js="1"] .nav-links{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .site-nav[data-js="1"].open .nav-links{ max-height:600px; }
  .site-nav .btn, .site-nav .badge{ width:100%; }
}
@media (max-width: 520px){
  .site-nav .brand .brand-link{ font-size:1rem; }
  .site-nav .btn, .site-nav .badge{ padding:6px 10px; min-width:auto; }
}


/* ===== Footer v2 (shared) ===== */
.site-footer.footer-v2{
  margin-top: 60px;
  padding: 28px 0 34px;
  border-top: 1px solid var(--stroke-dim, rgba(255,255,255,.12));
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.05));
}

.footer-v2 .footer-inner{
  display: grid;
  gap: 20px;
  grid-template-columns: 1.2fr 1fr 1.6fr auto; /* brand | legal | how | extra */
  align-items: start;
}

.footer-v2 .brand-chip{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.5rem .9rem; border-radius:999px;
  text-decoration:none; color:var(--text);
  border:1px solid var(--stroke-lite);
  background: rgba(15,22,34,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.footer-v2 .tagline{
  margin:.6rem 0 0; opacity:.85; line-height:1.45;
}

.footer-v2 .footer-title{
  margin: 0 0 .6rem;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  opacity: .9;
}

.footer-v2 .link-list{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.footer-v2 .link-list a{
  color: var(--text); opacity: .9; text-decoration:none;
  border-bottom: 1px dashed transparent;
  transition: opacity var(--speed, .25s) ease, border-color var(--speed, .25s) ease;
}
.footer-v2 .link-list a:hover{
  opacity: 1; border-color: var(--accent2);
}

.footer-v2 .how-list{
  margin:0; padding:0; list-style:none; display:grid; gap:.35rem;
}
.footer-v2 .how-list li{
  position:relative; padding-left:1.25rem;
  line-height:1.4; opacity:.95;
}
.footer-v2 .how-list li::before{
  content:"•"; position:absolute; left:0; top:0;
  color: var(--accent); opacity:.95;
  text-shadow: 0 0 8px var(--accent2);
}

.footer-v2 .footer-extra{
  display:flex; align-items:flex-start; justify-content:flex-end;
}
.footer-v2 .powered{
  padding:.55rem .8rem; border-radius:10px;
  background: rgba(15,22,34,.45);
  border: 1px solid var(--stroke-lite);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.footer-v2 .footer-link{ color: var(--accent); text-decoration:none; }
.footer-v2 .footer-version{ opacity:.8; margin-left:.35rem; }

.footer-v2 .footer-bottom{
  grid-column: 1 / -1;
  display:flex; gap:.6rem; align-items:center; justify-content:space-between;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--stroke-dim, rgba(255,255,255,.12));
  opacity:.95;
}
.footer-v2 .footer-copy, .footer-v2 .footer-note{ opacity:.85; }

/* Responsive */
@media (max-width: 980px){
  .footer-v2 .footer-inner{
    grid-template-columns: 1fr 1fr;
  }
  .footer-v2 .footer-extra{ justify-content:flex-start; }
}
@media (max-width: 640px){
  .footer-v2 .footer-inner{
    grid-template-columns: 1fr;
  }
  .footer-v2 .footer-bottom{
    flex-direction: column; align-items:flex-start; gap:.35rem;
  }
}