/* ===================== BAZAAR THEME — Black + Dark Violet / Amber (stable hover, centered buttons) ===================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=PT+Sans:wght@400;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* Brand palette */
  --primary:#8B5CF6;         /* base violet */
  --primary-dark:#5B21B6;    /* darker */
  --primary-darker:#4C1D95;  /* deepest */
  --secondary:#F59E0B;       /* amber */

  /* Status */
  --ok:#22C55E; --warn:#F59E0B; --danger:#EF4444;

  /* Canvas / surfaces */
  --bg:#000000;
  --surface:#0B0B0F;
  --surface-2:#0A0A0E;
  --surface-3:#12121A;
  --line:rgba(255,255,255,.20);
  --line-soft:rgba(255,255,255,.12);

  /* Text */
  --text:#F7F8FF; --text-2:#ECEEFA; --muted:#B8BED8;

  /* Effects */
  --ring:rgba(255,255,255,.18);
  --shadow:0 26px 68px rgba(0,0,0,.72), 0 2px 0 rgba(255,255,255,.04) inset;
  --radius:14px;

  /* Layout */
  --content-max:1640px;
  --content-pad:clamp(16px,3vw,28px);

  /* Buttons */
  --btn-height:44px;
  --btn-radius:12px;
  --btn-fs:17px;
  --btn-px:20px;         /* wider */
  --btn-fw:800;

  /* Links */
  --link:#EAE7FF;

  /* UNIFORM GLOW: single glow used by all cards (hover does NOT change glow strength) */
  --card-glow: 0 18px 64px rgba(139,92,246,.40), 0 0 80px rgba(139,92,246,.22);
  --card-border-strong: rgba(139,92,246,.55);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
:root,:root :focus{ color-scheme:dark }
html, body{ outline:none !important; border:0 !important; box-shadow:none !important }
*:focus, *:focus-visible{ outline:none !important; }

body{
  margin:0; color:var(--text) !important;
  font:18px/1.65 'PT Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial !important;
  background:
    radial-gradient(1300px 600px at 14% -14%, rgba(139,92,246,.18), transparent 64%),
    radial-gradient(1100px 520px at 88% -8%, rgba(245,158,11,.10), transparent 58%),
    var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,.h1,.h2,.h3{margin:0 0 14px;line-height:1.22;font-family:'Poppins',sans-serif !important}
h1,.h1{font-size:clamp(28px,2.8vw,40px)}
h2,.h2{font-size:clamp(24px,2.4vw,32px)}
h3,.h3{font-size:clamp(20px,2.2vw,26px)}
a{ color:var(--link); text-decoration:none }
a:hover{ text-decoration:underline }

/* ---------- Shell width ---------- */
.container, main, .wrap, .site-header__bar, .page-main{
  max-width:min(var(--content-max),100%) !Important;
  width:100%;
  margin-inline:auto !important;
  padding-inline:var(--content-pad) !important;
}
.page-main{ min-height:calc(100vh - 60px) }

/* ---------- Topbar (stable hover; active is violet) ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg, rgba(15,15,20,.92), rgba(10,10,15,.90));
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(130%) blur(8px);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:12px var(--content-pad);
}
.nav-left{display:flex;gap:16px;align-items:center;justify-self:start}
.brand{justify-self:center;display:flex;align-items:center;gap:10px}
.brand img{height:28px}
.nav-right{display:flex;gap:16px;align-items:center;justify-self:end}

/* links never move */
.topbar a{
  color:#F6F7FF !important; text-decoration:none; font-weight:800;
  padding:6px 10px; border-radius:10px; display:inline-block; line-height:1;
  font-size:16px;
}
.topbar a:hover{ background:rgba(255,255,255,.10); }
/* ACTIVE tab = violet */
.topbar a.active, .topbar a[aria-current="page"]{
  color:#fff !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)),
    linear-gradient(180deg, var(--primary-dark), var(--primary-darker));
  border:1px solid rgba(76,29,149,.6);
  box-shadow:0 0 0 3px rgba(139,92,246,.18);
}

/* ---------- Panels / Cards ---------- */
.card, .panel, .box, .video-wrapper, .ap-ctrl{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.00)),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  /* UNIFORM GLOW for cards */
  box-shadow: var(--card-glow);
  color:var(--text);
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: var(--card-glow);
  border-color: var(--card-border-strong);
}

.card img{
  width:100%; height:180px; object-fit:cover;
  border-radius:12px; border:1px solid var(--line); background:#000;
}

