/* =============================================================================
   deep-product.css — صفحات المنتج: المزايا، الأسعار، الصفحات القانونية
   -----------------------------------------------------------------------------
   طبقة خامسة فوق deep → modern → refine → anim، تضيف مكوّنات لم تكن في الموقع
   (بطاقة سعر، جدول مقارنة، أسئلة شائعة، إطار جهاز، نصّ قانوني) ولا تعدّل أي
   مكوّن قائم. كل الألوان من متغيّرات الطبقات السابقة، فالوضع الداكن يتبعها بلا
   سطر إضافي. والاتجاه بخصائص منطقية (inline-start/end) فيعمل في RTL وLTR معاً.
   ============================================================================= */

/* ---------- شارة صغيرة فوق العنوان ---------- */
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.badge-row .pill { font-weight: 500; }

/* ---------- إطار جهاز حول لقطة الشاشة ---------- */
.device {
  position: relative;
  margin: 0;
  border-radius: 14px;
  padding: 10px 10px 0;
  background: linear-gradient(180deg, #2B3540, #1C242C);
  box-shadow: 0 30px 60px -30px rgba(15, 30, 45, .55), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.device::before {                     /* الكاميرا */
  content: ""; position: absolute; top: 4px; inset-inline-start: 50%;
  width: 5px; height: 5px; border-radius: 50%; background: #48525C; transform: translateX(-50%);
}
[dir="rtl"] .device::before { transform: translateX(50%); }
.device img { display: block; width: 100%; height: auto; border-radius: 6px 6px 0 0; }
.device::after {                      /* القاعدة */
  content: ""; display: block; height: 14px; margin: 0 -26px;
  background: linear-gradient(180deg, #C9CED3, #9AA2AA); border-radius: 0 0 14px 14px;
}
.device figcaption { position: absolute; inset-block-end: -2.2rem; inset-inline: 0; text-align: center; font-size: .85rem; color: var(--faint); }

/* ---------- شبكة المزايا ---------- */
.feat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr)); }
.feat {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; align-items: start;
  padding: 1.15rem 1.2rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
}
.feat .ico {
  grid-row: span 2; width: 2.6rem; height: 2.6rem; border-radius: 11px;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
}
.feat .ico svg { width: 1.35rem; height: 1.35rem; }
.feat h3 { font-size: 1.02rem; margin: .15rem 0 0; }
.feat p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.75; }

/* ---------- الربط الضريبي ---------- */
.tax-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.tax-card { padding: 1.4rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: .7rem; }
.tax-card.live { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.tax-card ul { margin: 0; padding-inline-start: 1.1rem; color: var(--muted); font-size: .93rem; line-height: 1.9; }
.tax-card .head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }

/* ---------- الأسعار ---------- */
.price-grid { display: grid; gap: 1.1rem; padding-top: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); align-items: stretch; }
.price-card {
  position: relative; display: flex; flex-direction: column; gap: .85rem;
  padding: 1.6rem 1.4rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--rule);
}
.price-card.pick { border: 2px solid var(--brand); box-shadow: 0 22px 44px -30px rgba(15, 92, 191, .55); }
/* Inside the card, above the title: an overhanging badge gets cut by the card's border */
.price-card .flag {
  align-self: flex-start; margin-bottom: -.25rem; white-space: nowrap;
  padding: .2rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--brand); color: #fff;
}
[data-theme="dark"] .price-card .flag { color: #10161C; }
.price-card h3 { margin: 0; font-size: 1.15rem; }
.price-amount { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.price-amount b { font-family: var(--lat); font-size: 2.4rem; font-weight: 600; color: var(--ink); line-height: 1; }
.price-amount span { color: var(--muted); font-size: .92rem; }
.price-eq { color: var(--ok); font-size: .86rem; min-height: 1.3em; }
.price-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.price-card li { display: flex; gap: .55rem; align-items: flex-start; }
.price-card li::before {
  content: ""; flex: none; width: 1.05rem; height: 1.05rem; margin-top: .2rem; border-radius: 50%;
  background: var(--ok-soft) center / .7rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232A6146' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.price-card li.off { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--rule-2); }
.price-card li.off::before { background: var(--surface-2); }
.price-card .btn { margin-top: auto; justify-content: center; }

.price-skel { min-height: 22rem; border-radius: 18px; background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface) 50%, var(--surface-2) 70%) 0 0 / 300% 100%; animation: skel 1.4s ease infinite; }
@keyframes skel { to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .price-skel { animation: none; } }

.trial-band {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding: 1.2rem 1.4rem; border-radius: 16px; background: var(--brand-soft); border: 1px dashed var(--brand);
}
.trial-band b { color: var(--ink); }

/* ---------- جدول المقارنة ---------- */
.compare-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; min-width: 34rem; font-size: .93rem; }
.compare th, .compare td { padding: .8rem 1rem; border-bottom: 1px solid var(--rule); text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: start; }
.compare thead th { background: var(--surface-2); font-weight: 600; }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare .yes { color: var(--ok); font-weight: 600; }
.compare .no { color: var(--faint); }

/* ---------- طرق الدفع ---------- */
.pay-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }

/* ---------- الأسئلة الشائعة ---------- */
.faq { display: grid; gap: .6rem; }
.faq details { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 0 1.1rem; }
.faq summary {
  cursor: pointer; list-style: none; padding: 1rem 0; font-weight: 600; color: var(--ink);
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--lat); font-size: 1.3rem; color: var(--brand); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--sky, var(--brand)); outline-offset: 3px; border-radius: 6px; }
.faq details p { margin: 0 0 1rem; color: var(--muted); line-height: 1.85; }

/* ---------- النصّ القانوني ---------- */
.legal { display: grid; gap: 2rem; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: start; }
.legal-toc { position: sticky; top: 6rem; display: grid; gap: .35rem; font-size: .9rem; }
.legal-toc a { color: var(--muted); text-decoration: none; padding: .25rem .6rem; border-radius: 8px; }
.legal-toc a:hover { background: var(--surface-2); color: var(--ink); }
.prose { max-width: 70ch; line-height: 1.95; color: var(--ink-2); }
.prose h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; scroll-margin-top: 6rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 .9rem; }
.prose ul, .prose ol { padding-inline-start: 1.3rem; }
.prose .meta { color: var(--faint); font-size: .88rem; }
@media (max-width: 52rem) {
  .legal { grid-template-columns: 1fr; }
  .legal-toc { position: static; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}

/* نصّ لقارئ الشاشة وحده (عنوان جدول المقارنة) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* جدول المقارنة على الهاتف: يتّسع للشاشة بلا تمرير أفقي ما أمكن */
@media (max-width: 40rem) {
  .compare { min-width: 0; font-size: .82rem; }
  .compare th, .compare td { padding: .6rem .45rem; }
}