/* ThaiHub dark theme — loaded AFTER /css/style.css.
   Light theme preserves the existing design. The user-provided dark mockup
   is the visual reference for dark navy / bright cyan cards and header. */
:root {
  --th-accent: #01ffff;
  --th-dark-bg: #051727;
  --th-dark-elevated: #09263b;
  --th-dark-surface: #0a1f34;
  --th-dark-text: #f5fbff;
  --th-dark-muted: #b7cede;
  --th-dark-line: rgba(1, 255, 255, .38);
}

/* Header control — identical in both modes. */
.th-navbar-actions { gap: 10px !important; }
.th-theme-picker { position: relative; flex: 0 0 auto; z-index: 1070; }
.th-theme-trigger {
  display: inline-flex; justify-content: center; align-items: center; gap: 3px;
  min-width: 39px; height: 39px; padding: 0 6px;
  color: #eaffff; background: rgba(1, 255, 255, .09);
  border: 1px solid rgba(1, 255, 255, .46); border-radius: 50px;
  cursor: pointer; line-height: 1; transition: background .2s, border-color .2s;
}
.th-theme-trigger:hover, .th-theme-trigger[aria-expanded="true"] {
  background: rgba(1,255,255,.2); border-color: var(--th-accent);
}
.th-theme-trigger:focus-visible, .th-theme-menu button:focus-visible {
  outline: 2px solid var(--th-accent); outline-offset: 3px;
}
.th-theme-icon { height: 18px; width: 18px; flex: none; }
.th-theme-trigger-chevron { font-size: 10px; line-height: 1; }
.th-theme-icon-sun { display: none; }
html[data-th-theme="dark"] .th-theme-icon-sun { display: inline-block; }
html[data-th-theme="dark"] .th-theme-icon-moon { display: none; }
.th-theme-menu[hidden] { display: none !important; }
.th-theme-menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 1071;
  width: 194px; padding: 7px; color: #f5fbff;
  background: #082035; border: 1px solid rgba(1,255,255,.33);
  box-shadow: 0 12px 38px rgba(0,0,0,.45); border-radius: 14px;
  text-align: left; text-transform: none; backdrop-filter: blur(12px);
}
.th-theme-menu-title { padding: 8px 11px 6px; font-size: 11px; color: #a5c7d5; text-transform: uppercase; letter-spacing: .1em; }
.th-theme-menu button {
  all: unset; box-sizing: border-box; display: flex; align-items: center;
  gap: 9px; width: 100%; min-height: 39px; padding: 7px 10px;
  border-radius: 8px; font: 500 13px/1.3 'Century Gothic', Arial, sans-serif;
  color: #eaffff; cursor: pointer;
}
.th-theme-menu button:hover, .th-theme-menu button[aria-pressed="true"] {
  background: rgba(1,255,255,.12);
}
.th-theme-menu button[aria-pressed="true"] { color: var(--th-accent); }
.th-theme-menu button > span:first-child { width: 17px; text-align: center; font-size: 17px; }
.th-theme-check { margin-left: auto; opacity: 0; }
.th-theme-menu button[aria-pressed="true"] .th-theme-check { opacity: 1; }
@media (max-width: 767px) {
  .th-navbar-actions { display: flex !important; align-items: center; gap: 2px !important; }
  .th-theme-trigger { min-width: 34px; height: 34px; padding-inline: 5px; }
  .th-theme-menu { right: -5px; }
  .th-theme-icon { width: 17px; height: 17px; }
}
@media (max-width: 390px) {
  .th-theme-trigger-chevron { display: none; }
  .th-navbar-actions .guide { padding-inline: 5px !important; }
}

/* CSS tokens + Bootstrap 5 defaults for interactive components. */
html[data-th-theme="dark"] {
  color-scheme: dark;
  --thaihub-teal: var(--th-accent);
  --thaihub-teal-dark: #00bfc3;
  --thaihub-soft: #0a2d40;
  --thaihub-text: var(--th-dark-text);
  --thaihub-muted: var(--th-dark-muted);
  --thaihub-card: var(--th-dark-surface);
  --thaihub-border: rgba(1,255,255,.22);
  --bs-body-bg: var(--th-dark-bg);
  --bs-body-color: var(--th-dark-text);
  --bs-secondary-color: var(--th-dark-muted);
  --bs-border-color: #26465b;
  --bs-primary: #00dfe8;
  --bs-link-color: var(--th-accent);
  --bs-link-hover-color: #b6ffff;
}

/* Global background / typography */
html[data-th-theme="dark"],
html[data-th-theme="dark"] body {
  background: var(--th-dark-bg) !important;
  color: var(--th-dark-text);
}
html[data-th-theme="dark"] h1,
html[data-th-theme="dark"] h2,
html[data-th-theme="dark"] .h4,
html[data-th-theme="dark"] .display-title,
html[data-th-theme="dark"] .section-title,
html[data-th-theme="dark"] .hero-stat-title,
html[data-th-theme="dark"] .hero-stat-text,
html[data-th-theme="dark"] .info-list,
html[data-th-theme="dark"] .price,
html[data-th-theme="dark"] .blue-mobile {
  color: var(--th-dark-text);
}
html[data-th-theme="dark"] .section-lead,
html[data-th-theme="dark"] .services-head p,
html[data-th-theme="dark"] .text-muted,
html[data-th-theme="dark"] .text-secondary { color: var(--th-dark-muted) !important; }
html[data-th-theme="dark"] .blue { color: var(--th-accent); }
html[data-th-theme="dark"] a:not(.btn):not(.hero-card):not(.tour-card):not(.tour-category):hover { text-decoration-color: var(--th-accent); }

/* Keep the existing header composition from the mockup. */
html[data-th-theme="dark"] .navbar::before { background: rgba(4, 21, 37, .75); }
html[data-th-theme="dark"] .navbar { border-bottom: 1px solid rgba(1,255,255,.14); }
html[data-th-theme="dark"] .guide-dropdown,
html[data-th-theme="dark"] .services-dropdown,
html[data-th-theme="dark"] .mobile-menu,
html[data-th-theme="dark"] .mob-filter,
html[data-th-theme="dark"] .desk-filter {
  background-color: rgba(3,19,35,.75);
  border-top: 1px solid rgba(1, 255, 255, .14);
}
html[data-th-theme="dark"] .mega-menu-dropdown,
html[data-th-theme="dark"] .dropdown-menu:not(.th-theme-menu) {
border-color: #1c5068; color: var(--th-dark-text);
}
html[data-th-theme="dark"] .mega-column { border-color: #21435b; }
html[data-th-theme="dark"] .mega-item,
html[data-th-theme="dark"] .mega-panel a,
html[data-th-theme="dark"] .mega-panel-3 a { color: #e7f6fb; }
html[data-th-theme="dark"] .mega-item:hover,
html[data-th-theme="dark"] .mega-item.active,
html[data-th-theme="dark"] .mega-panel a:hover,
html[data-th-theme="dark"] .mega-panel-3 a:hover {
  background: #123e54; color: var(--th-accent);
}
html[data-th-theme="dark"] .guide-card { background: #123247; color: #f7fdff; border: 1px solid #235267; }
html[data-th-theme="dark"] .guide-card:hover { background: #173d54; }
html[data-th-theme="dark"] .guide-card small { color: #bdd3dc; }
html[data-th-theme="dark"] .guide-item:hover,
html[data-th-theme="dark"] .service-item:hover,
html[data-th-theme="dark"] .tour-category-menu:hover,
html[data-th-theme="dark"] .transport-category:hover { color: var(--th-accent); }

/* Hero: dark tropical image treatment; original image URLs remain untouched. */
html[data-th-theme="dark"] .hero-section {
  background-color: #041a30;
}
html[data-th-theme="dark"] .hero-section::after {
  background: linear-gradient(to bottom,
    rgba(0, 14, 31, 0) 0%, rgba(0, 16, 34, 0) 48%,
    rgba(0, 16, 34, .18) 61%, rgba(3, 20, 39, .72) 79%, #051727 100%);
}
html[data-th-theme="dark"] .hero-overlay {
  background: linear-gradient(to bottom, rgba(3,17,35,.12) 0%, rgba(3,17,35,.52) 58%, #051727 100%);
}
html[data-th-theme="dark"] .hero-directions a { color: var(--th-accent);}
html[data-th-theme="dark"] .cruise-section a,
html[data-th-theme="dark"] .cart-content { color: #fff;}
html[data-th-theme="dark"] .catalog-card div.bt { color: #000000;}
html[data-th-theme="dark"] .hero-directions a:hover { color: var(--th-accent); }
html[data-th-theme="dark"] .hero-stat-icon svg { stroke: var(--th-accent); }
html[data-th-theme="dark"] .hero-stat-icon img { filter: brightness(0) invert(1); }
html[data-th-theme="dark"] .hero-ask { color: var(--th-accent); background: #061c31; }
html[data-th-theme="dark"] .hero-ask:hover { background: #0c2d45; color: #fff; }

/* The photo cards are the main focal point of the supplied mockup. */
html[data-th-theme="dark"] .hero-card,
html[data-th-theme="dark"] .tour-category,
html[data-th-theme="dark"] .tour-card,
html[data-th-theme="dark"] .catalog-card,
html[data-th-theme="dark"] .location-card {
  border: 1px solid var(--th-dark-line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .23);
}
html[data-th-theme="dark"] .hero-card::before,
html[data-th-theme="dark"] .tour-category-overlay,
html[data-th-theme="dark"] .tour-card-overlay {
  background: linear-gradient(to bottom,
    rgba(3,17,33,0) 0%, rgba(3,19,35,.02) 27%,
    rgba(2,20,37,.70) 61%, rgba(2,21,40,.96) 92%, #041829 100%);
}
html[data-th-theme="dark"] .catalog-card::before {
  background: linear-gradient(to bottom,
    rgba(3,17,33,0) 0%, rgba(3,19,35,.08) 35%,
    rgba(3,20,38,.77) 72%, #041829 100%),
    var(--bg) center/cover no-repeat;
}
html[data-th-theme="dark"] .cart-content,
html[data-th-theme="dark"] .tour-category-content,
html[data-th-theme="dark"] .tour-card-content {
  color: #f7fcff;
  text-shadow: 0 1px 5px rgba(0,0,0,.3);
}
html[data-th-theme="dark"] .cart-content h3,
html[data-th-theme="dark"] .tour-category-content h3,
html[data-th-theme="dark"] .tour-card-content h3 {
  color: #fff;
}
html[data-th-theme="dark"] .cart-content p,
html[data-th-theme="dark"] .tour-category-content .preview-text,
html[data-th-theme="dark"] .tour-card-content .preview-text { color: #d3e4ee; }
html[data-th-theme="dark"] .hero-content .hero-booking-btn,
html[data-th-theme="dark"] .booking-btn,
html[data-th-theme="dark"] .tour-category-content span,
html[data-th-theme="dark"] .tour-card-content span,
html[data-th-theme="dark"] .cart-content span,
html[data-th-theme="dark"] .catalog-card .bt,
html[data-th-theme="dark"] .bt {
  color: #021a2b;
  border-color: var(--th-accent);
  text-shadow: none;
}
html[data-th-theme="dark"] .hero-content span{
  color: #fff;
}
html[data-th-theme="dark"] .tour-category-content span:hover,
html[data-th-theme="dark"] .tour-card-content span:hover,
html[data-th-theme="dark"] .cart-content span:hover,
html[data-th-theme="dark"] .hero-content .hero-booking-btn:hover,
html[data-th-theme="dark"] .booking-btn:hover {
  background: #a3ffff; color: #021a2b; border-color: #a3ffff;
}

/* Headings + badges follow the neon/cyan lines in the screenshot. */
html[data-th-theme="dark"] .eyebrow,
html[data-th-theme="dark"] .services-kicker { color: var(--th-accent); }
html[data-th-theme="dark"] .eyebrow::before,
html[data-th-theme="dark"] .eyebrow::after { background: rgba(1,255,255,.65); }
html[data-th-theme="dark"] .eyebrow span {
  background: #08253a; border: 1px solid rgba(1,255,255,.55);
  color: var(--th-accent);
}
html[data-th-theme="dark"] .line {
  background: linear-gradient(to right, transparent, rgb(255 255 255 / 80%), transparent);
}

/* Panels, filters, accordions, component cards and interactive controls. */
html[data-th-theme="dark"] .card,
html[data-th-theme="dark"] .modal-content,
html[data-th-theme="dark"] .offcanvas,
html[data-th-theme="dark"] .accordion-item,
html[data-th-theme="dark"] .tours-accordion .accordion-item,
html[data-th-theme="dark"] .booking-step,
html[data-th-theme="dark"] .product-item-container,
html[data-th-theme="dark"] .bx_filter,
html[data-th-theme="dark"] .list-group-item,
html[data-th-theme="dark"] .table {
  color: var(--th-dark-text);
  border-color: #244960;
  --bs-table-bg: var(--th-dark-surface);
  --bs-table-color: var(--th-dark-text);
  --bs-table-border-color: #244960;
}
html[data-th-theme="dark"] .booking-step {
	  background-color: var(--th-dark-surface);
}

html[data-th-theme="dark"] .accordion-button,
html[data-th-theme="dark"] .accordion-header button.accordion-button,
html[data-th-theme="dark"] .accordion-button:not(.collapsed) {
  color: #f5fcff !important;
  box-shadow: none;
}
html[data-th-theme="dark"] .accordion-body,
html[data-th-theme="dark"] .tours-accordion .accordion-body p,
html[data-th-theme="dark"] .prog,
html[data-th-theme="dark"] .prog .pprice,
html[data-th-theme="dark"] .pprice { color: #d5e6ee; }
html[data-th-theme="dark"] .pprice span { color: #a9c7d6; }
html[data-th-theme="dark"] .prog { border-color: #466276; }
html[data-th-theme="dark"] .form-control,
html[data-th-theme="dark"] .form-select,
html[data-th-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-th-theme="dark"] select,
html[data-th-theme="dark"] textarea {
  background-color: #0e2a3e;
  border-color: #3b6076;
  color: #f5fbff;
  --bs-form-control-bg: #0e2a3e;
}
html[data-th-theme="dark"] input::placeholder,
html[data-th-theme="dark"] textarea::placeholder { color: #bdced8; opacity: 1; }
html[data-th-theme="dark"] input:focus,
html[data-th-theme="dark"] textarea:focus,
html[data-th-theme="dark"] select:focus {
  border-color: var(--th-accent);
  box-shadow: 0 0 0 .18rem rgba(1,255,255,.14);
}
html[data-th-theme="dark"] .form-check-label,
html[data-th-theme="dark"] .checkbox-title,
html[data-th-theme="dark"] .x-filter-checkboxes label,
html[data-th-theme="dark"] .bx_filter_param_text,
html[data-th-theme="dark"] .bx_filter_select_text { color: #e1f0f8; }
html[data-th-theme="dark"] .btn-filter { color: var(--th-accent); }
html[data-th-theme="dark"] .btn-filter:hover { color: #fff; }
html[data-th-theme="dark"] .icon-guests { background-color: var(--th-accent); }
html[data-th-theme="dark"] .contact-links a { color: #d7effb; }
html[data-th-theme="dark"] .contacts-page a,
html[data-th-theme="dark"] .contacts-page .phone a { color: var(--th-accent); }
html[data-th-theme="dark"] .social-networks { background: #1d3d59; }
html[data-th-theme="dark"] .social-networks h2 { color: #f7fcff; }
html[data-th-theme="dark"] .social-networks__eyebrow { color: var(--th-accent); }
html[data-th-theme="dark"] .social-networks__item {
  color: #f5fcff; background: #102b41; border-color: rgba(1,255,255,.27);
}
html[data-th-theme="dark"] .social-networks__item:hover {
  color: var(--th-accent); background: #153a51; border-color: var(--th-accent);
}
html[data-th-theme="dark"] .service-icon-item { color: #f0faff; }
html[data-th-theme="dark"] .service-icon-item:hover span { color: var(--th-accent); }
html[data-th-theme="dark"] .footer-menu a { color: var(--th-accent); }
html[data-th-theme="dark"] .site-footer { background: #020e1a; border-top: 1px solid #17384d; }
html[data-th-theme="dark"] .booking-step__number { background: var(--th-accent); color: #021c2b; }
html[data-th-theme="dark"] .booking-steps__help a { color: var(--th-accent); }
html[data-th-theme="dark"] .modal-header,
html[data-th-theme="dark"] .modal-footer { border-color: #244960; }
html[data-th-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(160%); }
html[data-th-theme="dark"] ::-webkit-scrollbar-track { background: #061323; }
html[data-th-theme="dark"] ::-webkit-scrollbar-thumb { background: #156c7c; }
html[data-th-theme="dark"] ::selection { background: var(--th-accent); color: #052032; }
html[data-th-theme="dark"] .service-icon-item img,
html[data-th-theme="dark"] .mobile-flex img,
html[data-th-theme="dark"] .icon img
	{filter: brightness(0) invert(1);}
html[data-th-theme="dark"] .service-icon-item img:hover
	{filter: brightness(0) invert(1);}
html[data-th-theme="dark"] #galleryBtn {
	background-color: var(--th-accent); border: 0; color: #000; font-weight: bold;}
html[data-th-theme="dark"] .custom-checkbox img, span.icon img, .price-icon b::before, .boat img {
filter: none;}
html[data-th-theme="dark"] .take li::before,
html[data-th-theme="dark"] .booking li::before { color: #fff; }
html[data-th-theme="dark"] .line {
    border-image: linear-gradient(
        to right,
        transparent 0%,
        #fff 50%,
        transparent 100%
    ) 1;
}

/* Preserve accessible contrast while the reference has bright cyan accents. */
@media (prefers-reduced-motion: reduce) {
  .th-theme-trigger, .th-theme-menu button { transition: none; }
}