@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;700;800;900&family=Almarai:wght@400;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root{
  --ink:#12201c;
  --paper:#faf7f0;
  --panel:#ffffff;
  --teal:#0e6b5c;
  --teal-dark:#0a5347;
  --teal-deep:#062420;
  --gold:#c9973b;
  --gold-light:#e8c77a;
  --line:#e6e0d2;
  --muted:#6b685c;
  --radius:16px;
  --shadow-soft:0 20px 50px rgba(6,36,32,.10);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html,body{overflow-x:hidden;max-width:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans Arabic', sans-serif;
  line-height:1.7;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
img{max-width:100%;height:auto;}
h1,h2,h3,.brand{font-family:'Cairo', sans-serif;}
.price{font-family:'Almarai', sans-serif;}
a{color:inherit;text-decoration:none;}

/* small gold diamond used throughout as a quiet recurring mark (seal / bullet / divider) */
.mark-diamond{
  width:8px;height:8px;background:linear-gradient(135deg,var(--gold-light),var(--gold));
  display:inline-block;transform:rotate(45deg);border-radius:2px;flex-shrink:0;
}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---- topbar ---- */
.topbar{
  position:sticky;top:0;z-index:20;
  padding:15px 24px;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(250,247,240,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:800;font-size:1.2rem;letter-spacing:-.01em;color:var(--teal-deep);display:flex;align-items:center;gap:10px;}
.brand .dot{width:8px;height:8px;background:linear-gradient(135deg,var(--gold-light),var(--gold));display:inline-block;transform:rotate(45deg);border-radius:2px;}
.topbar .mini-cta{
  background:var(--teal-deep);color:#fff;border:none;border-radius:999px;
  padding:10px 20px;font-size:.85rem;font-weight:700;cursor:pointer;
  font-family:'Cairo',sans-serif;letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(6,36,32,.18);
  transition:background .2s ease, transform .15s ease;
}
.topbar .mini-cta:hover{background:var(--teal);transform:translateY(-1px);}

@keyframes ctaPulse{
  0%{box-shadow:0 10px 24px rgba(14,107,92,.25),0 0 0 0 rgba(14,107,92,.35);}
  10%{box-shadow:0 10px 24px rgba(14,107,92,.25),0 0 0 10px rgba(14,107,92,0);}
  100%{box-shadow:0 10px 24px rgba(14,107,92,.25),0 0 0 0 rgba(14,107,92,0);}
}
.pulse{animation:ctaPulse 3.2s ease-in-out infinite;}

/* ---- breadcrumb ---- */
.breadcrumb{max-width:1100px;margin:18px auto 0;padding:0 24px;font-size:.85rem;color:var(--muted);}
.breadcrumb a{color:var(--teal-dark);font-weight:600;}

/* ---- home hero banner ----
   Deep emerald gradient with a fine diagonal foil texture and a soft gold glow,
   echoing premium packaging rather than a flat color block. */
.home-banner{
  max-width:1100px;margin:20px auto 0;padding:0 24px;
}
.home-banner-inner{
  background:
    radial-gradient(circle at 88% -10%, rgba(232,199,122,.35), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 14px),
    linear-gradient(135deg, var(--teal-deep), var(--teal-dark) 55%, var(--teal));
  border-radius:22px;padding:52px 30px 44px;color:#fff;text-align:center;position:relative;overflow:hidden;
  box-shadow:0 24px 60px rgba(6,36,32,.28);
}
.home-banner-inner::after{
  content:'';position:absolute;top:22px;right:22px;width:34px;height:34px;
  border:1.5px dashed rgba(232,199,122,.55);border-radius:50%;
  display:flex;
}
.home-banner-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--gold-light);font-family:'Cairo',sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.03em;margin-bottom:14px;position:relative;z-index:1;
}
.home-banner-inner h1{
  font-family:'Cairo',sans-serif;font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.7rem,4.2vw,2.5rem);margin:0 0 10px;position:relative;z-index:1;
}
.home-banner-inner p{opacity:.88;margin:0;font-size:.98rem;position:relative;z-index:1;}
.home-banner-inner.has-bg-image{
  background-size:cover;background-position:center;position:relative;
}
.home-banner-inner.has-bg-image::before{
  content:'';position:absolute;inset:0;background:rgba(6,24,20,.55);border-radius:22px;
}
.home-banner-inner.has-bg-image h1,
.home-banner-inner.has-bg-image p{position:relative;z-index:1;}

