/* =====================================================
   HERO BASE
===================================================== */
.hero-apple{
  position:relative;
  min-height:50vh;
  padding-top:110px;
  padding-bottom:60px;
  background:
    url("https://sastitaxi.com/public/IMG_20250922_102734_296.jpg")
    center / cover no-repeat;
}

.hero-light-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.82) 45%,
    rgba(255,255,255,.75) 100%
  );
}

.hero-content{
  position:relative;
  z-index:2;
}

/* =====================================================
   HERO INTRO
===================================================== */
.hero-intro{
  margin-bottom:36px;
  text-align:center;
}

.hero-intro h1{
  font-size:40px;
  font-weight:800;
  line-height:1.15;
  color:#0f172a;
  margin-bottom:12px;
}

.hero-intro h1 span{
  color:#30687c;
}

.hero-intro p{
  font-size:16px;
  color:#475569;
  margin-bottom:18px;
}

/* BADGES */
.hero-badges{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

.hero-badges span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  font-size:13px;
  font-weight:600;
  color:#0f172a;
}

.hero-badges i{
  color:#30687c;
}

/* =====================================================
   BOOKING GLASS CARD
===================================================== */
.booking-apple-glass{
  background:rgba(255,255,255,.65);
  backdrop-filter: blur(26px) saturate(140%);
  border-radius:26px;
  padding:30px;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:
    0 40px 90px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.5);
}

/* =====================================================
   GLASSY TABS (FINAL FIX)
===================================================== */
.apple-tabs{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-bottom:24px;
}

/* 🔥 BUTTON RESET + FIX */
.apple-tabs .nav-link{
  appearance:none;
  -webkit-appearance:none;
  border:none;
  outline:none;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  height:42px;
  min-height:42px;
  padding:0 22px;

  border-radius:9px;
  background:rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,.4);

  font-size:14px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;

  color:#0f172a;
  overflow:hidden;

  transition:all .25s ease;
}

/* ICON */
.apple-tabs .nav-link i{
  font-size:15px;
  line-height:1;
  flex-shrink:0;
}

/* TEXT */
.apple-tabs .nav-link span{
  line-height:1;
  display:flex;
  align-items:center;
}

/* ACTIVE */
.apple-tabs .nav-link.active{
  background:linear-gradient(135deg,#30687c ,#60a5fa);
  color:#fff;
  box-shadow:0 12px 30px rgba(37,99,235,.35);
}

.apple-tabs .nav-link.active i{
  color:#fff;
}

/* =====================================================
   MOBILE FIXES
===================================================== */
@media(max-width:768px){

  .hero-apple{
    padding-top:96px;
  }

  .hero-intro h1{
    font-size:30px;
  }

  .hero-intro p{
    font-size:14px;
  }

  .hero-badges{
    gap:10px;
  }

  .booking-apple-glass{
    padding:22px;
  }

  .apple-tabs{
    flex-wrap:wrap;
    gap:10px;
  }
}

@media(max-width:576px){

  .apple-tabs .nav-link{
    height:40px;
    min-height:40px;
    padding:0 18px;
    font-size:13px;
  }

}
@media(max-width:768px){

  .apple-tabs{
    justify-content:flex-start;     /* not center */
    flex-wrap:nowrap;               /* 🔥 key */
    overflow-x:auto;                /* 🔥 key */
    overflow-y:hidden;

    padding:4px 2px 10px;
    margin-bottom:20px;

    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;           /* Firefox */
  }

  .apple-tabs::-webkit-scrollbar{
    display:none;                   /* Chrome/Safari */
  }

  .apple-tabs .nav-item{
    flex:0 0 auto;                  /* 🔥 prevent shrink */
  }

  .apple-tabs .nav-link{
    height:40px;
    min-height:40px;
    padding:0 18px;
    font-size:13px;
  }
}

@media(max-width:420px){
  .apple-tabs{
    gap:8px;
  }
}
/* ================= TAB CONTENT ================= */
.tab-pane{
  display:none;
  animation:tabFade .35s ease;
}

.tab-pane.active{
  display:block;
}

@keyframes tabFade{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:none;
  }
}
/* ================= BOOKING FORM ================= */
.booking-form .form-label{
  font-size:13px;
  font-weight:600;
  color:#475569;
}

/* GLASS INPUT WRAPPER */
.input-glass{
  position:relative;
}

.input-glass i{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  color:#30687c;
  pointer-events:none;
}

/* INPUTS */
.input-glass .form-control,
.input-glass .form-select{
  padding:12px 14px 12px 42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  font-size:14px;
}

/* FOCUS */
.input-glass .form-control:focus,
.input-glass .form-select:focus{
  border-color:#30687c;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

/* CTA */
.btn-book-premium{
  background:linear-gradient(135deg,#30687c,#60a5fa);
  color:#fff;
  font-size:15px;
  font-weight:700;
  padding:14px;
  border-radius:18px;
  border:none;
  box-shadow:0 14px 32px rgba(37,99,235,.3);
}

.btn-book-premium:hover{
  opacity:.95;
  transform:translateY(-1px);
}

/* ================= PRICE TYPE ================= */
.price-type-glass{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.price-option{
  flex:1;
  position:relative;
}

.price-option input{
  display:none;
}

.price-option span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:14px;
  border-radius:16px;

  background:rgba(255,255,255,.7);
  backdrop-filter: blur(10px);

  font-size:14px;
  font-weight:600;
  color:#0f172a;

  border:1px solid rgba(255,255,255,.45);
  cursor:pointer;

  transition:.25s ease;
}

.price-option span i{
  color:#30687c;
  font-size:16px;
}

/* ACTIVE */
.price-option input:checked + span{
  background:linear-gradient(135deg,#30687c,#60a5fa);
  color:#fff;
  box-shadow:0 12px 30px rgba(37,99,235,.35);
}

.price-option input:checked + span i{
  color:#fff;
}

/* MOBILE */
@media(max-width:576px){
  .price-type-glass{
    flex-direction:column;
  }
}

.booking-form .form-label{
  font-size:13px;
  font-weight:600;
  color:#475569;
}

.input-glass{
  position:relative;
}

.input-glass i{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  color:#30687c;
  pointer-events:none;
}

.input-glass .form-control,
.input-glass .form-select{
  padding:12px 14px 12px 42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  font-size:14px;
}

.input-glass .form-control:focus,
.input-glass .form-select:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}


.input-glass input[list]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2330687c' d='M5.5 7l4.5 5 4.5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:14px;
}