/* muzdalifa.kz витрина — marketing-style web (hig42 §5) tokens.css үстінде: жүйелік шрифт, 17px мәтін, 600 тақырып,
   980px мазмұн, үлкен біртекті өрістер, бір акцент (бренд tint), көлеңке жоқ, pop-up/слайдер жоқ.
   Түстер tokens.css-тен (light / dark / prefers-contrast); hero әрқашан бренд navy. Сыртқы ресурс жоқ. */
:root{--content:980px;--read:680px;--tile:var(--fill-3);--r-tile:20px;--section:96px;--hero-bg:#0B1433;--hero-bg-2:#1A2858;--hero-fg:#FFFFFF;--hero-fg-2:rgba(255,255,255,.74);--hero-btn:#FFFFFF;--hero-btn-fg:#0B1433;--hero-btn-hover:#EDE7D8;--text-2:#6E6E73;
  --hero-veil-1:rgba(11,20,51,.66);--hero-veil-2:rgba(11,20,51,.84);--hero-veil-3:rgba(11,20,51,.95)}
@media (prefers-color-scheme:dark){:root{--text-2:#A1A1A6}}
@media (max-width:760px){:root{--section:56px;--r-tile:16px}}
@media (prefers-contrast:more){:root{--hero-fg-2:rgba(255,255,255,.9);--tile:var(--fill-2);--text-2:var(--label-2)}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font:400 17px/1.47 var(--font);color:var(--label);background:var(--bg-2);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty}
.wrap{width:min(var(--content),100% - 2*var(--gutter));margin-inline:auto}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--link);outline-offset:3px}
img{max-width:100%;height:auto}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:48px;line-height:1.08}
h2{font-size:32px;line-height:1.125;margin-bottom:16px}
h3{font-size:24px;line-height:1.17}
p{margin:0 0 1em}
small{font-size:14px}
.lede{font-size:21px;line-height:1.38;color:var(--text-2);max-width:36em;margin:0 0 24px}
.meta{color:var(--text-2);margin:0 0 12px}
.eyebrow{color:var(--text-2);font-size:15px;margin:0 0 6px;font-variant-numeric:tabular-nums}

/* Skip link */
.skip{position:absolute;left:-999px;top:8px;padding:10px 16px;background:var(--bg-2);color:var(--label);border-radius:var(--r-pill);z-index:20}
.skip:focus{left:var(--gutter)}

/* Header: frosted glass only on this functional bar; opaque when contrast/transparency preferences ask for it */
.site-header{position:sticky;top:0;z-index:10;background:var(--glass-bg-solid);border-bottom:.5px solid var(--separator)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.site-header{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}}
@media (prefers-contrast:more),(prefers-reduced-transparency:reduce){.site-header{background:var(--bg-2);-webkit-backdrop-filter:none;backdrop-filter:none}}
.bar{display:flex;align-items:center;gap:8px;min-height:52px}
.brand{font-weight:600;font-size:15px;letter-spacing:.06em;color:var(--label);white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;margin-right:auto}
.brand:hover{text-decoration:none}
.site-nav{display:flex;gap:2px}
.site-nav a,.lang-switch{color:var(--text-2);font-size:15px;min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--r-pill);white-space:nowrap}
.site-nav a[aria-current],.site-nav a:hover,.lang-switch:hover{color:var(--label);text-decoration:none;background:var(--fill-4)}
.site-nav a[aria-current]{font-weight:600}

/* Hero: brand navy in every scheme, logo lockup from public/brand, one CTA, clocks */
.hero{background:linear-gradient(165deg,var(--hero-bg-2),var(--hero-bg) 65%);color:var(--hero-fg);padding:calc(var(--section) - 16px) 0 var(--section)}
.hero-logo{width:min(100%,300px);height:auto;display:block;margin:0 0 40px}
.hero h1{color:var(--hero-fg);font-size:56px;line-height:1.07;max-width:14em;margin-bottom:16px}
.hero .lede{color:var(--hero-fg-2);max-width:32em}
.hero .cta{margin:0}
.hero .btn{background:var(--hero-btn);color:var(--hero-btn-fg)}
.hero .btn:hover{background:var(--hero-btn-hover);color:var(--hero-btn-fg)}
.hero :focus-visible{outline-color:var(--hero-fg)}
.hero .clocks{color:var(--hero-fg-2);margin:40px 0 0}
.hero .clocks time{color:var(--hero-fg)}
/* Hero photo (assets/img/hero.jpg, the Kaaba at dusk; class only when the file is published): a brand-navy veil over the photo keeps white text ≥4.5:1 —
   lighter over the dusk sky, darkest over the bright arcades and crowd where the CTA and clocks sit. The gradient alone stays when the image fails;
   no photo at all under prefers-reduced-data or prefers-contrast:more (solid navy gradient as before). */
