/* ======================================================================
   AL MUALIM — LUXE THEME  (luxe.css)
   One shared luxury layer for index / app / teacher / kids / focus-room.
   Derived from the logo emblem: emerald velvet, gold foil, crescent,
   crystal. Loaded AFTER each page's own <style> so it refines it.
   All motion is transform/opacity only. Honors reduced-motion.
   ====================================================================== */
:root{
  --ink:#08281D;
  --emerald:#0F6B45;
  --emerald-lit:#16A46A;
  --emerald-soft:#EAF4EE;
  --gold:#C9A227;
  --gold-lit:#F0DDA0;
  --gold-deep:#8A6A1B;
  --cream:#FBF7EC;
  --velvet:linear-gradient(160deg,#0A3225 0%,#07251B 45%,#0C3D2B 100%);
  --foil:linear-gradient(135deg,#8A6A1B 0%,#E3C876 22%,#FFF3C9 38%,#D9B84A 55%,#A87F1E 78%,#EBD48A 100%);
  --foil-soft:linear-gradient(135deg,#C9A227,#F3E3A8 45%,#B6902A);
  --hair:rgba(201,162,39,.38);
  --radius:22px;
  --shadow:0 18px 44px -16px rgba(6,32,23,.45), 0 2px 0 rgba(255,255,255,.7) inset;
  --spring:cubic-bezier(.34,1.56,.44,1);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------------- gold foil helpers ---------------- */
.am-foil{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.am-rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--hair) 18%,var(--gold) 50%,var(--hair) 82%,transparent);opacity:.9}

/* ornamental divider used between sections / in footers */
.am-orn{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto;max-width:480px;color:var(--gold)}
.am-orn::before,.am-orn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--hair),var(--gold))}
.am-orn::after{background:linear-gradient(270deg,transparent,var(--hair),var(--gold))}

/* ---------------- typography refinement ---------------- */
body{text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.01em}
.sec-title{position:relative}
.eyebrow{background:linear-gradient(135deg,rgba(201,162,39,.16),rgba(201,162,39,.05))!important;
  color:var(--gold-deep)!important;border:1px solid var(--hair);box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
  display:inline-flex!important;align-items:center;white-space:nowrap;line-height:1.1}
#courses .eyebrow,#prayer .eyebrow{color:var(--gold-lit)!important;border-color:rgba(201,162,39,.55)}

/* gilded check marks replace the text glyphs in lists & badges */
.plan li::before,.hero-badges span::before{content:""!important;display:inline-block;width:1em;height:1em;
  margin-right:.45em;vertical-align:-.14em;background:var(--foil);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.2 16.2 4.6 11.6 6.4 9.8l2.8 2.8 8-8 1.8 1.8z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.2 16.2 4.6 11.6 6.4 9.8l2.8 2.8 8-8 1.8 1.8z'/></svg>") center/contain no-repeat}

/* ---------------- buttons: gold foil & emerald jewel ---------------- */
.btn{position:relative;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .34s var(--spring),box-shadow .34s var(--ease),filter .25s var(--ease)!important;
  will-change:transform}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -1px 0 rgba(0,0,0,.18) inset}
.btn::after{content:"";position:absolute;top:-10%;left:-70%;width:46%;height:120%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease);opacity:.9}
.btn:hover{transform:translateY(-3px) scale(1.02)}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(1px) scale(.985);transition-duration:.09s!important}
.btn-primary{background:linear-gradient(165deg,#15915E,#0C5437 70%)!important;color:#fff!important;
  border:1px solid rgba(201,162,39,.55);box-shadow:0 12px 26px -10px rgba(9,60,40,.75),0 0 0 1px rgba(255,255,255,.06) inset}
.btn-primary:hover{box-shadow:0 18px 36px -12px rgba(9,60,40,.8),0 0 22px -6px rgba(201,162,39,.5)}
.btn-gold{background:var(--foil)!important;color:#2A1F06!important;border:1px solid rgba(138,106,27,.6);
  box-shadow:0 12px 26px -12px rgba(138,106,27,.8)}
.btn-gold:hover{box-shadow:0 18px 34px -12px rgba(201,162,39,.75),0 0 20px -4px rgba(240,221,160,.6)}
.btn-ghost,.btn-sky{background:rgba(255,255,255,.7)!important;color:var(--emerald)!important;
  border:1.5px solid var(--hair)!important;box-shadow:0 8px 20px -12px rgba(6,32,23,.5)}
.btn-ghost:hover,.btn-sky:hover{border-color:var(--gold)!important;background:#fff!important}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------------- header: parchment + gilded band ---------------- */
header{background:linear-gradient(180deg,rgba(251,247,236,.96),rgba(251,247,236,.88))!important;
  border-bottom:0!important;box-shadow:0 10px 30px -22px rgba(6,32,23,.6)}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold-deep) 12%,var(--gold-lit) 50%,var(--gold-deep) 88%,transparent)}
