/* ============================================================
   بي3وو — Design System  (Light theme, dark text, gold accents)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Amiri:wght@400;700&family=Tajawal:wght@300;400;500;700&display=swap');

:root {
  /* Backgrounds — warm cream/white */
  --bg:        #FAF8F4;
  --surface:   #F3EFE8;
  --card:      #FFFFFF;
  --card-h:    #FBF9F5;

  /* Gold accent */
  --gold:      #B8882A;
  --gl:        #D4A438;
  --gd:        #7A5B1A;

  /* Text — dark */
  --pearl:     #1A1208;
  --text:      #3D3020;
  --muted:     #8C7A62;

  /* Borders */
  --bd:        rgba(184,136,42,0.14);
  --bd-h:      rgba(184,136,42,0.40);

  /* Status */
  --success:   #2E7D52;
  --danger:    #B03030;
  --info:      #2B5F8A;

  --r-sm:   5px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-2xl:  36px;
  --r-full: 9999px;

  --shadow-sm:   0 1px 4px rgba(60,40,10,.08);
  --shadow-md:   0 4px 20px rgba(60,40,10,.10);
  --shadow-lg:   0 12px 48px rgba(60,40,10,.13);
  --shadow-gold: 0 4px 20px rgba(184,136,42,.18);

  --font-ui: 'Tajawal', sans-serif;
  --font-ar: 'Amiri', serif;
  --font-en: 'Playfair Display', serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; direction: rtl; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}
h1,h2,h3,h4,h5,h6 { color: var(--pearl); font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); }
h3 { font-size: clamp(1rem, 2vw, 1.25rem); }
p  { color: var(--text); line-height: 1.7; }
a  { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gd); }

