/* ============ BidWaala design system ============ */
:root {
  /* ---- Pakistan green. Deep flag green through emerald, with gold as the
     accent — the flag's own pairing, and gold CTAs pop against green in a way
     a second green never would. Seasonal themes only need to override these. */
  --brand: #046A38;          /* Pakistan green */
  --brand-2: #10B981;        /* emerald, for gradients + hover */
  --brand-deep: #01411C;     /* darkest green, hero + footer grounds */
  --brand-tint: #E7F5EE;     /* faintest green wash for chips + panels */
  --gold: #FBBF24;           /* the gavel's gold — accents and CTAs */
  --gold-deep: #F59E0B;
  --brand-grad: linear-gradient(135deg, #01411C, #046A38 45%, #10B981);
  --brand-grad-soft: linear-gradient(135deg, #046A38, #10B981 60%, #34D399);

  --bg: #f3f8f5;
  --card: #ffffff;
  --ink: #10201A;
  --ink-2: #46584F;
  --ink-3: #7D8F86;
  --line: #E1EBE5;
  --amber: #f59e0b;
  --amber-bg: #fef3c7;
  --green: #059669;
  --green-bg: #d1fae5;
  --red: #dc2626;
  --red-bg: #fee2e2;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(6, 32, 21, .05), 0 8px 24px -12px rgba(6, 32, 21, .14);
  --shadow-lg: 0 4px 10px rgba(6, 32, 21, .06), 0 24px 48px -16px rgba(6, 32, 21, .24);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; }

/* ============ topbar ============ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
}
.logo { flex-shrink: 0; }
.logo { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 800; letter-spacing: -.5px; white-space: nowrap; }
.logo em { font-style: normal; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-mark { font-size: 24px; }
.searchbar { flex: 1 1 auto; display: flex; max-width: 560px; margin: 0 auto; min-width: 0; }
.searchbar input {
  flex: 1; border: 1.5px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px;
  padding: 9px 16px; background: var(--bg); outline: none; min-width: 0;
}
.searchbar input:focus { border-color: var(--brand); background: #fff; }
.searchbar button {
  border: 0; background: var(--brand-grad); color: #fff; font-weight: 700;
  padding: 0 18px; border-radius: 0 12px 12px 0; cursor: pointer;
}
.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.icon-btn {
  position: relative; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  cursor: pointer; font-size: 18px; transition: .15s;
}
.icon-btn:hover { border-color: var(--brand); transform: translateY(-1px); }
.badge-dot {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 800;
  border-radius: 999px; display: grid; place-items: center; border: 2px solid #fff;
}
.avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--line);
}
.menu-wrap { position: relative; }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); width: 230px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); overflow: hidden; z-index: 60;
}
.dropdown a, .dropdown button {
  display: flex; gap: 10px; align-items: center; width: 100%; text-align: left;
  padding: 11px 16px; border: 0; background: none; cursor: pointer; font-weight: 600; color: var(--ink-2);
}
.dropdown a:hover, .dropdown button:hover { background: var(--bg); color: var(--ink); }
.dropdown .dd-head { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dropdown .dd-head b { display: block; }
.dropdown .dd-head span { font-size: 12.5px; color: var(--ink-3); }
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: 360px; max-height: 480px;
  overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); z-index: 60;
}
.notif-panel .np-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 800; }
.notif-panel .np-head button { border: 0; background: none; color: var(--brand); font-weight: 700; cursor: pointer; font-size: 13px; }
.notif-item { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.notif-item:hover { background: var(--bg); }
.notif-item.unread { background: #eef2ff; }
.notif-item time { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

/* ============ buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 12px; padding: 10px 20px; font-weight: 700;
  cursor: pointer; transition: .15s; white-space: nowrap;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--brand-grad); color: #fff; box-shadow: 0 6px 16px -6px rgba(16, 185, 129, .5); }
.btn-primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(16, 185, 129, .55); }
.btn-amber { background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; box-shadow: 0 6px 16px -6px rgba(234, 88, 12, .5); }
.btn-amber:not(:disabled):hover { transform: translateY(-1px); }
.btn-ghost { background: #fff; border: 1.5px solid var(--line); color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-danger { background: var(--red-bg); color: var(--red); }
.btn-danger:hover { background: #fecaca; }
.btn-sm { padding: 7px 14px; font-size: 13.5px; border-radius: 10px; }
.btn-lg { padding: 13px 26px; font-size: 16px; border-radius: 14px; }
.btn-block { width: 100%; }

/* ============ layout ============ */
.page { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 16px; }
.section-head h2 { margin: 0; font-size: 22px; letter-spacing: -.4px; }
.section-head a { color: var(--brand); font-weight: 700; font-size: 14px; }

/* ============ hero ============ */
.hero {
  margin: 20px 0 8px; border-radius: 26px; padding: 54px 44px;
  color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(120% 130% at 88% -10%, rgba(251, 191, 36, .38), transparent 55%),
    radial-gradient(90% 120% at 8% 110%, rgba(52, 211, 153, .38), transparent 55%),
    linear-gradient(135deg, #046A38, #10B981 55%, #01311A);
  box-shadow: 0 24px 60px -24px rgba(4, 106, 56, .6);
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.hero::before { width: 420px; height: 420px; right: -120px; top: -180px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); }
.hero::after { width: 260px; height: 260px; left: 6%; bottom: -170px; background: rgba(0, 0, 0, .18); }
.hero-livebadge {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(239, 68, 68, .95); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .5px;
  padding: 6px 13px; border-radius: 999px; margin-bottom: 14px; box-shadow: 0 6px 18px -6px rgba(239, 68, 68, .7);
}
.hero-livebadge .pulse { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
.hero h1 { font-size: clamp(30px, 5vw, 48px); font-weight: 900; letter-spacing: -1.2px; margin-bottom: 10px; position: relative; z-index: 1; line-height: 1.08; }
.hero h1 u { text-decoration: none; background: linear-gradient(135deg, #fbbf24, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; }
.hero p { font-size: 17px; opacity: .94; margin: 0 0 22px; position: relative; z-index: 1; max-width: 640px; }
.hero-ctas { display: flex; gap: 12px; margin-top: 16px; position: relative; z-index: 1; flex-wrap: wrap; }
.hero-cta-live { background: #ef4444; color: #fff; box-shadow: 0 8px 20px -6px rgba(239, 68, 68, .6); }
.hero-cta-live:hover { background: #dc2626; transform: translateY(-1px); }
.hero-cta-sell { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(6px); }
.hero-cta-sell:hover { background: rgba(255, 255, 255, .26); transform: translateY(-1px); }
.hero-search { display: flex; max-width: 620px; position: relative; z-index: 1; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .4); border-radius: 14px; }
.hero-search input { flex: 1; border: 0; padding: 15px 20px; border-radius: 14px 0 0 14px; font-size: 15.5px; outline: none; min-width: 0; }
.hero-search button { border: 0; background: #16182d; color: #fff; font-weight: 800; padding: 0 26px; border-radius: 0 14px 14px 0; cursor: pointer; }
.hero-stats { display: flex; gap: 34px; margin-top: 28px; position: relative; z-index: 1; flex-wrap: wrap; }
.hero-stats b { display: block; font-size: 24px; letter-spacing: -.5px; }
.hero-stats span { font-size: 13px; opacity: .85; }

/* ============ categories ============ */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cat-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 14px; display: flex; align-items: center; gap: 11px; font-weight: 700;
  font-size: 13.5px; transition: .15s; box-shadow: var(--shadow);
}
.cat-card:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow-lg); }
.cat-card .ci { font-size: 24px; }

/* ============ listing cards ============ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 265px; gap: 18px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x mandatory; }
.rail .card { scroll-snap-align: start; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
  box-shadow: var(--shadow); position: relative; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px -8px rgba(22,24,45,.14), 0 30px 55px -24px rgba(4, 106, 56,.32); border-color: #d9dcf0; }
.card-img { position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: linear-gradient(135deg, #E7F5EE, #D6EBE0); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.card:hover .card-img img { transform: scale(1.07); }
/* soft scrim so the countdown chip stays readable over any photo */
.card-img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(transparent, rgba(0,0,0,.28)); pointer-events: none; z-index: 1; }
.card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card-title { font-weight: 700; font-size: 14.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.card-price { font-size: 18px; font-weight: 850; letter-spacing: -.4px; }
.card-price .cur-label { display: block; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; }
.card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-3); margin-top: auto; }
.tag {
  position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .4px; color: #fff; display: inline-flex; align-items: center; gap: 5px;
  box-shadow: 0 4px 12px -3px rgba(0,0,0,.35);
}
.tag-auction { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.tag-fixed { background: rgba(22, 24, 45, .72); backdrop-filter: blur(6px); }
.tag-sold { background: var(--green); }
.tag-ended { background: #6b7280; }
.tag .pulse { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.75); } }
.hot-ribbon { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; }
.countdown-chip {
  position: absolute; bottom: 10px; left: 10px; z-index: 2; background: rgba(22, 24, 45, .82);
  backdrop-filter: blur(4px); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 11px;
  border-radius: 999px; font-variant-numeric: tabular-nums;
}
.countdown-chip.urgent { background: var(--red); animation: pulse 1.4s infinite; }
.countdown-chip.soon { background: #b45309; }
.bid-pill { background: var(--amber-bg); color: #b45309; font-weight: 800; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; }

/* ============ browse ============ */
.browse-layout { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }
.filters { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: sticky; top: 76px; box-shadow: var(--shadow); }
.filters h3 { font-size: 15px; margin-bottom: 12px; }
.filters label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); margin: 14px 0 6px; }
.filters select, .filters input { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; outline: none; }
.filters select:focus, .filters input:focus { border-color: var(--brand); }
.price-row { display: flex; gap: 8px; }
.seg { display: flex; background: var(--bg); border-radius: 10px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: none; padding: 7px 4px; border-radius: 8px; font-weight: 700; font-size: 12.5px; cursor: pointer; color: var(--ink-3); }
.seg button.on { background: #fff; color: var(--brand); box-shadow: var(--shadow); }
.results-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }
.results-head select { border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 12px; background: #fff; font-weight: 600; }

/* ============ item page ============ */
.item-layout { display: grid; grid-template-columns: 1fr 400px; gap: 26px; align-items: start; margin-top: 18px; }
.gallery { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); }
.gallery-main { aspect-ratio: 4/3; background: linear-gradient(135deg, #E7F5EE, #D6EBE0); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 8px; padding: 12px; overflow-x: auto; }
.gallery-thumbs img { width: 74px; height: 56px; object-fit: cover; border-radius: 10px; cursor: pointer; border: 2px solid transparent; opacity: .65; transition: .18s; }
.gallery-thumbs img:hover { opacity: .9; }
.gallery-thumbs img.on { border-color: var(--brand); opacity: 1; box-shadow: 0 0 0 3px rgba(4, 106, 56,.15); }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
.panel + .panel { margin-top: 18px; }
.item-title { font-size: 22px; font-weight: 850; letter-spacing: -.5px; margin-bottom: 4px; line-height: 1.25; }
.item-sub { color: var(--ink-3); font-size: 13px; display: flex; gap: 12px; flex-wrap: wrap; }
.bid-box-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 12px 0 2px; }
.bid-box-price b { font-size: 34px; letter-spacing: -1.2px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bid-box-price .approx { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.mini-label { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); }
.countdown-big {
  display: flex; gap: 10px; margin: 14px 0; font-variant-numeric: tabular-nums;
}
.countdown-big .cd-cell { flex: 1; background: var(--bg); border-radius: 12px; padding: 10px 4px; text-align: center; }
.countdown-big b { display: block; font-size: 22px; letter-spacing: -.5px; }
.countdown-big span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--ink-3); }
.countdown-big.urgent .cd-cell { background: var(--red-bg); color: var(--red); }
.countdown-big.urgent span { color: var(--red); }
.bid-form { display: flex; gap: 10px; margin-top: 12px; }
.bid-form input { flex: 1; border: 2px solid var(--line); border-radius: 12px; padding: 11px 14px; font-size: 16px; font-weight: 700; outline: none; min-width: 0; }
.bid-form input:focus { border-color: var(--amber); }
.quick-bids { display: flex; gap: 8px; margin-top: 10px; }
.quick-bids button { flex: 1; border: 1.5px dashed var(--line); background: none; border-radius: 10px; padding: 7px 4px; font-weight: 700; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.quick-bids button:hover { border-color: var(--amber); color: #b45309; background: var(--amber-bg); }
.info-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.chip { background: var(--bg); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.chip.green { background: var(--green-bg); color: var(--green); }
.chip.amber { background: var(--amber-bg); color: #b45309; }
.chip.red { background: var(--red-bg); color: var(--red); }
.bid-history { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bid-history th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.bid-history td { padding: 9px 8px; border-bottom: 1px solid var(--line); }
.bid-history tr:last-child td { border-bottom: 0; }
.bid-history .top-bid td { background: #fffbeb; font-weight: 700; }
.seller-card { display: flex; align-items: center; gap: 13px; }
.seller-card .avatar { width: 48px; height: 48px; font-size: 19px; }
.seller-card .sc-info { flex: 1; min-width: 0; }
.seller-card b { display: block; }
.seller-card span { font-size: 12.5px; color: var(--ink-3); }
.result-banner { border-radius: 14px; padding: 16px 18px; font-weight: 700; margin-bottom: 14px; }
.result-banner.won { background: var(--green-bg); color: var(--green); }
.result-banner.ended { background: var(--bg); color: var(--ink-2); }
.result-banner.sold { background: var(--amber-bg); color: #b45309; }
.desc-text { white-space: pre-wrap; color: var(--ink-2); }

/* ============ forms ============ */
.form-page { max-width: 720px; margin: 0 auto; }
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 30px; box-shadow: var(--shadow); }
.form-card h1 { font-size: 24px; letter-spacing: -.5px; }
.f-row { margin-bottom: 16px; }
.f-row label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.f-row label small { color: var(--ink-3); font-weight: 600; }
.f-row input, .f-row select, .f-row textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px;
  background: #fff; outline: none; transition: .15s;
}
.f-row input:focus, .f-row select:focus, .f-row textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(4, 106, 56, .12); }
.f-row textarea { min-height: 110px; resize: vertical; }
.f-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.form-error { background: var(--red-bg); color: var(--red); font-weight: 700; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.type-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.type-toggle button {
  border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 15px;
  text-align: left; cursor: pointer; transition: .15s;
}
.type-toggle button.on { border-color: var(--brand); background: #eef2ff; }
.type-toggle b { display: block; font-size: 15px; }
.type-toggle span { font-size: 12.5px; color: var(--ink-3); }
.auction-params { background: linear-gradient(180deg, #fffbeb, #fff); border: 1.5px solid #fde68a; border-radius: 16px; padding: 18px; margin-bottom: 16px; }
.auction-params h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.img-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.img-thumb { position: relative; width: 92px; height: 72px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--line); }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.img-thumb button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; cursor: pointer; line-height: 1; }
.img-add { width: 92px; height: 72px; border: 2px dashed var(--line); border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--ink-3); font-size: 22px; background: none; }
.img-add:hover { border-color: var(--brand); color: var(--brand); }

/* ============ auth ============ */
.auth-page { max-width: 440px; margin: 40px auto; }
.demo-box { background: #eef2ff; border: 1.5px dashed #c7d2fe; border-radius: 14px; padding: 14px 16px; margin-top: 18px; font-size: 13px; }
.demo-box b { display: block; margin-bottom: 6px; }
.demo-box button { border: 0; background: #fff; border-radius: 8px; padding: 5px 11px; margin: 3px 4px 3px 0; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--brand); box-shadow: var(--shadow); }
.demo-box button:hover { background: var(--brand); color: #fff; }
.demo-box button.demo-admin { background: #fef3c7; color: #b45309; }
.demo-box button.demo-admin:hover { background: #f59e0b; color: #fff; }
.auth-alt { text-align: center; margin-top: 16px; color: var(--ink-3); font-size: 14px; }
.auth-alt a { color: var(--brand); font-weight: 700; }

/* ============ dashboard ============ */
.tabs { display: flex; gap: 8px; margin: 8px 0 22px; flex-wrap: wrap; }
.tabs a { padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--line); }
.tabs a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.dash-row {
  display: flex; gap: 16px; align-items: center; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.dash-row img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.dash-row .dr-main { flex: 1; min-width: 0; }
.dash-row .dr-title { font-weight: 700; margin-bottom: 2px; }
.dash-row .dr-sub { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 10px; flex-wrap: wrap; }
.dash-row .dr-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.state-pill { font-size: 11.5px; font-weight: 800; padding: 4px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: .4px; }
.state-pill.winning, .state-pill.won, .state-pill.sold, .state-pill.active { background: var(--green-bg); color: var(--green); }
.state-pill.outbid { background: var(--red-bg); color: var(--red); }
.state-pill.lost, .state-pill.ended { background: var(--bg); color: var(--ink-3); }

/* ============ store ============ */
.store-banner { border-radius: 22px; padding: 40px 34px 30px; color: #fff; position: relative; overflow: hidden; margin-bottom: 22px; }
.store-banner::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, .14); right: -80px; top: -140px; }
.store-head { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; flex-wrap: wrap; }
.store-head .avatar { width: 76px; height: 76px; font-size: 30px; box-shadow: none; border: 3px solid rgba(255, 255, 255, .6); }
.store-head h1 { margin: 0; font-size: 26px; }
.store-head p { margin: 2px 0 0; opacity: .9; font-size: 14px; }
.store-stats { display: flex; gap: 28px; margin-top: 22px; position: relative; z-index: 1; flex-wrap: wrap; }
.store-stats b { display: block; font-size: 21px; }
.store-stats span { font-size: 12.5px; opacity: .85; }
.store-follow { margin-left: auto; }

/* ============ messages ============ */
.msg-layout { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
.thread-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.thread { display: flex; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line); cursor: pointer; align-items: center; }
.thread:hover, .thread.on { background: var(--bg); }
.thread img { width: 52px; height: 42px; border-radius: 8px; object-fit: cover; }
.thread .th-main { flex: 1; min-width: 0; }
.thread .th-title { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread .th-sub { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; height: 560px; box-shadow: var(--shadow); }
.chat-head { padding: 13px 18px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: center; }
.chat-head img { width: 46px; height: 36px; border-radius: 8px; object-fit: cover; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.bubble { max-width: 72%; padding: 9px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.bubble.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.bubble.them { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble time { display: block; font-size: 10.5px; opacity: .65; margin-top: 3px; }
.chat-input { display: flex; gap: 10px; padding: 13px; border-top: 1px solid var(--line); }
.chat-input input { flex: 1; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 15px; outline: none; }
.chat-input input:focus { border-color: var(--brand); }

/* ============ misc ============ */
.empty { text-align: center; padding: 60px 20px; color: var(--ink-3); }
.empty .e-icon { font-size: 44px; margin-bottom: 10px; }
.empty b { display: block; color: var(--ink-2); font-size: 17px; margin-bottom: 4px; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.how-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); }
.how-card .hn { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-grad); color: #fff; font-weight: 800; display: grid; place-items: center; margin-bottom: 12px; }
.cta-banner {
  margin-top: 40px; border-radius: 20px; padding: 34px; background: #16182d; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.cta-banner h2 { margin: 0; font-size: 22px; }
.cta-banner p { margin: 4px 0 0; opacity: .75; font-size: 14px; }
.skel { text-align: center; color: var(--ink-3); padding: 70px 0; font-weight: 600; }
.watch-btn { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); cursor: pointer; font-size: 15px; display: grid; place-items: center; box-shadow: var(--shadow); }
.watch-btn:hover { transform: scale(1.1); }

/* toasts */
.toasts { position: fixed; bottom: 24px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: #16182d; color: #fff; border-radius: 14px; padding: 13px 20px; font-weight: 600;
  font-size: 14px; box-shadow: var(--shadow-lg); animation: slideIn .25s ease; max-width: 380px;
}
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }
@keyframes slideIn { from { transform: translateY(14px); opacity: 0; } }

/* modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(22, 24, 45, .55); z-index: 90; display: grid; place-items: center; padding: 20px; }
.modal { background: #fff; border-radius: 20px; padding: 28px; max-width: 420px; width: 100%; box-shadow: var(--shadow-lg); animation: slideIn .2s ease; }
.modal h3 { font-size: 18px; }
.modal p { color: var(--ink-2); margin: 6px 0 20px; }
.modal .m-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* footer */
.footer { background: #16182d; color: #9aa0bd; margin-top: 40px; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 44px 20px 30px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
.footer-logo { color: #fff; margin-bottom: 8px; }
.footer h4 { color: #fff; font-size: 13.5px; text-transform: uppercase; letter-spacing: .6px; }
.footer a { display: block; padding: 3.5px 0; font-size: 14px; }
.footer a:hover { color: #fff; }
.footer p { font-size: 13.5px; }
.footer-bottom { border-top: 1px solid #262a45; text-align: center; padding: 16px; font-size: 12.5px; }

/* ============ currency selector ============ */
.cur-sel {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 6px; background: #fff;
  font-weight: 700; font-size: 12.5px; cursor: pointer; outline: none; color: var(--ink-2);
}
.cur-sel:focus { border-color: var(--brand); }

/* ============ BidPay modal ============ */
.pay-modal { max-width: 470px; }
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.pay-method {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff;
  cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; font-size: 13px; text-align: left;
}
.pay-method.on { border-color: var(--brand); background: #eef2ff; }
.fee-box { background: var(--bg); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; color: var(--ink-2); }

/* ============ promotions ============ */
.promo-cards { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
.promo-card {
  border: 2px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fff;
  cursor: pointer; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 0 10px; font-size: 12.5px; color: var(--ink-3);
}
.promo-card b { font-size: 14px; color: var(--ink); }
.promo-card .pc-price { grid-row: span 2; align-self: center; font-weight: 850; font-size: 16px; color: var(--ink); }
.promo-card.on { border-color: var(--amber); background: #fffbeb; }
.featured-ribbon { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 10px -2px rgba(217, 119, 6, .5); }

/* ============ reviews ============ */
.star-picker { display: flex; gap: 6px; margin-bottom: 14px; }
.star-picker button { border: 0; background: none; font-size: 34px; cursor: pointer; color: #d7dae8; padding: 0; line-height: 1; }
.star-picker button.on { color: #f59e0b; }
.review-stars { color: #f59e0b; font-size: 15px; letter-spacing: 1px; }
.review-row { margin-bottom: 12px; padding: 16px 18px; }
.review-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.verify-badge {
  display: inline-block; background: var(--green-bg); color: var(--green); font-size: 11px;
  font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 2px;
}
.verify-badge.banner-badge { background: rgba(255, 255, 255, .25); color: #fff; font-size: 12px; vertical-align: 4px; }

/* ============ order status pills ============ */
.state-pill.pending_payment { background: var(--amber-bg); color: #b45309; }
.state-pill.in_escrow { background: #dbeafe; color: #1d4ed8; }
.state-pill.released { background: var(--green-bg); color: var(--green); }
.state-pill.disputed { background: var(--red-bg); color: var(--red); }
.state-pill.refunded, .state-pill.cancelled { background: var(--bg); color: var(--ink-3); }

/* ============ share & safety ============ */
.share-row { display: flex; gap: 8px; margin-top: 10px; }
.share-row .btn { flex: 1; }
.safety-list { margin: 10px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.safety-list li { margin-bottom: 6px; }
.safety-list li:last-child { margin-bottom: 0; }

/* ============ live shows ============ */
.tag-live { background: linear-gradient(135deg, #ef4444, #dc2626); position: absolute; top: 10px; left: 10px; z-index: 2;
  box-shadow: 0 4px 14px -3px rgba(239,68,68,.7); }
.live-thumb { background: #16182d; }
.live-thumb img { opacity: .92; }
.live-stage {
  position: relative; border-radius: 20px; overflow: hidden;
  aspect-ratio: 4/3; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 0%, #1a1636, #0b0d1c 70%);
  box-shadow: 0 24px 60px -24px rgba(16, 185, 129,.55); border: 1px solid #2a2650;
}
.live-stage img, .live-stage video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.live-stage img.noframe { display: none; }
.live-stage .tag-live { top: 14px; left: 14px; }
/* soft top scrim so the LIVE badge + viewer count read over any frame */
.live-stage::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 90px; z-index: 1;
  background: linear-gradient(rgba(0,0,0,.4), transparent); pointer-events: none; }
.live-viewers {
  position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px); color: #fff; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}
.live-wait { color: #9aa0bd; font-weight: 700; z-index: 1; text-align: center; padding: 20px; }
.live-chat { height: 560px; }
.live-msg { font-size: 13.5px; line-height: 1.45; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 7px 12px; align-self: flex-start; max-width: 100%; }
.live-msg .lm-name { font-weight: 800; margin-right: 4px; }

/* ============ admin ============ */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); }
.stat-card span { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); margin-bottom: 4px; }
.stat-card b { font-size: 20px; letter-spacing: -.5px; }
.stat-card.good { border-color: #a7f3d0; background: linear-gradient(180deg, #ecfdf5, #fff); }
.stat-card.good b { color: var(--green); }
.stat-card.bad b { color: var(--red); }

/* ============ COD ============ */
.state-pill.cod { background: var(--brand-tint); color: var(--brand); }

/* ============ Urdu / RTL ============ */
[lang="ur"] body,
[dir="rtl"] {
  font-family: "Geeza Pro", "Segoe UI", "Noto Naskh Arabic", Tahoma, -apple-system, sans-serif;
}
[dir="rtl"] body { line-height: 1.85; }
[dir="rtl"] .card-title { line-height: 1.7; }
[dir="rtl"] .hero h1 { line-height: 1.5; }
/* flip absolutely-positioned corner elements */
[dir="rtl"] .tag { left: auto; right: 10px; }
[dir="rtl"] .hot-ribbon { right: auto; left: 10px; }
[dir="rtl"] .countdown-chip { left: auto; right: 10px; }
[dir="rtl"] .watch-btn { right: auto; left: 10px; }
[dir="rtl"] .badge-dot { right: auto; left: -6px; }
[dir="rtl"] .dropdown, [dir="rtl"] .notif-panel { right: auto; left: 0; }
[dir="rtl"] .live-viewers { right: auto; left: 14px; }
[dir="rtl"] .live-stage .tag-live { left: auto; right: 14px; }
[dir="rtl"] .toasts { right: auto; left: 24px; }
[dir="rtl"] .hn { direction: ltr; }
/* search bar rounding mirrors in RTL */
[dir="rtl"] .searchbar input { border-radius: 0 12px 12px 0; border-right: 1.5px solid var(--line); border-left: 0; }
[dir="rtl"] .searchbar button { border-radius: 12px 0 0 12px; }
[dir="rtl"] .hero-search input { border-radius: 0 14px 14px 0; }
[dir="rtl"] .hero-search button { border-radius: 14px 0 0 14px; }
[dir="rtl"] .bubble.me { border-bottom-right-radius: 16px; border-bottom-left-radius: 4px; }
[dir="rtl"] .bubble.them { border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; }
/* keep prices & Latin numerals LTR inside RTL text */
.card-price, .bid-box-price, .cd-cell b, .stat-card b, .hero-stats b { direction: ltr; }
[dir="rtl"] .card-price, [dir="rtl"] .bid-box-price { text-align: right; }

/* ============ lucky draw (futuristic) ============ */
.btn-draw {
  background: linear-gradient(135deg, #046A38, #10B981 55%, #FBBF24);
  color: #fff; box-shadow: 0 6px 18px -6px rgba(16, 185, 129, .6);
}
.btn-draw:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 10px 26px -6px rgba(251, 191, 36, .6); }

.draw-hero {
  position: relative; overflow: hidden; border-radius: 24px; margin: 20px 0 26px;
  padding: 46px 40px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #10B981 0%, #01411C 45%, #01180E 100%);
  border: 1px solid #ffffff1a;
}
.draw-hero-inner { position: relative; z-index: 2; max-width: 640px; }
.draw-hero-badge {
  display: inline-block; background: #ffffff1f; border: 1px solid #ffffff33; color: #fff;
  padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; margin-bottom: 14px;
  backdrop-filter: blur(6px);
}
.draw-hero h1 { font-size: clamp(26px, 4vw, 40px); font-weight: 900; letter-spacing: -1px; margin: 0 0 10px; }
.draw-hero h1 span { background: linear-gradient(135deg, #fbbf24, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.draw-hero p { font-size: 16px; opacity: .9; margin: 0; }
.draw-hero-orbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.draw-hero-orbs span {
  position: absolute; font-size: 60px; opacity: .18; filter: drop-shadow(0 0 30px #fff);
  animation: floaty 6s ease-in-out infinite;
}
.draw-hero-orbs span:nth-child(1) { right: 6%; top: 18%; animation-delay: 0s; }
.draw-hero-orbs span:nth-child(2) { right: 22%; top: 58%; animation-delay: 1.2s; }
.draw-hero-orbs span:nth-child(3) { right: 40%; top: 24%; animation-delay: 2.1s; font-size: 44px; }
.draw-hero-orbs span:nth-child(4) { right: 12%; top: 68%; animation-delay: 3s; font-size: 50px; }
@keyframes floaty { 50% { transform: translateY(-16px) rotate(8deg); } }

.draw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.draw-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 270px; gap: 18px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x mandatory; }
.draw-rail .draw-card { scroll-snap-align: start; }
.draw-card {
  position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #1a1730, #12101f); border: 1px solid #2a2650;
  box-shadow: 0 10px 30px -14px rgba(16, 185, 129, .5); transition: .2s; color: #fff;
}
.draw-card:hover { transform: translateY(-4px); border-color: var(--brand-2); box-shadow: 0 18px 44px -14px rgba(16, 185, 129, .55); }
.draw-card-img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.draw-card-img img { width: 100%; height: 100%; object-fit: cover; }
.draw-card-glow { position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 120%, rgba(16, 185, 129, .55), transparent 70%); }
.draw-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .4px; color: #fff;
}
.draw-badge.live { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.draw-badge.won { background: linear-gradient(135deg, #f59e0b, #d97706); }
.draw-badge .pulse { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
.draw-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.draw-title { font-weight: 800; font-size: 15px; line-height: 1.3; }
.draw-worth { font-size: 12px; color: #c4b5fd; font-weight: 700; }
.draw-progress { position: relative; height: 10px; border-radius: 999px; background: #ffffff14; overflow: hidden; }
.draw-progress.big { height: 16px; margin: 16px 0 8px; }
.draw-progress-fill {
  height: 100%; border-radius: 999px; background: linear-gradient(90deg, #046A38, #10B981, #FBBF24);
  background-size: 200% 100%; animation: shimmer 2.4s linear infinite; transition: width .6s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 0 14px rgba(251, 191, 36, .7);
}
@keyframes shimmer { to { background-position: 200% 0; } }
.draw-progress-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; }
.draw-meta { display: flex; justify-content: space-between; font-size: 12.5px; color: #cbd0e8; }
.draw-meta b { color: #fff; }
.draw-enter-row { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.draw-price { font-weight: 850; font-size: 15px; }
.draw-cta { font-size: 12.5px; font-weight: 800; color: #fbbf24; }
.draw-won-line { font-size: 13px; color: #fcd34d; }
.draw-card.is-drawn { opacity: .96; }

.draw-how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
.draw-how-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); }
.draw-how-card b { display: block; margin-bottom: 6px; color: var(--brand-2); }
.draw-how-card span { font-size: 13px; color: var(--ink-2); }

.draw-back { display: inline-block; margin: 6px 0 12px; color: var(--brand); font-weight: 700; }
.draw-detail { display: grid; grid-template-columns: 1fr 400px; gap: 26px; align-items: start; }
.draw-stage-img {
  position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16/11;
  background: var(--brand-deep); box-shadow: 0 20px 50px -20px rgba(16, 185, 129, .55); border: 1px solid #14432C;
}
.draw-stage-img img { width: 100%; height: 100%; object-fit: cover; }
.draw-panel {
  background: linear-gradient(180deg, #1a1730, #12101f); color: #fff;
  border: 1px solid #2a2650; border-radius: 20px; padding: 22px; box-shadow: var(--shadow-lg);
}
.draw-title-lg { font-size: 20px; font-weight: 800; line-height: 1.3; }
.draw-worth-lg { color: #c4b5fd; font-weight: 700; font-size: 13.5px; margin-top: 4px; }
.draw-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 16px; }
.draw-stat { background: #ffffff0f; border: 1px solid #ffffff17; border-radius: 12px; padding: 10px 12px; }
.draw-stat b { display: block; font-size: 17px; letter-spacing: -.3px; }
.draw-stat span { font-size: 11.5px; color: #b9c0e0; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.draw-stat.accent { background: linear-gradient(135deg, rgba(16, 185, 129, .3), rgba(251, 191, 36, .2)); border-color: #10B98166; }
.draw-mine { background: #fbbf2422; border: 1px solid #fbbf2455; color: #fde68a; border-radius: 12px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 12px; }
.draw-trust { text-align: center; font-size: 12px; color: #b9c0e0; margin-top: 12px; }
.draw-result { text-align: center; padding: 12px 6px; }
.draw-result.me .draw-trophy { animation: pop 0.6s ease; }
.draw-trophy { font-size: 70px; filter: drop-shadow(0 0 24px #fbbf24); }
.draw-result h2 { font-size: 24px; margin: 6px 0; }
.draw-winner-name { font-size: 22px; font-weight: 900; background: linear-gradient(135deg, #fbbf24, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.draw-winner-ticket { color: #cbd0e8; margin-top: 4px; }
.draw-result p { color: #cbd0e8; font-size: 13.5px; margin-top: 10px; }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

.draw-entry-list { display: flex; flex-direction: column; gap: 4px; }
.draw-entry { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.draw-entry:last-child { border-bottom: 0; }
.de-name { font-weight: 700; flex: 1; }
.de-ticket { font-weight: 800; color: var(--brand-2); }
.de-time { color: var(--ink-3); font-size: 12px; }

.draw-modal .qty-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-weight: 700; }
.qty-ctrl { display: flex; align-items: center; gap: 0; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.qty-ctrl button { border: 0; background: var(--bg); width: 40px; height: 40px; font-size: 20px; font-weight: 800; cursor: pointer; color: var(--brand); }
.qty-ctrl button:hover { background: #eef2ff; }
.qty-ctrl input { width: 54px; text-align: center; border: 0; font-weight: 800; font-size: 16px; outline: none; }
.draw-total { background: linear-gradient(135deg, #faf5ff, #fff); border: 1px solid #e9d5ff; }

.confetti-box { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
.confetti { position: absolute; top: -14px; width: 10px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: .9; } }

[dir="rtl"] .draw-hero-inner { text-align: right; }
.draw-stat b, .draw-price, .draw-worth, .draw-total b { direction: ltr; }

@media (max-width: 960px) {
  .draw-detail { grid-template-columns: 1fr; }
  .draw-how { grid-template-columns: 1fr 1fr; }
}

/* ============ mobile app: bottom nav + install ============ */
.tabbar { display: none; }
/* The `hidden` attribute only carries UA-stylesheet weight, so ANY class rule
   with a `display` wins and the element stays visible. That silently broke the
   install banner's Install/Later buttons — dismissing it did nothing. Global
   reset so `el.hidden = true` is always trustworthy. */
[hidden] { display: none !important; }

.install-banner {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80;
  background: #16182d; color: #fff; border-radius: 16px; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: var(--shadow-lg); font-size: 13.5px; font-weight: 600;
}
.install-banner > div { display: flex; gap: 8px; flex-shrink: 0; }

@media (max-width: 760px) {
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 0 7px; font-size: 10.5px; font-weight: 700; color: var(--ink-3);
  }
  .tabbar a .ti { font-size: 20px; line-height: 1; }
  .tabbar a.on { color: var(--brand); }
  .tabbar a.tab-fab .ti {
    background: var(--brand-grad); color: #fff; width: 42px; height: 42px; border-radius: 14px;
    display: grid; place-items: center; margin-top: -14px; box-shadow: 0 6px 16px -4px rgba(16, 185, 129, .6);
    font-size: 24px; font-weight: 400;
  }
  .tabbar a.tab-fab { color: var(--brand); }
  body { padding-bottom: 64px; }
  .footer { margin-bottom: 60px; }
  .install-banner { bottom: 72px; }
  /* keep the feed's text/actions clear of the bottom tab bar */
  .fd-info { padding-bottom: calc(86px + env(safe-area-inset-bottom,0)); }
  .fd-side { bottom: 200px; }
  body.feed-mode .tabbar { background: rgba(0,0,0,.72); border-top-color: #2a2650; }
  body.feed-mode .tabbar a { color: rgba(255,255,255,.65); }
  body.feed-mode .tabbar a.on { color: #fff; }
  /* hide the desktop live/draw nav chips (present in the bottom bar instead) to declutter the header */
  .hide-sm { display: none !important; }
  /* phones: keep only Explore / notifications / Sell / avatar in the header —
     language + currency move into the Explore menu */
  .nav-actions .cur-sel { display: none; }
  .topbar-inner { gap: 8px; padding: 8px 12px; }
  .logo-text { font-size: 19px; }
}

/* ============ verify banner ============ */
.verify-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, #fff7ed, #fef3c7); border: 1px solid #fed7aa;
  color: #9a3412; border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; font-weight: 600;
}
.verify-banner .btn { margin-left: auto; }

/* ============ AI assistant ============ */
.ai-btn {
  float: right; border: 1.5px solid #c7d2fe; background: linear-gradient(135deg, #eef2ff, #faf5ff);
  color: var(--brand-2); border-radius: 999px; padding: 3px 12px; font-size: 12.5px; font-weight: 800;
  cursor: pointer; margin-top: -2px;
}
.ai-btn:hover { border-color: var(--brand); }
.ai-btn:disabled { opacity: .6; cursor: wait; }
.ai-price { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
.ai-price b { color: var(--green); }
.ai-price span { color: var(--ink-3); font-size: 12.5px; }

/* ============ WhatsApp buttons ============ */
.wa-btn { background: #25d366; color: #fff !important; border: 0; }
.wa-btn:hover { background: #1eb556; }

/* ============ referrals ============ */
.invite-hero {
  background: var(--brand-grad); color: #fff; border-radius: 20px; padding: 28px; box-shadow: var(--shadow-lg);
}
.invite-hero h2 { margin: 0 0 6px; }
.invite-hero p { opacity: .92; margin: 0 0 18px; }
.invite-stats { display: flex; gap: 26px; margin-bottom: 20px; flex-wrap: wrap; }
.invite-stats b { display: block; font-size: 26px; letter-spacing: -.5px; }
.invite-stats span { font-size: 12.5px; opacity: .85; }
.invite-code-box { background: rgba(255, 255, 255, .15); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.invite-code-box .mini-label { color: rgba(255, 255, 255, .8); }
.invite-code { font-size: 28px; font-weight: 900; letter-spacing: 5px; direction: ltr; }
.invite-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============ scam warning ============ */
.scam-warn {
  background: var(--red-bg); color: #b91c1c; font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-top: 1px solid #fecaca; line-height: 1.4;
}

/* ============ 18+ age gate & reporting ============ */
.age-check { display: flex; gap: 10px; align-items: flex-start; background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.age-check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--brand); flex-shrink: 0; }
.age-check a { color: var(--brand); font-weight: 700; }
.report-reasons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.report-reason { border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 14px;
  text-align: left; cursor: pointer; font-weight: 600; font-size: 13.5px; }
.report-reason.on { border-color: var(--red); background: var(--red-bg); color: var(--red); }
.report-btn { background: none; border: 0; color: var(--ink-3); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 4px; }
.report-btn:hover { color: var(--red); }

/* ============ TikTok-style vertical feed ============ */
/* Immersive full-screen feed: hide site chrome while browsing it. */
body.feed-mode .topbar, body.feed-mode .footer, body.feed-mode .install-banner { display: none !important; }
body.feed-mode { padding-bottom: 0 !important; overflow: hidden; }
.feed-wrap { position: fixed; inset: 0; background: #000; overflow-y: auto; scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch; z-index: 60; }
.feed-back { position: fixed; top: calc(14px + env(safe-area-inset-top,0)); left: 14px; z-index: 70;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; font-size: 18px;
  background: rgba(0,0,0,.45); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; }
.fd-item { position: relative; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: flex-end; overflow: hidden; }
.fd-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fd-shade { position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0,0,0,.82)); }
.fd-live { position: absolute; top: calc(14px + env(safe-area-inset-top,0)); left: 14px; z-index: 3;
  background: linear-gradient(135deg,#ef4444,#dc2626); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .5px;
  padding: 5px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 14px -3px rgba(239,68,68,.7); }
.fd-live .pulse { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
.fd-side { position: absolute; right: 12px; bottom: 210px; z-index: 3; display: flex; flex-direction: column; gap: 18px; }
.fd-act { background: none; border: 0; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; cursor: pointer; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.fd-ico { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); transition: transform .2s; }
.fd-act:hover .fd-ico { transform: scale(1.12); }
.fd-like.liked .fd-ico { animation: none; filter: drop-shadow(0 0 10px rgba(239,68,68,.9)); }
.fd-like.pop .fd-ico { animation: likePop .4s ease; }
@keyframes likePop { 0%{transform:scale(1)} 45%{transform:scale(1.5)} 100%{transform:scale(1)} }
.fd-info { position: relative; z-index: 3; padding: 20px 84px 0 18px; color: #fff; width: 100%;
  padding-bottom: calc(96px + env(safe-area-inset-bottom,0)); }
.fd-seller { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 8px; flex-wrap: wrap; }
.fd-seller .avatar { box-shadow: none; border: 2px solid rgba(255,255,255,.5); }
.fd-city { opacity: .8; font-size: 12.5px; }
.fd-title { display: block; font-size: 17px; font-weight: 800; line-height: 1.3; margin-bottom: 6px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.fd-tags { font-size: 13px; margin-bottom: 12px; }
.fd-tags a { color: #a5b4fc; font-weight: 700; margin-right: 6px; }
.fd-buy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fd-price span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; opacity: .8; font-weight: 700; }
.fd-price b { font-size: 22px; letter-spacing: -.5px; direction: ltr; }
.feed-tagchip { position: fixed; top: calc(12px + env(safe-area-inset-top,0)); left: 50%; transform: translateX(-50%); z-index: 50;
  background: rgba(255,255,255,.16); backdrop-filter: blur(10px); color: #fff; border: 1px solid rgba(255,255,255,.3);
  padding: 7px 16px; border-radius: 999px; font-weight: 800; font-size: 13px; }

/* ============ trending ============ */
.trend-hero { background: linear-gradient(135deg,#f59e0b,#ef4444 55%,#ec4899); color: #fff; border-radius: 22px;
  padding: 32px 28px; margin: 18px 0 6px; box-shadow: 0 20px 44px -20px rgba(239,68,68,.6); }
.trend-hero h1 { margin: 0 0 4px; font-size: clamp(22px,3.4vw,30px); font-weight: 900; letter-spacing: -.6px; }
.trend-hero p { margin: 0; opacity: .92; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 9px; }
.tag-chip { background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 15px;
  font-weight: 800; font-size: 13.5px; color: var(--brand-2); display: inline-flex; align-items: center; gap: 7px; transition: .15s; }
.tag-chip:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); }
.tag-chip span { background: var(--bg); color: var(--ink-3); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; }

/* ============ admin moderation ============ */
.mod-row { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow); }
.mod-row.resolved { border-left-color: var(--line); opacity: .65; }
.mod-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.mod-reason { background: var(--red-bg); color: var(--red); font-weight: 800; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.mod-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ============ SEO landing pages ============ */
.seo-landing h1 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 900; letter-spacing: -.7px; margin: 6px 0 8px; }
.seo-landing h2 { font-size: 19px; margin: 30px 0 12px; letter-spacing: -.3px; }
.seo-crumbs { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.seo-crumbs a { color: var(--brand); font-weight: 600; }
.seo-intro { color: var(--ink-2); max-width: 780px; font-size: 15.5px; }
.seo-facts { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 16px 0 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow); }
.seo-facts span { font-size: 13.5px; color: var(--ink-2); }
.seo-facts b { font-size: 17px; color: var(--ink); }
.seo-facts .btn { margin-left: auto; }
.seo-grid { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.seo-card a { display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); transition: .18s; height: 100%; }
.seo-card a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
.seo-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.seo-card strong { padding: 10px 12px 0; font-size: 14.5px; line-height: 1.35; }
.seo-price { padding: 0 12px; font-weight: 850; font-size: 17px; color: var(--brand-2); direction: ltr; }
.seo-meta { padding: 0 12px 12px; font-size: 12.5px; color: var(--ink-3); }
.seo-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.seo-links a { display: inline-block; background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.seo-links a:hover { border-color: var(--brand); color: var(--brand); }

/* ============ B2B: wholesale & RFQ ============ */
.ws-box { background: linear-gradient(180deg,#f0fdf4,#fff); border: 1.5px solid #bbf7d0; border-radius: 14px;
  padding: 14px 16px; margin: 14px 0; }
.ws-head { font-weight: 800; font-size: 14px; color: #15803d; margin-bottom: 10px; }
.ws-tiers { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ws-tiers th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3);
  padding: 4px 6px; border-bottom: 1px solid #d1fae5; }
.ws-tiers td { padding: 7px 6px; border-bottom: 1px solid #ecfdf5; direction: ltr; }
.ws-tiers tr:last-child td { border-bottom: 0; }
.ws-note { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }
.ws-note a { color: var(--brand); font-weight: 700; }
.tier-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tier-row input { flex: 1; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 12px; outline: none; min-width: 0; }
.tier-row input:focus { border-color: var(--brand); }
.tier-row span { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.tier-x { border: 0; background: var(--bg); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; color: var(--ink-3); }
.tier-x:hover { background: var(--red-bg); color: var(--red); }

.rfq-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 18px 0 20px;
  background: linear-gradient(135deg,#01411C,#046A38 60%,#10B981); color: #fff; border-radius: 22px; padding: 30px 28px;
  box-shadow: 0 20px 44px -20px rgba(8,145,178,.6); }
.rfq-hero h1 { margin: 0 0 6px; font-size: clamp(22px,3.4vw,30px); font-weight: 900; letter-spacing: -.6px; }
.rfq-hero p { margin: 0; opacity: .92; max-width: 560px; }
.rfq-cta { margin-left: auto; background: #fff; color: var(--brand); font-weight: 800; }
.rfq-cta:hover { transform: translateY(-1px); }
.rfq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; }
.rfq-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; transition: .18s; }
.rfq-card:hover { transform: translateY(-3px); border-color: var(--brand-2); box-shadow: var(--shadow-lg); }
.rfq-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.rfq-cat { background: #ecfeff; color: #0e7490; font-weight: 800; font-size: 11.5px; padding: 3px 10px; border-radius: 999px; }
.rfq-badge { background: var(--bg); color: var(--ink-3); font-weight: 800; font-size: 11.5px; padding: 3px 10px; border-radius: 999px; }
.rfq-badge.won { background: var(--green-bg); color: var(--green); }
.rfq-title { font-size: 15.5px; line-height: 1.35; }
.rfq-qty { font-size: 13.5px; color: var(--ink-2); direction: ltr; }
.rfq-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-3);
  border-top: 1px solid var(--line); padding-top: 8px; margin-top: auto; flex-wrap: wrap; }
.rfq-quotes { font-weight: 800; color: var(--brand-2); }
.rfq-specs { display: flex; gap: 24px; flex-wrap: wrap; margin: 14px 0; background: var(--bg); border-radius: 12px; padding: 14px 16px; }
.rfq-specs span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); font-weight: 700; }
.rfq-specs b { font-size: 17px; direction: ltr; }
.rfq-buyer { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.quote-row { display: flex; gap: 14px; justify-content: space-between; border: 1px solid var(--line);
  border-radius: 12px; padding: 14px; margin-top: 10px; flex-wrap: wrap; }
.quote-row.won { border-color: var(--green); background: #f0fdf4; }
.quote-main { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; }
.quote-main b { font-size: 15px; }
.quote-msg { font-size: 13px; color: var(--ink-2); font-style: italic; }
.quote-lead { font-size: 12.5px; color: var(--ink-3); }
.quote-price { text-align: right; direction: ltr; }
.quote-price > b { font-size: 22px; letter-spacing: -.5px; color: var(--brand-2); display: block; }
.quote-price > span { font-size: 11.5px; color: var(--ink-3); }
.quote-total { font-size: 13px; font-weight: 700; margin: 4px 0 8px; }

/* ============ vehicle auction sheet (Japanese style) ============ */
.veh-box { background: linear-gradient(180deg,#f8fafc,#fff); border: 1.5px solid #cbd5e1; border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.veh-box h3 { font-size: 15px; margin: 0 0 12px; }
.veh-box h3 small { color: var(--ink-3); font-weight: 600; }
.veh-sheet { background: #0f172a; color: #e2e8f0; border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.veh-sheet-head { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #94a3b8; margin-bottom: 10px; }
.veh-specs { display: flex; gap: 20px; flex-wrap: wrap; }
.veh-specs div { text-align: center; }
.veh-specs b { display: block; font-size: 20px; letter-spacing: -.4px; direction: ltr; }
.veh-specs span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: #94a3b8; font-weight: 700; }
.veh-grade b { color: #fbbf24; font-size: 26px !important; }
.veh-docs { margin-top: 12px; padding-top: 10px; border-top: 1px solid #1e293b; font-size: 13px; color: #cbd5e1; }

/* ============ 🇵🇰 Made in Pakistan ============ */
.pk-badge-lg { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg,#01411C,#046A38);
  color: #fff; font-weight: 800; font-size: 13px; padding: 7px 14px; border-radius: 999px; margin: 10px 0; }
.pk-hero { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin: 18px 0 24px; padding: 32px 30px;
  border-radius: 22px; color: #fff; background: linear-gradient(135deg,#01411C,#046A38 55%,#10B981);
  box-shadow: 0 20px 44px -20px rgba(4,106,56,.6); }
.pk-flag { font-size: 62px; line-height: 1; filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)); }
.pk-hero h1 { margin: 0 0 6px; font-size: clamp(24px,3.6vw,34px); font-weight: 900; letter-spacing: -.8px; }
.pk-hero p { margin: 0 0 16px; opacity: .93; max-width: 620px; }
.pk-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pk-cta { background: #fff; color: #046A38; font-weight: 800; }
.pk-clusters { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 14px; }
.pk-cluster { background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 5px; box-shadow: var(--shadow); transition: .18s; }
.pk-cluster:hover, .pk-cluster.on { border-color: #046A38; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pk-cluster.on { background: #f0fdf4; }
.pk-ico { font-size: 30px; }
.pk-cluster b { font-size: 15px; }
.pk-city { font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.pk-blurb { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.pk-count { font-size: 12px; font-weight: 800; color: #046A38; margin-top: auto; padding-top: 6px; }
.pk-makers { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 12px; }
.pk-maker { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); }
.pk-maker:hover { border-color: #046A38; }
.pk-maker span { font-size: 12.5px; color: var(--ink-3); }

/* ============ seller type + card flags ============ */
.seller-type-badge { display: inline-block; background: var(--bg); color: var(--ink-2); font-size: 11px;
  font-weight: 800; padding: 2px 9px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.card-flags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 2px; }
.card-flags > span { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 6px; }
.mini-flag { background: #dcfce7; }
.mini-grade { background: #fef3c7; color: #92400e; }
.mini-bank { background: #dbeafe; color: #1d4ed8; }
.mini-ws { background: var(--brand-tint); color: var(--brand); }

/* ============ responsive ============ */
@media (max-width: 960px) {
  /* minmax(0,1fr), not 1fr: a `1fr` track is minmax(auto,1fr) and `auto` floors
     the track at the content's min-content width, so one unshrinkable child (the
     bid form's input + nowrap button) pushed the whole page wider than the phone
     and gave every item page a horizontal scrollbar. */
  .item-layout, .msg-layout { grid-template-columns: minmax(0, 1fr); }
  .browse-layout { grid-template-columns: minmax(0, 1fr); }
  .filters { position: static; }
  .how-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .topbar-inner { flex-wrap: wrap; }
  .searchbar { order: 3; max-width: none; width: 100%; }
  .hero { padding: 34px 22px; }
  .f-grid-2, .f-grid-3 { grid-template-columns: 1fr; }
  .dash-row { flex-wrap: wrap; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}

/* live viewer: owner's end-show control */
.lv-end { position: absolute; top: 14px; right: 14px; z-index: 4; }
.live-stage .live-viewers { z-index: 3; }
@media (max-width: 640px) {
  .lv-end { top: auto; bottom: 14px; right: 14px; }
}

/* language + currency inside the Explore menu (phones) */
.dd-prefs { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); }
.dd-prefs .cur-sel { flex: 1; display: block !important; }

/* Explore menu sits near the left edge — anchor it left so it can't run off-screen */
#explore-wrap .dropdown { right: auto; left: 0; max-width: calc(100vw - 24px); }
@media (max-width: 640px) {
  #explore-wrap .dropdown { left: 0; width: min(260px, calc(100vw - 24px)); }
}

/* new-marketplace launch banner (shown instead of empty zero-stats) */
.hero-launch { position: relative; z-index: 1; margin-top: 22px; display: inline-block;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px);
  color: #fff; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 999px; }
.seo-kw { color: var(--ink-3); font-size: 13px; margin: -6px 0 4px; }

/* admin bulk listing table */
.bulk-wrap { overflow-x: auto; margin-top: 12px; }
.bulk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bulk-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ink-3); padding: 6px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bulk-table td { padding: 4px 4px; border-bottom: 1px solid var(--line); }
.bulk-table input, .bulk-table select { width: 100%; border: 1.5px solid var(--line); border-radius: 8px;
  padding: 7px 9px; outline: none; font-size: 13px; background: #fff; }
.bulk-table input:focus, .bulk-table select:focus { border-color: var(--brand); }

/* brand mark */
.logo-mark { width: 34px; height: 34px; border-radius: 10px; display: block; flex-shrink: 0; }
.footer-logo .logo-mark { width: 30px; height: 30px; }
.logo { gap: 10px; }

/* promo kit */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.promo-item { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.promo-tag { font-size: 12px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; }
.promo-img { width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.promo-cap { display: flex; gap: 12px; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); padding: 10px 0; flex-wrap: wrap; }
.promo-cap:last-child { border-bottom: 0; }
.promo-cap p { margin: 0; font-size: 13.5px; color: var(--ink-2); flex: 1; min-width: 220px; }

/* ---- CAPTCHA (Turnstile) ---- */
.captcha-slot { margin: 12px 0 4px; min-height: 66px; display: flex; justify-content: center; }
.captcha-slot:empty { min-height: 0; margin: 0; }

/* ---- Live: earned airtime, scheduling, share ---- */
.airtime-card { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff;
  border-radius: 14px; padding: 16px 18px; margin: 14px 0 16px; text-align: center; }
.airtime-big { font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.airtime-sub { font-size: 12px; opacity: .85; text-transform: uppercase; letter-spacing: .6px; }
.airtime-stats { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.airtime-stats span { background: rgba(255,255,255,.18); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; }
.airtime-tip { font-size: 12.5px; opacity: .92; margin-top: 10px; line-height: 1.5; }

.tabs-mini { display: flex; gap: 6px; margin-bottom: 14px; }
.tabs-mini button { flex: 1; padding: 9px; border: 1px solid var(--line); background: var(--bg);
  border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.tabs-mini button.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.live-timer { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.62); color: #fff;
  border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.live-timer.low { background: #dc2626; animation: pulseWarn 1s infinite; }
@keyframes pulseWarn { 50% { opacity: .55; } }

/* Distinct from the listing page's .share-row (button pair) — this one pairs a
   URL field with a Copy button. */
.sharelink-row { display: flex; gap: 8px; margin: 12px 0; }
.sharelink-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 13px; }
.share-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* On a phone the URL and the Copy button can't share one row without truncating
   the link to uselessness — stack them and let each take the full width. */
@media (max-width: 560px) {
  .sharelink-row { flex-direction: column; }
  .sharelink-row input, .sharelink-row .btn { width: 100%; }
  .share-btns .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

.upcoming-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.upcoming-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-decoration: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
.upcoming-row:hover { border-color: var(--brand); }
.up-when { display: flex; flex-direction: column; text-align: center; min-width: 62px; color: var(--brand); }
.up-when small { color: var(--ink-3); font-size: 11.5px; }
.up-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.up-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-info small { color: var(--ink-3); font-size: 12.5px; }
.up-go { color: var(--ink-3); font-size: 18px; }

/* ---- Support assistant (chat bot) ---- */
#bot-fab { position: fixed; right: 18px; bottom: calc(84px + var(--fab-lift, 0px)); z-index: 90; width: 52px; height: 52px;
  border-radius: 50%; border: none; cursor: pointer; font-size: 23px; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 20px rgba(0,0,0,.28); }
#bot-fab:hover { transform: scale(1.06); }
#bot-fab.hidden { display: none; }
/* Don't stack two floating CTAs. The install banner is transient and dismissible,
   so the help bubble steps aside rather than fighting it for the corner (and for
   taps on whatever content sits under the lifted position). */
body.has-install-banner #bot-fab { display: none; }
#bot-panel { position: fixed; right: 18px; bottom: calc(84px + var(--fab-lift, 0px)); z-index: 91; width: min(370px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 130px - var(--fab-lift, 0px))); display: none; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 44px rgba(0,0,0,.32); }
#bot-panel.open { display: flex; }
.bot-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.bot-head button { background: none; border: none; color: #fff; font-size: 17px; cursor: pointer; opacity: .85; }
.bot-scroll { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 150px; }
.bot-msg { display: flex; flex-direction: column; max-width: 88%; }
.bot-bot { align-self: flex-start; align-items: flex-start; }
.bot-me { align-self: flex-end; align-items: flex-end; }
.bot-bubble { padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.55; }
.bot-bot .bot-bubble { background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink); }
.bot-me .bot-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.bot-cta { margin-top: 7px; align-self: flex-start; font-size: 13px; font-weight: 600; text-decoration: none;
  background: var(--bg); border: 1px solid var(--brand); color: var(--brand); border-radius: 999px; padding: 6px 13px; }
.bot-chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 10px; }
.bot-chips button { flex: 0 0 auto; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.bot-chips button:hover { border-color: var(--brand); color: var(--brand); }
.bot-input-row { display: flex; gap: 7px; padding: 10px 12px; border-top: 1px solid var(--line); }
.bot-input-row input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--bg); color: var(--ink); font-size: 14px; }
[dir="rtl"] .bot-bot { align-self: flex-end; } [dir="rtl"] .bot-me { align-self: flex-start; }
@media (max-width: 560px) {
  #bot-fab { right: 12px; bottom: calc(78px + var(--fab-lift, 0px)); width: 46px; height: 46px; font-size: 20px; }
  #bot-panel { right: 8px; left: 8px; bottom: calc(78px + var(--fab-lift, 0px)); width: auto; }
}

/* ============================================================
   3D / glossy pass
   Depth comes from three stacked cues, applied consistently:
   an inset top highlight (light from above), a coloured ambient
   shadow (the object sits on the page), and a press state that
   actually moves. Kept subtle so it reads as dimensional rather
   than skeuomorphic.
   ============================================================ */

:root{
  --lift-1: 0 1px 2px rgba(6,32,21,.06), 0 4px 10px -3px rgba(6,32,21,.10);
  --lift-2: 0 2px 4px rgba(6,32,21,.07), 0 12px 26px -8px rgba(6,32,21,.18);
  --lift-3: 0 4px 8px rgba(6,32,21,.08), 0 26px 50px -14px rgba(6,32,21,.28);
  --gloss-top: inset 0 1px 0 rgba(255,255,255,.45);
  --gloss-top-strong: inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(0,0,0,.12);
}

/* ---- buttons: lit top edge, shaded underside, real press ---- */
.btn{ position: relative; overflow: hidden; }
.btn::after{
  content:""; position:absolute; inset:0 0 55% 0; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
}
.btn-primary, .btn-amber, .btn-danger-solid{
  box-shadow: var(--gloss-top-strong), 0 4px 10px -2px rgba(4,106,56,.35), 0 12px 26px -10px rgba(4,106,56,.45);
}
.btn-primary:not(:disabled):hover, .btn-amber:not(:disabled):hover{
  transform: translateY(-2px);
  box-shadow: var(--gloss-top-strong), 0 8px 16px -3px rgba(4,106,56,.38), 0 20px 38px -12px rgba(4,106,56,.5);
}
.btn-primary:not(:disabled):active, .btn-amber:not(:disabled):active{
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.25), 0 2px 5px -2px rgba(4,106,56,.4);
}
.btn-amber{
  box-shadow: var(--gloss-top-strong), 0 4px 10px -2px rgba(217,119,6,.4), 0 12px 26px -10px rgba(217,119,6,.5);
}
.btn-ghost{ box-shadow: var(--gloss-top), var(--lift-1); }
.btn-ghost:hover{ box-shadow: var(--gloss-top), var(--lift-2); transform: translateY(-1px); }

/* ---- cards + panels: sit on the page, rise on hover ---- */
.card, .panel, .form-card, .rfq-card, .upcoming-row, .ctx-card{
  box-shadow: var(--lift-2);
}
.card{ transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s; }
.card:hover{ transform: translateY(-4px); box-shadow: var(--lift-3); }

/* ---- hero: glass sheen + grounded shadow ---- */
.hero{ position: relative; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(1,65,28,.65); }
.hero::before{
  content:""; position:absolute; left:-10%; top:-60%; width:120%; height:120%;
  background: radial-gradient(60% 55% at 30% 35%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
  pointer-events:none;
}

/* ---- category tiles + stat chips ---- */
.cat-tile, .airtime-stats span{ box-shadow: var(--gloss-top), var(--lift-1); }
.cat-tile{ transition: transform .18s, box-shadow .18s; }
.cat-tile:hover{ transform: translateY(-3px); box-shadow: var(--gloss-top), var(--lift-2); }

/* ---- the mark itself gets a matching drop shadow in the chrome ---- */
.logo-mark{ filter: drop-shadow(0 2px 4px rgba(1,49,26,.28)); }
.tab-fab{ box-shadow: var(--gloss-top-strong), 0 6px 14px -3px rgba(4,106,56,.45), 0 14px 30px -10px rgba(4,106,56,.5); }
#bot-fab{ box-shadow: var(--gloss-top-strong), 0 6px 18px -4px rgba(4,106,56,.5), 0 16px 34px -12px rgba(4,106,56,.45); }

/* wordmark reads brighter with the softer gradient */
.logo em{ background: var(--brand-grad-soft); -webkit-background-clip: text; background-clip: text; }

@media (prefers-reduced-motion: reduce){
  .card, .cat-tile, .btn{ transition: none; }
  .card:hover, .cat-tile:hover, .btn:hover{ transform: none; }
}

/* ============ 🇵🇰 Azadi Sale (14 August) ============ */
.az-banner{
  display:flex; align-items:center; gap:14px; margin-top:18px; padding:13px 16px;
  border-radius:16px; text-decoration:none; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(100deg,#01411C,#046A38 45%,#0B7A44);
  box-shadow: var(--gloss-top-strong), 0 10px 26px -10px rgba(1,65,28,.7);
  border:1px solid rgba(255,255,255,.16);
}
.az-banner::after{ content:""; position:absolute; inset:0 0 55% 0;
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0)); pointer-events:none; }
.az-banner:hover{ transform:translateY(-1px); }
.az-flag{ font-size:26px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.az-copy{ display:flex; flex-direction:column; line-height:1.3; }
.az-copy b{ font-size:15px; }
.az-copy small{ opacity:.85; font-size:12.5px; }
.az-go{ margin-inline-start:auto; font-size:19px; opacity:.8; }

.az-clock{ display:flex; gap:7px; }
.az-cell{ display:flex; flex-direction:column; align-items:center; min-width:38px;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14);
  border-radius:9px; padding:4px 6px; }
.az-cell b{ font-size:16px; font-variant-numeric:tabular-nums; line-height:1.1; color:#FDE68A; }
.az-cell i{ font-style:normal; font-size:9.5px; opacity:.75; text-transform:uppercase; letter-spacing:.4px; }
.az-clock-lg .az-cell{ min-width:58px; padding:8px 10px; }
.az-clock-lg .az-cell b{ font-size:26px; }
.az-clock-lg .az-cell i{ font-size:11px; }

.az-hero{ margin:14px 0 22px; padding:34px 26px; border-radius:22px; color:#fff; text-align:center;
  position:relative; overflow:hidden;
  background:
    radial-gradient(90% 120% at 85% -10%, rgba(251,191,36,.32), transparent 55%),
    linear-gradient(135deg,#01411C,#046A38 55%,#0B7A44);
  box-shadow:0 26px 56px -26px rgba(1,65,28,.75);
}
.az-hero-in{ display:flex; flex-direction:column; align-items:center; gap:12px; position:relative; }
.az-hero-flag{ font-size:44px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.az-hero h1{ margin:0; font-size:clamp(24px,4.4vw,36px); letter-spacing:-.5px; }
.az-hero p{ margin:0; opacity:.9; }
.az-best{ background:var(--gold); color:#4A2C00; font-weight:800; border-radius:999px;
  padding:6px 16px; font-size:15px; box-shadow:var(--gloss-top), 0 6px 16px -6px rgba(0,0,0,.5); }

.az-badge{ position:absolute; top:10px; inset-inline-start:10px; z-index:2;
  background:linear-gradient(135deg,#046A38,#0B7A44); color:#fff;
  font-size:10.5px; font-weight:800; letter-spacing:.4px;
  border-radius:999px; padding:4px 9px; border:1px solid rgba(255,255,255,.25);
  box-shadow:0 4px 10px -3px rgba(1,65,28,.7); }
.az-optin span b{ color:var(--brand); }

@media (max-width:560px){
  /* two tidy rows: flag + copy, then the clock full width. Wrapping the flex
     row left the flag stranded on a line of its own. */
  .az-banner{ display:grid; grid-template-columns:auto 1fr; gap:6px 12px; padding:12px 14px; }
  .az-flag{ grid-row:1; align-self:center; }
  .az-copy{ grid-row:1; }
  .az-go{ display:none; }
  .az-clock{ grid-column:1 / -1; justify-content:space-between; }
  .az-cell{ flex:1; }
  .az-hero{ padding:26px 18px; }
  .az-clock-lg .az-cell{ min-width:0; padding:7px 4px; }
  .az-clock-lg .az-cell b{ font-size:21px; }
}