/*
 ELASIMA MOBILE UIX V1
 IMPORTANT: Everything is scoped to <=767px. Desktop/tablet >=768px is untouched.
*/
@media (max-width:767px){
  :root{
    --m-navy:#0d2d43;--m-navy2:#071c2a;--m-gold:#b88b3e;
    --m-bg:#f4f6f7;--m-card:#fff;--m-line:#e1e7eb;--m-muted:#6e7c86;
    --m-radius:16px;--m-shadow:0 10px 28px rgba(11,42,61,.10);
  }
  html{overflow-x:hidden!important;scroll-behavior:smooth}
  body{overflow-x:hidden!important;-webkit-text-size-adjust:100%;background:var(--m-bg)}
  img,video,iframe,svg{max-width:100%;height:auto}
  input,select,textarea,button{font-size:16px!important}
  button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
  main,.container,.boxed,.site-box,.wrapper{max-width:100%!important}
  .container{padding-left:14px!important;padding-right:14px!important}

  /* Header / navigation: mobile only */
  header .container,.site-header .container,.main-header .container{padding-left:14px!important;padding-right:14px!important}
  .site-header,.main-header,header{max-width:100vw}
  .mobile-menu,.mobile-nav,.offcanvas-menu,.nav-drawer{
    border-radius:0 0 18px 18px!important;box-shadow:0 18px 38px rgba(7,28,42,.16)!important
  }
  .mobile-menu a,.mobile-nav a,.offcanvas-menu a,.nav-drawer a{
    min-height:46px;display:flex;align-items:center
  }

  /* Generic premium mobile cards */
  .card,.panel,.box,.tour-card,.destination-card{
    max-width:100%;border-radius:var(--m-radius)!important
  }
  .tour-card,.destination-card{box-shadow:var(--m-shadow)}
  h1{font-size:30px!important;line-height:1.08!important;letter-spacing:-.035em!important}
  h2{font-size:25px!important;line-height:1.12!important;letter-spacing:-.025em!important}
  h3{line-height:1.2!important}

  /* Tour listing */
  .tour-grid,.tours-grid,.destination-grid,.destinations-grid{
    grid-template-columns:1fr!important;gap:12px!important
  }
  .tour-card img,.destination-card img{object-fit:cover}

  /* Forms */
  form input,form select,form textarea{
    min-height:48px;border-radius:12px!important
  }
  form button,.btn,.button{
    min-height:46px;border-radius:11px
  }

  /* Reservation query modal */
  .booking-modal,.rez-modal,.reservation-modal,[class*="bookingModal"]{
    align-items:flex-end!important;padding:0!important
  }
  .booking-modal__dialog,.rez-modal__dialog,.reservation-modal__dialog,
  [class*="booking-modal"] [role="dialog"]{
    width:100%!important;max-width:100%!important;max-height:88dvh!important;
    margin:0!important;border-radius:22px 22px 0 0!important;
    overflow:auto!important;-webkit-overflow-scrolling:touch
  }

  /* Transfer page */
  .transferPage{padding:0 10px 42px!important}
  .trHero{
    min-height:330px!important;border-radius:18px!important;margin-top:10px!important;
    background:linear-gradient(145deg,var(--m-navy2),#173f58)!important
  }
  .trHero:after{display:none!important}
  .trHeroCopy{padding:34px 20px 112px!important;max-width:none!important}
  .trHero h1{font-size:32px!important;max-width:310px;margin-top:8px!important}
  .trHero p{font-size:13px!important;line-height:1.55!important;max-width:340px}
  .trTrust{gap:8px 12px!important;margin-top:18px!important}
  .trTrust span{font-size:10px!important}
  .trSearch{
    margin:-76px 8px 0!important;padding:13px!important;border-radius:17px!important;
    box-shadow:0 18px 38px rgba(10,38,56,.18)!important
  }
  .trTabs{margin-bottom:11px!important}
  .trTabs span{padding:8px 11px!important;font-size:10px!important}
  .trSearchGrid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .trSearchGrid .trField:nth-child(1),.trSearchGrid .trField:nth-child(2){grid-column:1/-1}
  .trSearchBtn{grid-column:1/-1;width:100%!important;height:48px!important}
  .trField label,.trBook label{font-size:9px!important}
  .trField input,.trField select,.trBook input,.trBook select{height:48px!important}

  .trSection{padding:42px 3px 0!important}
  .trSectionHead{display:block!important;margin-bottom:15px!important}
  .trSectionHead h2{font-size:25px!important;margin:5px 0 7px!important}
  .trSectionHead p{font-size:11px!important;line-height:1.55!important}

  /* Fleet becomes compact horizontal premium cards */
  .fleetGrid{grid-template-columns:1fr!important;gap:10px!important}
  .fleetCard{
    display:grid!important;grid-template-columns:132px minmax(0,1fr)!important;
    border-radius:15px!important;min-height:142px
  }
  .fleetImg{aspect-ratio:auto!important;min-height:100%;height:100%!important}
  .fleetImg img{height:100%!important;object-fit:cover!important}
  .fleetBody{padding:12px!important;min-width:0}
  .fleetBody h3{font-size:14px!important;white-space:normal}
  .fleetBody>p{font-size:9px!important;min-height:0!important;margin:4px 0 6px!important}
  .fleetMeta{font-size:8px!important;gap:7px!important;margin:6px 0!important}
  .fleetFeatures{display:none!important}
  .fleetAction{margin-top:8px!important}
  .fleetAction button{min-height:38px!important;padding:8px 9px!important}
  .fleetAction b{font-size:9px!important}

  .whyGrid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .whyCard{padding:14px!important;border-radius:14px!important}
  .whyIcon{width:34px!important;height:34px!important}
  .whyCard h3{font-size:12px!important}.whyCard p{font-size:9px!important}

  .steps{grid-template-columns:1fr 1fr!important;border-radius:14px!important}
  .step{padding:15px!important}.step h3{font-size:12px!important}.step p{font-size:9px!important}

  .routeGrid{grid-template-columns:1fr!important;gap:8px!important}
  .routeCard{min-height:62px;padding:12px 13px!important;text-align:left}

  .bookingShell{grid-template-columns:1fr!important;gap:12px!important}
  .trBook{padding:14px!important;border-radius:16px!important}
  .trBookGrid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .trBook .wide{grid-column:1/-1!important}
  .trBook .full{grid-column:1/-1!important}
  .trAside{position:static!important;border-radius:16px!important;padding:17px!important}
  .trBookSubmit{height:50px!important}

  /* Tour detail mobile */
  .tour-detail-grid,.tourDetailGrid,.tour-layout,.tour-detail-layout{
    grid-template-columns:1fr!important
  }
  .tour-sidebar,.booking-sidebar,.reservation-sidebar{position:static!important;width:100%!important}
  .tour-gallery,.gallery-grid{border-radius:16px!important;overflow:hidden}
  .tour-tabs,.detail-tabs{overflow-x:auto!important;white-space:nowrap!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tour-tabs::-webkit-scrollbar,.detail-tabs::-webkit-scrollbar{display:none}

  /* Footer */
  footer .container,.site-footer .container{padding-left:16px!important;padding-right:16px!important}
  .footer-grid,.footer-columns{grid-template-columns:1fr!important;gap:18px!important}

  /* Fixed mobile bar safety: reserve bottom space if one exists */
  body:has(.mobile-bottom-bar),body:has(.bottom-mobile-nav){padding-bottom:72px}
  .mobile-bottom-bar,.bottom-mobile-nav{
    padding-bottom:max(8px,env(safe-area-inset-bottom))!important;
    box-shadow:0 -8px 26px rgba(7,28,42,.12)!important
  }
}
@media (max-width:390px){
  .trHero h1{font-size:29px!important}
  .trBookGrid{grid-template-columns:1fr!important}
  .trBook .wide,.trBook .full{grid-column:auto!important}
  .whyGrid,.steps{grid-template-columns:1fr!important}
  .fleetCard{grid-template-columns:118px minmax(0,1fr)!important}
}


/* V1.1 — 2-column mobile discovery cards + compact action header */
@media (max-width:767px){
  /* Tours / Destinations / Activities: always two columns on mobile */
  .tour-grid,.tours-grid,.destination-grid,.destinations-grid,
  .activity-grid,.activities-grid,.activity-list,.activities-list{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;align-items:stretch!important
  }
  .tour-card,.destination-card,.activity-card{
    min-width:0!important;width:100%!important;margin:0!important;
    border-radius:14px!important;overflow:hidden!important
  }
  .tour-card img,.destination-card img,.activity-card img{
    width:100%!important;aspect-ratio:1.22/1!important;height:auto!important;
    object-fit:cover!important
  }
  .tour-card .card-body,.tour-card .tour-body,.destination-card .card-body,
  .destination-card .destination-body,.activity-card .card-body,.activity-card .activity-body{
    padding:10px!important
  }
  .tour-card h3,.tour-card h2,.destination-card h3,.destination-card h2,
  .activity-card h3,.activity-card h2{
    font-size:13px!important;line-height:1.22!important;margin:0 0 5px!important;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
  }
  .tour-card p,.destination-card p,.activity-card p{
    font-size:9px!important;line-height:1.4!important;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
  }
  .tour-card .btn,.destination-card .btn,.activity-card .btn{
    min-height:36px!important;padding:7px 8px!important;font-size:9px!important
  }

  /* Mobile header action cluster injected by JS */
  .elasima-mobile-actions{
    display:flex!important;align-items:center;gap:6px;margin-left:auto;flex:0 0 auto
  }
  .elasima-mobile-actions a,.elasima-mobile-actions button{
    width:38px;height:38px;min-height:38px!important;padding:0!important;
    border-radius:11px!important;display:grid!important;place-items:center!important;
    border:1px solid #dce5ea!important;background:#fff!important;color:#12364d!important;
    box-shadow:0 5px 15px rgba(8,35,52,.08)!important;text-decoration:none!important
  }
  .elasima-mobile-actions .mRez{width:auto!important;padding:0 10px!important;
    display:flex!important;gap:5px!important;font-size:10px!important;font-weight:900!important}
  .elasima-mobile-actions .mWa{background:#20b45a!important;border-color:#20b45a!important;color:#fff!important}
  .elasima-mobile-actions svg{width:17px;height:17px;display:block}
  .elasima-mobile-actions .mRez svg{width:15px;height:15px}
  /* Keep the site's existing hamburger visible, but make room for actions */
  .site-header .container,.main-header .container,header .container{gap:7px!important}
  .site-header .logo img,.main-header .logo img,header .logo img,
  .site-logo img,.brand img{max-width:126px!important;max-height:44px!important;object-fit:contain}
}
@media (max-width:380px){
  .elasima-mobile-actions{gap:4px}
  .elasima-mobile-actions a,.elasima-mobile-actions button{width:35px;height:35px;min-height:35px!important}
  .elasima-mobile-actions .mRez{padding:0 7px!important;font-size:9px!important}
  .site-header .logo img,.main-header .logo img,header .logo img,.site-logo img,.brand img{max-width:108px!important}
  .tour-grid,.tours-grid,.destination-grid,.destinations-grid,
  .activity-grid,.activities-grid,.activity-list,.activities-list{gap:7px!important}
}

/* V1.2 — screenshot-driven mobile header + compact home search */
@media (max-width:767px){
  /* Header: reclaim empty center space without touching desktop */
  .site-header .container,.main-header .container,header .container,
  .header-inner,.nav-wrap{
    min-height:72px!important;display:flex!important;align-items:center!important;
    flex-wrap:nowrap!important;padding:10px 12px!important
  }
  .site-logo,.logo,.brand{flex:0 1 auto!important;min-width:0!important;margin-right:auto!important}
  .site-logo img,.logo img,.brand img{width:auto!important;max-width:150px!important;max-height:45px!important}
  .elasima-mobile-actions{order:80!important;margin-left:6px!important}
  .menu-toggle,.mobile-menu-toggle,.hamburger,.nav-toggle{
    order:90!important;flex:0 0 40px!important;width:40px!important;height:40px!important;
    min-width:40px!important;min-height:40px!important;margin-left:0!important
  }
  .elasima-mobile-actions .mRez{width:40px!important;padding:0!important}
  .elasima-mobile-actions .mRez span{display:none!important}
  .elasima-mobile-actions a,.elasima-mobile-actions button{width:40px!important;height:40px!important}
  /* Hero/slider becomes less dominant on phones */
  .hero-slider,.home-slider,.slider,.main-slider{margin-top:10px!important}
  .hero-slider img,.home-slider img,.slider img,.main-slider img{
    max-height:390px!important;object-fit:cover!important
  }
  /* Home route finder/search card: tighter vertical rhythm */
  .route-search,.route-finder,.search-tour,.tour-search,.search-box,
  .home-search,.find-route,.find-tour{
    padding:18px 14px!important;border-radius:18px!important
  }
  .route-search input,.route-search select,.route-finder input,.route-finder select,
  .search-tour input,.search-tour select,.tour-search input,.tour-search select,
  .home-search input,.home-search select,.find-route input,.find-route select,
  .find-tour input,.find-tour select{
    min-height:50px!important;height:50px!important;padding-top:8px!important;padding-bottom:8px!important
  }
  .route-search label,.route-finder label,.search-tour label,.tour-search label,
  .home-search label,.find-route label,.find-tour label{margin-bottom:5px!important}
  .route-search .form-group,.route-finder .form-group,.search-tour .form-group,
  .tour-search .form-group,.home-search .form-group,.find-route .form-group,
  .find-tour .form-group{margin-bottom:11px!important}
}
@media (max-width:380px){
  .site-logo img,.logo img,.brand img{max-width:124px!important}
  .elasima-mobile-actions{gap:3px!important;margin-left:3px!important}
  .elasima-mobile-actions .mRez,.elasima-mobile-actions a,.elasima-mobile-actions button,
  .menu-toggle,.mobile-menu-toggle,.hamburger,.nav-toggle{
    width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important
  }
}

/* V1.3 — REAL HEADER DOM FIX. No JS injection. Mobile only. */
@media (max-width:767px){
  .elasima-mobile-actions{display:none!important}
  .siteHeader{
    display:flex!important;align-items:center!important;gap:7px!important;
    min-height:76px!important;padding:10px 12px!important
  }
  .siteHeader>.brand{
    flex:1 1 auto!important;min-width:0!important;margin:0!important;
    display:flex!important;align-items:center!important
  }
  .siteHeader>.brand .brandLogo{
    display:block!important;width:auto!important;height:auto!important;
    max-width:150px!important;max-height:46px!important;object-fit:contain!important
  }
  .siteHeader>.mobileHeaderActionsV13{
    display:flex!important;align-items:center!important;gap:6px!important;
    flex:0 0 auto!important;margin-left:auto!important
  }
  .siteHeader .mobileQuickBtn{
    box-sizing:border-box!important;width:40px!important;height:40px!important;
    min-width:40px!important;min-height:40px!important;padding:0!important;margin:0!important;
    display:grid!important;place-items:center!important;border-radius:11px!important;
    border:1px solid #dce5ea!important;background:#fff!important;color:#12364d!important;
    box-shadow:0 5px 14px rgba(8,35,52,.08)!important;text-decoration:none!important;
    line-height:1!important;overflow:hidden!important
  }
  .siteHeader .mobileQuickBtn svg{
    display:block!important;width:19px!important;height:19px!important;
    max-width:19px!important;max-height:19px!important;min-width:19px!important;
    fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;
    stroke-linecap:round!important;stroke-linejoin:round!important
  }
  .siteHeader .mobileWhatsAppBtn{
    background:#20b45a!important;border-color:#20b45a!important;color:#fff!important
  }
  .siteHeader>.menuToggle{
    position:static!important;inset:auto!important;transform:none!important;
    flex:0 0 40px!important;width:40px!important;height:40px!important;
    min-width:40px!important;min-height:40px!important;margin:0!important;
    border-radius:11px!important
  }
  .siteHeader>.menuToggle svg{width:21px!important;height:21px!important}
  /* Desktop-only action group remains hidden on mobile; modal itself is not affected. */
  .siteHeader>.headerActions{display:none!important}
}
@media (max-width:380px){
  .siteHeader{gap:5px!important;padding-left:10px!important;padding-right:10px!important}
  .siteHeader>.brand .brandLogo{max-width:126px!important;max-height:42px!important}
  .siteHeader>.mobileHeaderActionsV13{gap:4px!important}
  .siteHeader .mobileQuickBtn,.siteHeader>.menuToggle{
    width:37px!important;height:37px!important;min-width:37px!important;min-height:37px!important
  }
}

/* V1.4 — FULL MOBILE BOXED + HOME TOURS 2 COLUMNS. Desktop untouched. */
@media (max-width:767px){
  html{background:#eef2f4!important}
  body{
    width:100%!important;max-width:100%!important;margin:0!important;
    background:#eef2f4!important;padding-left:8px!important;padding-right:8px!important
  }

  /* One mobile boxed alignment language */
  body>header,body>.siteHeader,body>.topbar,
  main,.site-main,.page-content,body>footer,.site-footer{
    width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important
  }
  .siteHeader{
    background:#fff!important;border-radius:0 0 16px 16px!important;
    box-shadow:0 7px 22px rgba(8,35,52,.06)!important
  }
  main>section,.site-main>section,.page-content>section,
  .hero-slider,.home-slider,.main-slider,.slider,
  .route-search,.route-finder,.search-tour,.tour-search,.home-search,.find-route,.find-tour{
    max-width:100%!important;margin-left:auto!important;margin-right:auto!important
  }

  /* Section boxes, but do not double-box cards/grids */
  main>section:not(.hero):not(.hero-slider):not(.home-slider):not(.main-slider),
  .site-main>section:not(.hero):not(.hero-slider):not(.home-slider):not(.main-slider){
    border-radius:18px!important
  }

  /* Home tours: explicit two-column rule with broad selector coverage */
  #tours .tour-grid,#tours .tours-grid,#tours .row,
  #home-tours .tour-grid,#home-tours .tours-grid,#home-tours .row,
  .home-tours .tour-grid,.home-tours .tours-grid,.home-tours .row,
  .featured-tours .tour-grid,.featured-tours .tours-grid,.featured-tours .row,
  .popular-tours .tour-grid,.popular-tours .tours-grid,.popular-tours .row,
  section[class*="tour"] .tour-grid,section[class*="tour"] .tours-grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important
  }
  #tours .tour-card,#home-tours .tour-card,.home-tours .tour-card,
  .featured-tours .tour-card,.popular-tours .tour-card,
  section[class*="tour"] .tour-card{
    width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;
    border-radius:14px!important;overflow:hidden!important;background:#fff!important
  }

  /* Also keep destination/activity discovery in two columns */
  .destination-grid,.destinations-grid,.activity-grid,.activities-grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important
  }

  /* Boxed slider and finder share same edge */
  .hero-slider,.home-slider,.main-slider,.slider{
    border-radius:18px!important;overflow:hidden!important
  }
  .route-search,.route-finder,.search-tour,.tour-search,.home-search,.find-route,.find-tour{
    background:#fff!important;border-radius:18px!important;
    box-shadow:0 8px 24px rgba(8,35,52,.06)!important
  }

  /* Footer boxed and bottom-nav safe */
  .site-footer,footer{
    border-radius:18px 18px 0 0!important;overflow:hidden!important;margin-top:12px!important
  }
  .mobile-bottom-bar,.bottom-mobile-nav{
    left:8px!important;right:8px!important;width:auto!important;
    border-radius:16px 16px 0 0!important;overflow:hidden!important
  }
}
@media (max-width:380px){
  body{padding-left:6px!important;padding-right:6px!important}
  #tours .tour-grid,#tours .tours-grid,#tours .row,
  #home-tours .tour-grid,#home-tours .tours-grid,#home-tours .row,
  .home-tours .tour-grid,.home-tours .tours-grid,.home-tours .row,
  .featured-tours .tour-grid,.featured-tours .tours-grid,.featured-tours .row,
  .popular-tours .tour-grid,.popular-tours .tours-grid,.popular-tours .row,
  section[class*="tour"] .tour-grid,section[class*="tour"] .tours-grid,
  .destination-grid,.destinations-grid,.activity-grid,.activities-grid{gap:7px!important}
  .mobile-bottom-bar,.bottom-mobile-nav{left:6px!important;right:6px!important}
}