/* =========================================================
   HERO BOOKING THEME
   ========================================================= */

:root {
  /*
     Light theme:
     deliberately translucent so the hero image remains visible.
  */
  --hero-booking-bg: rgba(255, 255, 255, 0.68);
  --hero-booking-border: rgba(15, 23, 42, 0.14);
  --hero-booking-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);

  --hero-control-bg: rgba(255, 255, 255, 0.78);
  --hero-control-border: rgba(15, 23, 42, 0.12);
  --hero-control-text: #334155;
  --hero-control-placeholder: #64748b;

  --hero-soft-bg: rgba(15, 23, 42, 0.06);
  --hero-soft-border: rgba(15, 23, 42, 0.14);
  --hero-soft-text: #334155;
}

:root[data-theme="dark"] {
  /*
     Dark theme:
     same glass treatment, but dark translucent surface.
  */
  --hero-booking-bg: rgba(10, 17, 29, 0.68);
  --hero-booking-border: rgba(255, 255, 255, 0.16);
  --hero-booking-shadow: 0 20px 45px rgba(0, 0, 0, 0.34);

  --hero-control-bg: rgba(255, 255, 255, 0.08);
  --hero-control-border: rgba(255, 255, 255, 0.16);
  --hero-control-text: #ffffff;
  --hero-control-placeholder: #ffffff;

  --hero-soft-bg: rgba(255, 255, 255, 0.08);
  --hero-soft-border: rgba(255, 255, 255, 0.18);
  --hero-soft-text: #f4f6fb;
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;
  height: 780px;
  margin-top: calc(-1 * var(--nav-height));
  padding-top: var(--nav-height);
  display: block;
  overflow: hidden;
}

/* =========================================================
   HERO BACKGROUND
   ========================================================= */

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.hero-bg img,
.hero-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

/* DARK HERO OVERLAY */

.hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.38) 45%,
    rgba(0, 0, 0, 0.62) 100%
  );
}

/* =========================================================
   HERO INNER
   ========================================================= */

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;

  /* booking bar sits a little below the nav, not flush against it */
  padding-top: 3px;
  padding-bottom: 20px;
}

/* =========================================================
   BOOKING BAR
   ========================================================= */

.booking-bar {
  width: 100%;

  /* Low-opacity glass surface */
  background: var(--hero-booking-bg);

  border: 1px solid var(--hero-booking-border);

  border-radius: 0;

  padding: 14px 26px 16px;

  box-shadow: var(--hero-booking-shadow);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* =========================================================
   ONE WAY / ROUND TRIP
   ========================================================= */

.booking-type-options {
  display: inline-flex;
  align-items: center;
  gap: 2px;

  padding: 4px;

  background: var(--hero-soft-bg);
  border: 1px solid var(--hero-soft-border);
  border-radius: 999px;

  margin-bottom: 12px;
}

.custom-radio {
  position: relative;

  display: inline-flex;
  align-items: center;

  cursor: pointer;
}

.custom-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.custom-radio span {
  min-width: 115px;

  padding: 10px 18px;

  border-radius: 999px;

  color: var(--hero-control-placeholder);

  font-size: 15px;
  font-weight: 600;

  text-align: center;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.custom-radio input:checked + span {
  background: var(--color-accent);
  color: var(--color-accent-ink);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.custom-radio:hover span {
  color: var(--hero-control-text);
}

/* =========================================================
   BOOKING FORM
   ========================================================= */

.booking-bar-form {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(190px, 1.35fr)
    46px
    minmax(190px, 1.35fr)
    minmax(180px, 0.9fr)
    minmax(250px, 1.35fr)
    125px;

  align-items: center;

  gap: 12px;
}

/* Round trip needs one more column for the return-date field, which
   otherwise has no grid track reserved for it at all and silently fails
   to display. */
.booking-bar-form[data-trip-type="round-trip"] {
  grid-template-columns:
    minmax(170px, 1.15fr)
    46px
    minmax(170px, 1.15fr)
    minmax(150px, 0.75fr)
    minmax(150px, 0.75fr)
    125px;
}

.return-date-slot,
#returnDateSlot {
  display: contents;
}

/* =========================================================
   LOCATION / DATE INPUT
   ========================================================= */

.location-input,
.date-input {
  min-width: 0;
}

.input-with-icon {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
}

.input-icon {
  position: absolute;
  left: 18px;

  pointer-events: none;

  z-index: 2;

  color: var(--hero-control-placeholder);
}

.input-with-icon input,
.input-with-icon .dp-trigger {
  width: 100%;
  min-height: 48px;

  background: var(--hero-control-bg);

  border: 1px solid var(--hero-control-border);

  border-radius: 14px;

  padding: 14px 16px 14px 48px;

  color: var(--hero-control-text);

  font-family: var(--font-heading);
  font-size: 15px;

  box-sizing: border-box;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.input-with-icon input::placeholder {
  color: var(--hero-control-placeholder);
}
.input-with-icon input:focus,
.input-with-icon .dp-trigger:focus,
.input-with-icon .dp-trigger[aria-expanded="true"] {
  outline: none;

  border-color: var(--color-accent);

  box-shadow: 0 0 0 3px rgba(245, 177, 16, 0.18);
}

/* =========================================================
   SWAP BUTTON
   ========================================================= */

.swap-btn {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto;

  border: 1px solid var(--hero-soft-border);

  border-radius: 50%;

  background: var(--hero-soft-bg);

  color: var(--hero-soft-text);

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.swap-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);

  color: var(--color-accent-ink);

  transform: rotate(180deg);
}

/* =========================================================
   DATE
   ========================================================= */

.dp-trigger {
  display: flex;
  align-items: center;

  cursor: pointer;
}

.dp-display {
  color: var(--hero-control-text);
}

.dp-placeholder {
  color: var(--hero-control-placeholder);
}

/* =========================================================
   QUICK DATES
   ========================================================= */

.quick-dates-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quick-dates {
  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 7px;

  min-width: 0;
  flex: 1;
}

.quick-dates-arrow {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-navy-cta);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.quick-dates-arrow:hover:not(:disabled) {
  background: var(--color-navy-cta-hover);
}

.quick-dates-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.date-box {
  min-height: 48px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--hero-soft-border);

  border-radius: 12px;

  background: var(--hero-soft-bg);

  color: var(--hero-soft-text);

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.date-box span {
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
}

.date-box small {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  opacity: 0.7;
}

.date-box:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);

  transform: translateY(-1px);
}

