/* Apple HIG-inspired hierarchy, comfortable targets, adaptive motion.
   Palette is local to the VIP page, which shares its base CSS with Hajj. */
body.vip-page {
    --vip-black: #09090b;
    --vip-surface: #151517;
    --vip-elevated: #202022;
    --vip-gold: #d6b576;
    --vip-text: #f5f5f7;
    --vip-muted: #b9b9bf;
    --vip-border: #ffffff1f;
    --primary-dark: var(--vip-text);
    color: var(--vip-text);
    background: var(--vip-black);
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Additional services and verified season footage: same palette and media radius. */
body.vip-page :is(.vip-extras, .vip-experience) { margin-top: 80px; scroll-margin-top: 140px; }
body.vip-page .vip-extras-list { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
body.vip-page .vip-extras-list li { display: flex; align-items: flex-start; gap: 20px; padding-block: 24px; border-top: 1px solid var(--vip-border); }
body.vip-page .vip-extras-list i { color: var(--vip-gold); font-size: 1.3rem; width: 28px; flex-shrink: 0; padding-top: 4px; }
body.vip-page .vip-extras-list h3 { font-size: 1.25rem; line-height: 1.6; margin: 0 0 8px; }
body.vip-page :is(.vip-extras-list p, .vip-video p) { color: var(--vip-muted); font-size: 1rem; line-height: 1.8; margin: 0; }
body.vip-page .vip-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
body.vip-page .vip-video { min-width: 0; }
body.vip-page .vip-video-media { aspect-ratio: 16 / 9; position: relative; overflow: hidden; border-radius: 16px; background: var(--vip-surface); }
body.vip-page .vip-video-media > a { display: block; height: 100%; }
body.vip-page .vip-video-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
body.vip-page .vip-video-play { position: absolute; inset: 0; display: grid; place-content: center; background: #00000025; }
body.vip-page .vip-video-play i { display: grid; place-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--vip-gold); color: var(--vip-black); font-size: 18px; }
body.vip-page .vip-video-media:focus-within { outline: 3px solid var(--vip-gold); outline-offset: 4px; }
body.vip-page .vip-video-media iframe { display: block; width: 100%; height: 100%; border: 0; }
body.vip-page .vip-video h3 { font-size: 1.2rem; line-height: 1.6; margin: 20px 0 8px; }
body.vip-page :is(.vip-video-source, .vip-channel-link) { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--vip-gold); }
body.vip-page .vip-channel-link { margin-top: 32px; font-weight: 700; }
@media (hover: hover) { body.vip-page .vip-video-media > a:hover img { transform: scale(1.035); } }
@media (max-width: 1000px) { body.vip-page .vip-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    body.vip-page :is(.vip-extras, .vip-experience) { margin-top: 56px; }
    body.vip-page :is(.vip-extras-list, .vip-video-grid) { grid-template-columns: 1fr; }
    body.vip-page .vip-extras-list { gap: 0; }
    body.vip-page .vip-extras-list h3 { font-size: 1.15rem; }
    body.vip-page .vip-extras .vip-button { width: 100%; padding-inline: 12px; font-size: .95rem; }
}
.vip-page a, .vip-page button { -webkit-tap-highlight-color: transparent; }
.vip-page :is(a, button):focus-visible { outline: 3px solid var(--vip-gold); outline-offset: 4px; }
.vip-skip-link { position: fixed; top: 12px; right: 16px; padding: 14px 20px; background: var(--vip-gold); color: #09090b; z-index: 9999; border-radius: 14px; transform: translateY(-180%); }
.vip-skip-link:focus { transform: translateY(0); }
.vip-page .navbar { gap: 20px; }
.vip-page .nav-menu li a { min-height: 44px; display: flex; align-items: center; }
.vip-page.nav-blue .nav-menu li a:is(:hover, .active) { background: #d6b5761f; color: #f4d79e; box-shadow: none; }
.vip-page.nav-blue :is(.desktop-btn, .mobile-only-btn) { border-color: #d6b57670; color: #f4d79e; min-height: 44px; }
.vip-page .vip-hero { background: var(--vip-black); }
.vip-page .vip-hero::before { background: linear-gradient(270deg, #09090be8, #09090b55), linear-gradient(0deg, #09090bf0, transparent 70%); }
.vip-page .vip-hero h1 { letter-spacing: -.035em; line-height: 1.22; }
.vip-page :is(.vip-eyebrow, .vip-service-number, .vip-season, .vip-hero .vip-eyebrow) { color: var(--vip-gold); }
.vip-page .vip-intro { color: #e0e0e4; line-height: 1.8; }
.vip-page .vip-button, .vip-page .vip-room-inquiry { background: var(--vip-gold); color: #17130c; min-height: 50px; font-weight: 700; box-shadow: none; }
.vip-page .vip-button:hover, .vip-page .vip-room-inquiry:hover { background: #e7c994; color: #17130c; }
.vip-page :is(.vip-button, .vip-room-inquiry, .vip-gallery-controls button):active { transform: scale(.98); }
.vip-page .vip-hero-facts > div { background: #151517b3; border-color: #d6b57635; }
.vip-page .vip-hero-facts i { color: var(--vip-gold); }
.vip-page .vip-hero-facts span { color: #ceced3; }
.vip-page .vip-section-nav { background: #09090bed; border-color: var(--vip-border); }
.vip-page .vip-section-nav a { color: #c6c6cd; }
.vip-page .vip-section-nav a:is(:hover, [aria-current="location"]) { background: #d6b5761f; color: #f4d79e; }
.vip-page :is(.vip-hotel, .vip-service, .vip-care-grid li, .vip-price-card) { background: var(--vip-surface); border-color: var(--vip-border); box-shadow: 0 8px 24px #00000018; border-radius: 24px; }
.vip-page :is(.vip-hotel-arabic, .vip-section-heading p, .vip-service p, .vip-support p, .vip-room-capacity, .vip-room-meals, .vip-room-price span) { color: var(--vip-muted); }
.vip-page :is(.vip-hotel-stars, .vip-hotel-location, .vip-hotel-features i, .vip-camp-class, .vip-food-label, .vip-food-meals i, .vip-route-step, .vip-transport-badge) { color: var(--vip-gold); }
.vip-page .vip-hotel-features { border-color: var(--vip-border); line-height: 1.7; }
.vip-page .vip-hotel-city, .vip-page .vip-gallery-controls { background: #09090bce; color: var(--vip-text); }
.vip-page .vip-gallery-controls { border: 1px solid #ffffff30; }
.vip-page .vip-gallery-controls button { min-width: 44px; min-height: 44px; }
.vip-page :is(.vip-transport, .vip-food, .vip-inquiry) { background: var(--vip-surface); color: var(--vip-text); border: 1px solid var(--vip-border); }
.vip-page :is(.vip-transport-copy > p, .vip-food-copy > p, .vip-inquiry p, .vip-phone, .vip-route-stops p) { color: var(--vip-muted); }
.vip-page :is(.vip-transport .vip-service-number, .vip-food-copy .vip-eyebrow) { color: var(--vip-gold); }
.vip-page :is(.vip-route-header, .vip-food-meals) { border-color: var(--vip-border); }
.vip-page .vip-route-node { background: var(--vip-elevated); border-color: #d6b57665; color: var(--vip-gold); }
.vip-page .vip-route-toggle { color: var(--vip-text); background: var(--vip-elevated); border-color: var(--vip-border); }
.vip-page .vip-route-track { opacity: .85; }
.vip-page .vip-route-traveler { background: #f2d7a7; box-shadow: 0 0 0 5px #d6b57620, 0 0 12px #d6b57670; animation-name: vip-gold-route-horizontal; }
.vip-page .route-offscreen :is(.vip-route-track, .vip-route-traveler) { animation-play-state: paused; }
.vip-page .vip-support { background: var(--vip-elevated); border: 1px solid var(--vip-border); }
.vip-page :is(.vip-support-icon, .vip-room-icon) { background: #d6b57618; color: var(--vip-gold); }
.vip-page .vip-support-days { color: var(--vip-muted); }
.vip-page .vip-support-days strong { color: var(--vip-gold); }
.vip-page .vip-camp-class { background: #d6b57618; border: 1px solid #d6b57630; }
.vip-page .vip-meals { background: var(--vip-elevated); border: 1px solid var(--vip-border); color: #dedee2; }
.vip-page .vip-meals i { color: var(--vip-gold); }
.vip-page .vip-room-price bdi { color: var(--vip-gold); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.vip-page .vip-footer { background: var(--vip-black); color: var(--vip-text); border-top: 1px solid var(--vip-border); }
.vip-page .vip-footer p { color: var(--vip-muted); }
.vip-page .vip-footer a, .vip-page .vip-phone { min-height: 44px; display: inline-flex; align-items: center; }
.vip-page .vip-reveal.vip-in-view { animation-duration: .65s; }
.vip-page .vip-kaaba-scene, .vip-page .vip-in-view .vip-hotel-photo img, .vip-page .vip-in-view .vip-food-photo img { animation-duration: 3.8s; }
@keyframes vip-gold-route-horizontal { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--route-distance, 0px))); } }
@keyframes vip-gold-route-vertical { from { transform: translateY(0); } to { transform: translateY(var(--route-distance, 0px)); } }
@media (max-width: 900px) {
    .vip-page .nav-menu { background: #151517f5; border-color: var(--vip-border); }
    .vip-page .nav-menu li a { min-height: 48px; }
}
@media (max-width: 760px) { .vip-page .vip-route-traveler { animation-name: vip-gold-route-vertical; } }
@media (max-width: 600px) {
    .vip-page .vip-hero::before { background: linear-gradient(0deg, #09090bfa, #09090b80 70%, #09090b85); }
    .vip-page .vip-section-nav { padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
    .vip-page .vip-mobile-dock { background: #151517f2; border-color: var(--vip-border); }
    .vip-page .vip-mobile-dock a { color: var(--vip-gold); border-color: #d6b57645; min-height: 48px; }
    .vip-page .vip-mobile-dock .vip-dock-whatsapp { background: var(--vip-gold); color: #17130c; font-weight: 700; }
    .vip-page .vip-hotel-copy h4 { line-height: 1.45; }
    .vip-page .vip-route-stops h5 { font-size: 1.12rem; }
    .vip-page .vip-route-stops p { font-size: .85rem; }
    .vip-page .vip-care-grid h4 { font-size: 1.05rem; }
    .vip-page .vip-room-capacity, .vip-page .vip-room-meals { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
    .vip-page *, .vip-page *::before, .vip-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
    .vip-page :is(.vip-section-nav, .vip-mobile-dock, .vip-gallery-controls, .vip-hotel-city, .vip-hero-facts > div) { background: #151517; backdrop-filter: none; }
}
@media (prefers-contrast: more) { .vip-page { --vip-border: #ffffff65; --vip-muted: #dedee4; } }

/* Design read: luxury travel, Arabic RTL, photography first.
   DESIGN_VARIANCE 7 / MOTION_INTENSITY 6 / VISUAL_DENSITY 3.
   Media use 16px corners; actions retain comfortable pill targets. */
body.vip-page .navbar { padding-block: 16px; }
body.vip-page .vip-hero { min-height: 100svh; padding-block: 96px; justify-content: center; gap: 0; }
body.vip-page .vip-hero-content { max-width: 760px; }
body.vip-page .vip-hero h1 { font-size: clamp(3rem, 5.6vw, 5rem); margin-block: 24px; }
body.vip-page .vip-intro { margin-bottom: 32px; }
body.vip-page .vip-hero-facts { max-width: 1232px; margin: 0 auto; padding: 36px 24px; gap: 36px; border-bottom: 1px solid var(--vip-border); }
body.vip-page .vip-hero-facts > div { background: none; border: 0; border-radius: 0; backdrop-filter: none; padding: 0; }
body.vip-page .vip-section { padding-block: 72px; }
body.vip-page .vip-section-heading { margin-bottom: 48px; }
body.vip-page .vip-hotels { margin-bottom: 80px; }
body.vip-page .vip-sacred-views { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; gap: 28px; margin-bottom: 80px; }
body.vip-page .vip-scene { margin: 0; min-width: 0; }
body.vip-page .vip-scene-aerial { padding-top: 64px; }
body.vip-page .vip-scene-frame { overflow: hidden; border-radius: 16px; aspect-ratio: 3 / 2; background: var(--vip-surface); }
body.vip-page .vip-scene-aerial .vip-scene-frame { aspect-ratio: 4 / 5; }
body.vip-page .vip-scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.vip-page .vip-scene figcaption { margin-top: 16px; color: var(--vip-muted); font-size: 1rem; line-height: 1.7; }
body.vip-page .vip-gmc-detail { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 40px; padding: 24px 0 48px; }
body.vip-page .vip-gmc-detail h3 { font-size: clamp(2rem, 3vw, 3.2rem); line-height: 1.35; margin: 0 0 24px; }
body.vip-page .vip-gmc-detail p { max-width: 38ch; color: var(--vip-muted); line-height: 1.8; font-size: 1.1rem; }
body.vip-page .vip-gmc-detail a { display: inline-flex; align-items: center; gap: 12px; color: var(--vip-gold); min-height: 48px; margin-top: 16px; }
body.vip-page .vip-gmc-detail-photo { overflow: hidden; border-radius: 16px; background: #000; }
body.vip-page .vip-gmc-detail-photo img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
    body.vip-page .vip-in-view .vip-scene-frame img { animation: vip-scene-settle 4s cubic-bezier(.22,1,.36,1) both; }
    body.vip-page .vip-in-view .vip-gmc-detail-photo img { animation: vip-car-settle 1.6s cubic-bezier(.22,1,.36,1) both; }
    @supports (animation-timeline: view()) {
        body.vip-page .vip-in-view .vip-scene-frame img { animation: vip-scene-scroll linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    }
}
@keyframes vip-scene-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes vip-scene-scroll { from { transform: scale(1.08) translateY(2%); } to { transform: scale(1.02) translateY(-1%); } }
@keyframes vip-car-settle { from { opacity: .5; transform: translateX(-24px) scale(1.03); } to { opacity: 1; transform: translateX(0) scale(1); } }
@media (max-width: 760px) {
    body.vip-page .vip-sacred-views { grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px; }
    body.vip-page .vip-scene-aerial { padding-top: 0; }
    body.vip-page .vip-scene-aerial .vip-scene-frame { aspect-ratio: 4 / 3; }
    body.vip-page .vip-gmc-detail { grid-template-columns: 1fr; gap: 24px; padding-bottom: 24px; }
}
body.vip-page .vip-hotels-grid { gap: 40px; }
body.vip-page .vip-hotel { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
body.vip-page .vip-hotel-photo { border-radius: 16px; }
body.vip-page .vip-hotel-photo img { height: 370px; }
body.vip-page .vip-hotel-copy { padding: 24px 0 0; }
body.vip-page .vip-city-label { color: var(--vip-gold); font-size: 1.05rem; margin-bottom: 8px; }
body.vip-page .vip-gallery-status { position: absolute; inset: 12px 12px auto auto; background: #151517ed; padding: 8px 12px; border-radius: 8px; font-size: .85rem; }
body.vip-page .vip-gallery-status:empty { display: none; }
body.vip-page :is(.vip-transport, .vip-camps, .vip-food, .vip-inquiry) { border-radius: 16px; }
body.vip-page .vip-transport { padding: 32px; margin-bottom: 56px; }
body.vip-page .vip-route-track { animation: none; }
body.vip-page .vip-camps > img { height: 100%; min-height: 360px; }
body.vip-page .vip-support { padding: 32px 0 8px; background: transparent; border: 0; border-radius: 0; margin-top: 48px; }
body.vip-page .vip-support-icon { display: none; }
body.vip-page .vip-care-grid { gap: 0 24px; }
body.vip-page .vip-care-grid li { display: flex; align-items: center; gap: 12px; border: 0; border-top: 1px solid var(--vip-border); padding: 24px 0; border-radius: 0; background: transparent; box-shadow: none; }
body.vip-page .vip-care-grid i { margin: 0; font-size: 1.2rem; color: var(--vip-gold); }
body.vip-page .vip-food { grid-template-columns: 1fr; border: 0; background: transparent; border-radius: 0; margin-top: 64px; }
body.vip-page .vip-food-photo { border-radius: 16px; }
body.vip-page .vip-food-photo img { height: 430px; min-height: 0; }
body.vip-page .vip-food-copy { padding: 32px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }
body.vip-page .vip-food-copy h3 { grid-row: 1 / 4; margin: 0; }
body.vip-page .vip-food-label { justify-self: start; }
body.vip-page .vip-pricing { padding-top: 96px; }
body.vip-page .vip-meals { border: 0; padding: 0; background: transparent; margin-bottom: 32px; }
body.vip-page .vip-pricing-grid { display: block; border-top: 1px solid var(--vip-border); }
body.vip-page .vip-price-card { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(240px, 1fr) auto; column-gap: 32px; align-items: center; padding: 32px 0; border: 0; border-bottom: 1px solid var(--vip-border); border-radius: 0; background: transparent; box-shadow: none; }
body.vip-page .vip-price-card:hover { transform: none; box-shadow: none; }
body.vip-page .vip-price-card h3 { grid-column: 1; grid-row: 1; margin-bottom: 6px; }
body.vip-page .vip-room-capacity { grid-column: 1; grid-row: 2; }
body.vip-page .vip-room-price { grid-column: 2; grid-row: 1 / 3; margin: 0; }
body.vip-page .vip-room-inquiry { grid-column: 3; grid-row: 1 / 3; }
body.vip-page .vip-inquiry { background: transparent; border-width: 1px 0 0; border-radius: 0; padding: 48px 0; }
body.vip-page :is(.vip-hotels, .vip-transport, .vip-services-grid, .vip-care, .vip-food, .vip-pricing) { content-visibility: auto; contain-intrinsic-size: auto 600px; }
body.vip-page .vip-hotels { contain-intrinsic-size: auto 900px; }
body.vip-page :is(a, button, header, .nav-menu) { transition-property: opacity, transform; }
body.vip-page .vip-kaaba-scene { animation-duration: 1.2s; }
@media (max-width: 1000px) {
    body.vip-page .vip-care-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.vip-page .vip-price-card { grid-template-columns: 1fr auto; gap: 8px 20px; }
    body.vip-page .vip-room-price { grid-column: 2; }
    body.vip-page .vip-room-inquiry { grid-row: 3; grid-column: 1 / -1; justify-self: start; margin-top: 12px; }
    body.vip-page .vip-inquiry { padding-inline: 0; }
}
@media (max-width: 760px) {
    body.vip-page .vip-hero-facts { gap: 20px; padding-inline: 20px; }
    body.vip-page .vip-hotels-grid { gap: 48px; }
    body.vip-page .vip-hotel-photo img { height: 300px; }
    body.vip-page .vip-hotels { margin-bottom: 56px; }
    body.vip-page .vip-transport { margin-bottom: 40px; padding: 24px; }
    body.vip-page .vip-camps > img { height: 280px; min-height: 0; }
    body.vip-page .vip-camps { grid-template-columns: 1fr; }
    body.vip-page .vip-food-copy { display: block; }
    body.vip-page .vip-food-copy h3 { margin-bottom: 20px; }
    body.vip-page .vip-food-photo img { height: 280px; }
}
@media (max-width: 600px) {
    body.vip-page .vip-hero { min-height: calc(100svh - 76px); padding: 104px 20px 48px; }
    body.vip-page .vip-hero-content { margin-top: 0; }
    body.vip-page .vip-hero h1 { font-size: clamp(2.2rem, 9.8vw, 3.2rem); margin-block: 24px; }
    body.vip-page .vip-hero-facts { padding: 28px 16px; gap: 16px; }
    body.vip-page .vip-hero-facts > div { gap: 8px; }
    body.vip-page .vip-hero-facts strong { font-size: .9rem; }
    body.vip-page .vip-hero-facts span { font-size: .76rem; }
    body.vip-page .vip-section { padding-block: 48px; }
    body.vip-page .vip-hotel-photo img { height: 260px; }
    body.vip-page .vip-support { margin-top: 32px; }
    body.vip-page .vip-care-grid li { padding: 20px 0; align-items: flex-start; }
    body.vip-page .vip-care-grid h4 { font-size: .95rem; }
    body.vip-page .vip-food { margin-top: 40px; }
    body.vip-page .vip-pricing { padding-top: 64px; }
    body.vip-page .vip-price-card { grid-template-columns: 1fr; gap: 6px; padding-block: 28px; }
    body.vip-page .vip-room-price { grid-column: 1; grid-row: 3; margin-top: 14px; }
    body.vip-page .vip-room-inquiry { grid-column: 1; grid-row: 4; justify-self: stretch; margin-top: 16px; }
    body.vip-page .vip-inquiry { margin-bottom: 24px; }
}