/* ============================================
   متجر رقيم — النظام البصري الفاخر
   store.css — الأساس (مرحلة ١-أ)
   ============================================ */

/* ---------- الخطوط (ذاتية الاستضافة) ---------- */
@font-face{
  font-family:'Tajawal';font-style:normal;font-weight:300;font-display:swap;
  src:url('/store_files/fonts/tajawal-300.woff2') format('woff2');
}
@font-face{
  font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;
  src:url('/store_files/fonts/tajawal-400.woff2') format('woff2');
}
@font-face{
  font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;
  src:url('/store_files/fonts/tajawal-500.woff2') format('woff2');
}
@font-face{
  font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;
  src:url('/store_files/fonts/tajawal-700.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('/store_files/fonts/cormorant-600.woff2') format('woff2');
}

/* ---------- لوحة المتغيّرات الكاملة ----------
   ملاحظة: --brand و --brand-2 معرّفان أصلاً في :root داخل اللاياوت
   (من primary_color/secondary_color). لا نُعيد تعريفهما هنا حتى لا
   نكسر الـtopbar gradient. نضيف فقط متغيّرات النظام الفاخر فوقهما. */
:root{
  --ink:#171318;        /* الحبر الأساسي (نصوص) */
  --soft-ink:#3a353f;   /* حبر ثانوي */
  --muted:#A09BA6;      /* نص باهت / تفاصيل */
  --line:#F0EFF2;       /* خطوط فاصلة فاتحة */
  --line2:#E7E5EB;      /* خطوط فاصلة أغمق قليلاً */
  --photo:#F7F6F9;      /* خلفية صور المنتجات */
  --wa:#1FA463;         /* أخضر واتساب */
  --store-radius:14px;  /* انحناء موحّد */
}

/* ---------- خط الجسم الأساسي ----------
   نطبّق Tajawal على نطاق المتجر دون لمس body{font-family} في اللاياوت
   (الذي يطبع $s->font_family خاماً). نستهدف حاوية المتجر. */
.store-body, .store-body *:not(.font-en):not(.bi){
  /* Tenant font (via --store-font, injected from settings) wins; Tajawal is the
     default + Arabic fallback when the tenant hasn't chosen a font. */
  font-family: var(--store-font, 'Tajawal', 'Segoe UI', Tahoma, sans-serif);
}
/* الأكواد والنصوص اللاتينية التحريرية */
.font-en{
  font-family:'Cormorant Garamond', serif;
  letter-spacing:.5px;
}

/* ============================================
   مرحلة ١-ب-تحسين — بطاقة فاخرة منقّحة
   ============================================ */
.rq-card{ display:block; cursor:pointer; text-decoration:none; color:inherit; }

/* الصورة: نسبة 4:5 عمودية موحّدة، خلفية شفافة، الصورة تملأ البطاقة */
.rq-media{
  position:relative; aspect-ratio:4/5;
  background:transparent;
  border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.rq-media img{
  width:100%; height:100%;
  object-fit:var(--rq-fit, contain); /* per-tenant: cover (crop) | contain (default) */
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.rq-card:hover .rq-media img{ transform:scale(1.045); }
.rq-card:active .rq-media img{ transform:scale(.985); }

/* placeholder بلا صورة */
.rq-media--empty{ background:var(--photo); padding:16px; }
.rq-noimg{
  font-family:'Cormorant Garamond',serif; text-transform:uppercase;
  font-size:1rem; font-weight:600; letter-spacing:2px; line-height:1.4;
  color:var(--muted); text-align:center; word-break:break-word;
}

/* المعلومات: محاذاة لليسار (بداية الكود اللاتيني)، اسم أصغر، سعر رفيع */
.rq-info{ padding:12px 3px 4px; text-align:left; }
.rq-code{
  font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:.92rem; letter-spacing:.4px; text-transform:uppercase;
  color:var(--soft-ink); line-height:1.3;
}
.rq-price{
  font-size:.86rem; font-weight:300; color:var(--ink);
  margin-top:5px; letter-spacing:.3px;
}
@media (max-width:575.98px){
  .rq-code{ letter-spacing:.2px; font-size:.88rem; }
}

/* فراغ الشبكة (فخامة) */
@media (max-width:575.98px){
  #productsContainer.row{ --bs-gutter-x:14px; --bs-gutter-y:26px; }
}
@media (min-width:576px){
  #productsContainer.row{ --bs-gutter-x:24px; --bs-gutter-y:40px; }
}

/* صورة صفحة المنتج بأبعادها الحقيقية — بلا صندوق (خلفية شفافة، بلا padding) */
.rq-pd-photo{
  background:transparent; border-radius:var(--store-radius);
  display:flex; align-items:center; justify-content:center;
  max-height:560px;
}
.rq-pd-photo img{
  max-width:100%; max-height:524px; width:auto; height:auto;
  object-fit:contain;
}

/* ============================================
   مرحلة ١-ج — الإطار الفاخر الحيادي
   إطار أبيض/حبري ثابت لكل المستأجرين؛ لون المستأجر (--brand)
   في اللمسات فقط: الرابط النشط، شارة السلة، focus الحقول.
   (store.css يُحمَّل في لاياوت المتجر فقط → الداشبورد الإداري لا يتأثّر)
   ============================================ */

/* --- الهيدر/النافبار --- */
.store-body .navbar{ background:#fff; }
.store-body .navbar-brand{ color:var(--ink); font-weight:700; }
.store-body .rq-store-name{ color:var(--ink); font-weight:700; }
.store-body .navbar-nav .nav-link{ color:var(--soft-ink); }
.store-body .navbar-nav .nav-link:hover{ color:var(--ink); }
.store-body .navbar-nav .nav-link.active{
  color:var(--ink); box-shadow:inset 0 -2px 0 var(--brand);
}

/* أيقونات/أزرار الهيدر الثانوية (سلة/همبرغر) — حبرية رفيعة */
.store-body .navbar .btn-outline-secondary{
  --bs-btn-color:var(--soft-ink); --bs-btn-border-color:var(--line2);
  --bs-btn-hover-bg:var(--photo); --bs-btn-hover-color:var(--ink); --bs-btn-hover-border-color:var(--line2);
  --bs-btn-active-bg:var(--photo); --bs-btn-active-color:var(--ink); --bs-btn-active-border-color:var(--line2);
}

/* شارة عدد السلة — لمسة لون المستأجر (كانت bg-danger) */
.store-body #cart-badge,
.store-body #cart-badge-mobile{ background:var(--brand) !important; }

/* --- نظام الأزرار (لا أزرق Bootstrap في الـstorefront) --- */
/* الأساسي → حبري ممتلئ */
.store-body .btn-primary{
  --bs-btn-bg:var(--ink); --bs-btn-border-color:var(--ink);
  --bs-btn-hover-bg:#000; --bs-btn-hover-border-color:#000;
  --bs-btn-active-bg:#000; --bs-btn-active-border-color:#000;
  --bs-btn-disabled-bg:var(--muted); --bs-btn-disabled-border-color:var(--muted);
  --bs-btn-focus-shadow-rgb:23,19,24;
  border-radius:12px; font-weight:600;
}
/* الثانوي/الأقل أهمية → outline حبري رفيع */
.store-body .btn-outline-primary{
  --bs-btn-color:var(--ink); --bs-btn-border-color:var(--line2);
  --bs-btn-hover-bg:var(--ink); --bs-btn-hover-border-color:var(--ink); --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--ink); --bs-btn-active-border-color:var(--ink);
  --bs-btn-focus-shadow-rgb:23,19,24;
  border-radius:12px;
}
/* نص أزرق متبقٍّ (اسم المتجر/السعر/qvPrice/spinner...) → حبر */
.store-body .text-primary{ color:var(--ink) !important; }

/* --- focus الحقول → لمسة لون المستأجر بدل أزرق Bootstrap --- */
.store-body .form-control:focus,
.store-body .form-select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 .2rem color-mix(in srgb, var(--brand) 20%, transparent);
}

/* --- الهيرو (الرئيسية + رأس shop) --- */
.store-body .hero h1,
.store-body .shop-hero h1{ color:var(--ink); font-weight:300; }
.store-body .hero .lead{ color:var(--muted) !important; }

/* خلفية الأقسام الهادئة المحايدة (تسري على bg-gradient-subtle بكل الصفحات
   التي لا تعرّفها inline: register/account/account_orders) */
.store-body .bg-gradient-subtle{ background:linear-gradient(180deg,#FFFFFF,#F8F7FA); }

/* --- صفحة المنتج: السعر + بادج الماركة --- */
.store-body .pd-final-price{ color:var(--ink); font-weight:500; font-size:1.4rem; }
.store-body .pd-brand-badge{ background:var(--photo); color:var(--soft-ink); }

/* ============================================
   مرحلة ١-د — سلايدر الهيرو (صفحة /)
   ============================================ */
.rq-hero-slider{
  position:relative; height:220px;
  border-radius:var(--store-radius); overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF,#F8F7FA);
}
@media (min-width:768px){ .rq-hero-slider{ height:300px; } }
.rq-slides{ position:absolute; inset:0; }
.rq-slide{
  position:absolute; inset:0; display:block;
  opacity:0; transition:opacity .6s ease;
}
.rq-slide.is-active{ opacity:1; }
.rq-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
/* caption + gradient only when the banner has a title (clean image otherwise) */
.rq-slide.has-caption::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(20,12,35,.38), transparent 45%);
}
.rq-slide-caption{
  position:absolute; left:24px; bottom:20px; z-index:2;
  color:#fff; font-size:1.15rem; font-weight:500; letter-spacing:.3px;
  text-shadow:0 1px 14px rgba(0,0,0,.45); max-width:70%;
}
.rq-dots{
  position:absolute; left:0; right:0; bottom:12px; z-index:2;
  display:flex; gap:6px; justify-content:center;
}
.rq-dot{
  width:5px; height:5px; padding:0; border:none; cursor:pointer;
  border-radius:50%; background:#cfcbd6; transition:all .3s ease;
}
.rq-dot.is-active{ width:16px; border-radius:6px; background:var(--brand); }

/* ============================================
   مرحلة ١-هـ — الهيدر الثلاثي + شريط التنقّل
   ============================================ */
/* Header: menu (start) / logo (center) / cart (end) */
/* Higher specificity than Bootstrap's `.navbar>.container{display:flex}` (0,2,0)
   so our 3-column grid actually applies and truly centers the logo on the axis. */
.navbar > .container.rq-nav3{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%; }
.rq-nav-btn{ background:transparent; border:0; color:var(--soft-ink); font-size:1.35rem; line-height:1; padding:.25rem .45rem; cursor:pointer; }
.rq-nav-btn:hover{ color:var(--ink); }
.rq-nav-menu{ justify-self:start; }
.rq-nav-cart{ justify-self:end; }
.rq-logo{ justify-self:center; display:inline-flex; align-items:center; text-decoration:none; }
.rq-logo-img{ max-height:46px; width:auto; display:block; }
.rq-nav-actions{ justify-self:end; display:inline-flex; align-items:center; gap:.15rem; }

/* Header search bar (slides under header) */
.rq-headersearch-wrap{ border-bottom:1px solid var(--line); background:#fff; }
.rq-headersearch{ display:flex; align-items:center; gap:.5rem; padding:.7rem 0; }
.rq-headersearch .form-control{ flex:1 1 auto; }

/* Shop nav bar (under hero) */
.rq-shopnav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.85rem 0 .35rem; }
.rq-snav-links{ display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; }
.rq-snav-tools{ display:flex; align-items:center; gap:.5rem; }
.rq-snav-link{ background:transparent; border:0; padding:.15rem 0; color:var(--soft-ink); font-size:.95rem; text-decoration:none; cursor:pointer; white-space:nowrap; transition:color .15s ease, box-shadow .2s ease; }
.rq-snav-link:hover{ color:var(--ink); }
.rq-snav-link.active{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--brand); }
.rq-icon-btn{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line2); background:#fff; color:var(--soft-ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.rq-icon-btn:hover{ color:var(--ink); border-color:var(--ink); }
.rq-menu{ border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 28px rgba(15,23,42,.10); padding:.35rem; max-height:60vh; overflow:auto; }
.rq-menu .dropdown-item{ display:flex; align-items:center; justify-content:space-between; gap:1rem; border-radius:7px; color:var(--soft-ink); }
.rq-menu .dropdown-item:hover{ background:var(--photo); color:var(--ink); }
.rq-menu .dropdown-item.active{ background:var(--photo); color:var(--ink); }
.rq-menu-count{ color:var(--muted); font-size:.8rem; }
.rq-shopnav-count{ color:var(--muted); font-size:.85rem; padding:.5rem 0; border-top:1px solid var(--line); }
.rq-search-form{ display:flex; gap:.5rem; padding:.6rem 0; }

/* Mobile: drop shop-nav menus full-width UNDER the bar (not a narrow floating menu
   that overflows the viewport edge in RTL). Anchors to .rq-shopnav, not the narrow
   .dropdown. Paired with data-bs-display="static" on the toggles (no Popper). */
@media (max-width:991.98px){
  .rq-shopnav{ position:relative; }
  .rq-shopnav .dropdown{ position:static; }
  .rq-shopnav .dropdown-menu.rq-menu{
    position:absolute !important;
    top:calc(100% + .35rem) !important;
    left:0 !important;
    right:0 !important;
    transform:none !important;
    width:auto !important;
    max-height:55vh;
  }
}

/* ============================================
   الدفعة (ب) — مواصفات المنتج
   ============================================ */
.rq-specs{ border-top:1px solid var(--line); }
.rq-spec-row{ display:flex; justify-content:space-between; gap:1rem; padding:.7rem .25rem; border-bottom:1px solid var(--line); }
.rq-spec-label{ color:var(--muted); }
.rq-spec-value{ color:var(--ink); font-weight:500; text-align:left; }

/* ============================================
   Storefront polish — DESKTOP ONLY (mobile/tablet untouched)
   ============================================ */

/* Item 1 — hero banner: show the full uploaded image without harmful cropping.
   The banner is a fixed-height cover box on desktop, which crops the (variable
   ratio) uploaded image. On desktop give it the recommended 16:5 wide ratio and
   "contain" so the whole image is always visible; the soft slider background
   fills any letterbox for off-ratio uploads. */
@media (min-width:1024px){
  .rq-hero-slider{ height:auto; aspect-ratio:16/5; }
  .rq-slide img{ object-fit:contain; }
}

/* Item 2 — moderate width increase on large desktops (xl+). Bootstrap caps the
   container at 1140px from 1200px and only reaches 1320px at 1400px+; lift xl to
   1320px so content breathes. Product grid stays 4 columns (col-lg-3) — cards
   just get a bit wider. Tablet/mobile (<1200px) keep Bootstrap's defaults. */
@media (min-width:1200px){
  .store-body .container{ max-width:1320px; }
}