/* NEW: comfy padding around card text rows without pushing the image */
.card > *:not(img):not(.btn):not(.btn-primary){ padding-inline:12px }
.card .meta{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px 6px }
.card .meta h3{ margin:0; font:800 19px 'Poppins',sans-serif; color:var(--text) }
.card .price{ font-weight:900; color:#ffffff }

/* STATUS row — same shade as card interior, aligned to gutters */
.card .status{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:8px 12px 12px;
  padding:10px 12px;
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    linear-gradient(180deg, var(--surface-2), var(--surface-3));
  border:1px solid var(--line);
  box-shadow:none;
}
.status .dot{ width:10px; height:10px; border-radius:999px; background:#9CA3BE }
.status.live .dot{ background:var(--ok) }
.status.closed .dot{ background:var(--danger) }

/* ---------- Forms ---------- */
label{color:#EEF1FF}
input,select,textarea,.form-control{
  width:100%; color:var(--text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    linear-gradient(180deg, #171726, #10101B);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  font-size:15.5px; transition:.12s box-shadow,.12s background,.12s border-color;
}
input::placeholder,textarea::placeholder{ color:rgba(241,243,255,.62) }
input:focus,select:focus,textarea:focus,.form-control:focus{
  border-color:rgba(255,255,255,.22);
  box-shadow:0 0 0 3px var(--ring);
}

/* ---------- Buttons (centered text; brighter hover) ---------- */
button, .btn, [class*="btn-"], input[type="submit"], input[type="button"], a.button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--btn-height);
  padding:0 var(--btn-px);
  border-radius:var(--btn-radius);
  font-size:var(--btn-fs); font-weight:var(--btn-fw);
  line-height:1; letter-spacing:.25px;
  color:#fff !important; border:1px solid var(--line);
  vertical-align:middle; text-decoration:none; cursor:pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(180deg, #232334, #161628);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 2px 0 rgba(0,0,0,.28) inset;
  transition:filter .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
button:hover, .btn:hover{ filter:brightness(1.04) }
button:active, .btn:active{ filter:brightness(.98) }

/* Primary (violet) */
.btn-primary, .card .btn.btn-primary, .card .btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(180deg, var(--primary-dark), var(--primary-darker)) !important;
  border-color:rgba(76,29,149,.65) !important;
}
.btn-primary:hover, .card .btn:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)),
    linear-gradient(180deg, var(--primary), #6D28D9) !important;
  border-color:rgba(139,92,246,.8) !important;
  box-shadow:0 0 0 3px rgba(139,92,246,.22);
}

/* Secondary (amber) */
.btn-secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    linear-gradient(180deg, var(--secondary), #C98204) !important;
  color:#1B1302 !important;
  border-color:rgba(245,158,11,.45) !important;
}
.btn-secondary:hover{ box-shadow:0 0 0 3px rgba(245,158,11,.22); }

/* Outline / ghost */
.btn-outline, .btn-ghost{ background:transparent; color:#ffffff !important; border:1px solid var(--line); }

/* CARD CTAs — perfectly centered & fitted to 12px gutters */
.card .btn,
.card .btn.btn-primary,
.card a.btn,
.card button.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(100% - 24px);   /* 12px side gutters */
  margin:12px auto 12px;     /* auto centers horizontally */
  height:var(--btn-height);
  padding:0 var(--btn-px);
  text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card .btn > span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Browse grid ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:22px }

/* ---------- Tables ---------- */
.table-wrapper{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:16px 0 }
table{ width:100%; border-collapse:collapse; overflow:hidden; border-radius:12px; border:1px solid var(--line) }
th,td{ padding:12px 14px; border-bottom:1px dashed var(--line-soft) }
th{ color:#EEF0FF; font-weight:800; text-align:left; background:rgba(255,255,255,.05) }

/* ---------- Alerts / flash ---------- */
.flash, .alert{
  margin:10px 0; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line);
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.00)),
    linear-gradient(180deg, var(--surface-2), var(--surface-3));
}

/* ---------- Focus ---------- */
.ring:focus-visible, a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible{
  outline:none !important; box-shadow:0 0 0 3px var(--ring) !important;
}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .nav-left, .nav-right{ gap:12px; overflow:auto }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) }
  /* keep full-width utility for general buttons... */
  .btn, .btn-primary, .btn-secondary{ width:100% }
  /* ...but preserve the fitted width for CARD buttons specifically */
  .card .btn, .card .btn-primary, .card .btn-secondary{ width:calc(100% - 24px) }

  /* Video responsiveness */
  .video{ min-height:240px; max-height:50vh; aspect-ratio:16/9 }

  /* Product detail grid becomes single column */
  .grid3{ grid-template-columns:1fr !important; gap:16px }

  /* Adjust font sizes for mobile */
  h1,.h1{ font-size:22px }
  h2,.h2{ font-size:19px }
  h3,.h3{ font-size:16px }
  body{ font-size:15px }

  /* Table text size */
  th,td{ padding:10px 8px; font-size:14px }
}