/* ── Keyframes ── */
@keyframes spin     { to { transform: rotate(360deg) } }
@keyframes fadeUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes fadeDown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:none} }
@keyframes shimmer  { 0%,100%{background-position:-200% center} 50%{background-position:200% center} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes float2   { 0%,100%{transform:translateY(0) rotate(-1.2deg)} 50%{transform:translateY(-8px) rotate(1.2deg)} }
@keyframes glowPulse {
  0%,100%{ box-shadow:0 2px 16px rgba(184,136,42,.22) }
  50%    { box-shadow:0 4px 32px rgba(184,136,42,.48) }
}
@keyframes orbFloat1 {
  0%,100%{transform:translate(0,0) scale(1)}
  33%    {transform:translate(28px,-44px) scale(1.06)}
  66%    {transform:translate(-20px,22px) scale(.96)}
}
@keyframes orbFloat2 {
  0%,100%{transform:translate(0,0) scale(1)}
  33%    {transform:translate(-38px,30px) scale(1.04)}
  66%    {transform:translate(22px,-15px) scale(.97)}
}
@keyframes sweepShine {
  0%  {inset-inline-start:-75%;opacity:0}
  10% {opacity:1} 90%{opacity:1}
  100%{inset-inline-start:125%;opacity:0}
}
@keyframes scaleIn  { from{transform:scale(.96);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes borderGlow {
  0%,100%{border-color:rgba(184,136,42,.14)}
  50%    {border-color:rgba(184,136,42,.38)}
}
@keyframes drawLine { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes countUp  { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
@keyframes pulse2   {
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(184,136,42,.28)}
  50%    {transform:scale(1.01);box-shadow:0 0 0 8px rgba(184,136,42,0)}
}
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes pop { 0%{transform:scale(1)} 50%{transform:scale(1.25)} 100%{transform:scale(1)} }
/* ── Stagger ── */
.stagger>*:nth-child(1){animation-delay:.04s}
.stagger>*:nth-child(2){animation-delay:.08s}
.stagger>*:nth-child(3){animation-delay:.12s}
.stagger>*:nth-child(4){animation-delay:.16s}
.stagger>*:nth-child(5){animation-delay:.20s}
.stagger>*:nth-child(6){animation-delay:.24s}
.stagger>*:nth-child(7){animation-delay:.28s}
.stagger>*:nth-child(8){animation-delay:.32s}
.stagger>*:nth-child(9){animation-delay:.36s}
.stagger>*:nth-child(10){animation-delay:.40s}
.stagger>*:nth-child(11){animation-delay:.44s}
.stagger>*:nth-child(12){animation-delay:.48s}
.stagger>*:nth-child(n+13){animation-delay:.50s}

/* ── Scroll reveal ── */
.rv { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease }
.rv.show { opacity:1; transform:none }

/* ── Atmospheric orbs (subtle on light) ── */
.orb { position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0 }
.orb1 { width:500px;height:500px;background:radial-gradient(circle,rgba(184,136,42,.07),transparent 70%);
        top:-6%;inset-inline-start:-3%;animation:orbFloat1 22s ease-in-out infinite }
.orb2 { width:420px;height:420px;background:radial-gradient(circle,rgba(180,120,80,.05),transparent 70%);
        bottom:-10%;inset-inline-end:-6%;animation:orbFloat2 26s ease-in-out infinite }

/* ── Gold dot grid bg ── */
.gold-grid {
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(184,136,42,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(184,136,42,.06) 1px,transparent 1px);
  background-size:60px 60px;
}

/* ── Shimmer gold text ── */
.shimmer-text {
  background:linear-gradient(90deg,var(--gold) 0%,var(--gl) 38%,#e8c060 50%,var(--gl) 62%,var(--gold) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 4.5s linear infinite;
}

/* ── Logo ── */
.logo-wrap { display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;flex-shrink:0 }
.logo-diamond { width:28px;height:28px;flex-shrink:0 }
.logo-text-en {
  font-family:var(--font-en);font-weight:700;font-size:1.2rem;
  letter-spacing:.12em;color:var(--pearl);line-height:1;
}
.logo-text-ar { font-family:var(--font-ar);font-weight:700;font-size:1.25rem;color:var(--gold);line-height:1 }

/* ── Navbar ── */
.navbar {
  position:fixed;top:0;width:100%;z-index:1000;
  background:rgba(250,248,244,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bd);
  height:66px;display:flex;align-items:center;
  padding:0 clamp(1rem,3.5vw,2.5rem);
  gap:1.5rem;
  animation:fadeDown .45s ease both;
  transition:background .3s,box-shadow .3s;
}
.navbar.scrolled { background:rgba(250,248,244,.98);box-shadow:var(--shadow-sm) }
.navbar-start { display:flex;align-items:center;gap:1rem }
.navbar-center { flex:1;max-width:420px;margin:0 auto }
.navbar-end { display:flex;align-items:center;gap:.55rem;margin-inline-start:auto }

.profile-btn {
  background: var(--surface);
  border: 1px solid rgba(60,48,32,0.1);
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem 0.2rem 0.2rem;
  transition: all 0.2s ease;
  outline: none;
}
.profile-btn:hover {
  background: rgba(184,136,42,0.06);
  border-color: var(--gold);
}

.nav-links { display:flex;align-items:center;gap:.1rem;list-style:none }
.nav-links a {
  font-size:.88rem;font-weight:600;color:var(--text);
  padding:.38rem .72rem;border-radius:var(--r-sm);transition:color .18s,background .18s;
}
.nav-links a:hover,.nav-links a.active { color:var(--gold);background:rgba(184,136,42,.08) }

/* ── Search ── */
.search-box {
  display:flex;background:var(--card);border:1px solid var(--bd);
  border-radius:50px;overflow:hidden;transition:border-color .2s,box-shadow .2s;
  box-shadow:var(--shadow-sm);
}
.search-box:focus-within { border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,136,42,.12) }
.search-box input {
  flex:1;border:none;background:transparent;padding:.5rem 1rem;
  font-family:var(--font-ui);font-size:.88rem;color:var(--pearl);direction:rtl;outline:none;
}
.search-box input::placeholder { color:var(--muted) }
.search-box button {
  background:var(--gold);border:none;padding:0 .95rem;
  cursor:pointer;color:#fff;font-size:.82rem;font-family:var(--font-ui);font-weight:700;
  display:flex;align-items:center;gap:.28rem;transition:background .18s;
}
.search-box button:hover { background:var(--gd) }

/* ── Buttons ── */
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:.38rem;
  font-family:var(--font-ui);font-weight:700;font-size:.88rem;
  padding:.62rem 1.45rem;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;
  transition:all .2s ease;text-decoration:none;white-space:nowrap;line-height:1;
  position:relative;overflow:hidden;
}
.btn-primary {
  background:linear-gradient(135deg,var(--gold),var(--gl));
  color:#fff;animation:glowPulse 3.5s ease-in-out infinite;
}
.btn-primary::before {
  content:'';position:absolute;top:0;inset-inline-start:-75%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-22deg);animation:sweepShine 3.2s ease-in-out infinite 1.2s;
}
.btn-primary:hover { transform:translateY(-1px) scale(1.015);color:#fff }
.btn-secondary { background:transparent;color:var(--gold);border-color:var(--bd-h) }
.btn-secondary:hover { background:rgba(184,136,42,.07);border-color:var(--gold);color:var(--gd) }
.btn-ghost { background:transparent;color:var(--text);border-color:transparent }
.btn-ghost:hover { background:var(--surface);color:var(--pearl) }
.btn-danger { background:var(--danger);color:#fff;border-color:var(--danger) }
.btn-success { background:var(--success);color:#fff;border-color:var(--success) }
.btn-sm { padding:.35rem .88rem;font-size:.78rem }
.btn-lg { padding:.8rem 1.9rem;font-size:.98rem }
.btn-xl { padding:.92rem 2.5rem;font-size:1.08rem }
.btn-block { width:100% }

/* ── Inputs ── */
.field { margin-bottom:1.15rem }
.field label {
  display:block;font-size:.8rem;font-weight:600;
  color:var(--text);margin-bottom:.38rem;letter-spacing:.015em;
}
.input,.textarea,.select {
  width:100%;font-family:var(--font-ui);font-size:.92rem;
  color:var(--pearl);background:var(--card);
  border:1px solid rgba(60,48,32,.18);border-radius:var(--r-md);
  padding:.78rem .92rem;transition:border-color .18s,box-shadow .18s;
  direction:auto;outline:none;appearance:none;
}
.input:focus,.textarea:focus,.select:focus {
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,136,42,.12);
}
.input::placeholder,.textarea::placeholder { color:var(--muted) }
.textarea { resize:vertical;min-height:104px }
.select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C7A62' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 12px center;cursor:pointer;
}
.select option { background:var(--card);color:var(--pearl) }
.input-error { border-color:var(--danger) !important }
.error-msg { color:var(--danger);font-size:.78rem;margin-top:.26rem }

/* ── Cards ── */
.card {
  background:var(--card);border:1px solid rgba(60,48,32,.10);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .25s ease,border-color .25s,box-shadow .25s;
}
.card:hover { transform:translateY(-3px);border-color:var(--bd-h);box-shadow:var(--shadow-md) }

/* ── Listing card ── */
.listing-card {
  background:var(--card);border:1px solid rgba(60,48,32,.08);
  border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform .25s ease,border-color .25s,box-shadow .25s;
  animation:fadeUp .45s ease both;
}
.listing-card:hover {
  transform:translateY(-5px);
  border-color:rgba(184,136,42,.32);
  box-shadow:0 14px 44px rgba(60,40,10,.14);
}
.listing-card .card-img {
  aspect-ratio:4/5;overflow:hidden;position:relative;background:var(--surface);
}
@media(max-width:480px) {
  .listing-card .card-img { aspect-ratio:1; }
}
.listing-card .card-img img { width:100%;height:100%;object-fit:cover;transition:transform .4s ease }
.listing-card:hover .card-img img { transform:scale(1.05) }
.listing-card .card-img .empty-img {
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;color:var(--muted);
}
.condition-badge {
  position:absolute;top:.55rem;inset-inline-end:.55rem;
  padding:.18rem .52rem;border-radius:20px;font-size:.67rem;
  font-weight:700;backdrop-filter:blur(4px);
}
.badge-new     { background:rgba(184,136,42,.12);color:var(--gd);border:1px solid rgba(184,136,42,.25) }
.badge-likenew { background:rgba(46,125,82,.10);color:#1a6040;border:1px solid rgba(46,125,82,.22) }
.badge-good    { background:rgba(43,95,138,.10);color:#1a4f7a;border:1px solid rgba(43,95,138,.22) }
.badge-fair    { background:rgba(176,48,48,.10);color:#8a2020;border:1px solid rgba(176,48,48,.22) }
.fav-btn {
  position:absolute;bottom:.72rem;left:.72rem;
  background:rgba(255,255,255,.85);border:1px solid rgba(60,48,32,.12);
  color:var(--muted);width:32px;height:32px;border-radius:50%;
  cursor:pointer;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;backdrop-filter:blur(4px);z-index:2;
}
.fav-btn:hover,.fav-btn.fav-active { color:#c43060;border-color:#c43060;background:rgba(196,48,96,.06) }
.fav-btn svg { width:13px;height:13px }
.fav-active svg { fill:#c43060;stroke:#c43060;animation:pop .3s ease forwards }
.listing-card .card-body {
  padding:.82rem .86rem .86rem;flex:1;display:flex;flex-direction:column;gap:.52rem;
  position:relative;min-height:122px;
}
.card-brand { font-size:.67rem;color:var(--gold);font-weight:700;letter-spacing:.07em;text-transform:uppercase }
.item-title {
  font-size:.88rem;font-weight:600;color:var(--pearl);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.36;text-decoration:none;
}
.item-title:hover { color:var(--gold) }
.card-meta-panel {
  margin-top:auto;
  min-height:42px;
  padding-inline-start:2.55rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:.12rem;
}
.item-price { font-size:.98rem;font-weight:800;color:var(--gold);line-height:1.15 }
.item-meta  { font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:.25rem;line-height:1.25 }
.listing-create-meta {
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}

/* ── Grid ── */
.container { width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem) }
.section    { padding:3.5rem 0 }
.listings-grid {
  display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;
}
.listings-grid > article {
  width:calc(50% - 0.75rem);
}
@media(min-width:580px) { .listings-grid > article { width:calc(33.333% - 1rem) } }
@media(min-width:850px) { .listings-grid > article { width:calc(25% - 1.125rem) } }
@media(min-width:1100px){ .listings-grid > article { width:calc(20% - 1.2rem) } }
.grid-2 { display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem }
.grid-3 { display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem }
.grid-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem }
@media(max-width:768px) { .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }
.grid-2-form { display:grid;grid-template-columns:repeat(2,1fr);gap:1rem }
@media(max-width:580px) { .grid-2-form{grid-template-columns:1fr} }

/* ── Category pills ── */
.category-strip {
  display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;padding-bottom:.32rem;scrollbar-width:none;
}
.category-strip::-webkit-scrollbar { display:none }
.cat-pill {
  flex:none;display:inline-flex;align-items:center;gap:.25rem;
  padding:.34rem .82rem;border-radius:50px;font-size:.8rem;font-weight:600;
  background:var(--card);border:1px solid rgba(60,48,32,.12);color:var(--text);
  cursor:pointer;transition:all .18s;text-decoration:none;white-space:nowrap;
  box-shadow:var(--shadow-sm);
}
.cat-pill:hover,.cat-pill.active {
  background:rgba(184,136,42,.09);border-color:var(--bd-h);color:var(--gold);
}

/* ── Category tile grid ── */
.cat-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem }
@media(max-width:580px) { .cat-grid{grid-template-columns:repeat(2,1fr)} }
.cat-tile {
  border-radius:var(--r-lg);background:var(--card);border:1px solid rgba(60,48,32,.08);
  padding:1.4rem .7rem;text-align:center;cursor:pointer;
  transition:all .25s ease;text-decoration:none;display:block;
  box-shadow:var(--shadow-sm);
}
.cat-tile:hover {
  background:rgba(184,136,42,.06);border-color:var(--bd-h);
  transform:translateY(-3px);box-shadow:var(--shadow-md);
}
.cat-tile-icon { font-size:1.9rem;margin-bottom:.42rem;line-height:1 }
.cat-tile-name { font-size:.78rem;font-weight:700;color:var(--pearl) }

/* ── Section heading ── */
.section-head {
  display:flex;align-items:center;justify-content:space-between;margin-bottom:1.3rem;
}
.section-head h2 {
  font-size:1.1rem;font-weight:700;color:var(--pearl);
  position:relative;padding-inline-end:1rem;
}
.section-head h2::after {
  content:'';position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);
  width:3px;height:15px;background:var(--gold);border-radius:3px;
}

/* ── Badge ── */
.badge {
  display:inline-flex;align-items:center;
  padding:.16rem .58rem;border-radius:50px;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;
}
.badge-success { background:rgba(46,125,82,.1);color:#1a6040 }
.badge-warn    { background:rgba(184,136,42,.1);color:var(--gd) }
.badge-error   { background:rgba(176,48,48,.1);color:#8a2020 }
.badge-neutral { background:var(--surface);color:var(--muted) }

/* ── Alert ── */
.alert {
  padding:.75rem 1rem;border-radius:var(--r-md);font-size:.88rem;
  font-weight:500;margin-bottom:.6rem;border-inline-start:3px solid;
}
.alert-success { background:rgba(46,125,82,.07);color:#1a6040;border-color:var(--success) }
.alert-error   { background:rgba(176,48,48,.07);color:#8a2020;border-color:var(--danger) }
.alert-info    { background:rgba(43,95,138,.07);color:#1a4f7a;border-color:var(--info) }
.alert-warn    { background:rgba(184,136,42,.07);color:var(--gd);border-color:var(--gold) }

/* ── Auth card ── */
.auth-wrap {
  min-height:calc(100vh - 66px);display:flex;
  align-items:center;justify-content:center;
  padding:2rem 1rem;
  background:linear-gradient(160deg,rgba(184,136,42,.04) 0%,transparent 50%),var(--bg);
}
.auth-card {
  width:100%;max-width:420px;
  background:var(--card);border:1px solid rgba(60,48,32,.1);
  border-radius:var(--r-xl);padding:2.3rem 1.8rem;
  box-shadow:var(--shadow-lg);animation:scaleIn .35s ease both;
}
.auth-logo  { text-align:center;margin-bottom:1.3rem }
.auth-title { text-align:center;font-size:1.4rem;font-weight:800;color:var(--pearl);margin-bottom:.28rem }
.auth-sub   { text-align:center;font-size:.85rem;color:var(--muted);margin-bottom:1.5rem }
.auth-divider {
  display:flex;align-items:center;gap:.6rem;
  margin:1.1rem 0;color:var(--muted);font-size:.78rem;
}
.auth-divider::before,.auth-divider::after { content:'';flex:1;height:1px;background:rgba(60,48,32,.12) }

/* ── Hero ── */
.hero {
  position:relative;overflow:hidden;
  min-height:100vh;display:flex;align-items:center;
  padding:7rem clamp(1rem,4vw,3rem) 5rem;
  background:linear-gradient(160deg,rgba(184,136,42,.04) 0%,var(--bg) 50%);
}
.hero-content { position:relative;z-index:1;max-width:600px }
.hero-badge {
  display:inline-flex;align-items:center;gap:.32rem;
  background:rgba(184,136,42,.09);color:var(--gd);
  border:1px solid var(--bd-h);border-radius:50px;
  padding:.28rem .85rem;font-size:.76rem;font-weight:700;
  margin-bottom:1.3rem;letter-spacing:.04em;animation:fadeUp .5s ease both;
}
.hero h1 {
  font-family:var(--font-ar);font-size:clamp(2.8rem,7vw,5rem);
  font-weight:700;color:var(--pearl);line-height:1.08;
  margin-bottom:1.1rem;animation:fadeUp .6s ease .1s both;
}
.hero h1 span { display:block }
.hero p {
  font-size:clamp(.94rem,2vw,1.1rem);color:var(--text);
  max-width:430px;margin-bottom:2rem;animation:fadeUp .6s ease .2s both;
}
.hero-actions { display:flex;gap:.8rem;flex-wrap:wrap;animation:fadeUp .6s ease .3s both }
.hero-floating {
  position:absolute;inset-inline-end:4%;top:50%;transform:translateY(-50%);
  display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;
  z-index:1;
}
@media(max-width:860px) { .hero-floating{display:none} }
.float-card {
  width:148px;background:var(--card);border:1px solid rgba(60,48,32,.1);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);
}
.float-card:nth-child(1){animation:float  5.2s ease-in-out infinite}
.float-card:nth-child(2){animation:float2 6.1s ease-in-out infinite}
.float-card:nth-child(3){animation:float  7s ease-in-out infinite 1s}
.float-card:nth-child(4){animation:float2 5.7s ease-in-out infinite .5s}
.float-card-img  { aspect-ratio:1;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:2.2rem }
.float-card-body { padding:.45rem .55rem }
.float-card-price{ font-size:.8rem;font-weight:700;color:var(--gold) }
.float-card-loc  { font-size:.66rem;color:var(--muted) }

/* ── Stats strip ── */
.stats-strip {
  background:var(--card);border-top:1px solid rgba(60,48,32,.08);
  border-bottom:1px solid rgba(60,48,32,.08);display:flex;box-shadow:var(--shadow-sm);
}
.stat-item {
  flex:1;text-align:center;padding:1.3rem .5rem;
  border-inline-start:1px solid rgba(60,48,32,.08);
}
.stat-item:first-child { border-inline-start:none }
.stat-num { font-size:1.6rem;font-weight:900;color:var(--gold);font-family:var(--font-en);animation:countUp .6s ease both }
.stat-lbl { font-size:.72rem;color:var(--muted);font-weight:500;margin-top:.12rem }

/* ── Marquee ── */
.marquee-band {
  overflow:hidden;background:var(--surface);
  border-top:1px solid rgba(60,48,32,.08);border-bottom:1px solid rgba(60,48,32,.08);padding:.7rem 0;
}
.marquee-track {
  display:flex;gap:2rem;width:max-content;
  animation:marqueeScroll 28s linear infinite;white-space:nowrap;
}
.marquee-track span { color:var(--muted);font-size:.8rem;font-weight:600 }
.marquee-dot { color:var(--gold) !important }

/* ── Steps ── */
.steps { display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;position:relative }
@media(max-width:660px) { .steps{grid-template-columns:1fr} }
.steps::before {
  content:'';position:absolute;top:2.3rem;inset-inline-start:15%;inset-inline-end:15%;
  height:1px;background:linear-gradient(90deg,transparent,var(--bd-h),transparent);
  transform-origin:start;animation:drawLine 1s ease .5s both;
}
@media(max-width:660px) { .steps::before{display:none} }
.step-card { text-align:center;padding:1.3rem .9rem;position:relative;z-index:1 }
.step-num {
  width:48px;height:48px;background:var(--bg);
  border:2px solid var(--gold);color:var(--gold);border-radius:50%;
  font-size:1.15rem;font-weight:900;display:flex;align-items:center;justify-content:center;
  margin:0 auto .85rem;box-shadow:0 0 0 6px rgba(184,136,42,.08);
}
.step-card h3 { font-size:.94rem;color:var(--pearl);margin-bottom:.32rem }
.step-card p  { font-size:.8rem;color:var(--muted) }

/* ── Footer ── */
.site-footer {
  background:var(--pearl);border-top:1px solid rgba(255,255,255,.08);
  padding:2.6rem clamp(1rem,4vw,3rem) 1.6rem;margin-top:4rem;
}
.site-footer, .site-footer a, .site-footer p { color:rgba(255,255,255,.7) }
.site-footer a:hover { color:#fff }
.footer-logo { font-family:var(--font-en);font-size:1.25rem;font-weight:700;letter-spacing:.13em;color:#fff;margin-inline-end:.3rem }
.footer-logo-ar { font-family:var(--font-ar);font-size:1.15rem;color:var(--gl) }
.footer-grid { display:flex;justify-content:space-between;flex-wrap:wrap;gap:2rem;margin-bottom:1.6rem }
@media(max-width:768px) { .footer-grid{justify-content:flex-start} }
.footer-col h4 { color:#fff;font-size:.85rem;font-weight:700;margin-bottom:.65rem }
.footer-col a  { display:block;font-size:.8rem;margin-bottom:.32rem;transition:color .18s }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.1);padding-top:1rem;
  font-size:.74rem;text-align:center;
}

/* ── Dropdown ── */
.dropdown { position:relative;display:inline-block }
.dropdown-menu {
  position:absolute;top:100%;inset-inline-end:0;
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r-md);
  box-shadow:var(--shadow-md);min-width:200px;padding:.5rem;margin-top:.5rem;
  z-index:50;display:flex;flex-direction:column;gap:.25rem;
}
.dropdown-item {
  display:flex;align-items:center;gap:.42rem;
  padding:.52rem .72rem;border-radius:var(--r-sm);
  font-size:.85rem;color:var(--text);cursor:pointer;
  transition:background .12s;text-decoration:none;
}
.dropdown-item:hover { background:var(--surface);color:var(--pearl) }
.dropdown-item.danger { color:var(--danger) }
.dropdown-item.danger:hover { background:rgba(176,48,48,.07) }
.dropdown-divider { height:1px;background:rgba(60,48,32,.08);margin:.32rem 0 }

/* ── Avatar ── */
.avatar {
  width:34px;height:34px;border-radius:50%;background:var(--gold);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;flex-shrink:0;overflow:hidden;
  border:2px solid rgba(184,136,42,.22);
}
.avatar img { width:100%;height:100%;object-fit:cover }
.avatar-lg  { width:72px;height:72px;font-size:1.3rem }
.avatar-xl  { width:100px;height:100px;font-size:1.8rem;border-width:3px }
.verified-ring { box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--gold);animation:pulse2 3s ease-in-out infinite }

/* ── Pagination ── */
.pagination { display:flex;justify-content:center;gap:.32rem;margin-top:1.8rem;flex-wrap:wrap }
.page-btn {
  width:34px;height:34px;border-radius:var(--r-sm);border:1px solid rgba(60,48,32,.14);
  background:var(--card);color:var(--text);font-family:var(--font-ui);
  font-size:.82rem;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:all .18s;box-shadow:var(--shadow-sm);
}
.page-btn:hover,.page-btn.active { background:var(--gold);border-color:var(--gold);color:#fff }

/* ── Toast ── */
.toast {
  position:fixed;bottom:1.6rem;inset-inline-start:50%;transform:translateX(-50%) translateY(16px);
  background:var(--pearl);color:#fff;
  padding:.72rem 1.4rem;border-radius:var(--r-md);font-family:var(--font-ui);
  opacity:0;transition:all .3s ease;z-index:9999;white-space:nowrap;
  box-shadow:var(--shadow-lg);
}
.toast.show { opacity:1;transform:translateX(-50%) translateY(0) }

/* ── Modal ── */
.modal-overlay {
  position:fixed;inset:0;background:rgba(26,18,8,.55);backdrop-filter:blur(6px);
  z-index:2000;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.modal-overlay.open { opacity:1;pointer-events:all }
.modal {
  background:var(--card);border:1px solid rgba(60,48,32,.1);border-radius:var(--r-xl);
  padding:1.75rem;width:min(480px,92vw);
  animation:scaleIn .28s ease both;box-shadow:var(--shadow-lg);
}
.modal-header {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.3rem;padding-bottom:.85rem;border-bottom:1px solid rgba(60,48,32,.08);
}
.modal-title { font-size:1.02rem;font-weight:700;color:var(--pearl) }
.modal-close {
  background:none;border:none;color:var(--muted);font-size:1.25rem;
  cursor:pointer;line-height:1;padding:.18rem;transition:color .18s;
}
.modal-close:hover { color:var(--pearl) }

/* ── Skeleton ── */
.skeleton {
  background:linear-gradient(90deg,var(--surface) 25%,var(--card-h) 50%,var(--surface) 75%);
  background-size:200% 100%;animation:shimmer 1.8s infinite;border-radius:var(--r-sm);
}

/* ── Stars ── */
.stars { display:inline-flex;gap:.1rem }
.star { color:rgba(60,48,32,.18);font-size:.92rem }
.star.filled { color:var(--gold) }
.star-sm { font-size:.72rem }

/* ── Mobile bottom nav ── */
.mobile-nav {
  display:none;position:fixed;bottom:0;inset-inline:0;
  background:var(--card);border-top:1px solid rgba(60,48,32,.1);
  padding:.42rem 0 env(safe-area-inset-bottom);
  z-index:90;box-shadow:0 -2px 12px rgba(60,40,10,.08);
}
@media(max-width:768px) { .mobile-nav{display:flex} }
.mobile-nav-item {
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.16rem;
  padding:.36rem .15rem;text-decoration:none;color:var(--muted);
  font-size:.6rem;font-weight:600;transition:color .18s;
}
.mobile-nav-item.active,.mobile-nav-item:hover { color:var(--gold) }
.mobile-nav-item svg { width:20px;height:20px }
.mobile-nav-post { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center }
.mobile-nav-post-btn {
  width:46px;height:46px;background:linear-gradient(135deg,var(--gold),var(--gl));
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 12px rgba(184,136,42,.35);transition:transform .18s;
  animation:glowPulse 3.5s ease-in-out infinite;
}
.mobile-nav-post-btn:hover { transform:scale(1.06) }
.mobile-nav-post-btn svg { width:20px;height:20px;color:#fff }
@media(max-width:768px) { body{padding-bottom:66px} }

/* ── Photo upload ── */
.photo-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:.42rem }
@media(max-width:480px) { .photo-grid{grid-template-columns:repeat(4,1fr)} }
.photo-thumb {
  aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;
  position:relative;background:var(--surface);border:1px solid rgba(60,48,32,.1);
}
.photo-thumb img { width:100%;height:100%;object-fit:cover }
.remove-btn {
  position:absolute;top:3px;inset-inline-start:3px;
  width:19px;height:19px;background:rgba(26,18,8,.72);border:none;
  border-radius:50%;color:#fff;font-size:.7rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.photo-add {
  aspect-ratio:1;border-radius:var(--r-sm);
  border:2px dashed var(--bd-h);background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .18s,background .18s;gap:.2rem;
  width:100%;font-family:var(--font-ui);padding:0;
}
.photo-add:hover { border-color:var(--gold);background:rgba(184,136,42,.04) }
.photo-add svg { width:19px;height:19px;color:var(--muted) }
.photo-add span { font-size:.64rem;color:var(--muted);font-weight:600 }

/* ── Form sections ── */
.form-section {
  background:var(--card);border:1px solid rgba(60,48,32,.1);
  border-radius:var(--r-lg);padding:1.55rem;margin-bottom:1rem;
  box-shadow:var(--shadow-sm);animation:fadeUp .42s ease both;
}
.form-section-title {
  font-size:.94rem;font-weight:700;color:var(--pearl);
  margin-bottom:1.1rem;padding-bottom:.75rem;
  border-bottom:1px solid rgba(60,48,32,.08);
  display:flex;align-items:center;gap:.42rem;
}
.form-section-title svg { width:16px;height:16px;color:var(--gold) }

/* ── Order status badges ── */
.status-badge {
  display:inline-flex;align-items:center;gap:.28rem;
  padding:.22rem .65rem;border-radius:50px;font-size:.72rem;font-weight:700;
}
.status-pending   { background:rgba(184,136,42,.1);color:var(--gd) }
.status-confirmed { background:rgba(43,95,138,.1);color:#1a4f7a }
.status-shipped   { background:rgba(43,95,138,.14);color:#1a4f7a }
.status-delivered { background:rgba(46,125,82,.1);color:#1a6040 }
.status-completed { background:rgba(46,125,82,.14);color:#1a6040 }
.status-disputed  { background:rgba(176,48,48,.1);color:#8a2020 }
.status-cancelled { background:rgba(60,48,32,.08);color:var(--muted) }
.status-refunded  { background:rgba(176,48,48,.07);color:#8a2020 }

/* ── Chat bubble ── */
.chat-bubble {
  max-width:70%;padding:.62rem .88rem;border-radius:var(--r-lg);
  font-size:.9rem;line-height:1.5;
}
.bubble-mine  { background:var(--gold);color:#fff;border-radius:var(--r-lg) var(--r-sm) var(--r-sm) var(--r-lg);margin-inline-start:auto }
.bubble-other { background:var(--card);border:1px solid rgba(60,48,32,.1);color:var(--pearl);border-radius:var(--r-sm) var(--r-lg) var(--r-lg) var(--r-sm) }
.chat-meta { font-size:.66rem;color:var(--muted);margin-top:.18rem }

/* ── Detail page layout ── */
.detail-grid { display:grid;grid-template-columns:1fr 340px;gap:2rem;align-items:start }
@media(max-width:860px) { .detail-grid{grid-template-columns:1fr} }
.photo-carousel { position:relative;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;background:var(--surface) }
.photo-carousel img { width:100%;height:100%;object-fit:cover }
.carousel-thumb-strip { display:flex;gap:.4rem;margin-top:.55rem;overflow-x:auto;scrollbar-width:none }
.carousel-thumb-strip::-webkit-scrollbar { display:none }
.carousel-thumb {
  width:56px;height:56px;border-radius:var(--r-sm);overflow:hidden;flex-shrink:0;
  border:2px solid transparent;cursor:pointer;transition:border-color .18s;
}
.carousel-thumb.active { border-color:var(--gold) }
.carousel-thumb img { width:100%;height:100%;object-fit:cover }

/* ── Empty States ── */
.empty-state {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:4rem 1rem;
}
.empty-icon {
  width:80px;height:80px;background:var(--surface);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);margin-bottom:1.2rem;
  box-shadow:0 0 0 10px rgba(184,136,42,0.04);
}
.empty-icon svg { width:36px;height:36px;opacity:0.8 }
.empty-title { font-size:1.1rem;font-weight:700;color:var(--pearl);margin-bottom:0.4rem }
.empty-desc { font-size:0.85rem;color:var(--muted);max-width:300px;margin-bottom:1.5rem }