:root{
  --dusk-plum:#2B1B3D;
  --dusk-plum-deep:#1C1129;
  --market-amber:#7A4A22;
  --sand:#F5E6C8;
  --souq-red:#C23B3B;
  --turquoise:#2E8B87;
  --lantern-gold:#F0A93A;
  --deep-plum-accent:#6A3F7A;
  --ink:#2A1810;
  --cream-text:#FBF3E3;
  --stripe: repeating-linear-gradient(
    90deg,
    var(--souq-red) 0px, var(--souq-red) 18px,
    var(--ink) 18px, var(--ink) 24px,
    var(--lantern-gold) 24px, var(--lantern-gold) 42px,
    var(--cream-text) 42px, var(--cream-text) 48px
  );
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:linear-gradient(180deg, var(--dusk-plum-deep) 0%, var(--dusk-plum) 45%, var(--market-amber) 100%);
  color:var(--cream-text);
  font-family:'Almarai', sans-serif;
  min-height:100vh;
}

.sadu-band{
  height:10px;
  width:100%;
  background-image:var(--stripe);
}

.bunting{
  display:flex;
  justify-content:center;
  gap:4px;
  padding:14px 8px 0;
  overflow:hidden;
}
.flag{
  width:0;
  height:0;
  border-left:17px solid transparent;
  border-right:17px solid transparent;
  border-top:26px solid var(--clr);
  transform-origin:top center;
  animation:sway 2.6s ease-in-out infinite;
}
.flag:nth-child(4n+1){ --clr:var(--souq-red); animation-delay:0s; }
.flag:nth-child(4n+2){ --clr:var(--lantern-gold); animation-delay:.3s; }
.flag:nth-child(4n+3){ --clr:var(--turquoise); animation-delay:.6s; }
.flag:nth-child(4n){ --clr:var(--deep-plum-accent); animation-delay:.9s; }

@keyframes sway{
  0%,100%{ transform:rotate(-5deg); }
  50%{ transform:rotate(5deg); }
}

header.gate{
  padding:8px 24px 44px;
  text-align:center;
  position:relative;
}

header.gate .glow{
  position:absolute;
  top:30px; left:50%;
  width:420px; height:420px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(240,169,58,.35), transparent 70%);
  filter:blur(6px);
  animation:pulse 3.4s ease-in-out infinite;
  z-index:0;
}
@keyframes pulse{
  0%,100%{ opacity:.65; }
  50%{ opacity:1; }
}

header.gate .eyebrow{
  position:relative; z-index:1;
  font-family:'IBM Plex Sans Arabic', sans-serif;
  letter-spacing:2px;
  color:var(--lantern-gold);
  font-size:14px;
  font-weight:600;
  margin:36px 0 12px;
}

header.gate h1{
  position:relative; z-index:1;
  font-family:'Lalezar', sans-serif;
  font-size:clamp(50px, 9vw, 96px);
  margin:0;
  color:var(--sand);
  line-height:1.1;
  text-shadow:0 0 30px rgba(240,169,58,.5), 0 2px 0 var(--dusk-plum-deep);
}

header.gate p.sub{
  position:relative; z-index:1;
  max-width:560px;
  margin:18px auto 0;
  color:var(--cream-text);
  opacity:.85;
  font-size:16px;
  line-height:1.8;
}

main{
  max-width:1180px;
  margin:0 auto;
  padding:56px 24px 80px;
}

.hall-label{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:40px;
}
.hall-label span{
  font-family:'IBM Plex Sans Arabic', sans-serif;
  font-size:13px;
  letter-spacing:1px;
  color:var(--lantern-gold);
  white-space:nowrap;
}
.hall-label .line{
  height:1px;
  flex:1;
  background:linear-gradient(90deg, var(--lantern-gold), transparent);
}

.booths{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:34px 28px;
}

.booth{
  position:relative;
  background:var(--sand);
  color:var(--ink);
  border-radius:4px;
  padding:26px 22px 24px;
  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.15);
}