header::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><g fill='none' stroke='%23C9A227' stroke-width='1'><path d='M32 2 48 10 56 32 48 54 32 62 16 54 8 32 16 10Z'/><circle cx='32' cy='32' r='11'/></g></svg>");
  background-size:64px 64px}
.logo{position:relative;letter-spacing:.005em}
.logo .arabic{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(138,106,27,.35))}
.am-emblem{width:42px;height:42px;flex:0 0 42px;transition:transform .6s var(--spring)}
/* the real logo file, ringed in gold */
.am-mark{width:40px;height:40px;flex:0 0 40px;border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(201,162,39,.85);box-shadow:0 6px 16px -8px rgba(6,32,23,.8),0 0 0 3px rgba(201,162,39,.15);
  transition:transform .6s var(--spring),box-shadow .4s var(--ease)}
.logo:hover .am-mark{transform:rotate(-6deg) scale(1.07);box-shadow:0 10px 22px -8px rgba(6,32,23,.8),0 0 18px -4px rgba(201,162,39,.7)}
.am-mark-lg{border-radius:50%;object-fit:cover;border:2px solid rgba(201,162,39,.8);
  box-shadow:0 22px 44px -18px #000,0 0 0 6px rgba(201,162,39,.12),0 0 40px -12px rgba(201,162,39,.5);
  animation:amMarkGlow 6s ease-in-out infinite}
@keyframes amMarkGlow{0%,100%{box-shadow:0 22px 44px -18px #000,0 0 0 6px rgba(201,162,39,.10),0 0 30px -14px rgba(201,162,39,.45)}
  50%{box-shadow:0 22px 44px -18px #000,0 0 0 6px rgba(201,162,39,.18),0 0 48px -10px rgba(201,162,39,.75)}}
.logo:hover .am-emblem{transform:rotate(-8deg) scale(1.08)}

/* header fits its content from 900px up (no wrapping nav, no clipped icons) */
.nav{gap:18px}
.nav-links{flex-wrap:nowrap;gap:20px!important}
.nav-links a{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.nav-links .am-i{width:1em;height:1em}
.nav-cta{flex:0 0 auto}
@media(max-width:1080px){
  .nav-links{display:none!important}
  .am-mark{width:34px;height:34px;flex:0 0 34px}
  .logo{gap:8px!important;font-size:1.18rem!important}
}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;
  background:var(--foil-soft);transform:scaleX(0);transform-origin:center;transition:transform .35s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}

/* ---------------- cards & panels: gilded parchment ---------------- */
.card,.panel,.plan,.tutor,.book-panel,.contact-form,.modal-card,.stat,.ptime,.kidcard{
  position:relative;isolation:isolate;
  border:1px solid var(--hair)!important;
  box-shadow:0 22px 48px -26px rgba(6,32,23,.5),0 1px 0 rgba(255,255,255,.8) inset!important;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s var(--ease)!important}
.card::before,.panel::before,.plan::before,.tutor::before,.stat::before{
  content:"";position:absolute;top:0;left:12%;right:12%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold-lit),transparent);opacity:.85}
.card:hover,.plan:hover,.tutor:hover,.stat:hover{
  transform:translateY(-6px);border-color:var(--gold)!important;
  box-shadow:0 34px 60px -28px rgba(6,32,23,.55),0 0 0 1px rgba(201,162,39,.35),0 1px 0 rgba(255,255,255,.9) inset!important}
/* sheen sweep across cards on hover */
.card::after,.plan::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 46%,transparent 62%);
  background-size:260% 100%;background-position:190% 0;opacity:0;transition:background-position .9s var(--ease),opacity .3s}
