/* ============================================================
   NEBA – global.css
   Variables · Reset · Utilities · Layout · Base Components
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* Palette */
  --night:       #08080f;
  --deep:        #0d0d1a;
  --surface:     #121220;
  --card:        #181828;
  --card-h:      #1e1e34;
  --border:      rgba(130,105,255,.14);
  --border-b:    rgba(130,105,255,.38);

  /* Accents */
  --violet:      #7c5cfc;
  --violet-g:    rgba(124,92,252,.28);
  --violet-gs:   rgba(124,92,252,.12);
  --gold:        #f5c842;
  --gold-g:      rgba(245,200,66,.22);
  --mint:        #3dffc0;
  --mint-g:      rgba(61,255,192,.18);
  --rose:        #ff5f96;
  --rose-g:      rgba(255,95,150,.18);
  --sky:         #50b8ff;
  --sky-g:       rgba(80,184,255,.18);

  /* Text */
  --t1: #eeeaff;
  --t2: #9994bb;
  --t3: #514d70;

  /* Gradients */
  --g-main:    linear-gradient(135deg,#7c5cfc 0%,#3dffc0 100%);
  --g-gold:    linear-gradient(135deg,#f5c842 0%,#ff5f96 100%);
  --g-sky:     linear-gradient(135deg,#50b8ff 0%,#7c5cfc 100%);
  --g-rose:    linear-gradient(135deg,#ff5f96 0%,#f5c842 100%);

  /* Shadows */
  --sh-card:   0 8px 36px rgba(0,0,0,.45);
  --sh-violet: 0 0 48px rgba(124,92,252,.22);
  --sh-gold:   0 0 40px rgba(245,200,66,.18);

  /* Radii */
  --r1: 6px;  --r2: 12px;  --r3: 18px;
  --r4: 24px; --r5: 32px;  --rf: 999px;

  /* Motion */
  --spring: cubic-bezier(.34,1.56,.64,1);
  --smooth: cubic-bezier(.4,0,.2,1);
  --tf: .18s; --tm: .35s; --ts: .6s;

  /* Font stacks */
  --fnt-ar: 'Tajawal', sans-serif;
  --fnt-en: 'Space Grotesk', sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--night);
  color: var(--t1);
  font-family: var(--fnt-ar);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.lang-en  { font-family: var(--fnt-en); direction: ltr; }
body.lang-fr  { font-family: var(--fnt-en); direction: ltr; }
body.lang-ar  { font-family: var(--fnt-ar); direction: rtl; }

/* scrollbar */
::-webkit-scrollbar        { width: 5px; }
::-webkit-scrollbar-track  { background: var(--deep); }
::-webkit-scrollbar-thumb  { background: var(--violet); border-radius: 3px; }
::selection                 { background: var(--violet-g); }

/* ── Ambient Orbs ──────────────────────────────────────────── */
.bg-orbs { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:.12; }
.orb-1 { width:560px;height:560px; background:var(--violet); top:-220px; left:-160px;   animation:orb-f 22s ease-in-out infinite; }
.orb-2 { width:420px;height:420px; background:var(--mint);   bottom:-160px;right:-120px; animation:orb-f 18s ease-in-out infinite -8s; }
.orb-3 { width:320px;height:320px; background:var(--gold);   top:45%;left:50%; transform:translate(-50%,-50%); animation:orb-f 25s ease-in-out infinite -14s; }
.orb-4 { width:200px;height:200px; background:var(--rose);   top:20%;right:15%; animation:orb-f 16s ease-in-out infinite -5s; }
@keyframes orb-f { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(28px,-28px) scale(1.08)} 66%{transform:translate(-18px,20px) scale(.94)} }

/* ── Typography ────────────────────────────────────────────── */
.grad-text      { background:var(--g-main); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grad-gold-text { background:var(--g-gold); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grad-sky-text  { background:var(--g-sky);  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 22px; border-radius:var(--rf); font-weight:600; font-size:.92rem;
  cursor:pointer; transition:all var(--tf) var(--smooth); border:none; outline:none;
  text-decoration:none; font-family:inherit; white-space:nowrap; user-select:none;
}
.btn-primary { background:var(--g-main); color:#fff; box-shadow:0 4px 20px var(--violet-g); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px var(--violet-g); }
.btn-primary:active { transform:translateY(0); }

.btn-gold { background:var(--g-gold); color:var(--night); font-weight:800; box-shadow:0 4px 20px var(--gold-g); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--gold-g); }

.btn-outline {
  background:transparent; color:var(--t1);
  border:1.5px solid var(--border-b);
}
.btn-outline:hover { background:var(--violet-gs); border-color:var(--violet); transform:translateY(-2px); }

.btn-ghost {
  background:transparent; color:var(--t2); border:none;
}
.btn-ghost:hover { color:var(--t1); background:var(--card-h); }

.btn:disabled { opacity:.45; pointer-events:none; }
.btn-sm  { padding:7px 16px; font-size:.82rem; }
.btn-lg  { padding:15px 32px; font-size:1.05rem; }
.btn-full{ width:100%; justify-content:center; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 11px; border-radius:var(--rf);
  font-size:.73rem; font-weight:700; letter-spacing:.3px;
}
.badge-violet { background:var(--violet-gs); color:var(--violet); border:1px solid rgba(124,92,252,.25); }
.badge-gold   { background:var(--gold-g);    color:var(--gold);   border:1px solid rgba(245,200,66,.3); }
.badge-mint   { background:var(--mint-g);    color:var(--mint);   border:1px solid rgba(61,255,192,.3); }
.badge-rose   { background:var(--rose-g);    color:var(--rose);   border:1px solid rgba(255,95,150,.3); }
.badge-sky    { background:var(--sky-g);     color:var(--sky);    border:1px solid rgba(80,184,255,.3); }

/* ── Inputs ─────────────────────────────────────────────────── */
.input {
  width:100%; padding:11px 15px;
  background:rgba(20,20,40,.85);
  border:1.5px solid var(--border);
  border-radius:var(--r2); color:var(--t1);
  font-family:inherit; font-size:.93rem;
  outline:none; transition:all var(--tf);
}
.input:focus   { border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-gs); }
.input::placeholder { color:var(--t3); }
textarea.input { resize:vertical; min-height:100px; }
select.input   {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%237c5cfc'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:38px; cursor:pointer;
}
body.lang-ar select.input { background-position:left 13px center; padding-right:15px; padding-left:38px; }

/* ── Glass Card ─────────────────────────────────────────────── */
.glass {
  background:rgba(18,18,32,.72);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border); border-radius:var(--r3);
}
.glass:hover { border-color:var(--border-b); }

/* ── Card ───────────────────────────────────────────────────── */
.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r3); overflow:hidden;
  transition:all var(--tm) var(--smooth);
}
.card:hover {
  border-color:var(--border-b); box-shadow:var(--sh-violet);
  transform:translateY(-4px);
}

