/* المكوّنات: بطاقة الفئة · رأس الفئة · بطاقة الباقة · المقارنة · الإضافات · الألبومات. (UI_spec §2) */

/* ---------- بطاقة الفئة بالفهرس ---------- */
.cat-card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 4px; aspect-ratio: 4 / 5; min-height: 180px; padding: 14px; border-radius: var(--r-lg);
  background: var(--card); border: var(--bd); color: var(--txt); text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1);
}
.cat-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); z-index: 1; }
.cat-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(255,255,255,.97) 0%, rgba(255,255,255,.86) 42%, rgba(255,255,255,.15) 100%),
    radial-gradient(90% 60% at 100% 0%, var(--accent-24), transparent 70%);
}
.cat-card__img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.3);
}
.cat-card:hover, .cat-card:focus-visible { border-color: var(--accent-line); transform: translateY(-2px); }
.cat-card__name { font: 400 1.375rem/1.15 var(--f-display); }
.cat-card__from { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.cat-card__from small { color: var(--muted); font: 700 var(--fs-micro)/1 var(--f-body); }
.cat-card__from .price { color: var(--accent-ink); display: inline-flex; align-items: baseline; gap: 4px; }
.cat-card__from .amount { font-size: 1.25rem; }
.cat-card__from .cur { font: 700 .75rem/1 var(--f-body); }
.cat-card__women {
  position: absolute; top: 14px; inset-inline-start: 12px; font: 700 .75rem/1 var(--f-body); color: var(--accent-ink);
  padding: 6px 8px; border: 1px solid var(--accent-line); border-radius: var(--r-pill); background: var(--glass);
}
.cat-card--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
@media (min-width: 768px) { .cat-card__name { font-size: 1.625rem; } }

/* ---------- رأس الفئة ---------- */
.cat-head { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4) var(--sp-4); align-items: start; margin-bottom: var(--sp-7); }
.cat-head__text { display: grid; gap: 6px; }
.cat-head h2 { font-size: var(--fs-h2); }
.cat-head__sub { font: 400 clamp(1.125rem, 1rem + .8vw, 1.5rem)/1.35 var(--f-display); color: var(--soft); }
.cat-head .eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.cat-head > .seal { --d: 76px; }
.cat-head > .seal .seal__cap { display: none; }
.stats, .cat-note, .share { grid-column: 1 / -1; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { padding: 12px; background: var(--card); border: var(--bd); border-radius: var(--r-md); display: grid; gap: 4px; align-content: start; }
.stat dt { color: var(--muted); font: 700 .75rem/1.2 var(--f-body); }
.stat dd { font: 700 1rem/1.35 var(--f-body); }
.stat .price { color: var(--accent-ink); display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.stat .amount { font-size: 1.25rem; }
.stat .cur { font: 700 .75rem/1 var(--f-body); }
@media (max-width: 359px) { .stats { grid-template-columns: 1fr 1fr; } .stat:last-child { grid-column: 1 / -1; } }
.cat-note { display: flex; gap: 8px; align-items: center; color: var(--accent-ink); font: 700 var(--fs-small)/1.5 var(--f-body); }
.share { justify-self: start; }

/* ---------- المقارنة السريعة ---------- */
.compare-list { display: grid; gap: 10px; margin-bottom: var(--sp-7); }
.cmp-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; text-decoration: none;
  background: var(--card); border: var(--bd); border-radius: var(--r-md); transition: border-color var(--dur-1);
}
.cmp-row:hover { border-color: var(--accent-line); }
.cmp-row--rec { background: var(--card-2); border: var(--bd-rec); }
.cmp-row__name { font: 400 1.375rem/1.2 var(--f-display); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cmp-row__price { color: var(--accent-ink); grid-row: span 2; align-self: center; display: inline-flex; align-items: baseline; gap: 4px; }
.cmp-row__price .amount { font-size: var(--fs-price-md); }
.cmp-row__price .cur { font: 700 .8125rem/1 var(--f-body); }
.cmp-row__sum { grid-column: 1 / -1; font: 500 var(--fs-small)/1.6 var(--f-body); color: var(--muted); }
.cmp-row__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font: 500 .875rem/1.4 var(--f-body); color: var(--soft); }
.cmp-row__go { margin-inline-start: auto; color: var(--muted); }

/* ---------- بطاقات الباقات ---------- */
.pkgs { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 768px) { .pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .pkgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pkgs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pkg {
  position: relative; display: flex; flex-direction: column; gap: 16px; padding: 20px 16px 16px; min-width: 0;
  background: var(--card); border: var(--bd); border-radius: var(--r-lg); box-shadow: var(--sh-1); scroll-margin-top: var(--header-h);
}
.pkg--rec { background: var(--card-2); border: var(--bd-rec); box-shadow: var(--sh-glow); }
.pkg.is-flash { animation: flash 1.2s var(--ease-out); }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 4px var(--accent); } 100% { box-shadow: var(--sh-1); } }
.pkg__head { display: grid; gap: 8px; justify-items: start; }
.pkg h3 { font-size: var(--fs-h3); }
.pkg__dur { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 500 var(--fs-small)/1.5 var(--f-body); color: var(--soft); }
.pkg__dur .i { color: var(--accent-ink); }
.pkg__dur strong { color: var(--txt); }

.badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px;
  border-radius: var(--r-pill); font: 700 .875rem/1.2 var(--f-body); white-space: nowrap;
}
.badge .i { width: 15px; height: 15px; stroke-width: 2; }
.badge--rec { background: var(--accent); color: var(--on-accent); }
.badge--rec .i { fill: currentColor; }
.badge--top { border: 1.5px solid var(--accent-line); color: var(--accent-ink); }

.items { display: flex; flex-direction: column; border-radius: var(--r-md); background: var(--bg); border: var(--bd); }
.item { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; }
.item + .item { border-top: 1px solid var(--line); }
.item__ico { width: 40px; height: 40px; border-radius: var(--r-xs); display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-12); }
.item__ico .i { width: 22px; height: 22px; }
.item__body { display: grid; gap: 2px; min-width: 0; }
.item__title { font: 700 var(--fs-body)/var(--lh-snug) var(--f-body); }
.item__size { color: var(--accent-ink); }
.item__sub { font: 500 var(--fs-small)/1.5 var(--f-body); color: var(--muted); }
.item__info { display: grid; place-items: center; width: 44px; height: 44px; margin: -2px -8px -2px -6px; color: var(--muted); border-radius: 50%; }
.item__info:hover { color: var(--accent-ink); }
html.js .pkg.is-collapsed .item:nth-child(n+4) { display: none; }

.more {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; width: 100%;
  background: none; border: 0; color: var(--accent-ink); font: 700 var(--fs-small)/1.3 var(--f-body); cursor: pointer;
}
.more .i { transition: transform var(--dur-2); }
.more[aria-expanded="true"] .i { transform: rotate(180deg); }