.card:hover::after,.plan:hover::after{opacity:1;background-position:-60% 0}
.plan.featured{border:1px solid var(--gold)!important;
  box-shadow:0 30px 60px -24px rgba(138,106,27,.45),0 0 0 3px rgba(201,162,39,.18),0 1px 0 #fff inset!important}
.plan .tag,.pill{background:var(--foil)!important;color:#2A1F06!important;border:1px solid rgba(138,106,27,.45);white-space:nowrap}
.pill.completed{background:linear-gradient(135deg,#dfe7ff,#c6d4ff)!important;color:#2b3a86!important}
.pill.cancelled{background:linear-gradient(135deg,#ffe0dc,#ffcdc6)!important;color:#8c3025!important}

/* dark sections keep the jewel treatment */
#courses .card,#prayer .ptime{background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.03))!important;
  border:1px solid rgba(201,162,39,.35)!important;
  box-shadow:0 26px 50px -30px #000,0 1px 0 rgba(255,255,255,.12) inset!important}
#courses .card:hover,#prayer .ptime:hover{border-color:var(--gold)!important;transform:translateY(-6px)}
#courses,#prayer{background:var(--velvet)!important}
#courses::after,#prayer::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'><g fill='none' stroke='%23C9A227' stroke-width='1.1'><path d='M45 4 68 14 78 45 68 76 45 86 22 76 12 45 22 14Z'/><path d='M45 24 60 39 45 54 30 39Z'/><circle cx='45' cy='45' r='30'/></g></svg>");
  background-size:90px 90px}
.pattern-strip{height:26px!important;opacity:1!important;border-radius:0!important;position:relative;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='26' viewBox='0 0 48 26'><g fill='none' stroke='%23C9A227' stroke-width='1.1'><path d='M24 3 33 13 24 23 15 13Z'/><path d='M0 13h15M33 13h15'/><circle cx='24' cy='13' r='2.6'/></g></svg>") repeat-x center/48px 26px!important;
  mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.pattern-strip::before,.pattern-strip::after{content:none!important}

/* ---------------- custom animated icon system ---------------- */
.am-i{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.16em;
  width:1.15em;height:1.15em;line-height:1}
.am-i svg{width:100%;height:100%;overflow:visible}
.card .icon,.icon.am-tile{width:60px!important;height:60px!important;border-radius:18px!important;
  background:radial-gradient(120% 120% at 25% 15%,#0F5B3E,#07281D)!important;
  border:1px solid rgba(201,162,39,.55);position:relative;overflow:hidden;
  box-shadow:0 14px 26px -16px rgba(6,32,23,.9),0 1px 0 rgba(255,255,255,.1) inset;
  transition:transform .45s var(--spring),box-shadow .4s var(--ease)}
.card .icon::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 35%,rgba(255,243,201,.35) 50%,transparent 65%);
  background-size:250% 100%;background-position:180% 0;transition:background-position 1s var(--ease)}
.card:hover .icon{transform:translateY(-3px) rotate(-3deg) scale(1.06)}
.card:hover .icon::after{background-position:-70% 0}
.card .icon .am-i{width:34px;height:34px}
/* idle + hover micro-motion on icon parts */
.am-i .sp{transform-origin:50% 50%;animation:amSpin 14s linear infinite}
.am-i .sw{transform-origin:50% 8%;animation:amSwing 4.6s ease-in-out infinite}
.am-i .pu{transform-origin:50% 50%;animation:amPulse 2.8s ease-in-out infinite}
.am-i .fl{animation:amFloat 4s ease-in-out infinite}
.am-i .gl{animation:amGlow 3.4s ease-in-out infinite}
.card:hover .am-i .sw,.btn:hover .am-i .sw{animation-duration:1.1s}
.card:hover .am-i .pu,.btn:hover .am-i .pu{animation-duration:.9s}
.card:hover .am-i .sp,.btn:hover .am-i .sp{animation-duration:2.6s}
@keyframes amSpin{to{transform:rotate(360deg)}}
@keyframes amSwing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes amPulse{0%,100%{transform:scale(.9);opacity:.75}50%{transform:scale(1.12);opacity:1}}
@keyframes amFloat{0%,100%{transform:translateY(.6px)}50%{transform:translateY(-1.4px)}}
@keyframes amGlow{0%,100%{opacity:.35}50%{opacity:1}}

/* emerald icon parts turn parchment-pale on dark grounds so they stay legible */
.card .icon .am-i [fill="url(#amE)"],
#courses .card .am-i [fill="url(#amE)"],
#prayer .am-i [fill="url(#amE)"],
.btn-primary .am-i [fill="url(#amE)"],
.btn-gold .am-i [fill="url(#amE)"],
footer .am-i [fill="url(#amE)"],
#toast .am-i [fill="url(#amE)"],
.chat-head .am-i [fill="url(#amE)"],
.msg.user .am-i [fill="url(#amE)"],
.quote-card .am-i [fill="url(#amE)"],
.kidcard .am-i [fill="url(#amE)"]{fill:#F3EBD8}
.btn-gold .am-i [fill="url(#amE)"]{fill:#123A2B}
.card .icon .am-i [fill="url(#amCry)"]{fill:#9CF2CE}

/* ---------------- ornaments injected by luxe.js ---------------- */
.am-lux{position:absolute;pointer-events:none;z-index:0}
.am-lantern{transform-origin:50% 0;animation:amSwing 6s ease-in-out infinite}
.am-mandala{opacity:.10;color:var(--gold)}
.am-arch{inset:auto 0 0 0;opacity:.14}
.am-crystal-glow{animation:amGlow 5s ease-in-out infinite}

.modal-card{overflow-x:hidden;max-height:92vh;overflow-y:auto}
.modal-card .x{color:var(--gold-deep)!important;transition:transform .3s var(--spring),color .2s}
.modal-card .x:hover{color:var(--gold)!important;transform:rotate(90deg) scale(1.1)}
.kidsbox .faces{display:flex;gap:10px;justify-content:center;align-items:center;font-size:1.5rem}

/* ---------------- calm the older decor layer (luxe.js owns lanterns now) -- */
.amd-lant{display:none!important}
.amd-rail{opacity:.16!important}
.amd-arch{opacity:.24!important}
.amd-cloud{opacity:.4!important}
.amd-cal,.amd-cal2{opacity:.05!important}

/* ---------------- footer: velvet + gilded ornament ---------------- */
footer{background:var(--velvet)!important;position:relative;overflow:hidden;padding:64px 0 54px!important}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold-deep) 10%,var(--gold-lit) 50%,var(--gold-deep) 90%,transparent)}
footer::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23C9A227' stroke-width='1.2'><path d='M60 6 94 20 108 60 94 100 60 114 26 100 12 60 26 20Z'/><circle cx='60' cy='60' r='26'/><path d='M60 34 78 52 60 70 42 52Z'/></g></svg>");background-size:120px 120px}
footer .arabic{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------------- inputs ---------------- */
input,textarea,select{transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--spring)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold)!important;
  box-shadow:0 0 0 3px rgba(201,162,39,.16)}
.chip,.day-btn,.slot,.countrow button{transition:transform .28s var(--spring),border-color .25s,background .25s,box-shadow .25s}
.chip:hover,.day-btn:hover,.slot:hover{transform:translateY(-2px);border-color:var(--gold)!important;box-shadow:0 10px 20px -14px rgba(6,32,23,.6)}
.chip.on,.slot.picked,.day-btn.active{background:linear-gradient(165deg,#15915E,#0C5437)!important;color:#fff!important;border-color:var(--gold)!important}

/* ---------------- scroll reveal (set by luxe.js) ---------------- */
.am-rev{opacity:0;transform:translateY(22px)}
.am-rev-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ---------------- toast ---------------- */
#toast{background:var(--velvet)!important;border:1px solid var(--hair);
  box-shadow:0 22px 50px -20px rgba(0,0,0,.6)!important;transition:transform .5s var(--spring)!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .am-rev{opacity:1!important;transform:none!important}
}


/* ======================================================================
   BOOKING — engraved parchment day list & time slots
   ====================================================================== */
#booking .book-panel{background:
  linear-gradient(175deg,#FDFAF2,#F6EEDC)!important;position:relative}
#booking .book-panel::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><g fill='none' stroke='%230B3D2E' stroke-width='1'><path d='M35 2 60 14 68 35 60 56 35 68 10 56 2 35 10 14Z'/><path d='M35 18 48 27 52 42 35 52 18 42 22 27Z'/></g></svg>");
  background-size:70px 70px}
#booking .day-btn,#booking .slot{position:relative;isolation:isolate;overflow:hidden;
  background-color:#FFFDF6!important;
  background-image:linear-gradient(170deg,#FFFDF6,#F3E9D3)!important;
  background-repeat:no-repeat!important;background-position:0 0!important;background-size:cover!important;
  border:1px solid rgba(201,162,39,.45)!important;
  box-shadow:0 10px 22px -16px rgba(6,32,23,.55),0 1px 0 rgba(255,255,255,.9) inset!important;
  transition:transform .3s var(--spring),box-shadow .35s var(--ease),border-color .25s,color .25s!important}
#booking .day-btn::before,#booking .slot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><g fill='none' stroke='%238A6A1B' stroke-width='.9'><path d='M13 1 25 13 13 25 1 13Z'/><circle cx='13' cy='13' r='3.4'/></g></svg>");
  background-size:26px 26px}
#booking .day-btn::after,#booking .slot::after{content:"";position:absolute;inset:3px;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(201,162,39,.35)}
#booking .day-btn{padding-left:40px!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23C9A227' stroke-width='1.6'><path d='M12 2 22 12 12 22 2 12Z'/><circle cx='12' cy='12' r='3.2'/></g></svg>"),
    linear-gradient(170deg,#FFFDF6,#F3E9D3)!important;
  background-repeat:no-repeat,no-repeat!important;background-position:14px center,0 0!important;
  background-size:16px 16px,cover!important}
#booking .day-btn.active{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23F0DDA0' stroke-width='1.6'><path d='M12 2 22 12 12 22 2 12Z'/><circle cx='12' cy='12' r='3.2'/></g></svg>"),
    linear-gradient(165deg,#12734E,#07281D)!important;
  background-repeat:no-repeat,no-repeat!important;background-position:14px center,0 0!important;
  background-size:16px 16px,cover!important}
#booking .day-btn:hover,#booking .slot:hover{transform:translateY(-3px) scale(1.02);border-color:var(--gold)!important;
  box-shadow:0 18px 30px -18px rgba(6,32,23,.6),0 0 16px -6px rgba(201,162,39,.55),0 1px 0 #fff inset!important}
#booking .day-btn.active,#booking .slot.picked{
  background:linear-gradient(165deg,#12734E,#07281D)!important;color:#FBF3DE!important;
  border-color:var(--gold)!important;
  box-shadow:0 18px 34px -18px rgba(6,32,23,.8),0 0 0 2px rgba(201,162,39,.35),0 0 24px -10px rgba(201,162,39,.6)!important}
#booking .day-btn.active::before,#booking .slot.picked::before{opacity:.20;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><g fill='none' stroke='%23F0DDA0' stroke-width='.9'><path d='M13 1 25 13 13 25 1 13Z'/><circle cx='13' cy='13' r='3.4'/></g></svg>")}
#booking .slot.taken{background:linear-gradient(170deg,#F0EADC,#E4DCC8)!important;opacity:.5!important;
  border-color:rgba(138,106,27,.25)!important;box-shadow:none!important;transform:none!important}
#booking .slot-grid{padding:4px}
#booking .book-confirm{background:linear-gradient(135deg,rgba(18,140,90,.10),rgba(201,162,39,.14))!important;
  border:1px solid rgba(201,162,39,.4)}

/* ======================================================================
   BRAND MEDALLION — the real logo, alive under the cursor
   ====================================================================== */
.medallion{width:100%!important;min-height:300px}
.am-medallion{position:relative;width:100%;max-width:430px;aspect-ratio:1;margin:0 auto;flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;perspective:900px;cursor:pointer;
  --rx:0deg;--ry:0deg}
.am-med-inner{position:relative;width:88%;height:88%;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .35s var(--ease)}
.am-med-logo{position:absolute;inset:6%;width:88%;height:88%;border-radius:50%;object-fit:cover;
  box-shadow:0 30px 60px -22px rgba(6,32,23,.75),0 0 0 3px rgba(201,162,39,.35),0 0 60px -18px rgba(201,162,39,.45);
  transition:box-shadow .4s var(--ease),transform .5s var(--spring)}
.am-med-ring{position:absolute;inset:0;animation:amRingSpin 46s linear infinite;color:var(--gold)}
.am-med-ring.rev{animation-duration:70s;animation-direction:reverse;opacity:.6}
@keyframes amRingSpin{to{transform:rotate(360deg)}}
.am-med-glow{position:absolute;inset:-6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(255,243,201,.30),transparent 62%);
  opacity:.5;transition:opacity .45s var(--ease)}
.am-medallion:hover .am-med-glow{opacity:1}
.am-medallion:hover .am-med-logo{transform:scale(1.03);
  box-shadow:0 36px 70px -20px rgba(6,32,23,.8),0 0 0 4px rgba(201,162,39,.5),0 0 90px -16px rgba(201,162,39,.75)}
.am-medallion:hover .am-med-ring{animation-duration:14s}
.am-med-cap{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;
  font-family:'Baloo 2',cursive;font-weight:800;font-size:.8rem;letter-spacing:.18em;
  background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9}
@media (prefers-reduced-motion:reduce){.am-med-ring{animation:none!important}.am-med-inner{transform:none!important}}

/* gilded swallows: slow glide, unhurried wing beat */
.am-swallow{width:80px!important;filter:drop-shadow(0 8px 14px rgba(6,32,23,.3))}
.am-swallow .wing{transform-origin:62% 62%;animation:amBeat 3.6s cubic-bezier(.4,0,.5,1) infinite!important}
.am-swallow .wing2{transform-origin:58% 40%;animation:amBeat 3.6s cubic-bezier(.4,0,.5,1) infinite;animation-delay:-.12s}
@keyframes amBeat{0%,56%,100%{transform:rotate(0) scaleY(1)}
  18%{transform:rotate(-19deg) scaleY(.84)}36%{transform:rotate(13deg) scaleY(1.06)}}


/* ======================================================================
   FINAL PASS — emblem / gutter birds / hero wrap / responsive
   ====================================================================== */
html,body{overflow-x:hidden;max-width:100%}
header,section,footer,.modal-backdrop{position:relative;z-index:1}
.am-med-logo{object-fit:contain;background:#07251B}

/* --- hero headline: Arabic on its own line --- */
.hero h1{text-wrap:balance}
.hero h1 .arabic{display:block;line-height:1.7;margin-bottom:2px}

/* --- hero CTAs always fully visible, with breathing room --- */
.hero{padding-bottom:120px!important}
.hero-ctas{margin-bottom:6px;row-gap:12px}
.hero-ctas .btn{white-space:nowrap}

/* --- phone layout (390px): one column, emblem under the text --- */
@media(max-width:760px){
  .hero{padding:56px 0 76px!important}
  .hero-grid{grid-template-columns:1fr!important;gap:34px}
  .verse{font-size:clamp(2rem,10vw,2.8rem)}
  .verse small{font-size:.9rem}
  .hero h1{font-size:clamp(1.8rem,8vw,2.3rem)}
  .hero p.lead{font-size:1.02rem}
  .hero-ctas{flex-direction:column;align-items:stretch;width:100%}
  .hero-ctas .btn{width:100%;text-align:center;padding:.9em 1.2em}
  .hero-badges{gap:10px;font-size:.85rem}
  .medallion,.am-medallion{max-width:290px}
  .medallion{min-height:0!important}
  .wrap{padding:0 18px}
}

/* no gutters to fly in → no birds */

/* real logo visible everywhere */
.am-med-logo{object-fit:cover!important;background:#07251B}
img.am-med-logo{inset:5%!important;width:90%!important;height:90%!important}
.am-mark{display:block}
@media(max-width:760px){
  .medallion,.am-medallion{max-width:270px}
  .am-med-cap{font-size:.72rem;bottom:-2px}
  .am-mark{width:36px;height:36px;flex:0 0 36px}
}

/* ======================================================================
   FLIGHT + AMBIENCE — birds glide the full width again, strictly behind
   every heading, button and card. Transform/opacity only: no repaint cost.
   ====================================================================== */
/* FLIGHT + AMBIENCE */
#amGutters{display:none!important}
.amd,.amd-bird,.bird{pointer-events:none!important;z-index:0!important}
.bird,.amd-bird{will-change:transform;contain:layout paint;backface-visibility:hidden}
header,section,footer,.modal-backdrop,.toast{position:relative;z-index:1}
header{z-index:20}

/* the ambient layer, awake again */
.amd-rail{opacity:.34!important}
.amd-cloud{opacity:.5!important}
.amd-cal{opacity:.07!important}
.amd-cal2{opacity:.055!important}

/* keep the flock small and cheap */
.amd-bird:nth-of-type(n+3),.bird:nth-of-type(n+4){display:none}

@media(max-width:760px){
  .amd-bird,.bird{display:none!important}   /* no spare room on a phone */
  .amd-rail{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .amd-bird,.bird,.amd-cloud{display:none!important}
}


/* ======================================================================
   MAARIFA CHAT — moonlit courtyard backdrop
   Scene is one inline SVG; every moving layer animates transform/opacity
   only, so it composites on the GPU and never repaints the page.
   ====================================================================== */
#chat .chatbox{position:relative;isolation:isolate;background:#06291d;border-color:rgba(201,162,39,.35)}
#chat .chatbox::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMjAwIDcwMCcgcHJlc2VydmVBc3BlY3RSYXRpbz0neE1pZFlNaWQgc2xpY2UnPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0nc2t5JyB4MT0nMCcgeTE9JzAnIHgyPScwJyB5Mj0nMSc+PHN0b3Agb2Zmc2V0PScwJScgc3RvcC1jb2xvcj0nIzA0MWQxNScvPjxzdG9wIG9mZnNldD0nNTUlJyBzdG9wLWNvbG9yPScjMGEzYjJhJy8+PHN0b3Agb2Zmc2V0PScxMDAlJyBzdG9wLWNvbG9yPScjMDYyOTFkJy8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9J2dvbGQnIHgxPScwJyB5MT0nMCcgeDI9JzEnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAlJyBzdG9wLWNvbG9yPScjOGE2YTFiJy8+PHN0b3Agb2Zmc2V0PSc0NSUnIHN0b3AtY29sb3I9JyNlM2M4NzYnLz48c3RvcCBvZmZzZXQ9JzEwMCUnIHN0b3AtY29sb3I9JyNhODdmMWUnLz48L2xpbmVhckdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0nbW9vbkdsb3cnIGN4PSc1MCUnIGN5PSc1MCUnIHI9JzUwJSc+PHN0b3Agb2Zmc2V0PScwJScgc3RvcC1jb2xvcj0nI2ZmZjNjOScgc3RvcC1vcGFjaXR5PScuNTUnLz48c3RvcCBvZmZzZXQ9JzEwMCUnIHN0b3AtY29sb3I9JyNmZmYzYzknIHN0b3Atb3BhY2l0eT0nMCcvPjwvcmFkaWFsR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSdmbG9vcicgeDE9JzAnIHkxPScwJyB4Mj0nMCcgeTI9JzEnPjxzdG9wIG9mZnNldD0nMCUnIHN0b3AtY29sb3I9JyMwZDQ2MzInLz48c3RvcCBvZmZzZXQ9JzEwMCUnIHN0b3AtY29sb3I9JyMwNDFmMTYnLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0nMTIwMCcgaGVpZ2h0PSc3MDAnIGZpbGw9J3VybCgjc2t5KScvPjxjaXJjbGUgY3g9JzYwMCcgY3k9JzI1MCcgcj0nMjEwJyBmaWxsPSd1cmwoI21vb25HbG93KScvPjxwYXRoIGQ9J002MzYgMTc2YTc4IDc4IDAgMSAwIDAgMTQ4IDkwIDkwIDAgMSAxIDAtMTQ4eicgZmlsbD0nI2YzZTRiNCcgb3BhY2l0eT0nLjg1Jy8+PGcgZmlsbD0nbm9uZScgc3Ryb2tlPSd1cmwoI2dvbGQpJyBzdHJva2Utd2lkdGg9JzMnIG9wYWNpdHk9Jy41Jz48cGF0aCBkPSdNNjAwIDQ3MFYyNTBhMTEwIDExMCAwIDAgMSAwIDAgMTEwIDExMCAwIDAgMC0xMTAgMTEwdjExMCcvPjxwYXRoIGQ9J002MDAgNDcwVjM2MGExMTAgMTEwIDAgMCAxIDExMC0xMTB2MCcvPjwvZz48cGF0aCBkPSdNNDIwIDcwMFYzMzBxMC05NSA5NS05NWgxNzBxOTUgMCA5NSA5NXYzNzB6JyBmaWxsPSdub25lJyBzdHJva2U9J3VybCgjZ29sZCknIHN0cm9rZS13aWR0aD0nNCcgb3BhY2l0eT0nLjU1Jy8+PGcgb3BhY2l0eT0nLjg1Jz48cGF0aCBkPSdNMCA3MDBWMzAwcTAtNzAgNzAtNzB0NzAgNzB2NDAweicgZmlsbD0nIzA1MmExZScvPjxwYXRoIGQ9J00xMjAwIDcwMFYzMDBxMC03MC03MC03MHQtNzAgNzB2NDAweicgZmlsbD0nIzA1MmExZScvPjxwYXRoIGQ9J00xNjAgNzAwVjM0MHEwLTU4IDU4LTU4dDU4IDU4djM2MHonIGZpbGw9JyMwNzMyMjQnLz48cGF0aCBkPSdNMTA0MCA3MDBWMzQwcTAtNTgtNTgtNTh0LTU4IDU4djM2MHonIGZpbGw9JyMwNzMyMjQnLz48L2c+PGcgc3Ryb2tlPSd1cmwoI2dvbGQpJyBzdHJva2Utd2lkdGg9JzMnIGZpbGw9J25vbmUnIG9wYWNpdHk9Jy40NSc+PHBhdGggZD0nTTAgMzAwcTcwLTcwIDE0MCAwJy8+PHBhdGggZD0nTTE2MCAzNDBxNTgtNTggMTE2IDAnLz48cGF0aCBkPSdNMTIwMCAzMDBxLTcwLTcwLTE0MCAwJy8+PHBhdGggZD0nTTEwNDAgMzQwcS01OC01OC0xMTYgMCcvPjwvZz48cmVjdCB5PSc2MDAnIHdpZHRoPScxMjAwJyBoZWlnaHQ9JzEwMCcgZmlsbD0ndXJsKCNmbG9vciknLz48ZyBzdHJva2U9JyNjOWEyMjcnIHN0cm9rZS13aWR0aD0nMS4yJyBvcGFjaXR5PScuMjInPjxwYXRoIGQ9J00wIDYyMGgxMjAwTTAgNjUwaDEyMDBNMCA2ODBoMTIwMCcvPjxwYXRoIGQ9J00yMDAgNjAwdjEwME00MDAgNjAwdjEwME02MDAgNjAwdjEwME04MDAgNjAwdjEwME0xMDAwIDYwMHYxMDAnLz48L2c+PC9zdmc+") center/cover no-repeat;
  animation:amCourtDrift 46s ease-in-out infinite alternate;will-change:transform}
#chat .chatbox::after{content:"";position:absolute;inset:-10%;z-index:0;pointer-events:none;opacity:.55;
  background:
    radial-gradient(2px 2px at 14% 22%,rgba(255,243,201,.9),transparent 60%),
    radial-gradient(2px 2px at 78% 16%,rgba(255,243,201,.75),transparent 60%),
    radial-gradient(1.6px 1.6px at 36% 64%,rgba(255,243,201,.7),transparent 60%),
    radial-gradient(1.6px 1.6px at 62% 44%,rgba(255,243,201,.6),transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 72%,rgba(255,243,201,.6),transparent 60%);
  animation:amMotes 18s ease-in-out infinite alternate;will-change:transform,opacity}
@keyframes amCourtDrift{from{transform:scale(1.06) translate3d(-1.2%,0,0)}to{transform:scale(1.12) translate3d(1.2%,-1.5%,0)}}
@keyframes amMotes{from{transform:translate3d(0,6px,0);opacity:.35}to{transform:translate3d(0,-10px,0);opacity:.7}}

/* lantern light pooling in from the top corners */
#chat .chat-log{position:relative;z-index:1;
  background:radial-gradient(60% 40% at 8% 0%,rgba(255,196,92,.16),transparent 70%),
             radial-gradient(60% 40% at 92% 0%,rgba(255,196,92,.14),transparent 70%)}

/* bubbles stay fully opaque so every word clears contrast over the scene */
#chat .chat-head{position:relative;z-index:2;background:linear-gradient(180deg,#0e5a3e,#0b3d2e);
  border-bottom:1px solid rgba(201,162,39,.45);box-shadow:0 6px 20px rgba(0,0,0,.28)}
