/* =========================
   RESET & ROOT
========================= */
* {
  -webkit-tap-highlight-color: transparent;
}

:root{
  --ring: 2px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);

  --brand:     #2563eb;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-50:  #eef2ff;

  --blue-from: #2563eb;
  --blue-via:  #3b82f6;
  --blue-to:   #38bdf8;
  --blue-ring: rgba(59,130,246,.45);

  --bnav-h: 64px;
}

html.is-loading,
html.is-loading body {
  overflow: hidden;
}

.safe-b {
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
}

/* Untuk mobile: background hitam di sekitar hero */
@media (max-width: 767px){
  html { background:#000; }
}

/* =========================
   HEADER SCRIM
========================= */
.header-scrim{
  position: relative;
}
@supports (padding: env(safe-area-inset-top)){
  .header-scrim::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height: calc(var(--sat) + 56px);
    background: linear-gradient(to bottom,
      rgba(0,0,0,.65),
      rgba(0,0,0,0));
    pointer-events:none;
    z-index:-1;
  }
}

/* =========================
   BUTTONS & INPUTS
========================= */
.btn-primary{
  --tw-shadow: 0 6px 20px -6px rgba(59,130,246,.35);
  background-image: linear-gradient(90deg,var(--blue-from),var(--blue-via),var(--blue-to));
  color:#fff;
  font-weight:600;
  border-radius:.75rem;
  transition: transform .12s ease, opacity .2s ease,
              box-shadow .2s ease, filter .2s ease;
  box-shadow: var(--tw-shadow);
  position:relative;
  z-index:1;
}
.btn-primary:hover{
  filter: saturate(1.06) brightness(1.02);
}
.btn-primary:active{
  transform: scale(.985);
}
.btn-primary:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.btn-primary:focus-visible{
  outline:none;
  box-shadow:0 0 0 var(--ring) var(--blue-ring), var(--tw-shadow);
}

/* Circle primary */
.btn-circle-primary{
  background-image: linear-gradient(90deg,var(--blue-from),var(--blue-via),var(--blue-to));
  color:#fff;
  border-radius:9999px;
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow:0 6px 20px -6px rgba(59,130,246,.35);
}
.btn-circle-primary:hover{ filter:saturate(1.06); }
.btn-circle-primary:active{ transform:scale(.96); }
.btn-circle-primary:focus-visible{
  outline:none;
  box-shadow:0 0 0 var(--ring) var(--blue-ring),
             0 6px 20px -6px rgba(59,130,246,.35);
}

/* Ghost biru (chip) */
.btn-ghost-blue{
  background:linear-gradient(0deg, rgba(59,130,246,.10), rgba(59,130,246,.10));
  color:#1d4ed8;
  border-radius:9999px;
  transition:background .15s ease, transform .12s ease, box-shadow .2s ease;
}
.btn-ghost-blue:hover{
  background:linear-gradient(0deg, rgba(59,130,246,.18), rgba(59,130,246,.18));
}
.btn-ghost-blue:active{ transform:scale(.97); }
.btn-ghost-blue:focus-visible{
  outline:none;
  box-shadow:0 0 0 var(--ring) var(--blue-ring);
}

/* Back ghost di hero */
.btn-ghost{
  background:rgba(255,255,255,.14);
  color:#fff;
  border-radius:9999px;
  transition:background .18s ease;
}
.btn-ghost:hover{
  background:rgba(255,255,255,.22);
}

/* Input ring biru */
.input-focus-blue:focus{
  outline:none;
}
.input-focus-blue:focus-visible,
.input-focus-blue:focus{
  box-shadow:0 0 0 var(--ring) var(--blue-ring);
}

/* Trip radio (Sekali jalan / Pulang-pergi) */
label > input[type="radio"].peer + span{
  background:rgb(243 244 246);
  color:rgb(75 85 99);
}
label > input[type="radio"].peer:checked + span{
  background-image: linear-gradient(90deg,var(--blue-from),var(--blue-via),var(--blue-to));
  color:#fff;
  box-shadow:0 4px 14px -6px rgba(59,130,246,.45);
}

/* =========================
   SKELETON / SHIMMER
========================= */
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.skeleton{
  position:relative;
  overflow:hidden;
  background:#e5e7eb;
}
.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%);
  background-size:200% 100%;
  animation:shimmer 1.1s infinite;
  opacity:.7;
}
.skel-rounded{ border-radius:.75rem; }
.skel-pill{ border-radius:9999px; }
@media (prefers-reduced-motion: reduce){
  .skeleton::after{ animation:none; }
}

/* Top progress bar */
@keyframes loading-bar{
  0%{ transform:translateX(-60%) }
  100%{ transform:translateX(120%) }
}
#plbar::before{
  content:"";
  position:absolute;
  left:0; top:0;
  height:3px; width:100%;
  background:linear-gradient(90deg,
    var(--blue-from) 0%,
    var(--blue-via) 40%,
    var(--blue-to) 70%,
    transparent 100%);
  transform:translateX(-60%);
  animation:loading-bar .9s ease-in-out infinite;
}

/* =========================
   SHEET / MODAL
========================= */
.sheet{
  transform:translateY(100%);
  transition:transform .3s ease;
  will-change:transform;
}
.sheet-open{
  transform:translateY(0);
}
@media (min-width:768px){
  .sheet,
  .sheet-open{
    transform:none !important;
  }
}

/* Grabber */
.sheet-grabber{
  width:40px;
  height:5px;
  border-radius:9999px;
  background:rgb(203 213 225);
  margin:.25rem auto 0;
}
@media (min-width:768px){
  .sheet-grabber{ display:none; }
}

/* Isi sheet scrollable */
[data-sheet-scroll]{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}

/* City panel max height desktop (defensif) */
@media (min-width:768px){
  #cityPanel{
    max-height:85vh;
  }
}

/* =========================
   MOBILE CALENDAR TWEAK
========================= */
@media (max-width:767.98px){
  :root{
    --day-size-mobile:2.25rem;
    --day-font-mobile:.9rem;
    --day-gap-mobile:.25rem;
  }

  #datePanel .monthbar-mobile{
    position:sticky;
    top:0;
    z-index:10;
    background:#fff;
    padding:.5rem .75rem;
    margin-bottom:.75rem;
    border-bottom:1px solid rgb(226 232 240);
  }
  #datePanel .monthbar-mobile .title{
    font-size:.95rem;
    font-weight:600;
  }

  #datePanel .dow-mobile{
    font-size:.68rem;
    letter-spacing:.02em;
  }
  #datePanel .days-mobile{
    gap:var(--day-gap-mobile);
  }

  #datePanel .day{
    height:var(--day-size-mobile);
    width:var(--day-size-mobile);
    border-radius:9999px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-inline:auto;
    font-size:var(--day-font-mobile);
    line-height:1;
  }

  #datePanel .day--disabled{
    color:rgb(203 213 225);
    cursor:not-allowed;
  }
  #datePanel .day--today{
    background:rgb(239 246 255);
    color:rgb(59 130 246);
    font-weight:600;
  }
  #datePanel .day--selected{
    background:rgb(59 130 246);
    color:#fff;
    font-weight:600;
  }
  #datePanel .day--range{
    background:rgba(59,130,246,.10);
    color:rgb(29 78 216);
  }

  #datePanel .navbtn{
    height:2.25rem;
    width:2.25rem;
    border-radius:9999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(59,130,246,.10);
  }
  #datePanel .navbtn:active{
    transform:scale(.97);
  }
}

/* layar sangat sempit */
@media (max-width:360px){
  :root{
    --day-size-mobile:2.1rem;
    --day-font-mobile:.85rem;
    --day-gap-mobile:.22rem;
  }
}

/* =========================
   BOTTOM NAV (jika digunakan)
========================= */
@media (max-width:767.98px){
  body.with-bnav{
    padding-bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));
  }
  .pb-bnav{
    padding-bottom:calc(12px + var(--bnav-h) + env(safe-area-inset-bottom,0px)) !important;
  }
  nav.bnav{
    height:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
}

.bnav{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  background:rgba(255,255,255,.95);
  border-top:none !important;
  box-shadow:0 -16px 40px -24px rgba(2,6,23,.25);
}
.bnav .material-symbols-rounded{
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;
  font-size:22px;
  transition:transform .12s ease,color .18s ease;
}
.bnav a .icon-box{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:30px;
  border-radius:9999px;
  background:transparent;
  transition:background .18s ease,transform .12s ease,color .18s ease;
}
.bnav a.active .icon-box{
  background:rgba(37,99,235,.15);
  color:rgb(37,99,235);
  animation:box-activate .28s ease;
}
@keyframes box-activate{
  0%{transform:scale(.85);opacity:0}
  60%{transform:scale(1.07);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.bnav a.active .material-symbols-rounded{
  font-variation-settings:"FILL" 1,"wght" 600,"GRAD" 0,"opsz" 24;
  color:rgb(37,99,235);
}
.bnav a.active .label{
  color:rgb(37,99,235);
}
.bnav a .label{
  margin-top:.25rem;
  margin-bottom:.35rem;
  font-size:11px;
  font-weight:500;
  line-height:1.2;
}
.bnav a:focus,
.bnav a:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}
.bnav a:focus-visible .icon-box{
  box-shadow:0 0 0 2px rgba(37,99,235,.28);
}
.bnav a:active .icon-box{
  transform:scale(.96);
}
.bnav.locked{
  pointer-events:none !important;
  opacity:.96;
}
@media (prefers-reduced-motion: reduce){
  .bnav a.active .icon-box{ animation:none; }
}

/* =========================
   IKLAN 728x90
========================= */
.adbar{
  width:100%;
  background:transparent;
}
.adbar-inner{
  max-width:1200px;
  margin:0 auto;
  padding:8px;
  text-align:center;
}
.ad-gutter{
  box-sizing:border-box;
  padding-left:max(12px, env(safe-area-inset-left));
  padding-right:max(12px, env(safe-area-inset-right));
}
@media (min-width:640px){
  .ad-gutter{
    padding-left:0;
    padding-right:0;
  }
}
.ad-ghost{
  width:min(728px,100%);
  max-width:100%;
  aspect-ratio:728/90;
  position:relative;
  margin:0 auto;
  line-height:0;
  overflow:visible;
}
.ad-fixed-wrap{
  position:absolute;
  top:0; left:0;
  width:728px;
  height:90px;
  transform-origin:top left;
  display:inline-block;
  visibility:hidden;
  will-change:transform;
}
.ad-fixed-size{
  display:inline-block;
  width:728px;
  height:90px;
}

/* print: sembunyikan iklan/nav */
@media print{
  .adbar,
  #bnv{
    display:none !important;
  }
}

/* Rapikan jarak iklan terakhir */
.adbar:last-of-type{
  margin-bottom:8px !important;
}