.date-box.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

/* =========================================================
   SEARCH BUTTON
   ========================================================= */

.booking-bar .search-btn {
  width: 100%;
  min-height: 48px;

  border: none;

  border-radius: 14px;

  background: var(--color-accent);

  color: var(--color-accent-ink);

  font-size: 16px;
  font-weight: 700;

  cursor: pointer;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.booking-bar .search-btn:hover {
  background: #f0ad0e;

  transform: translateY(-1px);

  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}

/* =========================================================
   HERO TEXT
   ========================================================= */

.hero-content {
  width: 100%;
  max-width: 760px;

  margin-top: 300px;
  padding-left: 40px;
  padding-right: 20px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: var(--space-4);
}

.hero-heading h1 {
  margin: 0;

  max-width: 760px;

  font-size: clamp(38px, 4vw, 60px);

  line-height: 0.98;

  letter-spacing: -2.5px;

  font-weight: 800;

  color: #ffffff;

  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);

  /* No hard-coded <br> in the markup - let the browser choose where to
     break so short/orphan words (e.g. "Across" alone on its own line)
     don't happen at narrower widths. Falls back to normal wrapping on
     browsers that don't support text-wrap: balance. */
  text-wrap: balance;
}

.text-accent {
  color: #e67a36;
}

.hero-subtext {
  max-width: 650px;

  margin: 0;

  font-family: var(--font-heading);

  font-size: 19px;

  line-height: 1.65;

  color: #ffffff;

  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.hero-badge {
  display: flex;
  align-items: center;

  gap: 10px;

  /* align-self only moved it to the edge of the narrow 760px text
     column (still visually near-center on a wide screen) - this instead
     takes it out of that column entirely and anchors it to the true
     right edge of the full-width .hero-inner (which is already
     position:relative), independent of where the heading text sits. */
  position: absolute;
  right: 40px;
  bottom: 90px;

  padding: 10px 17px;

  border: 1px solid rgba(255, 255, 255, 0.24);

  border-radius: 999px;

  background: rgba(0, 0, 0, 0.24);

  color: #ffffff;

  font-size: 14px;
  font-weight: 600;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ==========================================================
   TABLET
   ========================================================== */

/* ==========================================================
   MOBILE
   ========================================================== */

/* =========================================================
   HERO RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
  .hero-inner {
    width: 100%;
  }

  .booking-bar-form {
    grid-template-columns:
      minmax(160px, 1fr)
      42px
      minmax(160px, 1fr)
      minmax(130px, 0.9fr)
      minmax(170px, 1.2fr)
      110px;
  }
  .booking-bar-form[data-trip-type="round-trip"] {
    grid-template-columns:
      minmax(145px, 1fr)
      42px
      minmax(145px, 1fr)
      minmax(125px, 0.8fr)
      minmax(125px, 0.8fr)
      minmax(190px, 1.1fr)
      110px;
  }

  .hero-content {
    margin-top: 85px;
  }

  .hero-heading h1 {
    font-size: 56px;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .hero {
    min-height: auto;
  }

  .hero-inner {
    width: 100%;

    min-height: auto;

    padding-top: 125px;
    padding-bottom: 70px;
  }

  .booking-bar {
    padding: 20px;
  }

  .booking-bar-form {
    grid-template-columns:
      1fr
      42px
      1fr
      1fr;

    gap: 12px;
  }

  .swap-btn {
    grid-column: 2;
    grid-row: 1;
  }

  .location-input:first-child {
    grid-column: 1;
  }

  .location-input:nth-of-type(3) {
    grid-column: 3;
  }

  /* Scoped to the departure date only - ".date-input" is also present on
     the round-trip return-date field (return-date-input), and without
     this exclusion both fields land in the same grid cell and the
     return date silently sits invisible underneath the departure date. */
  .date-input:not(.return-date-input) {
    grid-column: 4;
  }

  .return-date-input {
    grid-column: 1 / -1;
  }

  .quick-dates {
    grid-column: 1 / -1;
  }

  .booking-bar .search-btn {
    grid-column: 1 / -1;
  }

  .hero-content {
    margin-top: 75px;
  }

  .hero-heading h1 {
    font-size: 58px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

/* ==========================================================================
   WHY CHOOSE US
   ========================================================================== */

.feature-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--space-6);
}

.feature-card {
  padding: 25px;

  /* Hover lift + scale animation */
  transition:
    transform 0.35s var(--ease-standard),
    box-shadow 0.35s var(--ease-standard),
    border-color 0.35s var(--ease-standard),
    background-color 0.2s ease,
    color 0.2s ease;
  will-change: transform;
}

.feature-card:hover,
.feature-card:focus-within {
  transform: translateY(-6px) scale(1.04);

  border-color: rgba(0, 53, 128, 0.25);

  box-shadow: 0 16px 32px rgba(0, 53, 128, 0.14);
}

.feature-card .feature-icon {
  transition:
    transform 0.4s var(--ease-standard),
    background-color 0.35s var(--ease-standard),
    color 0.35s var(--ease-standard);
}

.feature-card:hover .feature-icon,
.feature-card:focus-within .feature-icon {
  transform: scale(1.1) rotate(-6deg);

  background: var(--color-navy-cta);

  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .feature-card .feature-icon {
    transition: none;
  }

  .feature-card:hover,
  .feature-card:focus-within,
  .feature-card:hover .feature-icon,
  .feature-card:focus-within .feature-icon {
    transform: none;
  }
}

.feature-icon {
  width: 64px;
  height: 64px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: var(--space-3);

  border-radius: var(--radius-pill);

  background: rgba(0, 53, 128, 0.1);

  color: var(--color-navy);
}

.feature-card h3 {
  margin-bottom: var(--space-1);

  font-size: var(--fs-h3);
  font-weight: 600;
}

.feature-card p {
  color: var(--color-text-body);

  font-family: var(--font-heading);

  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ==========================================================================
   POPULAR ROUTES
   ========================================================================== */

.popular-routes {
  padding: var(--space-12) 40px;

  background: var(--color-bg-section);
}

.routes-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: var(--space-6);

  margin-bottom: var(--space-12);
}

.routes-heading h2 {
  margin-bottom: var(--space-1);

  font-size: var(--fs-h2);

  letter-spacing: var(--ls-h2);
}

.routes-heading p {
  color: var(--color-text-body);

  font-family: var(--font-heading);

  font-size: var(--fs-body);
}

.view-all-link {
  display: flex;
  align-items: center;

  gap: var(--space-1);

  color: var(--color-navy);

  font-size: var(--fs-small);
  font-weight: 500;

  white-space: nowrap;
}

.view-all-link:hover {
  text-decoration: underline;
}

.carousel-track .route-card {
  width: calc((100% - var(--space-6) * 2) / 3);

  min-width: 300px;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.testimonial-card {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimonial-stars {
  color: #fdbb24;
  font-size: 15px;
  letter-spacing: 2px;
}

.testimonial-quote {
  flex: 1;
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-cta));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-person h5 {
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
}

.testimonial-person span {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   EXPERIENCE SECTION
   ========================================================================== */

.experience {
  position: relative;
  overflow: hidden;
}

.experience-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 70px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Bus image */
.experience-image {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 24px;
}

.experience-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 24px;
}

.experience-content {
  flex: 1 1 auto;

  min-width: 0;

  align-self: center;
}

.eyebrow {
  display: inline-block;

  padding: 4px 12px;

  color: var(--color-accent-ink);

  background: var(--color-accent);

  border-radius: var(--radius-pill);

  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 700;

  letter-spacing: 1.6px;

  text-transform: uppercase;
}

.experience-content h2 {
  margin-top: var(--space-4);

  color: var(--color-navy);

  font-size: 40px;
  line-height: 48px;

  letter-spacing: -0.8px;
}

.experience-text {
  max-width: 44ch;

  margin-top: var(--space-4);

  color: var(--color-text-muted);

  font-size: var(--fs-body);

  line-height: var(--lh-body-lg);
}

.experience-list {
  display: flex;
  flex-direction: column;

  gap: var(--space-4);

  margin-top: var(--space-8);
}

.experience-benefit {
  display: flex;
  align-items: flex-start;

  gap: var(--space-3);
}

.experience-benefit-icon {
  flex-shrink: 0;

  width: 28px;
  height: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--color-navy);

  background: var(--color-bg-section);

  border-radius: var(--radius-pill);
}

.experience-list h5 {
  color: var(--color-navy);

  font-family: var(--font-heading);

  font-size: var(--fs-body);
  font-weight: 600;

  line-height: var(--lh-body);
}

.experience-list p {
  margin-top: 2px;

  color: var(--color-text-muted);

  font-size: var(--fs-small);

  line-height: var(--lh-small);
}

.experience-content .btn-dark {
  margin-top: var(--space-8);

  padding: var(--space-3) var(--space-6);

  font-size: var(--fs-small);
}

/* =========================================
   Tablet
   ========================================= */

@media (max-width: 900px) {
  .experience-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .experience-image {
    max-width: 750px;
    margin: 0 auto;
  }

  .experience-content {
    max-width: 100%;
  }
}

/* =========================================
   Mobile
   ========================================= */

@media (max-width: 600px) {
  .experience-inner {
    gap: 30px;
  }

  .experience-image {
    border-radius: 18px;
  }

  .experience-image img {
    border-radius: 18px;
    width: 100%;
  }

  .experience-benefit {
    gap: 10px;
  }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-section {
  background: var(--color-bg-section);
}

/* ==========================================================================
   MOBILE EXPERIENCE
   ========================================================================== */

.mobile-experience {
  padding: 64px 0;

  overflow: hidden;

  background: linear-gradient(
    to bottom,
    var(--color-bg-section),
    var(--color-white)
  );
}

:root[data-theme="dark"] .mobile-experience {
  background: #000;
}

.mobile-experience-inner {
  width: min(calc(100% - 32px), 1280px);

  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr;

  gap: 48px;

  align-items: center;
}

.mobile-experience-content {
  order: 1;

  max-width: 672px;

  margin: 0 auto;

  display: flex;
  flex-direction: column;
  justify-content: center;

  text-align: center;
}

.mobile-experience-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 16px;
}

.mobile-experience-badge {
  padding: 4px 12px;

  color: var(--color-accent-ink);

  background: var(--color-accent);

  border-radius: var(--radius-pill);

  font-size: 12px;
  font-weight: 600;

  letter-spacing: 0.05em;

  line-height: 16px;

  text-transform: uppercase;
}

.mobile-experience-content h2 {
  margin-bottom: 24px;

  color: var(--color-navy);

  font-family: "Poppins", sans-serif;

  font-size: 30px;
  font-weight: 800;

  letter-spacing: -0.025em;

  line-height: 36px;
}

.mobile-experience-copy {
  margin-bottom: 32px;

  color: var(--color-text-body);

  font-size: 16px;

  line-height: 1.625;
}

.mobile-experience-features {
  width: fit-content;

  margin: 0 auto 40px;

  display: flex;
  flex-direction: column;

  gap: 12px;

  text-align: left;
}

.mobile-experience-features li {
  display: flex;
  align-items: center;

  gap: 12px;

  color: var(--color-text-body);
}

.mobile-experience-features svg {
  width: 20px;
  height: 20px;

  flex-shrink: 0;

  color: var(--color-navy);
}

.mobile-experience-features span {
  font-size: 14px;
  font-weight: 500;
}

.mobile-store-links {
  display: flex;
  /* Side by side (left button, right button) in one row, guaranteed -
     flex-wrap: nowrap (not "wrap") means the row physically cannot break
     onto two lines no matter how narrow the screen is. The old
     `flex: 1 1 180px` on each button demanded 180px+180px+gap = 372px
     minimum, which doesn't fit on an iPhone 16 (390px viewport, less
     after the section's own side padding) - that's what was still
     forcing them apart. Each button now shrinks instead (flex: 1 1 0
     below), and its text truncates with an ellipsis if it ever has to. */
  flex-direction: row;
  flex-wrap: nowrap;

  gap: 10px;

  justify-content: center;
}

.mobile-store-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 1 1 0;
  /* Without this, a flex item won't shrink past its own content's
     natural width even with flex-shrink:1 - this is what actually lets
     the button (and the text inside it) shrink down to fit. */
  min-width: 0;

  gap: 10px;

  padding: 10px 14px;

  color: var(--color-overlay-text);

  background: #111827;

  border: 1px solid #1f2937;
  border-radius: 12px;

  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);

  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

