/* Small additions on top of the compiled Tailwind stylesheet */
html{scroll-behavior:smooth}
body.modal-open{overflow:hidden}
[data-act],[data-pick]{cursor:pointer}
@keyframes ov-in{from{opacity:0}to{opacity:1}}
@keyframes slide-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes slide-down{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

#chatbox>div:not(button){animation:slide-up .3s ease both}
header [data-mobile-menu]{animation:slide-down .2s ease both}
.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes pulse{50%{opacity:.5}}
.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}
.form-error{background:rgba(198,91,87,.15);border:1px solid #c65b57;color:#f0d3d1;border-radius:.5rem;padding:.6rem .9rem;font-size:.75rem}

/* Pages that used to be popups */
.page-wrap{padding:2.5rem 1rem 4rem}
.page-card{max-width:56rem;margin:0 auto}
.page-card>div{max-height:none!important}
.page-card .overflow-y-auto{overflow:visible!important}

/* Gallery */
.gal-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-bottom:2rem}
.gal-chip{background:#0A1A2A;border:1px solid rgba(100,116,139,.5);color:#cbd5e1;border-radius:999px;padding:.45rem 1.1rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:.2s}
.gal-chip:hover{border-color:#E5A83B;color:#fff}
.gal-chip.is-on{background:#E5A83B;border-color:#E5A83B;color:#07131F}
.gal-grid{column-count:3;column-gap:1rem}
.gal-item{margin:0 0 1rem;break-inside:avoid;border-radius:.9rem;overflow:hidden;border:1px solid rgba(30,41,59,.9);background:#0A1A2A}
.gal-item[hidden]{display:none}
.gal-img{width:100%;display:block;cursor:zoom-in;transition:transform .5s ease}
.gal-item:hover .gal-img{transform:scale(1.04)}
@media(max-width:900px){.gal-grid{column-count:2}}
@media(max-width:520px){.gal-grid{column-count:1}}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(3,10,17,.94);display:flex;align-items:center;justify-content:center;padding:1.5rem}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:.6rem;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.lightbox button{position:absolute;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:1.4rem;cursor:pointer}
.lightbox button:hover{background:rgba(229,168,59,.9);color:#07131F}
.lightbox .lb-x{top:1rem;right:1rem}.lightbox .lb-p{left:1rem;top:50%;transform:translateY(-50%)}.lightbox .lb-n{right:1rem;top:50%;transform:translateY(-50%)}

/* Tablet fix: footer social buttons wrapped past the screen edge at ~768px */
footer .pt-3.flex{flex-wrap:wrap}
footer{overflow-x:clip}

/* Bigger tap targets for footer text links on phones */
@media (max-width:640px){
  footer button,footer a:not([class*="rounded"]){padding-top:.45rem;padding-bottom:.45rem}
}

/* =====================  Mobile-first improvements  ===================== */

/* 1. Sticky quick-action bar (phones only): WhatsApp / Call / Plan trip */
.mbar{display:none}
@media (max-width:767px){
  .mbar{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:45;
    padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));background:rgba(7,19,31,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(100,116,139,.35);box-shadow:0 -10px 30px rgba(0,0,0,.35)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:48px;border-radius:14px;font-size:.78rem;font-weight:700;letter-spacing:.04em;
    text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.14);background:#0E283E;-webkit-tap-highlight-color:transparent}
  .mbar a:active{transform:scale(.97)}
  .mbar .mbar-wa{background:#25D366;border-color:#25D366;color:#06210f}
  .mbar .mbar-plan{background:#E5A83B;border-color:#E5A83B;color:#07131F}
  body.has-mbar{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  /* the bar already has WhatsApp, so hide the floating chat button on pages that show the bar */
  body.has-mbar #chatbox{display:none}
}

/* 2. Form fields: 16px text (stops iPhone zooming in), comfortable tap size */
@media (max-width:768px){
  input,select,textarea{font-size:16px!important}
  .page-card input:not([type=checkbox]):not([type=radio]),.page-card select{min-height:48px}
  .page-card textarea{min-height:120px}
  .page-card button,.page-card a[class*="rounded-full"],.page-card a[class*="rounded-xl"]{min-height:44px}
  [data-mobile-menu] a{padding-top:.8rem!important;padding-bottom:.8rem!important}
  .gal-chip{min-height:44px;display:inline-flex;align-items:center}
}
.page-card input:focus,.page-card textarea:focus,.page-card select:focus{scroll-margin-block:90px}

/* 3. Tour tabs become a swipeable row on phones instead of a tall stack */
@media (max-width:639px){
  .tabs-scroll{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:.6rem;padding-bottom:.4rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .tabs-scroll::-webkit-scrollbar{display:none}
  .tabs-scroll>*{flex:0 0 76%;scroll-snap-align:center}
  .tabs-hint{display:block!important}
}
.tabs-hint{display:none;text-align:center;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#94a3b8;margin-top:.4rem}

/* 4. Trip planner on phones: tighter card, Back/Next always reachable at the bottom of the screen */
@media (max-width:640px){
  #planner-root,#planner-root>div{overflow:visible}
  #planner-root .overflow-hidden{overflow:clip!important}
  #planner-root .p-6,#planner-root .sm-p-8{padding:1rem!important}
  #planner-root .px-6{padding-left:1rem!important;padding-right:1rem!important}
  #planner-root .space-y-6>*+*{margin-top:1.1rem!important}
  #planner-root [data-act="pstep"]{min-height:48px}
  #planner-root .pt-4.flex{position:sticky;bottom:0;z-index:20;margin:0 -1rem -1rem;padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
    background:rgba(8,24,39,.97);border-top:1px solid rgba(51,65,85,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
}

/* 5. Share button (added by JS on tour + destination pages) */
.share-btn{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.4rem .9rem;border-radius:999px;border:1px solid rgba(148,163,184,.4);
  background:rgba(15,23,42,.6);color:#e2e8f0;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;flex-shrink:0}
.share-btn:hover{border-color:#E5A83B;color:#fff}
.share-toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;background:#0E283E;color:#fff;border:1px solid #E5A83B;
  padding:.6rem 1rem;border-radius:999px;font-size:.8rem;box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* 6. Gallery lightbox: swipe + pinch friendly */
.lightbox img{touch-action:pinch-zoom;-webkit-user-drag:none;user-select:none}
.lightbox .lb-count{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);color:#cbd5e1;font-size:.8rem;letter-spacing:.1em}
.lightbox .lb-share{top:1rem;right:4.2rem;width:auto;padding:0 1rem;border-radius:999px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:640px){.lightbox .lb-p,.lightbox .lb-n{display:none}}

/* 7. Install-to-home-screen pill */
.install-pill{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:46px;margin-top:.4rem;border-radius:999px;border:1px dashed #C08A3E;background:rgba(192,138,62,.08);color:#7a5520;font-weight:600;font-size:.8rem}

/* 8. Respect the notch / rounded corners on phones */
@supports (padding: env(safe-area-inset-left)){
  header .max-w-7xl{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}
}

/* Form pages on phones: the floating chat button would sit on top of the sticky Back/Next buttons */
@media (max-width:767px){ body:not(.has-mbar) #chatbox{display:none} }

/* Hero background video (sits above the photo, below the colour wash/text) */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;pointer-events:none;z-index:0}
.hero-video.is-on{opacity:1}
.hero-video-toggle{position:absolute;right:.9rem;top:.9rem;z-index:20;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.55);background:rgba(7,19,31,.55);color:#fff;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero-video-toggle:hover{background:rgba(7,19,31,.8)}
@media (prefers-reduced-motion:reduce){.hero-video,.hero-video-toggle{display:none}}

/* Hero text stays readable when the video behind it is busy (rocks / foam) */
section[class*="min-h-[620px]"] h1,
section[class*="min-h-[620px]"] p{text-shadow:0 0 16px rgba(250,247,242,.95),0 0 3px rgba(250,247,242,.9),0 0 28px rgba(250,247,242,.7)}

/* ---- Video mode: show the footage at full clarity ---- */
/* desktop hero: replace the pale cream wash with a soft dark scrim on the left, headline in white */
section[class*="min-h-[620px]"].hero-video-on div[class*="from-[#FAF7F2]/95"]{
  background-image:linear-gradient(90deg,rgba(3,16,30,.50) 0%,rgba(3,16,30,.38) 36%,rgba(3,16,30,.12) 62%,rgba(3,16,30,0) 100%)!important;width:62%!important}
section[class*="min-h-[620px]"].hero-video-on h1,
section[class*="min-h-[620px]"].hero-video-on h1 span,
section[class*="min-h-[620px]"].hero-video-on p{color:#fff!important;text-shadow:0 2px 18px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.35)}
section[class*="min-h-[620px]"].hero-video-on p{color:rgba(255,255,255,.92)!important}
section[class*="min-h-[620px]"].hero-video-on p{text-shadow:0 0 14px rgba(0,0,0,.75),0 1px 4px rgba(0,0,0,.7),0 0 2px rgba(0,0,0,.6);font-weight:600}

/* QA: tap targets + tiny text on phones */
@media (max-width:767px){
  footer a[href^="https://wa.me"]{display:flex;align-items:center;min-height:44px}
  .tabs-scroll [class*="text-[9px]"]{font-size:10.5px}
  [class*="text-[9px]"]{font-size:10px}
}