/* Bintang Lima Travel - Global Mobile App UI
   Loaded last on every visual page. Desktop remains unchanged. */
:root{
  --app-navy:#062b55;
  --app-navy-deep:#031d3b;
  --app-orange:#ff4b0b;
  --app-gold:#ffb400;
  --app-bg:#f3f6fa;
  --app-card:#fff;
  --app-text:#10233f;
  --app-muted:#6b7b91;
  --app-border:#e3e9f1;
  --app-radius:20px;
  --app-shadow:0 8px 24px rgba(6,43,85,.08);
  --app-header-height:64px;
}
html{scroll-behavior:smooth;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
button,a,input,select,textarea{touch-action:manipulation}
img{max-width:100%}
@media(max-width:767.98px){
  html,body{max-width:100%;overflow-x:hidden}
  body{background:var(--app-bg);overscroll-behavior-y:auto}
  .container,.container-fluid{--bs-gutter-x:1.5rem}
  .btn,.form-control,.form-select{font-size:16px}
  .btn{min-height:46px;border-radius:14px;font-weight:700}
  .form-control,.form-select{min-height:50px;border-radius:14px;border-color:#dce4ee;background:#fbfcfe}
  .form-control:focus,.form-select:focus{background:#fff;border-color:rgba(255,75,11,.5);box-shadow:0 0 0 .2rem rgba(255,75,11,.10)}
  textarea.form-control{min-height:116px}
  .card{border-radius:var(--app-radius);border:1px solid var(--app-border);box-shadow:0 5px 18px rgba(15,23,42,.045)}
  .alert{border-radius:15px;font-size:.78rem}
  .dropdown-menu{border:1px solid var(--app-border);border-radius:16px;box-shadow:0 16px 36px rgba(6,43,85,.14);padding:.5rem}
  .dropdown-item{border-radius:11px;padding:.7rem .8rem}
  .pagination{gap:5px}.page-link{border-radius:11px!important;min-width:40px;min-height:40px;display:grid;place-items:center}

  /* Current Android-like app bar. Works for public, admin and form pages. */
  .navbar.fixed-top,.admin-topbar,.app-mobile-header,.form-wrapper>.row>.col-lg-8>.d-flex.align-items-center{
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    transition:background .2s ease,box-shadow .2s ease,border-color .2s ease,transform .2s ease;
  }
  body.app-header-scrolled .navbar.fixed-top,
  body.app-header-scrolled .admin-topbar,
  body.app-header-scrolled .app-mobile-header,
  body.app-header-scrolled .form-wrapper>.row>.col-lg-8>.d-flex.align-items-center{
    background:rgba(255,255,255,.985)!important;
    box-shadow:0 8px 28px rgba(6,43,85,.11)!important;
    border-bottom-color:#e5ebf2!important;
  }

  /* Public landing page: mobile application shell */
  body:not(.admin-body):not(.auth-body) .topbar{display:none!important}
  body:not(.admin-body):not(.auth-body) .navbar.fixed-top{
    top:0!important;min-height:64px!important;padding:7px 0!important;background:rgba(255,255,255,.965)!important;
    border-bottom:1px solid rgba(230,236,243,.9);box-shadow:0 4px 18px rgba(6,43,85,.055)!important;
  }
  body:not(.admin-body):not(.auth-body) .navbar .container{padding-left:14px!important;padding-right:14px!important}
  body:not(.admin-body):not(.auth-body) .brand-logo{width:48px!important;height:42px!important}
  body:not(.admin-body):not(.auth-body) .brand-title{font-size:.82rem!important;line-height:1.06!important}
  body:not(.admin-body):not(.auth-body) .brand-title span{font-size:.65rem!important}
  body:not(.admin-body):not(.auth-body) .brand-subtitle{font-size:.5rem!important;line-height:1.25!important}
  body:not(.admin-body):not(.auth-body) .navbar-toggler{width:42px!important;height:42px!important;border:0!important;border-radius:14px!important;background:#f0f4f8!important;padding:.45rem!important;box-shadow:none!important}
  body:not(.admin-body):not(.auth-body) .navbar-collapse{
    position:absolute!important;left:10px!important;right:10px!important;top:62px!important;background:#fff!important;
    border:1px solid #e5ebf2!important;border-radius:20px!important;padding:10px 12px 14px!important;
    box-shadow:0 18px 45px rgba(6,43,85,.16)!important;max-height:72dvh!important;overflow:auto!important
  }
  body:not(.admin-body):not(.auth-body) .navbar-nav .nav-link{min-height:45px;display:flex;align-items:center;border-radius:12px;padding:.65rem .75rem!important;margin:1px 0!important;font-size:.82rem!important}
  body:not(.admin-body):not(.auth-body) .navbar-nav .nav-link:active{background:#f3f6f9}
  body:not(.admin-body):not(.auth-body) main,body:not(.admin-body):not(.auth-body) section{scroll-margin-top:76px}

  /* Public mobile dock, including standalone forms. */
  .mobile-public-dock,.mobile-form-dock{
    position:fixed;display:grid!important;grid-auto-flow:column;grid-auto-columns:1fr;left:8px;right:8px;
    bottom:calc(7px + env(safe-area-inset-bottom));height:68px;padding:6px;z-index:1050;
    background:rgba(255,255,255,.97);border:1px solid #dfe6ef;border-radius:23px;box-shadow:0 14px 42px rgba(6,43,85,.18);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)
  }
  .mobile-public-dock a,.mobile-form-dock a{
    min-width:0;border-radius:17px;color:#77869a;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;font-size:.56rem;font-weight:700;text-decoration:none
  }
  .mobile-public-dock a i,.mobile-form-dock a i{font-size:1.18rem;line-height:1}
  .mobile-public-dock a.primary,.mobile-form-dock a.primary{background:#fff0e9;color:var(--app-orange)}
  .mobile-public-dock a:active,.mobile-form-dock a:active{transform:scale(.95)}
  body:has(.mobile-public-dock),body:has(.mobile-form-dock){padding-bottom:calc(84px + env(safe-area-inset-bottom))}

  /* Standalone testimonial form as app page. */
  .form-wrapper{padding-top:0!important;padding-bottom:0!important}
  .form-wrapper>.row>.col-lg-8>.d-flex.align-items-center{
    margin:0!important;padding:calc(10px + env(safe-area-inset-top)) 14px 10px!important;
    min-height:64px;background:rgba(255,255,255,.97);position:sticky;top:0;z-index:1030;border-bottom:1px solid #edf1f5
  }
  .form-wrapper .form-card{border:0!important;box-shadow:none!important;background:#fff!important}
  .form-wrapper .form-header{padding:20px 17px 23px!important;border-radius:0 0 28px 28px!important}
  .form-wrapper .form-body{padding:18px 15px calc(96px + env(safe-area-inset-bottom))!important}

  /* Admin pages: keep newest app bar and navigation everywhere. */
  body.admin-body .admin-topbar{min-height:64px;height:64px!important;padding:0 12px!important;background:rgba(255,255,255,.97)!important}
  body.admin-body .admin-topbar-title strong{font-size:.92rem!important}
  body.admin-body .admin-topbar-title span{display:block!important;font-size:.58rem!important;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.admin-body .sidebar-toggle{width:42px;height:42px;border-radius:14px!important;background:#eef3f8!important}
  body.admin-body .admin-content{padding:11px 10px 10px!important}
  body.admin-body .admin-page-head{border-radius:21px!important;padding:17px 15px!important}
  body.admin-body .admin-page-head h1{font-size:1.12rem!important}
  body.admin-body .admin-page-head p{font-size:.68rem!important;line-height:1.5!important}
  body.admin-body .admin-card{border-radius:18px!important}
  body.admin-body .mobile-bottom-nav{z-index:1060!important}

  /* Tables on mobile become readable cards even on pages without admin-table. */
  body.admin-body .table-responsive{overflow:visible!important}
  body.admin-body table:not(.no-mobile-cards){min-width:0!important}
  body.admin-body table:not(.no-mobile-cards) thead{display:none}
  body.admin-body table:not(.no-mobile-cards),
  body.admin-body table:not(.no-mobile-cards) tbody,
  body.admin-body table:not(.no-mobile-cards) tr,
  body.admin-body table:not(.no-mobile-cards) td{display:block;width:100%}
  body.admin-body table:not(.no-mobile-cards) tbody{padding:6px}
  body.admin-body table:not(.no-mobile-cards) tbody tr{background:#fff;border:1px solid #e6ecf3;border-radius:17px;margin:0 0 8px;padding:10px 11px;box-shadow:0 3px 12px rgba(15,23,42,.035)}
  body.admin-body table:not(.no-mobile-cards) td{border:0!important;padding:4px 0!important;font-size:.72rem!important;white-space:normal!important;background:transparent!important}
  body.admin-body table:not(.no-mobile-cards) td[data-label]:before{content:attr(data-label);display:block;color:#8794a7;font-size:.57rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:1px}
  body.admin-body table:not(.no-mobile-cards) td.text-end{text-align:left!important;display:flex;gap:6px;flex-wrap:wrap;border-top:1px dashed #e4eaf1!important;padding-top:8px!important;margin-top:5px}

  /* Bottom sheet behavior for all Bootstrap modals. */
  .modal{padding:0!important}.modal-dialog{margin:0!important;min-height:100%!important;display:flex!important;align-items:flex-end!important}
  .modal-content{width:100%!important;border:0!important;border-radius:26px 26px 0 0!important;max-height:92dvh;overflow:hidden;box-shadow:0 -18px 55px rgba(15,23,42,.2)!important}
  .modal-content:before{content:'';width:44px;height:5px;border-radius:99px;background:#d4dce6;margin:9px auto 0;flex:0 0 auto}
  .modal-body{overflow:auto;-webkit-overflow-scrolling:touch}.modal-footer{padding-bottom:calc(14px + env(safe-area-inset-bottom))!important}

  /* Authentication flows look like native full-screen activities. */
  body.auth-body{background:#fff!important;padding:0!important;display:block!important}
  body.auth-body .auth-shell{min-height:100dvh!important;max-width:none!important}
  body.auth-body .auth-card{min-height:100dvh!important;border:0!important;border-radius:0!important;box-shadow:none!important}
  body.auth-body .auth-head{padding:calc(18px + env(safe-area-inset-top)) 17px 22px!important;border-radius:0 0 30px 30px!important}
  body.auth-body .auth-body-card{padding:20px 16px calc(24px + env(safe-area-inset-bottom))!important}
}
@media(max-width:390px){
  :root{--app-header-height:60px}
  body.admin-body .admin-content{padding-left:8px!important;padding-right:8px!important}
  .mobile-public-dock,.mobile-form-dock{left:6px;right:6px}
}
@media(min-width:768px){.mobile-form-dock{display:none!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* =========================================================
   Mobile scroll reliability fix - 2026-09-12
   Keep normal pages vertically scrollable. Bootstrap overlays
   may lock scrolling temporarily while they are actually open.
   ========================================================= */
@media(max-width:767.98px){
  html{
    height:auto!important;
    min-height:100%;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  body{
    height:auto!important;
    min-height:100dvh;
    overflow-x:hidden!important;
    overflow-y:auto;
    overscroll-behavior-y:auto!important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y pinch-zoom;
  }
  body.admin-body,
  body.auth-body,
  body:not(.admin-body):not(.auth-body){
    height:auto!important;
    max-height:none!important;
    overflow-y:auto;
  }
  .admin-layout,.admin-main,.admin-content,.auth-shell,.auth-card,.form-wrapper{
    height:auto!important;
    max-height:none;
  }
  /* Only an actually-open Bootstrap overlay is allowed to lock the page. */
  body.app-overlay-open{
    overflow:hidden!important;
    touch-action:none;
  }
  body.app-overlay-open .modal.show .modal-body,
  body.app-overlay-open .offcanvas.show{
    touch-action:pan-y;
  }
}

/* =========================================================
   Mobile compact controls + safe bottom clearance v3
   ========================================================= */
@media (max-width: 767.98px){
  :root{
    --app-mobile-nav-h:62px;
    --app-mobile-nav-gap:8px;
    --app-mobile-bottom-safe:calc(var(--app-mobile-nav-h) + 28px + env(safe-area-inset-bottom));
  }

  /* Keep controls visually compact while preserving useful touch targets. */
  .btn:not(.btn-lg),
  .admin-btn-primary,
  .admin-btn-soft{
    min-height:40px!important;
    padding:.48rem .72rem!important;
    border-radius:12px!important;
    font-size:.75rem!important;
    line-height:1.15!important;
  }
  .btn-sm,
  .admin-table .btn-sm{
    min-height:34px!important;
    min-width:34px!important;
    padding:.35rem .55rem!important;
    border-radius:10px!important;
    font-size:.68rem!important;
  }
  .btn-icon,
  .sidebar-toggle,
  .admin-topbar>.admin-btn-primary{
    min-width:40px!important;
    width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
  }

  /* Tabs / pills should feel like compact Android segmented controls. */
  .nav-tabs,
  .nav-pills,
  .booking-tabs,
  [role="tablist"]{
    gap:4px!important;
  }
  .nav-tabs .nav-link,
  .nav-pills .nav-link,
  [role="tablist"] [role="tab"],
  .booking-tab{
    min-height:36px!important;
    padding:.42rem .62rem!important;
    border-radius:10px!important;
    font-size:.68rem!important;
    line-height:1.15!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
  }
  .booking-tabs{
    padding:4px!important;
    overflow-x:auto!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .booking-tabs::-webkit-scrollbar{display:none}
  .booking-tab i,
  .nav-link i{font-size:.9em}

  /* Compact filter / toolbar buttons without making form fields tiny. */
  .admin-card .d-flex.gap-2>.btn,
  .admin-card .d-flex.gap-2>.admin-btn-primary,
  .admin-card .d-flex.gap-2>.admin-btn-soft,
  .admin-page-head .btn{
    min-height:38px!important;
    padding:.4rem .65rem!important;
  }

  /* Bottom navigation is slightly smaller and leaves more content room. */
  body.admin-body .mobile-bottom-nav,
  .mobile-public-dock,
  .mobile-form-dock{
    height:var(--app-mobile-nav-h)!important;
    bottom:calc(var(--app-mobile-nav-gap) + env(safe-area-inset-bottom))!important;
    padding:5px!important;
    border-radius:20px!important;
  }
  body.admin-body .mobile-bottom-link,
  .mobile-public-dock a,
  .mobile-form-dock a{
    border-radius:14px!important;
    font-size:.52rem!important;
    gap:2px!important;
  }
  body.admin-body .mobile-bottom-link i,
  .mobile-public-dock a i,
  .mobile-form-dock a i{
    font-size:1.05rem!important;
  }

  /* Every app page gets true clearance below the fixed nav. */
  body.admin-body{
    padding-bottom:var(--app-mobile-bottom-safe)!important;
  }
  body.admin-body .admin-main,
  body.admin-body .admin-content{
    padding-bottom:var(--app-mobile-bottom-safe)!important;
  }
  body:has(.mobile-public-dock),
  body:has(.mobile-form-dock){
    padding-bottom:var(--app-mobile-bottom-safe)!important;
  }
  body:has(.mobile-public-dock) main,
  body:has(.mobile-public-dock) footer,
  body:has(.mobile-form-dock) .form-body{
    padding-bottom:var(--app-mobile-bottom-safe)!important;
  }

  /* Last actionable blocks get extra breathing room above the dock. */
  body.admin-body .admin-content > :last-child,
  body.admin-body .admin-card:last-child,
  body.admin-body form:last-child,
  body:not(.admin-body) main > :last-child{
    margin-bottom:18px!important;
  }

  /* Bootstrap overlays must always sit above the app navigation. */
  .modal{z-index:1085!important}
  .modal-backdrop{z-index:1080!important}
  .offcanvas{z-index:1085!important}
  .offcanvas-backdrop{z-index:1080!important}

  /* Hide bottom nav while a modal/offcanvas is active. This avoids the
     fixed dock covering modal buttons/footer and gives a native-app feel. */
  body.app-overlay-open .mobile-bottom-nav,
  body.app-overlay-open .mobile-public-dock,
  body.app-overlay-open .mobile-form-dock,
  body.modal-open .mobile-bottom-nav,
  body.modal-open .mobile-public-dock,
  body.modal-open .mobile-form-dock{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(120%)!important;
  }
  .mobile-bottom-nav,
  .mobile-public-dock,
  .mobile-form-dock{
    transition:transform .2s ease,opacity .16s ease,visibility .16s ease!important;
  }

  /* Modal/bottom-sheet footer remains reachable above gesture area. */
  .modal-content{max-height:calc(100dvh - env(safe-area-inset-top) - 8px)!important}
  .modal-body{overscroll-behavior:contain!important}
  .modal-footer{
    position:sticky!important;
    bottom:0!important;
    z-index:2!important;
    padding:10px 14px calc(12px + env(safe-area-inset-bottom))!important;
  }
  .modal-footer .btn,
  .modal-footer .admin-btn-primary,
  .modal-footer .admin-btn-soft{
    min-height:42px!important;
    font-size:.74rem!important;
  }

  /* Long dropdowns/select menus must not disappear behind the dock. */
  .dropdown-menu{
    max-height:calc(100dvh - 130px)!important;
    overflow-y:auto!important;
  }
}

@media (max-width: 389.98px){
  :root{--app-mobile-nav-h:58px}
  .btn:not(.btn-lg),.admin-btn-primary,.admin-btn-soft{font-size:.71rem!important}
  .nav-tabs .nav-link,.nav-pills .nav-link,[role="tablist"] [role="tab"],.booking-tab{
    min-height:34px!important;padding:.38rem .55rem!important;font-size:.64rem!important
  }
}