/* ===== ROOT ===== */
:root {
  --navy: #060B18;
  --navy-light: #0F1B33;
  --accent: #3B6EF5;
  --accent-hover: #2E5CE0;
  --accent-light: #EEF3FF;
  --gold: #C99B4A;
  --gold-light: #FBF3E4;
  --green: #16A088;
  --red: #E5484D;
  --bg: #F4F6F9;
  --white: #FFFFFF;
  --text: #10141F;
  --text-muted: #5B6472;
  --text-light: #9AA3B0;
  --border: #E5E9EF;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(16,20,31,0.06), 0 6px 20px rgba(16,20,31,0.05);
  --shadow-lg: 0 24px 70px rgba(6,11,24,0.22);
  --nav-h: 56px;
  --max-w: 480px;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.6;
  max-width: var(--max-w); margin: 0 auto;
  min-height: 100vh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
input, select, textarea, button { font-family: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

/* ===== PAGE ===== */
.page { min-height: 100vh; padding-top: var(--nav-h); padding-bottom: 80px; }
#homePage { padding-bottom: 0; }

/* ===== NAVBAR ===== */
.navbar {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--max-w); z-index: 1000;
  background: linear-gradient(180deg, #0A1224 0%, var(--navy) 100%); height: var(--nav-h);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 20px rgba(6,11,24,0.35);
}
.nav-container {
  height: 100%; display: flex; align-items: center;
  justify-content: space-between; padding: 0 16px;
}
.nav-brand { display: flex; align-items: center; gap: 8px; }
.brand-icon {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--accent), #6C5CE0);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: white; font-size: 15px;
}
/* The mark is an inline <svg> now, not a Font Awesome glyph, so it needs an
   explicit box - an svg with no width collapses or defaults to 300x150.
   overflow visible lets the drop shadow spill past the viewBox edge. */
.brand-mark { width: 23px; height: 23px; display: block; overflow: visible; }
.brand-text { font-size: 20px; font-weight: 800; color: white; }
.brand-accent { color: var(--gold); }
.nav-actions { display: flex; align-items: center; gap: 8px; position: relative; }
.nav-icon-btn {
  background: rgba(255,255,255,0.1); border: none; color: white;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}

/* Signed-out state. A pill with the word "Sign in" rather than a lone person
   icon, which a visitor with no account reads as "my account" and skips. */
.nav-signin-btn {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); color: #fff;
  height: 36px; padding: 0 16px; border-radius: 999px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.nav-signin-btn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.35); }
