/* Shared mobile usability improvements for public pages. */

@media (max-width: 991.98px) {
  .offcanvas {
    max-width: 100%;
    overscroll-behavior: contain;
  }

  .offcanvas.offcanvas-bottom {
    box-sizing: border-box;
    width: 100vw !important;
    max-width: 100vw !important;
    right: auto;
    left: 0;
    margin-inline: 0;
  }

  body:has(.offcanvas.show) {
    width: 100%;
    padding-right: 0 !important;
    overflow: hidden;
  }

  html:has(body .offcanvas.show) {
    overflow: hidden !important;
    scrollbar-gutter: auto !important;
  }

  html:has(body .offcanvas.show)::-webkit-scrollbar,
  body:has(.offcanvas.show)::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  body:has(.offcanvas.show) .fixed-top,
  body:has(.offcanvas.show) .fixed-bottom,
  body:has(.offcanvas.show) .sticky-top {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  .offcanvas .offcanvas-header {
    min-height: 64px;
    padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.75rem;
    background: inherit;
    border-bottom: 1px solid hsl(var(--border));
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .offcanvas .offcanvas-title {
    font-size: 1.125rem;
    line-height: 1.35;
  }

  .offcanvas .btn-close {
    width: 44px;
    height: 44px;
    margin: -0.5rem -0.5rem -0.5rem auto;
    padding: 0;
    background-size: 1rem;
    opacity: 0.72;
  }

  .offcanvas .offcanvas-body {
    overscroll-behavior-y: contain;
    scrollbar-gutter: auto;
  }

  .offcanvas-backdrop.show {
    opacity: 0.62;
  }

  .mob-lang-oc-list .lang-option {
    min-height: 56px;
  }

  .mob-lang-oc-list .lang-option-code {
    width: 34px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  .mob-oc-search-row {
    min-height: 48px;
  }

  .mob-oc-list li {
    min-height: 64px;
  }

  .mob-cal-tab,
  .mob-cal-day {
    min-height: 44px;
  }

  .mob-cal-tab-val.placeholder {
    background: transparent !important;
    opacity: 1;
  }

  .mob-cal-tab-val.placeholder {
    background: transparent !important;
    opacity: 1;
  }

  .mob-pax-oc-chev {
    width: 44px;
    height: 44px;
  }

  .mob-pax-oc-footer,
  .mob-cal-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }

  .dark .offcanvas {
    --bs-offcanvas-bg: hsl(var(--card));
    --bs-offcanvas-color: hsl(var(--foreground));
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    border-color: hsl(var(--border));
  }

  .dark .offcanvas .btn-close {
    filter: invert(1) grayscale(1) brightness(1.8);
  }

  .dark .offcanvas .offcanvas-title,
  .dark .offcanvas :is(.mob-oc-li-name, .mob-cal-month-hd, .mob-cal-tab-val, .mob-cal-day-inner, .mob-pax-oc-type, .mob-pax-oc-person-ic, .mob-pax-oc-num, .mob-pax-oc-vehicle-label) {
    color: hsl(var(--foreground));
  }

  .dark .offcanvas :is(.mob-oc-field-label, .mob-oc-li-sub, .mob-cal-tab-lbl, .mob-cal-dow, .mob-pax-oc-age) {
    color: hsl(var(--muted-foreground));
  }

  .dark .mob-lang-oc-list .lang-option {
    color: hsl(var(--foreground));
    border-bottom-color: hsl(var(--border));
  }

  .dark .mob-lang-oc-list .lang-option:hover,
  .dark .mob-lang-oc-list .lang-option:focus {
    background: hsl(var(--muted));
  }

  .dark .mob-lang-oc-list .lang-option.active {
    background: hsl(210 60% 24%);
    color: hsl(210 90% 84%);
  }

  .dark .mob-lang-oc-list .lang-option.active .lang-option-code {
    background: hsl(210 70% 32%);
    border-color: hsl(210 80% 58%);
    color: hsl(210 100% 94%);
  }

  .dark .mob-oc-search-wrap,
  .dark .mob-cal-footer,
  .dark .mob-pax-oc-footer {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
  }

  .dark .mob-oc-search-row {
    background: hsl(var(--background));
    border-color: hsl(var(--input));
  }

  .dark .mob-oc-list li,
  .dark .mob-pax-oc-row {
    border-color: hsl(var(--border));
  }

  .dark .mob-oc-list li:active,
  .dark .mob-oc-list li.selected {
    background: hsl(var(--muted));
  }

  .dark .mob-cal-day.mob-cal-sel-start .mob-cal-day-inner,
  .dark .mob-cal-day.mob-cal-sel-end .mob-cal-day-inner,
  .dark .mob-pax-vehicle-option.active {
    background: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
  }

  .dark .mob-cal-day.mob-cal-range {
    background: hsl(var(--primary) / 0.14);
  }

  .dark .mob-cal-done-btn,
  .dark .mob-pax-oc-confirm {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: 1px solid hsl(var(--primary));
  }

  .dark .mob-cal-clear-ret,
  .dark .mob-pax-oc-cancel {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    border-color: hsl(var(--border));
  }

  .dark .mob-pax-vehicle-option {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    border-color: hsl(var(--input));
  }

  .dark .mob-pax-oc-chev:disabled,
  .dark .mob-cal-day.mob-cal-disabled .mob-cal-day-inner {
    color: hsl(var(--muted-foreground) / 0.48);
  }

  .dark .bk-mobile-sum-oc :is(
    .bk-sum-leg-block__body,
    #outboundFilledState,
    #returnFilledState,
    .bk-fare-empty-state
  ) {
    background: hsl(var(--background));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
  }

  .dark .bk-mobile-sum-oc :is(
    .bk-sum-leg-block__badge,
    #outboundSummary .bk-sum-section-label,
    #returnSummary .bk-sum-section-label
  ) {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .dark .bk-mobile-sum-oc :is(.bk-sum-leg-block__date, .bk-sum-trip-date, .bk-sum-route-time) {
    color: hsl(var(--foreground));
  }

  .dark .bk-mobile-sum-oc :is(
    .bk-sum-leg-block__body,
    #outboundFilledState,
    #returnFilledState,
    .bk-fare-empty-state
  ) {
    background: hsl(var(--background));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
  }

  .dark .bk-mobile-sum-oc :is(
    .bk-sum-leg-block__badge,
    #outboundSummary .bk-sum-section-label,
    #returnSummary .bk-sum-section-label
  ) {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .dark .bk-mobile-sum-oc :is(.bk-sum-leg-block__date, .bk-sum-trip-date, .bk-sum-route-time) {
    color: hsl(var(--foreground));
  }

  .dark .bk-mobile-sum-oc .bk-booking-sidebar-sections > .bk-sum-section:not(.bk-sum-section--kv) {
    background: hsl(var(--background));
    border-color: hsl(var(--border));
  }

  .dark .bk-mobile-sum-oc .bk-booking-sidebar-sections > .bk-sum-section:not(.bk-sum-section--kv) > .bk-sum-section-label {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .home-navbar .home-navbar-container {
    min-height: 56px;
  }

  .home-navbar .navbar-brand,
  .home-navbar .home-navbar-lang-btn,
  .home-navbar .navbar-toggler {
    min-height: 44px;
  }

  .home-navbar .home-navbar-lang-btn,
  .home-navbar .navbar-toggler {
    min-width: 44px;
    width: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-menu-overlay .mobile-nav-links a,
  .mobile-menu-overlay .mobile-nav-actions a,
  .mobile-menu-overlay .mobile-nav-actions button {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :is(.news-breadcrumb, .about-breadcrumb, .contact-breadcrumb, .schedule-breadcrumb, .bk-breadcrumb) a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .home-bottom-nav__item {
    min-height: 48px;
  }

  .dark .home-bottom-nav {
    --bottom-nav-navy: hsl(var(--foreground));
    --bottom-nav-red: hsl(350 82% 68%);
    background: hsl(var(--card));
    border-top-color: hsl(var(--border));
    box-shadow: 0 -5px 18px rgb(0 0 0 / 0.3);
  }

  .dark .home-navbar .navbar-toggler-icon {
    filter: invert(1) brightness(1.8);
    opacity: 0.88;
  }

  .mob-footer__logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .mob-footer__tagline {
    font-size: 0.75rem;
    line-height: 1.55;
  }

  .mob-footer__social {
    width: 44px;
    height: 44px;
  }

  .page-home .home-panel-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .page-home .home-schedule-table-head,
  .page-home .home-schedule-footnote,
  .page-home .summer-promo__desc {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  .page-schedule :is(.route-tab, .slider-arrow, .date-card) {
    min-height: 44px;
  }

  .page-schedule .slider-arrow {
    min-width: 44px;
    width: 44px;
  }

  .page-schedule .schedule-map .leaflet-control-zoom a {
    width: 44px;
    height: 44px;
    line-height: 44px;
  }

  .page-schedule .date-slider,
  .page-about .about-stats-grid {
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .page-schedule .date-card,
  .page-about .about-stat-card {
    scroll-snap-align: start;
  }

  .page-news .news-cat-tab,
  .page-news .news-search-form :is(input, button) {
    min-height: 44px;
  }

  .page-contact .contact-methods__item a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    overflow-wrap: anywhere;
  }

  .page-booking .bk-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body:is(.page-news, .page-about, .page-contact, .page-schedule, .page-booking)
    :is(input:not([type="checkbox"]):not([type="radio"]), select) {
    min-height: 48px;
  }
}

/* Home sections: one responsive container system from phones to wide screens. */
.page-home {
  --home-container-max: 82.5rem;
  --home-container-gutter: 0.85rem;
  --home-section-gap: clamp(1rem, 1.8vw, 1.5rem);
  --home-section-radius: clamp(14px, 1.5vw, 20px);
}

.page-home .home-section-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--home-container-max);
  margin-inline: auto;
  padding-inline: var(--home-container-gutter);
}

.page-home .hero > .container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--home-container-max);
  padding-right: var(--home-container-gutter);
  padding-left: var(--home-container-gutter);
}

.page-home .home-content-grid {
  padding-block: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 2.5vw, 2rem);
}

.page-home .home-content-grid__row {
  gap: var(--home-section-gap);
}

.page-home :is(.home-content-grid, .summer-promo, .why-bar) {
  scroll-margin-top: 5rem;
}

.page-home :is(.why-bar__card, .summer-promo__card, .home-panel, .home-vehicle-card) {
  border-radius: var(--home-section-radius);
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .page-home .home-content-grid__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-content-grid__vehicle {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1200px) {
  .page-home .home-content-grid__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .page-home {
    --home-container-gutter: 0.85rem;
    --home-section-gap: 0.875rem;
    --home-section-radius: 14px;
  }

  /* The content grid uses display:contents for cross-section ordering on phones,
     so its children receive the shared container gutter directly. */
  .page-home .home-content-grid .home-block-routes,
  .page-home .home-content-grid .home-block-schedule,
  .page-home .home-content-grid__vehicle,
  .page-home .summer-promo .home-section-container,
  .page-home .why-bar .home-section-container {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding-inline: var(--home-container-gutter);
  }

  .page-home .home-content-grid .home-block-schedule,
  .page-home .home-content-grid__vehicle {
    margin-top: var(--home-section-gap);
  }

  .page-home .summer-promo,
  .page-home .why-bar {
    padding-inline: 0;
  }

  .page-home .home-vehicle-card {
    overflow: hidden;
    border: 0;
    border-top: 1px solid #d7e3f1;
    border-bottom: 1px solid #d7e3f1;
    border-radius: 0;
    background: #f7fbff;
    box-shadow: none;
  }

  .page-home .home-vehicle-card__hero {
    border-radius: 0;
  }

  .page-home .home-vehicle-card__media {
    inset: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
  }

  .page-home .home-vehicle-card__media::after {
    background: linear-gradient(
      to right,
      #f7fbff 0%,
      rgb(247 251 255 / 0.98) 34%,
      rgb(247 251 255 / 0.82) 52%,
      rgb(247 251 255 / 0.28) 70%,
      transparent 88%
    );
  }

  .page-home .home-vehicle-card__copy {
    max-width: 58%;
  }

  .page-home .home-vehicle-card__photo {
    width: 100%;
    max-width: 100%;
  }

  .dark .page-home .home-vehicle-card {
    border-top-color: hsl(var(--border));
    border-bottom-color: hsl(var(--border));
    background: #151f32;
  }

  .dark .page-home .home-vehicle-card__media::after {
    background: linear-gradient(
      to right,
      #151f32 0%,
      rgb(21 31 50 / 0.98) 34%,
      rgb(21 31 50 / 0.84) 52%,
      rgb(21 31 50 / 0.32) 70%,
      transparent 88%
    );
  }
}

/* Hero ferry: dedicated artwork area so Booking never covers the vessel. */
.page-home .home-hero-wrap,
.dark .page-home .home-hero-wrap {
  background-image: none;
  background-color: hsl(var(--background));
  background-blend-mode: normal;
  overflow-x: clip;
}

.page-home .home-hero-wrap {
  --home-hero-stage-height: clamp(600px, 48vw, 700px);
  background-image:
    radial-gradient(ellipse at 88% 8%, rgb(72 145 200 / 0.3), transparent 48%),
    linear-gradient(180deg, #9bcbea 0%, #d8eaf5 48%, hsl(var(--background)) 100%);
}

.page-home .home-hero-wrap::after {
  content: none;
}

.dark .page-home .home-hero-wrap::after {
  content: none;
}

.dark .page-home .home-hero-wrap {
  background-image:
    radial-gradient(ellipse at 88% 8%, rgb(70 140 205 / 0.24), transparent 48%),
    linear-gradient(180deg, #173a5a 0%, #172b43 48%, hsl(var(--background)) 100%);
}

.page-home .hero {
  min-height: var(--home-hero-stage-height);
  padding-block: clamp(7rem, 10vw, 9rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
  background-color: #b9dcf5;
  background-image: url('../../../images/hero-ferry-desktop-v4.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 calc(100% - 150px),
    transparent calc(100% - 16px),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 calc(100% - 150px),
    transparent calc(100% - 16px),
    transparent 100%
  );
}

.page-home .hero-overlay {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(238 248 255 / 0.72) 0%,
    rgb(238 248 255 / 0.42) 30%,
    transparent 55%
  );
}

.page-home .booking-section {
  margin-top: clamp(-210px, -14vw, -170px);
  padding-top: 0;
  padding-bottom: clamp(1rem, 1.5vw, 1.25rem);
}

.page-home .booking-glass-panel {
  max-width: 860px;
  box-shadow:
    0 24px 54px rgb(12 48 78 / 0.16),
    0 4px 12px rgb(12 48 78 / 0.08);
}

.page-home .home-hero-benefits {
  display: none;
}

@media (min-width: 1200px) {
  .page-home .booking-section > .home-hero-benefits {
    position: absolute;
    z-index: 2;
    right: var(--home-container-gutter);
    bottom: clamp(1rem, 1.5vw, 1.25rem);
    display: block;
    width: min(calc(100% - 910px), 380px);
    padding: clamp(1.25rem, 1.6vw, 1.6rem);
    color: #fff;
    border: 1px solid rgb(255 255 255 / 0.28);
    border-radius: 1.25rem;
    background:
      radial-gradient(circle at 100% 0%, rgb(74 150 210 / 0.35), transparent 42%),
      linear-gradient(145deg, rgb(9 32 62 / 0.96), rgb(13 45 78 / 0.92));
    box-shadow: 0 24px 54px rgb(5 28 52 / 0.22);
    backdrop-filter: blur(18px);
  }

  .page-home .home-hero-benefits__eyebrow {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: 0.6rem;
    color: #f18a94;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
  }

  .page-home .home-hero-benefits__title {
    max-width: 15ch;
    margin: 0 0 0.45rem;
    color: #fff;
    font-size: clamp(1.35rem, 1.6vw, 1.7rem);
    line-height: 1.12;
  }

  .page-home .home-hero-benefits__lead {
    margin: 0 0 1.15rem;
    color: rgb(225 237 249 / 0.78);
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .page-home .home-hero-benefits__list {
    display: grid;
    gap: 0.7rem;
  }

  .page-home .home-hero-benefits__item {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    padding: 0.7rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 0.85rem;
    background: rgb(255 255 255 / 0.06);
  }

  .page-home .home-hero-benefits__icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 900;
    border-radius: 0.7rem;
    background: rgb(220 48 57 / 0.88);
  }

  .page-home .home-hero-benefits__item strong,
  .page-home .home-hero-benefits__item small {
    display: block;
  }

  .page-home .home-hero-benefits__item strong {
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.25;
  }

  .page-home .home-hero-benefits__item small {
    margin-top: 0.14rem;
    color: rgb(225 237 249 / 0.7);
    font-size: 0.7rem;
    line-height: 1.35;
  }

}

.page-home .hero-content.fade-up-anim,
.page-home .booking-glass-panel.fade-up-anim {
  opacity: 1;
  visibility: visible;
  transform: none;
  animation: none;
}

.page-home .home-hero-wrap + .home-content-grid {
  padding-top: clamp(1.25rem, 2.5vw, 2.5rem);
}

@media (min-width: 768px) {
  body.page-home .home-hero-wrap > .booking-section {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--home-container-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--home-container-gutter);
    padding-left: var(--home-container-gutter);
  }

  .page-home .booking-section::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: -3rem;
    right: calc(50% - 50vw);
    bottom: -1.25rem;
    left: calc(50% - 50vw);
    pointer-events: none;
    background-image:
      linear-gradient(180deg, rgb(220 239 250 / 0.28) 0%, hsl(var(--background)) 100%),
      url('../../../images/hero-ferry-desktop-v4.webp');
    background-repeat: no-repeat;
    background-position: center, center 72%;
    background-size: 100% 100%, cover;
    filter: blur(18px);
    opacity: 0.34;
    transform: scale(1.025);
    transform-origin: center;
    mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.78) 54%, transparent 100%);
  }

  .dark .page-home .booking-section::before {
    background-image:
      linear-gradient(180deg, rgb(15 43 68 / 0.24) 0%, hsl(var(--background)) 100%),
      url('../../../images/hero-ferry-desktop-v4.webp');
    opacity: 0.24;
  }

  .page-home .booking-section > * {
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 767.98px) {
  .page-home .home-hero-wrap {
    --home-hero-stage-height: clamp(570px, 152vw, 650px);
  }

  .page-home .hero {
    padding: 5.25rem 0 1.25rem;
    align-items: flex-start;
    background-image: url('../../../images/hero-ferry-mobile-v2.webp');
    background-position: center 48%;
    background-size: cover;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 64px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 64px), transparent 100%);
  }

  .page-home .hero-overlay {
    background: linear-gradient(
      180deg,
      rgb(238 248 255 / 0.82) 0%,
      rgb(238 248 255 / 0.38) 28%,
      transparent 54%
    );
  }

  .page-home .hero-content {
    max-width: min(19rem, 86vw);
  }

  .page-home .hero-title {
    font-size: clamp(1.45rem, 7vw, 1.85rem);
  }

  .page-home .booking-section {
    margin-top: clamp(-270px, -65vw, -230px);
    padding-top: 0;
    background: transparent;
  }
}

@media (max-width: 575.98px) {
  .home-navbar .home-brand-text {
    max-width: calc(100vw - 150px);
  }

  .page-schedule .schedule-main,
  .page-news .news-main,
  .page-about .about-main,
  .page-contact .contact-main,
  .page-booking .bk-main {
    scroll-margin-top: 64px;
  }
}

.home-navbar-theme-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.08);
  color: inherit;
  cursor: pointer;
}

