/* ========= الطباعة الرقمية | تصميم عام للموقع ========= */
:root{
  --primary:#2d6cdf;
  --primary-dark:#1f56b8;
  --ink:#1a1a2e;
  --muted:#666;
  --line:#e2e6ec;
  --bg:#f4f6fa;
  --footer-bg:#1b2233;
  --footer-bg-2:#232c42;
  --footer-text:#aab2c5;
  --whatsapp:#25D366;
  --radius:14px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Segoe UI', Tahoma, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:40;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(20,30,60,.04);
}
.site-header .header-inner{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
}
.header-icons{ display:flex; align-items:center; gap:18px; }
.icon-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  background:none; border:none; color:var(--ink);
}
.icon-btn svg{ width:23px; height:23px; }
.badge{
  position:absolute; top:-2px; left:-2px;
  background:#e6303f; color:#fff;
  font-size:11px; font-weight:700;
  min-width:18px; height:18px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  padding:0 4px; line-height:1;
}
.brand-logo{
  display:flex; align-items:center; gap:10px;
  text-align:center;
}
.brand-logo .brand-icon{
  width:44px; height:44px; border-radius:12px; overflow:hidden;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:0 6px 14px rgba(45,108,223,.28);
  flex-shrink:0;
}
.brand-logo .brand-icon img{ width:100%; height:100%; object-fit:cover; }
.brand-logo .brand-name{ font-size:17px; font-weight:800; color:var(--ink); }
.brand-logo .brand-sub{ font-size:11px; color:var(--muted); font-weight:600; }

/* ===== Page title band ===== */
.page-title-band{
  background:var(--ink);
  color:#fff;
  padding:34px 18px 26px;
  text-align:center;
}
.page-title-band h1{ font-size:26px; font-weight:800; margin-bottom:8px; }
.page-title-band .crumbs{ font-size:13px; color:#c6cbe0; }
.page-title-band .crumbs a{ color:#fff; font-weight:700; }

/* ===== Sidebar (off-canvas) ===== */
.overlay{
  position:fixed; inset:0; background:rgba(10,14,25,.5);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
  z-index:60;
}
.overlay.open{ opacity:1; pointer-events:auto; }

.sidebar{
  position:fixed; top:0; bottom:0; right:0;
  width:82%; max-width:320px;
  background:#fff;
  transform:translateX(100%);
  transition:transform .28s ease;
  z-index:70;
  display:flex; flex-direction:column;
  box-shadow:-8px 0 30px rgba(0,0,0,.15);
}
.sidebar.open{ transform:translateX(0); }

.sidebar-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px; border-bottom:1px solid var(--line);
}
.sidebar-head .brand-logo .brand-name{ font-size:15px; }
.sidebar-close{
  width:34px; height:34px; border-radius:50%;
  background:var(--bg); border:none;
  display:flex; align-items:center; justify-content:center;
}
.sidebar-close svg{ width:18px; height:18px; }

.sidebar-nav{ padding:10px 8px; overflow-y:auto; }
.sidebar-nav a{
  display:flex; align-items:center; gap:12px;
  padding:14px 14px; border-radius:10px;
  font-size:15px; font-weight:700; color:var(--ink);
}
.sidebar-nav a:hover, .sidebar-nav a.active{ background:var(--bg); color:var(--primary); }
.sidebar-nav a svg{ width:20px; height:20px; flex-shrink:0; color:var(--primary); }
.sidebar-nav .divider{ height:1px; background:var(--line); margin:10px 6px; }

.sidebar-foot{
  margin-top:auto; padding:18px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted); text-align:center;
}
.sidebar-foot .wa-link{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--whatsapp); color:#fff; font-weight:700;
  padding:11px; border-radius:10px; margin-bottom:10px;
}
.sidebar-foot .wa-link svg{ width:18px; height:18px; }

/* ===== Main content ===== */
main{ flex:1; }
.container{ max-width:1100px; margin:0 auto; padding:0 18px; }

/* ===== Product / content card (reused across pages) ===== */
.content-wrap{ display:flex; justify-content:center; padding:32px 16px 44px; }
.card{
  background:#fff; border-radius:18px;
  box-shadow:0 10px 40px rgba(0,0,0,.07);
  padding:30px 26px; width:100%; max-width:440px;
}
.card.wide{ max-width:620px; }

.section-title{ text-align:center; font-size:20px; font-weight:800; margin:6px 0 22px; }

.product{
  display:flex; align-items:center; gap:14px;
  padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:22px;
}
.product-icon{
  width:52px; height:52px; border-radius:12px;
  background:#eef4ff; display:flex; align-items:center; justify-content:center;
  font-size:24px; flex-shrink:0;
}
.product-info h2{ font-size:17px; margin-bottom:4px; }
.product-info .price{ font-size:14px; color:var(--primary); font-weight:700; }

