/* =====================================================================
   فعاليات المدينة · AlMunawarah DS
   Brand primary 500 #003200 · 400 #2E5E2E · secondary (gold) 500 #BB8E11
   Navbar + footer follow the DS "Nav Bar - AR" / "Footer" components
   ===================================================================== */
:root{
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;
  --r-xs:8px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:24px;--r-full:9999px;
  --hdr:88px;

  --g-50:#FAFAFA;--g-100:#F4F4F5;--g-200:#E4E4E7;--g-300:#D4D4D8;--g-400:#A1A1AA;--g-500:#71717A;--g-600:#52525B;--g-700:#3F3F46;--g-900:#18181B;
  --p-50:#E6EDE6;--p-100:#DCE6DC;--p-300:#5C8A5C;--p-400:#2E5E2E;--p-500:#003200;--p-600:#002A00;--p-700:#002200;--p-800:#001A00;
  --s-50:#FBF6E8;--s-100:#F5E8C0;--s-300:#E0BC50;--s-500:#BB8E11;--s-600:#9A750E;--s-700:#785C0B;

  --page:#FFFFFF;--surface:#FFFFFF;--bg-2:#F6F6F4;
  --border:#E7E7E4;--border-strong:var(--g-300);
  --icon:var(--g-500);
  --text:var(--g-900);--text-2:var(--g-600);--text-3:var(--g-500);
  --brand:var(--p-500);--brand-hover:var(--p-600);--brand-subtle:var(--p-50);--brand-text:var(--p-500);
  --gold:var(--s-500);--gold-subtle:var(--s-50);--gold-text:var(--s-700);
  --focus:var(--p-400);
  --success:#047857;
  --shadow:0 1px 2px rgba(0,26,0,.04),0 0 20px rgba(0,0,0,.04);--shadow-md:0 10px 30px rgba(0,26,0,.08);--shadow-lg:0 24px 64px rgba(0,18,0,.18);
  --ease:cubic-bezier(.2,.7,.2,1);

  --f-title:'Smart Madinah Title','Spectral',serif;
  --f-text:'Smart Madinah Text','Montserrat',system-ui,sans-serif;
  color-scheme:light;
}
html[lang="en"]{--f-title:'Spectral',Georgia,serif;--f-text:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 24px)}
body{margin:0;background:var(--page);color:var(--text);font:500 16px/1.6 var(--f-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang="en"] body{font-weight:400;line-height:1.55}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
.on-dark :focus-visible{outline-color:var(--s-300)}
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:8px;inset-inline-start:8px;z-index:500;padding:12px 16px;border-radius:var(--r-md);background:var(--brand);color:#fff;transform:translateY(-200%)}
.skip:focus{transform:none}
.ic{width:24px;height:24px;fill:currentColor;flex:none}
.ic--16{width:16px;height:16px}.ic--18{width:18px;height:18px}.ic--20{width:20px;height:20px}
html[dir="ltr"] .ic--flip{transform:scaleX(-1)}
html[dir="rtl"] .ic--ext{transform:scaleX(-1)}
.nums{font-variant-numeric:lining-nums tabular-nums}
.wrap{width:100%;max-width:1312px;margin-inline:auto;padding-inline:64px}
@media (max-width:1199px){.wrap{padding-inline:32px}}
@media (max-width:767px){.wrap{padding-inline:16px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:48px;padding:0 var(--sp-6);border-radius:var(--r-md);font:700 16px/1 var(--f-text);border:1px solid transparent;transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease);white-space:nowrap}
html[lang="en"] .btn{font-weight:600}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-hover)}
.btn--line{background:var(--surface);border-color:var(--border-strong);color:var(--text)}
.btn--line:hover{background:var(--bg-2)}
.btn--ghost{color:var(--brand-text)}
.btn--ghost:hover{background:var(--brand-subtle)}
.btn--block{width:100%}
.btn--lg{min-height:56px;font-size:17px}
.btn--sm{min-height:40px;padding:0 var(--sp-4);font-size:14px;border-radius:var(--r-sm)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);transition:background-color .2s}
.iconbtn:hover{background:var(--bg-2)}
.iconbtn--glass{background:rgba(255,255,255,.92);box-shadow:0 2px 12px rgba(0,0,0,.12);color:var(--text);backdrop-filter:blur(8px)}