.mobile-store-link:hover {
  background: var(--color-black);

  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);

  transform: translateY(-2px);
}

/* In dark mode this section's own background drops to pure black (see
   :root[data-theme="dark"] .mobile-experience below) - against that, the
   badge's near-black #111827 fill and barely-lighter #1f2937 border both
   lost almost all contrast and the buttons nearly disappeared. Lighten
   both for dark mode specifically so they stay visible as distinct
   buttons on a black section. */
:root[data-theme="dark"] .mobile-store-link {
  background: #1c2436;
  border-color: rgba(255, 255, 255, 0.16);
}

:root[data-theme="dark"] .mobile-store-link:hover {
  background: #272f45;
  border-color: rgba(255, 255, 255, 0.26);
}

.mobile-store-link > svg {
  flex-shrink: 0;
}

.mobile-store-copy {
  display: flex;
  flex-direction: column;
  /* Lets the text block itself shrink below its own natural width
     (same reason as min-width:0 on the button above) so the ellipsis
     rules below actually get a chance to kick in instead of forcing
     the button wider than its fair share of the row. */
  min-width: 0;

  text-align: left;
}

.mobile-store-kicker,
.mobile-store-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mobile-store-kicker {
  margin-bottom: 4px;

  color: #9ca3af;

  font-size: 10px;
  font-weight: 500;

  letter-spacing: 0.05em;

  line-height: 1;

  text-transform: uppercase;
}