body.on-home .nav-signin-btn { background: var(--hb-panel, #F1F5F9); border-color: #E2E8F0; color: var(--hb-text, #0F172A); }
body.on-home .nav-signin-btn:hover { background: #E2E8F0; }
/* Below ~520px the label would push the navbar into wrapping, so it drops
   back to the circular icon. */
@media (max-width: 520px) {
  .nav-signin-btn { width: 36px; padding: 0; justify-content: center; border-radius: 50%; }
  .nav-signin-btn span { display: none; }
}

.user-avatar { cursor: pointer; position: relative; }
.staff-badge {
  position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px;
  background: linear-gradient(135deg, var(--gold), #D9AD5F); border: 2px solid var(--navy);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--navy);
}
.role-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.role-badge-pill {
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.4px; display: inline-flex; align-items: center; gap: 4px;
}
.role-badge-superadmin { background: linear-gradient(135deg, var(--gold), #D9AD5F); color: var(--navy); }
.role-badge-admin { background: var(--accent-light); color: var(--accent); }
.role-badge-manager { background: #EDE9FE; color: #6C5CE0; }
.role-badge-merchant { background: #D1FAE5; color: #065F46; }
.staff-link { color: var(--gold) !important; font-weight: 700 !important; }
.staff-link i { color: var(--gold); }
.user-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
.user-menu {
  position: absolute; top: 44px; right: 0;
  background: white; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 220px; border: 1px solid var(--border); overflow: hidden; z-index: 2000;
}
.user-menu-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--bg); }
.user-menu-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.user-menu-header strong { display: block; font-size: 14px; }
.user-menu-header small { color: var(--text-muted); font-size: 12px; }
.user-menu a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--text); font-size: 14px; transition: 0.15s; }
.user-menu a:hover { background: var(--bg); }
.user-menu hr { border: none; border-top: 1px solid var(--border); }
.logout-link { color: var(--red) !important; }

/* ===== NAVBAR BADGES + NOTIFICATIONS PANEL ===== */
/* .nav-badge-btn only adds the anchor for the dot; the button itself keeps
   .nav-icon-btn, so it inherits the light-navbar treatment on the home page
   (body.on-home .nav-icon-btn in home.css) without a second override. */
.nav-badge-btn { position: relative; }
.nav-dot {
  position: absolute; top: 6px; right: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red);
  /* Ring in the navbar colour so the dot stays legible against both the
     dark navbar and the white home-page one. */
  box-shadow: 0 0 0 2px var(--navy);
}
body.on-home .nav-dot { box-shadow: 0 0 0 2px #fff; }

.notif-panel {
  position: absolute; top: 44px; right: 0;
  width: 340px; max-width: calc(100vw - 24px);
  background: white; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  border: 1px solid var(--border); overflow: hidden; z-index: 2000;
}
.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.notif-panel-head strong { font-size: 14px; }
.notif-panel-head button {
  background: none; border: none; padding: 0;
  color: var(--accent); font-size: 12.5px; font-weight: 600;
}
/* Capped and scrollable: the feed returns up to 30 rows, and an uncapped
   panel would run off the bottom of the viewport on a short screen. */
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  padding: 12px 14px; background: none; border: none; text-align: left;
  border-bottom: 1px solid var(--border); transition: background 0.15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg); }
.notif-item.is-unread { background: var(--accent-light); }
.notif-item.is-unread:hover { background: #E3EBFF; }
.notif-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; background: var(--accent-light); color: var(--accent);
}
.notif-icon-emi { background: var(--gold-light); color: var(--gold); }
.notif-icon-chat { background: #E4F5F1; color: var(--green); }
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-body strong { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text); }
.notif-body small { font-size: 12.5px; color: var(--text-muted); line-height: 1.4;
  /* Titles are short but the body carries a listing title, which can be
     200 characters. Two lines, then ellipsis - the row opens the page. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-body em { font-size: 11.5px; color: var(--text-light); font-style: normal; margin-top: 2px; }
.notif-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 32px 16px; color: var(--text-light); font-size: 13.5px;
}
.notif-empty i { font-size: 22px; opacity: 0.5; }

/* ===== HERO ===== */
.hero { background: linear-gradient(160deg, #0A1428 0%, var(--navy) 55%, #050910 100%); padding: 40px 20px 48px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 78% 15%, rgba(59,110,245,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 90%, rgba(201,155,74,0.10) 0%, transparent 60%);
}
.hero-content { position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.3);
  color: var(--gold); padding: 5px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 20px;
}
.hero-title { font-size: 36px; font-weight: 900; color: white; line-height: 1.1; margin-bottom: 12px; }
.gradient-text { background: linear-gradient(90deg,#7CA8FF,#B9A6FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { color: rgba(255,255,255,0.7); font-size: 14px; margin-bottom: 32px; line-height: 1.6; }

/* BUY / SELL buttons */
.hero-cta-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 32px; }
.hero-btn-buy, .hero-btn-sell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 20px 12px; border-radius: 16px; border: none;
  font-weight: 700; transition: 0.2s; box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.hero-btn-buy { background: var(--accent); color: white; }
.hero-btn-sell { background: var(--gold); color: var(--navy); }
.hero-btn-buy:hover { background: var(--accent-hover); transform: translateY(-2px); }
.hero-btn-sell:hover { background: #D9AD5F; transform: translateY(-2px); }
.hero-btn-buy i, .hero-btn-sell i { font-size: 28px; }
.hero-btn-buy span, .hero-btn-sell span { font-size: 20px; font-weight: 900; }
.hero-btn-buy small, .hero-btn-sell small { font-size: 12px; opacity: 0.8; font-weight: 400; }

.hero-stats { display: flex; align-items: center; gap: 20px; }
.stat { display: flex; flex-direction: column; }
.stat strong { font-size: 20px; font-weight: 800; color: white; }
.stat span { font-size: 11px; color: rgba(255,255,255,0.55); }
.stat-divider { width: 1px; height: 32px; background: rgba(255,255,255,0.15); }

/* ===== HOME CATEGORIES ===== */
.home-cats { background: white; padding: 20px 16px; border-bottom: 1px solid var(--border); }
.home-cats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.home-cat-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.hci { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: 0.2s; }
.home-cat-item:active .hci { transform: scale(0.92); }
.home-cat-item span { font-size: 11px; font-weight: 600; color: var(--text); }
.cars-icon { background: #FEE2E2; color: #EF4444; }
.phones-icon { background: #E0F2FE; color: #0EA5E9; }
.bikes-icon { background: #FEF3C7; color: #F59E0B; }
.elec-icon { background: #EDE9FE; color: #7C3AED; }
.furn-icon { background: #D1FAE5; color: #10B981; }
.prop-icon { background: #FEE2E2; color: #F43F5E; }
.appl-icon { background: #E0F2FE; color: #0284C7; }
.fash-icon { background: #FCE7F3; color: #DB2777; }

/* ===== EMI BANNER ===== */
.emi-banner-section { padding: 20px 16px; }
.emi-banner {
  background: linear-gradient(135deg, var(--navy) 0%, #10193A 55%, #182352 100%);
  border-radius: 20px; padding: 28px 24px;
  box-shadow: 0 20px 50px rgba(6,11,24,0.25);
}
.emi-banner-badge { display: inline-block; background: var(--gold); color: white; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 5px; letter-spacing: 1px; margin-bottom: 14px; }
.emi-banner h2 { font-size: 20px; font-weight: 800; color: white; margin-bottom: 10px; }
.emi-banner p { color: rgba(255,255,255,0.75); font-size: 13px; line-height: 1.6; margin-bottom: 18px; }
.emi-features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; }
.emi-feat { color: rgba(255,255,255,0.85); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.emi-feat i { color: var(--green); font-size: 12px; }
.btn-emi-cta { background: var(--gold); color: var(--navy); border: none; padding: 12px 24px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }

/* ===== FOOTER ===== */
.footer { background: linear-gradient(180deg, var(--navy) 0%, #050910 100%); color: white; padding: 32px 20px 20px; }
.footer-top { margin-bottom: 28px; }
.footer-top .footer-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.footer-tagline { color: rgba(255,255,255,0.6); font-size: 13px; line-height: 1.6; margin-bottom: 18px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; background: rgba(255,255,255,0.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); font-size: 15px; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 28px; }
.footer-col h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.45); margin-bottom: 12px; }
.footer-col a { display: block; color: rgba(255,255,255,0.65); font-size: 13px; margin-bottom: 8px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 16px; display: flex; justify-content: space-between; align-items: center; }
.footer-bottom p { color: rgba(255,255,255,0.4); font-size: 11px; }
.admin-link { color: rgba(255,255,255,0.2); font-size: 11px; }

/* ===== BUY PAGE ===== */
.buy-header {
  position: sticky; top: var(--nav-h); z-index: 100;
  background: white; padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
}
.back-btn { background: none; border: none; font-size: 18px; color: var(--text); padding: 4px 8px; flex-shrink: 0; }
/* No overflow:hidden here — it clipped the suggestions dropdown, which is
   absolutely positioned below this box. */
.buy-search-wrap {
  position: relative; z-index: 20;
  flex: 1; display: flex; align-items: center;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);  padding-left: 10px;
}
.buy-search-wrap i { color: var(--text-muted); font-size: 14px; }
.buy-search-wrap input { flex: 1; border: none; background: transparent; padding: 9px 8px; font-size: 14px; outline: none; }
.buy-search-go { background: var(--accent); color: white; border: none; padding: 9px 14px; font-size: 13px; font-weight: 600; }
.cat-scroll { display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; background: white; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-pill { flex-shrink: 0; background: var(--bg); border: 1.5px solid var(--border); color: var(--text-muted); padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 5px; transition: 0.2s; }
.cat-pill.active { background: var(--accent); border-color: var(--accent); color: white; }
.filter-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: white; border-bottom: 1px solid var(--border); }
.filter-toggle-btn { background: var(--bg); border: 1.5px solid var(--border); padding: 6px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sort-select { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 12px; background: var(--bg); margin-left: auto; flex-shrink: 0; }
.filter-chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; }
.filter-panel { background: white; border-bottom: 1px solid var(--border); padding: 16px 12px; }
.filter-panel-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.filter-group label { font-size: 12px; font-weight: 600; color: var(--text); }
.filter-group input[type="number"], .filter-group input[type="text"] { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; width: 100%; }
.price-inputs { display: flex; align-items: center; gap: 6px; }
.price-inputs input { width: calc(50% - 10px); }
.price-inputs span { color: var(--text-muted); font-size: 12px; }
.toggle-label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.toggle-label input { accent-color: var(--accent); }
/* Sits beside the Filters button rather than filling the panel. Only shown
   when something is actually filtered (see updateClearFiltersBtn). */
.filter-clear-btn {
  background: none; border: 1.5px solid var(--red); color: var(--red);
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; font-family: inherit;
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.filter-clear-btn:hover { background: var(--red); color: #fff; }
.filter-clear-btn.hidden { display: none; }

.btn-clear-filters { grid-column: 1/-1; background: none; border: 1.5px solid var(--red); color: var(--red); padding: 8px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; }
.buy-results-count { padding: 10px 12px; font-size: 12px; color: var(--text-muted); font-weight: 500; }

/* ===== LISTINGS GRID ===== */
.listings-grid { padding: 0 12px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.listing-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; transition: 0.2s; border: 1.5px solid transparent; }
.listing-card:active { transform: scale(0.98); border-color: var(--accent); }
.listing-img { position: relative; height: 140px; overflow: hidden; background: var(--bg); }
.listing-img img { width: 100%; height: 100%; object-fit: cover; }
.listing-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; background: var(--bg); }
.listing-save-btn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-muted); box-shadow: var(--shadow); border: none; }
.listing-condition { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.cond-like_new { background: #D1FAE5; color: #065F46; }
.cond-good { background: #DBEAFE; color: #1E40AF; }
.cond-fair { background: var(--gold-light); color: #92400E; }
.cond-for_parts { background: #FEE2E2; color: #991B1B; }
.listing-body { padding: 10px; }
.listing-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.listing-price { font-size: 16px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.listing-price span { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.listing-location { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 3px; margin-bottom: 6px; }
.listing-emi-tag { font-size: 10px; font-weight: 600; background: var(--gold-light); color: #92400E; padding: 2px 7px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; }

/* ===== PRODUCT MODAL ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 3000; display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(3px); }

/* Every overlay used to sit at z-index 3000, so which one appeared on top
   came down to DOM order alone — and #productModal is written after
   #authModal. A logged-out visitor pressing "Chat with Seller" therefore
   opened the auth modal BEHIND the listing and saw nothing happen. These
   layers make the stacking explicit; auth is highest because it can be
   triggered from any other modal. */
#chatModal, #emiModal { z-index: 3100; }
#imageLightbox        { z-index: 3300; }
#authModal            { z-index: 3400; }

/* ===== IMAGE LIGHTBOX ===== */
.pdp-zoomable { cursor: zoom-in; }
/* position:relative would break fixed positioning; .modal-overlay is already
   position:fixed, which is the containing block the absolute controls use. */
.lightbox { align-items: center; justify-content: center; background: rgba(0,0,0,0.92); backdrop-filter: blur(6px); padding: 24px; }
/* contain, not cover: the whole photo has to fit, which is the entire point
   of opening it here rather than reading the cropped gallery version. */
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 6px; user-select: none; }
/* Controls float OVER the photo, never beside it. A translucent white icon
   on a translucent light background disappears against a bright photo, so
   these use a dark translucent fill with a white icon and a soft ring —
   readable over a night shot and over a white wall alike. !important keeps
   the overlay intact if a utility class ever sets position on a button. */
.lightbox-close,
.lightbox-nav {
  position: absolute !important;
  display: flex; align-items: center; justify-content: center;
  color: #fff; border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
  cursor: pointer; z-index: 10; padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(0,0,0,0.75); transform: scale(1.06); }
.lightbox-close { top: 18px; right: 18px; width: 42px; height: 42px; font-size: 18px; border-radius: 50%; }
.lightbox-nav { top: 50%; margin-top: -23px; width: 46px; height: 46px; font-size: 18px; border-radius: 50%; }
.lightbox-nav:hover { transform: scale(1.06); }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-count { position: absolute !important; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: #fff; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 5px 12px; border-radius: 999px; font-size: 13px; z-index: 10; }
@media (max-width: 600px) {
  .lightbox { padding: 8px; }
  .lightbox-nav { width: 38px; height: 38px; font-size: 15px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
}
.modal-box { background: white; width: 100%; max-width: var(--max-w); max-height: 92vh; overflow-y: auto; border-radius: 20px 20px 0 0; position: relative; padding: 20px; }
.product-modal-box { padding: 0; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; background: rgba(0,0,0,0.08); border: none; border-radius: 50%; font-size: 13px; color: var(--text); display: flex; align-items: center; justify-content: center; z-index: 10; }

/* Product detail layout */
.pm-images { position: relative; height: 260px; background: var(--bg); overflow: hidden; }
.pm-images img { width: 100%; height: 100%; object-fit: cover; }
.pm-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 72px; }
.pm-img-count { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.5); color: white; font-size: 12px; padding: 3px 10px; border-radius: 12px; }
.pm-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; background: rgba(0,0,0,0.4); color: white; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; z-index: 5; }
.pm-gallery-prev { left: 10px; }
.pm-gallery-next { right: 10px; }
.pm-gallery-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.pm-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: 0.2s; cursor: pointer; }
.pm-dot.active { background: white; width: 18px; border-radius: 3px; }
.pm-body { padding: 16px; }
.staff-mod-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  background: var(--navy); color: var(--gold); padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 700; margin-bottom: 14px;
}
.staff-mod-bar > span { display: flex; align-items: center; gap: 6px; }
.staff-mod-bar > div { display: flex; gap: 6px; }

/* Admin single-listing detail view (seller / EMI / sale blocks) */
.admin-detail-section {
  margin-top: 16px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.admin-detail-section h4 {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin: 0 0 8px;
}
.admin-detail-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--border);
}
.admin-detail-row:last-child { border-bottom: none; }
.admin-detail-row > span { color: var(--text-muted); flex-shrink: 0; }
.admin-detail-row > strong { text-align: right; font-weight: 600; word-break: break-word; }
.pm-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pm-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.pm-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; line-height: 1.3; }
.pm-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.pm-price { font-size: 26px; font-weight: 900; color: var(--navy); }
.pm-negotiable { font-size: 12px; color: var(--green); font-weight: 600; background: #D1FAE5; padding: 2px 8px; border-radius: 10px; }
.pm-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.pm-meta-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }
.pm-meta-item i { color: var(--accent); font-size: 12px; }
.pm-desc { font-size: 14px; color: var(--text-muted); line-height: 1.8; margin-bottom: 20px; white-space: pre-line; }
.pm-seller { display: flex; align-items: center; gap: 12px; background: var(--bg); border-radius: var(--radius); padding: 14px; margin-bottom: 20px; }
.pm-seller-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-light); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--accent); font-weight: 700; flex-shrink: 0; overflow: hidden; }
.pm-seller-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pm-seller-name { font-size: 14px; font-weight: 700; }
.pm-seller-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pm-seller-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--green); font-weight: 600; }
.pm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.pm-actions-full { grid-template-columns: 1fr; }
.btn-chat { background: var(--accent); color: white; border: none; padding: 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-call { background: var(--green); color: white; border: none; padding: 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-emi-product { grid-column: 1/-1; background: var(--gold-light); color: #92400E; border: 1px solid #FCD34D; padding: 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pm-safety { background: #FFF3CD; border: 1px solid #FFC107; border-radius: var(--radius-sm); padding: 12px; font-size: 12px; color: #856404; display: flex; gap: 8px; line-height: 1.5; }

/* ===== CHAT MODAL ===== */
.chat-modal-box { padding: 0; display: flex; flex-direction: column; height: 85vh; border-radius: 20px 20px 0 0; }
.chat-modal-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
/* The text column takes the free space so margin-left:auto on the button can
   push it to the far right of the name's own row. */
.chat-seller-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.chat-seller-text { flex: 1; min-width: 0; }
.chat-seller-row { display: flex; align-items: center; gap: 10px; }
/* ===== PERSON INFO PANEL (from chat) ===== */
.party-info-box { max-width: 380px; width: 100%; padding: 22px; border-radius: 16px; position: relative; }
.party-info-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.party-info-head img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.party-info-head strong { display: block; font-size: 17px; letter-spacing: -0.01em; }
.party-info-head span { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

.party-info-rows { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.party-info-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg); border-radius: 9px; font-size: 13.5px; }
.party-info-row i { width: 16px; color: var(--text-muted); font-size: 12.5px; }
.party-info-label { color: var(--text-muted); flex-shrink: 0; }
/* min-width:0 lets a long listing title ellipsis instead of stretching the box */
.party-info-value { margin-left: auto; font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-info-loading { padding: 18px; text-align: center; color: var(--text-muted); font-size: 13px; }

.party-info-note { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5;
  color: #92400E; background: var(--gold-light, #FEF3C7); padding: 11px 13px; border-radius: 9px; margin: 0 0 18px; }
.party-info-note i { margin-top: 2px; }

.party-info-actions { display: flex; gap: 10px; }
.party-info-actions button { flex: 1; }
.party-info-actions .btn-danger {
  background: var(--red); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 11px 16px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.party-info-actions .btn-danger:hover { filter: brightness(0.93); }
.party-info-actions .btn-danger.hidden { display: none; }

/* ===== CAMERA CAPTURE ===== */
.camera-box { max-width: 400px; width: 100%; padding: 20px; border-radius: 16px; }
.camera-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.camera-head strong { font-size: 16px; }
.camera-stage { position: relative; width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #0F172A; }
/* Mirrored preview: people expect to see themselves as in a mirror. The
   capture code flips it back so the saved file matches what was on screen. */
.camera-stage video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.camera-ring {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 2000px rgba(15,23,42,0.35);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%);
  mask: radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%);
}
.camera-hint { font-size: 12.5px; color: var(--text-muted); text-align: center; margin: 14px 0 16px; }
.camera-actions { display: flex; gap: 10px; }
.camera-actions button { flex: 1; }
.camera-actions button.hidden { display: none; }

#partyInfoModal, #cameraModal { z-index: 3400; align-items: center; }

/* ===== LEGAL DOC OVERLAY =====
   Stacks above #authModal (3400) so the signup form stays visible behind it.
   Deliberately not full-screen: it is meant to read as a document being held
   up over the form, not as having left the form. */
#legalPeekModal { z-index: 3500; align-items: center; }
.legal-peek-box {
  max-width: 560px; width: 100%; max-height: 78vh;
  padding: 0; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden;
}
.legal-peek-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.legal-peek-head strong { display: block; font-size: 16.5px; letter-spacing: -0.01em; }
.legal-peek-head span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.legal-peek-head .modal-close { position: static; flex-shrink: 0; }

/* The only scrolling region — the header and footer stay put, so Close is
   always reachable without scrolling to the end of the document. */
.legal-peek-body {
  flex: 1; overflow-y: auto; padding: 18px 20px;
  font-size: 14px; line-height: 1.65; color: var(--text);
}
.legal-peek-body h2, .legal-peek-body h3 { font-size: 15px; margin: 18px 0 8px; }
.legal-peek-body h2:first-child, .legal-peek-body h3:first-child { margin-top: 0; }
.legal-peek-body p, .legal-peek-body li { margin: 0 0 10px; }
.legal-peek-body ul, .legal-peek-body ol { padding-left: 20px; margin: 0 0 12px; }

.legal-peek-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.legal-peek-foot a { font-size: 13px; color: var(--accent); font-weight: 600; text-decoration: none; }
.legal-peek-foot a:hover { text-decoration: underline; }
.legal-peek-foot .btn-primary { padding: 9px 22px; font-size: 14px; }

@media (max-width: 560px) {
  .legal-peek-box { max-height: 86vh; }
  .legal-peek-foot { flex-direction: column-reverse; align-items: stretch; }
  .legal-peek-foot .btn-primary { width: 100%; }
  .legal-peek-foot a { text-align: center; }
}

/* ===== YEAR COMBO =====
   A plain positioned div rather than a native <datalist>. Browsers draw a
   datalist popup wherever they choose — sideways, or upward near the bottom
   of the viewport — and its position cannot be styled. This is ordinary DOM,
   so it always opens directly below the input. */
.combo-group { position: relative; }
.combo-menu {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  margin-top: 4px; max-height: 240px; overflow-y: auto;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(15,23,42,0.16);
  padding: 4px;
}
.combo-menu.hidden { display: none; }
.combo-opt {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: none; background: none; border-radius: 7px;
  font-size: 14px; font-family: inherit; color: var(--text); cursor: pointer;
}
.combo-opt:hover { background: var(--accent-light, #EFF6FF); color: var(--accent); }
.combo-opt.is-active { background: var(--accent); color: #fff; font-weight: 600; }
.combo-opt.hidden { display: none; }

/* ===== SIGNUP TERMS ===== */
.signup-terms {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-muted);
  cursor: pointer;
}
.signup-terms input { margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.signup-terms label { cursor: pointer; }
.signup-terms a { color: var(--accent); font-weight: 600; text-decoration: none; }
.signup-terms a:hover { text-decoration: underline; }

/* ===== PROFILE PICTURE MENU + CROPPER ===== */
.profile-avatar-wrap { position: relative; }
.avatar-edit-btn { cursor: pointer; border: none; }

.avatar-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 30; min-width: 210px; padding: 6px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(15,23,42,0.18);
  display: flex; flex-direction: column; gap: 2px;
}
.avatar-menu.hidden { display: none; }
.avatar-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; background: none; border: none; border-radius: 8px;
  font-size: 13.5px; font-family: inherit; color: var(--text);
  text-align: left; cursor: pointer;
}
.avatar-menu button:hover { background: var(--bg); }
.avatar-menu button i { width: 16px; color: var(--text-muted); }
.avatar-menu-danger { color: var(--red) !important; }
.avatar-menu-danger i { color: var(--red) !important; }
.avatar-menu-danger:hover { background: #FEF2F2 !important; }
.avatar-menu-danger.hidden { display: none; }

.avatar-crop-box { max-width: 380px; width: 100%; padding: 20px; border-radius: 16px; }
.avatar-crop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.avatar-crop-head strong { font-size: 16px; }

/* The canvas is square; the ring is an overlay showing the circle the image
   will actually be cropped to, so what you see is what gets saved. */
.avatar-crop-stage { position: relative; width: 320px; max-width: 100%; margin: 0 auto; touch-action: none; cursor: grab; }
.avatar-crop-stage:active { cursor: grabbing; }
.avatar-crop-stage canvas { display: block; width: 100%; height: auto; border-radius: 12px; }
.avatar-crop-ring {
  position: absolute; inset: 0; pointer-events: none; border-radius: 12px;
  box-shadow: inset 0 0 0 2000px rgba(15,23,42,0.45);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%);
  mask: radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%);
}

.avatar-crop-zoom { display: flex; align-items: center; gap: 12px; margin: 18px 0 6px; color: var(--text-muted); }
.avatar-crop-zoom input { flex: 1; accent-color: var(--accent); }
.avatar-crop-hint { font-size: 12.5px; color: var(--text-muted); text-align: center; margin: 0 0 18px; }
.avatar-crop-actions { display: flex; gap: 10px; }
.avatar-crop-actions button { flex: 1; }

#avatarCropModal { z-index: 3400; align-items: center; }

/* Info button sits before the listing link; margin-left:auto on the listing
   button still pushes that one to the far right. */
.chat-info-btn {
  margin-left: auto; flex-shrink: 0; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 15px;
  transition: color .15s ease;
}
.chat-info-btn:hover { color: var(--accent); }
/* When both are present the listing button no longer needs the auto margin,
   or the two would be pushed apart to opposite ends. */
.chat-info-btn + .chat-view-listing { margin-left: 6px; }

/* Minimised state: the panel is hidden, not destroyed, so polling continues
   and restoring is instant. */
.chat-modal.is-minimised, #chatModal.is-minimised { display: none !important; }

.chat-mini-bubble {
  position: fixed; z-index: 1050; left: 22px; bottom: 22px;
  display: flex; align-items: center; gap: 9px;
  max-width: 240px; padding: 11px 16px;
  background: var(--accent); color: #fff; border: none; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  box-shadow: 0 8px 24px rgba(37,99,235,0.4);
  transition: transform .16s ease, box-shadow .16s ease;
}
.chat-mini-bubble:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37,99,235,0.5); }
.chat-mini-bubble.hidden { display: none; }
.chat-mini-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-mini-caret { font-size: 11px; opacity: 0.8; }
/* Left side on purpose: the support chatbot's own button owns bottom-right. */
@media (max-width: 520px) { .chat-mini-bubble { left: 16px; bottom: 16px; max-width: 190px; } }

.chat-view-listing { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; line-height: 1.4;
  background: var(--accent-light, #EFF6FF); color: var(--accent, #2563EB);
  border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; }
.chat-view-listing:hover { background: var(--accent, #2563EB); color: #fff; border-color: transparent; }
@media (max-width: 480px) { .chat-view-listing { font-size: 11px; padding: 4px 9px; } }
.modal-close-inline { background: none; border: none; font-size: 18px; color: var(--text); padding: 4px; }
.chat-seller-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-light); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--accent); font-weight: 700; flex-shrink: 0; overflow: hidden; }
.chat-seller-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-seller-name { font-size: 14px; font-weight: 700; }
.chat-product-title { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-notice { background: #FFF3CD; border: 1px solid #FFC107; border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px; color: #856404; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.chat-msg { max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.chat-msg.sent { background: var(--accent); color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-msg.received { background: white; color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: var(--shadow); }
.chat-msg-time { font-size: 10px; opacity: 0.6; margin-top: 4px; }
.chat-input-area { border-top: 1px solid var(--border); padding: 10px 12px; flex-shrink: 0; }
.chat-quick-msgs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; scrollbar-width: none; }
.chat-quick-msgs::-webkit-scrollbar { display: none; }
.chat-quick-msgs button { flex-shrink: 0; background: var(--bg); border: 1.5px solid var(--border); padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.chat-input-row { display: flex; gap: 8px; }
.chat-input-row input { flex: 1; border: 1.5px solid var(--border); border-radius: 24px; padding: 10px 16px; font-size: 14px; outline: none; }
.chat-input-row input:focus { border-color: var(--accent); }
.chat-send-btn { width: 42px; height: 42px; background: var(--accent); color: white; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }

/* ===== SELL PAGE ===== */
.page-header { position: sticky; top: var(--nav-h); background: white; z-index: 100; padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.page-header h2 { font-size: 17px; font-weight: 700; flex: 1; }
.header-action-btn { background: var(--accent-light); color: var(--accent); border: none; width: 32px; height: 32px; border-radius: 8px; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.header-count { font-size: 13px; color: var(--text-muted); }
.sell-form-wrap { padding: 16px; }
.sell-section { background: white; border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.sell-section h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.sell-step { width: 24px; height: 24px; background: var(--accent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.sell-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; margin-top: -8px; }
.photo-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.photo-preview { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; position: relative; flex-shrink: 0; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview .photo-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; background: rgba(0,0,0,0.5); color: white; border: none; border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.photo-add-btn { width: 80px; height: 80px; border-radius: 8px; background: var(--bg); border: 2px dashed var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-muted); font-size: 12px; cursor: pointer; flex-shrink: 0; }
.photo-add-btn i { font-size: 22px; }
.sell-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sell-cat-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 6px; border-radius: 10px; border: 2px solid var(--border); cursor: pointer; font-size: 11px; font-weight: 600; text-align: center; transition: 0.2s; }
.sell-cat-item i { font-size: 20px; color: var(--text-muted); }
.sell-cat-item.selected { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.sell-cat-item.selected i { color: var(--accent); }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 11px 12px; font-size: 14px; color: var(--text); transition: 0.2s; background: white; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 42px !important; }
.pw-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  background: none; border: none; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 15px; cursor: pointer; border-radius: 6px; transition: 0.15s;
}
.pw-toggle:hover { color: var(--accent); background: var(--bg); }
.form-group textarea { resize: vertical; min-height: 100px; }
.req { color: var(--red); }
.price-input-wrap { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.price-prefix { padding: 0 12px; font-size: 16px; font-weight: 700; color: var(--text-muted); background: var(--bg); border-right: 1.5px solid var(--border); height: 44px; display: flex; align-items: center; }
.price-input-wrap input { border: none; border-radius: 0; flex: 1; }
.price-input-wrap input:focus { box-shadow: none; }
.pincode-result { display: block; margin-top: 4px; font-size: 12px; color: var(--green); font-weight: 500; }
.sell-submit-btn { margin-top: 8px; padding: 16px; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.sell-note { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 12px; }
.sell-note a { color: var(--accent); }

/* ===== AUTH MODAL ===== */
.modal-box { border-radius: 20px 20px 0 0; }
.modal-tabs { display: flex; margin-bottom: 24px; border-bottom: 2px solid var(--border); }
.tab-btn { flex: 1; background: none; border: none; padding: 12px; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: 0.2s; }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.auth-form h2 { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.auth-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.forgot-link { display: block; text-align: right; font-size: 13px; color: var(--accent); margin-bottom: 16px; }
.auth-error { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; font-size: 13px; padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: 14px; }
.btn-primary { background: var(--accent); color: white; border: none; padding: 13px 20px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; transition: 0.2s; }
.btn-primary:active { background: var(--accent-hover); transform: scale(0.98); }
.full-width { width: 100%; }

/* ===== EMI MODAL ===== */
.emi-modal-box { border-radius: 20px 20px 0 0; }
.emi-header { text-align: center; margin-bottom: 20px; }
.emi-icon { width: 56px; height: 56px; background: var(--gold-light); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--gold); margin: 0 auto 12px; }
.emi-header h2 { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.emi-header p { color: var(--text-muted); font-size: 13px; }
.emi-product-label { background: var(--accent-light); color: var(--accent); font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 16px; text-align: center; }
.emi-calculator { background: var(--bg); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.emi-price-display { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.emi-label { font-size: 13px; color: var(--text-muted); }
.emi-amount { font-size: 22px; font-weight: 800; color: var(--navy); }
.emi-result { background: white; border-radius: var(--radius-sm); padding: 12px; margin-top: 14px; border: 1px solid var(--border); }
.emi-result-item { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.emi-result-item:last-child { border-bottom: none; }
.emi-result-item strong.highlight { color: var(--accent); font-size: 17px; }
.emi-note { display: flex; gap: 8px; background: #FFF3CD; border: 1px solid #FFC107; border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 16px; font-size: 12px; color: #856404; }

/* ===== PAGE CONTENT ===== */
.page-content { padding: 12px; }
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state i { font-size: 48px; color: var(--border); margin-bottom: 16px; display: block; }
.empty-state h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.empty-state p { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; }
.no-results { text-align: center; padding: 60px 20px; }
.no-results i { font-size: 48px; color: var(--border); margin-bottom: 16px; display: block; }
.no-results h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.no-results p { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; }
.buy-loading { text-align: center; padding: 40px; color: var(--text-muted); font-size: 14px; }

/* ===== MY LISTINGS ===== */
.my-listing-card { background: white; border-radius: var(--radius); padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow); display: flex; gap: 12px; }
.my-listing-img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; background: var(--bg); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.my-listing-img img { width: 100%; height: 100%; object-fit: cover; }
.my-listing-info { flex: 1; min-width: 0; }
.my-listing-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-listing-price { font-size: 16px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.my-listing-meta { font-size: 12px; color: var(--text-muted); }
.my-listing-actions { display: flex; gap: 6px; margin-top: 8px; }
.btn-sm { padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; }
.btn-sm-red { background: #FEE2E2; color: var(--red); }
.btn-sm-blue { background: var(--accent-light); color: var(--accent); }
.listing-status-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; margin-bottom: 4px; }
.status-active { background: #D1FAE5; color: #065F46; }
.status-sold { background: #FEE2E2; color: #991B1B; }
.status-pending { background: var(--gold-light); color: #92400E; }

/* ===== CHATS LIST ===== */
.chat-list-item { background: white; border-radius: var(--radius); padding: 14px; margin-bottom: 8px; box-shadow: var(--shadow); display: flex; gap: 12px; cursor: pointer; }
.chat-list-item:active { background: var(--bg); }
.chat-list-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-light); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--accent); font-weight: 700; flex-shrink: 0; overflow: hidden; }
.chat-list-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-list-info { flex: 1; min-width: 0; }
.chat-list-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.chat-list-product { font-size: 12px; color: var(--accent); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-last { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-time { font-size: 11px; color: var(--text-light); flex-shrink: 0; }
.chat-unread { background: var(--accent); color: white; font-size: 11px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ===== PROFILE ===== */
.profile-wrap { padding: 16px; }
.profile-avatar-section { text-align: center; padding: 20px 0; }
.profile-avatar-wrap { position: relative; width: 90px; height: 90px; margin: 0 auto 12px; }
.profile-avatar-wrap img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); }
.avatar-edit-btn { position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; background: var(--accent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; }
.profile-name { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.profile-email-sm { font-size: 13px; color: var(--text-muted); }
.profile-nav { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.profile-nav::-webkit-scrollbar { display: none; }
.profile-nav-btn { flex-shrink: 0; background: var(--bg); border: 1.5px solid var(--border); padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.profile-nav-btn.active { background: var(--accent); border-color: var(--accent); color: white; }
.profile-card { background: white; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.profile-msg { font-size: 13px; padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: 12px; }
.success-msg { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.error-msg { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.stat-card { background: var(--bg); border-radius: var(--radius); padding: 14px; display: flex; align-items: center; gap: 12px; }
.stat-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.stat-card strong { display: block; font-size: 22px; font-weight: 800; }
.stat-card span { font-size: 12px; color: var(--text-muted); }
.member-since { text-align: center; font-size: 13px; color: var(--text-muted); padding-top: 12px; border-top: 1px solid var(--border); }

/* ===== EMI STATUS ===== */
.emi-app-card { background: white; border-radius: var(--radius); padding: 14px; margin-bottom: 10px; display: flex; gap: 12px; box-shadow: var(--shadow); }
.emi-app-img { width: 70px; height: 70px; border-radius: 8px; overflow: hidden; background: var(--bg); flex-shrink: 0; }
.emi-app-img img { width: 100%; height: 100%; object-fit: cover; }
.emi-app-info { flex: 1; min-width: 0; }
.emi-app-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.emi-app-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--text-muted); }
.emi-app-status { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.emi-app-amount { font-size: 13px; font-weight: 700; color: var(--navy); }
.status-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.status-pending { background: var(--gold-light); color: #92400E; }
.status-approved { background: #D1FAE5; color: #065F46; }
.status-review { background: #DBEAFE; color: #1E40AF; }
.status-rejected { background: #FEE2E2; color: #991B1B; }
.status-dropdown { font-size: 12px; padding: 5px 8px; border-radius: 6px; border: 1.5px solid var(--border); background: white; }

/* ===== ADMIN ===== */
.admin-login-wrap { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 20px; }
.admin-login-card { background: white; border-radius: var(--radius-lg); padding: 32px 24px; width: 100%; box-shadow: var(--shadow-lg); text-align: center; }
.admin-login-card h2 { font-size: 20px; font-weight: 800; margin-bottom: 4px; margin-top: 12px; }
#financerFormBox { text-align: left; padding: 20px; }
#financerFormBox .btn-clear-filters { margin-top: 8px; width: auto; padding: 10px 20px; }
/* ============================================================
   ADMIN SHELL — fixed sidebar + topbar + scrolling content.
   The sidebar is the primary navigation (it replaced a horizontal
   tab strip, which ran out of room once there were 8 sections).
   ============================================================ */
:root {
  --admin-sidebar-w: 232px;
  --admin-sidebar-bg: #1B2431;
  --admin-sidebar-bg-2: #161E29;
  --admin-topbar-h: 56px;
}

/* The generic page-header ("< Admin Panel") is redundant once the shell is
   showing — the sidebar carries the brand and the topbar carries the back
   button — so it's hidden while the dashboard is up, but kept for the
   login screen that appears before it. */
#adminPage:has(#adminDashboard:not(.hidden)) > .page-header { display: none; }

.admin-shell { display: flex; min-height: calc(100vh - var(--nav-h)); background: #F2F4F7; }

/* ---- Sidebar ---- */
.admin-sidebar {
  position: fixed; top: var(--nav-h); bottom: 0; left: 0; width: var(--admin-sidebar-w);
  background: var(--admin-sidebar-bg); color: #C2CBD8; z-index: 60;
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(-100%); transition: transform .22s ease;
}
body.admin-sidebar-open .admin-sidebar { transform: translateX(0); }

.admin-sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; font-size: 16px; font-weight: 800; color: #fff;
  background: var(--admin-sidebar-bg-2); flex-shrink: 0;
}
.admin-sidebar-brand i { color: var(--gold); }

.admin-sidebar-user {
  display: flex; align-items: center; gap: 11px; padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
}
.admin-sidebar-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-size: 15px; font-weight: 700;
}
.admin-sidebar-name { font-size: 13.5px; font-weight: 700; color: #fff; }
.admin-sidebar-role { font-size: 11.5px; color: #8794A6; }

.admin-nav { padding: 10px 0 24px; }
.admin-nav-heading {
  padding: 14px 18px 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: #6C7A8D;
}
.admin-nav-item {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 10px 18px; background: none; border: none; cursor: pointer;
  color: #C2CBD8; font-size: 13.5px; font-weight: 500; font-family: inherit;
  text-align: left; border-left: 3px solid transparent;
  transition: background .14s ease, color .14s ease;
}
.admin-nav-item i { width: 18px; text-align: center; font-size: 13px; flex-shrink: 0; }
.admin-nav-item span { flex: 1; }
.admin-nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.admin-nav-item.active {
  background: rgba(255,255,255,0.08); color: #fff;
  border-left-color: var(--accent); font-weight: 600;
}

.admin-sidebar-scrim {
  position: fixed; inset: var(--nav-h) 0 0 0; background: rgba(15,23,42,0.45);
  z-index: 55; opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
body.admin-sidebar-open .admin-sidebar-scrim { opacity: 1; pointer-events: auto; }

/* ---- Main column ---- */
.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.admin-topbar {
  display: flex; align-items: center; gap: 14px; height: var(--admin-topbar-h);
  padding: 0 16px; background: var(--white); border-bottom: 1px solid var(--border);
  position: sticky; top: var(--nav-h); z-index: 40;
}
.admin-topbar-toggle {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 17px; padding: 6px 8px; border-radius: 7px;
}
.admin-topbar-toggle:hover { background: var(--bg); color: var(--text); }
.admin-topbar-link { color: var(--text-muted); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.admin-topbar-link:hover { color: var(--accent); }
.admin-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.admin-topbar-icon {
  position: relative; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 15px; padding: 7px 9px; border-radius: 7px;
}
.admin-topbar-icon:hover { background: var(--bg); color: var(--text); }
.admin-topbar-dot {
  position: absolute; top: 4px; right: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--red); border: 1.5px solid var(--white);
}

.admin-content { flex: 1; padding: 18px 16px 40px; }

.admin-page-head { margin-bottom: 18px; }
.admin-page-head h1 { font-size: 22px; font-weight: 800; color: var(--text); margin: 0 0 4px; }
.admin-breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); }
.admin-breadcrumb a { color: var(--accent); text-decoration: none; }
.admin-breadcrumb a:hover { text-decoration: underline; }

.admin-logout-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red); border: 1px solid var(--red); color: #fff;
  padding: 8px 15px; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.admin-logout-btn:hover { background: #C0392B; border-color: #C0392B; }

/* ---- Coloured stat cards ----
   Scoped under .admin-stats-grid on purpose: the plain .stat-card style is
   also used by the profile page's stats, which should keep its lighter look. */
.admin-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.admin-stats-grid .stat-card {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  display: block; padding: 16px 16px 0; border: none; border-radius: var(--radius);
  color: #fff; font-family: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.admin-stats-grid .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.admin-stats-grid .stat-card strong { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; color: #fff; }
.admin-stats-grid .stat-card > span { display: block; font-size: 13px; color: rgba(255,255,255,0.92); margin-top: 2px; }
.stat-card-bg {
  position: absolute; right: 10px; top: 12px; font-size: 52px;
  color: rgba(255,255,255,0.22); pointer-events: none;
}
.stat-card-more {
  display: flex !important; align-items: center; justify-content: center; gap: 7px;
  margin: 14px -16px 0; padding: 7px; background: rgba(0,0,0,0.13);
  font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.95) !important;
}
.sc-blue   { background: #2563EB; }
.sc-green  { background: #10B981; }
.sc-amber  { background: #F0AD1E; }
.sc-red    { background: #E4453A; }
.sc-purple { background: #7C5CD6; }

/* Cards, tables and filters inside a section sit on the grey page
   background, so they get a white surface of their own. */
.admin-section { padding-top: 0; }

/* ===== In-section pill filters (status, EMI review stage, etc.) ===== */
.admin-filters { display: flex; gap: 6px; padding: 0 16px 12px; overflow-x: auto; scrollbar-width: none; }
.admin-filters::-webkit-scrollbar { display: none; }
.admin-filter-btn { flex-shrink: 0; background: var(--bg); border: 1.5px solid var(--border); color: var(--text-muted); padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.admin-filter-btn.active { background: var(--accent); border-color: var(--accent); color: white; }

/* ===== Search bar (Users, Purchases, Financers, EMI, Reports) =====
   Shares visual language with .admin-product-filters but stays a single
   row: these tables filter client-side over already-fetched data, so
   there's no category/sort/clear cluster to fit — just a search box and
   a live count of matches. */
.admin-search-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 16px 14px; padding: 0 14px; height: 42px;
  background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
}
.admin-search-bar i.fa-search { color: var(--text-light); font-size: 13px; }
.admin-search-bar input {
  flex: 1; border: none; outline: none; background: none;
  font-size: 13.5px; font-family: inherit; color: var(--text); min-width: 0;
}
.admin-search-bar input::placeholder { color: var(--text-light); }
.admin-search-bar:focus-within { border-color: var(--accent); }
.admin-search-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

.admin-table-wrap { overflow-x: auto; margin: 0 16px; border-radius: var(--radius); box-shadow: var(--shadow); }
/* Tables without a pager (none currently, but defensive) still get bottom spacing. */
.admin-table-wrap:last-child { margin-bottom: 80px; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.admin-table th { background: var(--bg); padding: 10px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); text-align: left; }
.admin-table td { padding: 12px; border-top: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.admin-product-cell { display: flex; align-items: center; gap: 8px; }
.admin-product-cell img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }

/* ===== TOAST ===== */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--navy); color: white; padding: 12px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg); z-index: 9999; transition: 0.3s; white-space: nowrap; max-width: calc(var(--max-w) - 32px); text-align: center; }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.success { border-left: 4px solid var(--green); }
.toast.error { border-left: 4px solid var(--red); }
.toast.info { border-left: 4px solid var(--accent); }

/* ===== TABLET (481px - 767px): slightly wider mobile layout ===== */
@media (min-width: 481px) and (max-width: 767px) {
  :root { --max-w: 600px; }
  body { box-shadow: 0 0 60px rgba(0,0,0,0.1); }
  .modal-overlay { align-items: center; }
  .modal-box, .chat-modal-box, .product-modal-box, .emi-modal-box { border-radius: var(--radius-lg); }
  .chat-modal-box { height: 80vh; }
}

/* ===== DESKTOP (768px+): full wide layout, like original PC design =====
   Strategy: body becomes full-bleed (no max-width), so backgrounds (navy hero,
   white nav, navy footer) stretch edge-to-edge across the whole screen.
   Only the CONTENT inside each section is capped at 1280px and centered,
   via a shared .desktop-inner wrapper pattern applied per-section below. */
@media (min-width: 768px) {
  :root { --nav-h: 64px; }
  body { max-width: 100%; box-shadow: none; }
  .page { padding-top: var(--nav-h); }

  /* Navbar: full-bleed bar, centered inner content */
  .navbar { position: fixed; left: 0; transform: none; width: 100%; max-width: 100%; }
  .nav-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
  .brand-text { font-size: 22px; }
  .nav-icon-btn { width: 40px; height: 40px; font-size: 17px; }

  /* Hero: full-bleed navy background, centered content column */
  .hero { width: 100%; max-width: 100%; margin: 0; padding: 56px 40px 64px; }
  .hero-content { max-width: 1280px; margin: 0 auto; }
  .hero-title { font-size: 48px; }
  .hero-sub { font-size: 16px; max-width: 480px; }
  .hero-cta-btns { max-width: 460px; gap: 18px; }
  .hero-btn-buy, .hero-btn-sell { padding: 26px 16px; }
  .hero-btn-buy i, .hero-btn-sell i { font-size: 32px; }
  .hero-btn-buy span, .hero-btn-sell span { font-size: 22px; }

  /* Category strip: full-bleed white background, centered grid */
  .home-cats { width: 100%; padding: 28px 40px; }
  .home-cats-grid { max-width: 900px; margin: 0 auto; grid-template-columns: repeat(8, 1fr); gap: 20px; }
  .hci { width: 54px; height: 54px; font-size: 22px; }
  .home-cat-item span { font-size: 12px; }

  /* EMI banner: full-bleed light background, centered card */
  .emi-banner-section { width: 100%; padding: 32px 40px; }
  .emi-banner { max-width: 1280px; margin: 0 auto; padding: 44px 56px; }
  .emi-banner h2 { font-size: 26px; }
  .emi-banner p { font-size: 14px; max-width: 600px; }
  .emi-features { grid-template-columns: repeat(4, 1fr); max-width: 760px; }

  /* Footer: full-bleed navy background, centered content */
  .footer { width: 100%; padding: 48px 40px 20px; }
  .footer-top, .footer-links, .footer-bottom { max-width: 1280px; margin-left: auto; margin-right: auto; }
  .footer-top { margin-bottom: 28px; }
  .footer-links { grid-template-columns: repeat(4, 1fr); gap: 28px; margin-bottom: 28px; }

  /* Buy page */
  .buy-header { padding: 14px 40px; }
  .buy-search-wrap { max-width: 560px; }
  .cat-scroll { padding: 12px 40px; }
  .filter-bar { padding: 10px 40px; }
  .filter-panel { padding: 16px 40px; }
  .filter-panel-inner { max-width: 1280px; margin: 0 auto; grid-template-columns: repeat(4, 1fr); }
  .buy-results-count { padding: 12px 40px; }
  .listings-grid { padding: 0 40px 24px; max-width: 1280px; margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
  .listing-img { height: 170px; }

  /* Sell page: centered card form */
  .page-header { padding: 16px 40px; }
  .sell-form-wrap { max-width: 680px; margin: 0 auto; padding: 24px 40px; }
  .sell-cat-grid { grid-template-columns: repeat(8, 1fr); }

  /* My Listings / Saved / Chats / EMI Status: centered content */
  .page-content { max-width: 960px; margin: 0 auto; padding: 20px 40px; }
  .page-content .listings-grid { padding: 0; margin: 0; max-width: 100%; }

  /* Profile: sidebar + content layout */
  .profile-wrap { max-width: 880px; margin: 0 auto; padding: 32px 40px; display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
  .profile-avatar-section { grid-column: 1; }
  .profile-nav { grid-column: 1; flex-direction: column; }
  .profile-nav-btn { width: 100%; justify-content: flex-start; }
  .profile-tab { grid-column: 2; grid-row: 1 / span 3; }

  /* Modals: comfortably centered, not edge to edge */
  .modal-overlay { align-items: center; }
  .modal-box { border-radius: var(--radius-lg); max-width: 460px; max-height: 85vh; }
  .chat-modal-box { max-width: 460px; height: 78vh; }
  .product-modal-box { max-width: 500px; }
  .emi-modal-box { max-width: 460px; }

  /* Admin panel — sidebar becomes permanent, content shifts to sit beside it */
  .admin-sidebar { transform: translateX(0); }
  .admin-main { margin-left: var(--admin-sidebar-w); }
  .admin-topbar-toggle { display: none; }
  .admin-sidebar-scrim { display: none; }
  .admin-content { padding: 22px 28px 48px; }
  .admin-stats-grid { grid-template-columns: repeat(5, 1fr); }

  .toast { max-width: 360px; }
}

/* ===== Report seller ===== */
.report-seller-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 12px; padding: 10px;
  background: none; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.report-seller-btn:hover { border-color: var(--red); color: var(--red); }

/* Open-report count on the admin Reports tab */
.reports-badge {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 4px;
  background: var(--red); color: #fff; border-radius: 20px;
  font-size: 11px; font-weight: 700; text-align: center;
}

/* Report free-text can be long — keep table rows readable */
.report-details {
  max-width: 260px; max-height: 60px; overflow-y: auto;
  font-size: 12px; color: var(--text-muted); white-space: pre-wrap; word-break: break-word;
}

/* ===== Admin product filter bar ===== */
.admin-product-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 0 16px 12px;
}
.admin-product-filters input[type="text"],
.admin-product-filters select {
  padding: 7px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; font-family: inherit; background: var(--white); color: var(--text);
}
.admin-product-filters input[type="text"] { min-width: 200px; flex: 1 1 200px; max-width: 320px; }
.admin-product-filters input[type="text"]:focus,
.admin-product-filters select:focus { outline: none; border-color: var(--accent); }
.admin-emi-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.admin-prod-count {
  margin-left: auto; font-size: 13px; font-weight: 600; color: var(--text-muted);
}

/* ============================================================
   PRODUCT CARD (buy grid, saved items, similar products)
   New `pcard-*` names so nothing collides with the old
   .listing-card rules still used elsewhere.
   ============================================================ */
.pcard {
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.pcard:hover { box-shadow: 0 14px 34px rgba(15,23,42,0.12); transform: translateY(-3px); border-color: #CBD5E1; }
.pcard-media { position: relative; aspect-ratio: 4 / 3; background: var(--bg); overflow: hidden; }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard-ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 44px; }

.pcard-flags { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.pcard-flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em;
  padding: 6px 11px; border-radius: 7px; color: #fff;
}
.pcard-flag-deal { background: #10B981; }
.pcard-flag-featured { background: #0F172A; }

.pcard-heart {
  position: absolute; top: 11px; right: 11px; width: 36px; height: 36px;
  border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.94); color: #64748B; font-size: 15px;
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(15,23,42,0.12);
}
.pcard-heart:hover { background: #fff; color: var(--red); }
.pcard-heart.is-saved { color: var(--red); }

.pcard-emi {
  position: absolute; left: 0; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: #F5B942; color: #3A2A05; font-size: 11.5px; font-weight: 800;
  padding: 6px 12px 6px 11px; border-radius: 0 8px 8px 0;
}

.pcard-body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.pcard-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pcard-cond {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em;
  padding: 5px 10px; border-radius: 6px; background: #ECFDF5; color: #047857;
}
.pcard-cond.cond-good { background: var(--accent-light); color: var(--accent); }
.pcard-cond.cond-fair { background: #FEF6E3; color: #92400E; }
.pcard-cond.cond-for_parts { background: #FEF2F2; color: #B91C1C; }
.pcard-negotiable { font-size: 11px; font-weight: 600; color: var(--text-muted); }

.pcard-title {
  font-size: 14.5px; font-weight: 650; line-height: 1.4; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* Always reserve two lines. A one-line title made its card's body shorter
     than its neighbours', so every row below it sat at a different height. */
  min-height: calc(2 * 1.4em);
}
.pcard-price-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pcard-price { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.pcard-was { font-size: 13.5px; color: var(--text-light); text-decoration: line-through; }
.pcard-save { font-size: 12.5px; font-weight: 700; color: #10B981; }

.pcard-emi-line {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  background: #FEF6E3; color: #92400E; border-radius: 8px;
  padding: 7px 11px; font-size: 12.5px; font-weight: 650;
}
.pcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 4px; font-size: 12px; color: var(--text-muted);
}
.pcard-foot i { margin-right: 5px; }
/* One line, ellipsised. "Mandi, Himachal Pradesh" used to wrap onto a second
   line, which made the footer taller than its neighbours' and left the date
   floating at a different height across the row. The full text stays
   available in the title attribute on hover.
   min-width:0 is required: a flex child will not shrink below its content
   width without it, so the ellipsis would never appear. */
.pcard-loc {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard-date { white-space: nowrap; flex-shrink: 0; }

/* ============================================================
   PRODUCT DETAIL VIEW (opened from a card)
   ============================================================ */
.pdp-modal .modal-box.product-modal-box {
  max-width: 1140px; width: 100%; max-height: 94vh; overflow-y: auto;
  background: var(--bg); padding: 0; border-radius: var(--radius-lg);
}
.pdp-modal .product-modal-box > .modal-close {
  position: sticky; top: 14px; margin-left: auto; margin-right: 14px; z-index: 20;
  background: rgba(255,255,255,0.96); color: var(--text); box-shadow: 0 2px 10px rgba(15,23,42,0.16);
}
#productModalContent { padding: 0 18px 24px; }

.pdp-crumbs {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted); padding: 4px 0 18px;
}
.pdp-crumbs a { color: var(--text-muted); text-decoration: none; }
.pdp-crumbs a:hover { color: var(--accent); }
.pdp-crumbs i { font-size: 9px; opacity: 0.55; }
.pdp-crumbs span {
  color: var(--text); font-weight: 600; max-width: 40ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pdp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.pdp-left, .pdp-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.pdp-gallery {
  position: relative; background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3;
}
.pdp-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-gallery .pm-img-placeholder { width: 100%; height: 100%; display: grid; place-items: center; font-size: 64px; }
.pdp-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.94); color: var(--text); font-size: 15px;
  display: grid; place-items: center; box-shadow: 0 3px 12px rgba(15,23,42,0.18);
}
.pdp-nav:hover { background: #fff; }
.pdp-prev { left: 14px; } .pdp-next { right: 14px; }
.pdp-count {
  position: absolute; right: 14px; bottom: 14px;
  background: rgba(15,23,42,0.78); color: #fff; border-radius: 8px;
  padding: 5px 11px; font-size: 12.5px; font-weight: 600;
}
.pdp-thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.pdp-thumb {
  width: 74px; height: 74px; flex-shrink: 0; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 11px; overflow: hidden; background: var(--white);
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb.is-active { border-color: var(--accent); }

.pdp-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 22px 20px; }
.pdp-card h3 { font-size: 18px; font-weight: 800; margin: 0 0 18px; letter-spacing: -0.01em; }
.pdp-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }

/* ===== Product Details: two groups =====
   Category specifications first, then the general listing fields. A car's
   year and kilometres are what the buyer is deciding on; leaving them mixed
   in below "Negotiable" made the panel read like a form receipt rather than
   a spec sheet. */
.pdp-spec-group + .pdp-spec-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.pdp-spec-group-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 16px;
}
/* Tinted tiles for the spec group so it reads as the headline information
   without needing a second heading level. */
.pdp-specs-key { gap: 10px 12px; }
.pdp-spec-key {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.pdp-spec-key span { margin-bottom: 4px; }
.pdp-spec-key strong { font-size: 15px; }
@media (max-width: 520px) {
  .pdp-specs-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-spec-key { padding: 10px 12px; }
  .pdp-spec-key strong { font-size: 14px; }
}
.pdp-spec span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-light); margin-bottom: 6px;
}
.pdp-spec strong { font-size: 14.5px; font-weight: 600; color: var(--text); word-break: break-word; }
.pdp-desc { font-size: 14.5px; line-height: 1.7; color: var(--text-muted); margin: 0; white-space: pre-wrap; }

.pdp-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.pdp-pill {
  font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 8px;
  background: #ECFDF5; color: #047857;
}
.pdp-pill.cond-good { background: var(--accent-light); color: var(--accent); }
.pdp-pill.cond-fair { background: #FEF6E3; color: #92400E; }
.pdp-pill.cond-for_parts { background: #FEF2F2; color: #B91C1C; }
.pdp-pill-deal { background: #ECFDF5; color: #047857; }
.pdp-pill-neutral { background: var(--bg); color: var(--text-muted); }

.pdp-title { font-size: clamp(22px, 3.4vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.18; margin: 4px 0 0; }
.pdp-price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.pdp-price { font-size: clamp(28px, 4.4vw, 40px); font-weight: 800; letter-spacing: -0.035em; }
.pdp-was { font-size: 18px; color: var(--text-light); text-decoration: line-through; }
.pdp-save {
  align-self: flex-start; background: #ECFDF5; color: #047857;
  border-radius: 8px; padding: 7px 13px; font-size: 13.5px; font-weight: 700;
}

.pdp-emi { background: #FFFBF2; border: 1px solid #F6E2B4; border-radius: 14px; padding: 18px 17px; }
.pdp-emi-head { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; color: #92400E; }
.pdp-emi-opts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.pdp-emi-opt {
  background: var(--white); border: 1px solid #F0DFB8; border-radius: 10px;
  padding: 11px 9px; cursor: pointer; text-align: center; font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.pdp-emi-opt strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--text); }
.pdp-emi-opt span { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.pdp-emi-opt.is-active { background: #F5B942; border-color: #F5B942; }
.pdp-emi-opt.is-active strong, .pdp-emi-opt.is-active span { color: #3A2A05; }
.pdp-emi-note { font-size: 11.5px; line-height: 1.55; color: #92400E; opacity: 0.85; margin: 14px 0 0; }

.pdp-loc { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--text-muted); }
.pdp-loc i { color: var(--text-light); }
.pdp-pin { background: var(--bg); border-radius: 6px; padding: 3px 9px; font-size: 12.5px; }

.pdp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pdp-btn {
  flex: 1 1 150px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: none; border-radius: 12px; padding: 15px 18px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700;
  transition: transform .15s ease, background .15s ease;
}
.pdp-btn:hover { transform: translateY(-2px); }
.pdp-btn-amber { background: #F5B942; color: #3A2A05; }
.pdp-btn-amber:hover { background: #E0A82E; }
.pdp-btn-blue { background: var(--accent); color: #fff; }
.pdp-btn-blue:hover { background: var(--accent-hover); }
.pdp-btn-ghost { background: var(--white); color: var(--text); border: 1.5px solid var(--border); }
.pdp-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.pdp-btn-wide { flex: 1 1 100%; }
.pdp-icon-btn {
  width: 54px; flex: 0 0 54px; border-radius: 12px; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--border); color: var(--text-muted);
  font-size: 17px; display: grid; place-items: center;
}
.pdp-icon-btn:hover { border-color: var(--red); color: var(--red); }
.pdp-icon-btn.is-saved { color: var(--red); border-color: #FECACA; }

.pdp-own {
  background: var(--accent-light); color: var(--accent); border-radius: 12px;
  padding: 13px; text-align: center; font-size: 13.5px; font-weight: 700;
}

.pdp-seller { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 18px 17px; }
.pdp-seller-top { display: flex; align-items: center; gap: 13px; }
.pdp-seller-avatar {
  width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%;
  background: var(--navy); color: #fff; display: grid; place-items: center;
  font-size: 19px; font-weight: 800; overflow: hidden;
}
.pdp-seller-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pdp-seller-name { font-size: 16px; font-weight: 700; }
.pdp-seller-meta { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.pdp-seller-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pdp-seller-actions .pdp-btn { padding: 12px 16px; font-size: 14px; }

.pdp-safety {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--accent-light); border-radius: 12px; padding: 15px;
  font-size: 13.5px; line-height: 1.55; color: #1E40AF;
}
.pdp-safety i { margin-top: 2px; }

.pdp-similar { margin-top: 34px; }
.pdp-similar-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pdp-similar-head h3 { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.pdp-viewall {
  background: none; border: none; cursor: pointer; color: var(--accent);
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
}
.pdp-similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

@media (min-width: 900px) {
  .pdp-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 30px; }
  #productModalContent { padding: 0 26px 32px; }
  .pdp-emi-opts { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .pcard:hover, .pdp-btn:hover { transform: none; }
}

/* Explains the nearby-first ordering on the buy results count line */
.buy-near-note { color: var(--text-muted); font-weight: 500; }

/* ============================================================
   PAGE & GRID TRANSITIONS
   Deliberately short (~250ms). Anything longer starts to feel
   like lag rather than polish, since these fire on every tap.
   ============================================================ */
@keyframes dbPageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dbCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.page.page-enter { animation: dbPageIn .45s cubic-bezier(.25,.8,.35,1) both; }

/* The admin page fades WITHOUT a transform. Any transform here (including
   the identity matrix an animation with fill-mode `both` leaves behind)
   would turn this element into the containing block for the fixed
   sidebar, making it scroll with the page instead of staying put. */
#adminPage.page-enter { animation-name: dbFadeIn; }
@keyframes dbFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Cards fade up in sequence. The stagger is capped at 10 items — beyond
   that the last cards would visibly lag behind the first. */
.grid-enter > * { animation: dbCardIn .5s cubic-bezier(.25,.8,.35,1) both; }
.grid-enter > *:nth-child(1)  { animation-delay: 0ms; }
.grid-enter > *:nth-child(2)  { animation-delay: 45ms; }
.grid-enter > *:nth-child(3)  { animation-delay: 90ms; }
.grid-enter > *:nth-child(4)  { animation-delay: 135ms; }
.grid-enter > *:nth-child(5)  { animation-delay: 180ms; }
.grid-enter > *:nth-child(6)  { animation-delay: 225ms; }
.grid-enter > *:nth-child(7)  { animation-delay: 270ms; }
.grid-enter > *:nth-child(8)  { animation-delay: 315ms; }
.grid-enter > *:nth-child(9)  { animation-delay: 360ms; }
.grid-enter > *:nth-child(n+10) { animation-delay: 360ms; }

/* Category pills get a small press response so switching feels immediate
   even before the new results land. */
.cat-pill { transition: transform .14s ease, background .16s ease, color .16s ease, border-color .16s ease; }
.cat-pill:active { transform: scale(0.96); }

@media (prefers-reduced-motion: reduce) {
  .page.page-enter,
  .grid-enter > * { animation: none; }
  .cat-pill:active { transform: none; }
}

/* Emoji icons on the buy category pills, matching the home page tiles */
.cat-pill-ico { font-size: 15px; line-height: 1; margin-right: 2px; }
.cat-pill { display: inline-flex; align-items: center; gap: 6px; }

/* ===== Show at Top (listing promotion) ===== */
.pcard-flag-featured { background: #F5B942; color: #3A2A05; }

.btn-sm-feature { background: var(--gold-light); color: #92400E; font-weight: 700; }
.btn-sm-feature:hover { background: #F5DFA8; }
.btn-sm-feature.is-on { background: #F5B942; color: #3A2A05; }

.featured-note {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--gold-light); color: #92400E;
  border-radius: 7px; padding: 5px 10px; margin-bottom: 8px;
  font-size: 11.5px; font-weight: 700;
}

.feature-box { max-width: 440px; }
.feature-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.feature-plan {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 10px; cursor: pointer; font-family: inherit;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 11px;
  transition: border-color .15s ease, background .15s ease;
}
.feature-plan:hover { border-color: #F5B942; }
.feature-plan.is-active { border-color: #F5B942; background: var(--gold-light); }
.feature-plan-days { font-size: 14px; font-weight: 700; color: var(--text); }
.feature-plan-price { font-size: 13px; color: var(--text-muted); }
.feature-plan.is-active .feature-plan-price { color: #92400E; font-weight: 600; }

/* ===== Admin: Terms of Service editor ===== */
.admin-terms-wrap { margin: 0 16px 80px; }
.admin-terms-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.admin-terms-head h3 { font-size: 18px; font-weight: 800; margin: 0; color: var(--text); }
.admin-terms-meta { font-size: 12px; color: var(--text-muted); }
.admin-terms-note {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--accent-light); color: #1E40AF; border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 12.5px; line-height: 1.55; margin: 0 0 16px;
}
.admin-terms-note i { margin-top: 2px; flex-shrink: 0; }
.admin-terms-textarea {
  width: 100%; min-height: 420px; resize: vertical;
  border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; line-height: 1.7;
  color: var(--text); background: var(--white);
}
.admin-terms-textarea:focus { outline: none; border-color: var(--accent); }
.admin-terms-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.admin-terms-count { font-size: 12px; color: var(--text-muted); }

/* ===== Public Terms of Service modal ===== */
.terms-box { max-width: 640px; max-height: 80vh; display: flex; flex-direction: column; }
.terms-body { overflow-y: auto; padding-right: 4px; }
/* Rendered output of renderSafeMarkup() — used both in the public Terms
   modal and the admin editor's Preview tab, so formatting looks the same
   in both places. */
.terms-rendered {
  font-family: inherit; font-size: 13.5px; line-height: 1.75; color: var(--text);
  word-wrap: break-word;
}
.terms-rendered p { margin: 0 0 12px; }
.terms-rendered p:last-child { margin-bottom: 0; }
.terms-rendered strong { font-weight: 700; }
.terms-rendered em { font-style: italic; }
.terms-rendered u { text-decoration: underline; }
.terms-rendered ul, .terms-rendered ol { margin: 0 0 12px; padding-left: 22px; }
.terms-rendered li { margin-bottom: 5px; }
.terms-rendered br { content: ''; display: block; margin-bottom: 6px; }

/* ===== Admin: Dashboard charts ===== */
.admin-dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 16px 80px; }
.admin-chart-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 18px 14px;
}
.admin-chart-head { margin-bottom: 12px; }
.admin-chart-head h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 800; color: var(--text); margin: 0 0 3px;
}
.admin-chart-head h3 i { color: var(--accent); font-size: 13px; }
.admin-chart-sub { font-size: 11.5px; color: var(--text-muted); }
.admin-chart-canvas-wrap { position: relative; height: 260px; }
.admin-chart-empty {
  height: 260px; display: flex; align-items: center; justify-content: center;
  color: var(--text-light); font-size: 13px; text-align: center;
}

@media (min-width: 900px) {
  .admin-dashboard-grid { grid-template-columns: 1fr 1fr; max-width: 1280px; margin-left: auto; margin-right: auto; margin-bottom: 80px; }
  .admin-chart-card-wide { grid-column: 1 / -1; }
  .admin-chart-canvas-wrap { height: 300px; }
}

/* ===== Admin: table pagination ===== */
/* The pager sits ABOVE its table, so it rounds at the top and drops its
   bottom border to read as one continuous card with the table below. */
.admin-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin: 0 16px; padding: 14px 18px;
  background: var(--white); border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.admin-pager:empty { display: none; }
/* Flatten the table's TOP corners when a pager sits directly above it, so
   the two read as one continuous card rather than two stacked boxes. */
.admin-pager:not(:empty) + .admin-table-wrap { border-radius: 0 0 var(--radius) var(--radius); }
.admin-pager-size { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); }
.admin-pager-size select {
  border: 1.5px solid var(--border); border-radius: 7px; padding: 5px 8px;
  font-size: 12.5px; font-family: inherit; color: var(--text); background: var(--white);
}
.admin-pager-range { font-size: 12.5px; color: var(--text-muted); }

/* Spacing: gap raised 3px -> 6px so the numbers aren't touching, and the
   surrounding padding lifted a little so the row doesn't feel cramped
   against the table below it. Everything else is the original design. */
.admin-pager-nav { display: flex; align-items: center; gap: 6px; }
.admin-pager-arrow, .admin-pager-num {
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1.5px solid var(--border); background: var(--white); color: var(--text-muted);
  border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.admin-pager-arrow:hover:not(:disabled), .admin-pager-num:hover { border-color: var(--accent); color: var(--accent); }
.admin-pager-arrow:disabled { opacity: 0.4; cursor: default; }
.admin-pager-num.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.admin-pager-ellipsis { color: var(--text-light); padding: 0 4px; font-size: 12.5px; }

@media (max-width: 640px) {
  /* Stack the three groups instead of letting them wrap unevenly. */
  .admin-pager { justify-content: center; gap: 10px; }
  .admin-pager-nav { order: -1; width: 100%; justify-content: center; }
}

/* ===== Buy page: pagination =====
   Same visual language as the admin tables' pager (reuses .admin-pager's
   layout rules directly via the shared class), scoped separately here only
   for things that differ on a public page: full width, sits below the
   grid rather than a table, doesn't need to visually merge with a table's
   rounded corners above it. */
.buy-pager {
  max-width: 1280px; margin: 4px auto 40px !important;
  border-radius: var(--radius) !important;
}
.buy-pager:empty { display: none; }

@media (min-width: 700px) {
  .buy-pager { padding: 14px 22px; }
}

/* ===== Admin: Terms editor toolbar & preview ===== */
.terms-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 8px; border: 1.5px solid var(--border); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0; background: var(--bg);
}
.terms-toolbar button {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 7px; background: none;
  color: var(--text-muted); font-size: 13px; cursor: pointer;
}
.terms-toolbar button:hover { background: var(--white); border-color: var(--border); color: var(--text); }
.terms-toolbar-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.terms-toolbar-tabs { display: flex; gap: 2px; margin-left: auto; }
.terms-toolbar-tabs button {
  width: auto; padding: 0 12px; font-size: 12.5px; font-weight: 600; color: var(--text-muted);
}
.terms-toolbar-tabs button.is-active { background: var(--white); border-color: var(--border); color: var(--accent); }

.admin-terms-textarea { border-radius: 0 0 var(--radius) var(--radius); }
.admin-terms-preview {
  min-height: 420px; border: 1.5px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius); padding: 16px 18px; background: var(--white);
}
.admin-terms-preview-empty { color: var(--text-light); font-style: italic; }
.admin-terms-help { font-size: 11.5px; color: var(--text-muted); margin: 10px 0 0; }
.admin-terms-help strong, .admin-terms-help em, .admin-terms-help u { color: var(--text); }

/* ============================================================
   ADMIN SHELL — content spacing reset.
   These blocks were originally laid out for a full-bleed page and
   carried their own 16px side margins. Inside .admin-content
   (which now supplies the page padding) those would double up, so
   they're zeroed here in one place rather than editing each rule.
   ============================================================ */
.admin-content .admin-table-wrap,
.admin-content .admin-search-bar,
.admin-content .admin-pager,
.admin-content .admin-dashboard-grid,
.admin-content .admin-terms-wrap { margin-left: 0; margin-right: 0; }

.admin-content .admin-filters,
.admin-content .admin-product-filters { padding-left: 0; padding-right: 0; }

/* The long bottom margins existed to clear the old fixed bottom nav;
   inside the shell the content column handles that spacing itself. */
.admin-content .admin-table-wrap,
.admin-content .admin-dashboard-grid,
.admin-content .admin-terms-wrap { margin-bottom: 24px; }

/* The pager now sits directly on top of its table — no gap between them,
   or the "one continuous card" look breaks. */
.admin-content .admin-pager { margin-bottom: 0; }

/* Filter/search rows read as part of the table card below them. */
.admin-content .admin-search-bar { margin-bottom: 12px; }

.admin-content .admin-dashboard-grid { max-width: none; }

/* ===== Admin dashboard: overview totals =====
   Deliberately lighter than the coloured EMI stat cards above them —
   those five are the EMI pipeline (the panel's primary job), these six
   are marketplace-wide context, so they read as secondary rather than
   competing for attention with a second row of saturated blocks. */
.admin-overview-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px;
}
.admin-overview-card {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.admin-overview-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.admin-overview-icon {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 17px;
}
.admin-overview-card strong {
  display: block; font-size: 21px; font-weight: 800; color: var(--text); line-height: 1.15;
}
.admin-overview-card span { font-size: 12px; color: var(--text-muted); }

@media (min-width: 700px) {
  .admin-overview-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .admin-overview-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================
   INFO PAGES (Help Centre, Contact, Report a Problem, Legal)
   ============================================================ */
.info-page { max-width: 820px; margin: 0 auto; padding: 20px 16px 60px; }
.info-hero { text-align: center; margin-bottom: 26px; }
.info-hero h1 { font-size: 26px; font-weight: 800; color: var(--text); margin: 0 0 8px; }
.info-hero p { font-size: 14.5px; color: var(--text-muted); margin: 0; line-height: 1.6; }

.info-search {
  display: flex; align-items: center; gap: 10px; margin: 20px auto 0; max-width: 480px;
  background: var(--white); border: 1.5px solid var(--border); border-radius: 999px; padding: 0 18px; height: 46px;
}
.info-search i { color: var(--text-light); }
.info-search input { flex: 1; border: none; outline: none; background: none; font-size: 14px; font-family: inherit; color: var(--text); min-width: 0; }
.info-search:focus-within { border-color: var(--accent); }

.info-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px; margin-bottom: 16px; }
.info-card h3 { font-size: 17px; font-weight: 800; margin: 0 0 16px; color: var(--text); }
.info-loading { text-align: center; padding: 30px; color: var(--text-muted); font-size: 13.5px; }
.info-loading a { color: var(--accent); font-weight: 600; }

.info-note {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--accent-light); color: #1E40AF; border-radius: var(--radius);
  padding: 14px 16px; font-size: 13px; line-height: 1.6; margin-bottom: 16px;
}
.info-note i { margin-top: 2px; flex-shrink: 0; }

.info-success { text-align: center; padding: 26px 16px; }
.info-success i { font-size: 34px; color: var(--green, #10B981); }
.info-success strong { display: block; font-size: 17px; font-weight: 800; margin: 12px 0 6px; }
.info-success span { display: block; font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }

/* FAQ list */
.faq-cats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
.faq-cat {
  background: var(--bg); border: 1.5px solid var(--border); color: var(--text-muted);
  padding: 7px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.faq-cat:hover { border-color: var(--accent); color: var(--accent); }
.faq-cat.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.faq-list { margin-bottom: 26px; }
.faq-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; cursor: pointer; font-size: 14.5px; font-weight: 650; color: var(--text);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { color: var(--text-light); font-size: 12px; transition: transform .2s ease; flex-shrink: 0; }
.faq-item[open] summary i { transform: rotate(180deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-answer { padding: 16px 18px 6px; font-size: 13.5px; }
.faq-tag { padding: 0 18px 14px; font-size: 11px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }

/* Help Centre call-to-action tiles */
.info-cta-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.info-cta {
  display: block; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 18px;
  transition: border-color .15s ease, transform .15s ease;
}
.info-cta:hover { border-color: var(--accent); transform: translateY(-2px); }
.info-cta i { font-size: 19px; color: var(--accent); }
.info-cta strong { display: block; font-size: 15px; font-weight: 700; margin: 10px 0 4px; color: var(--text); }
.info-cta span { font-size: 12.5px; color: var(--text-muted); }

/* Contact details */
.info-contact-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
.info-contact-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; }
.info-contact-card i { font-size: 17px; color: var(--accent); }
.info-contact-card strong { display: block; font-size: 13px; font-weight: 700; margin: 8px 0 3px; }
.info-contact-card span { font-size: 12.5px; color: var(--text-muted); }

/* Legal page (Terms + Privacy share it) */
.legal-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
.legal-tab {
  background: var(--bg); border: 1.5px solid var(--border); color: var(--text-muted);
  padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.legal-tab:hover { border-color: var(--accent); color: var(--accent); }
.legal-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.legal-updated { font-size: 12px; color: var(--text-muted); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }

.field-hint { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }
.opt { color: var(--text-light); font-weight: 400; }

/* ===== Admin: FAQ management ===== */
.admin-faq-wrap { margin: 0 16px 24px; }
.btn-sm-inline { padding: 8px 14px; font-size: 12.5px; width: auto; }
.admin-faq-group { margin-bottom: 22px; }
.admin-faq-group h4 {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 10px;
}
.admin-faq-row {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 8px;
}
.admin-faq-row.is-draft { background: #FFFBF2; border-color: #F3DFB3; }
.admin-faq-main { flex: 1; min-width: 220px; }
.admin-faq-q { font-size: 14px; font-weight: 650; color: var(--text); }
.admin-faq-a { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.55; }
.admin-faq-draft-tag {
  display: inline-block; margin-left: 8px; background: var(--gold-light); color: #92400E;
  border-radius: 5px; padding: 2px 7px; font-size: 10.5px; font-weight: 700;
}
.admin-faq-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-faq-order { font-size: 11.5px; color: var(--text-light); font-family: ui-monospace, monospace; }
.faq-editor-box { max-width: 560px; }

.report-type-tag {
  display: inline-block; background: var(--accent-light); color: #1E40AF;
  border-radius: 5px; padding: 2px 8px; font-size: 10.5px; font-weight: 700;
}

@media (min-width: 700px) {
  .info-cta-grid { grid-template-columns: 1fr 1fr; }
  /* auto-fit rather than a fixed 3, so removing a card (the phone number)
     leaves two evenly-sized cards instead of two-thirds of a row. */
  .info-contact-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .info-page { padding: 28px 24px 70px; }
}

/* ===== EMI Partners page ===== */
.partner-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 10px;
}
.partner-logo {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px;
  background: var(--accent-light); color: var(--accent);
  display: grid; place-items: center; font-size: 19px; font-weight: 800;
}
.partner-main { flex: 1; min-width: 0; }
.partner-name { font-size: 15.5px; font-weight: 700; color: var(--text); }
.partner-loc { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.partner-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12.5px; color: var(--text-muted); }
.partner-meta strong { color: var(--text); }

/* ===== Blog ===== */
.blog-card {
  display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin-bottom: 12px;
  transition: border-color .15s ease, transform .15s ease;
}
.blog-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.blog-card-date { font-size: 11.5px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.blog-card h3 { font-size: 18px; font-weight: 800; color: var(--text); margin: 8px 0 6px; line-height: 1.3; }
.blog-card p { font-size: 13.5px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.6; }
.blog-card-more { font-size: 12.5px; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; }

.blog-article { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px; }
.blog-article h1 { font-size: 25px; font-weight: 800; color: var(--text); margin: 10px 0 18px; line-height: 1.25; }

/* ===== Admin: content page picker ===== */
.admin-doc-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-doc-tab {
  background: var(--bg); border: 1.5px solid var(--border); color: var(--text-muted);
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.admin-doc-tab:hover { border-color: var(--accent); color: var(--accent); }
.admin-doc-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================
   EMI FEATURE FLAG
   When EMI is switched off in the admin panel, every public-facing
   EMI surface is hidden. This is presentation only — the server
   independently rejects EMI applications while the flag is off, so
   a hidden button is not the thing standing between a visitor and
   an application we cannot honour.
   ============================================================ */
body.emi-off .emi-feature { display: none !important; }

/* ===== Admin: feature switches ===== */
.setting-row {
  display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin-bottom: 12px;
}
.setting-main { flex: 1; min-width: 240px; }
.setting-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 8px;
}
.setting-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 5px; letter-spacing: 0.04em; }
.setting-badge.is-on { background: #ECFDF5; color: #047857; }
.setting-badge.is-off { background: var(--bg); color: var(--text-muted); }
.setting-desc { font-size: 13px; color: var(--text-muted); line-height: 1.65; }
.setting-desc strong { color: var(--text); }
.setting-action { flex-shrink: 0; }

/* Toggle switch */
.switch { position: relative; display: inline-block; width: 52px; height: 30px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #CBD5E1; border-radius: 30px; transition: background .2s ease;
}
.switch-slider::before {
  content: ''; position: absolute; height: 24px; width: 24px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(15,23,42,0.3);
}
.switch input:checked + .switch-slider { background: var(--green, #10B981); }
.switch input:checked + .switch-slider::before { transform: translateX(22px); }
.switch input:focus-visible + .switch-slider { outline: 3px solid rgba(37,99,235,0.4); outline-offset: 2px; }

/* ===== EMI not-available modal ===== */
.emi-unavailable-box { max-width: 420px; text-align: center; }
.emi-unavailable-icon {
  width: 62px; height: 62px; margin: 6px auto 16px; border-radius: 50%;
  background: var(--gold-light); color: #92400E;
  display: grid; place-items: center; font-size: 25px;
}
.emi-unavailable-box h3 { font-size: 19px; font-weight: 800; margin: 0 0 10px; color: var(--text); }
.emi-unavailable-box p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0 0 10px; }
.emi-unavailable-where { font-size: 12px !important; color: var(--text-light) !important; font-family: ui-monospace, monospace; }
.emi-unavailable-note {
  background: var(--bg); border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 12.5px !important; margin: 14px 0 !important;
}
.emi-unavailable-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.emi-unavailable-actions .btn-primary { flex: 1; min-width: 130px; }

/* ===== Admin: EMI coverage ===== */
.emi-area-form {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; margin-bottom: 18px;
}
.emi-area-scope {
  display: inline-block; margin-left: 8px; background: var(--accent-light); color: var(--accent);
  border-radius: 5px; padding: 2px 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
}

/* ===== Custom combo-box for the EMI coverage picker =====
   Replaces <datalist>, whose dropdown the browser positions and styles
   itself — it was rendering off to the left and couldn't be themed. */
.combo-wrap { position: relative; }

.combo-list {
  position: absolute;
  top: 100%;              /* directly beneath the input */
  left: 0; right: 0;
  z-index: 50;
  margin-top: 4px;
  max-height: 260px;      /* ~7 rows, then scrolls */
  overflow-y: auto;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.combo-option {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 10px 14px; border: none; background: none; font-family: inherit;
  font-size: 13.5px; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.combo-option:last-child { border-bottom: none; }
.combo-option:hover { background: var(--accent-light); color: var(--accent); }
.combo-option small { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }
.combo-option:hover small { color: var(--accent); }

/* Slimmer scrollbar so a 60-item list doesn't dominate the panel. */
.combo-list::-webkit-scrollbar { width: 8px; }
.combo-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.combo-list::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* ============================================================
   SUPPORT CHATBOT
   ============================================================ */
.bot-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 900;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 22px;
  box-shadow: 0 6px 20px rgba(37,99,235,0.4);
  display: grid; place-items: center;
  transition: transform .18s ease, background .18s ease;
}
.bot-fab:hover { transform: translateY(-2px) scale(1.04); }
.bot-fab.is-open { background: var(--text); transform: rotate(90deg); }

.bot-panel {
  position: fixed; z-index: 901;
  bottom: 90px; right: 22px; width: 370px; max-width: calc(100vw - 32px);
  height: 520px; max-height: calc(100vh - 130px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 18px 50px rgba(15,23,42,0.22);
}

.bot-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; background: var(--navy, #0F172A); color: #fff; flex-shrink: 0;
}
.bot-head-title { display: flex; align-items: center; gap: 11px; }
.bot-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); display: grid; place-items: center; font-size: 14px;
}
.bot-head-title strong { display: block; font-size: 14px; }
.bot-head-title small { font-size: 11px; opacity: 0.7; }
.bot-close { background: none; border: none; color: #fff; opacity: 0.7; cursor: pointer; font-size: 15px; }
.bot-close:hover { opacity: 1; }

.bot-log { flex: 1; overflow-y: auto; padding: 16px; background: var(--bg); }
.bot-msg { display: flex; flex-direction: column; margin-bottom: 14px; max-width: 88%; }
.bot-msg-user { margin-left: auto; align-items: flex-end; }
.bot-msg-bot { margin-right: auto; align-items: flex-start; }

.bot-bubble {
  padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.6;
  word-wrap: break-word; white-space: normal;
}
.bot-msg-bot .bot-bubble {
  background: var(--white); color: var(--text);
  border: 1px solid var(--border); border-bottom-left-radius: 4px;
}
.bot-msg-user .bot-bubble {
  background: var(--accent); color: #fff; border-bottom-right-radius: 4px;
}
/* Bot replies may contain lists from an FAQ answer. */
.bot-bubble p { margin: 0 0 8px; }
.bot-bubble p:last-child { margin-bottom: 0; }
.bot-bubble ul, .bot-bubble ol { margin: 6px 0; padding-left: 20px; }
.bot-bubble strong { font-weight: 700; }

.bot-typing .bot-bubble { display: flex; gap: 4px; padding: 13px 14px; }
.bot-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-light);
  animation: botBlink 1.2s infinite ease-in-out;
}
.bot-typing span:nth-child(2) { animation-delay: .18s; }
.bot-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes botBlink { 0%,80%,100% { opacity:.3; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }

.bot-action {
  margin-top: 8px; align-self: flex-start; cursor: pointer; font-family: inherit;
  background: var(--accent); color: #fff; border: none;
  padding: 8px 15px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
}
.bot-action:hover { background: var(--accent-dark, #1D4ED8); }

.bot-related { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bot-related > span { font-size: 11px; color: var(--text-muted); font-weight: 600; }

.bot-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; flex-shrink: 0; }
.bot-chips:empty { display: none; }
.bot-chip {
  background: var(--white); border: 1.5px solid var(--border); color: var(--accent);
  padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; text-align: left;
}
.bot-chip:hover { border-color: var(--accent); background: var(--accent-light); }
.bot-chip-sm { font-size: 11.5px; padding: 5px 10px; }

.bot-input {
  display: flex; gap: 8px; padding: 12px 14px; flex-shrink: 0;
  border-top: 1px solid var(--border); background: var(--white);
}
.bot-input input {
  flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 999px;
  padding: 10px 15px; font-size: 13.5px; font-family: inherit; outline: none; color: var(--text);
}
.bot-input input:focus { border-color: var(--accent); }
.bot-send {
  width: 40px; height: 40px; flex-shrink: 0; border: none; border-radius: 50%;
  background: var(--accent); color: #fff; cursor: pointer; font-size: 14px;
}
.bot-send:hover { background: var(--accent-dark, #1D4ED8); }

/* Full-screen on phones — a 370px panel on a 390px viewport leaves an
   awkward sliver and the keyboard covers the input.

   z-index must beat .navbar (1000). At the old 901 the panel covered the
   page but the NAVBAR sat on top of it, hiding the bot header and its close
   button behind the site logo — the panel looked like it had no way out.

   Height uses 100dvh, not 100vh: on mobile browsers 100vh is the height with
   the address bar HIDDEN, so a 100vh panel is taller than the visible area
   and the input row sits below the fold. dvh tracks the bar as it collapses.

   The safe-area inset keeps the header clear of a notch or the status bar. */
@media (max-width: 520px) {
  .bot-panel {
    inset: 0; z-index: 1100;
    width: 100%; height: 100dvh; max-height: 100dvh;
    border-radius: 0; border: none;
  }
  .bot-head { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .bot-input { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  /* Bigger tap target than the 15px desktop icon — 44px is the minimum
     comfortable touch size, and this is now the only way to close. */
  .bot-close { width: 44px; height: 44px; display: grid; place-items: center; font-size: 20px; opacity: 1; margin: -6px -8px -6px 0; }
}

/* Fallback for browsers without dvh support (older iOS Safari). */
@supports not (height: 100dvh) {
  @media (max-width: 520px) {
    .bot-panel { height: 100%; max-height: 100%; }
  }
}

/* The admin panel has its own dense UI; a floating bubble over it is noise. */
body.on-admin .bot-fab, body.on-admin .bot-panel { display: none; }

/* ===== Saved (heart) buttons =====
   The filled/unfilled distinction is carried by COLOUR on a solid heart,
   not by swapping Font Awesome's far/fas styles — `far` is absent from
   some Font Awesome builds, and on those the icon never visibly changed. */
[data-save-id] i.fa-heart {
  color: var(--text-light);
  transition: color .15s ease, transform .15s ease;
}
[data-save-id].is-saved i.fa-heart { color: var(--red); }
[data-save-id]:hover i.fa-heart { color: var(--red); opacity: .75; }
[data-save-id].is-saved:hover i.fa-heart { opacity: 1; }

/* Brief pop on tap, so the change is unmistakable. */
.heart-pop i.fa-heart { animation: heartPop .28s ease; }
@keyframes heartPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .heart-pop i.fa-heart { animation: none; }
}

/* Chatbot learning queue */
.ask-count {
  display: inline-block; margin-left: 9px; background: var(--accent-light); color: var(--accent);
  border-radius: 5px; padding: 2px 8px; font-size: 10.5px; font-weight: 700;
}

/* ===== Admin: Roles & Access ===== */
.role-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; margin-bottom: 14px;
}
.role-card.is-locked { background: var(--bg); }
.role-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.role-head strong { font-size: 16px; font-weight: 800; color: var(--text); text-transform: capitalize; }
.role-count { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.role-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.role-tag {
  display: inline-block; margin-left: 8px; background: var(--accent-light); color: var(--accent);
  border-radius: 5px; padding: 2px 8px; font-size: 10.5px; font-weight: 700;
}
.role-tag-muted { background: var(--bg); color: var(--text-muted); }
.role-tag-locked { background: var(--gold-light); color: #92400E; }
.role-locked-note { font-size: 12.5px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.55; }

.role-groups { display: grid; grid-template-columns: 1fr; gap: 14px; }
.role-group h5 {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 7px;
}
.role-cap {
  display: flex; align-items: center; gap: 9px; padding: 6px 0;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.role-cap input { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.role-cap input:disabled { cursor: not-allowed; }
.role-cap.is-sensitive i { color: var(--gold, #E7B24B); font-size: 11px; }
.is-disabled { opacity: .5; cursor: default; }

@media (min-width: 760px) {
  .role-groups { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1150px) {
  .role-groups { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Chatbot Q&A bank badges (append to style.css) =====
   Distinguishes entries the chatbot answers from but that are deliberately
   kept off the public Help Centre page. */
.admin-faq-bot-tag {
  display: inline-block; margin-left: 8px; padding: 2px 7px;
  background: #EFF6FF; color: #1D4ED8;
  border-radius: 5px; font-size: 10.5px; font-weight: 700;
}
.admin-faq-src-tag {
  display: inline-block; margin-left: 6px; padding: 2px 7px;
  background: #F3F4F6; color: #6B7280;
  border-radius: 5px; font-size: 10.5px; font-weight: 700;
}

/* ===== Chatbot Q&A bank badges (append to style.css) =====
   Distinguishes entries the chatbot answers from but that are deliberately
   kept off the public Help Centre page. */
.admin-faq-bot-tag {
  display: inline-block; margin-left: 8px; padding: 2px 7px;
  background: #EFF6FF; color: #1D4ED8;
  border-radius: 5px; font-size: 10.5px; font-weight: 700;
}
.admin-faq-src-tag {
  display: inline-block; margin-left: 6px; padding: 2px 7px;
  background: #F3F4F6; color: #6B7280;
  border-radius: 5px; font-size: 10.5px; font-weight: 700;
}

/* ============================================================
   ADMIN: APPLICATION LOGS
   Severity is carried by colour AND by the level text, never by
   colour alone — red/green are the commonest colour-blindness pair,
   and "is this line an error?" must not depend on seeing the hue.
   ============================================================ */
.log-files { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.log-file {
  flex: 1; min-width: 160px; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px;
}
.log-file:hover { border-color: var(--accent); }
.log-file.is-active { border-color: var(--accent); background: var(--accent-light); }
.log-file.is-empty { opacity: .6; }
.log-file strong { display: block; font-size: 13px; color: var(--text); font-family: ui-monospace, monospace; }
.log-file span { font-size: 11.5px; color: var(--text-muted); }

.log-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.log-levels { display: flex; gap: 5px; flex-wrap: wrap; }
.log-level-btn {
  background: var(--white); border: 1.5px solid var(--border); color: var(--text-muted);
  padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit; letter-spacing: .03em;
}
.log-level-btn:hover { border-color: var(--accent); }
.log-level-btn.is-active { background: var(--text); border-color: var(--text); color: #fff; }
.log-level-btn.is-active.log-error,
.log-level-btn.is-active.log-critical { background: #B42318; border-color: #B42318; }
.log-level-btn.is-active.log-warn { background: #B54708; border-color: #B54708; }
.log-level-btn.is-active.log-info { background: #067647; border-color: #067647; }

.log-search {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px;
  background: var(--white); border: 1.5px solid var(--border); border-radius: 8px; padding: 0 12px; height: 36px;
}
.log-search i { color: var(--text-light); font-size: 12px; }
.log-search input { flex: 1; min-width: 0; border: none; outline: none; background: none;
  font-size: 13px; font-family: inherit; color: var(--text); }
.log-search:focus-within { border-color: var(--accent); }
#logLimit { height: 36px; border: 1.5px solid var(--border); border-radius: 8px;
  padding: 0 10px; font-size: 12.5px; font-family: inherit; background: var(--white); color: var(--text); }

.log-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.log-count { padding: 2px 9px; border-radius: 5px; font-weight: 700; font-size: 10.5px; }

/* Level colours. Backgrounds are tinted rather than saturated so a screen
   full of INFO lines stays readable. */
.log-count.log-critical, .log-badge.log-critical { background: #7A0C0C; color: #fff; }
.log-count.log-error,    .log-badge.log-error    { background: #FEE4E2; color: #B42318; }
.log-count.log-warn,     .log-badge.log-warn     { background: #FEF0C7; color: #B54708; }
.log-count.log-info,     .log-badge.log-info     { background: #DCFAE6; color: #067647; }
.log-count.log-debug,    .log-badge.log-debug    { background: var(--bg); color: var(--text-muted); }

.log-entries {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 24px;
}
.log-row { border-bottom: 1px solid var(--border); border-left: 3px solid transparent; }
.log-row:last-child { border-bottom: none; }
.log-row.log-critical { border-left-color: #7A0C0C; background: #FFF6F5; }
.log-row.log-error    { border-left-color: #D92D20; background: #FFFBFA; }
.log-row.log-warn     { border-left-color: #F79009; background: #FFFCF5; }
.log-row.log-info     { border-left-color: #17B26A; }
.log-row.log-debug    { border-left-color: #D1D5DB; }

.log-row-head {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 14px;
  font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.log-row-head[onclick] { cursor: pointer; }
.log-row-head[onclick]:hover { background: rgba(0,0,0,0.02); }
.log-time { color: var(--text-light); flex-shrink: 0; font-size: 11.5px; }
.log-badge { flex-shrink: 0; padding: 1px 7px; border-radius: 4px; font-size: 10px;
  font-weight: 700; letter-spacing: .04em; }
.log-logger { color: var(--accent); flex-shrink: 0; font-size: 11.5px; }
.log-msg { color: var(--text); word-break: break-word; flex: 1; }
.log-caret { color: var(--text-light); font-size: 10px; flex-shrink: 0; transition: transform .15s ease; }

.log-detail {
  margin: 0; padding: 12px 14px 14px 40px; background: #0F172A; color: #E2E8F0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  line-height: 1.6; overflow-x: auto; white-space: pre;
}

@media (max-width: 700px) {
  .log-row-head { flex-wrap: wrap; gap: 6px; }
  .log-detail { padding-left: 14px; }
}

/* ============================================================
   NATURAL-LANGUAGE SEARCH
   ============================================================ */
.nav-search-wrap, .hb-hero-search, .buy-search-wrap { position: relative; }

.search-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300;
  max-height: 380px; overflow-y: auto;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(15,23,42,0.18);
}

/* What the query was understood to mean, shown above the suggestions —
   more reassuring than the suggestions themselves, because it proves
   "under 5 lac" registered as a budget. */
.suggest-parsed {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.suggest-chip {
  background: var(--accent-light); color: var(--accent);
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
}

.suggest-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: none; background: none; cursor: pointer;
  text-align: left; font-family: inherit; font-size: 13.5px; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover, .suggest-item.is-active { background: var(--accent-light); }
.suggest-item i { color: var(--text-light); font-size: 12px; flex-shrink: 0; width: 14px; }
.suggest-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-item small { color: var(--text-muted); font-size: 11.5px; flex-shrink: 0; }

/* Interpretation shown above the results */
.search-understood { margin: 0 16px 12px; }
.understood-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.understood-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.understood-chip {
  background: var(--accent); color: #fff;
  padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
}
.understood-clear {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700; text-decoration: underline;
}
.understood-relaxed {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 10px;
  background: var(--gold-light); color: #7A5B0C;
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.55;
}

/* Category-specific fields on the sell form */
.sell-attrs { margin: 4px 0 8px; }
.sell-attrs:empty { display: none; }
.sell-attrs-head { margin-bottom: 10px; }
.sell-attrs-head strong { display: block; font-size: 14px; color: var(--text); }
.sell-attrs-head small { font-size: 11.5px; color: var(--text-muted); }
.sell-attrs-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }

@media (min-width: 600px) {
  .sell-attrs-grid { grid-template-columns: 1fr 1fr; }
  .search-understood { margin-left: 24px; margin-right: 24px; }
}