#chat .msg{position:relative;z-index:1;box-shadow:0 6px 18px rgba(0,0,0,.22);
  animation:amMsgIn .28s ease-out both}
#chat .msg.bot{background:#F6EEDA;color:#0B3D2E;border:1px solid rgba(201,162,39,.4)}
#chat .msg.user{background:#0B3D2E;color:#fff;border:1px solid rgba(201,162,39,.35)}
@keyframes amMsgIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
#chat .chat-input{position:relative;z-index:2;background:rgba(4,25,18,.86);
  border-top:1px solid rgba(201,162,39,.35)}
#chat .chat-input input{background:#FCF8EF;border-color:rgba(201,162,39,.5);color:#0B3D2E}
#chat .chat-input button{background:linear-gradient(180deg,#0e5a3e,#0b3d2e);border:1px solid rgba(201,162,39,.5)}
#chat .chat-input button:hover{filter:brightness(1.12)}

@media (prefers-reduced-motion:reduce){
  #chat .chatbox::before,#chat .chatbox::after,#chat .msg{animation:none}
}

/* header lockup: square app mark, gold-rimmed */
.am-mark{width:38px;height:38px;flex:0 0 38px;border-radius:11px;object-fit:cover;
  box-shadow:0 2px 10px rgba(11,61,46,.28),0 0 0 1px rgba(201,162,39,.55);
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s}
.logo:hover .am-mark{transform:rotate(-6deg) scale(1.07);
  box-shadow:0 6px 18px rgba(11,61,46,.34),0 0 0 2px rgba(201,162,39,.8)}