/* Extra small mobile devices */
@media (max-width:640px){
  :root{
    --content-pad:12px;
    --btn-height:38px;
    --btn-px:12px;
    --btn-fs:13px;
  }

  /* Prevent horizontal scroll */
  body{ overflow-x:hidden }

  /* Override button sizes for mobile */
  .btn, button, a.btn, input[type="submit"], input[type="button"]{
    height:38px;
    padding:8px 12px;
    font-size:13px;
  }

  /* Topbar becomes hamburger friendly */
  .topbar{
    grid-template-columns:auto 1fr auto;
    padding:10px 12px;
    gap:8px;
  }
  .brand{ order:1 }
  .nav-left{ order:0; gap:8px }
  .nav-right{ order:2; gap:8px }

  /* Hide some nav links on very small screens */
  .nav-left a:not(:first-child){ display:none }

  /* Compact grid for browse */
  .grid{ grid-template-columns:1fr; gap:14px }

  /* Smaller card images */
  .card img{ height:160px }

  /* Form inputs */
  input,select,textarea,.form-control{
    padding:12px 14px;
    font-size:15px;
  }

  /* Tables scroll horizontally */
  .table-wrapper{ margin:12px -12px; padding:0 12px }
  table{ font-size:13px }
  th,td{ padding:8px 6px; white-space:nowrap }

  /* Video smaller on mobile */
  .video{ min-height:200px }

  /* Chat bubbles take more width */
  .bubbles > *{ max-width:96% }

  /* Panels and boxes */
  .panel, .box{ padding:12px }

  /* Alerts */
  .flash, .alert{ margin:8px 0; padding:10px 12px; font-size:14px }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets - but not TOO large */
  .btn, button, a.btn, input[type="submit"], input[type="button"]{
    min-height:40px;
  }

  /* Remove hover effects that don't work on touch */
  .card:hover{
    transform:translateY(-4px);
  }

  /* Better tap feedback */
  button:active, .btn:active{
    transform:scale(0.98);
  }
}

/* ---------- Scrollbars (WebKit) ---------- */
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(214,210,247,.85), rgba(91,33,182,.8));
  border-radius:999px; border:2px solid rgba(16,18,24,.95);
}
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.07); border-radius:999px }

/* ---------- Product detail helpers (unchanged functional) ---------- */
.grid3{ display:grid; grid-template-columns: 1fr 2.8fr 1fr; gap:26px; width:100%; max-width:var(--content-max); margin:0 auto; }
@media (max-width:1200px){ .grid3{ grid-template-columns:1fr; } }
.panel{ display:flex; flex-direction:column; min-height:0; padding:16px }
.scroll{
  flex:1 1 auto; min-height:0; max-height:100%; overflow:auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.00)),
    linear-gradient(180deg, #12121E, #0E0E18);
  border:1px solid var(--line); border-radius:12px; padding:14px;
}
.bubbles{ display:flex; flex-direction:column; gap:10px }
.bubbles > *{
  align-self:flex-start; max-width:92%;
  padding:10px 12px; margin:0; border-radius:12px; line-height:1.42;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.00)),
    linear-gradient(180deg, #1B1B2B, #141428);
  box-shadow:0 1px 2px rgba(0,0,0,.32);
  word-break:break-word; font-size:14px; color:#F2F4FF;
}
.bubbles > *.me{
  align-self:flex-end; margin-left:auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    linear-gradient(180deg, var(--primary-dark), var(--primary-darker));
  color:#ffffff;
}
.bubbles .ts{ color:#CBCFE6; font-size:12px; margin-left:8px }
.video{ width:100%; aspect-ratio:16/9; min-height:520px; max-height:76vh; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#000; box-shadow:0 34px 90px rgba(0,0,0,.78); }
.video video{ width:100%; height:100%; object-fit:cover; background:#000 }
.thumbs{display:flex; gap:12px; overflow-x:auto; margin-bottom:12px}
.thumbs img{ height:84px; border-radius:12px; border:1px solid var(--line); background:#000; object-fit:cover; cursor:pointer; }
.chat-form{ display:grid; grid-template-columns:1fr auto; gap:12px; margin-bottom:12px }
.chat-form input{ min-width:0 }