.hero-photo{background:linear-gradient(180deg,var(--hero-veil-1),var(--hero-veil-2) 55%,var(--hero-veil-3)),var(--hero-bg) url(/assets/img/hero.jpg) center 30%/cover no-repeat}
@media (prefers-reduced-data:reduce),(prefers-contrast:more){.hero-photo{background:linear-gradient(165deg,var(--hero-bg-2),var(--hero-bg) 65%)}}

main{padding-bottom:96px}
main>.wrap{padding:64px 0 0}

/* Tour cards: gray tiles on the page colour, whole card clickable through the heading link */
.tours{list-style:none;margin:0;padding:0;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr))}
.tour{position:relative;background:var(--tile);border-radius:20px;padding:28px;display:grid;gap:6px;align-content:start;transition:background var(--dur-fast) var(--ease-apple)}
.tour:hover{background:var(--fill-2)}
.tour:focus-within{outline:2px solid var(--link);outline-offset:3px}
.tour h3 a{color:var(--label)}
.tour h3 a:hover{text-decoration:none}
.tour h3 a:focus-visible{outline:none}
.tour h3 a::after{content:"";position:absolute;inset:0;border-radius:20px}
.tour .eyebrow,.tour .meta,.tour .seats,.tour .sold-out{margin:0}
.tour .price{margin-top:12px}
.more{color:var(--link);font-size:15px;margin-top:8px}

