/* ── Fonts ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

/* ── Brand Tokens ───────────────────────────────────────────────── */
:root {
  /* Canvas */
  --bg:    #FDFAF7;
  --bg2:   #FAF6F0;
  --bg3:   #F5EDE4;
  --bg4:   #EDE0D4;
  --bg5:   #DFD0C0;

  /* Nude Pink — brand accent, markers, tags */
  --nude:  #C8927A;
  --nude2: #D4A898;
  --nude3: #EDD8CC;
  --nudel: #FBF0EB;

  /* Champagne Gold — CTAs, accents, prices */
  --gold:  #C9A96E;
  --gold2: #B8923A;
  --goldl: #FDF6E4;
  --goldm: #E8D5A0;
  --goldd: #8C6A28;

  /* Deep Burgundy — PRIMARY CTAs only (Add to cart, Login, CTA buttons) */
  --burg:  #6b1c2e;
  --burg2: #8a2438;

  /* Dark Wine — header + sidebar bg ONLY */
  --burg3: #4d1220;

  /* Soft tints */
  --burl:  #F9EDEF;
  --burm:  #E8C4CB;

  /* Text */
  --tx:    #1A0A0E;
  --tx2:   #4A2830;
  --tx3:   #8A6868;
  --tx4:   #C0A0A0;

  /* Semantic */
  --gr:  #1A5C36; --grb: #D4F0E0;
  --re:  #8C1A1A; --reb: #FFE8E8;
  --am:  #7A4800; --amb: #FFF0D0;

  /* Shadows — warm tinted */
  --sh:   0 1px 3px rgba(74,40,48,.05), 0 4px 16px rgba(74,40,48,.04);
  --sh2:  0 6px 28px rgba(74,40,48,.10), 0 2px 8px rgba(74,40,48,.06);
  --sh3:  0 16px 56px rgba(74,40,48,.14);

  /* Radii */
  --r:   10px;
  --rs:  6px;
  --rl:  18px;

  /* Fonts */
  --serif: 'Cormorant Garamond', 'Georgia', serif;
  --font:  'Cairo', sans-serif;
}

/* Dark mode */
.dark {
  --bg:#160808; --bg2:#1E0C0C; --bg3:#281214; --bg4:#321820; --bg5:#3E2028;
  --tx:#F5E8E8; --tx2:#C8A0A0; --tx3:#906868; --tx4:#604040;
  --sh:0 1px 4px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.2);
  --sh2:0 8px 32px rgba(0,0,0,.4);
  --nudel:#280C10; --goldl:#201408;
}

/* ── Base ───────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--tx);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
a { color:inherit; text-decoration:none }
button,input,textarea,select { font-family:var(--font) }
img { display:block; max-width:100% }
::-webkit-scrollbar { width:4px; height:4px }
::-webkit-scrollbar-thumb { background:var(--bg5); border-radius:2px }

/* ── Shell ──────────────────────────────────────────────────────── */
.app-root { min-height:100dvh; display:flex; flex-direction:column }
.main-content { flex:1; padding-top:60px; padding-bottom:66px }
@media(min-width:768px){ .main-content{ padding-bottom:0; padding-right:230px } }

/* ── HEADER ─────────────────────────────────────────────────────── */
.app-header {
  position:fixed; top:0; right:0; left:0; z-index:100;
  height:60px; display:flex; align-items:center; padding:0 1.1rem; gap:.5rem;
  background:var(--burg3);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* ── MOBILE NAV ─────────────────────────────────────────────────── */
.mob-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  height:66px; display:flex; align-items:stretch;
  background:var(--burg3);
  border-top:1px solid rgba(255,255,255,.08);
  padding-bottom:env(safe-area-inset-bottom);
}
.mob-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; text-decoration:none;
  font-size:.58rem; font-weight:700; color:rgba(255,255,255,.38);
  transition:color .15s; font-family:var(--font);
}
.mob-item:hover,.mob-on { color:var(--goldm) !important }
.mob-home {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  text-decoration:none; padding-bottom:3px;
}
.mob-home-ring {
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--nude));
  display:flex; align-items:center; justify-content:center;
  position:relative; top:-9px;
  box-shadow:0 4px 20px rgba(201,169,110,.45);
  border:3px solid var(--burg3); transition:transform .15s;
}
.mob-home:hover .mob-home-ring,
.mob-home.router-link-active .mob-home-ring { transform:scale(1.07) }
.mob-home-lbl {
  font-size:.58rem; font-weight:800; color:var(--goldm);
  position:relative; top:-7px; font-family:var(--font);
}
@media(min-width:768px){ .mob-nav{ display:none !important } }