.booth:hover{
  transform:translateY(-6px) rotate(-.4deg);
  box-shadow:0 20px 30px rgba(0,0,0,.4);
}

.booth:hover .tag{
  transform:rotate(-9deg) translateY(-2px);
}

.awning{
  height:28px;
  margin:-26px -22px 20px -22px;
  background:var(--clr);
  position:relative;
  border-radius:3px 3px 0 0;
}
.awning::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-9px;
  height:18px;
  background-image:radial-gradient(circle at 10px 0, transparent 9px, var(--clr) 9.5px);
  background-size:20px 20px;
  background-repeat:repeat-x;
}
.booth.c1 .awning{ --clr:var(--souq-red); }
.booth.c2 .awning{ --clr:var(--turquoise); }
.booth.c3 .awning{ --clr:var(--lantern-gold); }
.booth.c4 .awning{ --clr:var(--deep-plum-accent); }

.tag{
  position:absolute;
  top:2px;
  left:22px;
  background:var(--dusk-plum-deep);
  color:var(--sand);
  font-family:'IBM Plex Sans Arabic', sans-serif;
  font-weight:600;
  font-size:13px;
  padding:5px 11px;
  border-radius:3px;
  transform:rotate(-4deg);
  transition:transform .25s ease;
  box-shadow:0 4px 8px rgba(0,0,0,.3);
  z-index:2;
}

.booth .category{
  font-family:'IBM Plex Sans Arabic', sans-serif;
  font-size:12px;
  letter-spacing:.5px;
  color:var(--souq-red);
  font-weight:600;
  margin:20px 0 8px;
}

.booth h3{
  font-family:'Almarai', sans-serif;
  font-weight:800;
  font-size:21px;
  margin:0 0 10px;
  color:var(--ink);
}

.booth p.tagline{
  font-size:14px;
  line-height:1.7;
  color:#5a4a38;
  margin:0 0 20px;
  min-height:44px;
}

.booth-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.brand-mark{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--ink);
  background:#151515;
  flex-shrink:0;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}

.booth .visit{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'IBM Plex Sans Arabic', sans-serif;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  background:var(--lantern-gold);
  border:none;
  border-radius:5px;
  padding:9px 16px;
  cursor:pointer;
  text-decoration:none;
}

.booth .visit:hover{
  background:var(--souq-red);
  color:var(--cream-text);
}

.booth .visit.is-disabled{
  opacity:.55;
  pointer-events:none;
  cursor:default;
}

