/* =========================
   GLOBAL
========================= */

body{

  margin:0;

  font-family:Arial,sans-serif;

  background:
  radial-gradient(
    circle at top,
    #071120,
    #020817
  );

  min-height:100vh;

  color:white;

  overflow-x:hidden;

}

.container{

  width:100%;

  max-width:430px;

  margin:auto;

  padding:2px 8px 8px 8px;

  box-sizing:border-box;

}

/* =========================
   HEADER
========================= */

.header{

  text-align:center;

  margin-bottom:0;

}
.header h1{

  margin:0;

  font-size:32px;

  font-weight:700;

  color:white;

  letter-spacing:.3px;

}

.header p{

  margin-top:1px;

  color:#94a3b8;

  font-size:10px;

  letter-spacing:2px;

}

/* =========================
   GLASS CARD
========================= */

.glass-card{

  background:
  rgba(255,255,255,0.05);

  backdrop-filter:blur(16px);

  border:
  1px solid rgba(255,255,255,.08);

  border-radius:22px;

  padding:6px;

  margin-top:2px;

  box-shadow:
  0 0 24px rgba(0,0,0,.28);

}

/* =========================
   LABELS
========================= */

label{

  display:block;

  margin-top:2px;

  margin-bottom:0%;

  color:#cbd5e1;

  font-size:12px;

  font-weight:500;

}

/* =========================
   INPUTS
========================= */

select,
input{

  width:100%;

  padding:11px 12px;

  border-radius:16px;

  border:
  1px solid rgba(255,255,255,.06);

  background-color:#111827;

  color:#f8fafc;

  font-size:16px;

  outline:none;

  box-sizing:border-box;

}

/* =========================
   BUTTONS
========================= */
button{

  width:100%;

  margin-top:12px;

  padding:11px;

  border:none;

  border-radius:18px;

  background:
  linear-gradient(
    135deg,
    #8b6b2e,
    #c29b47
  );

  color:white;

  font-size:15px;

  font-weight:700;

  letter-spacing:.5px;

  cursor:pointer;

  border:
  1px solid rgba(255,255,255,.08);

  box-shadow:
  0 8px 20px rgba(194,155,71,.18);

}

button:active{

  transform:scale(.98);

  filter:brightness(.92);

}



/* =========================
   LAYOUT
========================= */

.row{

  display:flex;

  gap:8px;

}

.half{

  flex:1;

}

.top-space{

  margin-top:2px;

}
/* =========================
   CLEAN SEARCHABLE DROPDOWN
========================= */

.choices{

  width:100%;

  margin-bottom:0;

}

.choices__inner{

  background:#111827!important;

  border:
  1px solid rgba(255,255,255,.06)!important;

  border-radius:16px!important;

  min-height:32px;

  padding:2px 10px!important;

  display:flex;

  align-items:center;

  color:white!important;

  font-size:16px;

  box-shadow:none!important;

  width:100%!important;

  box-sizing:border-box!important;

}


.choices__list--single{

  display:flex!important;

  align-items:center!important;

  height:100%!important;

  padding:0 22px 0 2px!important;

}

.choices__list--single .choices__item{

  color:white!important;

  background:none!important;

  padding-left:8px!important;

   padding-top:10px!important;

}

.choices__placeholder{

  color:#94a3b8!important;

  opacity:1;

  background:none!important;

}

.choices__input{

  background:transparent!important;

  color:white!important;

}
.choices__list--dropdown{

  background:#111827!important;

  border-radius:16px;

  border:
  1px solid rgba(255,255,255,.12)!important;

  overflow:hidden!important;

  margin-top:4px;

  z-index:9999!important;

  opacity:1!important;

}

.choices__list--dropdown .choices__list{

  max-height:180px!important;

  overflow-y:auto!important;

  overflow-x:hidden!important;

}
.choices__item--choice{

  color:#ffffff!important;

  background:#111827!important;

  padding:12px!important;

  font-size:16px;

}
.choices__list{

  background:#111827!important;

}

