/* ============================================================
   styles.css — هوية المتجر (مبنية على الـ Mockup المعتمد)
   لتغيير البراند لاحقًا: عدّل --brand والشعار في الصفحات فقط
   ============================================================ */
:root{
  --ink:#12151c; --ink-soft:#5a6070;
  --bg:#ffffff; --bg-dim:#f4f5f8; --line:#e6e8ee;
  --brand:#1f4fff; --brand-ink:#ffffff;
  --go:#0aa574; --warn:#b7791f; --err:#c0392b;
  --radius:14px; --shadow:0 8px 28px rgba(18,21,28,.09);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg-dim);line-height:1.55}
h1,h2,h3,.disp{font-family:'Space Grotesk',sans-serif;letter-spacing:-.01em}
button{font:inherit;cursor:pointer;border:0}
a{color:inherit}
input,select{font:inherit;width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input:focus,select:focus,button:focus-visible{outline:3px solid rgba(31,79,255,.35);outline-offset:1px}
input.bad,select.bad{border-color:var(--err)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.page{max-width:520px;margin:0 auto;min-height:100vh;background:var(--bg);display:flex;flex-direction:column}
.store-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.logo{font-family:'Space Grotesk';font-weight:700;font-size:1.15rem;text-decoration:none}
.logo .dot{color:var(--brand)}
.mini{background:var(--bg-dim);border-radius:10px;padding:8px 12px;font-size:.85rem;font-weight:600;text-decoration:none}
.wrap{padding:20px;flex:1}

/* --- product --- */
.viral{display:inline-flex;align-items:center;gap:7px;background:#fff3e6;color:#9a4d00;border:1px solid #ffd9ad;border-radius:999px;padding:5px 12px;font-size:.75rem;font-weight:600}
.viral .pulse{width:8px;height:8px;border-radius:50%;background:#ff7a00;animation:pu 1.6s infinite}
@keyframes pu{0%,100%{opacity:1}50%{opacity:.35}}
.pshot{margin:16px 0;border-radius:var(--radius);aspect-ratio:1/1;overflow:hidden;background:radial-gradient(120% 120% at 20% 15%,#dfe7ff 0%,#b9c9ff 40%,#7e9bff 100%);display:grid;place-items:center}
.pshot img{width:100%;height:100%;object-fit:cover}
.pshot .ph{font:700 1rem 'Space Grotesk';color:#26346e;text-align:center;padding:20px}
h1.pname{font-size:1.5rem;margin-top:6px}
.pdesc{color:var(--ink-soft);font-size:.9rem;margin-top:6px}
.price{display:flex;align-items:baseline;gap:10px;margin:12px 0 4px}
.price b{font-size:1.7rem;font-family:'Space Grotesk'}
.opt-label{font-weight:600;font-size:.85rem;margin:16px 0 8px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:10px 16px;font-weight:500}
.chips button[aria-pressed="true"]{border-color:var(--brand);background:#eef2ff;font-weight:600}
.chips button:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.trust div{background:var(--bg-dim);border-radius:10px;padding:12px;font-size:.8rem}
.trust b{display:block;font-size:.82rem}
.trust span{color:var(--ink-soft)}

.buybar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:14px 20px;display:flex;gap:12px;align-items:center}
.buybar .p{font:700 1.2rem 'Space Grotesk'}
.cta{flex:1;background:var(--brand);color:var(--brand-ink);border-radius:12px;padding:15px;font-weight:600;font-size:1rem;box-shadow:var(--shadow);text-align:center;text-decoration:none}
.cta:active{transform:translateY(1px)}
.cta:disabled{opacity:.6;cursor:wait}

/* --- checkout --- */
h2.sec{font-size:1.05rem;margin:20px 0 12px}
.field{margin-bottom:12px}
.field label{display:block;font-size:.8rem;font-weight:600;margin-bottom:6px;color:var(--ink-soft)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-size:.72rem;color:var(--ink-soft);margin-top:4px}
.err-msg{color:var(--err);font-size:.8rem;margin-top:6px;display:none}
.err-msg.on{display:block}
.pay{display:grid;gap:10px}
.pay label{display:flex;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.pay label.sel{border-color:var(--brand);background:#eef2ff}
.pay label.off{opacity:.55}
.pay input{width:auto}
.pay b{font-size:.9rem;display:block}
.pay span{font-size:.75rem;color:var(--ink-soft)}
.badge{margin-inline-start:auto;font-size:.65rem;font-weight:700;border-radius:6px;padding:3px 8px;background:#e7f7f0;color:var(--go);white-space:nowrap}
.badge.soon{background:#fff3e6;color:var(--warn)}
.summary{background:var(--bg-dim);border-radius:12px;padding:16px;margin-top:18px;font-size:.9rem}
.summary .row{display:flex;justify-content:space-between;margin-bottom:8px}
.summary .tot{border-top:1px solid var(--line);padding-top:10px;font-weight:700;font-size:1rem}

/* --- tracking --- */
.track-hero{background:linear-gradient(135deg,#12151c,#26346e);color:#fff;padding:28px 20px}
.track-hero h1{font-size:1.35rem}
.track-hero p{opacity:.7;font-size:.85rem}
.track-form{display:grid;gap:10px;margin-top:14px}
.track-form input{border:0}
.track-form button{background:var(--brand);color:#fff;border-radius:10px;padding:13px;font-weight:600}
.ship{border:1.5px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px;background:#fff}
.ship .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.st{font-weight:700;font-size:.8rem;border-radius:999px;padding:5px 12px}
.st.ok{background:#e7f7f0;color:var(--go)}
.st.prep{background:#eef2ff;color:var(--brand)}
.tl{list-style:none}
.tl li{position:relative;padding:0 0 18px 26px;font-size:.85rem}
.tl li::before{content:"";position:absolute;left:7px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--line)}
.tl li::after{content:"";position:absolute;left:10.5px;top:16px;bottom:-2px;width:1.5px;background:var(--line)}
.tl li:last-child::after{display:none}
.tl li.on::before{background:var(--go)}
.tl li b{display:block}
.tl li span{color:var(--ink-soft);font-size:.75rem}
.tnum{font-size:.75rem;color:var(--ink-soft);margin-top:8px}
.tnum code{background:var(--bg-dim);padding:2px 8px;border-radius:6px}

.note{background:#fff8ec;border:1px solid #ffe2b0;border-radius:10px;padding:12px;font-size:.8rem;color:#7a5200;margin-top:14px}
.foot{padding:20px;border-top:1px solid var(--line);font-size:.75rem;color:var(--ink-soft);display:flex;gap:14px;flex-wrap:wrap}
.spin{display:inline-block;width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}

/* أسعار الخصم (Grid + صفحة المنتج) */
.green{color:#1e8e3e}
.save{color:#1e8e3e;font:600 .8rem 'Inter'}
.price s{font-size:1rem}


/* --- العربية و RTL --- */
[lang="ar"] body, [dir="rtl"] body, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] button{
  font-family:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif}
[dir="rtl"] .tl li{padding:0 26px 18px 0}
[dir="rtl"] .tl li::before{left:auto;right:7px}
[dir="rtl"] .tl li::after{left:auto;right:10.5px}
[dir="rtl"] .search .go{right:auto;left:6px}
[dir="rtl"] .search input{padding:13px 16px 13px 44px}


/* ============================================================
   v2.3.1 — تخطيطات الديسكتوب (الموبايل يبقى كما هو تمامًا)
   ============================================================ */

/* إصلاح كسر اسم التصنيف حول الأيقونة */
.cat{min-width:70px;white-space:nowrap}

@media (min-width: 900px){

  /* --- صفحة المنتج: الصورة جنب التفاصيل --- */
  .p-product .page{max-width:1080px}
  .p-product .wrap{display:grid;grid-template-columns:480px 1fr;gap:6px 40px;align-items:start}
  .p-product .wrap > *{grid-column:2}
  .p-product .wrap .pshot{grid-column:1;grid-row:1 / span 20;margin:0;position:sticky;top:20px}
  .p-product .buybar{position:static;border:0;padding:18px 0 0;max-width:520px;margin-inline-start:auto}
  [dir="rtl"] .p-product .buybar{margin-inline-start:auto}
  .p-product .foot{justify-content:center}

  /* --- صفحة الدفع: الفورم جنب ملخص الطلب --- */
  .p-checkout .page{max-width:1000px}
  .p-checkout .wrap{display:grid;grid-template-columns:1fr 360px;gap:0 44px;align-items:start}
  .p-checkout .wrap > *{grid-column:1}
  .p-checkout .wrap .summary{grid-column:2;grid-row:1 / span 30;position:sticky;top:20px;margin-top:44px}
  .p-checkout .buybar{position:static;border:0;max-width:560px;padding-inline:20px}

  /* --- التتبع والشكر: عرض مريح --- */
  .p-ty .page{max-width:760px}
  .p-track .track-form button{padding:13px 32px}

  /* --- الرئيسية: الشبكة الحالية ممتازة، فقط راحة أكبر --- */
  .p-home .grid{padding:22px}
}

@media (min-width: 1200px){
  .p-home .page{max-width:1280px}
  .p-home .grid{grid-template-columns:repeat(5,1fr)}
}

/* ============================================================
   الفوتر الموحّد + الصفحات المؤسسية
   ============================================================ */
.site-foot{background:var(--ink);color:#cfd4e0;padding:36px 20px 20px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:1fr;gap:26px;max-width:1080px;margin:0 auto}
@media(min-width:720px){.foot-grid{grid-template-columns:repeat(4,1fr)}}
.foot-col h4{font-size:.85rem;color:#fff;margin-bottom:12px;letter-spacing:.03em}
.foot-col a{display:block;color:#cfd4e0;text-decoration:none;font-size:.85rem;margin-bottom:8px;opacity:.85}
.foot-col a:hover{opacity:1;text-decoration:underline}
.foot-about p{font-size:.8rem;line-height:1.6;opacity:.75}
.foot-about .logo{color:#fff}
.pay{margin-top:14px;font-size:.75rem}
.pay b{display:block;color:#fff;margin-bottom:4px}
.pay span{opacity:.75}
.foot-bottom{max-width:1080px;margin:26px auto 0;padding-top:16px;border-top:1px solid #2a2f3c;
  font-size:.75rem;opacity:.6;text-align:center}

/* صفحات المحتوى */
.doc{max-width:760px;margin:0 auto;padding:28px 20px 10px}
.doc h1{font-size:1.5rem;margin-bottom:6px}
.doc .upd{color:var(--ink-soft);font-size:.78rem;margin-bottom:22px}
.doc h2{font-size:1.05rem;margin:24px 0 8px}
.doc p,.doc li{font-size:.92rem;line-height:1.75;color:#2c3240}
.doc ul{margin:8px 0 8px 20px}
[dir="rtl"] .doc ul{margin:8px 20px 8px 0}
.doc .box{background:var(--bg-dim);border-radius:12px;padding:16px;margin:16px 0;font-size:.88rem}
.doc a{color:var(--brand)}
.qa{border-bottom:1px solid var(--line);padding:14px 0}
.qa b{display:block;margin-bottom:6px;font-size:.95rem}
.qa p{margin:0;color:var(--ink-soft);font-size:.88rem}

/* --- صفحة التتبع: تنسيق وارتفاع مناسب --- */
.p-track .page{display:flex;flex-direction:column;min-height:100vh}
.p-track .track-hero{margin:0;padding:34px 20px 40px}
.p-track .track-hero h1{margin-bottom:4px}
.p-track .wrap{flex:1;min-height:220px}
.p-track .store-head{max-width:760px;margin:0 auto;width:100%}
.p-track .track-hero > *{max-width:760px;margin-inline:auto}
@media(min-width:720px){
  .p-track .track-form{grid-template-columns:1fr 1fr auto}
}

/* --- زر العودة لأعلى (كل الصفحات) --- */
.to-top{
  position:fixed; bottom:22px; inset-inline-end:18px; z-index:60;
  width:46px; height:46px; border-radius:50%;
  background:var(--brand); color:#fff; font-size:1.35rem; line-height:1;
  box-shadow:0 6px 20px rgba(31,79,255,.35);
  display:grid; place-items:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.to-top.show{opacity:1; visibility:visible; transform:translateY(0)}
.to-top:hover{filter:brightness(1.08)}
.to-top:active{transform:translateY(1px)}
/* فوق شريط الشراء الثابت في صفحات المنتج والدفع */
.p-product .to-top, .p-checkout .to-top{bottom:86px}
@media(min-width:900px){.p-product .to-top,.p-checkout .to-top{bottom:22px}}

/* ============================================================
   صفحة التتبع — عرض كامل ومتناسق (يلغي أي قواعد سابقة)
   ============================================================ */
.p-track .page{
  max-width:100% !important;
  display:flex; flex-direction:column; min-height:100vh;
}
.p-track .store-head{max-width:1080px; margin:0 auto; width:100%}
.p-track .track-hero{padding:40px 20px 46px}
.p-track .track-hero > *{max-width:900px; margin-inline:auto}
.p-track .wrap{max-width:900px; margin:0 auto; width:100%; flex:1}
.p-track .site-foot{margin-top:auto}

@media(min-width:720px){
  .p-track .track-form{
    display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:stretch;
  }
  .p-track .track-hero h1{font-size:1.7rem}
}
/* الشحنات جنب بعض على الشاشات الكبيرة */
@media(min-width:900px){
  .p-track .wrap{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; padding-top:22px}
  .p-track .wrap > h2.sec{grid-column:1 / -1; margin-top:0}
  .p-track .wrap > .err-msg, .p-track .wrap > p{grid-column:1 / -1}
  .p-track .ship{margin-bottom:0}
}

/* --- شعار Rozvella --- */
.logo{display:inline-flex;align-items:center;gap:8px}
.rose{width:26px;height:26px;flex:0 0 auto}
.top .logo .rose{filter:brightness(0) invert(1)}          /* أبيض على الهيدر الأزرق */
.site-foot .logo .rose{filter:brightness(0) invert(1)}    /* أبيض على الفوتر الداكن */
.track-hero .logo .rose{filter:brightness(0) invert(1)}