/* ---- trust strip (home) ---- */
.trust-strip{
  max-width:1100px;margin:16px auto 0;padding:0 24px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
@media(min-width:700px){.trust-strip{grid-template-columns:repeat(4,1fr);gap:14px;}}
.trust-strip-item{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.trust-strip-item:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(6,36,32,.08);}
.trust-strip-item .ic{font-size:1.35rem;}
.trust-strip-item .lbl{font-size:.78rem;font-weight:700;color:var(--teal-deep);font-family:'Cairo',sans-serif;}

/* ---- product grid (home) ---- */
.product-grid{
  max-width:1100px;margin:40px auto 60px;padding:0 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
@media(min-width:700px){.product-grid{grid-template-columns:repeat(3,1fr);gap:22px;}}
.product-card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(6,36,32,.14);border-color:#d7cfb6;}
.product-card .thumb{aspect-ratio:1/1;background:#fbf9f4;position:relative;overflow:hidden;}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.product-card:hover .thumb img{transform:scale(1.06);}
.product-card .thumb .placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.85rem;text-align:center;padding:10px;
}
.product-card .badge{
  position:absolute;top:12px;left:12px;background:linear-gradient(120deg,var(--gold-light),var(--gold));color:#2a1d05;
  font-size:.68rem;font-weight:800;padding:5px 12px;border-radius:999px;
  font-family:'Cairo',sans-serif;box-shadow:0 4px 12px rgba(201,151,59,.35);
}
.product-card .info{padding:16px 16px 18px;flex:1;display:flex;flex-direction:column;}
.product-card .name{font-weight:700;font-size:.95rem;margin-bottom:6px;font-family:'Cairo',sans-serif;}
.product-card .vendor-name{font-size:.76rem;color:var(--muted);margin-bottom:6px;}
.product-card .desc{
  font-size:.8rem;color:var(--muted);margin-bottom:10px;flex:1;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
/* بادچ الخصم الفعلي (أولوية على أي badge مخصص — مفيش بادچين مع بعض أبدًا) */
.product-card .badge.badge-discount{background:#c0392b;color:#fff;box-shadow:0 4px 12px rgba(192,57,43,.35);}
/* قيمة التوفير — بتظهر بس لو فيه خصم فعلي (oldPrice > price) */
.product-card .savings-text{font-size:.76rem;color:#1a7a4c;font-weight:700;margin:-6px 0 10px;}
.product-card .price-line{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;}
.product-card .price{font-size:1.2rem;font-weight:800;color:var(--teal-deep);}
.product-card .price-old{font-size:.85rem;color:var(--muted);text-decoration:line-through;}
.product-card .btn{
  background:var(--teal-deep);color:#fff;text-align:center;padding:11px;border-radius:11px;
  font-weight:700;font-family:'Cairo',sans-serif;font-size:.9rem;transition:background .2s ease;
}
.product-card:hover .btn{background:var(--teal);}

/* ---- صفحات الهبوط (Landing Pages) ---- */
.lp-announcement-bar {
  background: linear-gradient(90deg, var(--teal-dark, #008080), var(--teal, #0e6b5c));
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 0.88rem;
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.lp-custom-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(234, 88, 12, 0.1);
  color: var(--teal-dark, #008080);
  border: 1px solid var(--teal, #008080);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  font-family: 'Cairo', sans-serif;
}
.lp-video-embed{
  max-width:1040px;margin:24px auto 0;padding:0 24px;
}
.lp-video-embed iframe{
  width:100%;aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--line);
  box-shadow:var(--shadow-soft);display:block;
}
body[data-lp-template="countdown"] .countdown,
body[data-lp-template="flash_sale"] .countdown{
  box-shadow:0 6px 18px rgba(217,154,43,.28);transform:scale(1.02);
}
body[data-lp-template="cashback"] #trustSection,
body[data-lp-template="health_supplements"] #trustSection{
  border:1px solid var(--gold);border-radius:var(--radius);padding:14px;
}

/* Template 2: Beauty & Cosmetics */
body[data-lp-template="beauty_cosmetics"] {
  background-color: #fdf2f8;
}
body[data-lp-template="beauty_cosmetics"] .hero {
  background: #ffffff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(219, 39, 119, 0.08);
  margin-top: 10px;
}

/* Template 3: Flash Sale */
body[data-lp-template="flash_sale"] .countdown {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border: 2px solid #ef4444;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.25);
}
body[data-lp-template="flash_sale"] .submit-btn {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4) !important;
}

/* Template 5: Luxury Brand */
body[data-lp-template="luxury_brand"] {
  background-color: #0f172a;
  color: #f8fafc;
}
body[data-lp-template="luxury_brand"] .hero,
body[data-lp-template="luxury_brand"] .calc-card,
body[data-lp-template="luxury_brand"] .ship-calc {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}
body[data-lp-template="luxury_brand"] .hero h1 {
  color: #fbbf24;
}

/* Template 6: Tech Gadgets */
body[data-lp-template="tech_gadgets"] .hero {
  border: 1px solid #3b82f6;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.12);
}

/* Template 7: Health & Supplements */
body[data-lp-template="health_supplements"] #trustSection {
  background: #ecfdf5;
  border: 1px solid #10b981;
}

/* Template 8: Courses & Services */
body[data-lp-template="courses_services"] .hero {
  background: #f5f3ff;
  border-radius: 18px;
}

/* Template 9: Restaurant & Food */
body[data-lp-template="restaurant_food"] .price-row .price {
  color: #ea580c;
}

/* Template 10: Bundle Deal */
body[data-lp-template="bundle_deal"] .calc-card {
  border: 2px solid #16a34a;
  background: #f0fdf4;
}

/* Template 11: Real Estate & Decor */
body[data-lp-template="realestate_decor"] .gallery-track {
  aspect-ratio: 16/10;
}

/* Template 12: Minimal Clean */
body[data-lp-template="minimal_clean"] .hero {
  box-shadow: none;
  border: none;
}

/* ---- product page hero ---- */
.hero{
  max-width:1040px;margin:0 auto;padding:44px 24px 24px;
  display:grid;grid-template-columns:1fr;gap:30px;
}
@media(min-width:860px){.hero{grid-template-columns:1.05fr 1fr;align-items:center;padding:34px 24px;}}

.gallery{position:relative;}
.gallery-track{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;aspect-ratio:1/1;position:relative;box-shadow:var(--shadow-soft);
  display:flex;transition:transform .35s ease;touch-action:pan-y;
}
.slide{min-width:100%;display:flex;align-items:center;justify-content:center;position:relative;}
.slide img{width:100%;height:100%;object-fit:cover;}
.slide .placeholder{color:var(--muted);text-align:center;padding:20px;font-size:.95rem;}
.badge-corner{
  position:absolute;top:14px;left:14px;background:linear-gradient(120deg,var(--gold-light),var(--gold));color:#2a1d05;
  font-size:.75rem;font-weight:800;padding:7px 14px;border-radius:999px;
  font-family:'Cairo',sans-serif;z-index:2;box-shadow:0 4px 12px rgba(201,151,59,.35);
}
.gallery-dots{display:flex;justify-content:center;gap:8px;margin-top:14px;}
.gallery-dots button{
  width:8px;height:8px;border-radius:50%;border:none;background:var(--line);
  cursor:pointer;padding:0;transition:background .2s,width .2s;
}
.gallery-dots button.active{background:var(--teal-deep);width:22px;border-radius:6px;}
.gallery-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:50%;
  width:38px;height:38px;cursor:pointer;font-size:1rem;color:var(--teal-deep);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(6,36,32,.12);
  transition:transform .15s ease;
}
.gallery-arrow:hover{transform:translateY(-50%) scale(1.06);}
.gallery-arrow.prev{right:10px;}
.gallery-arrow.next{left:10px;}

.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--teal-deep);font-weight:700;letter-spacing:.02em;font-size:.8rem;
  font-family:'Cairo',sans-serif;
  background:#eaf2ef;padding:6px 14px;border-radius:999px;margin-bottom:16px;
  border:1px solid #d7e6e0;
}
.hero h1{font-family:'Cairo',sans-serif;font-size:clamp(1.85rem,4.2vw,2.6rem);margin:0 0 14px;font-weight:800;line-height:1.32;letter-spacing:-.01em;}
.hero p.desc{color:var(--muted);font-size:1.05rem;margin-bottom:22px;}
.vendor-name{color:var(--muted);font-size:.85rem;margin:-6px 0 12px;font-weight:500;}

.price-row{display:flex;align-items:baseline;gap:12px;margin-bottom:4px;}
.price{font-size:2.2rem;font-weight:800;color:var(--teal-deep);}
.price-old{font-size:1.1rem;color:var(--muted);text-decoration:line-through;}
.save-tag{font-size:.8rem;background:#fdece0;color:#a4560c;padding:4px 10px;border-radius:8px;font-weight:700;}

.ship-calc{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin:10px 0 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.ship-calc label{font-size:.85rem;color:var(--muted);white-space:nowrap;}
.ship-calc select{
  flex:1;min-width:130px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:.9rem;background:#fdfcf9;
}
.ship-result{font-size:.85rem;color:var(--teal-dark);font-weight:700;white-space:nowrap;}

.calc-card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;margin-bottom:18px;box-shadow:0 6px 20px rgba(14,107,92,.06);
}
.calc-title{font-family:'Almarai',sans-serif;font-weight:800;font-size:.98rem;margin-bottom:12px;color:var(--teal-dark);}
.calc-qty-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:.9rem;}
.qty-stepper{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.qty-stepper button{
  width:34px;height:34px;border:none;background:#f6f3ec;color:var(--teal-dark);font-size:1.2rem;
  font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.qty-stepper button:hover{background:var(--line);}
.qty-stepper span{min-width:36px;text-align:center;font-weight:700;font-family:'Almarai',sans-serif;}
.calc-row{display:flex;justify-content:space-between;font-size:.9rem;padding:6px 0;color:var(--muted);}
.calc-row.total{
  font-weight:800;color:var(--teal-dark);font-size:1.05rem;
  border-top:1px solid var(--line);padding-top:10px;margin-top:4px;
}

.countdown{display:flex;align-items:center;gap:8px;margin-bottom:18px;font-size:.88rem;color:var(--muted);}
.countdown .cd-box{
  background:var(--teal-dark);color:#fff;font-family:'Almarai',sans-serif;font-weight:800;
  padding:6px 10px;border-radius:8px;font-size:.95rem;min-width:42px;text-align:center;
}

.cta-inline{
  display:inline-block;background:linear-gradient(120deg,var(--teal-deep),var(--teal));color:#fff;border:none;border-radius:13px;
  padding:16px 32px;font-size:1.05rem;font-weight:700;cursor:pointer;
  font-family:'Cairo',sans-serif;letter-spacing:.01em;transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 14px 30px rgba(6,36,32,.22);
}
.cta-inline:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(6,36,32,.28);}

.trust{max-width:1040px;margin:8px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media(min-width:640px){.trust{grid-template-columns:repeat(3,1fr);}}
.trust-item{
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:14px 16px;display:flex;align-items:center;gap:10px;font-size:.88rem;
  transition:box-shadow .2s ease, transform .2s ease;
}
.trust-item:hover{box-shadow:0 10px 24px rgba(6,36,32,.08);transform:translateY(-2px);}
.trust-item .ic{font-size:1.3rem;}

.specs{max-width:1040px;margin:64px auto 0;padding:0 24px;}
.section-title{
  font-family:'Cairo',sans-serif;font-size:1.4rem;margin:0 0 20px;font-weight:800;
  display:flex;align-items:center;gap:10px;color:var(--teal-deep);
}
.section-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);}
.specs ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:10px;}
@media(min-width:640px){.specs ul{grid-template-columns:1fr 1fr;}}
.specs li{
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:14px 18px;font-size:.95rem;display:flex;justify-content:space-between;gap:10px;
}
.specs li span.k{color:var(--muted);}
.specs li span.v{font-weight:700;color:var(--teal-deep);}

.reviews{max-width:1040px;margin:64px auto 0;padding:0 24px;}
.reviews-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:700px){.reviews-grid{grid-template-columns:repeat(3,1fr);}}
.review-card{
  background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:20px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.review-card:hover{box-shadow:0 14px 30px rgba(6,36,32,.08);transform:translateY(-3px);}
.review-stars{color:var(--gold);font-size:.95rem;margin-bottom:8px;letter-spacing:2px;}
.review-text{font-size:.9rem;color:var(--ink);margin-bottom:10px;}
.review-name{font-size:.8rem;color:var(--muted);font-weight:700;}

.faq{max-width:800px;margin:64px auto 0;padding:0 24px;}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:13px;margin-bottom:10px;overflow:hidden;transition:border-color .2s ease;}
.faq-item[open]{border-color:#cfe1da;}
.faq-item summary{
  padding:16px 18px;cursor:pointer;font-weight:700;font-family:'Cairo',sans-serif;
  list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:.98rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:1.3rem;color:var(--teal);transition:transform .2s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-answer{padding:0 18px 16px;color:var(--muted);font-size:.92rem;}

.order{max-width:640px;margin:64px auto 60px;padding:0 24px;}
.order-card{
  background:var(--panel);border:1px solid var(--line);border-radius:22px;
  padding:32px;box-shadow:0 24px 56px rgba(6,36,32,.10);position:relative;overflow:hidden;
}
.order-card::before{
  content:'';position:absolute;top:0;right:0;left:0;height:4px;
  background:linear-gradient(90deg,var(--teal-deep),var(--teal),var(--gold-light));
}
.order-card h2{margin:0 0 4px;font-size:1.4rem;font-weight:800;font-family:'Cairo',sans-serif;color:var(--teal-deep);}
.order-card .sub{color:var(--muted);font-size:.9rem;margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px;font-weight:500;}
.field input, .field select, .field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:11px;
  font-family:inherit;font-size:1rem;background:#fdfcf9;transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,107,92,.12);
}
.row2{display:grid;grid-template-columns:1fr;gap:0;}
@media(min-width:480px){.row2{grid-template-columns:1fr 1fr;gap:14px;}}

.order-summary{
  background:#f6f3ec;border:1px dashed #d7cfb6;border-radius:13px;
  padding:14px 16px;margin-bottom:18px;font-size:.9rem;
}
.order-summary .row{display:flex;justify-content:space-between;margin-bottom:6px;}
.order-summary .row.total{font-weight:800;color:var(--teal-deep);font-size:1.05rem;border-top:1px solid var(--line);padding-top:8px;margin-top:4px;}

button.submit{
  width:100%;padding:17px;border:none;border-radius:13px;
  background:linear-gradient(120deg,var(--teal-deep),var(--teal));color:#fff;font-weight:700;font-size:1.08rem;
  cursor:pointer;font-family:'Cairo',sans-serif;letter-spacing:.01em;transition:box-shadow .2s, transform .15s;
  box-shadow:0 14px 30px rgba(6,36,32,.25);display:flex;align-items:center;justify-content:center;gap:10px;
}
button.submit:hover{transform:translateY(-1px);box-shadow:0 18px 38px rgba(6,36,32,.3);}
button.submit:disabled{opacity:.7;cursor:not-allowed;transform:none;}
.spinner{
  width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;display:none;
}
button.submit.loading .spinner{display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

.status{margin-top:14px;font-size:.9rem;text-align:center;display:none;border-radius:10px;padding:12px;}
.status.err{color:#9c3b1f;background:#fbeae4;display:block;}
.status.ok{color:#0e6b5c;background:#e8f4f1;display:block;}

footer{
  text-align:center;color:rgba(250,247,240,.75);font-size:.8rem;padding:40px 20px 100px;
  background:linear-gradient(180deg,var(--teal-deep),#04160f);margin-top:56px;
}
footer #storeNameFooter{color:#fff;font-weight:700;font-family:'Cairo',sans-serif;}
footer a{color:var(--gold-light);}
footer a[style*="color:var(--muted)"]{color:rgba(250,247,240,.6) !important;}
footer a[style*="color:var(--teal-dark)"]{color:var(--gold-light) !important;}
footer span[style*="color:var(--line)"]{color:rgba(250,247,240,.25) !important;}
.footer-contact{margin-top:6px;font-size:.78rem;color:rgba(250,247,240,.65);}

/* ---- social links (footer) ---- */
.social-links{display:flex;justify-content:center;gap:14px;margin-top:10px;}
.social-links a{
  font-size:1.15rem;line-height:1;opacity:.85;transition:opacity .15s, transform .15s;
}
.social-links a:hover{opacity:1;transform:translateY(-2px);}

/* ---- floating whatsapp button ---- */
.whatsapp-float{
  position:fixed;bottom:20px;left:20px;z-index:40;
  width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;box-shadow:0 10px 26px rgba(37,211,102,.4);
  transition:transform .15s;
}
.whatsapp-float:hover{transform:scale(1.06);}
@media (max-width:600px){
  .whatsapp-float{bottom:16px;left:16px;width:50px;height:50px;font-size:1.4rem;}
}
body.has-sticky .whatsapp-float{bottom:86px;}

.sticky-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 -10px 28px rgba(6,36,32,.08);
}
.sticky-cta .p{font-family:'Cairo',sans-serif;font-weight:800;color:var(--teal-deep);font-size:1.05rem;}
.sticky-cta button{
  background:linear-gradient(120deg,var(--teal-deep),var(--teal));color:#fff;border:none;border-radius:11px;padding:12px 24px;
  font-weight:700;font-family:'Cairo',sans-serif;font-size:.95rem;cursor:pointer;
  min-height:44px;box-shadow:0 10px 22px rgba(6,36,32,.22);
}
body.has-sticky{padding-bottom:calc(78px + env(safe-area-inset-bottom));}

/* ===== فورم "أكمل بيانات الطلب" — ظاهر جوه تفاصيل المنتج على طول (مش نافذة منبثقة) ===== */
.order-inline{margin:22px 0 6px;}
.order-inline .order-card{border-top:4px solid var(--gold);}
@media(max-width:600px){
  .order-inline .order-card{padding:22px 18px;border-radius:18px;}
}

.modal-overlay{
  position:fixed;inset:0;background:rgba(24,36,32,.55);z-index:100;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.show{display:flex;}
.modal-box{
  background:var(--panel);border-radius:22px;padding:34px 28px;max-width:380px;width:100%;
  text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.3);animation:modalIn .3s ease;
  border-top:4px solid var(--gold);
}
@keyframes modalIn{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}
.modal-check{
  width:62px;height:62px;border-radius:50%;background:#e6f2ee;color:var(--teal-deep);
  display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 16px;
}
.modal-check svg{width:32px;height:32px;}
.modal-check .check-circle{
  stroke:var(--teal-dark);stroke-width:2;fill:none;
  stroke-dasharray:76;stroke-dashoffset:76;
}
.modal-check .check-mark{
  stroke:var(--teal-dark);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24;
}
.modal-overlay.show .check-circle{animation:drawCircle .5s ease forwards;}
.modal-overlay.show .check-mark{animation:drawCheck .3s ease .45s forwards;}
@keyframes drawCircle{to{stroke-dashoffset:0;}}
@keyframes drawCheck{to{stroke-dashoffset:0;}}
.modal-box h3{margin:0 0 8px;font-size:1.25rem;font-family:'Cairo',sans-serif;}
.modal-box p{color:var(--muted);font-size:.92rem;margin-bottom:6px;}
.modal-order-num{font-family:'Almarai',sans-serif;font-weight:800;color:var(--teal-deep);font-size:1.1rem;margin-bottom:18px;}
.modal-box button{
  background:linear-gradient(120deg,var(--teal-deep),var(--teal));color:#fff;border:none;border-radius:11px;padding:12px 28px;
  font-weight:700;font-family:'Cairo',sans-serif;cursor:pointer;font-size:.95rem;
  box-shadow:0 10px 22px rgba(6,36,32,.22);
}

/* ===== الداون سيل ===== */
.downsell-card{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;margin:14px 0 4px;text-align:center;
}
#downsellOverlay .modal-box button{display:block;width:100%;margin-top:10px;}
#downsellOverlay .modal-box button:first-of-type{margin-top:14px;}

/* ================= لوحة التحكم (Admin) ================= */
.admin-wrap{max-width:1100px;margin:0 auto;padding:24px;}
.admin-login{
  max-width:380px;margin:80px auto;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:32px;text-align:center;box-shadow:0 18px 44px rgba(24,36,32,.08);
}
.admin-login h2{margin-top:0;}
.admin-login input{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:1rem;margin-bottom:14px;
}
.admin-login button:not(.toggle-password-btn){
  width:100%;padding:13px;border:none;border-radius:10px;background:var(--teal);
  color:#fff;font-weight:700;font-family:'Almarai',sans-serif;cursor:pointer;font-size:1rem;
}
.admin-login .err{color:#9c3b1f;font-size:.85rem;margin-top:10px;display:none;}

.login-type-switch{
  display:flex;gap:6px;background:var(--paper);border:1px solid var(--line);
  border-radius:10px;padding:4px;margin-bottom:18px;
}
.login-type-btn{
  flex:1;padding:9px 8px;border:none;border-radius:8px;background:transparent;
  color:var(--muted);font-family:'IBM Plex Sans Arabic',sans-serif;font-size:.82rem;
  font-weight:700;cursor:pointer;transition:.15s;
}
.login-type-btn.active{background:var(--panel);color:var(--teal-dark);box-shadow:0 2px 6px rgba(24,36,32,.08);}

.admin-topbar{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;
  flex-wrap:wrap;gap:10px;
}
.admin-topbar h1{font-size:1.4rem;margin:0;}
.admin-actions{display:flex;gap:10px;flex-wrap:wrap;}
.btn-primary{
  background:var(--teal);color:#fff;border:none;border-radius:10px;padding:10px 18px;
  font-weight:700;font-family:'Almarai',sans-serif;cursor:pointer;font-size:.9rem;
}
.btn-secondary{
  background:var(--panel);color:var(--teal-dark);border:1px solid var(--line);border-radius:10px;
  padding:10px 18px;font-weight:700;font-family:'Almarai',sans-serif;cursor:pointer;font-size:.9rem;
}
.btn-danger{
  background:#fbeae4;color:#9c3b1f;border:none;border-radius:8px;padding:8px 14px;
  font-weight:700;cursor:pointer;font-size:.82rem;
}

.admin-save-bar{
  position:sticky;top:0;z-index:15;background:var(--paper);padding:10px 0;
  display:flex;justify-content:flex-end;gap:10px;border-bottom:1px solid var(--line);margin-bottom:20px;
}
.save-status{font-size:.85rem;color:var(--muted);align-self:center;}
.save-status.saved{color:var(--teal-dark);font-weight:700;}

.settings-card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:26px;
}
.settings-card h3{margin-top:0;font-size:1.1rem;}
.settings-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:640px){.settings-grid{grid-template-columns:1fr 1fr;}}
.settings-grid .field label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px;}
.settings-grid .field input{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:.95rem;
}

.admin-products{display:grid;grid-template-columns:1fr;gap:14px;}
.admin-product-row{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}
.admin-product-row .thumb{
  width:64px;height:64px;border-radius:10px;overflow:hidden;background:#f6f3ec;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--muted);text-align:center;
}
.admin-product-row .thumb img{width:100%;height:100%;object-fit:cover;}
.admin-product-row .info{flex:1;min-width:150px;}
.admin-product-row .info .name{font-weight:700;}
.admin-product-row .info .meta{font-size:.82rem;color:var(--muted);}
.admin-product-row .row-actions{display:flex;gap:8px;}

/* ---- product editor modal ---- */
.editor-overlay{
  position:fixed;inset:0;background:rgba(24,36,32,.55);z-index:200;
  display:none;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto;
}
.editor-overlay.show{display:flex;}
.editor-box{
  background:var(--panel);border-radius:18px;padding:28px;max-width:640px;width:100%;
  margin:30px auto;box-shadow:0 24px 60px rgba(0,0,0,.25);
}
.editor-box h3{margin-top:0;}
.editor-box .field{margin-bottom:14px;}
.editor-box .field label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px;}
.editor-box .field input, .editor-box .field textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:.95rem;
}
.editor-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.spec-row{display:flex;gap:8px;margin-bottom:8px;}
.spec-row input{flex:1;}
.spec-row button{
  background:#fbeae4;color:#9c3b1f;border:none;border-radius:8px;width:36px;cursor:pointer;font-size:1.1rem;
}
.add-spec-btn{
  background:none;border:1px dashed var(--line);border-radius:8px;padding:8px 14px;
  color:var(--teal-dark);font-size:.85rem;cursor:pointer;width:100%;margin-bottom:14px;
}

