@import url('fonts/fonts.css');

:root{
  --c-navy: 18 42 92;
  --c-navydeep: 12 31 69;
  --c-teal: 28 140 130;
  --c-green: 111 176 66;
  --c-lime: 200 214 46;
  --c-cloud: 245 247 245;
}
body{ font-family:'Almarai','Segoe UI','Tahoma','Arial',sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.font-display{ font-family:'Tajawal','Segoe UI','Tahoma','Arial',sans-serif; }
.font-mono{ font-family:'IBM Plex Mono','Consolas',monospace; }

/* Letter-spacing breaks Arabic glyph joining (turns connected script into disconnected/choppy marks).
   The RTL page uses Tailwind's tracking-* utilities purely for a Latin "eyebrow label" aesthetic;
   neutralize them site-wide in RTL mode so any Arabic text caught by those classes stays legible. */
html[dir="rtl"] [class*="tracking-"]{ letter-spacing: 0 !important; }

/* IBM Plex Mono has no Arabic glyphs — Arabic text tagged .font-mono (eyebrow labels, badges)
   falls back to whatever generic monospace font the OS provides, which often renders Arabic
   with broken/disconnected letterforms. In RTL mode, use the Arabic-safe display stack instead. */
html[dir="rtl"] .font-mono{ font-family:'Tajawal','Segoe UI','Tahoma','Arial',sans-serif; }

@keyframes floatSlow { 0%,100%{transform:translate(0,0) rotate(0deg);} 50%{transform:translate(-16px,20px) rotate(6deg);} }
@keyframes floatSlow2 { 0%,100%{transform:translate(0,0) rotate(0deg);} 50%{transform:translate(20px,-16px) rotate(-8deg);} }
@keyframes pulseGlow { 0%,100%{opacity:.5;} 50%{opacity:1;} }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes flipIn { from{opacity:0; transform:rotateY(-25deg) translateX(16px);} to{opacity:1; transform:rotateY(0) translateX(0);} }
.animate-float-slow { animation: floatSlow 9s ease-in-out infinite; }
.animate-float-slow2 { animation: floatSlow2 11s ease-in-out infinite; }
.animate-pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }
.animate-marquee { animation: marquee 28s linear infinite; }
.animate-flip { animation: flipIn .45s ease; }
@media (prefers-reduced-motion: reduce) {
  .animate-float-slow, .animate-float-slow2, .animate-pulse-glow, .animate-marquee, .animate-flip { animation: none !important; }
}

/* Booth selection ring */
.booth-selected{ outline:3px solid rgb(var(--c-teal)); outline-offset:1px; background:rgba(var(--c-teal),.1)!important; }
.booking-panel-highlight{ box-shadow:0 0 0 4px rgba(var(--c-lime),.6); }

/* Mobile hamburger -> X animation */
#mburger .mbar:nth-child(1){ transform-origin:center; }
#mburger .mbar:nth-child(3){ transform-origin:center; }
#mburger.mburger-open .mbar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
#mburger.mburger-open .mbar:nth-child(2){ opacity:0; }
#mburger.mburger-open .mbar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Hero image slideshow */
.hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease-in-out; }
.hero-slide.active{ opacity:1; }

/* Floor plan — fully fluid booth grid (fr-based) so it always fits the container width at any
   screen size, on both mobile AND desktop, with no fixed pixel widths that could overflow/clip. */
.floorplan-grid{
  width:100%;
  display:grid;
  grid-template-columns: minmax(28px,64px) repeat(9, 1fr) minmax(28px,64px);
  grid-template-rows: minmax(26px,56px) repeat(6, minmax(26px,60px));
  gap: clamp(3px, 0.8vw, 12px);
}
.fp-inner{
  grid-column:2/11; grid-row:2/8; width:100%;
  display:flex; flex-direction:column; justify-content:center;
  gap: clamp(10px, 4vw, 70px);
}
.fp-a-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(3px, 0.8vw, 12px); width:100%; }
.fp-s-row{ display:grid; grid-template-columns:1fr 1.55fr 1fr; gap:clamp(3px, 0.8vw, 12px); width:100%; }
.fp-a{ height:clamp(26px, 6vw, 70px); }
.fp-s-side, .fp-s-mid{ height:clamp(24px, 5.5vw, 64px); }
.floorplan-grid .booth-btn span{ font-size:clamp(7px, 1.6vw, 11px); }

@media print {
  .no-print{ display:none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #mmenu{ transition:none !important; }
  .hero-slide{ transition:none !important; }
}