/* ── Chips ──────────────────────────────────────────────────── */
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip {
  padding:6px 16px; border-radius:var(--rf);
  border:1.5px solid var(--border); background:var(--card);
  color:var(--t2); font-size:.84rem; cursor:pointer;
  transition:all var(--tf); font-family:inherit;
}
.chip:hover, .chip.active {
  background:var(--violet); border-color:var(--violet); color:#fff;
}

/* ── Tabs ───────────────────────────────────────────────────── */
.tabs {
  display:flex; gap:4px; background:var(--deep);
  padding:4px; border-radius:var(--rf);
}
.tab-btn {
  flex:1; padding:9px 18px; border-radius:var(--rf);
  border:none; background:transparent; color:var(--t2);
  cursor:pointer; font-family:inherit; font-weight:600;
  font-size:.88rem; transition:all var(--tf);
}
.tab-btn.active { background:var(--violet); color:#fff; box-shadow:0 2px 14px var(--violet-g); }

/* ── Avatar ─────────────────────────────────────────────────── */
.avatar {
  border-radius:50%; background:var(--g-main);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; flex-shrink:0;
}
.avatar-sm  { width:32px; height:32px; font-size:.78rem; }
.avatar-md  { width:42px; height:42px; font-size:.92rem; }
.avatar-lg  { width:68px; height:68px; font-size:1.6rem; }
.avatar-xl  { width:88px; height:88px; font-size:2rem; }

/* ── Form Group ─────────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.form-label { font-size:.88rem; font-weight:700; color:var(--t2); }
.form-hint  { font-size:.78rem; color:var(--t3); }
.form-error { font-size:.78rem; color:var(--rose); }

/* ── Upload Area ────────────────────────────────────────────── */
.upload-area {
  border:2px dashed var(--border); border-radius:var(--r3);
  padding:36px 20px; text-align:center; cursor:pointer;
  transition:all var(--tf);
}
.upload-area:hover, .upload-area.drag { border-color:var(--violet); background:var(--violet-gs); }
.upload-area .u-icon { font-size:2.4rem; margin-bottom:10px; opacity:.55; }
.upload-area p { color:var(--t2); font-size:.9rem; }
.upload-area small { color:var(--t3); font-size:.78rem; }

/* ── Step Wizard ────────────────────────────────────────────── */
.steps { display:flex; align-items:flex-start; gap:0; margin-bottom:28px; }
.step  { display:flex; align-items:flex-start; flex:1; }
.step-wrap { display:flex; flex-direction:column; align-items:center; gap:5px; }
.step-circle {
  width:34px; height:34px; border-radius:50%;
  border:2px solid var(--border); background:var(--card);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.84rem; color:var(--t3); flex-shrink:0;
  transition:all var(--tm);
}
.step.active .step-circle { border-color:var(--violet); background:var(--violet); color:#fff; box-shadow:0 0 18px var(--violet-g); }
.step.done   .step-circle { border-color:var(--mint);   background:var(--mint);   color:var(--night); }
.step-line { flex:1; height:2px; background:var(--border); margin-top:17px; transition:background var(--tm); }
.step.done .step-line { background:var(--mint); }
.step-label { font-size:.7rem; color:var(--t3); text-align:center; white-space:nowrap; }
.step.active .step-label { color:var(--violet); }
.step.done   .step-label { color:var(--mint); }

/* ── Search Bar ─────────────────────────────────────────────── */
.search-bar {
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1.5px solid var(--border);
  border-radius:var(--rf); padding:10px 16px;
  transition:all var(--tf);
}
.search-bar:focus-within { border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-gs); }
.search-bar input {
  background:transparent; border:none; outline:none; flex:1;
  color:var(--t1); font-family:inherit; font-size:.93rem;
}
.search-bar input::placeholder { color:var(--t3); }

/* ── Nav ────────────────────────────────────────────────────── */
.top-nav {
  position:sticky; top:0; z-index:200;
  background:rgba(8,8,15,.88); backdrop-filter:blur(22px);
  border-bottom:1px solid var(--border);
  padding:0 24px; height:62px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.nav-logo {
  font-size:1.65rem; font-weight:900; letter-spacing:-1.5px; cursor:pointer;
  background:var(--g-main); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 0 16px rgba(124,92,252,.4));
  flex-shrink:0;
}
.nav-center { display:flex; gap:6px; align-items:center; }
.nav-actions { display:flex; align-items:center; gap:10px; }

/* ── Toast ──────────────────────────────────────────────────── */
.toast-container { position:fixed; bottom:22px; right:22px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
body.lang-ar .toast-container { right:auto; left:22px; }
.toast {
  padding:13px 18px; background:var(--card-h);
  border:1px solid var(--border-b); border-radius:var(--r2);
  box-shadow:var(--sh-card); display:flex; align-items:center;
  gap:11px; min-width:260px; max-width:360px;
  animation:toast-in .38s var(--spring);
  font-size:.9rem; color:var(--t1);
}
body.lang-ar .toast { animation:toast-in-ar .38s var(--spring); }
.toast.success { border-left:3px solid var(--mint); }
.toast.error   { border-left:3px solid var(--rose); }
.toast.info    { border-left:3px solid var(--violet); }
@keyframes toast-in    { from{transform:translateX(80px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes toast-in-ar { from{transform:translateX(-80px);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(8,8,15,.88);
  backdrop-filter:blur(10px); z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:20px; animation:fade-in .28s ease;
}
.modal {
  width:100%; max-width:600px; max-height:90vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border-b);
  border-radius:var(--r5); box-shadow:var(--sh-violet);
  animation:modal-up .38s var(--spring);
}
.modal-hd { padding:24px 28px 0; display:flex; align-items:center; justify-content:space-between; }
.modal-bd { padding:22px 28px; }
.modal-ft { padding:0 28px 24px; display:flex; gap:10px; justify-content:flex-end; }
.modal-close {
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  background:transparent; color:var(--t2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; transition:all var(--tf);
}
.modal-close:hover { background:var(--rose-g); border-color:var(--rose); color:var(--rose); }
@keyframes fade-in  { from{opacity:0} to{opacity:1} }
@keyframes modal-up { from{transform:scale(.92) translateY(18px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }

/* ── Skeleton ────────────────────────────────────────────────── */
.skeleton {
  background:linear-gradient(90deg,var(--card) 0%,var(--card-h) 50%,var(--card) 100%);
  background-size:200% 100%; animation:skel 1.5s infinite; border-radius:var(--r1);
}
@keyframes skel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Loader ──────────────────────────────────────────────────── */
.loader {
  width:38px; height:38px; border:3px solid var(--border);
  border-top-color:var(--violet); border-radius:50%;
  animation:spin .75s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Gallery ─────────────────────────────────────────────────── */
.gallery-wrap {
  position:relative; overflow:hidden;
  border-radius:var(--r3); background:var(--deep);
}
.gallery-wrap img { width:100%; height:100%; object-fit:cover; transition:opacity .4s; }
.gallery-dots {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:2;
}
.gdot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.4); cursor:pointer; transition:all var(--tf);
}
.gdot.active { background:#fff; width:18px; border-radius:3px; }

/* ── Price Tag ───────────────────────────────────────────────── */
.price { font-size:1.2rem; font-weight:900; color:var(--gold); }
.price small { font-size:.78rem; font-weight:400; color:var(--t3); }

/* ── Status Dot ──────────────────────────────────────────────── */
.sdot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.sdot-on  { background:var(--mint); box-shadow:0 0 8px var(--mint); }
.sdot-off { background:var(--t3); }
.sdot-pend{ background:var(--gold); }

/* ── Divider ─────────────────────────────────────────────────── */
.divider { height:1px; background:var(--border); margin:22px 0; }

/* ── Empty State ─────────────────────────────────────────────── */
.empty-state { text-align:center; padding:60px 20px; }
.empty-state .ei { font-size:4rem; margin-bottom:16px; opacity:.55; }
.empty-state h3  { font-size:1.25rem; color:var(--t2); margin-bottom:8px; }
.empty-state p   { color:var(--t3); font-size:.9rem; }

/* ── Grids ───────────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media(max-width:900px)  { .grid-4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:768px)  { .grid-3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px)  { .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

/* ── Utilities ───────────────────────────────────────────────── */
.hidden   { display:none !important; }
.flex     { display:flex; }
.flex-col { flex-direction:column; }
.items-c  { align-items:center; }
.items-s  { align-items:flex-start; }
.justify-c{ justify-content:center; }
.justify-b{ justify-content:space-between; }
.gap-xs   { gap:6px; }
.gap-sm   { gap:10px; }
.gap-md   { gap:16px; }
.gap-lg   { gap:24px; }
.gap-xl   { gap:32px; }
.wrap     { flex-wrap:wrap; }
.w-full   { width:100%; }
.text-c   { text-align:center; }
.fw-7     { font-weight:700; }
.fw-9     { font-weight:900; }
.fs-sm    { font-size:.84rem; }
.fs-xs    { font-size:.74rem; }
.fs-lg    { font-size:1.1rem; }
.text-t2  { color:var(--t2); }
.text-t3  { color:var(--t3); }
.text-violet { color:var(--violet); }
.text-gold   { color:var(--gold); }
.text-mint   { color:var(--mint); }
.text-rose   { color:var(--rose); }
.mb-0 { margin-bottom:0; }
.mb-sm{ margin-bottom:8px; }
.mb-md{ margin-bottom:16px; }
.mb-lg{ margin-bottom:24px; }
.mb-xl{ margin-bottom:32px; }
.mt-sm{ margin-top:8px; }
.mt-md{ margin-top:16px; }
.mt-lg{ margin-top:24px; }
.p-md { padding:16px; }
.p-lg { padding:24px; }
.p-xl { padding:32px; }
.cursor-p { cursor:pointer; }
.rel { position:relative; }
.abs { position:absolute; }
.oh  { overflow:hidden; }
.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Responsive nav ──────────────────────────────────────────── */
.hamburger {
  display:none; background:transparent; border:1.5px solid var(--border-b);
  border-radius:var(--r1); padding:6px 10px; color:var(--t1); cursor:pointer;
  font-size:1.1rem;
}
@media(max-width:768px) {
  .hamburger { display:flex; align-items:center; }
  .nav-center { display:none; }
  .hide-mobile { display:none !important; }
}

/* ── Mobile drawer ───────────────────────────────────────────── */
.drawer {
  position:fixed; top:0; left:-100%; height:100vh; width:280px;
  background:var(--surface); border-right:1px solid var(--border-b);
  z-index:500; transition:left var(--tm) var(--smooth); overflow-y:auto; padding:24px 16px;
}
body.lang-ar .drawer { left:auto; right:-100%; border-right:none; border-left:1px solid var(--border-b); }
.drawer.open { left:0; }
body.lang-ar .drawer.open { left:auto; right:0; }
.drawer-backdrop {
  display:none; position:fixed; inset:0; background:rgba(8,8,15,.7);
  z-index:499; backdrop-filter:blur(4px);
}
.drawer-backdrop.open { display:block; }

/* ── Sidebar nav item ────────────────────────────────────────── */
.s-item {
  display:flex; align-items:center; gap:10px; padding:10px 13px;
  border-radius:var(--r2); color:var(--t2); cursor:pointer;
  transition:all var(--tf); font-size:.9rem; margin-bottom:3px;
  border:none; background:transparent; width:100%; font-family:inherit; text-align:inherit;
}
.s-item:hover  { background:var(--violet-gs); color:var(--t1); }
.s-item.active { background:var(--violet); color:#fff; box-shadow:0 2px 14px var(--violet-g); }
.s-section { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--t3); padding:14px 13px 7px; }

/* ── Ad banner ───────────────────────────────────────────────── */
.ad-banner {
  border-radius:var(--r3); overflow:hidden; cursor:pointer;
  position:relative; margin-bottom:20px;
}
.ad-banner img { width:100%; height:100%; object-fit:cover; display:block; }
.ad-label {
  position:absolute; top:8px; right:8px;
  background:rgba(0,0,0,.62); color:var(--t3);
  padding:2px 8px; border-radius:4px; font-size:.68rem;
}
body.lang-ar .ad-label { right:auto; left:8px; }

/* ── Range slider ────────────────────────────────────────────── */
input[type=range] {
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px;
  background:linear-gradient(to right,var(--violet) 0%,var(--violet) 50%,var(--border) 50%);
  border-radius:2px; outline:none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:18px; height:18px;
  border-radius:50%; background:var(--violet); cursor:pointer;
  box-shadow:0 0 10px var(--violet-g);
}

/* ── Notif badge ─────────────────────────────────────────────── */
.n-badge {
  position:absolute; top:-4px; right:-4px;
  width:17px; height:17px; border-radius:50%;
  background:var(--rose); font-size:.6rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  color:#fff; border:2px solid var(--night);
}

/* ── Cat card (radio pick) ───────────────────────────────────── */
.cat-card {
  padding:18px 12px; text-align:center; border-radius:var(--r3);
  cursor:pointer; transition:all var(--tf);
  border:1.5px solid var(--border); background:var(--card);
  user-select:none;
}
.cat-card:hover { border-color:var(--border-b); background:var(--card-h); }
.cat-card.selected { border-color:var(--violet); background:var(--violet-gs); }

/* ── Payment steps highlight ──────────────────────────────────── */
.pay-option {
  padding:18px 20px; border-radius:var(--r3); cursor:pointer;
  background:var(--card); border:2px solid var(--border);
  display:flex; align-items:center; gap:16px; transition:all var(--tf);
}
.pay-option:hover   { border-color:var(--border-b); }
.pay-option.selected{ border-color:var(--violet); background:var(--violet-gs); }

/* ── Section heading ─────────────────────────────────────────── */
.sec-title { font-size:1.75rem; font-weight:900; margin-bottom:6px; line-height:1.2; }
.sec-sub   { color:var(--t2); font-size:.96rem; margin-bottom:26px; }

/* ── Detail grid ─────────────────────────────────────────────── */
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
@media(max-width:768px) { .detail-grid { grid-template-columns:1fr; } }

/* ── Comment item ────────────────────────────────────────────── */
.comment-item { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }
.comment-item:last-child { border-bottom:none; }

/* ── User dropdown ───────────────────────────────────────────── */
.user-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--surface); border:1px solid var(--border-b);
  border-radius:var(--r2); min-width:190px;
  box-shadow:var(--sh-card); z-index:300; overflow:hidden;
  animation:modal-up .25s var(--spring);
}
body.lang-ar .user-dropdown { right:auto; left:0; }

/* ── Info row ────────────────────────────────────────────────── */
.info-row { display:flex; gap:12px; align-items:flex-start; }
.info-row .icon { font-size:1.15rem; flex-shrink:0; margin-top:2px; }
.info-row .label{ font-weight:700; font-size:.9rem; }
.info-row .value{ color:var(--t2); font-size:.88rem; margin-top:2px; }

/* ── Scroll hint ─────────────────────────────────────────────── */
@media(max-width:600px) {
  .scroll-x { overflow-x:auto; padding-bottom:6px; }
  .scroll-x .chips { flex-wrap:nowrap; }
}