:root {
  --tk-ink: #10202f;
  --tk-muted: #647286;
  --tk-line: #dbe4ee;
  --tk-page: #f3f7fb;
  --tk-panel: #ffffff;
  --tk-navy: #0c2f4a;
  --tk-teal: #087c83;
  --tk-mint: #def4ee;
  --tk-coral: #f06f4f;
  --tk-gold: #d9a441;
  --tk-shadow: 0 18px 50px rgba(20, 41, 68, 0.12);
  --tk-soft-shadow: 0 10px 28px rgba(20, 41, 68, 0.08);
  --tk-radius: 8px;
}

html {
  background: var(--tk-page) !important;
}

body {
  color: var(--tk-ink) !important;
  background:
    linear-gradient(180deg, #f8fbff 0, #eef5f9 420px, var(--tk-page) 100%) !important;
  letter-spacing: 0 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12, 47, 74, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(12, 47, 74, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, black, transparent 72%);
}

::selection {
  background: rgba(8, 124, 131, 0.18) !important;
}

a {
  color: inherit;
}

.container {
  max-width: 1240px !important;
}

.top-banner,
.charter-animation {
  background: var(--tk-navy) !important;
  color: #fff !important;
  border: 0 !important;
}

.top-banner__content,
.charter-animation-text {
  font-weight: 700 !important;
}

.header,
.mobile-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(16, 32, 47, 0.09) !important;
  box-shadow: 0 10px 36px rgba(16, 32, 47, 0.07) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
}

.header-left,
.header-right,
.mobile-header {
  gap: 12px !important;
}

.header-item,
.mobile-menu-link,
.footer-navbar-item {
  border-radius: 999px !important;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}

.header-item:hover,
.mobile-menu-link:hover,
.footer-navbar-item:hover {
  background: var(--tk-mint) !important;
  color: var(--tk-teal) !important;
  transform: translateY(-1px);
}

.header-left-logo img,
.header-left-logo svg {
  filter: saturate(1.05) contrast(1.05) !important;
}

.btn,
button,
.support-button {
  border-radius: var(--tk-radius) !important;
  letter-spacing: 0 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease !important;
}

.btn:hover,
button:hover,
.support-button:hover {
  transform: translateY(-1px);
}

.btn--blue,
.btn__search,
.btn--light-blue,
.react-tabs__tab--selected,
.support-button {
  background: var(--tk-teal) !important;
  border-color: var(--tk-teal) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(8, 124, 131, 0.22) !important;
}

.btn--border,
.btn.navigation,
.navigation {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid var(--tk-line) !important;
  color: var(--tk-ink) !important;
  box-shadow: var(--tk-soft-shadow) !important;
}

.search-list {
  padding-top: 22px !important;
}

.select-menu-search,
.filter-desktop,
.filter-desktop-menu,
.search_bar,
.search_bar-item,
.search_bar-date-dropdown,
.listing-header-for-dropdown,
.filter-ticket-container,
.tabs-content,
.boat-detail-top,
.boat-owner,
.detail-charter-options,
.detail-section,
.booking-card,
.reservation-detail-card,
.expert_banner {
  border-radius: var(--tk-radius) !important;
}

.filter-desktop,
.search_bar,
.filter-desktop-menu {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(16, 32, 47, 0.09) !important;
  box-shadow: var(--tk-shadow) !important;
  backdrop-filter: blur(14px) !important;
}

.search_bar-item,
.select-menu-search {
  background: #f8fbfd !important;
  border: 1px solid transparent !important;
}

.search_bar-item:hover,
.select-menu-search:hover {
  border-color: rgba(8, 124, 131, 0.28) !important;
}

.tabs-top,
.tabs-list,
.tabs-list-left {
  background: transparent !important;
}

.react-tabs__tab {
  min-height: 42px !important;
  padding: 10px 16px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid var(--tk-line) !important;
  border-radius: 999px !important;
  color: var(--tk-muted) !important;
  font-weight: 700 !important;
}

.react-tabs__tab svg {
  color: currentColor !important;
}

.react-tabs__tab:not(.react-tabs__tab--disabled):hover {
  border-color: rgba(8, 124, 131, 0.36) !important;
  color: var(--tk-teal) !important;
}

.react-tabs__tab--selected {
  color: #fff !important;
}

.react-tabs__tab--disabled {
  opacity: 0.44 !important;
}

