/* الشبكة نفسها كما هي */

/* بطاقة الصورة */
.espresso-card{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 6px 18px #00000012;
  border: 1px solid color-mix(in oklab, var(--text) 8%, transparent);
  cursor: pointer;
  isolation: isolate;
}

/* نجعل الحاوية تضمن نسبة ثابتة لثبات القياس، ونوسّط الصورة داخلها */
.espresso-card picture{
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;              /* ثبات الارتفاع عبر الأجهزة */
  padding: 8px;
}

.espresso-card img{
  display: block;
  max-width: 92%;
  max-height: 92%;
  height: auto;
  object-fit: contain;
  background: transparent;
}

/* قياسات متجاوبة للصورة حسب الجهاز */
@media (max-width: 1024px){ .espresso-card picture{ aspect-ratio: 4 / 3; padding: 8px; } }
@media (max-width: 560px){  .espresso-card picture{ aspect-ratio: 5 / 4; padding: 6px; } }

/* الوصف الصغير في الوسط — شفاف وضبابي وخط متجاوب */
.espresso-card .mini-overlay{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  padding: 8px 12px;
  border-radius: 12px;

  /* حجم الصندوق متناسق مع الصورة */
  max-width: min(78%, 420px);
  min-width: 44%;

  background: color-mix(in oklab, var(--card) 30%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text);
  text-align: center;

  /* خط متجاوب */
  font-size: clamp(.8rem, 1.8vw, .95rem);
  line-height: 1.45;

  box-shadow: 0 8px 24px #00000020;
  opacity: 0;
  pointer-events: none;
  transition: .18s;
}
.espresso-card.show .mini-overlay{ opacity: 1; pointer-events: auto; }

/* --- تحسين عرض الصورة لتتكيف مع الشاشات --- */
.card__img img{
  height: clamp(220px, 32vw, 320px);
  object-fit: contain;
}

/* --- الأوفرلاي: وسط الشاشة بخلفية شفافة وضبابية --- */
.overlay{
  display: none;                /* تبقى مخفية إلى أن تُفتح البطاقة */
  position: absolute; inset: 0;
  padding: 12px;
  background: color-mix(in oklab, var(--card) 22%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  align-items: center;          /* توسيط عمودي */
  justify-content: center;      /* توسيط أفقي */
}
.card.show .overlay{ display: flex; }

/* صندوق المحتوى داخل الأوفرلاي */
.overlay__inner{
  width: min(90%, 360px);       /* لا يتجاوز عرضًا معيّنًا */
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--card) 55%, transparent);
  box-shadow: 0 8px 24px #0000001a;
  text-align: start;
}

/* أحجام خط متجاوبة وواضحة للجوال والآيباد */
.overlay__inner h3{
  margin: 0 0 6px;
  font-weight: 900;
  color: var(--gold);
  font-size: clamp(1rem, 2.4vw, 1.15rem);
}

.overlay__inner p,
.overlay__inner div{
  margin: 0;
  font-size: clamp(.85rem, 1.9vw, .98rem);
  line-height: 1.5;
}

:root{
  --bg:#ffffff; --text:#232323; --muted:#6b6b6b;
  --gold:#fbdd4c; --pill:#111827; --card:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.06);
}
.theme-dark{
  --bg:#0f1115; --text:#f4f4f5; --muted:#a1a1aa;
  --pill:#1f2937; --card:#161a20; --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Cairo',system-ui,-apple-system,Segoe UI,Arial;
  background:var(--bg); color:var(--text); overflow-x:hidden
}
.container{width:min(1200px,100% - 24px); margin-inline:auto}
h2{margin:0 0 12px; font-size:1.25rem}

/* ===== نجوم + توببار ===== */
#stars{position:fixed; inset:0; z-index:-1; pointer-events:none; background:transparent}
.topbar{position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.2) blur(6px);
  background:color-mix(in oklab, var(--bg) 82%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--text) 8%, transparent)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.brand{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none}
.logo{width:42px; height:42px; object-fit:contain; background:transparent}
.brand__en{font-weight:900; letter-spacing:.5px}
.brand__ar{font-size:.95rem; color:var(--muted)}

.switch{--h:22px; position:relative; display:inline-flex; align-items:center; gap:8px}
.switch input{display:none}
.switch span{width:50px; height:var(--h); border-radius:999px; background:#d1d5db; position:relative; display:inline-block; transition:.25s}
.switch span:before{content:""; position:absolute; inset:2px auto 2px 2px; width:calc(var(--h) - 4px); height:calc(var(--h) - 4px); background:#fff; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:.25s}
.switch input:checked + span{background:#111827}
.switch input:checked + span:before{transform:translateX(28px)}

/* ===== تبويبات ===== */
.tabs{display:flex; gap:8px; align-items:center; overflow:auto; padding:8px 0 12px}
.tabs a,.drop-btn{
  white-space:nowrap; padding:.55rem .9rem; border-radius:10px;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background:var(--card); color:var(--text); text-decoration:none; font-weight:700; box-shadow:var(--shadow)
}
.tabs a:hover,.drop-btn:hover{transform:translateY(-1px)}
.dropdown{position:relative}
.drop-btn{cursor:pointer}
.drop-menu{
  position:absolute; right:0; margin-top:6px; padding:6px; background:var(--card);
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius:12px; box-shadow:var(--shadow); display:none
}
.dropdown.open .drop-menu{display:block}
.drop-menu a{display:block; padding:.5rem .8rem; border-radius:8px; text-decoration:none; color:var(--text)}
.drop-menu a:hover{background:color-mix(in oklab, var(--text) 8%, transparent)}

/* ===== أقسام عامة ===== */
.view{padding:20px 0 60px}
.section{margin:28px 0}

/* ===== بطاقات المنتجات (موحّدة لمختارة + جديدنا) ===== */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media (min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}

.card{
  position:relative; overflow:hidden; border-radius:16px; background:var(--card);
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent); box-shadow:var(--shadow);
  transition:transform .15s ease;
}
.card:active{ transform:scale(.995) }
.card__img{aspect-ratio:1/1; display:grid; place-items:center; background:transparent}
.card__img img{
  width:92%; height:92%; object-fit:contain; display:block;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.10))
}
@media (max-width:480px){ .card__img img{ width:96%; height:96%; } }