.price{font-weight:600;font-size:28px;line-height:1.2;margin:0;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.price small{font-weight:400;font-size:15px;color:var(--text-2);letter-spacing:0}
.seats{color:var(--green-ink);margin:0 0 16px}
.sold-out{color:var(--text-2);margin:0 0 16px}

/* Tour page */
.tour-page h1{margin-bottom:24px}
.offer{background:var(--tile);border-radius:20px;padding:28px;margin:0 0 48px;display:grid;gap:8px;justify-items:start}
.offer .price{font-size:34px}
.offer .seats,.offer .sold-out{margin:0}
.offer .cta{margin:8px 0 0}
.offer .meta{margin:4px 0 0;font-size:15px;grid-column:1/-1}
@media (min-width:761px){.offer{grid-template-columns:1fr auto;align-items:center}.offer .cta{grid-column:2;grid-row:1/3;justify-self:end;align-items:flex-end}}
.facts{margin:0 0 32px;padding:0}
.facts>div{display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:4px 24px;padding:12px 0;border-top:.5px solid var(--separator)}
.facts>div:last-child{border-bottom:.5px solid var(--separator)}
.facts dt{color:var(--text-2)}
.facts dd{margin:0;font-variant-numeric:tabular-nums}
.included{list-style:none;margin:0 0 32px;padding:0}
.included li{position:relative;padding:12px 0 12px 30px;border-top:.5px solid var(--separator)}
.included li:last-child{border-bottom:.5px solid var(--separator)}
.included li::before{content:"";position:absolute;left:6px;top:17px;width:6px;height:12px;border:solid var(--tint);border-width:0 2px 2px 0;transform:rotate(45deg)}
.rooms{border-collapse:collapse;width:100%;max-width:480px;margin:0 0 32px}
.rooms th,.rooms td{text-align:left;padding:12px 0;border-top:.5px solid var(--separator);font-variant-numeric:tabular-nums}
.rooms tr:last-child td{border-bottom:.5px solid var(--separator)}
.rooms th{font-weight:400;color:var(--text-2);font-size:15px}
.rooms th:last-child{text-align:right}
.rooms td:last-child{text-align:right;font-weight:600}
.back{margin-top:16px}

/* One CTA: brand capsule (navy in light, gold in dark from tokens) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 22px;border-radius:var(--r-pill);background:var(--tint);color:var(--on-tint);font-size:17px;line-height:1.2;font-weight:500;white-space:nowrap;transition:background var(--dur-fast) var(--ease-apple)}
.btn:hover{background:var(--tint-hover);color:var(--on-tint);text-decoration:none}
.cta{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:0 0 24px}
.cta small{color:var(--text-2)}

/* Text pages: 980 container, reading column 680 */
.content>*{max-width:var(--read)}
.content h1{margin-bottom:24px}
.content h2{font-size:24px;line-height:1.2;margin:40px 0 12px}
.notice{background:var(--tile);border-radius:12px;padding:12px 16px;color:var(--text-2);font-size:15px}
.version{font-size:14px;margin-top:40px}
.content h3{font-size:21px;line-height:1.2;margin:28px 0 4px}
/* Hotels: grouped rows — name (link when 2GIS/Maps URL is given) above a 15px secondary line «5★ · Мекке · Харамға ≈ 480 м» */
.hotels{list-style:none;margin:0 0 16px;padding:0}
.hotels li{display:grid;gap:2px;padding:12px 0;border-top:.5px solid var(--separator)}
.hotels li:last-child{border-bottom:.5px solid var(--separator)}
.hotels .meta{margin:0;font-size:15px}
/* «Компания» photos: the group photo spans the 980 container after the first section; the square Medina photo sits beside the second section
   (≥761px right column aligned with the h2 top margin, below the text on phones). width/height attributes + height:auto → no layout shift. */
.photo{margin:32px 0 8px}
.content>.photo,.content>.with-photo{max-width:none}
.photo img{display:block;width:100%;height:auto;border-radius:var(--r-tile);background:var(--tile)}
.with-photo{display:grid;gap:24px}
.with-photo>div{max-width:var(--read)}
.with-photo .photo{margin:16px 0 0}
@media (min-width:761px){.with-photo{grid-template-columns:minmax(0,1fr) clamp(220px,32%,320px);gap:32px;align-items:start}.with-photo .photo{margin:40px 0 0}}
.teaser .lede{margin-bottom:12px}
/* Home trust block: one quiet line of partner airlines, label in secondary gray */
.partners{margin:0 0 20px}
.partners span{color:var(--text-2)}

/* Footer */
.site-footer{border-top:.5px solid var(--separator);background:var(--tile);padding:40px 0 48px;color:var(--text-2);font-size:14px}
.footer-nav{display:flex;flex-wrap:wrap;gap:0 4px;margin:0 -12px 16px}
.footer-nav+.footer-nav{margin-top:-8px}
.footer-nav a{color:var(--text-2);min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--r-pill)}
.footer-nav a:hover,.footer-nav a[aria-current]{color:var(--label);text-decoration:none}
.legal{margin:0 0 4px}
.legal a{color:var(--text-2)}
.clocks{display:flex;flex-wrap:wrap;gap:4px 24px;margin:0 0 16px;font-variant-numeric:tabular-nums}
.clocks time{font-weight:600;color:var(--label)}
.clocks[hidden]{display:none}

.bilingual{padding:64px 0}
.bilingual section+section{margin-top:40px;padding-top:40px;border-top:.5px solid var(--separator)}