.mobile-store-name {
  color: var(--color-overlay-text);

  font-size: 14px;
  font-weight: 600;

  line-height: 1;
}

@media (max-width: 400px) {
  /* Very narrow phones (iPhone SE/mini-width and similar) - trim padding
     and icon size a bit further so there's more room for the text
     before the ellipsis above has to cut anything off. */
  .mobile-store-link {
    gap: 8px;
    padding: 9px 10px;
  }

  .mobile-store-link > svg {
    width: 20px;
    height: 20px;
  }

  .mobile-store-kicker {
    font-size: 9px;
  }

  .mobile-store-name {
    font-size: 13px;
  }
}

.mobile-experience-visual {
  order: 2;

  width: 100%;

  display: flex;
  justify-content: center;
}

.mobile-experience-image-wrap {
  position: relative;

  isolation: isolate;

  width: 100%;
  max-width: 512px;

  padding: 0 16px;
}

.mobile-experience-glow {
  position: absolute;
  inset: 0;

  z-index: -1;

  border-radius: 24px;

  background: #e0e7ff;

  filter: blur(24px);

  opacity: 0.6;

  transform: rotate(2deg) scale(0.95);
}

:root[data-theme="dark"] .mobile-experience-glow {
  display: none;
}

:root[data-theme="dark"] .mobile-experience-image-wrap img {
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.5));
}

