/* v3.11.26 — Safar-only 3D + app experience (recommendations 1–20).
   Fully scoped. Removing data-safar-app-experience=1 restores the reference theme. */
.public-site[data-theme="safar_make_v3"][data-safar-app-experience="1"]{
  --safar-depth-0:0 0 0 rgba(0,0,0,0);
  --safar-depth-1:0 8px 22px rgba(0,0,0,.16),0 1px 0 rgba(255,255,255,.025) inset;
  --safar-depth-2:0 18px 48px rgba(0,0,0,.24),0 1px 0 rgba(255,255,255,.04) inset;
  --safar-depth-3:0 28px 80px rgba(0,0,0,.34),0 0 0 1px rgba(212,168,67,.08);
  --safar-depth-float:0 34px 90px rgba(0,0,0,.42),0 10px 36px rgba(10,92,62,.18);
  --safar-spring:cubic-bezier(.2,.9,.25,1.18);
  --safar-app-nav-h:0px;
  --safar-booking-bar-h:0px;
  --safar-existing-mobile-bar-h:0px;
}

/* 1. Depth token system */
.public-site[data-theme="safar_make_v3"].safar-fx-depth_tokens .safar-app-card{
  box-shadow:var(--safar-depth-1)!important;transform-style:preserve-3d;backface-visibility:hidden;
}
.public-site[data-theme="safar_make_v3"].safar-fx-depth_tokens .safar-app-card:hover{box-shadow:var(--safar-depth-3)!important}

/* 2 + 18. Pointer tilt and light reflection. Uses individual rotate so React inline transform remains intact. */
.public-site[data-theme="safar_make_v3"].safar-fx-package_tilt .safar-app-card{
  rotate:var(--safar-axis-x,0) var(--safar-axis-y,0) 0 var(--safar-tilt,0deg);
  transition:rotate .22s ease,box-shadow .32s ease,border-color .3s ease;
}
.public-site[data-theme="safar_make_v3"].safar-fx-package_tilt .safar-app-card-parent{perspective:1100px}
.public-site[data-theme="safar_make_v3"].safar-fx-pointer_lighting .safar-app-card{position:relative;isolation:isolate}
.public-site[data-theme="safar_make_v3"].safar-fx-pointer_lighting .safar-app-card:after{
  content:"";position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;opacity:var(--safar-light-opacity,0);
  background:radial-gradient(260px circle at var(--safar-light-x,50%) var(--safar-light-y,50%),rgba(255,255,255,.14),rgba(212,168,67,.055) 35%,transparent 70%);
  transition:opacity .25s ease;mix-blend-mode:screen;
}