.search-list-meta-title,
.top-title,
.boat-detail-top h1,
.detail-section-title {
  color: var(--tk-ink) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.search-list-result,
.boat_card__content_location,
.detail-section-desc,
.detail-charter-options-desc,
.boat-owner-top-left-info p {
  color: var(--tk-muted) !important;
}

.listing-header-for-dropdown {
  margin-top: 22px !important;
  margin-bottom: 18px !important;
  padding: 24px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(222,244,238,0.72)) !important;
  border: 1px solid rgba(8, 124, 131, 0.14) !important;
  box-shadow: var(--tk-soft-shadow) !important;
}

.boat_card {
  overflow: hidden !important;
  background: var(--tk-panel) !important;
  border: 1px solid rgba(16, 32, 47, 0.09) !important;
  border-radius: var(--tk-radius) !important;
  box-shadow: var(--tk-soft-shadow) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.boat_card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(8, 124, 131, 0.28) !important;
  box-shadow: var(--tk-shadow) !important;
}

.boat-card-image-wrapper,
.boat_card__image,
.boat_card__image img,
.boat-detail-swiper-item,
.boat-detail-swiper-item img {
  border-radius: var(--tk-radius) !important;
}

.boat_card__image img,
.boat-detail-swiper-item img {
  object-fit: cover !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

.boat_card__content {
  padding: 18px !important;
}

.boat_card__content_title {
  color: var(--tk-ink) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.price,
.current-prices,
.booking-card-prices,
.reservation-card-payment-detail-item-price,
.reservation-card-payment strong {
  color: var(--tk-coral) !important;
  font-weight: 900 !important;
}

.boat_card_captain,
.badge,
.filter-ticket-container > *,
.boat-owner-features,
.detail-section-features-item,
.detail-section-facilities-item {
  background: #f7fbfd !important;
  border: 1px solid rgba(16, 32, 47, 0.08) !important;
  border-radius: var(--tk-radius) !important;
}

.swiper-pagination-bullet-active {
  background: var(--tk-teal) !important;
}

.boat-detail {
  background: transparent !important;
}

.boat-detail-top {
  margin-top: 28px !important;
  padding: 28px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,255,255,0.72)) !important;
  border: 1px solid rgba(16, 32, 47, 0.08) !important;
  box-shadow: var(--tk-soft-shadow) !important;
}

.boat-detail-carousel {
  margin-top: 18px !important;
}

.boat-detail-swiper-item {
  overflow: hidden !important;
  border: 1px solid rgba(16, 32, 47, 0.08) !important;
  box-shadow: var(--tk-soft-shadow) !important;
}

.boat-detail-content {
  gap: 28px !important;
}

.boat-owner,
.detail-charter-options,
.detail-section,
.booking-card,
.reservation-detail-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(16, 32, 47, 0.09) !important;
  box-shadow: var(--tk-soft-shadow) !important;
}

.booking-card {
  top: 96px !important;
}

.booking-card-dates,
.booking-card select,
.booking-card input,
.reservation-detail-card input,
.reservation-detail-card select {
  background: #f7fbfd !important;
  border: 1px solid var(--tk-line) !important;
  border-radius: var(--tk-radius) !important;
}

.reservation-card-payment {
  background: linear-gradient(180deg, #fff, #f7fbfd) !important;
  border: 1px solid rgba(8, 124, 131, 0.14) !important;
  border-radius: var(--tk-radius) !important;
}

.expert_banner {
  background: linear-gradient(135deg, var(--tk-navy), #124d5c) !important;
  color: #fff !important;
  overflow: hidden !important;
}

.expert_banner * {
  color: inherit !important;
}

.support-list,
.support-menu,
.header-mobile-menu {
  border-radius: var(--tk-radius) !important;
  border: 1px solid rgba(16, 32, 47, 0.1) !important;
  box-shadow: var(--tk-shadow) !important;
}

.footer,
.footer-navbar {
  background: #0f2538 !important;
  color: #eef7f7 !important;
}

.footer-navbar {
  border-top: 1px solid rgba(255,255,255,0.12) !important;
}

@media (max-width: 768px) {
  .container {
    max-width: 100% !important;
  }

  .listing-header-for-dropdown,
  .boat-detail-top,
  .boat-owner,
  .detail-section,
  .booking-card,
  .reservation-detail-card {
    padding: 16px !important;
  }

  .react-tabs__tab {
    padding: 9px 13px !important;
    min-height: 38px !important;
  }

  .boat_card {
    margin-bottom: 16px !important;
  }

  .booking-card {
    top: auto !important;
  }
}