.choices__item--selectable.is-highlighted{

  background:
  rgba(255,255,255,.06)!important;

}

.choices[data-type*=select-one]::after{

  border-color:#94a3b8 transparent transparent;

  top:18px;

  right:14px;

}
/* =========================
   RESULT CARD
========================= */

.result-glass{

  text-align:center;

  background:
  linear-gradient(
    to bottom right,
    rgba(255,255,255,.06),
    rgba(255,255,255,.03)
  );

  padding-top:0px;

  padding-bottom:0px;

  margin-top:2px;

}

#result{

  margin:0;

  font-size:42px;

  font-weight:700;

  color:#a3e635;

  text-align:center;

  line-height:1;

}

.fare-label{

  margin:0;

  color:#94a3b8;

  font-size:9px;

  letter-spacing:2px;

}

.cheapest-tag{

  margin-top:0;

  color:#22c55e;

  font-size:11px;

  font-weight:600;

}

.updated-date{

  margin-top:0;

  text-align:center;

  font-size:9px;

  color:#64748b;

  line-height:1;

}

/* =========================
   INSTALL BANNER
========================= */

.install-card{

  position:relative;

  padding:0;

  overflow:hidden;

  border-radius:22px;

  height:210px;

  margin-top:4px;

}

.install-banner{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

}


.footer-brand{

  margin-top:2px;

  text-align:center;

  font-size:8px;

  color:#94a3b8;

  line-height:1.15;

}

/* =========================
   SPLASH SCREEN
========================= */

#splash-screen{

  position:fixed;

  top:0;

  left:0;

  width:100%;

  height:100vh;

  background:#020817;

  display:flex;

  justify-content:center;

  align-items:center;

  z-index:99999;

  overflow:hidden;

  animation:splashFadeIn .8s ease;

}

.splash-image{

  width:100%;

  height:100vh;

  object-fit:cover;

  animation:logoPulse 2.5s ease-in-out infinite;

}

.travel-dot{

  position:absolute;

  bottom:15%;

  left:10%;

  width:18px;

  height:18px;

  border-radius:50%;

  background:white;

  box-shadow:
  0 0 10px white,
  0 0 20px white;

  animation:moveDot 2.4s linear infinite;

}

/* =========================
   ANIMATIONS
========================= */

.result-animate{

  animation:fareReveal .45s ease;

}

@keyframes fareReveal{

  0%{

    opacity:0;

    transform:
    translateY(12px)
    scale(.98);

  }

  100%{

    opacity:1;

    transform:
    translateY(0)
    scale(1);

  }

}

@keyframes splashFadeIn{

  from{

    opacity:0;

  }

  to{

    opacity:1;

  }

}

@keyframes logoPulse{

  0%{

    filter:brightness(1);

  }

  50%{

    filter:brightness(1.08);

  }

  100%{

    filter:brightness(1);

  }

}

@keyframes moveDot{

  0%{

    left:12%;

    bottom:15%;

    background:#ef4444;

    box-shadow:
    0 0 12px #ef4444,
    0 0 24px #ef4444;

  }

  40%{

    left:40%;

    bottom:18%;

    background:#facc15;

    box-shadow:
    0 0 12px #facc15,
    0 0 24px #facc15;

  }

  100%{

    left:78%;

    bottom:13%;

    background:#22c55e;

    box-shadow:
    0 0 12px #22c55e,
    0 0 24px #22c55e;

  }

}

.choices__input--cloned{

  font-size:16px!important;

  background:
  linear-gradient(
    135deg,
    rgba(250,204,21,.22),
    rgba(194,155,71,.18)
  )!important;

  border:
  1px solid rgba(250,204,21,.45)!important;

  border-radius:14px!important;

  padding:12px 14px!important;

  color:white!important;

  font-weight:600!important;

  box-shadow:
  0 0 18px rgba(250,204,21,.18);

}

.choices__input--cloned::placeholder{

  color:
  rgba(255,255,255,.88)!important;

  font-weight:
  600;

  letter-spacing:
  .3px;

}