/* ---------- DS navbar ---------- */
.subbar{background:var(--p-400);color:#fff}
.subbar__in{display:flex;align-items:center;justify-content:space-between;height:54px}
.subbar__info{display:flex;align-items:center;gap:var(--sp-6);font:600 12px/18px 'Montserrat',var(--f-text)}
html[lang="ar"] .subbar__info{font-family:var(--f-text);font-size:13px}
.subbar__info span{display:inline-flex;align-items:center;gap:var(--sp-2)}
.subbar__info .ic{width:18px;height:18px}
.subbar__btn{display:grid;place-items:center;width:30px;height:30px;border:1px solid #fff;border-radius:var(--r-xs);color:#fff}
.subbar__btn .ic{width:18px;height:18px}
.subbar__btn:hover{background:rgba(255,255,255,.12)}
.hdr{position:sticky;top:0;z-index:80;background:var(--p-500);color:#fff;transition:box-shadow .2s}
.hdr.is-stuck{box-shadow:0 6px 20px rgba(0,18,0,.18)}
.hdr__in{display:flex;align-items:center;gap:var(--sp-10);height:var(--hdr)}
.hdr__logo{display:block;flex:none}
.hdr__logo img{width:56px;height:56px}
.nav{display:flex;align-items:center;gap:var(--sp-6)}
.nav a,.nav button{position:relative;display:inline-flex;align-items:center;gap:var(--sp-1);height:var(--hdr);font:400 16px/1 var(--f-text);color:#fff;white-space:nowrap}
html[lang="en"] .nav a{font-family:'Montserrat',sans-serif}
.nav a:hover{opacity:.85}
.nav a[aria-current]{font-weight:700}
.nav a[aria-current]::after{content:"";position:absolute;inset-inline:0;bottom:22px;margin-inline:auto;width:100%;height:2px;border-radius:2px;background:#fff}
.nav .ic{width:20px;height:20px}
.hdr__tools{margin-inline-start:auto;display:flex;align-items:center;gap:var(--sp-3)}
.hdr__search{position:relative;width:232px}
.hdr__search .ic{position:absolute;top:50%;inset-inline-start:10px;transform:translateY(-50%);width:18px;height:18px;color:rgba(255,255,255,.75);pointer-events:none}
.hdr__search input{width:100%;height:36px;padding-inline:36px 12px;border:1px solid #fff;border-radius:var(--r-sm);background:transparent;color:#fff;font-size:14px}
.hdr__search input::placeholder{color:rgba(255,255,255,.75)}
.hdr__search input:focus{outline:none;background:rgba(255,255,255,.08)}
.lang{display:inline-flex;align-items:center;gap:var(--sp-2);height:38px;padding:0 var(--sp-4) 0 var(--sp-3);border:1px solid #fff;border-radius:var(--r-sm);color:#fff;font:700 14px/1 var(--f-text)}
html[lang="ar"] .lang{font-family:'Montserrat',sans-serif;font-weight:600}
html[lang="en"] .lang{font-family:'Smart Madinah Text',sans-serif}
.lang:hover{background:rgba(255,255,255,.1)}
.lang .ic{width:20px;height:20px}
.hdr__m{display:none}
@media (max-width:1199px){.nav{gap:var(--sp-4)}.hdr__in{gap:var(--sp-6)}.hdr__search{width:180px}}
@media (max-width:1023px){
  :root{--hdr:64px}
  .subbar__in{height:42px;justify-content:center}
  .subbar__btn{display:none}
  .nav,.hdr__tools{display:none}
  .hdr__in{justify-content:space-between;gap:0}
  .hdr__m{display:grid;place-items:center;width:44px;height:44px;color:#fff;border-radius:var(--r-sm)}
  .hdr__m .ic{width:24px;height:24px}
  .hdr__logo img{width:48px;height:48px}
}

/* mobile menu */
.menu[open]{position:fixed;inset:0;margin:0;width:100%;height:100dvh;background:#fff;display:flex;flex-direction:column;animation:fadein .2s ease-out}
.menu__head{display:flex;align-items:center;justify-content:space-between;height:64px;padding-inline:16px;background:var(--p-500);color:#fff}
.menu__head img{width:44px;height:44px}
.menu__head .iconbtn{color:#fff}
.menu__head .iconbtn:hover{background:rgba(255,255,255,.1)}
.menu__list{flex:1;overflow:auto;padding:var(--sp-2) 16px}
.menu__list a{display:flex;align-items:center;justify-content:space-between;min-height:56px;border-bottom:1px solid var(--border);font-size:17px;font-weight:600}
.menu__list a[aria-current]{color:var(--brand);font-weight:700}
.menu__list .ic{width:20px;height:20px;color:var(--text-3)}
.menu__foot{padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--border)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);padding-block:var(--sp-4);font-size:14px;color:var(--text-3)}
.crumbs a{color:var(--text-2)}
.crumbs a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:4px}
.crumbs .ic{width:14px;height:14px;opacity:.6}
.crumbs [aria-current]{color:var(--text);font-weight:700}
/* ---------- dialogs ---------- */
dialog{padding:0;border:0;background:transparent;color:var(--text);max-width:none;max-height:none}
dialog::backdrop{background:rgba(0,10,0,.5);backdrop-filter:blur(2px)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.sheet[open]{display:flex;flex-direction:column;position:fixed;margin:0;inset-block:0;inset-inline-end:0;inset-inline-start:auto;width:min(440px,100vw);height:100dvh;background:#fff;animation:side .35s var(--ease)}
@keyframes side{from{transform:translateX(-100%)}to{transform:none}}
html[dir="ltr"] .sheet[open]{animation-name:side-ltr}
@keyframes side-ltr{from{transform:translateX(100%)}to{transform:none}}
.sheet--sm[open]{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100dvh - 48px);width:min(480px,calc(100vw - 32px));border-radius:var(--r-lg);animation:pop .3s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.sheet__grab{display:none}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border)}
.sheet__head h2{font:700 24px/1.3 var(--f-title)}
html[lang="en"] .sheet__head h2{font-size:22px}
.sheet__body{flex:1;overflow:auto;overscroll-behavior:contain;padding:var(--sp-2) var(--sp-6) var(--sp-6)}
.sheet__foot{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-4) var(--sp-6) calc(var(--sp-4) + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:#fff}
.sheet__foot .btn--primary{flex:1}
.fgroup{display:grid;gap:var(--sp-3);padding-block:var(--sp-5);border-bottom:1px solid var(--border)}
.fgroup:last-child{border-bottom:0}
.fgroup h3{display:flex;justify-content:space-between;align-items:baseline;font-size:16px;font-weight:700}
.fgroup h3 small{font-size:12px;font-weight:500;color:var(--text-3)}
.fopts{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.fopt{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-4);border-radius:var(--r-sm);border:1px solid var(--border-strong);font-size:14px;font-weight:600;color:var(--text);transition:background-color .2s,border-color .2s,box-shadow .2s}
.fopt .ic{width:18px;height:18px;color:var(--gold)}
.fopt:hover{background:var(--bg-2)}
.fopt[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-subtle);color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.fopts--row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.fopts--row .fopt{justify-content:center;padding:0 var(--sp-2)}
.fopts--grid{display:grid;grid-template-columns:1fr 1fr}
.fopts--grid .fopt{justify-content:flex-start;min-height:52px}
.fopts--col{display:grid}
.fopt--via{display:grid;grid-template-columns:auto 1fr;align-items:center;text-align:start;column-gap:var(--sp-3);padding:var(--sp-3) var(--sp-4)}
.fopt--via small{grid-column:2;font-size:12px;font-weight:500;color:var(--text-3)}
@media (max-width:767px){
  .sheet[open]{inset:auto 0 0 0;width:100%;height:auto;max-height:88dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;animation:up .38s var(--ease)}
  html[dir="ltr"] .sheet[open]{animation-name:up}
  .sheet--sm[open]{margin:0;inset:auto 0 0 0;width:100%;height:auto;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .sheet__grab{display:block;width:40px;height:4px;margin:10px auto 0;border-radius:4px;background:var(--g-300)}
  .sheet__head{padding:var(--sp-3) var(--sp-5) var(--sp-4)}
  .sheet__body{padding:0 var(--sp-5) var(--sp-4)}
  .sheet__foot{padding-inline:var(--sp-5)}
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
dialog.closing{animation:fade-out .2s ease-in forwards !important}
@keyframes fade-out{to{opacity:0;transform:translateY(12px)}}

.ftr{background:var(--p-500);color:#fff}
.ftr__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-8);padding-block:var(--sp-16) var(--sp-12)}
.ftr__logo img{width:100px;height:100px}
.ftr h3{font:700 20px/1.4 var(--f-text);margin-bottom:var(--sp-5)}
.ftr ul{display:grid;gap:var(--sp-3)}
.ftr li a{font-size:16px;color:rgba(255,255,255,.75);transition:color .2s}
.ftr li a:hover{color:#fff}
.ftr__soc h3{margin-bottom:var(--sp-4)}
.ftr__icons{display:flex;gap:var(--sp-3)}
.ftr__icons a{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-xs);border:1px solid rgba(255,255,255,.18);transition:background-color .2s}
.ftr__icons a:hover{background:rgba(255,255,255,.08)}
.ftr__icons .ic{width:22px;height:22px}
.ftr__partners{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);padding-block:var(--sp-12) var(--sp-6)}
.ftr__logos{display:flex;align-items:center;gap:var(--sp-6)}
.ftr__logos img{height:48px;width:auto}
.ftr__up{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-xs);background:var(--p-400);color:#fff;transition:background-color .2s}
.ftr__up:hover{background:var(--p-300)}
.ftr__bottom{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--sp-3) var(--sp-6);padding-block:var(--sp-5) var(--sp-8);border-top:1px solid rgba(255,255,255,.35);font-size:14px}
.ftr__copy{font-weight:700}
.ftr__legal{display:grid;justify-items:end;gap:var(--sp-2)}
.ftr__legal nav{font-weight:700}
.ftr__legal nav a:hover{text-decoration:underline}
.ftr__by{color:rgba(255,255,255,.55)}
.ftr__by b{color:#fff;font-weight:500}
@media (max-width:1023px){.ftr__top{grid-template-columns:1fr 1fr;gap:var(--sp-8) var(--sp-6)}.ftr__logo{grid-column:1/-1}}
@media (max-width:767px){
  .ftr__top{padding-block:var(--sp-12) var(--sp-8)}
  .ftr__logo img{width:80px;height:80px}
  .ftr h3{font-size:18px;margin-bottom:var(--sp-4)}
  .ftr li a{font-size:15px}
  .ftr__partners{flex-wrap:wrap;padding-top:var(--sp-8)}
  .ftr__logos img{height:38px}
  .ftr__icons{gap:var(--sp-2)}
  .ftr__icons a{width:44px;height:44px}
  .ftr__legal{justify-items:start}
}

.toast{position:fixed;inset-inline:0;bottom:calc(var(--sp-6) + 72px);z-index:600;display:grid;justify-items:center;pointer-events:none}
.toast div{padding:var(--sp-3) var(--sp-5);border-radius:var(--r-md);background:var(--g-900);color:#fff;font-size:14px;box-shadow:var(--shadow-lg);animation:toast 2.4s ease forwards}
@keyframes toast{0%{opacity:0;transform:translateY(8px)}10%,85%{opacity:1;transform:none}100%{opacity:0}}
@media (min-width:1024px){.toast{bottom:var(--sp-8)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}}