.qty-box{ margin-bottom:18px; text-align:right; }
label{ display:block; font-size:13px; color:#888; margin-bottom:8px; font-weight:600; }
input[type="number"]{
  width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:10px;
  font-size:19px; text-align:center; font-weight:700; color:var(--ink);
  background:#f9fafc; transition:border-color .2s, background .2s;
}
input[type="number"]:focus{ outline:none; border-color:var(--primary); background:#fff; }

.total-box{
  display:flex; justify-content:space-between; align-items:center;
  background:#f9fafc; border-radius:10px; padding:14px 16px; margin-bottom:22px;
}
.total-box .label{ font-size:14px; color:#666; font-weight:600; }
.total-box .value{ font-size:20px; color:var(--ink); font-weight:800; }

.btn-primary{
  width:100%; padding:15px; border:none; border-radius:10px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; font-size:16px; font-weight:700;
  box-shadow:0 6px 16px rgba(45,108,223,.3);
  transition:transform .15s, box-shadow .15s;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(45,108,223,.4); }
.btn-primary:active{ transform:translateY(0); }

.link-inline{ color:var(--primary); font-weight:700; }
.back-link{ display:block; text-align:center; margin-top:22px; color:var(--primary); font-weight:700; font-size:14px; }

/* ===== Legal / policy content ===== */
.legal h2{ font-size:18px; text-align:center; margin-bottom:20px; }
.legal h3{ font-size:15px; color:var(--primary); margin:20px 0 8px; }
.legal h3:first-of-type{ margin-top:0; }
.legal p, .legal li{ font-size:14px; color:#555; line-height:1.9; }
.legal ul{ padding-right:20px; margin-top:6px; }

/* ===== Footer ===== */
.site-footer{
  background:var(--footer-bg); color:var(--footer-text);
  margin-top:auto;
}
.footer-top{ padding:38px 18px 26px; }
.footer-grid{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:26px;
}
.footer-block h4{ color:#fff; font-size:15px; margin-bottom:14px; font-weight:800; }
.footer-block p, .footer-block li{ font-size:13.5px; line-height:2; color:var(--footer-text); }
.footer-block ul{ list-style:none; }
.footer-block .contact-row{ display:flex; align-items:flex-start; gap:8px; margin-bottom:6px; }
.footer-block .contact-row svg{ width:16px; height:16px; flex-shrink:0; margin-top:3px; color:var(--primary); }
.footer-block .contact-row span{ direction:ltr; unicode-bidi:isolate; }

.national-address{
  background:var(--footer-bg-2); border-radius:12px; padding:16px 18px;
}
.national-address .na-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.national-address .na-head svg{ width:18px; height:18px; color:var(--primary); }
.national-address .na-head span{ color:#fff; font-weight:800; font-size:14px; }
.national-address .short-code{
  display:inline-block; background:var(--primary); color:#fff;
  font-weight:800; letter-spacing:1px; padding:4px 10px; border-radius:6px;
  font-size:13px; margin-bottom:8px; direction:ltr;
}
.national-address p{ font-size:13px; line-height:1.9; color:var(--footer-text); }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:16px 18px; text-align:center; font-size:12.5px; color:#8891a6;
}
.footer-bottom .phone{ direction:ltr; display:inline-block; font-weight:700; color:#c6cbe0; }

/* ===== WhatsApp floating button ===== */
.wa-float{
  position:fixed; bottom:22px; left:18px; z-index:50;
  width:56px; height:56px; border-radius:50%;
  background:var(--whatsapp); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(37,211,102,.4);
}
.wa-float svg{ width:28px; height:28px; }

@media (min-width:640px){
  .footer-grid{ grid-template-columns:1.1fr 1fr 1fr; }
}

/* ===== Page entrance (single orchestrated reveal on load) ===== */
body{ opacity:0; }
body.is-ready{
  opacity:1;
  transition:opacity .35s ease;
}
.card{
  animation:card-rise .5s cubic-bezier(.19,1,.22,1) both;
  animation-delay:.08s;
}
@keyframes card-rise{
  from{ opacity:0; transform:translateY(18px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ===== Outgoing page transition (e.g. heading to payment) ===== */
body.is-leaving{
  opacity:0;
  transform:scale(.99);
  transition:opacity .32s ease, transform .32s ease;
}

/* Loading state inside the pay button while redirecting */
.btn-primary.is-loading{
  pointer-events:none;
  opacity:.85;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.btn-primary .spinner{
  width:17px; height:17px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
  flex-shrink:0;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
  body, body.is-ready, body.is-leaving, .card, .btn-primary .spinner{
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}