.image-upload-zone{
  border:2px dashed var(--line);border-radius:12px;padding:16px;text-align:center;
  margin-bottom:14px;cursor:pointer;color:var(--muted);font-size:.88rem;
}
.image-upload-zone:hover{border-color:var(--teal);}
.image-previews{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.image-preview{
  width:70px;height:70px;border-radius:10px;overflow:hidden;position:relative;background:#f6f3ec;
}
.image-preview img{width:100%;height:100%;object-fit:cover;}
.image-preview .remove-img{
  position:absolute;top:2px;left:2px;background:rgba(0,0,0,.6);color:#fff;border:none;
  border-radius:50%;width:20px;height:20px;font-size:.75rem;cursor:pointer;
}
.image-preview .uploading{
  position:absolute;inset:0;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;
  font-size:.7rem;color:var(--teal-dark);
}
.editor-actions{display:flex;gap:10px;margin-top:20px;}
.editor-actions button{flex:1;padding:12px;border-radius:10px;font-weight:700;font-family:'Almarai',sans-serif;cursor:pointer;border:none;}
.editor-actions .save-btn{background:var(--teal);color:#fff;}
.editor-actions .cancel-btn{background:#f6f3ec;color:var(--ink);}

.loading-screen{text-align:center;padding:80px 20px;color:var(--muted);}

.footer-contact{margin-top:6px;font-size:.78rem;color:var(--muted);}

.sort-bar{
  max-width:1100px;margin:24px auto 0;padding:0 24px;
  display:flex;align-items:center;gap:10px;justify-content:flex-end;font-size:.88rem;color:var(--muted);
}
.sort-bar select{
  padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:.88rem;background:var(--panel);
}

/* ================= إضافات لوحة التحكم الاحترافية ================= */
.stats-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px;
}
@media(min-width:700px){.stats-grid{grid-template-columns:repeat(6,1fr);}}
.stat-card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px;text-align:center;
}
.stat-value{font-family:'Almarai',sans-serif;font-weight:800;font-size:1.4rem;color:var(--teal-dark);}
.stat-label{font-size:.78rem;color:var(--muted);margin-top:4px;}

.admin-tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--line);}
.tab-btn{
  background:none;border:none;padding:10px 18px;font-family:'Almarai',sans-serif;font-weight:700;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;font-size:.95rem;
}
.tab-btn.active{color:var(--teal-dark);border-bottom-color:var(--teal);}