/* =========================
   FOOTER
========================= */

.bottom-bar{

display:flex;

justify-content:center;

margin-top:2px;

margin-bottom:2px;

}

.mini-about{

display:inline-block;

padding:4px 10px;

border-radius:999px;

background:
rgba(255,255,255,.05);

border:
1px solid rgba(255,255,255,.08);

color:#c29b47;

font-size:9px;

font-weight:600;

text-decoration:none;

}

.footer-brand{

margin-top:0;

text-align:center;

font-size:7px;

line-height:1;

color:#94a3b8;

}

/* =========================
   LOCATION LABELS
========================= */


.pickup-label,
.destination-label{

  display:flex;

  align-items:center;

  gap:8px;

  font-size:12px;

  font-weight:600;

  margin-bottom:6px;

}

.pickup-label::before{

  content:"";

  width:10px;

  height:10px;

  border-radius:50%;

  background:#22c55e;

  box-shadow:
  0 0 10px rgba(34,197,94,.65);

  flex:none;

}

.destination-label::before{

  content:"";

  width:10px;

  height:10px;

  border-radius:50%;

  background:#ef4444;

  box-shadow:
  0 0 10px rgba(239,68,68,.65);

  flex:none;

}

.day-option::before{

  content:"☀️ ";

}

.night-option::before{

  content:"🌙 ";

}
/* =========================
   PROVIDER SECTION
========================= */

.provider-section{

  margin-top:-12px;

}

.provider-title{

  font-size:11px;

  color:#facc15;

  margin-bottom:8px;

  font-weight:600;

  letter-spacing:.5px;

}

.provider-list{

  display:flex;

  gap:8px;

  overflow-x:auto;

  scrollbar-width:none;

}

.provider-list::-webkit-scrollbar{

  display:none;

}

.provider-chip{

  min-width:max-content;

  padding:10px 14px;

  border-radius:14px;

  border:
  1px solid rgba(255,255,255,.08);

  background:
  rgba(255,255,255,.04);

  color:white;

  font-size:12px;

  font-weight:600;

  box-shadow:none;

  margin:0;

  top:0!important;

}

.active-provider{

  background:
  linear-gradient(
    135deg,
    #8b6b2e,
    #c29b47
  );

  color:white;

  box-shadow:
  0 4px 14px rgba(194,155,71,.18);

}


/* =========================
   SERVICE PROVIDER
========================= */

.service-provider-row{

  display:flex;

  gap:6px;

  overflow-x:auto;

  padding-bottom:4px;

  margin-top:4px;

  margin-bottom:18px;

  scrollbar-width:none;

}

.service-provider-row::-webkit-scrollbar{

  display:none;

}

.service-chip{

  flex:none;

  min-width:110px;

  height:34px;

  border:none;

  border-radius:12px;

  padding:0 12px;

  background:
  rgba(255,255,255,.05);

  border:
  1px solid rgba(255,255,255,.08);

  color:white;

  font-size:11px;

  font-weight:600;

  white-space:nowrap;

  top:0!important;

  margin:0!important;

  box-shadow:none!important;

}

.service-chip.active{

  background:
  linear-gradient(
    135deg,
    #8b6b2e,
    #c29b47
  );

}

/* =========================
   FIX OVERLAP
========================= */

.pickup-label{

  margin-top:0!important;

  display:block;

}

.destination-label{

  margin-top:-18px!important;

}

#from + .choices{

  top:0!important;

}

#to + .choices{

  top:0!important;

  margin-bottom:0!important;

}

.row.top-space{

  top:-8px!important;

  margin-bottom:-8px!important;

}

.swap-btn{

  top:0!important;

  margin-bottom:0!important;

}


.pickup-label::before{

  content:""!important;

  width:10px!important;

  height:10px!important;

  border-radius:50%!important;

  background:#22c55e!important;

  box-shadow:
  0 0 10px rgba(34,197,94,.65)!important;

  display:inline-block!important;

  flex:none!important;

}