/* ── DESKTOP SIDEBAR ────────────────────────────────────────────── */
.desk-nav {
  position:fixed; top:60px; right:0; bottom:0; z-index:90;
  width:230px; background:var(--burg3);
  border-left:1px solid rgba(255,255,255,.06);
  padding:.65rem .5rem; display:none; flex-direction:column;
  gap:.12rem; overflow-y:auto;
}
.desk-nav-logo { padding:.3rem .65rem .85rem; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:.4rem }
.desk-item {
  display:flex; align-items:center; gap:.55rem; padding:.52rem .78rem;
  border-radius:var(--rs); font-size:.82rem; font-weight:600;
  color:rgba(255,255,255,.42); transition:all .14s; text-decoration:none;
}
.desk-item:hover { background:rgba(255,255,255,.08); color:rgba(255,255,255,.88) }
.desk-on { background:linear-gradient(135deg,var(--gold),var(--nude)) !important; color:#fff !important; font-weight:700 !important }
@media(min-width:768px){ .desk-nav{ display:flex !important } }

/* ── BUTTONS ────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  padding:.52rem 1.3rem; border-radius:var(--rs);
  font-family:var(--font); font-weight:700; font-size:.85rem;
  cursor:pointer; border:1.5px solid transparent;
  transition:all .18s; white-space:nowrap; text-decoration:none;
}
/* ★ Primary CTA = Burgundy */
.btn-primary {
  background:var(--burg); color:#fff; border-color:var(--burg);
  box-shadow:0 3px 12px rgba(107,28,46,.22);
}
.btn-primary:hover { background:var(--burg2); border-color:var(--burg2); transform:translateY(-1px); box-shadow:0 5px 18px rgba(107,28,46,.32) }

/* Outline = nude/burgundy border */
.btn-outline { background:transparent; border-color:var(--burg); color:var(--burg) }
.btn-outline:hover { background:var(--burl) }

/* Gold CTA */
.btn-gold {
  background:var(--gold); color:#fff; border-color:var(--gold);
  box-shadow:0 3px 12px rgba(201,169,110,.28);
}
.btn-gold:hover { background:var(--gold2); transform:translateY(-1px); box-shadow:0 5px 18px rgba(201,169,110,.38) }

/* Ghost */
.btn-ghost { background:var(--bg3); color:var(--tx2); border-color:var(--bg4) }
.btn-ghost:hover { background:var(--bg4) }

.btn-danger { background:var(--re); color:#fff; border-color:var(--re) }
.btn-nude { background:var(--nudel); color:var(--burg); border-color:var(--nude3) }
.btn-nude:hover { background:var(--nude3) }

.btn-sm  { padding:.28rem .75rem; font-size:.77rem }
.btn-lg  { padding:.62rem 1.65rem; font-size:.94rem }
.btn-xl  { padding:.75rem 2rem; font-size:1rem }
.btn:disabled { opacity:.5; cursor:not-allowed }

/* ── INPUTS ─────────────────────────────────────────────────────── */
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=search],textarea,select {
  width:100%; padding:.56rem .9rem; border-radius:var(--rs);
  border:1.5px solid var(--bg4); background:#fff; color:var(--tx);
  font-size:.88rem; transition:all .16s; direction:rtl;
}
input:focus,textarea:focus,select:focus {
  outline:none; border-color:var(--nude);
  box-shadow:0 0 0 3px rgba(200,146,122,.12);
}
label { font-size:.78rem; font-weight:700; color:var(--tx2); display:block; margin-bottom:.3rem }
.input-group { display:flex; flex-direction:column; gap:.3rem }

/* ── CARDS ──────────────────────────────────────────────────────── */
.card { background:#fff; border:1px solid var(--bg4); border-radius:var(--r); box-shadow:var(--sh); overflow:hidden }
.card-pad { padding:1.1rem 1.3rem }

/* ── PRODUCT CARD ───────────────────────────────────────────────── */
.product-card {
  background:var(--bg2); border-radius:var(--r);
  box-shadow:var(--sh); overflow:hidden;
  transition:transform .2s,box-shadow .2s; cursor:pointer;
  border:1px solid transparent;
}
.product-card:hover { transform:translateY(-5px); box-shadow:var(--sh2); border-color:var(--nude3) }
.product-card-img-wrap { background:var(--bg2); position:relative; overflow:hidden }
.product-card-img-wrap img { width:100%; aspect-ratio:1; object-fit:cover; transition:transform .4s }
.product-card:hover .product-card-img-wrap img { transform:scale(1.04) }
.product-card-body { padding:.9rem 1rem 1.1rem; background:#fff }

.price-tag { display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; margin-top:.35rem }
.price-main { font-size:1.05rem; font-weight:800; color:var(--gold2) }
.price-og { font-size:.78rem; color:var(--tx3); text-decoration:line-through }
.badge-sale {
  background:linear-gradient(135deg,var(--burg),var(--burg2));
  color:#fff; font-size:.62rem; font-weight:800;
  padding:.14rem .44rem; border-radius:30px;
}
.badge-new {
  background:var(--goldl); color:var(--goldd);
  border:1px solid var(--goldm); font-size:.62rem;
  font-weight:700; padding:.14rem .44rem; border-radius:30px;
}
.stars { color:var(--gold); font-size:.82rem }

/* ── SECTION TITLES ─────────────────────────────────────────────── */
.section { padding:1.5rem 1rem; max-width:980px; margin:0 auto }
.sec-eyebrow {
  font-family:var(--font); font-size:.7rem; font-weight:700;
  color:var(--nude); letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:.35rem;
}
.sec-title {
  font-family:var(--serif); font-size:clamp(1.5rem,3.5vw,2.2rem);
  font-weight:500; color:var(--tx); line-height:1.2;
}
.sec-title em { font-style:italic; color:var(--gold) }
.sec-rule {
  width:40px; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--nude));
  border-radius:1px; margin:.65rem 0;
}
.section-title {
  font-size:.92rem; font-weight:800; color:var(--tx);
  margin-bottom:.88rem; display:flex; align-items:center; gap:.4rem;
}
.section-title::before {
  content:''; display:block; width:3px; height:14px;
  background:linear-gradient(to bottom,var(--gold),var(--nude));
  border-radius:2px; flex-shrink:0;
}

/* ── TRUST STRIP ────────────────────────────────────────────────── */
.trust-strip {
  background:var(--bg3); border-top:1px solid var(--bg4); border-bottom:1px solid var(--bg4);
  padding:.7rem 1rem; display:flex; gap:1.5rem;
  overflow-x:auto; white-space:nowrap; justify-content:center;
  font-size:.77rem; font-weight:600; color:var(--tx2); scrollbar-width:none;
}
.trust-strip::-webkit-scrollbar { display:none }
.trust-item { display:flex; align-items:center; gap:.35rem }

/* ── FEATURES BAND (dark burgundy) ─────────────────────────────── */
.feat-band {
  background:var(--burg3);
  padding:1.5rem 1rem;
}
.feat-band-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:1rem;
  max-width:900px; margin:0 auto;
}
@media(max-width:640px){ .feat-band-grid{ grid-template-columns:repeat(3,1fr); gap:.85rem } }
.feat-item { text-align:center; color:white }
.feat-icon { font-size:1.4rem; color:var(--goldm); margin-bottom:.4rem }
.feat-label { font-size:.8rem; font-weight:700; color:var(--goldm); margin-bottom:.2rem }
.feat-desc { font-size:.7rem; color:rgba(255,255,255,.55); line-height:1.45 }

