/* ==========================================================================
   صفحة الباقات — packages.html
   يعتمد على متغيرات وألوان css/style.css (خط Tajawal، لون --a1/--a2/--a3)
   ========================================================================== */

/* ---------- الهيرو ---------- */
.pk-hero{ padding:calc(var(--nav-h) + 72px) 0 56px; text-align:center; }
.pk-hero-inner{ max-width:760px; margin-inline:auto; }
.pk-hero-title{
  font-size:clamp(2rem, 4.6vw, 3.1rem); font-weight:900;
  line-height:1.3; letter-spacing:-.4px; margin-bottom:18px;
}
.pk-hero-sub{
  font-size:clamp(1rem, 1.9vw, 1.12rem); color:var(--text-soft);
  font-weight:300; max-width:56ch; margin-inline:auto;
}

.pk-section{ padding-top:20px; }

/* ---------- تبويبات النوع ---------- */
.pk-tabs{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
  margin-bottom:48px;
}
.pk-tab{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:99px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-strong);
  color:var(--text-soft); font-weight:600; font-size:14.5px;
  transition:background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.pk-tab svg{ width:18px; height:18px; flex-shrink:0; opacity:.85; }
.pk-tab:hover{ color:var(--text); border-color:rgba(255,255,255,.26); transform:translateY(-2px); }
.pk-tab.active{
  background:var(--grad); color:#14110A; border-color:transparent;
  box-shadow:0 14px 30px -14px rgba(var(--a1-rgb),.85);
}
.pk-tab.active svg{ opacity:1; }

/* ---------- شبكة البطاقات ---------- */
.pk-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
  align-items:stretch;
}

.pk-card{
  position:relative; display:flex; flex-direction:column;
  padding:32px 26px 28px; border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--line);
  transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.pk-card:hover{ transform:translateY(-6px); border-color:rgba(var(--a2-rgb),.35); background:rgba(255,255,255,.055); }

.pk-card.pk-pop{
  border-color:rgba(var(--a1-rgb),.5);
  background:linear-gradient(165deg, rgba(var(--a1-rgb),.1), rgba(255,255,255,.02));
}
.pk-pop-tag{
  position:absolute; top:-13px; inset-inline-start:26px;
  padding:5px 16px; border-radius:99px; background:var(--grad);
  color:#14110A; font-size:12px; font-weight:800;
  box-shadow:0 8px 20px -8px rgba(var(--a1-rgb),.9);
}

.pk-card-head{ margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.pk-card-head h3{ font-size:1.3rem; font-weight:900; margin-bottom:6px; }
.pk-card-head p{ font-size:13.5px; color:var(--text-soft); font-weight:300; }

/* ---------- السعر ---------- */
.pk-price{ display:flex; align-items:baseline; gap:8px; margin-bottom:22px; }
.pk-price-from{ font-size:12.5px; color:var(--text-mute); font-weight:500; }
.pk-price-num{
  font-family:'Space Grotesk',sans-serif; font-size:1.8rem; font-weight:700;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.pk-price-custom{
  font-size:14.5px; font-weight:600; color:var(--text-soft);
  margin-bottom:22px; padding:9px 0;
}

.pk-feats{ display:grid; gap:12px; margin-bottom:26px; flex:1; }
.pk-feats li{
  position:relative; padding-inline-start:26px;
  font-size:14px; color:var(--text-soft); line-height:1.6;
}
.pk-feats li::before{
  content:''; position:absolute; inset-inline-start:0; top:5px;
  width:16px; height:16px; border-radius:50%;
  background:rgba(var(--a2-rgb),.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3D6BE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:9px;
}

.pk-cta{ margin-top:auto; }

/* ---------- ملاحظة أسفل الشبكة ---------- */
.pk-note{
  text-align:center; max-width:640px; margin:46px auto 0;
  font-size:13.5px; color:var(--text-mute); line-height:1.9;
}

/* ---------- الأسئلة الشائعة ---------- */
.pk-faq{ max-width:760px; margin-inline:auto; display:grid; gap:12px; }

.pk-faq-item{
  border:1px solid var(--line); border-radius:16px;
  background:rgba(255,255,255,.03); overflow:hidden;
}
.pk-faq-item + .pk-faq-item{ margin-top:0; }

.pk-faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:19px 22px; cursor:pointer; font-weight:700; font-size:15px;
  list-style:none; user-select:none;
}
.pk-faq-item summary::-webkit-details-marker{ display:none; }
.pk-faq-item summary svg{ flex-shrink:0; color:var(--a2); transition:transform .3s var(--ease); }
.pk-faq-item[open] summary svg{ transform:rotate(180deg); }

.pk-faq-item p{
  padding:0 22px 20px; margin:0; color:var(--text-soft);
  font-size:14px; font-weight:300; line-height:1.85;
}

/* ---------- الموبايل ---------- */
@media (max-width:980px){
  .pk-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .pk-card.pk-pop{ order:-1; }
}

@media (max-width:600px){
  .pk-hero{ padding-top:calc(var(--nav-h) + 48px); }
  .pk-tabs{ gap:8px; }
  .pk-tab{ padding:11px 16px; font-size:13.5px; flex:1 1 calc(50% - 8px); justify-content:center; }
  .pk-card{ padding:26px 20px 24px; }
}