.destination-label::before{

  content:""!important;

  width:10px!important;

  height:10px!important;

  border-radius:50%!important;

  background:#ef4444!important;

  box-shadow:
  0 0 10px rgba(239,68,68,.65)!important;

  display:inline-block!important;

  flex:none!important;

}
/* =========================
   VEHICLE CATEGORY BUTTONS
========================= */

.vehicle-category-row{

  display:flex;

  gap:10px;

  margin-top:0px;

  margin-bottom:2px;

}

.vehicle-category-btn{

  flex:1;

  height:52px;

  border:none;

  border-radius:20px;

  background:
  rgba(255,255,255,.04);

  border:
  1px solid rgba(255,255,255,.07);

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:3px;

  color:white;

  font-size:10px;

  font-weight:600;

  cursor:pointer;

  transition:.25s;

  padding:0;

}

.vehicle-category-btn.active{

  background:
  linear-gradient(
    135deg,
    rgba(194,155,71,.26),
    rgba(250,204,21,.18)
  );

  border:
  1px solid rgba(250,204,21,.35);

  box-shadow:
  0 10px 24px rgba(194,155,71,.16);

}

.vehicle-icon{

  width:28px;

  height:28px;

  object-fit:contain;

}
.vehicle-category-btn span{

  font-size:10px;

  margin-top:2px;

}
#sponsorCarousel{

  position:relative;

  width:100%;

  height:140px;

  overflow:hidden;

  border-radius:22px;

}

.sponsor-dot{

  box-shadow:
  0 0 8px rgba(255,255,255,.45);

}

.provider-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:0px;

}

.provider-call-btn{
text-decoration:none;
font-size:13px;
font-weight:600;
color:#c29b47;
}

.swap-wrapper{

display:flex;

justify-content:center;

align-items:center;

margin:-22px 0 -10px 0;

height:42px;

}

.swap-mini-btn{

width:42px!important;

height:42px!important;

min-width:42px!important;

padding:0!important;

margin:0!important;

display:flex!important;

justify-content:center!important;

align-items:center!important;

background:rgba(2,8,23,.35)!important;

border:none!important;

border-radius:50%!important;

color:#94a3b8!important;

font-size:20px!important;

box-shadow:none!important;

flex:none!important;

margin-top:0!important;

}
label.top-space{

margin-bottom:-6px!important;

}
#providerSection{

margin-top:-14px;

}

.browse-route-btn{

  padding:6px 12px!important;

  border-radius:16px!important;

  background:
  rgba(194,155,71,.08)!important;

  border:
  1px solid rgba(194,155,71,.18)!important;

  color:#d4b06a!important;

  box-shadow:none!important;

   margin-top:0px!important;

}

.route-card{

  padding:12px;

  margin-bottom:8px;

  border-radius:16px;

  background:
  rgba(255,255,255,.04);

  border:
  1px solid rgba(255,255,255,.06);

}
.route-provider{

  color:#c29b47;

  font-size:11px;

  font-weight:600;

}
.route-path{

  color:white;

  font-size:14px;

  font-weight:600;

}

.route-modal-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:12px;

}

.route-modal-title{

font-size:22px;

font-weight:700;

color:white;

}
.route-modal-close{

width:38px!important;

height:38px!important;

min-width:38px!important;

max-width:38px!important;

flex:none!important;

padding:0!important;

margin:0!important;

border:none!important;

border-radius:50%!important;

background:
rgba(255,255,255,.05)!important;

color:#94a3b8!important;

font-size:20px!important;

box-shadow:none!important;

display:flex!important;

justify-content:center!important;

align-items:center!important;

}

.route-modal-close:hover{

background:
rgba(255,255,255,.08)!important;

color:white!important;

}

.route-search{

width:100%;

margin-bottom:15px;

background:#111827;

border:
1px solid rgba(255,255,255,.08);

border-radius:16px;

color:white;

padding:12px;

box-sizing:border-box;

}