/* ── POST CARD ──────────────────────────────────────────────────── */
.post-card { background:#fff; border:1px solid var(--bg4); border-radius:var(--r); box-shadow:var(--sh); overflow:hidden; margin-bottom:.9rem }
.post-header { display:flex; align-items:center; gap:.7rem; padding:.9rem }
.post-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid var(--nude3) }
.post-author { font-weight:700; font-size:.88rem }
.post-time { font-size:.72rem; color:var(--tx3) }
.post-body { padding:0 .9rem .8rem; line-height:1.75; font-size:.88rem; color:var(--tx2) }
.post-actions { display:flex; gap:1rem; padding:.6rem .9rem; border-top:1px solid var(--bg3) }
.post-action-btn { display:flex; align-items:center; gap:.28rem; font-size:.82rem; color:var(--tx3); cursor:pointer; border:none; background:none; font-family:var(--font); font-weight:600; transition:color .14s; padding:0 }
.post-action-btn:hover,.post-action-btn.liked { color:var(--burg) }
.post-tag { font-size:.73rem; color:var(--nude); font-weight:700 }

/* ── DOCTOR CARD ────────────────────────────────────────────────── */
.doctor-card { background:#fff; border:1px solid var(--bg4); border-radius:var(--r); padding:1.1rem; box-shadow:var(--sh); display:flex; gap:.85rem; align-items:center }
.doctor-avatar { position:relative; flex-shrink:0 }
.doctor-avatar img { width:50px; height:50px; border-radius:50%; object-fit:cover; border:2px solid var(--nude3) }
.status-dot { position:absolute; bottom:2px; left:2px; width:11px; height:11px; border-radius:50%; border:2px solid #fff }
.status-dot.online { background:var(--gr) }
.status-dot.offline { background:var(--tx3) }

/* ── BADGES ─────────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:.16rem .52rem; border-radius:30px; font-size:.67rem; font-weight:700; white-space:nowrap }
.badge-doctor { background:var(--burl); color:var(--burg); border:1px solid var(--burm) }
.badge-gold { background:var(--goldl); color:var(--goldd); border:1px solid var(--goldm) }
.badge-green { background:var(--grb); color:var(--gr) }

/* ── CHAT ───────────────────────────────────────────────────────── */
.chat-bubble { max-width:75%; padding:.56rem .92rem; border-radius:14px; font-size:.88rem; line-height:1.55; word-break:break-word }
.bubble-out { background:var(--burg); color:#fff; border-bottom-right-radius:4px; align-self:flex-end }
.bubble-in { background:var(--bg2); color:var(--tx); border-bottom-left-radius:4px; align-self:flex-start; border:1px solid var(--bg4) }
.bubble-time { font-size:.64rem; opacity:.6; margin-top:.18rem }

/* ── OVERLAYS ───────────────────────────────────────────────────── */
.overlay { position:fixed; inset:0; z-index:200; background:rgba(20,6,10,.55); backdrop-filter:blur(4px) }
.drawer { position:fixed; bottom:0; left:0; right:0; z-index:201; background:var(--bg); border-radius:18px 18px 0 0; max-height:90dvh; overflow-y:auto; padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -8px 40px rgba(74,40,48,.12) }
.drawer-handle { width:32px; height:3px; background:var(--bg5); border-radius:2px; margin:.65rem auto }
@media(min-width:768px){ .drawer{ right:auto; width:400px; top:0; bottom:0; border-radius:0 } }
.modal-box { position:fixed; inset:1rem; z-index:201; background:var(--bg); border:1px solid var(--bg4); border-radius:var(--rl); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sh3) }
@media(min-width:768px){ .modal-box{ inset:8% 15% } }

/* ── ADMIN ──────────────────────────────────────────────────────── */
.kgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:.75rem; margin-bottom:1.35rem }
.kpi { background:#fff; border:1px solid var(--bg4); border-radius:var(--r); padding:1rem 1.2rem; box-shadow:var(--sh); position:relative; overflow:hidden }
.kpi::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--bg3) }
.kpi.ka::after { background:linear-gradient(90deg,var(--gold),var(--nude)) }
.kpi.kp::after { background:linear-gradient(90deg,var(--burg),var(--burg2)) }
.kpi.kg::after { background:linear-gradient(90deg,#16a34a,#166534) }
.kpi-l { font-size:.67rem; color:var(--tx3); text-transform:uppercase; letter-spacing:.07em; font-weight:700; margin-bottom:.32rem }
.kpi-v { font-size:1.45rem; font-weight:900; line-height:1 }
.kpi.ka .kpi-v { color:var(--gold) }
.kpi.kp .kpi-v { color:var(--burg) }
.kpi.kg .kpi-v { color:var(--gr) }
.kpi-s { font-size:.67rem; color:var(--tx3); margin-top:.24rem }

/* ── GRIDS ──────────────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:.9rem }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem }
@media(max-width:580px){ .grid-3,.grid-4{ grid-template-columns:1fr 1fr } }

/* ── LOADER ─────────────────────────────────────────────────────── */
.page-loader { display:flex; align-items:center; justify-content:center; min-height:55dvh }
.spinner { width:30px; height:30px; border:2.5px solid var(--bg4); border-top-color:var(--nude); border-radius:50%; animation:spin .7s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ── TOAST ──────────────────────────────────────────────────────── */
.toast-stack { position:fixed; bottom:calc(66px + .6rem); left:50%; transform:translateX(-50%); z-index:500; display:flex; flex-direction:column; gap:.4rem; align-items:center; pointer-events:none }
@media(min-width:768px){ .toast-stack{ bottom:1.25rem } }
.toast { background:var(--burg3); color:#fff; padding:.52rem 1.3rem; border-radius:var(--rs); font-size:.84rem; font-weight:700; box-shadow:var(--sh2); white-space:nowrap; animation:toast-in .2s ease }
.toast.error { background:var(--re) }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:translateY(0) } }

/* ── EMBED ──────────────────────────────────────────────────────── */
.embed-thumb { position:relative; cursor:pointer; border-radius:var(--rs); overflow:hidden; background:var(--bg3) }
.embed-thumb::after { content:'▶'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2rem; color:white; text-shadow:0 2px 12px rgba(0,0,0,.5) }
.embed-thumb img { width:100%; aspect-ratio:16/9; object-fit:cover; opacity:.75; display:block }

/* ── TRANSITIONS ────────────────────────────────────────────────── */
.fade-enter-active,.fade-leave-active { transition:opacity .16s }
.fade-enter-from,.fade-leave-to { opacity:0 }

/* ── UTILS ──────────────────────────────────────────────────────── */
.skeleton { background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--rs) }
@keyframes shimmer{ 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }