/* ER-AY conversion & trust polish — 2026-09 */
.eray-trust-strip{position:relative;z-index:25;background:linear-gradient(180deg,rgba(11,11,13,.98),rgba(7,7,8,.98));border-top:1px solid rgba(215,176,106,.18);border-bottom:1px solid rgba(215,176,106,.18)}
.eray-trust-inner{width:min(1180px,calc(100% - 28px));margin:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:rgba(215,176,106,.13);border-left:1px solid rgba(215,176,106,.13);border-right:1px solid rgba(215,176,106,.13)}
.eray-trust-item{min-height:76px;padding:15px 14px;background:#09090b;display:flex;align-items:center;gap:11px;color:#eee}
.eray-trust-icon{width:32px;height:32px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;background:rgba(215,176,106,.11);border:1px solid rgba(215,176,106,.24);color:#f0c46b;font-size:16px;font-weight:900}
.eray-trust-item b{display:block;font-size:12px;line-height:1.25;color:#fff}
.eray-trust-item small{display:block;margin-top:4px;color:#9f9fa7;font-size:10.5px;line-height:1.35}
.eray-modal-trust{margin:-2px 0 18px;padding:12px 13px;border:1px solid rgba(215,176,106,.22);background:linear-gradient(135deg,rgba(215,176,106,.08),rgba(255,255,255,.025));border-radius:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.eray-modal-trust span{display:flex;align-items:center;gap:7px;color:#d9d9de;font-size:11px;font-weight:800;line-height:1.35}
.eray-modal-trust i{font-style:normal;color:#f0c46b}
.eray-privacy-link{margin-top:8px;font-size:11px;color:#9f9fa7}
.eray-privacy-link a{color:#f0c46b;text-decoration:underline;text-underline-offset:3px}
.eray-route-context{position:absolute;z-index:30;left:50%;top:calc(var(--header-height,80px) + 18px);transform:translateX(-50%);width:min(1180px,calc(100% - 28px));pointer-events:none}
.eray-route-context span{display:inline-flex;max-width:100%;padding:8px 12px;border-radius:999px;border:1px solid rgba(215,176,106,.32);background:rgba(5,5,5,.66);backdrop-filter:blur(10px);color:#f0c46b;font-size:11px;font-weight:900;letter-spacing:.05em;box-shadow:0 10px 30px rgba(0,0,0,.25)}
/* Stronger mobile dialog affordance, even if cached CSS loads before new bundle. */
@media(max-width:639px){
  [role="dialog"][aria-labelledby="booking-modal-title"]{scroll-margin-top:0!important;overscroll-behavior:contain;}
  .eray-modal-trust{grid-template-columns:1fr;gap:6px}
  .eray-trust-inner{grid-template-columns:1fr 1fr}
  .eray-trust-item{min-height:64px;padding:12px 11px}
  .eray-trust-item:last-child{grid-column:1/-1}
  .eray-route-context{top:calc(var(--header-height,72px) + 10px)}
}
@media(max-width:390px){.eray-trust-inner{grid-template-columns:1fr}.eray-trust-item:last-child{grid-column:auto}}

/* ER-AY final UX polish — CSS repair 2026-09-17 */
.eray-booking-guide{
  display:none;
  width:min(100%,64rem);
  margin:-22px auto 14px;
  padding:11px 13px;
  border:1px solid rgba(215,176,106,.24);
  border-radius:10px;
  background:linear-gradient(135deg,rgba(215,176,106,.10),rgba(255,255,255,.025));
  color:#f4f4f5;
}
.eray-booking-guide b{display:block;color:#f0c46b;font-size:12px;line-height:1.45}
.eray-booking-guide span{display:block;margin-top:4px;color:#b9b9c1;font-size:11px;line-height:1.45}
[role="dialog"][aria-labelledby="booking-modal-title"]{scroll-margin-block:12px;will-change:transform}

/* Desktop header: protect navigation from wrapping/colliding with controls. */
@media (min-width:1280px) and (max-width:1535px){
  header .container-shell{gap:.6rem!important;padding-left:1rem!important;padding-right:1rem!important}
  header nav{gap:.65rem!important;white-space:nowrap!important}
  header nav a{font-size:.73rem!important}
  header nav a:nth-child(5),
  header nav a:nth-child(6),
  header nav a:nth-child(7){display:none!important}
}
@media (min-width:1536px) and (max-width:1699px){
  header .container-shell{gap:.7rem!important;padding-left:1.1rem!important;padding-right:1.1rem!important}
  header nav{gap:.7rem!important;white-space:nowrap!important}
  header nav a{font-size:.76rem!important}
}

/* Mobile booking: clearer hierarchy, larger tap targets, less visual friction. */
@media (max-width:639px){
  #booking{scroll-margin-top:70px!important;padding-top:3.25rem!important;padding-bottom:7rem!important}
  #booking>.container-shell{width:calc(100% - 20px)!important}
  #booking .mx-auto.mb-12.max-w-3xl{margin-bottom:1.35rem!important}
  #booking .section-title{font-size:1.78rem!important;line-height:1.13!important}
  #booking .section-copy{margin-top:.75rem!important;font-size:.88rem!important;line-height:1.55!important}
  #booking .booking-form{padding:1rem!important;padding-bottom:5.5rem!important;border-radius:14px!important}
  #booking .field{min-height:54px!important;font-size:16px!important;border-radius:10px!important}
  #booking button.field{min-height:54px!important}
  #booking .grid.gap-5{gap:1rem!important}
  #booking button[type="submit"],#booking button[type="button"]{touch-action:manipulation}
  .eray-booking-guide{display:block;margin:0 auto 12px;padding:10px 11px}
  .eray-booking-guide b{font-size:11.5px}
  .eray-booking-guide span{font-size:10.5px}
  [role="dialog"][aria-labelledby="booking-modal-title"]{
    position:relative!important;
    scroll-margin:0!important;
    max-height:100svh!important;
    overscroll-behavior:contain;
  }
  [role="dialog"][aria-labelledby="booking-modal-title"] input,
  [role="dialog"][aria-labelledby="booking-modal-title"] select,
  [role="dialog"][aria-labelledby="booking-modal-title"] textarea{font-size:16px!important}
}


/* ER-AY route matrix + iPhone/mobile booking UX — 2026-09-20 */
#booking .field{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
#booking .grid>*{min-width:0}
#booking input[type="date"],#booking input[type="time"]{
  display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden;
}
#booking input[type="date"]::-webkit-date-and-time-value,
#booking input[type="time"]::-webkit-date-and-time-value{min-width:0;text-align:left}
#booking input[type="date"]::-webkit-calendar-picker-indicator,
#booking input[type="time"]::-webkit-calendar-picker-indicator{margin:0;padding:0;max-width:24px}
.custom-select{min-width:0}
.custom-select>.field{width:100%}
.custom-select [class*="max-h-64"]{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

@media(max-width:639px){
  /* backdrop-filter can make fixed descendants behave like they are fixed to the form in Safari. */
  #booking .booking-form{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;overflow:visible!important}
  #booking .grid{min-width:0}
  #booking input[type="date"],#booking input[type="time"]{font-size:16px!important;padding-left:.9rem!important;padding-right:.65rem!important}
  .eray-booking-overlay{
    position:fixed!important;left:0!important;right:0!important;bottom:auto!important;
    top:var(--eray-booking-vtop,0px)!important;height:var(--eray-booking-vh,100dvh)!important;
    min-height:0!important;max-height:none!important;align-items:flex-start!important;padding:0!important;
    overflow:hidden!important;overscroll-behavior:none!important;
  }
  [role="dialog"][aria-labelledby="booking-modal-title"]{
    position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;
    height:var(--eray-booking-vh,100dvh)!important;max-height:var(--eray-booking-vh,100dvh)!important;
    min-height:0!important;margin:0!important;border-radius:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;transform:none!important;
    padding-left:max(1rem,env(safe-area-inset-left))!important;
    padding-right:max(1rem,env(safe-area-inset-right))!important;
    padding-bottom:max(2rem,calc(1rem + env(safe-area-inset-bottom)))!important;
  }
  [role="dialog"][aria-labelledby="booking-modal-title"] .field{
    width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;font-size:16px!important;
  }
  [role="dialog"][aria-labelledby="booking-modal-title"] textarea{min-height:92px!important}
}


/* ER-AY final mobile cleanup — 2026-09-20 r2 */
#price-list{display:none!important}

@media(max-width:639px){
  html,body{max-width:100%;overflow-x:hidden}
  #booking .booking-form{overflow:visible!important}
  #booking .grid{min-width:0!important;max-width:100%!important}
  #booking .grid>*{min-width:0!important;max-width:100%!important}
  #booking input[type="date"],
  #booking input[type="time"]{
    display:block!important;
    width:100%!important;
    inline-size:100%!important;
    min-width:0!important;
    min-inline-size:0!important;
    max-width:100%!important;
    max-inline-size:100%!important;
    box-sizing:border-box!important;
    -webkit-appearance:none!important;
    appearance:none!important;
    overflow:hidden!important;
    font-size:16px!important;
    padding-left:.9rem!important;
    padding-right:.7rem!important;
  }
  #booking input[type="date"]::-webkit-date-and-time-value,
  #booking input[type="time"]::-webkit-date-and-time-value{
    width:100%!important;
    min-width:0!important;
    text-align:left!important;
  }
  .custom-select{position:relative!important;min-width:0!important;max-width:100%!important}
  .custom-select>.field{width:100%!important;min-width:0!important;max-width:100%!important}
  .custom-select>div{max-width:100%!important}
  .eray-booking-overlay{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:none!important;
    padding:0!important;
    overflow:hidden!important;
    align-items:flex-start!important;
    overscroll-behavior:none!important;
    touch-action:pan-y!important;
  }
  [role="dialog"][aria-labelledby="booking-modal-title"]{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    transform:none!important;
    scroll-behavior:auto!important;
    scroll-padding-top:84px!important;
    scroll-padding-bottom:42vh!important;
    padding-left:max(1rem,env(safe-area-inset-left))!important;
    padding-right:max(1rem,env(safe-area-inset-right))!important;
    padding-bottom:max(2.5rem,calc(1.25rem + env(safe-area-inset-bottom)))!important;
  }
  [role="dialog"][aria-labelledby="booking-modal-title"] input,
  [role="dialog"][aria-labelledby="booking-modal-title"] select,
  [role="dialog"][aria-labelledby="booking-modal-title"] textarea{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    font-size:16px!important;
    scroll-margin-top:92px!important;
    scroll-margin-bottom:38vh!important;
  }
  [role="dialog"][aria-labelledby="booking-modal-title"] textarea{resize:vertical!important}
}


/* ER-AY FINAL R3 — mobile booking + two vehicle cards + six popular routes */
/* Always reveal every one of the six popular route motion wrappers. */
#routes .container-shell > .grid > div{
  opacity:1!important;
  transform:none!important;
}

@media(max-width:639px){
  /* The booking section must NOT establish a transformed containing block.
     Otherwise Safari/Chrome can pin the fixed modal to the section instead of the viewport. */
  #booking.panel-section{
    animation:none!important;
    transform:none!important;
    will-change:auto!important;
    contain:none!important;
  }
  #booking .booking-form{
    transform:none!important;
    will-change:auto!important;
    contain:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  html.eray-modal-open,html.eray-modal-open body{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  .eray-booking-overlay{
    position:fixed!important;
    z-index:99999!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    transform:none!important;
    touch-action:pan-y!important;
  }
  [role="dialog"][aria-labelledby="booking-modal-title"]{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    flex:1 1 auto!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
    overflow-x:hidden!important;
    overflow-y:scroll!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y!important;
    transform:none!important;
    scroll-behavior:auto!important;
    scroll-padding-top:96px!important;
    scroll-padding-bottom:180px!important;
    padding-top:max(1rem,env(safe-area-inset-top))!important;
    padding-left:max(1rem,env(safe-area-inset-left))!important;
    padding-right:max(1rem,env(safe-area-inset-right))!important;
    padding-bottom:max(7rem,calc(5.5rem + env(safe-area-inset-bottom)))!important;
  }
  /* Keep title and close control reachable while the form scrolls. */
  [role="dialog"][aria-labelledby="booking-modal-title"] > .mb-5:first-child{
    position:sticky!important;
    top:0!important;
    z-index:30!important;
    margin-left:-1rem!important;
    margin-right:-1rem!important;
    padding:max(1rem,env(safe-area-inset-top)) 1rem .8rem!important;
    background:linear-gradient(180deg,#09090c 82%,rgba(9,9,12,.94) 100%)!important;
    border-bottom:1px solid rgba(215,176,106,.16)!important;
  }
  [role="dialog"][aria-labelledby="booking-modal-title"] input,
  [role="dialog"][aria-labelledby="booking-modal-title"] select,
  [role="dialog"][aria-labelledby="booking-modal-title"] textarea,
  [role="dialog"][aria-labelledby="booking-modal-title"] button{
    touch-action:manipulation;
  }

  /* iPhone/Android date-time controls: prevent native intrinsic width overflow. */
  #booking label{min-width:0!important;max-width:100%!important}
  #booking input[type="date"],#booking input[type="time"]{
    position:relative!important;
    display:block!important;
    width:100%!important;
    inline-size:100%!important;
    min-width:0!important;
    min-inline-size:0!important;
    max-width:100%!important;
    max-inline-size:100%!important;
    box-sizing:border-box!important;
    font-size:16px!important;
    padding:.85rem 2.6rem .85rem .9rem!important;
    overflow:hidden!important;
  }
  #booking input[type="date"]::-webkit-date-and-time-value,
  #booking input[type="time"]::-webkit-date-and-time-value{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    text-align:left!important;
  }
  #booking input[type="date"]::-webkit-calendar-picker-indicator,
  #booking input[type="time"]::-webkit-calendar-picker-indicator{
    position:absolute!important;
    right:.8rem!important;
    margin:0!important;
    padding:0!important;
  }

  /* Vehicle categories: ULTRAVIP left, VIP MINIBUS right. */
  #vehicles{padding-top:3.5rem!important;padding-bottom:4.5rem!important}
  #vehicles .container-shell{width:calc(100% - 20px)!important}
  #vehicles .container-shell > .grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.65rem!important;
  }
  #vehicles .container-shell > .grid > div{
    min-width:0!important;
    opacity:1!important;
    transform:none!important;
  }
  #vehicles article .aspect-\[1\.55\]{aspect-ratio:1.25!important}
  #vehicles article .p-6{padding:.8rem!important}
  #vehicles article h3{font-size:1.08rem!important;line-height:1.1!important}
  #vehicles article h3 + p{font-size:.61rem!important;line-height:1.25!important;letter-spacing:.09em!important}
  #vehicles article p{overflow-wrap:anywhere}
  #vehicles article .text-sm{font-size:.68rem!important;line-height:1.4!important}
  #vehicles article ul{gap:.35rem!important}
  #vehicles article ul li{font-size:.64rem!important;line-height:1.35!important;gap:.4rem!important}
  #vehicles article ul li:nth-child(n+5){display:none!important}
  #vehicles article .mt-auto{padding-top:.65rem!important}
  #vehicles article button{min-height:42px!important;padding:.55rem .5rem!important;font-size:.68rem!important}
  #vehicles article span.absolute.left-4.top-4{left:.55rem!important;top:.55rem!important;padding:.35rem .45rem!important;font-size:.55rem!important}

  /* Popular routes: 2 columns on phones so all 6 stay compact and obvious. */
  #routes{padding-top:3.5rem!important;padding-bottom:4.5rem!important}
  #routes .container-shell{width:calc(100% - 20px)!important}
  #routes .container-shell > .grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.65rem!important;
  }
  #routes article{min-height:220px!important}
  #routes article .p-6{padding:.75rem!important}
  #routes article h3{font-size:.86rem!important;line-height:1.28!important}
  #routes article p{font-size:.58rem!important;letter-spacing:.09em!important;margin-bottom:.45rem!important}
  #routes article button{min-height:40px!important;margin-top:.55rem!important;font-size:.68rem!important}
}

@media(max-width:370px){
  #vehicles .container-shell > .grid,#routes .container-shell > .grid{gap:.5rem!important}
  #vehicles article .text-sm{font-size:.62rem!important}
  #routes article{min-height:205px!important}
}
\n\n/* ER-AY FINAL R4 — deterministic vehicle/routes layout */\n#vehicles .container-shell > .grid{\n  display:grid!important;\n  grid-template-columns:repeat(2,minmax(0,1fr))!important;\n  gap:1.5rem!important;\n}\n#vehicles .container-shell > .grid > div{\n  min-width:0!important;\n  opacity:1!important;\n  transform:none!important;\n}\n#routes .container-shell > .grid > div{\n  display:block!important;\n  opacity:1!important;\n  visibility:visible!important;\n  transform:none!important;\n}\n@media(max-width:639px){\n  #vehicles .container-shell > .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.65rem!important}\n}\n

/* ER-AY FINAL R5: compact two-card vehicle layout */
#vehicles .container-shell > .grid.eray-two-vehicles,
#vehicles .container-shell > .grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:920px!important;margin-left:auto!important;margin-right:auto!important;gap:18px!important}
#vehicles .container-shell > .grid > * {min-width:0!important}
#vehicles article {min-height:0!important}
#vehicles article img {max-height:260px!important;object-fit:cover!important}
#vehicles article .p-6,#vehicles article [class*="p-6"]{padding:16px!important}
#vehicles article h3{font-size:clamp(20px,2vw,28px)!important}
#vehicles article p,#vehicles article li{line-height:1.45!important}
@media(max-width:760px){
 #vehicles{padding-top:54px!important;padding-bottom:54px!important}
 #vehicles .container-shell > .grid.eray-two-vehicles,#vehicles .container-shell > .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;max-width:none!important}
 #vehicles article img{max-height:180px!important}
 #vehicles article [class*="p-6"],#vehicles article [class*="p-5"],#vehicles article [class*="p-4"]{padding:10px!important}
 #vehicles article h3{font-size:18px!important}
 #vehicles article p,#vehicles article li,#vehicles article span{font-size:11px!important;line-height:1.35!important}
 #vehicles article button{min-height:42px!important;padding:8px!important;font-size:11px!important}
}