.pkg__delivery { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.pkg__delivery > .i { color: var(--accent-ink); margin-top: 3px; }
.pkg__delivery b { display: block; font: 700 var(--fs-small)/1.5 var(--f-body); }
.pkg__delivery small { display: block; font: 500 .875rem/1.5 var(--f-body); color: var(--muted); }

.pkg__price {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
  border-radius: var(--r-lg); background: var(--accent); color: var(--on-accent);
}
.pkg__price .price { display: inline-flex; align-items: baseline; gap: 8px; }
.pkg__price .amount { font-size: var(--fs-price-xl); line-height: 1; letter-spacing: -.01em; }
.pkg__price .cur { font: 700 1rem/1 var(--f-body); }
.pkgs--4 .pkg__price .amount { font-size: clamp(2rem, 1.6rem + 2vw, 3rem); }
.pkg__cta { display: grid; gap: 8px; }

/* ---------- الجدول التفصيلي ---------- */
.details { margin-top: var(--sp-7); border: var(--bd); border-radius: var(--r-lg); background: var(--card); }
.details summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 18px;
  cursor: pointer; font-weight: 700; list-style: none;
}
.details summary::-webkit-details-marker { display: none; }
.details[open] summary .i { transform: rotate(180deg); }
.table-scroll { overflow-x: auto; border-top: var(--bd); }
.compare-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font: 500 .9375rem/1.5 var(--f-body); }
.compare-table th, .compare-table td { padding: 12px 14px; text-align: start; vertical-align: top; border-top: 1px solid var(--line); }
.compare-table thead th { border-top: 0; font: 400 1.125rem/1.3 var(--f-display); }
.compare-table thead .price { display: flex; align-items: baseline; gap: 4px; color: var(--accent-ink); }
.compare-table thead .amount { font-size: 1.375rem; }
.compare-table thead .cur { font: 700 .75rem/1 var(--f-body); }
.compare-table tbody th { color: var(--soft); font-weight: 700; position: sticky; inset-inline-start: 0; background: var(--card); }
.compare-table .is-rec { background: var(--card-2); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.compare-table .is-none { color: var(--muted); }

/* ---------- الملاحظات + روابط ختامية ---------- */
.cat-notes { margin-top: var(--sp-6); display: grid; gap: 6px; }
.cat-notes li { color: var(--soft); font: 500 var(--fs-small)/1.6 var(--f-body); padding-inline-start: 18px; position: relative; }
.cat-notes li::before { content: ""; position: absolute; inset-inline-start: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.related { margin-top: var(--sp-7); }
.related .chips-row { flex-wrap: wrap; padding-inline: 0; overflow: visible; }
.cat-ask { margin-top: var(--sp-7); }
.band { margin-top: var(--sp-4); padding: 14px 16px; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); font: 700 var(--fs-small)/1.6 var(--f-body); }

/* ---------- إضافات القاعات ---------- */
.hall-addons { margin-top: var(--sp-7); }
.hall-addons__list { display: grid; gap: 10px; margin-top: var(--sp-3); }
.hall-addon {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 8px 14px; align-items: center; padding: 14px 16px;
  background: var(--card); border: var(--bd); border-radius: var(--r-md);
}
.hall-addon__ico { width: 48px; height: 48px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-12); color: var(--accent-ink); }
.hall-addon__body b { display: block; font: 700 var(--fs-body)/1.35 var(--f-body); }
.hall-addon__body span { color: var(--muted); font: 500 .875rem/1.5 var(--f-body); }
.hall-addon .btn { grid-column: 1 / -1; }
.addon__price { font: 400 var(--fs-price-sm)/1 var(--f-display); color: var(--accent-ink); white-space: nowrap; }
.addon__price small { font: 700 .75rem/1 var(--f-body); }
.addon__price--text { font: 700 var(--fs-small)/1.3 var(--f-body); white-space: normal; }
@media (min-width: 768px) { .hall-addon { grid-template-columns: 48px 1fr auto auto; } .hall-addon .btn { grid-column: auto; } }

/* ---------- ضيف على باقتك ---------- */
.addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: var(--sp-4); }
@media (min-width: 768px) { .addons { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .addons { grid-template-columns: repeat(4, 1fr); } }
.addon {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; min-width: 0;
  background: var(--card); border: var(--bd); border-radius: var(--r-sm);
}
.addon__ico { color: var(--accent-ink); }
.addon__ico .i { width: 26px; height: 26px; }
.addon__name { font: 700 .9375rem/1.4 var(--f-body); flex: 1; }
.addon .btn { margin-top: auto; }

/* ---------- الألبومات ---------- */
.banner { position: relative; margin-bottom: var(--sp-6); border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 9; background: var(--card); }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 0%, rgba(233,233,231,.4) 45%, transparent 100%); }
.banner__img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
@media (min-width: 1024px) { .banner { aspect-ratio: 21 / 9; } }
.albums { display: grid; gap: 12px; }
@media (min-width: 768px) { .albums { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .albums { grid-template-columns: repeat(3, 1fr); } }
.album-card { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; background: var(--card); border: var(--bd); border-radius: var(--r-md); }
.album-card__ico { color: var(--accent-ink); }
.album-card__ico .i { width: 30px; height: 30px; }
.album-card__title { display: block; font: 400 1.375rem/1.25 var(--f-display); margin-bottom: 4px; }
.album-card__sub { display: block; font: 500 var(--fs-small)/1.65 var(--f-body); color: var(--muted); }