.products-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.products-header input{
  padding:9px 14px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:.9rem;min-width:220px;
}

.admin-product-row.is-hidden{opacity:.55;}
.hidden-tag{
  background:#e9e5da;color:var(--muted);font-size:.7rem;padding:2px 8px;border-radius:999px;margin-right:6px;
}
.stock-tag{font-size:.78rem;color:var(--muted);margin-right:6px;}
.stock-tag.low{color:#9c3b1f;font-weight:700;}
.vendor-tag-green{
  background:#e2f2ea;color:#0e6b5c;font-size:.7rem;padding:2px 8px;border-radius:999px;margin-right:6px;
}
.vendor-tag-yellow{
  background:#fbf0d9;color:#8a6412;font-size:.7rem;padding:2px 8px;border-radius:999px;margin-right:6px;
}
.new-vendor-badge{
  background:var(--gold);color:#3a2a05;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px;margin-right:6px;
}

/* ===== المستخدمون الفرعيون التابعون للبائع (Vendor Staff) — الجزء 5 ===== */
.staff-perms-grid{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:10px;}
.staff-perm-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.88rem;}
.staff-perm-row label{display:flex;align-items:center;gap:6px;cursor:pointer;}
/* عنوان قسم داخل شبكة صلاحيات المستخدم الفرعي (منتجات/طلبات/مرتجعات/عام) —
   بيقسّم الصلاحيات الكتير دي لأجزاء واضحة يقدر البائع يفهمها بسرعة */
