:root{
    --navy:#0a0f2e;
    --navy-2:#161d5c;
    --violet:#3d1a8f;
    --blue:#2440ff;
    --blue-2:#4d7bff;
    --cyan:#2ff2ff;
    --gold:#ffd12e;
    --gold-2:#ff7a1f;
    --ink:#0a0f2e;
    --paper:#f4f7fd;
    --white:#ffffff;
    --line:#e3e9f7;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Cairo', sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,.brand,.price,.btn,.badge,.stat-num{font-family:'Tajawal', sans-serif;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1100px; margin:0 auto; padding:0 20px;}
  a{color:inherit; text-decoration:none;}

  /* ===== Top bar ===== */
  .topbar{
    background:var(--navy);
    color:#cfe0ff;
    text-align:center;
    font-size:.85rem;
    padding:8px 10px;
    font-weight:700;
    letter-spacing:.3px;
  }
  .topbar span{color:var(--cyan);}

  /* ===== Header ===== */
  header{
    background:linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 55%, var(--violet) 130%);
    padding:16px 0;
    border-bottom:1px solid rgba(62,233,255,.15);
  }
  .header-inner{display:flex; align-items:center; justify-content:space-between;}
  .brand{
    font-size:1.55rem;
    font-weight:900;
    display:flex; align-items:center; gap:8px;
    letter-spacing:.5px;
    background:linear-gradient(90deg, #ffffff 0%, var(--cyan) 55%, var(--blue-2) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-transform:uppercase;
  }
  .brand .dot{
    width:10px; height:10px; border-radius:50%;
    background:linear-gradient(135deg, var(--gold), var(--gold-2));
    box-shadow:0 0 12px var(--gold);
  }
  .header-cta{
    background:linear-gradient(135deg, var(--gold), var(--gold-2));
    color:var(--navy);
    font-weight:800;
    padding:9px 18px;
    border-radius:30px;
    font-size:.85rem;
    box-shadow:0 4px 14px rgba(255,157,31,.4);
  }

  /* ===== Hero ===== */
  .hero{
    background:radial-gradient(circle at 15% 15%, #22208f 0%, #141c66 35%, var(--navy) 68%, #050817 100%);
    color:var(--white);
    position:relative;
    padding:46px 0 54px;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(550px 320px at 85% 8%, rgba(47,242,255,.28), transparent 60%),
      radial-gradient(450px 280px at 8% 92%, rgba(255,209,46,.20), transparent 60%),
      radial-gradient(380px 260px at 50% 50%, rgba(61,26,143,.35), transparent 65%);
    pointer-events:none;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:34px;
    align-items:center;
    position:relative; z-index:2;
  }
  .urgency-badge{
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,194,31,.5);
    color:var(--gold);
    font-weight:700;
    font-size:.8rem;
    padding:7px 14px;
    border-radius:30px;
    margin-bottom:16px;
    animation:pulseGlow 2.2s infinite;
  }
  .urgency-badge .dot-live{
    width:8px; height:8px; border-radius:50%;
    background:#ff4757;
    box-shadow:0 0 8px #ff4757;
    animation:blink 1.2s infinite;
  }
  @keyframes blink{0%,100%{opacity:1;} 50%{opacity:.25;}}
  @keyframes pulseGlow{
    0%,100%{box-shadow:0 0 0 0 rgba(255,194,31,.25);}
    50%{box-shadow:0 0 0 8px rgba(255,194,31,0);}
  }
  .hero h1{
    font-size:2.35rem;
    font-weight:900;
    line-height:1.28;
    margin-bottom:14px;
  }
  .hero h1 em{
    font-style:normal;
    background:linear-gradient(90deg, var(--cyan), var(--blue-2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero p.lead{
    color:#c3d1f5;
    font-size:1.02rem;
    max-width:480px;
    margin-bottom:22px;
  }
  .hero-points{
    list-style:none;
    display:flex; flex-direction:column; gap:10px;
    margin-bottom:26px;
  }
  .hero-points li{
    display:flex; align-items:center; gap:10px;
    font-weight:700;
    font-size:.95rem;
  }
  .check{
    width:22px; height:22px; min-width:22px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--blue-2), var(--cyan));
    display:flex; align-items:center; justify-content:center;
    font-size:.75rem;
    color:var(--navy);
    font-weight:900;
  }
  .price-block{
    display:flex; align-items:flex-end; gap:14px;
    margin-bottom:22px;
    flex-wrap:wrap;
  }
  .price-old{
    color:#8fa0d1;
    font-size:1.1rem;
    text-decoration:line-through;
    font-weight:700;
  }
  .price-new{
    font-size:3.1rem;
    font-weight:900;
    background:linear-gradient(90deg, var(--gold), var(--gold-2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    line-height:1;
  }
  .price-new sup{font-size:1.2rem; color:var(--gold);}
  .save-tag{
    background:rgba(255,71,87,.18);
    color:#ff6b7a;
    border:1px solid rgba(255,71,87,.5);
    font-weight:800;
    font-size:.78rem;
    padding:5px 12px;
    border-radius:20px;
    align-self:center;
  }
  .btn-cta{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    background:linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
    color:var(--navy);
    font-weight:900;
    font-size:1.08rem;
    padding:17px 30px;
    border-radius:14px;
    box-shadow:0 10px 26px rgba(255,157,31,.4);
    border:none; cursor:pointer;
    width:100%; max-width:400px;
    animation:ctaBreathe 2.4s ease-in-out infinite;
  }
  @keyframes ctaBreathe{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.025);}
  }
  .hero-sub-note{
    margin-top:10px;
    font-size:.8rem;
    color:#9fb0da;
  }

  /* ===== Hero pack visual ===== */
  .pack-visual{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    min-height:420px;
  }
  .pack-glow{
    position:absolute;
    width:340px; height:340px;
    background:radial-gradient(circle, rgba(62,233,255,.35), transparent 70%);
    filter:blur(10px);
    animation:float1 6s ease-in-out infinite;
  }
  .pack-frame{
    position:relative;
    width:100%;
    max-width:460px;
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    z-index:2;
  }
  .pack-card{
    background:linear-gradient(160deg, #ffffff, #eef3ff);
    border-radius:18px;
    padding:10px;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    overflow:hidden;
    position:relative;
    animation:float2 5s ease-in-out infinite;
  }
  .pack-card img{
    border-radius:12px;
    width:100%;
    height:340px;
    object-fit:cover;
  }
  .pack-card:nth-child(2){animation-delay:.4s;}
  .pack-card:nth-child(3){animation-delay:.8s;}
  .pack-card:nth-child(4){animation-delay:1.2s;}
  .pack-card .qty-pill{
    position:absolute; top:16px; left:16px;
    background:linear-gradient(135deg, var(--blue), var(--cyan));
    color:#fff;
    font-size:.72rem;
    font-weight:900;
    padding:3px 10px;
    border-radius:20px;
    box-shadow:0 4px 10px rgba(26,85,255,.5);
  }
  @keyframes float1{
    0%,100%{transform:translateY(0) scale(1);}
    50%{transform:translateY(-14px) scale(1.04);}
  }
  @keyframes float2{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
  }
  .gift-ribbon{
    position:absolute; bottom:-10px; right:50%; transform:translateX(50%);
    background:linear-gradient(90deg, #ff4757, #ff6b7a);
    color:#fff;
    font-weight:800;
    font-size:.8rem;
    padding:8px 20px;
    border-radius:30px;
    box-shadow:0 8px 20px rgba(255,71,87,.45);
    white-space:nowrap;
    z-index:3;
  }

  /* ===== Free delivery strip ===== */
  .delivery-strip{
    background:linear-gradient(90deg, var(--violet), var(--blue) 45%, var(--cyan) 100%);
    color:#fff;
    text-align:center;
    padding:13px 12px;
    font-weight:800;
    font-size:.95rem;
    letter-spacing:.2px;
  }

  /* ===== Section titles ===== */
  .section{padding:52px 0;}
  .section-title{
    text-align:center;
    font-size:1.9rem;
    font-weight:900;
    color:var(--navy);
    margin-bottom:8px;
  }
  .section-sub{
    text-align:center;
    color:#5b6a92;
    max-width:520px;
    margin:0 auto 34px;
    font-size:.98rem;
  }

  /* ===== Bundle items ===== */
  .bundle-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
  }
  .item-card{
    background:var(--white);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 28px rgba(16,28,71,.08);
    border:1px solid var(--line);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .item-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 34px rgba(16,28,71,.14);
  }
  .item-img-wrap{
    position:relative;
    height:200px;
    overflow:hidden;
    background:#eef3ff;
  }
  .item-img-wrap img{
    width:100%; height:100%; object-fit:cover;
    transition:transform .5s ease;
  }
  .item-card:hover .item-img-wrap img{transform:scale(1.08);}
  .item-badge{
    position:absolute; top:10px; right:10px;
    background:linear-gradient(135deg, var(--blue), var(--cyan));
    color:#fff; font-weight:900; font-size:.78rem;
    padding:4px 11px; border-radius:20px;
  }
  .item-body{padding:14px 16px 18px;}
  .item-body h3{font-size:1.02rem; font-weight:800; margin-bottom:4px; color:var(--navy);}
  .item-body p{font-size:.85rem; color:#6b7999;}

  /* ===== Value strip (why buy) ===== */
  .value-strip{
    background:linear-gradient(100deg, var(--navy) 0%, var(--navy-2) 50%, var(--violet) 140%);
    padding:38px 0;
  }
  .value-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
    text-align:center;
  }
  .value-item{color:#dbe6ff;}
  .value-item .ic{font-size:1.7rem; margin-bottom:8px;}
  .value-item strong{display:block; color:#fff; font-size:.95rem; margin-bottom:2px; font-weight:800;}
  .value-item span{font-size:.8rem; color:#9fb0da;}

  /* ===== Order form ===== */
  .order-section{
    background:linear-gradient(180deg, #eef3ff 0%, var(--paper) 100%);
  }
  .order-box{
    max-width:560px;
    margin:0 auto;
    background:var(--white);
    border-radius:22px;
    box-shadow:0 20px 50px rgba(16,28,71,.12);
    border:1px solid var(--line);
    overflow:hidden;
  }
  .order-head{
    background:linear-gradient(135deg, var(--navy), var(--violet) 120%);
    color:#fff;
    text-align:center;
    padding:22px 20px;
  }
  .order-head .price-new{font-size:2.4rem;}
  .order-head p{color:#9fb0da; font-size:.85rem; margin-top:4px;}
  .order-form{padding:26px 24px 28px;}
  .field{margin-bottom:14px;}
  .field label{
    display:block; font-size:.85rem; font-weight:700; margin-bottom:6px; color:var(--navy);
  }
  .field input, .field select{
    width:100%;
    padding:13px 14px;
    border:1.5px solid var(--line);
    border-radius:10px;
    font-family:'Cairo', sans-serif;
    font-size:.95rem;
    background:#fbfcff;
    color:var(--ink);
    outline:none;
    transition:border-color .2s ease;
  }
  .field input:focus, .field select:focus{border-color:var(--blue-2);}
  .qty-row{display:flex; align-items:center; gap:12px;}
  .qty-box{
    display:flex; align-items:center;
    border:1.5px solid var(--line);
    border-radius:10px;
    overflow:hidden;
  }
  .qty-box button{
    background:var(--paper);
    border:none;
    width:42px; height:44px;
    font-size:1.2rem; font-weight:800;
    color:var(--blue);
    cursor:pointer;
  }
  .qty-box input{
    width:50px; text-align:center; border:none; font-weight:800; font-size:1rem;
  }
  .total-line{
    display:flex; justify-content:space-between; align-items:center;
    background:var(--paper);
    border-radius:12px;
    padding:12px 16px;
    margin:16px 0;
    font-weight:800;
  }
  .total-line .amt{color:var(--blue); font-size:1.2rem;}
  .submit-btn{
    width:100%;
    background:linear-gradient(135deg, var(--gold), var(--gold-2));
    color:var(--navy);
    border:none;
    padding:17px;
    border-radius:12px;
    font-weight:900;
    font-size:1.05rem;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(255,157,31,.35);
    animation:ctaBreathe 2.4s ease-in-out infinite;
  }
  .trust-row{
    display:flex; justify-content:center; gap:18px;
    margin-top:14px;
    flex-wrap:wrap;
  }
  .trust-row span{
    font-size:.78rem; color:#6b7999; font-weight:700;
    display:flex; align-items:center; gap:5px;
  }

  /* ===== Testimonials ===== */
  .testi-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
  }
  .testi-card{
    background:var(--white);
    border-radius:16px;
    padding:20px;
    border:1px solid var(--line);
    box-shadow:0 8px 22px rgba(16,28,71,.06);
  }
  .stars{color:var(--gold-2); font-size:.9rem; margin-bottom:10px; letter-spacing:2px;}
  .testi-card p{font-size:.9rem; color:#3c4869; margin-bottom:14px;}
  .testi-user{display:flex; align-items:center; gap:10px;}
  .avatar{
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg, var(--blue), var(--cyan));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:900; font-size:.85rem;
  }
  .testi-user strong{display:block; font-size:.85rem; color:var(--navy);}
  .testi-user span{font-size:.75rem; color:#8593b8;}

  /* ===== Final CTA ===== */
  .final-cta{
    background:linear-gradient(120deg, var(--navy) 0%, var(--violet) 55%, var(--navy) 100%);
    color:#fff;
    text-align:center;
    padding:44px 20px;
  }
  .final-cta h2{font-size:1.7rem; font-weight:900; margin-bottom:10px;}
  .final-cta p{color:#c3d1f5; margin-bottom:22px; font-size:.95rem;}

  /* ===== Footer ===== */
  footer{
    background:#060a1c;
    color:#7d8bb5;
    text-align:center;
    padding:22px 20px;
    font-size:.82rem;
  }

  /* ===== Sticky mobile CTA ===== */
  .sticky-cta{
    position:fixed; bottom:0; right:0; left:0;
    background:var(--navy);
    padding:10px 14px;
    display:none;
    align-items:center; justify-content:space-between;
    gap:10px;
    z-index:50;
    box-shadow:0 -6px 20px rgba(0,0,0,.25);
  }
  .sticky-cta .p{color:#fff; font-weight:800; font-size:.95rem;}
  .sticky-cta .p small{display:block; color:#9fb0da; font-size:.68rem; font-weight:600;}
  .sticky-cta a{
    background:linear-gradient(135deg, var(--gold), var(--gold-2));
    color:var(--navy);
    font-weight:900;
    padding:10px 20px;
    border-radius:10px;
    font-size:.88rem;
    white-space:nowrap;
  }

  /* ===== Responsive ===== */
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr; text-align:center;}
    .hero-points{align-items:center;}
    .hero p.lead{margin-inline:auto;}
    .price-block{justify-content:center;}
    .bundle-grid{grid-template-columns:repeat(2, 1fr);}
    .value-grid{grid-template-columns:repeat(2, 1fr);}
    .testi-grid{grid-template-columns:1fr;}
    .pack-visual{min-height:340px;}
    .sticky-cta{display:flex;}
    body{padding-bottom:64px;}
  }
  @media (max-width:480px){
    .hero h1{font-size:1.8rem;}
    .price-new{font-size:2.4rem;}
    .section{padding:38px 0;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }

/* حاوية المقاسات */
.size-container {
  margin-bottom: 15px;
  direction: rtl;
  text-align: right;
}

.size-label {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

/* جعل المربعات جنباً إلى جنب في نفس السطر */
.size-boxes {
  display: flex;
  gap: 10px;
}

/* شكل المربع الذي يمثل المقاس */
.size-box {
  flex: 1;
  height: 45px;
  border: 2px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

/* إخفاء زر الـ Radio الافتراضي تماماً */
.size-box input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* تنسيق النص داخل المربع بخط سميك */
.size-box span {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

/* التغيير للأخضر فور اختيار المربع */
.size-box:has(input[type="radio"]:checked) {
  border-color: #27ae60;
  background-color: #27ae60;
}

.size-box:has(input[type="radio"]:checked) span {
  color: #fff; /* يصبح لون الحرف أبيض ليتناسب مع الخلفية الخضراء البارزة */
}
.price-display-box {
  margin: 15px 0;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.quantity-group {
  margin-bottom: 15px;
  direction: rtl;
  text-align: right;
}

.quantity-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  width: 140px;
}

.quantity-selector button {
  background: #27ae60;
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  font-weight: bold;
}

.quantity-selector span {
  font-size: 18px;
  font-weight: bold;
}
.pulsing-tip {
  animation: tipPulse 1.5s infinite ease-in-out;   /* كان pulseGlow */
}

@keyframes tipPulse {   /* كان pulseGlow */
  0% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 1; color: #4ff800; text-shadow: 0 0 8px rgba(74,153,243,.6); transform: translateY(-2px); }
  100% { opacity: 0.4; transform: translateY(0); }
}

@keyframes pulseGlow {
  0% {
    opacity: 0.4;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    color: #4ff800;
    text-shadow: 0 0 8px rgba(74, 153, 243, 0.6);
    transform: translateY(-2px);
  }
  100% {
    opacity: 0.4;
    transform: translateY(0);
  }
}

/* ==== نافذة النجاح المنبثقة (نسخة محسّنة) ==== */
.success-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    padding: 20px;
}

.success-modal.show {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.success-content {
    background: #ffffff;
    padding: 40px 30px 30px;
    border-radius: 24px;
    text-align: center;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    border-top: 6px solid #27ae60;
    font-family: 'Tajawal', sans-serif;
    animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
}

.success-icon svg {
    width: 100%;
    height: 100%;
}

.icon-circle {
    fill: none;
    stroke: #27ae60;
    stroke-width: 3;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    animation: drawCircle 0.6s ease forwards;
}

.icon-check {
    fill: none;
    stroke: #27ae60;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: drawCheck 0.4s ease 0.5s forwards;
}

.success-content h3 {
    color: #1e293b;
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: 800;
}

.success-content p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 25px;
}

.success-content button {
    background: linear-gradient(135deg, #27ae60, #219653);
    color: white;
    border: none;
    padding: 14px 45px;
    border-radius: 14px;
    font-size: 17px;
    font-weight: bold;
    font-family: 'Tajawal', sans-serif;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 8px 20px rgba(39, 174, 96, 0.35);
}

.success-content button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(39, 174, 96, 0.45);
}

.success-content button:active {
    transform: translateY(0);
}

/* ==== الحركات ==== */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.85) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes drawCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes drawCheck {
    to { stroke-dashoffset: 0; }
}

/* منع التمرير ملي تكون النافذة مفتوحة */
body.modal-open {
    overflow: hidden;
}

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* الـ badge في الوسط بالضبط */
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
}

.header-inner .header-cta {
    justify-self: end;      /* الزر لليسار */
    white-space: nowrap;
}

.header-inner .urgency-badge {
    margin: 0;              /* يلغي margin-bottom:16px الأصلي */
    font-size: .72rem;
    padding: 6px 14px;
    white-space: nowrap;    /* سطر واحد */
     position: relative;
    top: 8.5px; 
}

.site-logo {
    max-width: 70px;
    height: auto;
    display: block;
}

/* التليفون: نصغّرو باش يدخل النص الطويل */
@media (max-width: 520px) {
    .header-inner {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
    }
    .header-inner .urgency-badge {
        justify-self: center;
        font-size: .58rem;
        padding: 4px 8px;
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }
    .header-cta { padding: 7px 12px; font-size: .75rem; }
    .site-logo { max-width: 52px; }
}