.mobile-experience-image-wrap img {
  width: 100%;
  height: auto;

  margin: 0 auto;

  object-fit: contain;

  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));

  transition: transform 0.3s;
}

.mobile-experience-image-wrap img:hover {
  transform: scale(1.02);
}

/* ==========================================================================
   RESPONSIVE — SMALL LAPTOP / TABLET
   ========================================================================== */

@media (max-width: 1024px) {
  .hero {
    min-height: auto;

    /* was hardcoded #ffffff - stayed light even in dark theme, which is
       why booking-bar text (and anything below the short photo banner)
       lost contrast in dark mode. */
    background: var(--color-bg-page);
  }

  .hero-bg {
    height: 360px;
  }

  .hero-bg video,
  .hero-bg img,
  .hero-bg .hero-buses {
    object-position: center center;
  }

  .hero-gradient {
    height: 360px;

    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.1) 55%,
      rgba(0, 0, 0, 0.35) 100%
    );
  }

  .hero-inner {
    width: 100%;

    min-height: auto;

    margin: 0;

    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding: calc(var(--nav-height) + 35px) 32px 50px;
  }

  .hero-content {
    max-width: 680px;

    margin-bottom: 36px;
  }

  .hero-heading h1 {
    font-size: 52px;
    line-height: 1.06;
  }

  .hero-subtext {
    max-width: 600px;

    font-size: 17px;
  }

  .booking-bar {
    width: 100%;
    max-width: 680px;

    margin: 0 auto;

    align-self: center;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .carousel-track .route-card {
    width: calc((100% - var(--space-6)) / 2);

    min-width: 280px;
  }

  .experience-inner {
    flex-direction: column;

    align-items: stretch;

    gap: var(--space-8);
  }

  .experience-image {
    flex: 0 0 auto;

    width: 100%;
    max-width: 420px;

    margin: 0 auto;
  }

  .experience-image img {
    min-height: 0;

    aspect-ratio: 4 / 3;
  }

  .experience-content {
    align-self: stretch;
  }
}

/* ==========================================================================
   RESPONSIVE — TABLET / MOBILE
   ========================================================================== */

@media (max-width: 768px) {
  .hero-bg {
    height: 300px;
  }

  .hero-gradient {
    height: 300px;
  }

  .hero-inner {
    padding: calc(var(--nav-height) + 28px) 24px 42px;
  }

  .hero-content {
    margin-bottom: 30px;
  }

  .hero-heading h1 {
    font-size: 44px;
    line-height: 1.08;

    letter-spacing: -1.6px;
  }

  .hero-subtext {
    max-width: 560px;

    font-size: 16px;

    line-height: 1.6;
  }

  .hero-badge {
    font-size: 13px;
  }

  .booking-bar {
    padding: 18px;

    border-radius: 18px;

    gap: 15px;
  }

  .booking-bar-form {
    gap: 11px;
  }

  .booking-bar-form .input-with-icon {
    height: 55px;
  }

  .booking-bar-form .date-input {
    height: 55px;
  }

  .booking-bar-form .search-btn {
    height: 54px;
  }

  .booking-bar-form .quick-dates {
    gap: 6px;
  }

  .booking-bar-form .date-box {
    height: 42px;
  }

  .carousel-track .route-card {
    width: 85%;

    min-width: 260px;
  }
}