.home-navbar .nav-actions > .lang-dropdown > .lang-btn {
  box-sizing: border-box;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  justify-content: center;
  gap: 0;
  padding: 0;
  border-radius: 10px;
}

.home-navbar .nav-actions > .lang-dropdown > .lang-btn img {
  width: 22px;
  height: 15px;
}

.home-navbar .nav-actions > .lang-dropdown > .lang-btn span,
.home-navbar .nav-actions > .lang-dropdown > .lang-btn .lang-chevron {
  display: none;
}

.home-navbar-theme-btn iconify-icon {
  font-size: 1.2rem;
}

.home-navbar-theme-btn:hover,
.home-navbar-theme-btn:focus-visible {
  background: rgb(255 255 255 / 0.16);
  border-color: currentColor;
}

.home-navbar-light .home-navbar-theme-btn {
  border-color: #d7e0ea;
  background: #fff;
  color: #1a3a6b;
}

.dark .home-navbar-light .home-navbar-theme-btn {
  border-color: hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
}

/* Keep the transparent brand artwork inside the navbar instead of rendering at
   its source-image dimensions. */
.home-navbar .home-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 12rem;
  padding-block: 0;
}

.home-navbar .brand-logo-img--header {
  display: block;
  width: auto;
  max-width: 100%;
  height: 42px;
  object-fit: contain;
}