.staff-perm-group-title{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}
.staff-perm-group-title:first-child{margin-top:0;padding-top:0;border-top:none;}
.staff-team-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;}


.admin-orders{display:flex;flex-direction:column;gap:10px;}
.order-row{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.order-main{display:flex;gap:12px;align-items:flex-start;flex:1;min-width:220px;}
.order-num{font-family:'Almarai',sans-serif;font-weight:800;color:var(--teal-dark);white-space:nowrap;}
.order-details{font-size:.88rem;}
.order-meta{font-size:.78rem;color:var(--muted);}
.order-status-select{
  padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:.85rem;background:#fdfcf9;
}

#detailOverlay .editor-box{max-width:720px;}

/* ================= الرسم البياني والتنبيهات ================= */
.chart-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:26px;}
.chart-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
.chart-toggle{display:flex;gap:6px;}
.chart-toggle button{
  background:#f6f3ec;border:1px solid var(--line);border-radius:8px;padding:6px 14px;
  font-size:.82rem;cursor:pointer;color:var(--muted);
}
.chart-toggle button.active{background:var(--teal);color:#fff;border-color:var(--teal);}

.tab-badge{
  background:var(--gold);color:#241a04;font-size:.72rem;font-weight:800;
  border-radius:999px;padding:1px 7px;margin-right:6px;
}

.orders-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
.orders-toolbar input, .orders-toolbar select{
  padding:9px 14px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:.88rem;
}
.orders-toolbar .export-btn{margin-right:auto;}

.activity-row{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;font-size:.85rem;margin-bottom:8px;display:flex;justify-content:space-between;gap:10px;
}
.activity-row .a-time{color:var(--muted);font-size:.78rem;white-space:nowrap;}

.phone-input-wrap{position:relative;}
.phone-check{
  position:absolute;top:50%;left:14px;transform:translateY(-50%);
  color:var(--teal);font-weight:800;font-size:1.1rem;opacity:0;transition:opacity .2s;
}
.phone-check.show{opacity:1;}

/* ================= الطباعة ================= */
#printArea{display:none;}
@media print{
  body.printing > *:not(#printArea){display:none !important;}
  body.printing #printArea{display:block !important;}
  .print-table{width:100%;border-collapse:collapse;font-size:12px;}
  .print-table th, .print-table td{border:1px solid #999;padding:6px 8px;text-align:right;}
  .print-table th{background:#eee;}
}

/* ================= الوضع الليلي — درجات رمادي مريحة للعين فقط (أبيض/أسود/رمادي)، من غير ألوان زاهية ================= */
html.dark-mode{
  --ink:#e7e7ea;        /* نص أساسي: أبيض مكسور، مش أبيض ناصع عشان يريح العين */
  --paper:#17181b;      /* خلفية الصفحة: رمادي فحمي غامق، مش أسود خالص */
  --panel:#212226;      /* خلفية الكروت */
  --teal:#b7b9c0;       /* رمادي فاتح — بديل لون التيل في النصوص/الحدود */
  --teal-dark:#cfd1d6;  /* رمادي أفتح شوية — لينكات وتمييز خفيف */
  --teal-deep:#ececed;  /* شبه أبيض — للعناوين والأسعار البارزة */
  --gold:#aeb0b6;       /* رمادي بديل الدهبي */
  --gold-light:#d6d7db; /* رمادي فاتح بديل الدهبي الفاتح */
  --line:#34363c;       /* حدود */
  --muted:#9a9da5;      /* نص ثانوي */
  --btn-dark:#37393f;   /* خلفية الأزرار الرئيسية (تتباين مع نص أبيض) */
  --btn-dark-hover:#46484f;
}
html.dark-mode body{background:var(--paper);color:var(--ink);}
html.dark-mode input, html.dark-mode select, html.dark-mode textarea{
  background:#26282d;color:var(--ink);border-color:var(--line);
}
html.dark-mode ::placeholder{color:#7d8088;opacity:1;}
html.dark-mode .stat-card, html.dark-mode .order-row, html.dark-mode .activity-row,
html.dark-mode .settings-card, html.dark-mode .admin-product-row, html.dark-mode .chart-card{
  background:var(--panel);
}
html.dark-mode img{filter:brightness(.94);}

.order-row.suspicious{border-color:#e0ac4f;background:#fdf6e8;}
.suspicious-badge{
  background:#fdf0d5;color:#a4560c;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;
}
html.dark-mode .order-row.suspicious{border-color:#4a4d55;background:rgba(180,182,190,.08);}
html.dark-mode .suspicious-badge{background:rgba(180,182,190,.14);color:#d6d7db;}

.feature-toggles{display:grid;grid-template-columns:1fr;gap:8px;}
@media(min-width:640px){.feature-toggles{grid-template-columns:1fr 1fr;}}
.feature-toggle-item{
  display:flex;align-items:center;gap:8px;font-size:.88rem;background:#f6f3ec;
  padding:9px 12px;border-radius:8px;cursor:pointer;
}
html.dark-mode .feature-toggle-item{background:#26282d;}

.contact-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#f6f3ec;border-radius:10px;padding:10px 12px;
}
.contact-row .contact-icon{font-size:1.15rem;width:24px;text-align:center;flex-shrink:0;}
.contact-row .contact-label{font-size:.85rem;color:var(--muted);width:90px;flex-shrink:0;}
.contact-row input[type="text"], .contact-row input[type="tel"]{
  flex:1;min-width:160px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:.9rem;background:#fdfcf9;
}
.contact-row .contact-toggle{
  display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);
  white-space:nowrap;cursor:pointer;flex-shrink:0;
}
html.dark-mode .contact-row{background:#1f2330;}
html.dark-mode .contact-row input[type="text"], html.dark-mode .contact-row input[type="tel"]{
  background:#242837;color:var(--ink);border-color:var(--line);
}

/* عناصر أخرى بألوان بيج ثابتة كانت بتفضل فاتحة في الوضع الليلي */
html.dark-mode .perm-row.perm-header{background:#242837;}
html.dark-mode .addon-checkbox-label{background:#242837;border-color:var(--line);}
html.dark-mode .editor-actions .cancel-btn{background:#242837;color:var(--ink);}
html.dark-mode .admin-product-row .thumb, html.dark-mode .image-preview{background:#242837;}
html.dark-mode .chart-toggle button{background:#242837;color:var(--muted);}
html.dark-mode .chart-toggle button.active{background:var(--teal);color:#fff;}
html.dark-mode .order-status-select{background:#242837;color:var(--ink);border-color:var(--line);}
html.dark-mode .spec-row button{background:rgba(224,104,90,.14);color:#e0685a;}

.related-picker{
  max-height:160px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:8px 12px;
}
.related-item{display:flex;align-items:center;gap:8px;font-size:.88rem;padding:6px 0;cursor:pointer;}

/* ================= الإجراءات الجماعية والـ Pagination ================= */
.bulk-action-bar{
  display:none;align-items:center;gap:12px;flex-wrap:wrap;
  background:#e7f2ef;border:1px solid var(--teal);border-radius:12px;padding:12px 16px;margin-bottom:14px;
}
.bulk-action-bar select{padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-family:inherit;}

.order-row{position:relative;padding-right:40px;}
.order-row.no-select-col{padding-right:16px;}
.order-select-cb{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;}
.edit-order-btn{white-space:nowrap;}

.pagination-bar{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px;}
.pagination-bar .page-indicator{font-size:.85rem;color:var(--muted);}
.pagination-bar button:disabled{opacity:.4;cursor:not-allowed;}

/* ================= ترتيب صور المنتج ================= */
.image-preview{position:relative;}
.cover-badge{
  position:absolute;bottom:2px;right:2px;background:var(--teal);color:#fff;
  font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:6px;
}
.image-move-controls{
  position:absolute;bottom:2px;left:2px;display:flex;gap:2px;
}
.image-move-controls button{
  background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:4px;
  width:18px;height:18px;font-size:.75rem;cursor:pointer;line-height:1;
}


/* ================= جدول الصلاحيات الدقيقة ================= */
.permission-matrix{border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.perm-row{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--line);font-size:.85rem;
}
.perm-row:last-child{border-bottom:none;}
.perm-row.perm-header{background:#f6f3ec;font-weight:700;color:var(--muted);font-size:.78rem;}
.perm-row label{display:flex;justify-content:center;cursor:pointer;}
.perm-row input[type="radio"]{width:16px;height:16px;cursor:pointer;}

.addon-checkbox-label{
  display:flex;align-items:center;gap:10px;background:#f6f3ec;border:1px dashed var(--line);
  border-radius:10px;padding:12px 14px;cursor:pointer;font-size:.9rem;
}
.addon-checkbox-label input{width:18px;height:18px;}

.cross-sell-item{
  display:flex;align-items:center;gap:10px;background:#f6f3ec;border:1px dashed var(--line);
  border-radius:10px;padding:10px 14px;cursor:pointer;font-size:.88rem;margin-bottom:8px;
}
.cross-sell-item img{width:42px;height:42px;border-radius:8px;object-fit:cover;background:#fff;flex-shrink:0;}
.cross-sell-item input{width:18px;height:18px;flex-shrink:0;}
.cross-sell-item .cs-name{flex:1;font-weight:600;color:var(--ink);}
.cross-sell-item .cs-price{font-weight:700;color:var(--teal-deep);white-space:nowrap;}

.quick-edit-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.quick-edit-input{
  width:80px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;
  font-family:inherit;font-size:.82rem;background:#fdfcf9;
}
.quick-edit-input.low{border-color:#9c3b1f;color:#9c3b1f;}

.quick-actions{display:flex;gap:6px;}
.quick-action-btn{
  width:32px;height:32px;border-radius:8px;background:#f6f3ec;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:.95rem;cursor:pointer;
  text-decoration:none;color:inherit;
}
.quick-action-btn:hover{background:var(--line);}
.phone-link{color:var(--teal-dark);font-weight:700;cursor:pointer;text-decoration:underline dotted;}
.notes-badge{
  background:#e7f2ef;color:var(--teal-dark);font-size:.72rem;font-weight:700;
  padding:2px 8px;border-radius:999px;cursor:help;
}
.waybill{max-width:500px;margin:0 auto;}
.waybill h2{margin-bottom:4px;}
.waybill h3{margin-top:0;color:var(--muted);font-weight:600;}
.waybill .print-table td{padding:10px 12px;}

.report-bar-row{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:.85rem;}
.report-label{width:140px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.report-bar-track{flex:1;background:#f0ede4;border-radius:6px;height:16px;overflow:hidden;}
.report-bar-fill{background:var(--teal);height:100%;border-radius:6px;transition:width .3s;}
.report-bar-fill.high{background:#c0392b;}
.report-value{width:100px;flex-shrink:0;text-align:left;color:var(--muted);font-size:.78rem;}

/* ==== لمسات تفاعلية وتحسينات لسرعة تجربة الطلب (Aug 2026) ==== */

/* ---- استجابة لمس واضحة على كل الأزرار — تحس إن ضغطتك اتسجلت فورًا ---- */
button, .submit, .cta-inline, .mini-cta, .sticky-cta button,
.qty-stepper button, .gallery-arrow, .product-card, .nf-btn{
  -webkit-tap-highlight-color:transparent;
}
.submit:active, .cta-inline:active, .mini-cta:active, .sticky-cta button:active,
.qty-stepper button:active, .gallery-arrow:active, .nf-btn:active{
  transform:scale(.96);
}

/* ---- وضوح التركيز بلوحة المفاتيح (إتاحة) ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--teal);outline-offset:2px;border-radius:4px;
}

/* ---- احترام تفضيل تقليل الحركة ---- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;}
}

/* ---- هيكل تحميل (Skeleton) بدل الشاشة البيضاء الفاضية ---- */
@keyframes shimmer{
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}
.skeleton{
  background:linear-gradient(90deg, #eae6d9 25%, #f4f1e9 37%, #eae6d9 63%);
  background-size:400% 100%;animation:shimmer 1.6s ease-in-out infinite;
  border-radius:12px;
}
#pageSkeleton{max-width:1100px;margin:24px auto;padding:0 24px;display:grid;grid-template-columns:1fr;gap:24px;}
@media (min-width:760px){ #pageSkeleton{grid-template-columns:1fr 1fr;align-items:start;} }
.skel-gallery{aspect-ratio:1/1;width:100%;}
.skel-line{height:16px;margin-bottom:10px;}
.skel-line.w60{width:60%;}
.skel-line.w40{width:40%;}
.skel-line.w90{width:90%;}
.skel-title{height:28px;width:80%;margin-bottom:16px;}
.skel-price{height:32px;width:35%;margin-bottom:18px;}
.skel-box{height:120px;width:100%;margin-top:18px;}

/* ---- عداد صور الجاليري ---- */
.gallery-counter{
  position:absolute;bottom:12px;left:12px;z-index:3;
  background:rgba(24,36,32,.65);color:#fff;font-size:.75rem;font-weight:700;
  padding:4px 10px;border-radius:999px;backdrop-filter:blur(4px);
}

/* ---- تكبير الصورة (Lightbox) ---- */
.lightbox-overlay{
  position:fixed;inset:0;background:rgba(10,15,13,.92);z-index:110;
  display:none;align-items:center;justify-content:center;padding:20px;
  cursor:zoom-out;
}
.lightbox-overlay.show{display:flex;}
.lightbox-overlay img{
  max-width:100%;max-height:90vh;border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:modalIn .25s ease;
}
.lightbox-close{
  position:absolute;top:18px;left:18px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;border:none;font-size:1.3rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.gallery .slide img{cursor:zoom-in;}

/* ---- ومضة على الإجمالي لما يتغيّر — بتأكد للعميل إن الحساب اتحدّث فورًا ---- */
@keyframes totalPulse{
  0%{transform:scale(1);}
  35%{transform:scale(1.08);color:var(--teal-dark);}
  100%{transform:scale(1);}
}
.total-flash{animation:totalPulse .35s ease;}

/* ---- إشعار "أهلاً بيك تاني" للعميل اللي طلب قبل كده ---- */
.welcome-back{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:#eef6f3;border:1px solid #cfe6de;border-radius:12px;
  padding:10px 14px;margin-bottom:16px;font-size:.85rem;color:var(--teal-dark);
}
.welcome-back button{
  background:none;border:none;color:var(--muted);text-decoration:underline;
  font-size:.8rem;cursor:pointer;font-family:inherit;padding:0;
}

/* =====================================================================
 * اختيار متغيرات المنتج (لون/مقاس) — صفحة المنتج للعميل، تجربة متدرّجة
 * ===================================================================== */
.variant-select-group{ margin-bottom:16px; }
.variant-select-label{
  display:block; font-weight:700; margin-bottom:8px; font-size:.92rem; color:var(--ink);
}
.variant-select-label .variant-selected-value{ font-weight:400; color:var(--muted); }
.variant-options-row{ display:flex; flex-wrap:wrap; gap:8px; }

.variant-color-btn{
  display:flex; align-items:center; gap:7px;
  padding:8px 14px; border:1.5px solid var(--line); border-radius:999px;
  background:var(--panel); cursor:pointer; font-size:.85rem; font-family:inherit;
  color:var(--ink); transition:border-color .15s ease, background .15s ease;
}
.variant-color-btn .swatch-dot{
  width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,.15); flex:none;
}
.variant-color-btn:hover{ border-color:var(--teal); }
.variant-color-btn.is-selected{
  border-color:var(--teal); background:rgba(14,107,92,.08); font-weight:600;
}

.variant-size-btn{
  min-width:46px; padding:9px 14px; border:1.5px solid var(--line); border-radius:8px;
  background:var(--panel); cursor:pointer; font-size:.85rem; font-family:inherit;
  color:var(--ink); text-align:center; transition:border-color .15s ease, background .15s ease;
}
.variant-size-btn:hover{ border-color:var(--teal); }
.variant-size-btn.is-selected{
  border-color:var(--teal); background:rgba(14,107,92,.08); font-weight:700;
}
.variant-size-btn.is-disabled{
  color:var(--muted); text-decoration:line-through; cursor:not-allowed;
  background:rgba(0,0,0,.03); border-color:var(--line); opacity:.7;
}
.variant-size-btn.is-disabled:hover{ border-color:var(--line); }
.variant-size-out-tag{ display:block; font-size:.65rem; text-decoration:none; margin-top:1px; }

.variant-size-placeholder{
  font-size:.85rem; color:var(--muted); border:1px dashed var(--line); border-radius:8px;
  padding:10px 12px; background:rgba(0,0,0,.02);
}

html.dark-mode .variant-color-btn,
html.dark-mode .variant-size-btn{ background:var(--panel); color:var(--ink); }
html.dark-mode .variant-color-btn.is-selected,
html.dark-mode .variant-size-btn.is-selected{ background:rgba(255,255,255,.08); }
html.dark-mode .variant-size-btn.is-disabled{ background:rgba(255,255,255,.04); }
html.dark-mode .variant-size-placeholder{ background:rgba(255,255,255,.04); }