/* ==========================================================================
   RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 1024px) {
  /* -------------------------------
     Hero background becomes banner
     ------------------------------- */

  .hero {
    min-height: 0;

    /* Theme-aware now - this was hardcoded white, so in dark theme the
       booking bar (which is taller than the 220px photo banner and
       spills onto this background) and the heading text below it both
       lost contrast against it. */
    background: var(--color-bg-page);

    overflow: visible;
  }

  .hero-bg {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 220px;

    background: var(--color-bg-section);
  }

  .hero-bg video,
  .hero-bg img,
  .hero-bg .hero-buses {
    height: 220px;

    object-position: center center;
  }

  .hero-gradient {
    height: 220px;

    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.12) 0%,
      rgba(0, 0, 0, 0.12) 45%,
      rgba(0, 0, 0, 0.38) 100%
    );
  }

  /* -------------------------------
     Main mobile layout
     ------------------------------- */

  .hero-inner {
    width: 100%;

    min-height: 0;

    display: flex;
    flex-direction: column;

    align-items: stretch;

    /* extra top gap so the card doesn't touch the photo above it */
    padding: calc(var(--nav-height) + 52px) 16px 34px;

    gap: 0;
  }

  /* -------------------------------
     Mobile hero text
     ------------------------------- */

  .hero-content {
    width: 100%;
    max-width: none;

    margin-top: 0px;
    margin-bottom: 0px;

    padding: 0;

    gap: 8px;

    align-items: flex-start;
  }

  .hero-heading h1 {
    max-width: 100%;

    color: var(--color-navy, #003580);

    font-size: 37px;
    line-height: 1.08;

    letter-spacing: -1.25px;

    text-shadow: none;
  }

  .text-accent {
    color: #e67a36;
  }

  .hero-subtext {
    max-width: 100%;

    color: var(--color-text-body);

    font-size: 15px;

    line-height: 1.58;

    text-shadow: none;
  }

  .hero-badge {
    position: static;

    padding: 0;

    margin-top: 2px;

    color: var(--color-text-body);

    background: transparent;

    border: none;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    font-size: 13px;
  }
  .hero-badge svg {
    width: 16px;
    height: 19px;
  }

  /* -------------------------------
     Mobile booking card
     ------------------------------- */

  .booking-bar {
    /* Bleed out of .hero-inner's 16px side padding so the card touches
       both screen edges instead of floating with gaps on each side. */
    width: calc(100% + 32px);
    max-width: none;

    margin: 0 -16px;

    padding: 16px;

    background: var(--hero-booking-bg);

    border: 1px solid var(--hero-booking-border);
    border-left: none;
    border-right: none;

    border-radius: 0;

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    box-shadow: var(--hero-booking-shadow);
  }

  /* -------------------------------
     Mobile trip toggle
     ------------------------------- */

  .booking-type-options {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 3px;

    padding: 3px;

    background: var(--hero-soft-bg);

    border: 1px solid var(--hero-soft-border);
  }

  .custom-radio {
    width: 100%;
  }

  .custom-radio span {
    width: 100%;

    min-width: 0;

    padding: 9px 8px;

    color: var(--hero-control-placeholder);

    font-size: 13px;
  }

  .custom-radio input:checked + span {
    color: var(--color-accent-ink);

    background: var(--color-accent);

    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.1);
  }

  /* -------------------------------
     Mobile form
     ------------------------------- */

  .booking-bar-form {
    display: flex;
    flex-direction: column;

    /* swap-btn below is positioned absolute; without this it was
       positioning against .hero-inner (the whole card) instead of the
       form, landing near the top-right corner of the card instead of
       centered on the seam between the two location fields. */
    position: relative;

    gap: 11px;
  }

  .booking-bar-form .input-with-icon,
  .booking-bar-form .date-input {
    width: 100%;
    margin: 0;

    height: 54px;

    flex: none;
  }

  /* -------------------------------
     Hide desktop quick dates
     ------------------------------- */

  .booking-bar-form .quick-dates,
  .booking-bar-form .quick-dates-row {
    display: none;
  }

  .booking-bar-form .form-divider {
    display: none;
  }

  /* -------------------------------
     Swap button
     ------------------------------- */

  .booking-bar-form .swap-btn {
    position: absolute;
    top: 44px;
    left: auto;
    right: 14px;
    width: 32px;
    height: 32px;
    z-index: 2;
    transform: none;
    background: var(--hero-soft-bg);
    border-color: var(--hero-soft-border);
    color: var(--hero-soft-text);
  }

  .booking-bar-form .swap-btn:hover {
    transform: rotate(180deg);

    background: var(--color-accent);

    color: var(--color-accent-ink);
  }

  /* -------------------------------
     Search
     ------------------------------- */

  .booking-bar-form .search-btn {
    width: 100%;

    height: 53px;

    margin-top: 2px;

    border-radius: 10px;

    font-size: 15px;
  }

  /* -------------------------------
     Popular routes
     ------------------------------- */

  .popular-routes {
    padding: var(--space-12) 16px;
  }

  .routes-heading {
    flex-direction: column;

    align-items: flex-start;
  }

  .section-heading h2,
  .routes-heading h2 {
    font-size: 26px;

    line-height: 34px;
  }

  .carousel-wrapper {
    padding: 0 8px;

    margin: 0 -8px;
  }

  /* -------------------------------
     Experience
     ------------------------------- */

  .experience {
    padding: var(--space-12) 20px;
  }

  .experience-content h2 {
    font-size: 30px;

    line-height: 38px;
  }
}

/* ==========================================================================
   VERY SMALL PHONES
   ========================================================================== */

@media (max-width: 400px) {
  .hero-inner {
    padding-left: 13px;
    padding-right: 13px;
  }

  .hero-content {
    margin-top: 30px;
  }

  .hero-heading h1 {
    font-size: 34px;

    letter-spacing: -1.1px;
  }

  .hero-subtext {
    font-size: 14px;
  }

  .booking-bar {
    width: calc(100% + 26px);

    margin: 0 -13px;

    padding: 14px;
  }

  .booking-bar-form .input-with-icon,
  .booking-bar-form .date-input {
    height: 52px;
  }

  .booking-bar-form .search-btn {
    height: 51px;
  }

  .custom-radio span {
    padding: 8px 5px;

    font-size: 12px;
  }
}

/* ==========================================================================
   MOBILE EXPERIENCE — TABLET+
   ========================================================================== */

@media (min-width: 640px) {
  .mobile-experience {
    padding: 96px 0;
  }

  .mobile-experience-inner {
    width: min(calc(100% - 48px), 1280px);
  }

  .mobile-experience-content h2 {
    font-size: 36px;

    line-height: 40px;
  }

  .mobile-experience-copy {
    font-size: 18px;

    line-height: 28px;
  }

  .mobile-experience-features span {
    font-size: 16px;
  }

  .mobile-store-links {
    flex-direction: row;
  }

  .mobile-experience-image-wrap {
    max-width: 576px;

    padding: 0;
  }
}

.travel-videos {
  background: var(--color-bg-page);
}

.travel-videos .section-heading {
  align-items: flex-start;
  text-align: left;
  margin-bottom: var(--space-8);
}

.travel-videos .section-heading p {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  margin: 0;
}

/* ---- Horizontal scroll track ---- */
.travel-videos-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.travel-videos-arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-navy-cta);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.travel-videos-arrow:hover {
  background: var(--color-navy-cta-hover);
}