/* ======================================================================
   MAARIFA CHAT — dancing stars + finished chrome
   Stars are absolutely positioned spans animating transform/opacity only.
   ====================================================================== */
#chat .am-stars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#chat .am-stars i{position:absolute;display:block;width:var(--s,10px);height:var(--s,10px);
  background:linear-gradient(140deg,#FFF3C9,#E3C876 55%,#A87F1E);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  opacity:0;filter:drop-shadow(0 0 6px rgba(255,214,120,.55));
  animation:amStarDance var(--d,7s) ease-in-out var(--t,0s) infinite;
  will-change:transform,opacity}
@keyframes amStarDance{
  0%{opacity:0;transform:translate3d(0,10px,0) scale(.5) rotate(-18deg)}
  22%{opacity:.95;transform:translate3d(4px,-2px,0) scale(1) rotate(6deg)}
  50%{opacity:.55;transform:translate3d(-5px,-14px,0) scale(.82) rotate(-10deg)}
  78%{opacity:.9;transform:translate3d(3px,-22px,0) scale(1.05) rotate(12deg)}
  100%{opacity:0;transform:translate3d(0,-34px,0) scale(.55) rotate(-6deg)}}

/* head: avatar + live status */
#chat .chat-head{justify-content:flex-start}
#chat .am-ava{width:34px;height:34px;flex:0 0 34px;border-radius:10px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(201,162,39,.7)}
#chat .am-status{margin-left:auto;display:flex;align-items:center;gap:7px;
  font-family:'Nunito',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.04em;color:#CFE7DA}