.dark .home-navbar .brand-logo-img--header {
  filter:
    brightness(1.45)
    saturate(1.12)
    drop-shadow(0 0 1px rgb(255 255 255 / 0.42))
    drop-shadow(0 2px 6px rgb(125 190 255 / 0.18));
}

.site-footer .brand-logo-img--footer,
.mob-footer .brand-logo-img--footer-mobile {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter:
    brightness(1.45)
    saturate(1.12)
    drop-shadow(0 0 1px rgb(255 255 255 / 0.45))
    drop-shadow(0 2px 7px rgb(125 190 255 / 0.2));
}

.site-footer .site-footer__logo {
  width: min(250px, 100%);
  padding: 0;
  background: transparent;
}

.site-footer .brand-logo-img--footer {
  width: 250px;
}

.mob-footer .mob-footer__logo {
  width: min(190px, 100%);
  padding: 0;
  background: transparent;
}

.mob-footer .brand-logo-img--footer-mobile {
  width: 190px;
}

/* Mobile footer: thumb-friendly stacked cards with clear content hierarchy. */
@media (max-width: 991.98px) {
  .mob-footer {
    width: 100%;
    max-width: none;
    margin: 0;
    padding:
      1.25rem
      1rem
      calc(var(--home-bottom-nav-height, 72px) + 1.25rem + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    background:
      radial-gradient(circle at 100% 0%, rgb(35 96 165 / 0.34), transparent 38%),
      linear-gradient(165deg, #061e4e 0%, #001638 58%, #00122e 100%);
    border-top: 3px solid #d72b3f;
  }

  .mob-footer__inner {
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
  }

  .mob-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
    padding: 0;
    border: 0;
  }

  .mob-footer__brand,
  .mob-footer__column,
  .mob-footer__contact {
    width: 100%;
    min-height: 0;
    padding: 1rem;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 16px;
    background: rgb(255 255 255 / 0.055);
    box-shadow: 0 12px 28px rgb(0 8 28 / 0.18);
  }

  .mob-footer__brand {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .mob-footer .mob-footer__logo {
    min-height: 40px;
    margin: 0 auto 0.5rem;
    justify-content: center;
  }

  .mob-footer .brand-logo-img--footer-mobile {
    width: min(174px, 100%);
  }

  .mob-footer__tagline {
    max-width: 21rem;
    margin: 0 auto 0.85rem;
    color: rgb(255 255 255 / 0.72);
    font-size: 0.75rem;
    line-height: 1.55;
  }

  .mob-footer__socials {
    width: 100%;
    justify-content: center;
    gap: 0.625rem;
  }

  .mob-footer__social {
    width: 44px;
    height: 44px;
    border: 1px solid rgb(255 255 255 / 0.16);
    box-shadow: 0 8px 18px rgb(0 7 24 / 0.22);
  }

  .mob-footer__heading {
    margin: 0 0 0.75rem;
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
  }

  .mob-footer__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .mob-footer__links li + li,
  .mob-footer__contact-list li + li {
    margin-top: 0;
  }

  .mob-footer__links a,
  .mob-footer__contact-link {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 11px;
    background: rgb(255 255 255 / 0.07);
    color: rgb(255 255 255 / 0.88);
    font-size: 0.72rem;
    line-height: 1.3;
  }

  .mob-footer__links a:active,
  .mob-footer__contact-link:active {
    background: rgb(255 255 255 / 0.14);
    transform: scale(0.985);
  }

  .mob-footer__contact {
    padding: 1rem;
  }

  .mob-footer__contact::before {
    content: none;
  }

  .mob-footer__contact-list {
    display: grid;
    gap: 0.5rem;
  }

  .mob-footer__contact-link {
    width: 100%;
    gap: 0.625rem;
    overflow-wrap: anywhere;
  }

  .mob-footer__contact-link iconify-icon {
    flex: 0 0 auto;
    color: #ff8592;
    font-size: 1rem;
  }

  .mob-footer__legal {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    text-align: center;
  }

  .mob-footer__copyright {
    font-size: 0.62rem;
    line-height: 1.5;
  }

  .mob-footer__legal-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .mob-footer__legal-links a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.07);
    font-size: 0.62rem;
  }

  .mob-footer__legal-sep {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .home-navbar .home-brand {
    max-width: 8rem;
    margin-right: 0;
  }

  .home-navbar .brand-logo-img--header {
    height: 28px;
  }
}

/* Mobile booking: keep every control legible and visually grouped in dark mode. */
@media (max-width: 768px) {
  .page-home .booking-section,
  .page-home .booking-glass-panel,
  .page-home .mob-bk-panel {
    position: relative;
    z-index: 3;
    isolation: isolate;
  }

  .page-home .mob-bk-card {
    overflow: hidden;
    border: 1px solid #e3e9f0;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgb(15 35 65 / 0.14);
  }

  .page-home .mob-bk-tab,
  .page-home .mob-bk-stop,
  .page-home .mob-bk-meta__cell {
    min-height: 56px;
  }

  .page-home .mob-bk-stop__main,
  .page-home .mob-bk-stop__swap {
    min-height: 44px;
  }

  .page-home .mob-bk-stop__swap {
    min-width: 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f2f5f8;
  }

  .page-home .mob-bk-meta__label {
    font-size: 0.6875rem;
    line-height: 1.3;
  }

  .page-home .mob-bk-meta__value {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .dark .page-home .mob-bk-card,
  .dark .page-home .mob-bk-tabs,
  .dark .page-home .mob-bk-stops-wrap,
  .dark .page-home .mob-bk-stop,
  .dark .page-home .mob-bk-meta,
  .dark .page-home .mob-bk-meta__cell,
  .dark .page-home .mob-bk-submit-wrap,
  .dark .page-home .mob-bk-add {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
  }

  .dark .page-home .mob-bk-card {
    color: hsl(var(--foreground));
    box-shadow: 0 16px 36px rgb(0 0 0 / 0.34);
  }

  .dark .page-home .mob-bk-tab {
    color: hsl(var(--muted-foreground));
  }

  .dark .page-home .mob-bk-tab.active {
    color: hsl(350 82% 72%);
    border-bottom-color: hsl(350 82% 68%);
  }

  .dark .page-home .mob-bk-tab:not(:last-child)::after {
    background: hsl(var(--border));
  }

  .dark .page-home .mob-bk-stop__name,
  .dark .page-home .mob-bk-meta__value,
  .dark .page-home .mob-bk-leg-date__value {
    color: hsl(var(--foreground));
  }

  .dark .page-home .mob-bk-stop__num {
    background: hsl(350 82% 62%);
    color: #fff;
  }

  .dark .page-home .mob-bk-stop__swap {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
  }

  .dark .page-home :is(.mob-bk-meta__label, .mob-bk-leg-date__label) {
    color: hsl(var(--muted-foreground));
  }

  .dark .page-home :is(.mob-bk-meta__icon, .mob-bk-leg-date__icon) {
    color: hsl(350 82% 72%);
  }

  .dark .page-home :is(.mob-bk-meta__value.is-placeholder, .mob-bk-leg-date__value.is-placeholder) {
    color: hsl(var(--muted-foreground));
  }

  .dark .page-home .mob-bk-meta__cell:active,
  .dark .page-home .mob-bk-stop__main:active,
  .dark .page-home .mob-bk-tab:active {
    background: hsl(var(--muted) / 0.72);
  }

  .dark .page-home .mob-bk-submit:disabled {
    background: hsl(var(--muted)) !important;
    color: hsl(var(--muted-foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
  }
}