/* ═══════════════════════════════════════════════════════════════
   الإطار المشترك لكل صفحات الزوار: الهيدر، لوحة القائمة ☰، الفوتر
   (الرئيسية، نجوم الحفلات، صفحة المشهور، 404) — الشكل من public/partials والتشغيل من shell.js
   الألوان من tokens: body.v3 (home.css) و body.light (light.css) — ونفسها بالليلي والميكس (theme.css)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --font-head: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --kufi: "Reem Kufi", "Alexandria", sans-serif;
}
/* صفحات .light ما بيها قواعد .v3 العامة — نفس الأساس للإطار بس */
:is(.v3-top, .v3-foot, .v3-menu) a { color: inherit; }
:is(.v3-top, .v3-foot, .v3-menu) :is(h1, h2, h3, h4) { font-family: var(--font-head); margin: 0; letter-spacing: 0; }
:is(.v3-top, .v3-foot, .v3-menu) p { margin: 0; }
:is(.v3-top, .v3-foot, .v3-menu) .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.v3-wrap { width: min(1220px, 100% - 32px); margin-inline: auto; }

/* ─── الهيدر ─── */
/* شريط الإعلان (الإعدادات ← «شريط إعلان»): فوق الهيدر بكل الصفحات */
.v3-announce { position: relative; z-index: 61; padding: 8px 16px; background: var(--hot, linear-gradient(105deg, #ff9f1c, #ff5c8a 55%, #b25cf6)); color: #fff; text-align: center; font: 700 14px var(--font-head); text-wrap: balance; }
.v3-top { position: sticky; top: 0; z-index: 60; transition: background-color .3s, box-shadow .3s; }
.v3-top.is-scrolled { background: rgba(255, 250, 245, .82); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 8px 30px -20px rgba(80, 40, 120, .4); }
.v3-top__in { display: flex; align-items: center; gap: 18px; height: 72px; }
.v3-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.v3-logo__star { display: block; width: 42px; height: 42px; flex: none; }   /* الشعار نفسه: .logo-mark بـ site.css */
@keyframes spin { to { transform: rotate(360deg); } }
.v3-logo__txt { display: grid; line-height: 1.15; }
.v3-logo__txt b { font-family: var(--kufi); font-size: 21px; font-weight: 700; }
.v3-logo__txt small { font-size: 12px; color: var(--muted); font-weight: 600; }
.v3-nav { display: flex; gap: 4px; margin-inline-start: 18px; }
.v3-nav a { padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--muted); transition: color .2s, background-color .2s; }
.v3-nav a:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.v3-top__act { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.v3-login { position: relative; }
.v3-login summary { list-style: none; min-height: 42px; }
.v3-login summary::-webkit-details-marker { display: none; }
.v3-login__menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 250px; padding: 8px; border-radius: 20px; background: var(--surface);
  box-shadow: 0 24px 60px -20px rgba(80, 40, 120, .4), 0 0 0 1px var(--line); display: grid; gap: 4px; animation: popin .35s var(--spring);
}
.v3-login__menu a { display: grid; padding: 10px 14px; border-radius: 14px; text-decoration: none; }
.v3-login__menu a:hover { background: var(--surface-2); }
.v3-login__menu b { font-size: 15px; }
.v3-login__menu small { color: var(--muted); font-size: 12.5px; }
@keyframes popin { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.v3-cart {
  position: relative; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; background: var(--surface); color: var(--text);
  display: grid; place-items: center; box-shadow: 0 0 0 1.5px var(--line-2); transition: transform .35s var(--spring);
}
.v3-cart:hover { transform: scale(1.08) rotate(-6deg); }
.v3-cart svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.v3-cart span { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--surface); }
.v3-cart span:empty { display: none; }
.v3-cart.is-bump { animation: bump .6s var(--spring); }
.v3-cart svg { fill: #ff5c8a; stroke: none; width: 21px; height: 21px; }

/* زر القائمة ☰ */
.v3-burger {
  width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; cursor: pointer; background: var(--surface); display: grid; place-content: center; gap: 4px;
  box-shadow: 0 0 0 1.5px var(--line-2); transition: transform .35s var(--spring), box-shadow .2s;
}
.v3-burger:hover { transform: scale(1.08) rotate(4deg); box-shadow: 0 0 0 1.5px #ffb3cb; }
.v3-burger i { display: block; width: 18px; height: 2.5px; border-radius: 2px; background: var(--text); transition: transform .35s var(--spring), opacity .2s, width .3s; }
.v3-burger i:nth-child(2) { width: 12px; background: #ff5c8a; justify-self: start; }
.v3-burger:hover i:nth-child(2) { width: 18px; }
.v3-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.v3-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.v3-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* لوحة القائمة */
.v3-menu { position: fixed; inset: 0; z-index: 130; }
.v3-menu[hidden] { display: none; }
.v3-menu__scrim { position: absolute; inset: 0; background: rgba(43, 26, 70, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.v3-menu.is-open .v3-menu__scrim { opacity: 1; }
.v3-menu__panel {
  position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(400px, 100%); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px; padding: 14px 18px calc(24px + env(safe-area-inset-bottom));
  background: radial-gradient(70% 40% at 100% 0%, #ffe2c4, transparent 70%), radial-gradient(70% 40% at 0% 100%, #e7dcff, transparent 70%), var(--bg);
  box-shadow: 30px 0 80px -30px rgba(80, 40, 120, .45); transform: translateX(-105%); transition: transform .45s var(--spring);
}
.v3-menu.is-open .v3-menu__panel { transform: none; }
.v3-menu__panel > * { opacity: 0; transform: translateX(-16px); transition: opacity .4s, transform .5s var(--spring); }
.v3-menu.is-open .v3-menu__panel > * { opacity: 1; transform: none; }
.v3-menu.is-open .v3-menu__panel > :nth-child(2) { transition-delay: .05s; }
.v3-menu.is-open .v3-menu__panel > :nth-child(3) { transition-delay: .09s; }
.v3-menu.is-open .v3-menu__panel > :nth-child(4) { transition-delay: .13s; }
.v3-menu.is-open .v3-menu__panel > :nth-child(5) { transition-delay: .17s; }
.v3-menu.is-open .v3-menu__panel > :nth-child(6) { transition-delay: .21s; }
.v3-menu.is-open .v3-menu__panel > :nth-child(7) { transition-delay: .25s; }
.v3-menu.is-open .v3-menu__panel > :nth-child(8) { transition-delay: .29s; }
.v3-menu.is-open .v3-menu__panel > :nth-child(9) { transition-delay: .33s; }
.v3-menu__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; }
.v3-menu__x { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: var(--surface); font-size: 26px; line-height: 1; color: var(--text); box-shadow: 0 0 0 1.5px var(--line-2); transition: transform .35s var(--spring); }
.v3-menu__x:hover { transform: rotate(90deg); }
.v3-menu__nav, .v3-menu__login { display: grid; gap: 6px; }
.v3-menu__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, .75); text-decoration: none; transition: transform .35s var(--spring), background-color .2s; }
.v3-menu__row:hover { transform: translateX(-4px); background: var(--surface); }
.v3-menu__row b { display: block; font: 700 16.5px var(--font-head); }
.v3-menu__row small { display: block; color: var(--muted); font-size: 13px; }
.v3-menu__ic { width: 42px; height: 42px; flex: none; border-radius: 14px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--surface)); }
.v3-menu__ic .ic, .v3-menu__ic svg { width: 21px; height: 21px; }
.v3-menu__ic > svg:not(.ic) { fill: var(--c); }
.v3-menu__title { margin-top: 6px !important; font: 700 13.5px var(--font-head); color: var(--muted); }
.v3-menu__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v3-menu__tile {
  position: relative; display: grid; justify-items: start; gap: 8px; padding: 14px; border-radius: 20px; border: 0; cursor: pointer; text-align: start; text-decoration: none;
  background: var(--surface); color: var(--text); box-shadow: 0 12px 26px -20px rgba(80, 40, 120, .5); transition: transform .35s var(--spring);
}
.v3-menu__tile:hover { transform: translateY(-3px) rotate(-1deg); }
.v3-menu__tile b { font: 700 15px var(--font-head); }
.v3-menu__tile em { position: absolute; top: 12px; inset-inline-end: 12px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--c); color: #fff; font: 800 13px var(--font-head); font-style: normal; display: grid; place-items: center; }
@keyframes bump { 40% { transform: scale(1.3) rotate(10deg); } }

/* ─── الفوتر ─── */
.v3-foot { margin-top: 40px; padding: 56px 0 calc(28px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .7); border-top: 1px solid var(--line); }
.v3-foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px 24px; }
.v3-foot p { color: var(--muted); font-size: 15px; margin-top: 14px !important; max-width: 30em; }
.v3-foot h4 { font-size: 16px; margin-bottom: 12px; }
.v3-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.v3-foot li a, .v3-foot li button { color: var(--muted); text-decoration: none; font: 500 15px var(--font-body); background: none; border: 0; padding: 0; cursor: pointer; }
.v3-foot li a:hover, .v3-foot li button:hover { color: #e8467c; }
.v3-soc { display: flex; gap: 8px; margin-top: 14px; }
.v3-soc a { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line-2); transition: transform .3s var(--spring), color .2s; }
.v3-soc a:hover { transform: translateY(-2px); color: #e8467c; }
.v3-soc i { display: grid; }
.v3-soc svg { width: 19px; height: 19px; fill: currentColor; }
.v3-visits { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.v3-visits div { padding: 10px 16px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); display: grid; }
.v3-visits small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.v3-visits b { font: 800 20px var(--font-head); }
.v3-copy { margin-top: 22px !important; padding-top: 18px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; }
.v3-copy a { color: var(--dim); }
@media (max-width: 1080px) {
  .v3-nav { display: none; }
  .v3-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .v3-top__in { height: 64px; gap: 8px; }
  .v3-logo__star { width: 36px; height: 36px; }
  .v3-logo__txt b { font-size: 18px; }
  .v3-logo__txt small { display: none; }
  .v3-top__cta { display: none; }
  .v3-top__act { gap: 8px; }
  .v3-login summary { padding: 0 14px; min-height: 40px; font-size: 14.5px; }
  .v3-foot__grid { grid-template-columns: minmax(0, 1fr); }
}