/* Booking form on the tour page (MVP-2, marketing-style continuation): native selects/radios, 44px targets, one capsule CTA */
.book{background:var(--tile);border-radius:20px;padding:28px;margin:0 0 48px}
.book h2{font-size:24px;line-height:1.2;margin-bottom:16px}
.book form{display:grid;gap:16px;justify-items:start}
.people{display:flex;flex-wrap:wrap;gap:16px 24px}
.field{display:grid;gap:6px;font-size:15px;color:var(--text-2)}
select{min-height:44px;min-width:120px;padding:0 36px 0 14px;font:inherit;color:var(--label);background:var(--bg-cell) no-repeat right 12px center/12px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%238E8E93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");border:1px solid var(--separator-opaque);border-radius:var(--r-control);appearance:none;-webkit-appearance:none}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{padding:0;margin:0 0 4px;font-size:15px;color:var(--text-2)}
.rooms-choice,.consents{width:100%}
.check{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;min-height:44px;padding:10px 0;border-top:.5px solid var(--separator);cursor:pointer}
.check:last-child{border-bottom:.5px solid var(--separator)}
.check input{width:24px;height:24px;margin:0;accent-color:var(--tint)}
.rooms-choice .check:first-of-type{border-top:0}
.book .btn,.book .meta{margin:0}

/* Portal (/book, /my): app-style grouped lists on the site chrome — leading-aligned reading column, hairline rows, tabular numbers */
.portal{padding:64px 0 0}
.portal>*{max-width:var(--read)}
.portal h1{margin-bottom:8px}
.portal>.eyebrow{margin-bottom:28px;font-size:17px}
.panel,.group{background:var(--tile);border-radius:20px;padding:24px 28px;margin:0 0 20px}
.panel h2,.group h2{font-size:21px;line-height:1.2;margin:0 0 12px}
.panel p:last-child,.group p:last-child,.group .facts{margin-bottom:0}
.panel .cta{margin:16px 0 8px}
.group .facts>div:first-child{border-top:0}
.group .facts>div:last-child{border-bottom:0}
.group .facts>div{padding:10px 0}
.msg{background:var(--bg-cell);border:.5px solid var(--separator-opaque);border-radius:12px;padding:12px 16px;font-size:15px;user-select:all;-webkit-user-select:all}
.warn{color:var(--orange-ink);font-weight:600}
.verified{margin:0 0 24px}
.verified p{margin:0 0 4px}
.notice{margin:0 0 20px}
.notice-warn{color:var(--red-ink);background:var(--red-soft)}
.badge{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:var(--r-pill);font-size:15px;font-weight:600;background:var(--fill-2);color:var(--label)}
.st-awaiting_payment,.st-held{background:var(--orange-soft);color:var(--orange-ink)}
.st-confirmed{background:var(--green-soft);color:var(--green-ink)}
.st-cancelled{background:var(--red-soft);color:var(--red-ink)}
.inline{display:inline}
.btn-secondary{background:transparent;color:var(--tint-ink);box-shadow:inset 0 0 0 1px var(--tint)}
.btn-secondary:hover{background:var(--tint-soft);color:var(--tint-ink)}
.btn-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;font:inherit;color:var(--link);cursor:pointer}
.btn-link:hover{text-decoration:underline}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 12px}
.group .actions{margin:16px 0 0}
.book-form .consents{margin-top:8px}
.repay{margin-top:16px}
.repay .meta{margin:0 0 8px}
.amount{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums;margin:8px 0 16px;letter-spacing:-.01em}
.amount .meta{display:block;font-size:15px;font-weight:400;margin:0}
.qr img{display:block;width:280px;max-width:100%;height:auto;background:#FFF;border-radius:16px;padding:12px;margin:0 0 16px}
.travelers{list-style:none;margin:0;padding:0}
.travelers li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:10px 0;border-top:.5px solid var(--separator)}
.travelers li:first-child{border-top:0}
.travelers .name{font-weight:600}
.travelers .visa{color:var(--text-2)}

/* Phone (iOS metrics from tokens.css ≤760px) */
@media (max-width:760px){
  h1{font-size:34px}h2{font-size:26px}h3{font-size:21px}.lede{font-size:19px}
  .bar{flex-wrap:wrap;padding:4px 0}.lang-switch{order:1}.site-nav{order:2;flex-basis:100%;margin:0 -8px}.site-nav a{flex:1;justify-content:center;padding:0 8px}
  .hero h1{font-size:36px;line-height:1.1}.hero-logo{width:220px;margin-bottom:28px}
  main{padding-bottom:64px}main>.wrap{padding:40px 0 0}
  .tour,.offer{padding:20px;border-radius:16px}.tour h3 a::after{border-radius:16px}
  .price{font-size:26px}.offer .price{font-size:30px}
  .btn,.cta{width:100%}.cta small{text-align:center;width:100%}
  .book,.panel,.group{padding:20px;border-radius:16px}.portal{padding:40px 0 0}.people{flex-direction:column;gap:12px}.field select{width:100%}
  .book form>.btn,.actions .btn,.actions form,.actions form .btn{width:100%}
}
/* Narrow phone (≤480px): the two-column dl has no room for a value next to a 160px label — stack it like an iOS grouped row
   (15px secondary label above, 17px value below); the Kaspi line puts its state and «open» link on their own 44px lines */
@media (max-width:480px){
  .facts>div{grid-template-columns:1fr;gap:2px}
  .facts dt{font-size:15px}
  .facts dd .pay-state{display:block}
  .facts dd .sep{display:none}
  .facts dd>a{display:inline-flex;align-items:center;min-height:44px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation:none!important;scroll-behavior:auto!important}}