.booth-top{
  max-width:1100px;
  margin:0 auto;
  padding:28px 24px 0;
}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'IBM Plex Sans Arabic', sans-serif;
  font-size:13px;
  color:var(--lantern-gold);
  text-decoration:none;
  margin-bottom:18px;
}
.vendor-hero{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:22px;
  align-items:center;
  background:rgba(28,17,41,.45);
  border:1px solid rgba(245,230,200,.12);
  border-radius:14px;
  padding:22px;
}
.vendor-logo{
  width:140px;
  height:140px;
  border-radius:18px;
  object-fit:cover;
  background:#151515;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.vendor-hero .seat-pill{
  display:inline-block;
  background:var(--lantern-gold);
  color:var(--ink);
  font-family:'IBM Plex Sans Arabic', sans-serif;
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:10px;
}
.vendor-hero h1{
  font-family:'Lalezar', sans-serif;
  font-size:clamp(34px, 6vw, 52px);
  margin:0 0 8px;
  color:var(--sand);
  line-height:1.15;
}
.vendor-hero .lead{
  margin:0;
  opacity:.85;
  line-height:1.8;
  max-width:540px;
}
.contact-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.contact-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--cream-text);
  background:rgba(245,230,200,.08);
  border:1px solid rgba(245,230,200,.18);
  border-radius:999px;
  padding:8px 14px;
  font-family:'IBM Plex Sans Arabic', sans-serif;
  font-size:13px;
  font-weight:600;
}
.contact-chip.primary{
  background:var(--lantern-gold);
  color:var(--ink);
  border-color:transparent;
}
.chip-icon{
  width:16px;
  height:16px;
  display:inline-block;
  flex-shrink:0;
}
.contact-chip:not(.primary) .chip-icon{
  filter:invert(92%) sepia(12%) saturate(300%) hue-rotate(340deg);
}
.card-icon{
  width:15px;
  height:15px;
  display:inline-block;
  vertical-align:-2px;
  margin-inline-end:6px;
  filter:invert(70%) sepia(60%) saturate(500%) hue-rotate(350deg);
}
.section-label{
  display:flex;
  align-items:center;
  gap:16px;
  margin:36px 0 22px;
}
.section-label span{
  font-family:'IBM Plex Sans Arabic', sans-serif;
  font-size:13px;
  letter-spacing:1px;
  color:var(--lantern-gold);
  white-space:nowrap;
}
.section-label .line{
  height:1px;
  flex:1;
  background:linear-gradient(90deg, var(--lantern-gold), transparent);
}
.products{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:20px;
}
.product{
  background:var(--sand);
  color:var(--ink);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  transition:transform .2s ease;
  display:flex;
  flex-direction:column;
}
.product:hover{ transform:translateY(-4px); }
.product img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center top;
  display:block;
  background:#d9d0c3;
}
.product .meta{
  padding:12px 12px 14px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.product .meta h3{ margin:0 0 6px; font-size:15px; font-weight:800; }
.product .meta .price{
  font-family:'IBM Plex Sans Arabic', sans-serif;
  font-weight:700;
  color:var(--souq-red);
}
.product .meta .color{ font-size:12px; color:#6a5a48; margin-top:4px; }
.product .order{
  display:block;
  margin-top:auto;
  padding-top:10px;
  text-align:center;
  text-decoration:none;
  background:var(--dusk-plum);
  color:var(--sand);
  border-radius:6px;
  padding:8px 10px;
  font-size:12px;
  font-weight:700;
  font-family:'IBM Plex Sans Arabic', sans-serif;
}
.contact-panel{
  margin-top:40px;
  background:rgba(28,17,41,.55);
  border:1px solid rgba(245,230,200,.12);
  border-radius:14px;
  padding:22px;
}
.contact-panel h2{
  font-family:'Lalezar', sans-serif;
  margin:0 0 8px;
  color:var(--sand);
  font-size:28px;
}
.contact-panel p{ margin:0 0 16px; opacity:.85; line-height:1.8; }
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
}
.contact-card{
  background:rgba(245,230,200,.06);
  border:1px solid rgba(245,230,200,.12);
  border-radius:10px;
  padding:14px;
  text-decoration:none;
  color:var(--cream-text);
}
.contact-card strong{
  display:block;
  font-family:'IBM Plex Sans Arabic', sans-serif;
  color:var(--lantern-gold);
  margin-bottom:6px;
  font-size:12px;
}
.contact-card span{ font-size:14px; font-weight:700; }

@media (max-width:640px){
  .vendor-hero{ grid-template-columns:1fr; text-align:center; }
  .vendor-logo{ margin:0 auto; }
  .contact-row{ justify-content:center; }
  .vendor-hero .lead{ margin-inline:auto; }
}

footer{
  background:var(--dusk-plum-deep);
  padding:28px 24px 40px;
  text-align:center;
}
footer p{
  font-family:'IBM Plex Sans Arabic', sans-serif;
  font-size:13px;
  color:var(--cream-text);
  opacity:.6;
  margin:6px 0;
}
footer .domain{
  color:var(--lantern-gold);
  opacity:1;
  font-weight:600;
  letter-spacing:1px;
}

@media (prefers-reduced-motion: reduce){
  .booth, .tag, .flag, .glow, .product{ animation:none !important; transition:none !important; }
}