#chat .am-status b{width:8px;height:8px;border-radius:50%;background:#6FE3A6;
  box-shadow:0 0 0 0 rgba(111,227,166,.6);animation:amPulse 2.4s ease-out infinite}
@keyframes amPulse{0%{box-shadow:0 0 0 0 rgba(111,227,166,.6)}70%{box-shadow:0 0 0 9px rgba(111,227,166,0)}100%{box-shadow:0 0 0 0 rgba(111,227,166,0)}}

/* thinking dots */
#chat .am-dots{display:inline-flex;gap:4px;margin-left:7px;vertical-align:middle}
#chat .am-dots i{width:5px;height:5px;border-radius:50%;background:#0B3D2E;opacity:.35;
  animation:amDot 1.1s ease-in-out infinite}
#chat .am-dots i:nth-child(2){animation-delay:.16s}
#chat .am-dots i:nth-child(3){animation-delay:.32s}
@keyframes amDot{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-4px);opacity:1}}

/* quick asks */
#chat .am-chips{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;
  padding:12px 14px 0;background:rgba(4,25,18,.86)}
#chat .am-chips button{border:1px solid rgba(201,162,39,.5);background:rgba(246,238,218,.1);
  color:#F6EEDA;font-family:'Nunito',sans-serif;font-weight:700;font-size:.82rem;
  padding:7px 13px;border-radius:999px;cursor:pointer;
  transition:background .22s,transform .22s,border-color .22s}
#chat .am-chips button:hover{background:rgba(201,162,39,.25);border-color:#E3C876;transform:translateY(-2px)}

/* log scrollbar + fade */
#chat .chat-log{scrollbar-width:thin;scrollbar-color:rgba(201,162,39,.55) transparent}
#chat .chat-log::-webkit-scrollbar{width:8px}
#chat .chat-log::-webkit-scrollbar-thumb{background:rgba(201,162,39,.5);border-radius:99px}
#chat .chatbox{height:540px}
@media(max-width:760px){#chat .chatbox{height:470px}#chat .am-chips{padding:10px 12px 0}}
@media (prefers-reduced-motion:reduce){#chat .am-stars{display:none}}