/* 1DubaiTours design system — tokens and shared rules from the golden master
   (Burj Khalifa.dc.html). Component styling stays inline in the templates,
   exactly as the master ships it; this file carries only what must be shared. */

:root{
  --bg-cream:#F8F4EF; --surface-alt:#F1EBE3; --card:#FFFFFF;
  --ink-dark:#1A1521; --plum:#3E1B3A;
  --border:#E6DCD0; --border-soft:#EDE4DA;
  --text:#221C26; --text-2:#4A4050; --muted:#6E6272; --muted-2:#6E6172;
  --gold:#C79A4B; --gold-light:#DDB870; --gold-text:#785C1C;
  --cta:linear-gradient(140deg,#C0257A,#8E1F5E);
  --whatsapp:#2AA34A; --tick:#1A7A4C; --cross:#9A3D3D;
}

body{margin:0;background:var(--bg-cream);font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#8E1F5E;text-decoration:none}
a:hover{color:#C0257A}
img{max-width:100%}
h1,h2,h3{text-wrap:pretty}

/* container */
.odt-wrap{max-width:1360px;margin:0 auto;padding:0 40px}

/* hero + tiles + facts — verbatim from the master */
.odt-herogrid{display:grid;grid-template-columns:minmax(320px,470px) minmax(0,1fr);gap:16px 40px;align-items:start}
.odt-heromedia{grid-column:2}
.odt-herotext{grid-column:1;grid-row:1;max-width:470px}
.odt-tilerow{display:grid;grid-template-columns:1fr 1fr minmax(150px,210px);gap:16px}
.odt-factsrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1100px){
  .odt-herogrid{grid-template-columns:1fr!important}
  .odt-heromedia{grid-column:1!important;grid-row:1!important}
  .odt-herotext{grid-column:1!important;grid-row:2!important;max-width:none!important}
  .odt-tilerow{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important}
  .odt-factsrow{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
}

/* grids that must never keep fixed px columns on small screens */
.odt-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px}
.odt-pkggrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:34px;align-items:start}
.odt-info4{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
@media (max-width:1024px){ .odt-pkggrid{grid-template-columns:minmax(0,1fr)} }

/* motion */
@keyframes odtFade{from{opacity:0}to{opacity:1}}
@keyframes odtRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes odtBlurIn{from{opacity:0;transform:translateY(24px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes odtGlow{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

/* nav */
.odt-nav{white-space:nowrap}
@media (max-width:1024px){.odt-nav{display:none!important}}
@media (max-width:640px){.odt-supportlink{display:none}}

/* prices — only ever emitted by odt_price_html() */
.odt-price{font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--text)}
.odt-price-unit{font-size:13px;color:var(--muted);margin-inline-start:5px}
.odt-price-unverified{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:500;color:var(--muted)}

/* mono eyebrow: // ٠١ — الاسم */
.odt-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.02em;color:var(--muted-2);text-align:right}

/* every tap target ≥44px */
a[role=button],button,.odt-tap{min-height:44px}

/* MOBILE STICKY BOOKING CTA — HANDOFF.md gap #4, built production-side */
.odt-sticky{display:none}
@media (max-width:900px){
  body{padding-bottom:84px}
  .odt-sticky{
    display:flex;position:fixed;inset:auto 0 0 0;z-index:70;align-items:center;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)) 14px;
    background:rgba(248,244,239,.96);backdrop-filter:blur(14px);border-top:1px solid var(--border)}
  .odt-sticky .odt-sticky-price{display:flex;flex-direction:column;line-height:1.25;min-width:0}
  .odt-sticky .odt-sticky-label{font-size:12px;color:var(--muted)}
  .odt-sticky .odt-sticky-cta{
    flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:48px;padding:0 18px;border-radius:999px;background:var(--cta);color:#F8F4EF;
    font-size:15px;font-weight:600;white-space:nowrap}
  .odt-sticky .odt-sticky-wa{
    flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    width:48px;height:48px;border-radius:50%;background:#1A7A4C;color:#fff}
}

/* mobile: nothing may exceed the viewport */
@media (max-width:900px){
  .odt-wrap{padding:0 16px}
  /* Blanket collapse for inline-styled grids — they carry fixed px columns that
     would otherwise overflow. The named component grids opt out below, because
     2-up is the right density for them on a phone. */
  [style*="display: grid"],[style*="display:grid"]{grid-template-columns:1fr!important}
  .odt-tilerow{grid-template-columns:1fr 1fr!important}
  .odt-factsrow{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))!important}
  .odt-info4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
  .odt-cards{grid-template-columns:1fr!important}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* prices sitting on the dark zones */
.odt-price.odt-on-dark{color:#F8F4EF}
.odt-price-unit.odt-on-dark{color:rgba(248,244,239,.6)}
.odt-price-unverified.odt-on-dark{color:rgba(248,244,239,.7)}

/* ---- mobile header: nothing may leave the viewport ---- */
@media (max-width:900px){
  .odt-header-row{padding:10px 16px!important;gap:10px!important}
  .odt-logo-sub{display:none}                 /* 1DUBAITOURS.COM wordmark */
  .odt-header-cta{padding:0 16px!important;font-size:13px!important}
}
@media (max-width:380px){
  .odt-logo-name{font-size:14px!important}
  .odt-header-cta span{display:none}          /* drop the arrow, keep the label */
}

/* ---- every interactive element clears the 44px touch minimum ---- */
a,button,summary,[role="radio"],[role="button"]{min-height:44px}
a:not([class]),
nav a, footer a, .odt-nav a, .odt-inline-link{
  display:inline-flex;align-items:center
}
/* breadcrumbs and footer links are inline text — give them the height without
   breaking the line flow */
.odt-crumbs a,.odt-footer a{min-height:44px;display:inline-flex;align-items:center}

/* sticky bar price sits on cream — keep it at full ink strength */
.odt-sticky .odt-price{color:var(--text)}
.odt-sticky .odt-price-unit{color:var(--text-2)}

/* The WhatsApp brand green (#2AA34A) only clears 3.26:1 against white text.
   Anywhere a WhatsApp control carries a text label we use the design system's
   own darker green token (--tick #1A7A4C, 5.34:1). The bare status dot in the
   header keeps #2AA34A — it carries no text. */