/* 3. Layered hero depth */
.public-site[data-theme="safar_make_v3"].safar-fx-hero_parallax .safar-v3-hero{position:relative;isolation:isolate}
.public-site[data-theme="safar_make_v3"].safar-fx-hero_parallax .safar-v3-hero>.safar-app-hero-depth{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.public-site[data-theme="safar_make_v3"].safar-fx-hero_parallax .safar-app-hero-orb{position:absolute;border-radius:999px;filter:blur(6px);opacity:.48;will-change:transform}
.public-site[data-theme="safar_make_v3"].safar-fx-hero_parallax .safar-app-hero-orb.a{width:34vw;height:34vw;min-width:260px;min-height:260px;left:-8vw;top:15%;background:radial-gradient(circle,rgba(15,122,82,.32),transparent 68%);transform:translate3d(0,var(--safar-parallax-a,0px),0)}
.public-site[data-theme="safar_make_v3"].safar-fx-hero_parallax .safar-app-hero-orb.b{width:28vw;height:28vw;min-width:220px;min-height:220px;right:-5vw;bottom:-10%;background:radial-gradient(circle,rgba(212,168,67,.18),transparent 70%);transform:translate3d(0,var(--safar-parallax-b,0px),0)}
.public-site[data-theme="safar_make_v3"].safar-fx-hero_parallax .safar-v3-hero-shell{position:relative;z-index:1}

/* 4. Layered destination cards */
.public-site[data-theme="safar_make_v3"].safar-fx-destination_depth .safar-app-destination{box-shadow:var(--safar-depth-2);transform-style:preserve-3d}
.public-site[data-theme="safar_make_v3"].safar-fx-destination_depth .safar-app-destination img{scale:1.015;transition:scale .65s var(--safar-spring),filter .4s ease}
.public-site[data-theme="safar_make_v3"].safar-fx-destination_depth .safar-app-destination:hover img{scale:1.09;filter:saturate(1.06) contrast(1.03)}
.public-site[data-theme="safar_make_v3"].safar-fx-destination_depth .safar-app-destination>div:last-of-type{translate:0 0 14px}

/* 5. Capsule depth changes */
.public-site[data-theme="safar_make_v3"].safar-fx-capsule_depth>header.site-header-capsule{box-shadow:0 18px 56px rgba(0,0,0,.34),0 0 0 1px rgba(212,168,67,.09)!important}
.public-site[data-theme="safar_make_v3"].safar-fx-capsule_depth[data-safar-scroll-deep="1"]>header.site-header-capsule{box-shadow:0 28px 78px rgba(0,0,0,.42),0 8px 32px rgba(15,122,82,.16),0 0 0 1px rgba(212,168,67,.14)!important}

/* 6. App-style mobile bottom navigation */
.safar-app-bottom-nav{display:none}
@media(max-width:767px){
 .public-site[data-theme="safar_make_v3"].safar-fx-mobile_bottom_nav{--safar-app-nav-h:74px;padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
 .public-site[data-theme="safar_make_v3"] .safar-app-bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px) + var(--safar-existing-mobile-bar-h));z-index:9990;min-height:62px;padding:7px 5px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:rgba(5,13,26,.92);box-shadow:var(--safar-depth-float);backdrop-filter:blur(20px) saturate(135%);-webkit-backdrop-filter:blur(20px) saturate(135%)}
 .public-site[data-theme="safar_make_v3"] .safar-app-bottom-nav a,.public-site[data-theme="safar_make_v3"] .safar-app-bottom-nav button{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 2px;border:0;background:transparent;color:#8396aa;font:700 9px/1.1 'Plus Jakarta Sans',sans-serif;letter-spacing:.01em}
 .public-site[data-theme="safar_make_v3"] .safar-app-bottom-nav .safar-app-nav-icon{font-size:19px;line-height:1;color:#b7c5d3;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
 .public-site[data-theme="safar_make_v3"] .safar-app-bottom-nav .is-current{color:#f0c866}.public-site[data-theme="safar_make_v3"] .safar-app-bottom-nav .is-current .safar-app-nav-icon{color:#f0c866}
}

/* 7. Floating contextual action dock */
.public-site[data-theme="safar_make_v3"] .safar-app-action-dock{position:fixed;right:18px;top:50%;z-index:9970;display:flex;flex-direction:column;gap:8px;translate:0 -50%}
.public-site[data-theme="safar_make_v3"] .safar-app-action-dock a,.public-site[data-theme="safar_make_v3"] .safar-app-action-dock button{position:relative;width:48px;height:48px;display:grid;place-items:center;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(7,26,46,.9);color:#f0c866;box-shadow:var(--safar-depth-2);backdrop-filter:blur(14px);font-size:19px;transition:translate .24s var(--safar-spring),box-shadow .24s ease,border-color .24s ease}
.public-site[data-theme="safar_make_v3"] .safar-app-action-dock a:hover,.public-site[data-theme="safar_make_v3"] .safar-app-action-dock button:hover{translate:-4px 0;border-color:rgba(212,168,67,.4);box-shadow:var(--safar-depth-3)}
.public-site[data-theme="safar_make_v3"] .safar-app-action-dock :is(a,button)::before{content:attr(data-action-label);position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);max-width:min(200px,calc(100vw - 100px));padding:7px 10px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(7,26,46,.94);color:#EDE8DC;font:700 11px/1.35 'Plus Jakarta Sans',system-ui,sans-serif;white-space:nowrap;box-shadow:var(--safar-depth-2)}
.public-site[data-theme="safar_make_v3"] .safar-app-action-dock[data-labels="0"] :is(a,button)::before{display:none}
@media(max-width:767px){.public-site[data-theme="safar_make_v3"] .safar-app-action-dock{display:none}}

/* 8. Native-style bottom sheets */
.safar-app-sheet-backdrop{position:fixed;inset:0;z-index:9996;background:rgba(0,0,0,.58);opacity:0;pointer-events:none;transition:opacity .24s ease}
.safar-app-sheet{position:fixed;left:0;right:0;bottom:0;z-index:9997;max-height:min(78vh,680px);overflow:auto;padding:12px 18px calc(22px + env(safe-area-inset-bottom,0px));border:1px solid rgba(255,255,255,.1);border-radius:28px 28px 0 0;background:#071a2e;color:#ede8dc;box-shadow:0 -24px 70px rgba(0,0,0,.45);transform:translateY(105%);transition:transform .34s var(--safar-spring)}
.safar-app-sheet.is-open{transform:translateY(0)}.safar-app-sheet-backdrop.is-open{opacity:1;pointer-events:auto}
.safar-app-sheet-handle{width:44px;height:5px;margin:2px auto 16px;border-radius:99px;background:rgba(255,255,255,.18)}
.safar-app-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.safar-app-sheet-head strong{font-size:18px}.safar-app-sheet-close{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#fff;font-size:18px}
.safar-app-sheet-links{display:grid;gap:8px}.safar-app-sheet-links a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:11px 14px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.035);color:#e8edf3;font-weight:700;font-size:13px}.safar-app-sheet-links a:after{content:'›';color:#d4a843;font-size:18px}

/* 9. Spring micro-interactions */
.public-site[data-theme="safar_make_v3"].safar-fx-spring_motion :is(.safar-app-card,a,button,.safar-v3-journey-icon){transition-timing-function:var(--safar-spring)}

/* 10. Press-depth buttons */
.public-site[data-theme="safar_make_v3"].safar-fx-press_depth :is(button,a.safar-v3-book,a.safar-v3-button-gold,a.safar-v3-button-whatsapp,[data-brand-button]){transform-origin:center;transition:translate .16s ease,scale .16s ease,box-shadow .2s ease,filter .2s ease}
.public-site[data-theme="safar_make_v3"].safar-fx-press_depth :is(button,a.safar-v3-book,a.safar-v3-button-gold,a.safar-v3-button-whatsapp,[data-brand-button]):active{translate:0 2px;scale:.985;filter:brightness(.97)}

/* 11. Lightweight 3D icon treatment */
.public-site[data-theme="safar_make_v3"].safar-fx-icon_depth .safar-app-icon{transform-style:preserve-3d;text-shadow:0 8px 18px rgba(0,0,0,.34);filter:drop-shadow(0 8px 14px rgba(0,0,0,.22));transition:translate .28s var(--safar-spring),scale .28s var(--safar-spring),filter .28s ease}
.public-site[data-theme="safar_make_v3"].safar-fx-icon_depth .safar-app-card:hover .safar-app-icon,.public-site[data-theme="safar_make_v3"].safar-fx-icon_depth button:hover .safar-app-icon{translate:0 -3px 10px;scale:1.06}

/* 12 + 13. Mobile stacked/swipeable package rail */
@media(max-width:767px){
 .public-site[data-theme="safar_make_v3"]:is(.safar-fx-stacked_package_carousel,.safar-fx-package_swipe) [data-safar-package-rail="1"]{display:flex!important;grid-template-columns:none!important;gap:14px!important;overflow-x:auto!important;overflow-y:visible;padding:10px 13vw 22px 2px;scroll-snap-type:x mandatory;scroll-padding-left:2px;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
 .public-site[data-theme="safar_make_v3"]:is(.safar-fx-stacked_package_carousel,.safar-fx-package_swipe) [data-safar-package-rail="1"]::-webkit-scrollbar{display:none}
 .public-site[data-theme="safar_make_v3"]:is(.safar-fx-stacked_package_carousel,.safar-fx-package_swipe) [data-safar-package-rail="1"]>.safar-app-card{flex:0 0 min(82vw,348px);width:min(82vw,348px);scroll-snap-align:start;box-shadow:var(--safar-depth-2)!important}
 .public-site[data-theme="safar_make_v3"].safar-fx-stacked_package_carousel [data-safar-package-rail="1"]>.safar-app-card:nth-child(n+2){translate:-3px 6px 0}
}

/* 14. App-style segmented controls */
.public-site[data-theme="safar_make_v3"].safar-fx-segmented_controls .safar-app-segmented{display:flex!important;flex-wrap:wrap;gap:5px!important;width:max-content;max-width:100%;padding:5px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.public-site[data-theme="safar_make_v3"].safar-fx-segmented_controls .safar-app-segmented :is(a,button){border-radius:999px!important;min-height:38px!important}

/* 15 + 16. Itinerary depth and journey progress */
.public-site[data-theme="safar_make_v3"].safar-fx-itinerary_depth #journey .space-y-2>button{position:relative;box-shadow:0 8px 22px rgba(0,0,0,.12);transform-style:preserve-3d}
.public-site[data-theme="safar_make_v3"].safar-fx-itinerary_depth #journey .space-y-2>button:hover{translate:4px 0 8px;box-shadow:var(--safar-depth-2)}
.public-site[data-theme="safar_make_v3"] .safar-app-journey-progress{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:9px 12px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.035);color:#91a3b7;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.public-site[data-theme="safar_make_v3"] .safar-app-journey-progress-track{height:4px;flex:1;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.08)}
.public-site[data-theme="safar_make_v3"] .safar-app-journey-progress-fill{display:block;height:100%;width:var(--safar-journey-progress,0%);border-radius:inherit;background:linear-gradient(90deg,#0f7a52,#f0c866);transition:width .34s var(--safar-spring)}

/* 17. Viewport image reveal */
.public-site[data-theme="safar_make_v3"].safar-fx-image_reveal img.safar-app-image-reveal{opacity:0;clip-path:inset(8% 8% 8% 8% round 20px);translate:0 14px;transition:opacity .65s ease,clip-path .72s var(--safar-spring),translate .8s var(--safar-spring)}
.public-site[data-theme="safar_make_v3"].safar-fx-image_reveal img.safar-app-image-reveal.is-visible{opacity:1;clip-path:inset(0 round 0);translate:0 0}

/* 19. Glass information chips */
.public-site[data-theme="safar_make_v3"].safar-fx-glass_chips .safar-app-glass-chip{background:rgba(7,26,46,.62)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 8px 24px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.05)!important;backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%)}

/* 20. Package-detail sticky booking bar */
.safar-app-booking-bar{display:none}
@media(max-width:1023px){
 .public-site[data-theme="safar_make_v3"].safar-fx-sticky_booking_bar:has(.safar-app-booking-bar){--safar-booking-bar-h:66px;padding-bottom:calc(var(--safar-app-nav-h) + 72px + env(safe-area-inset-bottom,0px))}
 .public-site[data-theme="safar_make_v3"] .safar-app-booking-bar{position:fixed;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;left:10px;right:10px;bottom:calc(var(--safar-app-nav-h) + var(--safar-existing-mobile-bar-h) + 10px + env(safe-area-inset-bottom,0px));z-index:9985;min-height:58px;padding:7px 8px 7px 14px;border:1px solid rgba(255,255,255,.11);border-radius:19px;background:rgba(5,13,26,.94);box-shadow:var(--safar-depth-float);backdrop-filter:blur(18px)}
 .public-site[data-theme="safar_make_v3"] .safar-app-booking-bar-copy{min-width:0}.public-site[data-theme="safar_make_v3"] .safar-app-booking-bar-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:12px}.public-site[data-theme="safar_make_v3"] .safar-app-booking-bar-copy span{display:block;margin-top:2px;color:#8294a8;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
 .public-site[data-theme="safar_make_v3"] .safar-app-booking-bar-actions{display:flex;gap:6px}.public-site[data-theme="safar_make_v3"] .safar-app-booking-bar-actions a{display:flex;align-items:center;justify-content:center;min-height:43px;padding:0 13px;border-radius:14px;border:1px solid rgba(255,255,255,.1);font-size:11px;font-weight:900}.public-site[data-theme="safar_make_v3"] .safar-app-book-now{background:linear-gradient(135deg,#f0c866,#d4a843);color:#050d1a!important;border-color:transparent!important}.public-site[data-theme="safar_make_v3"] .safar-app-whatsapp{color:#fff!important;background:rgba(15,122,82,.28)}
}

@media(prefers-reduced-motion:reduce){
 .public-site[data-theme="safar_make_v3"] .safar-app-card{rotate:none!important}.public-site[data-theme="safar_make_v3"] .safar-app-hero-orb{transform:none!important}.public-site[data-theme="safar_make_v3"] img.safar-app-image-reveal{opacity:1!important;clip-path:none!important;translate:0!important;transition:none!important}.safar-app-sheet{transition-duration:.01ms!important}
}