.overlay{
  position:absolute; inset:0; display:none; align-items:flex-end;
  background:rgba(0,0,0,.30); backdrop-filter:blur(3px)
}
.card.show .overlay{ display:flex }
.card.show .card__img{ opacity:.85 } /* شفافية بسيطة مع بقاء الحجم كما هو */
.overlay__inner{ width:100%; padding:.8rem .9rem;
  background:linear-gradient(180deg, transparent, color-mix(in oklab, var(--bg) 85%, transparent) 35%, var(--bg))
}
.overlay__inner h3{margin:0 0 4px; font-size:1.08rem}
.overlay__inner p{margin:0; color:var(--muted); font-size:.95rem}

/* ===== “مختارة خصيصاً لك” — شريط أفقي يدوي بنفس شكل البطاقات ===== */
.xscroll{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  scroll-snap-type:x proximity; padding-bottom:4px;
}
.xscroll::-webkit-scrollbar{ display:none }
.xrow{ display:flex; gap:12px; }
.xrow .card{
  min-width: clamp(180px, 42vw, 260px); /* جوال كبير -> آيباد */
  scroll-snap-align:start;
}

/* ===== المقترح الذكي (نص فقط) ===== */

.smart-card {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1rem;
  line-height: 1.7;
  color: var(--text);
  margin-top: 1rem;
}
.smart-card .hint {
  color: var(--muted);
  font-size: .95rem;
  margin-top: 0.5rem;
}
.smart-card .budget-hint {
  margin-top: 0.75rem;
  font-size: .9rem;
  color: var(--gold);
}
.smart-pop {
  position: relative;
  background: var(--card);
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1rem;
  z-index: 1000;
  margin-top: 1rem;
}
.smart-pop__head {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}
.smart-pop__body {
  margin-top: 1rem;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip {
  background: var(--muted);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}
.chip.active {
  background: var(--gold);
  color: #000;
}
.budget-inline {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* ===== الخريطة ===== */
.map-frame{margin-top:18px}
.map-frame__head{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.brand-mini{font-size:1.1rem}
#map{
  height:340px; border-radius:14px;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent); overflow:hidden
}
.map-frame__foot{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-top:8px}
.meter{flex:1}
.meter strong{display:block; margin:2px 0 6px; font-size:.9rem}

/* ===== ماركرات ===== */
.leaflet-container .branch-marker{position:relative}
.branch-marker .emoji{font-size:24px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.branch-marker .pulse{position:absolute; inset:50% auto auto 50%; width:6px; height:6px;
  transform:translate(-50%,-50%); background:var(--gold); border-radius:999px;
  box-shadow:0 0 0 0 rgba(251,221,76,.65); animation:pulse 2s infinite
}
@keyframes pulse{to{box-shadow:0 0 0 18px rgba(251,221,76,0)}}
.route{filter:drop-shadow(0 0 6px rgba(251,221,76,.8))}
.leaflet-popup-content-wrapper{background:var(--card); color:var(--text); border-radius:10px}
.leaflet-popup-tip{background:var(--card)}

/* ===== فوتر (تم تصغيره وتوزينه للجوال) ===== */
.legal{
  border-top:1px solid #e6e6e6; background:var(--bg,#fafafa); padding:12px 0;
}
.theme-dark .legal{background:#0f0f0f; border-color:#2a2a2a}
.legal__row{
  display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap
}
.legal__row p{ margin:0; font-size:.9rem }
.legal .links{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0}
.link-ghost{ background:none; border:none; padding:0; color:inherit; font-weight:800; cursor:pointer; opacity:.9 }
.link-ghost[disabled]{opacity:.5; cursor:not-allowed}
.link-ghost:hover{ color:var(--gold) }

@media (max-width:480px){
  .legal{ padding:8px 0 10px }
  .legal__row{ gap:8px }
  .legal__row p{ font-size:.85rem }
  .link-ghost{ font-weight:700 }
}

/* ===== القلوب ===== */
.rating{ display:inline-flex; align-items:center; gap:6px }
.rating button{
  width:28px; height:28px; padding:0; margin:0 2px; border:none; background:transparent;
  cursor:pointer; opacity:.65; transition:transform .15s, opacity .15s, color .15s; color: color-mix(in oklab, var(--text) 50%, transparent);
  display:grid; place-items:center;
}
.rating button svg{ width:100%; height:100%; display:block }
.rating button.on{ opacity:1; transform:scale(1.05); color: var(--gold) }
.rating button:focus{ outline:2px solid var(--gold); outline-offset:2px }

/* ===== واجهة تلميح الملء ===== */
.fs-prompt{ position: fixed; inset:0; z-index: 70; display:none; place-items:center; background: rgba(0,0,0,.25); backdrop-filter: blur(1.5px) }
.fs-prompt[aria-visible="true"]{ display:grid }
.fs-prompt__card{ width:min(520px,92vw); background:var(--card); color:var(--text); border:1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.18); overflow:hidden; padding:14px }
.fs-prompt__card strong{ font-size:1.05rem; display:block; margin-bottom:6px }
.fs-prompt__card p{ margin:0 0 10px; color:var(--muted) }
.fs-prompt__actions{ display:flex; gap:8px; justify-content:flex-end }