.travel-videos-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-6);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: var(--space-2) var(--space-1) var(--space-4);
  margin: 0 calc(var(--space-1) * -1);
  flex: 1;
  min-width: 0;
}

/* Custom scrollbar - WebKit */
.travel-videos-scroll::-webkit-scrollbar {
  height: 8px;
}

.travel-videos-scroll::-webkit-scrollbar-track {
  background: var(--color-bg-section);
  border-radius: var(--radius-pill);
}

.travel-videos-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.travel-videos-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-disabled);
}

/* Custom scrollbar - Firefox */
.travel-videos-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) var(--color-bg-section);
}

/* ---- Video card ---- */
.travel-video-card {
  flex: 0 0 340px;
  scroll-snap-align: start;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition:
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.travel-video-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-route-card);
}

.travel-video-frame-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  background: var(--color-black);
}

.travel-video-frame-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.travel-video-info {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.travel-video-title {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 var(--space-1);
  line-height: var(--lh-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.travel-video-channel {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .travel-video-card {
    flex-basis: 280px;
  }
}

@media (max-width: 640px) {
  .travel-videos .section-heading {
    margin-bottom: var(--space-6);
  }

  .travel-video-card {
    flex-basis: 220px;
  }

  .travel-videos-scroll {
    gap: var(--space-4);
  }
}

/* ==========================================================================
   MOBILE EXPERIENCE — DESKTOP
   ========================================================================== */

@media (min-width: 1024px) {
  .mobile-experience-inner {
    width: min(calc(100% - 64px), 1280px);

    grid-template-columns: repeat(12, minmax(0, 1fr));

    gap: 32px;
  }

  .mobile-experience-content {
    order: 2;

    grid-column: span 5;

    max-width: none;

    margin: 0;

    text-align: left;
  }

  .mobile-experience-badge-wrap,
  .mobile-store-links {
    justify-content: flex-start;
  }

  .mobile-experience-content h2 {
    font-size: 48px;

    line-height: 1;
  }

  .mobile-experience-features {
    margin-left: 0;
    margin-right: 0;
  }

  .mobile-experience-visual {
    order: 1;

    grid-column: span 7;
  }

  .mobile-experience-image-wrap {
    max-width: 672px;
  }
}

/* Swap button: vertical (up/down) arrows when From / To are stacked on phones */
@media (max-width: 1024px) {
  .booking-bar-form .swap-btn svg {
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   DESKTOP BOOKING BAR — roomier departure date + hero text kept low
   (desktop / laptop only, >= 1025px; tablet and phone are untouched)
   ========================================================================== */
@media (min-width: 1025px) {
  /* one-way: the DATE column (4th) gets the extra room, the quick-date chips (5th) are compact */
  .booking-bar-form {
    grid-template-columns:
      minmax(150px, 1.1fr)
      42px
      minmax(150px, 1.1fr)
      minmax(260px, 1.7fr)
      minmax(205px, 1fr)
      minmax(110px, 0.5fr);
    column-gap: 12px;
  }

  /* round trip: depart + return dates both get enough width */
  .booking-bar-form[data-trip-type="round-trip"] {
    grid-template-columns:
      minmax(120px, 0.9fr)
      42px
      minmax(120px, 0.9fr)
      minmax(215px, 1.3fr)
      minmax(215px, 1.3fr)
      minmax(105px, 0.5fr);
  }

  /* dates never get clipped to "बुधबार, २१ अ…" */
  .booking-bar-form .dp-trigger {
    padding-right: 38px;
  }
  .booking-bar-form .dp-display {
    font-size: 14.5px;
  }

  .booking-bar-form .quick-dates {
    gap: 5px;
  }
}

/* laptop widths: slightly tighter inputs so "Start your adventure at?" is not clipped */
@media (min-width: 1025px) and (max-width: 1280px) {
  .booking-bar-form .input-with-icon input,
  .booking-bar-form .input-with-icon .dp-trigger {
    font-size: 14px;
    padding-left: 40px;
    padding-right: 10px;
  }
  .booking-bar-form .input-with-icon .input-icon {
    left: 13px;
  }
  .booking-bar-form .input-with-icon .dp-trigger {
    padding-right: 34px;
  }
  .booking-bar-form .dp-display {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .booking-bar-form .input-with-icon .dp-trigger {
    padding-left: 36px;
    padding-right: 26px;
  }
}

/* hero heading/paragraph back at the BOTTOM-left of the hero for 1025-1200px
   (the older <=1200px rule pulled it up under the booking bar) */
@media (min-width: 1025px) and (max-width: 1200px) {
  .hero-content {
    margin-top: 300px;
  }
}

/* SWAP BUTTON: up/down arrows while From / To are stacked (<= 1024px) */
@media (max-width: 1024px) {
  .booking-bar-form .swap-btn svg {
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   DESKTOP / LAPTOP BOOKING BAR (>= 1025px) - everything stays on ONE row.
   Roomier departure date + properly sized date chips.
   ========================================================================== */
@media (min-width: 1025px) {
  .booking-bar-form {
    grid-template-columns:
      minmax(120px, 1.2fr) /* From */
      38px /* swap */
      minmax(120px, 1.2fr) /* To */
      minmax(200px, 0.85fr) /* Departure date */
      minmax(280px, 1.3fr) /* date chips */
      100px; /* Search */
    column-gap: 10px;
  }

  .booking-bar-form[data-trip-type="round-trip"] {
    grid-template-columns:
      minmax(120px, 1.1fr)
      38px
      minmax(120px, 1.1fr)
      minmax(200px, 0.95fr)
      minmax(200px, 0.95fr)
      100px;
  }

  /* inputs: a little tighter so the date + chips can breathe */
  .booking-bar-form .input-with-icon input,
  .booking-bar-form .input-with-icon .dp-trigger {
    font-size: 14px;
    padding-left: 40px;
    padding-right: 10px;
  }
  .booking-bar-form .input-with-icon .input-icon {
    left: 13px;
  }
  .booking-bar-form .input-with-icon .dp-trigger {
    padding-right: 34px;
  }
  .booking-bar-form .dp-display {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .booking-bar-form .input-with-icon .dp-trigger {
    padding-left: 36px;
    padding-right: 26px;
  }
  /* ---- date chips (21 22 23 24 25) ---- */
  .booking-bar-form .quick-dates-row {
    gap: 6px;
  }
  .booking-bar-form .quick-dates {
    gap: 6px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .booking-bar-form .date-box {
    min-height: 48px;
    padding: 0 2px;
    border-radius: 12px;
    gap: 1px;
  }
  .booking-bar-form .date-box span {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
  }
  .booking-bar-form .date-box small {
    font-size: 10.5px;
    line-height: 12px;
    opacity: 0.8;
    white-space: nowrap;
  }
  .booking-bar-form .date-box.active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }
  .booking-bar-form .quick-dates-arrow {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  .booking-bar-form .search-btn {
    font-size: 15px;
  }
}

/* wide screens: more room, so go back to the comfortable sizes */
@media (min-width: 1321px) {
  .booking-bar-form {
    grid-template-columns:
      minmax(235px, 1.3fr)
      42px
      minmax(235px, 1.3fr)
      minmax(255px, 0.9fr)
      minmax(320px, 1.4fr)
      120px;
    column-gap: 12px;
  }
  .booking-bar-form .input-with-icon input,
  .booking-bar-form .input-with-icon .dp-trigger {
    font-size: 15px;
    padding-left: 48px;
    padding-right: 16px;
  }
  .booking-bar-form .input-with-icon .input-icon {
    left: 18px;
  }
  .booking-bar-form .input-with-icon .dp-trigger {
    padding-right: 38px;
  }
  .booking-bar-form .dp-display {
    font-size: 14.5px;
  }
  .booking-bar-form .quick-dates {
    gap: 8px;
  }
  .booking-bar-form .quick-dates-arrow {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  .booking-bar-form .search-btn {
    font-size: 16px;
  }
}

/* hero heading/paragraph back at the BOTTOM-left of the hero for 1025-1200px
   (the older <=1200px rule pulled it up under the booking bar) */
@media (min-width: 1025px) and (max-width: 1200px) {
  .hero-content {
    margin-top: 300px;
  }
}

/* SWAP BUTTON: up/down arrows while From / To are stacked (<= 1024px) */
@media (max-width: 1024px) {
  .booking-bar-form .swap-btn svg {
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   V27: search box tabs - By Route / By Bus
   ========================================================================== */
.booking-bar { scroll-margin-top: 96px; }
.booking-bar .bus-input { display: none; }
.booking-bar[data-search-mode="bus"] .bus-input { display: flex; flex: 1 1 100%; }
@media (min-width: 1025px) {
  .booking-bar[data-search-mode="bus"] .bus-input { flex: 2.6 1 320px; }
}
.booking-bar[data-search-mode="bus"] .location-input,
.booking-bar[data-search-mode="bus"] .swap-btn,
.booking-bar[data-search-mode="bus"] .trip-type-row,
.booking-bar[data-search-mode="bus"] #returnDateSlot { display: none !important; }
.booking-bar[data-search-mode="bus"] .bus-entry { display: none; }
.booking-bar .bus-head { display: none; }
.booking-bar[data-search-mode="bus"] .bus-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--hf-field-text, var(--color-navy, #002155));
  font-family: var(--font-heading, inherit);
  font-size: 17px;
}
.booking-bar .bus-back {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--hf-field-line, rgba(0, 0, 0, 0.15));
  background: var(--hf-field-bg, rgba(255, 255, 255, 0.6));
  color: inherit;
  cursor: pointer;
}
.booking-bar .bus-back:hover { border-color: #ff9d2e; }

/* "Search by bus name" row at the top of the search card */
.booking-bar .bus-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 16px 12px 12px;
  border-radius: 16px;
  border: 1.5px solid var(--hf-field-line, rgba(0, 0, 0, 0.15));
  background: var(--hf-field-bg, rgba(255, 255, 255, 0.7));
  color: var(--hf-field-text, var(--color-navy, #002155));
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.booking-bar .bus-entry:hover { border-color: #ff9d2e; }
.booking-bar .bus-entry:focus-visible { outline: none; border-color: #ff9d2e; box-shadow: 0 0 0 4px rgba(255, 157, 46, 0.25); }
.booking-bar .bus-entry-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(127, 140, 170, 0.18);
  color: #ff9d2e;
}
.booking-bar .bus-entry-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.booking-bar .bus-entry-text strong { font-family: var(--font-heading, inherit); font-size: 16px; font-weight: 700; }
.booking-bar .bus-entry-text small {
  color: var(--hf-field-hint, #64748b);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-bar .bus-entry-arrow { flex: none; color: var(--hf-field-hint, #64748b); }