/* ========================================

   Sang Sutham Yacht Charter - Styles

   ======================================== */



/* Bell MT Bold substitute: Libre Baskerville (Google Fonts, OFL) */

@font-face {

  font-family: "BellMTBold";

  src: url("../fonts/BellMTBold.woff2") format("woff2");

  font-weight: 700;

  font-style: normal;

  font-display: swap;

}



/* Gotham Book substitute: Montserrat (Google Fonts, OFL) */

@font-face {

  font-family: "Gotham-Book";

  src: url("../fonts/Gotham-Book.woff2") format("woff2");

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}



:root {

  --navy: #262261;

  --charcoal: #2d2d2d;

  --gold: #efb43d;

  --white: #ffffff;

  --grey: #888888;

  --grey-light: #f5f5f5;

  --header-height: 80px;

  --container: 1200px;

  --transition: 0.3s ease;

  --font-heading: "BellMTBold", "Bell MT", Georgia, serif;

  --font-body: "Gotham-Book", "Gotham Book", Arial, sans-serif;

}



*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  scroll-behavior: smooth;

}



body {

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

  font-size: 14px;

  line-height: 1.7;

  color: var(--charcoal);

  background: var(--white);

  overflow-x: hidden;

}



h1,

h2,

h3,

h5,

h6,

.about-grid__heading,

.trips__heading,

.section-header__title,

.boat-card__name,

.boat-card__subtitle,

.footer__heading,

.contact-info__title,

.contact-info__label,

.booking__title,

.boat-detail__title,

.boat-detail__rates-title {

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

  font-weight: 700;

}



img {

  display: block;

  max-width: 100%;

  height: auto;

}



a {

  text-decoration: none;

  color: inherit;

  transition:

    opacity var(--transition),

    color var(--transition),

    background var(--transition);

}



ul {

  list-style: none;

}



.container {

  max-width: var(--container);

  margin: 0 auto;

  padding: 0 24px;

}



.container-fluid {

  max-width: 80%;

  margin: 0 auto;

  padding: 0 24px;

}



/* ---- Buttons ---- */

.btn {

  display: inline-block;

  padding: 12px 28px;

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

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 2px;

  text-transform: uppercase;

  border: 1px solid transparent;

  border-radius: 9999px;

  cursor: pointer;

  transition: all var(--transition);

}



.btn--sm {

  padding: 10px 22px;

  font-size: 10px;

}



.btn--outline-white {

  color: var(--white);

  border-color: var(--white);

  background: transparent;

}



.btn--outline-white:hover {

  background: var(--white);

  color: var(--navy);

}



.btn--dark {

  color: var(--white);

  background: var(--charcoal);

  border-color: var(--charcoal);

}



.btn--dark:hover {

  background: var(--navy);

  border-color: var(--navy);

}



.btn--gradient {

  color: var(--white);

  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);

  border: none;

  padding: 14px 40px;

  font-size: 12px;

  border-radius: 9999px;

}



.btn--gradient:hover {

  opacity: 0.85;

  transform: translateY(-1px);

}



.btn--lg {

  padding: 14px 48px;

  font-size: 12px;

  min-width: 200px;

  text-align: center;

}



/* ---- Header ---- */

.header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 1000;

  height: var(--header-height);

  background: rgba(34, 34, 34, 0.85);

  backdrop-filter: blur(8px);

  transition:

    background var(--transition),

    box-shadow var(--transition);

}



.header--scrolled {

  background: rgba(34, 34, 34, 0.97);

  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);

}



.header__inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  max-width: 100%;

  height: 100%;

  padding: 0 48px;

}



.header__left {

  display: flex;

  align-items: center;

  gap: 32px;

}



.header__actions {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-left: auto;

  flex-shrink: 0;

}



.header__logo {

  display: flex;

  align-items: center;

  position: relative;

  padding-right: 32px;

  flex-shrink: 0;

}



.header__logo::after {

  content: "";

  position: absolute;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  width: 1.5px;

  height: 45px;

  background: rgba(255, 255, 255, 0.25);

}



.header__logo-image {

  height: 75px;

  width: auto;

  max-width: 180px;

  object-fit: contain;

  object-position: left center;

  display: block;

}



.header__logo-icon {

  width: 32px;

  height: 32px;

}



.header__logo-text {

  font-size: 13px;

  font-weight: 600;

  letter-spacing: 3px;

}



.header__nav-list {

  display: flex;

  gap: 36px;

}



.header__nav-link {

  font-size: 14px;

  font-weight: 500;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.85);

}



.header__nav-link:hover {

  color: var(--white);

}



.header__nav-link.active {

  color: #e6c073;

}



.header__social {

  display: flex;

  gap: 5px;

}



.header__social-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  color: var(--white);

  opacity: 0.85;

  border-radius: 50%;

  transition:

    color var(--transition),

    opacity var(--transition),

    transform var(--transition),

    background var(--transition);

}



.header__social-link i {

  font-size: 22px;

}



.header__social-link:hover {

  opacity: 1;

  color: var(--gold);

  background: rgba(255, 255, 255, 0.1);

  transform: translateY(-2px);

}



.header__hamburger {

  display: none;

  flex-direction: column;

  gap: 5px;

  background: none;

  border: none;

  cursor: pointer;

  padding: 4px;

}



.header__hamburger span {

  display: block;

  width: 24px;

  height: 2px;

  background: var(--white);

  transition: all var(--transition);

}



.header__hamburger.active span:nth-child(1) {

  transform: rotate(45deg) translate(5px, 5px);

}



.header__hamburger.active span:nth-child(2) {

  opacity: 0;

}



.header__hamburger.active span:nth-child(3) {

  transform: rotate(-45deg) translate(5px, -5px);

}



/* ---- Hero ---- */

.hero {

  position: relative;

  z-index: 1;

  height: 100vh;

  /* min-height: 500px; */

  /* max-height: 900px; */

}



.hero__bg {

  position: absolute;

  inset: 0;

}



.hero__bg picture,

.hero__bg img {

  display: block;

  width: 100%;

  height: 100%;

}



.hero__bg img {

  object-fit: cover;

}



/* ---- About Grid 2x2 ---- */

.about-grid {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-rows: auto auto;

  overflow: visible;

}



.about-grid__backdrop {

  position: absolute;

  inset: 0;

  z-index: 0;

  background: url("../images/Home/Pong%20Sang_043.jpg") center / cover no-repeat;

}



.about-grid__backdrop::after {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(38, 34, 97, 0.72);

}



.about-grid__cell {

  position: relative;

  z-index: 1;

  min-height: 380px;

}



.about-grid__cell--navy {

  background: rgba(38, 34, 97, 0.75);

  color: var(--white);

}



.about-grid__cell--white {

  /* --card-overlap: -300px; */

  --text-padding-top: 14rem;

  --text-padding-x: 6rem;

  position: relative;

  /* margin-top: var(--card-overlap); */

  z-index: 3;

  background: #fff;

  color: var(--grey);

}





.about-grid__cell--white .about-grid__content {

  position: relative;

  z-index: 2;

  padding: 0;

}



.about-grid__cell--white .about-grid__content .about-grid__content-text {

  --card-overlap: -150px;

  padding: 5rem 6rem 0 6rem;

  margin-top: var(--card-overlap);

  z-index: 3;

}



@media (max-width: 768px) {



  .about-grid__cell--white .about-grid__content .about-grid__content-text {

    margin-top: 0;

    padding: 40px 24px;

  }

}



.about-grid__cell--white .about-grid__photo-wrap {

  position: relative;

  width: 100%;

  line-height: 0;

  background: linear-gradient(180deg,

      rgba(255, 255, 255, 0) 50%,

      rgba(255, 255, 255, 1) 100%);

}



.about-grid__cell--white .about-grid__photo-wrap::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 100%;

  /* backdrop-filter: blur(20px) saturate(1.1); */

  /* -webkit-backdrop-filter: blur(20px) saturate(1.1); */

  background: linear-gradient(180deg,

      rgba(255, 255, 255, 1) 5%,

      rgba(255, 255, 255, 0) 20%);

  /* -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); */

  /* mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); */

  pointer-events: none;

  z-index: 1;

}



.about-grid__cell--white .about-grid__photo {

  width: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

}



.about-grid__cell--image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  min-height: 380px;

}



.about-grid__content {

  padding: 5rem 6rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}



.about-grid__heading {

  font-size: 42px;

  font-weight: 600;

  line-height: 1.35;

  margin-bottom: 24px;

}



.about-grid__heading--navy {

  color: var(--navy);

}



.about-grid__content p {

  margin-bottom: 16px;

  font-size: 16px;

  line-height: 1.8;

}



.about-grid__content .btn {

  margin-top: 16px;

  align-self: flex-start;

}



/* ---- Trips ---- */

.trips {

  display: grid;

  grid-template-columns: 1fr 1fr;

}



.trips__image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  min-height: 420px;

}



.trips__content {

  background: var(--charcoal);

  color: var(--white);

  padding: 3rem 8rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.trips__heading {

  font-size: 42px;

  font-weight: 600;

  color: var(--gold);

  margin-bottom: 28px;

}



.trips__content p {

  font-size: 16px;

  line-height: 1.8;

  margin-bottom: 16px;

  opacity: 0.9;

}



.trips__content .btn {

  margin-top: 20px;

  align-self: flex-start;

}



/* ---- Section Header ---- */

.section-header {

  text-align: center;

  margin-bottom: 50px;

}



.section-header__title {

  font-size: 36px;

  font-weight: 500;

  color: var(--navy);

  margin-bottom: 16px;

}



.section-header__title--center {

  text-align: center;

}



.section-header__desc {

  max-width: 1000px;

  margin: 0 auto;

  color: var(--grey);

  font-size: 16px;

  line-height: 1.8;

  font-weight: 500;

}



/* ---- Our Boats ---- */

.boats {

  padding: 80px 0;

  background: var(--white);

}



.boats__grid {

  display: grid;

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

  gap: 30px;

}



.boat-card {

  background: var(--white);

  /* box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); */

  border: 1px solid #ececec;

  overflow: hidden;

  transition:

    transform var(--transition),

    box-shadow var(--transition);

}



.boat-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);

}



.boat-card__image {

  height: 220px;

  overflow: hidden;

}



.boat-card__image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

  padding: 1rem;

}



.boat-card:hover .boat-card__image img {

  /* transform: scale(1.05); */

}



.boat-card__body {

  padding: 24px;

}



.boat-card__subtitle {

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

  font-size: 12px;

  font-weight: 600;

  color: var(--gold);

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-bottom: 0;

}



.boat-card__name {

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

  font-size: 26px;

  font-weight: 800;

  color: #000;

  margin-bottom: 10px;

}



.boat-card__specs {

  margin-bottom: 20px;

}



.boat-card__specs li {

  font-size: 14px;

  color: var(--grey);

  line-height: 1.8;

}



.boat-card__footer {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 16px;

  padding-top: 16px;

  border-top: 1px solid #eee;

}



.boat-card__price-block {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.boat-card__price-label {

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

  font-size: 14px;

  font-weight: 500;

  color: var(--grey);

  margin-bottom: 0;

}



.btn-more-detail {

  margin-top: 0;

  font-size: 11px !important;

  padding: 8px 16px !important;

  font-weight: 600 !important;

}



.boat-card__price {

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

  font-size: 26px;

  font-weight: 800;

  color: #000;

  line-height: 1.2;

}



/* ---- Boats Listing Page ---- */

.page-boats .header {

  background: var(--charcoal);

}



.boats--listing {

  padding: 90px 0 90px;

}



.boat-card--listing .boat-card__name {

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin-bottom: 16px;

}



.boat-card__specs-grid {

  display: grid;

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

  gap: 8px 20px;

  margin-bottom: 24px;

}



.boat-card__specs-grid div {

  display: flex;

  gap: 6px;

  font-size: 13px;

  line-height: 1.6;

}



.boat-card__specs-grid dt {

  color: var(--grey);

  font-weight: 400;

}



.boat-card__specs-grid dt::after {

  content: ":";

}



.boat-card__specs-grid dd {

  color: var(--charcoal);

  font-weight: 500;

}



.boat-card--listing .boat-card__footer {

  align-items: center;

  border-top: 1px solid #ececec;

  padding-top: 20px;

}



.boat-card--listing .boat-card__price {

  font-size: 22px;

}



.boat-card__image-link {

  display: block;

  cursor: pointer;

}



.boat-card__image-link:hover+.boat-card__body .boat-card__name,

.boat-card--listing:hover .boat-card__name {

  color: var(--gold);

}



@media (max-width: 768px) {

  .boats--listing {

    padding: 50px 0 60px;

  }



  .boat-card__specs-grid {

    grid-template-columns: 1fr;

  }

}



/* ---- Boat Detail Page ---- */

.page-boat-detail .header,

.page-boats .header {

  background: var(--charcoal);

}



.boat-detail-hero {

  margin-top: var(--header-height);

  height: 480px;

  overflow: hidden;

}



.boat-detail-hero img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}



.boat-detail {

  padding: 60px 0 100px;

  background: var(--white);

}



.boat-detail__intro {

  text-align: center;

  margin: 40px 0 60px;

}



.boat-detail__title,

.boat-detail__rates-title {

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

  font-size: 36px;

  font-weight: 700;

  color: var(--navy);

  margin-bottom: 20px;

}



.boat-detail__desc {

  font-size: 16px;

  color: var(--grey);

  line-height: 1.8;

}



.boat-detail__main-image {

  /* max-width: 900px; */

  margin: 0 auto 60px;

}



.boat-detail__main-image img {

  width: 100%;

  height: auto;

  display: block;

}



.boat-detail__rates {

  text-align: center;

  max-width: 900px;

  margin: 0 auto 70px;

}



.rates-table-wrap {

  overflow-x: auto;

  margin-bottom: 16px;

}



.rates-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 15px;

  border: 1px solid #e5e5e5;

}



.rates-table th,

.rates-table td {

  padding: 18px 16px;

  border: 1px solid #e5e5e5;

  vertical-align: middle;

}



.rates-table thead th {

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

  font-weight: 600;

  font-size: 16px;

  line-height: 1.4;

  border: 1px solid #ddd;

}



.rates-table thead th span {

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

  font-size: 16px;

  font-weight: 400;

  opacity: 0.85;

}



.rates-table__season--green {

  color: #2e8b57;

  font-weight: 600 !important;

}



.rates-table__season--red {

  color: #c0392b;

  font-weight: 600 !important;

}



.rates-table__label {

  text-align: left;

  font-weight: 600;

  color: var(--charcoal);

}



.rates-table__label span {

  font-size: 12px;

  font-weight: 400;

  color: var(--grey);

}



.rates-table tbody td {

  color: var(--charcoal);

  font-size: 18px;

  font-weight: 600;

  text-align: center;

}



.rates-table tbody td:not(.rates-table__label) {

  text-align: center;

}



.boat-detail__rates-note {

  font-size: 14px;

  color: var(--grey);

  margin-bottom: 28px;

  line-height: 1.6;

}



.boat-detail__rates-cta {

  margin-top: 8px;

}



.boat-detail__gallery {

  display: grid;

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

  gap: 8px;

}



.boat-detail__gallery-item {

  aspect-ratio: 4 / 3;

  overflow: hidden;

  display: block;

}



.boat-detail__gallery-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:

    transform 0.4s ease,

    opacity var(--transition);

}



.boat-detail__gallery-item:hover img {

  transform: scale(1.06);

  opacity: 0.9;

}



/* ---- Charter Include ---- */

.charter-include {

  padding: 100px 0 100px;

  background: #f7f7f7;

}



.charter-include__title,

.boat-menu__title {

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

  font-size: 36px;

  font-weight: 700;

  color: var(--navy);

  text-align: center;

  margin-bottom: 48px;

}



.charter-include__rows {

  max-width: 1080px;

  margin: 0 auto;

}



.charter-include__row {

  display: grid;

  grid-auto-flow: column;

  grid-auto-columns: minmax(0, 1fr);

  width: 100%;

}



/* แถวที่มีรายการน้อยกว่าแถวอื่น — จัดกึ่งกลาง (ยังใช้ class เดิมได้) */

.charter-include__row--center {

  width: fit-content;

  max-width: 100%;

  margin: 0 auto;

}



.charter-include__item {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  padding: 24px 16px;

}



.charter-include__item::after {

  content: "";

  position: absolute;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  width: 2px;

  height: 30%;

  background: #ddd;

  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -o-transform: translateY(-50%);

}



.charter-include__item:last-child::after {

  display: none;

}



.charter-include__icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100px;

  height: 100px;

  color: #999;

  font-size: 50px;

}



.charter-include__icon img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.charter-include__label {

  font-size: 14px;

  line-height: 1.5;

  color: #666;

  max-width: 120px;

}



/* ---- Boat Menu ---- */

.boat-menu {

  padding: 70px 0 90px;

  background: #f5f0e8;

}



.boat-menu__desc {

  max-width: 720px;

  margin: -28px auto 48px;

  text-align: center;

  font-size: 16px;

  line-height: 1.75;

  color: #666;

}



.boat-menu__grid {

  display: grid;

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

  /* gap: 36px 80px; */

  max-width: 960px;

  margin: 0 auto;

}



.boat-menu__divider {

  grid-column: 1 / -1;

  height: 1px;

  background: var(--gold);

  margin: 4px 0;

}



.boat-menu__block {

  position: relative;

  display: flex;

  align-items: flex-start;

  gap: 1.5rem;

  padding: 0 0 2rem;

  margin: 2rem;

}



.boat-menu__block:nth-child(1)::after,

.boat-menu__block:nth-child(2)::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 1px;

  width: 80%;

  background: #c9a86b;

}



.boat-menu__icon {

  flex-shrink: 0;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  width: 100px;

  height: 100px;

  color: var(--gold);

  font-size: 26px;

  padding-top: 2px;

}



.boat-menu__icon img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.boat-menu__content {

  flex: 1;

  min-width: 0;

  padding-left: 0;

}



.boat-menu__name {

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

  font-size: 16px;

  font-weight: 800;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: #333;

  margin: 0;

}



.boat-menu__list {

  list-style: none;

  margin: 0;

  padding: 0;

}



.boat-menu__list li {

  font-size: 14px;

  line-height: 1.7;

  color: #555;

}



@media (max-width: 768px) {

  .container-fluid {

    max-width: 100%;

  }



  .boat-detail-hero {

    height: 280px;

  }



  .boat-detail__title,

  .boat-detail__rates-title {

    font-size: 28px;

  }



  .boat-detail__gallery {

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

  }



  .charter-include,

  .boat-menu {

    padding: 50px 0 60px;

  }



  .charter-include__title,

  .boat-menu__title {

    font-size: 28px;

    margin-bottom: 36px;

  }



  .charter-include__row,

  .charter-include__row--center {

    grid-auto-flow: row;

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

    width: 100%;

    max-width: none;

  }



  .charter-include__item {

    border-right: none;

    border-bottom: 1px solid #ddd;

    padding: 20px 12px;

  }



  .charter-include__item:nth-child(odd) {

    border-right: 1px solid #ddd;

  }



  .charter-include__row--center .charter-include__item:nth-child(odd) {

    border-right: none;

  }



  .charter-include__row--center .charter-include__item:nth-child(1),

  .charter-include__row--center .charter-include__item:nth-child(3) {

    border-right: 1px solid #ddd;

  }



  .charter-include__item::after {

    display: none;

  }



  .charter-include__icon {

    width: 72px;

    height: 72px;

  }



  .charter-include__label {

    max-width: none;

  }



  .boat-menu__block {

    margin: 1rem 0;

    gap: 1rem;

  }



  .boat-menu__icon {

    width: 72px;

    height: 72px;

  }



  .boat-menu__grid {

    grid-template-columns: 1fr;

    gap: 32px;

  }



  .boat-menu__desc {

    margin-top: -16px;

    margin-bottom: 36px;

    padding: 0 8px;

  }

}



@media (max-width: 480px) {

  .boat-detail__gallery {

    grid-template-columns: 1fr;

  }

}



/* ---- Divider ---- */

.divider {

  border: none;

  border-top: 1px solid #ececec;

  margin: 0;

}



/* ---- Instagram ---- */

.instagram {

  padding: 80px 0 60px;

  background: var(--white);

}



.instagram .section-header__title {

  margin-bottom: 40px;

}



.instagram__grid {

  display: grid;

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

  gap: 4px;

  max-width: 100%;

}



.instagram__item {

  /* aspect-ratio: 1; */

  /* overflow: hidden; */

  /* display: block; */

}



.instagram__item img {

  /* width: 100%; */

  /* height: 100%; */

  /* object-fit: cover; */

  /* transition:

    transform 0.4s ease,

    opacity var(--transition); */

}



.instagram__image_pc {

  display: block;

  padding: 0 2rem;

}



.instagram__image_mb {

  display: none;

}



@media (max-width: 768px) {

  .instagram__image_mb {

    display: block;

  }



  .instagram__image_pc {

    display: none;

  }

}



/* .instagram__item:hover img {

  transform: scale(1.08);

  opacity: 0.85;

} */



.instagram__cta {

  text-align: center;

  margin-top: 40px;

}



/* ---- Footer ---- */

.footer {

  position: relative;

  background: var(--navy);

  color: var(--white);

  overflow: hidden;

}



.footer__bg-texture {

  position: absolute;

  inset: 0;

  background: url("../images/Bg/footer-bg.jpg") center / cover no-repeat;

  pointer-events: none;

}



.footer__inner {

  position: relative;

  z-index: 1;

}



.footer__main {

  display: grid;

  grid-template-columns: 1.2fr 0.55fr 1.2fr 0.8fr auto;

  gap: 40px;

  padding: 70px 0 50px;

  align-items: start;

}



.footer__logo {

  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--white);

  margin-bottom: 16px;

}



@media (max-width: 768px) {

  .footer__logo {

    text-align: center;

    justify-content: center;

    margin-bottom: 0;

  }



  .footer__logo img {

    width: auto;

    max-width: 160px;

  }

}



.footer__logo-icon {

  width: 36px;

  height: 36px;

}



.footer__logo span {

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 3px;

}



.footer__tagline {

  font-size: 12px;

  opacity: 0.7;

  line-height: 1.6;

}



.footer__heading {

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

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 2px;

  margin-bottom: 8px;

  color: #e6c073;

}



.footer__links li {

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

  margin-bottom: 5px;

}



.footer__links a {

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

  font-size: 14px;

  opacity: 0.7;

}



.footer__links a:hover {

  opacity: 1;

  color: var(--gold);

}



.footer__contact li {

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

  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin-bottom: 5px;

  font-size: 14px;

  opacity: 0.7;

}



.footer__contact svg {

  width: 16px;

  height: 16px;

  flex-shrink: 0;

  margin-top: 2px;

}



.footer__social {

  display: flex;

  gap: 20px;

  margin-top: 20px;

}



.footer__social a,

.footer__social-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  /* width: 38px; */

  /* height: 38px; */

  color: var(--white);

  opacity: 0.7;

  border-radius: 50%;

  transition:

    color var(--transition),

    opacity var(--transition),

    transform var(--transition),

    background var(--transition);

}



.footer__social a i,

.footer__social-link i {

  font-size: 24px;

}



.footer__social a:hover,

.footer__social-link:hover {

  opacity: 1;

  color: var(--gold);

  background: rgba(255, 255, 255, 0.1);

  transform: translateY(-2px);

}



.footer__yacht {

  width: 140px;

  align-self: center;

}



.footer__yacht img {

  width: 100%;

  height: auto;

  object-fit: contain;

  filter: brightness(1.1);

}



.footer__bottom {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px 0 50px 0;

  border-top: 2px solid rgba(255, 255, 255, 0.8);

  font-size: 14px;

  opacity: 0.6;

}



.footer__bottom p {

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

}



.footer__bottom a:hover {

  opacity: 1;

  color: var(--gold);

}



.footer__powered-by {

  margin: 0;

}



.footer__powered-by-brand {

  color: #e6c073;

  font-weight: 600;

}



/* ========================================

   Responsive

   ======================================== */



@media (max-width: 1024px) {

  .container-fluid {

    max-width: 90%;

  }



  .boats__grid {

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

  }



  .boats__grid .boat-card:last-child:nth-child(odd) {

    grid-column: 1 / -1;

    max-width: 420px;

    width: 100%;

    justify-self: center;

  }



  .footer__main {

    grid-template-columns: 1fr 1fr;

    gap: 40px 30px;

  }



  .footer__yacht {

    display: none;

  }



  .about-grid__content {

    padding: 40px 36px;

  }



  .about-grid__cell--white {

    --card-overlap: -160px;

    --text-padding-top: 8rem;

    --text-padding-x: 3rem;

  }



  .about-grid__cell--white .about-grid__photo-wrap {

    max-height: 320px;

    overflow: hidden;

  }



  .about-grid__cell--white .about-grid__photo {

    width: 100%;

    height: 280px;

    min-height: 0;

    max-height: none;

    object-fit: cover;

  }



  .trips__content {

    padding: 60px 40px;

  }

}



@media (max-width: 768px) {

  :root {

    --header-height: 70px;

  }



  .header__inner {

    padding: 0 24px;

  }



  .header__left {

    gap: 0;

  }



  .header__logo {

    padding-right: 20px;

  }



  .header__logo-image {

    height: 58px;

    max-width: 120px;

  }



  .header__nav {

    position: fixed;

    top: var(--header-height);

    left: 0;

    right: 0;

    background: rgba(34, 34, 34, 0.98);

    padding: 24px;

    transform: translateY(-120%);

    opacity: 0;

    visibility: hidden;

    transition: all var(--transition);

  }



  .header__nav.open {

    transform: translateY(0);

    opacity: 1;

    visibility: visible;

  }



  .header__nav-list {

    flex-direction: column;

    gap: 20px;

    align-items: center;

  }



  .header__nav-link {

    font-size: 13px;

  }



  .header__social {

    display: none;

  }



  .header__hamburger {

    display: flex;

  }



  .header__actions {

    gap: 10px;

  }



  .header__book-btn {

    display: inline-block;

    padding: 8px 14px;

    font-size: 9px;

    letter-spacing: 1px;

    white-space: nowrap;

  }



  .hero {

    height: 60vh;

    min-height: 400px;

    max-height: 600px;

  }



  .about-grid {

    grid-template-columns: 1fr;

  }



  .about-grid__cell {

    min-height: auto;

  }



  .about-grid__cell--white {

    --card-overlap: -24px;

    --text-padding-top: 4.5rem;

    --text-padding-x: 1.5rem;

    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1);

    order: -1;

  }



  .about-grid__cell--navy {

    order: 1;

  }



  .about-grid__cell--white .about-grid__photo-wrap {

    max-height: 260px;

    overflow: hidden;

  }



  .about-grid__cell--white .about-grid__photo {

    height: 240px;

  }



  .about-grid__cell--image img {

    min-height: 280px;

  }



  .about-grid__content {

    padding: 40px 24px;

  }



  .about-grid__heading {

    font-size: 24px;

  }



  .trips {

    grid-template-columns: 1fr;

  }



  .trips__image img {

    min-height: 280px;

  }



  .trips__content {

    padding: 50px 24px;

  }



  .trips__heading {

    font-size: 32px;

  }



  .boats {

    padding: 60px 0;

  }



  .boats__grid {

    grid-template-columns: 1fr;

    max-width: 420px;

    margin: 0 auto;

  }



  .section-header__title {

    font-size: 28px;

  }



  .instagram {

    padding: 60px 0 40px;

  }



  .instagram__grid {

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

  }



  .footer__main {

    grid-template-columns: 1fr;

    gap: 36px;

    padding: 50px 0 30px;

    /* text-align: center; */

  }



  .footer__col {

    /* text-align: center; */

  }



  .footer__social {

    /* justify-content: center; */

  }



  .footer__social a i,

  .footer__social-link i {

    font-size: 32px;

  }



  .footer__bottom {

    flex-direction: column;

    gap: 8px;

    /* text-align: center; */

  }



  .footer__bottom p {

    text-align: center;

  }

}



@media (max-width: 480px) {

  .about-grid__cell--white {

    --card-overlap: 0;

    --text-padding-top: 3.25rem;

    --text-padding-x: 1.25rem;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

  }



  .header__logo-image {

    height: 52px;

    max-width: 120px;

  }



  .boat-card__footer {

    flex-direction: column;

    align-items: stretch;

    gap: 12px;

  }



  .boat-card__footer .btn {

    align-self: flex-start;

  }



  .section-header__desc br,

  .contact-info__desc br {

    display: none;

  }



  .rates-table th,

  .rates-table td {

    padding: 12px 10px;

    font-size: 13px;

  }



  .rates-table thead th {

    font-size: 13px;

  }





  .charter-include__icon,

  .boat-menu__icon {

    width: 60px;

    height: 60px;

  }



  .about-grid__cell--white .about-grid__photo-wrap {

    max-height: 220px;

  }



  .about-grid__cell--white .about-grid__photo {

    height: 200px;

  }



  .about-grid__heading {

    font-size: 22px;

  }



  .about-grid__heading br {

    display: none;

  }



  .trips__heading {

    font-size: 28px;

  }



  .instagram__grid {

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

    gap: 2px;

  }



  .btn {

    padding: 10px 22px;

    font-size: 10px;

  }

}



/* ========================================

   Contact Page

   ======================================== */



.page-contact .header {

  background: var(--charcoal);

}



.page-trips .header {

  background: var(--charcoal);

}



.trips-hero {

  height: 480px;

}



.trips-hero picture,

.trips-hero img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}



/* ---- Trips Page ---- */

.trips-page {

  padding: 90px 0 90px;

  background: var(--white);

}



.trips-intro {

  text-align: center;

  max-width: 820px;

  margin: 0 auto 64px;

}



.trips-intro__title {

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

  font-size: 42px;

  font-weight: 700;

  color: var(--navy);

  margin-bottom: 24px;

}



.trips-intro__desc {

  font-size: 16px;

  line-height: 1.85;

  color: var(--grey);

  margin-bottom: 32px;

}



.trips-toggle {

  display: inline-flex;

  gap: 12px;

  flex-wrap: wrap;

  justify-content: center;

}



.trips-toggle__btn {

  border: none;

  border-radius: 999px;

  padding: 12px 28px;

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

  font-size: 13px;

  font-weight: 600;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  cursor: pointer;

  transition:

    background var(--transition),

    color var(--transition),

    opacity var(--transition);

  background: #d9d9d9;

  color: #666;

}



.trips-toggle__btn.is-active {

  background: var(--charcoal);

  color: var(--white);

}



.trips-toggle__btn:hover:not(.is-active) {

  opacity: 0.85;

}



.trips-panels {

  display: grid;

}



.trips-panel {

  grid-area: 1 / 1;

  display: none;

}



.trips-panel.is-active {

  display: block;

}



.trips-route {

  margin-bottom: 72px;

}



.trips-route:last-child {

  margin-bottom: 0;

}



.trips-route__meta {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 28px;

  border-bottom: 1px solid #e5e5e5;

  padding-bottom: 10px;

}



.trips-route__info {

  flex: 1;

  min-width: 0;

}



.trips-route__badge {

  display: block;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: 10px;

}



.trips-route__duration {
  flex-shrink: 0;
  font-size: 13px;
  color: #000;
  white-space: nowrap;
  border: 1px solid #333;
  padding: 5px 20px;
}

.trips-route__itinerary {
  flex-shrink: 0;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  background: #333;
  padding: 5px 20px;
}


.trips-route__itinerary:hover {
  flex-shrink: 0;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  background: #6f6f6f;
  padding: 5px 20px;
}




.trips-route__title {

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

  font-size: 2rem;

  font-weight: 800;

  letter-spacing: 0.02em;

  color: #111;

  margin-bottom: 0;

  line-height: 1.1;

}



.trips-route__grid {

  display: grid;

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

  gap: 16px;

  width: 100%;

}



/* รองรับ class เดิม — ไม่ต้องกำหนดจำนวนคอลัมน์เอง */

.trips-route__grid--short {

  width: fit-content;

  max-width: 100%;

  margin: 0 auto;

}



.trips-route__split {

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.trips-route__plus {

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 36px;

  font-weight: 300;

  color: #000;

  line-height: 1;

  padding: 4px 0;

}



.trips-spot {

  position: relative;

  display: block;

  margin: 0;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  text-decoration: none;

  color: inherit;

  cursor: pointer;

}



.trips-spot img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.45s ease;

}



.trips-spot__label {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 12px;

  text-align: center;

  font-size: 22px;

  font-weight: 400;

  color: var(--white);

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

  transition:

    opacity var(--transition),

    background var(--transition);

}



.trips-spot:hover img {

  transform: scale(1.05);

}



.trips-spot:hover .trips-spot__label {

  opacity: 0;

}



.trips-route__note {

  margin-top: 18px;

  font-size: 13px;

  color: #666;

}



.contact-hero {

  margin-top: var(--header-height);

  height: 420px;

  overflow: hidden;

}



.contact-hero img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}



.contact-info {

  padding: 80px 0 80px;

  background: var(--white);

}



.contact-info__header {

  text-align: center;

  /* max-width: 720px; */

  margin: 0 auto 56px;

}



.contact-info__title {

  font-size: 36px;

  color: var(--navy);

  margin-bottom: 20px;

}



.contact-info__desc {

  font-size: 16px;

  color: var(--grey);

  line-height: 1.8;

}



.contact-info__grid {

  display: grid;

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

  gap: 0;

  /* max-width: 960px; */

  margin: 0 auto;

}



.contact-info__item {

  text-align: center;

  padding: 0 32px;

  border-right: 1px solid #e5e5e5;

}



.contact-info__item:last-child {

  border-right: none;

}



.contact-info__icon {

  font-size: 36px;

  color: var(--charcoal);

  margin-bottom: 16px;

}



.contact-info__label {

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

  font-size: 16px;

  color: var(--grey);

  margin-bottom: 12px;

  font-weight: 500;

}



.contact-info__value {

  font-size: 14px;

  color: var(--grey);

  line-height: 1.8;

  font-weight: 600;

}



.contact-info__value a:hover {

  color: var(--gold);

}



.contact-info__social {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 16px;

  margin-top: 48px;

}



.contact-info__social .contact-info__label {

  margin-bottom: 0;

}



.contact-info__social-icons {

  display: flex;

  justify-content: center;

  gap: 28px;

}



.contact-info__social-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 34px;

  color: var(--charcoal);

  border-radius: 50%;

  transition:

    color var(--transition),

    transform var(--transition),

    background var(--transition);

}



.contact-info__social-link:hover {

  color: var(--gold);

  transform: translateY(-2px);

}



/* ---- Booking Form ---- */

.booking {

  position: relative;

  padding: 80px 0 100px;

  overflow: hidden;

}



.booking__bg {

  position: absolute;

  inset: 0;

  z-index: 0;

}



.booking__bg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.booking__bg::after {

  content: "";

  position: absolute;

  inset: 0;

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

}



.booking .container {

  position: relative;

  z-index: 1;

}



.booking__card {

  max-width: 820px;

  margin: 0 auto;

  background: rgba(255, 255, 255, 0.9);

  padding: 48px 100px 56px;

  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);

}



.booking__title {

  font-size: 32px;

  color: var(--navy);

  text-align: center;

  margin: 32px 0 42px 0;

}



.booking-form__toggle {

  display: flex;

  gap: 0;

  margin: 0 auto 28px;

  border-radius: 9999px;

  overflow: hidden;

  border: 1px solid #ddd;

  max-width: 360px;

}



.booking-form__toggle-btn {

  flex: 1;

  padding: 12px 20px;

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

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  border: none;

  background: #f0f0f0;

  color: var(--grey);

  cursor: pointer;

  transition:

    background var(--transition),

    color var(--transition);

}



.booking-form__toggle-btn.active {

  background: var(--charcoal);

  color: var(--white);

}



.booking-form__grid {

  display: grid;

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

  gap: 20px 24px;

  margin-bottom: 24px;

}



.booking-form__grid--2 {

  margin-bottom: 0;

}



.booking-form__field {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.booking-form__field--people {

  width: 30%;

  max-width: 30%;

}



.booking-form__field label {

  font-size: 13px;

  color: var(--charcoal);

}



.booking-form__field input[type="text"],

.booking-form__field input[type="email"],

.booking-form__field input[type="tel"],

.booking-form__field input[type="date"],

.booking-form__field select {

  width: 100%;

  height: 44px;

  padding: 0 24px;

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

  font-size: 13px;

  color: var(--charcoal);

  background: var(--white);

  border: 1px solid #333;

  border-radius: 9999px;

  outline: none;

  appearance: none;

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

}



.booking-form__field input[type="number"] {

  border-left: none !important;

  border-right: none !important;

}



.booking-form__field input:focus,

.booking-form__field select:focus {

  border-color: var(--navy);

}



.booking-form__field input::placeholder {

  color: #aaa;

}



.booking-form__select-wrap {

  position: relative;

}



.booking-form__select-wrap i {

  position: absolute;

  right: 16px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 11px;

  color: var(--grey);

  pointer-events: none;

}



.booking-form__select-wrap select,

.booking-form__select-wrap input[type="date"] {

  padding-right: 40px;

}



.booking-form__select-wrap input[type="date"]::-webkit-calendar-picker-indicator {

  opacity: 0;

  position: absolute;

  right: 0;

  width: 100%;

  height: 100%;

  cursor: pointer;

}



.booking-form__counter {

  display: flex;

  align-items: stretch;

  width: 100%;

  height: 44px;

  border: 1px solid #333;

  border-radius: 9999px;

  overflow: hidden;

  background: var(--white);

}



.booking-form__counter-btn {

  width: 44px;

  min-width: 44px;

  flex-shrink: 0;

  border: none;

  background: var(--white);

  font-size: 18px;

  line-height: 1;

  color: var(--charcoal);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  transition: background var(--transition);

}



.booking-form__counter-btn.left {

  border-right: 1px solid #333;

}



.booking-form__counter-btn.right {

  border-left: 1px solid #333;

}



.booking-form__counter-btn:hover {

  background: #f5f5f5;

}



.booking-form__counter input {

  flex: 1;

  min-width: 0;

  width: auto;

  height: 100%;

  padding: 0;

  text-align: center;

  border: none;

  border-radius: 0;

  background: var(--white);

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

  font-size: 13px;

  color: var(--charcoal);

  outline: none;

  appearance: textfield;

  -moz-appearance: textfield;

}



.booking-form__counter input::-webkit-outer-spin-button,

.booking-form__counter input::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0;

}



.booking-form__phone {

  display: flex;

  gap: 10px;

}



.country-code {

  position: relative;

  flex: 0 0 130px;

}



.country-code__trigger {

  display: flex;

  align-items: center;

  gap: 8px;

  width: 100%;

  height: 44px;

  padding: 0 14px;

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

  font-size: 13px;

  color: var(--charcoal);

  background: var(--white);

  border: 1px solid #333;

  border-radius: 9999px;

  cursor: pointer;

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

}



.country-code__trigger:hover,

.country-code.is-open .country-code__trigger {

  border-color: var(--navy);

}



.country-code__flag {

  display: block;

  width: 22px;

  height: 16px;

  object-fit: cover;

  border-radius: 2px;

  flex-shrink: 0;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);

}



.country-code__value {

  flex: 1;

  text-align: left;

}



.country-code__trigger i {

  font-size: 10px;

  color: var(--grey);

}



.country-code__list {

  position: absolute;

  top: calc(100% + 6px);

  left: 0;

  right: 0;

  z-index: 20;

  list-style: none;

  margin: 0;

  padding: 6px 0;

  background: var(--white);

  border: 1px solid #ddd;

  border-radius: 12px;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

  opacity: 0;

  visibility: hidden;

  transform: translateY(-6px);

  transition:

    opacity var(--transition),

    transform var(--transition),

    visibility var(--transition);

}



.country-code.is-open .country-code__list {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.country-code__option {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 14px;

  font-size: 13px;

  color: var(--charcoal);

  cursor: pointer;

  transition: background var(--transition);

}



.country-code__option:hover,

.country-code__option.is-active {

  background: #f5f5f5;

}



.country-code__option img {

  width: 22px;

  height: 16px;

  object-fit: cover;

  border-radius: 2px;

  flex-shrink: 0;

}



.boat-picker {

  position: relative;

  width: 100%;

}



.boat-picker__trigger {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  width: 100%;

  height: 44px;

  padding: 0 18px 0 24px;

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

  font-size: 13px;

  color: var(--charcoal);

  background: var(--white);

  border: 1px solid #333;

  border-radius: 9999px;

  cursor: pointer;

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

}



.boat-picker__trigger:hover,

.boat-picker.is-open .boat-picker__trigger,

.boat-picker__trigger:focus {

  border-color: var(--navy);

  outline: none;

}



.boat-picker.is-invalid .boat-picker__trigger {

  border-color: #dc2626;

}



.boat-picker__selected {

  flex: 1;

  min-width: 0;

  text-align: left;

}



.boat-picker__placeholder {

  color: #aaa;

}



.boat-picker__label {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.boat-picker__trigger i {

  font-size: 11px;

  color: var(--grey);

  flex-shrink: 0;

}



.boat-picker__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--white);
  border: 1px solid #333;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);

  max-height: 300px;   /* ความสูงสูงสุด */
  overflow-y: auto;    /* แสดง scrollbar เมื่อข้อมูลเกิน */
}



.boat-picker__panel-title {

  padding: 14px 16px 10px;

  font-size: 14px;

  font-weight: 700;

  color: #555;

  border-bottom: 1px solid #e5e5e5;

}



.boat-picker__list {

  list-style: none;

  margin: 0;

  padding: 0;

}



.boat-picker__option {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 12px 16px;

  cursor: pointer;

  transition: background var(--transition), color var(--transition);

}



.boat-picker__option+.boat-picker__option {

  border-top: 1px solid #ececec;

}



.boat-picker__option img {

  width: 120px;

  height: 80px;

  object-fit: cover;

  flex-shrink: 0;

  display: block;

  background: #f3f3f3;

}



.boat-picker__option span {

  font-size: 14px;

  color: #666;

  line-height: 1.35;

}



.boat-picker__option:hover,

.boat-picker__option.is-active {

  background: #2b6cb0;

}



.boat-picker__option:hover span,

.boat-picker__option.is-active span {

  color: var(--white);

}



.booking-form__phone--split {

  width: 100%;

}



.booking-form__phone--split>.iti {

  display: grid !important;

  grid-template-columns: 130px 1fr;

  column-gap: 10px;

  width: 100%;

  align-items: stretch;

}



.booking-form__phone--split>.iti .iti__flag-container {

  grid-column: 1;

  grid-row: 1;

  position: relative;

  width: 100%;

  height: 44px;

  border: 1px solid #333;

  border-radius: 9999px;

  background: var(--white);

  box-sizing: border-box;

  overflow: visible;

}



.booking-form__phone--split>.iti .iti__selected-flag,

.booking-form__phone--split>.iti .iti__selected-country {

  position: relative;

  display: flex;

  align-items: center;

  width: 100%;

  height: 100%;

  padding: 0 24px 0 10px;

  border-radius: 9999px;

  box-sizing: border-box;

  background: transparent;

}



.booking-form__phone--split>.iti .iti__flag {

  margin-top: 0;

}



.booking-form__phone--split>.iti .iti__arrow {

  position: absolute;

  right: 14px;

  top: 50%;

  margin-top: 0;

  transform: translateY(-50%);

  border-top-color: #333;

}



.booking-form__phone--split>.iti .iti__selected-dial-code {

  grid-column: 1;

  grid-row: 1;

  align-self: center;

  justify-self: start;

  margin-left: 34px;

  z-index: 1;

  height: auto;

  padding: 0;

  border: 0;

  background: transparent;

  font-size: 13px;

  line-height: 1;

  color: var(--charcoal);

  pointer-events: none;

}



.booking-form__phone--split>.iti input[type="tel"] {

  grid-column: 2;

  grid-row: 1;

  width: 100% !important;

  height: 44px !important;

  padding: 0 24px !important;

  margin: 0 !important;

  border: 1px solid #333 !important;

  border-radius: 9999px !important;

  background: var(--white) !important;

  font-size: 13px;

  color: var(--charcoal);

  box-sizing: border-box;

  outline: none;

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

}



.booking-form__phone--split>.iti input[type="tel"]:focus {

  border-color: var(--navy) !important;

}



.booking-form__phone--split>.iti .iti__flag-container:hover,

.booking-form__phone--split>.iti .iti__flag-container.open {

  border-color: var(--navy);

}



.booking-form__phone--split .iti__country-list {

  z-index: 9999;

  min-width: 280px;

  border: 1px solid #333;

  border-radius: 12px;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);

}



.booking-form__phone-error {

  margin: 6px 0 0;

  font-size: 12px;

  color: #dc2626;

}



.booking-form__select-wrap--code {

  flex: 0 0 110px;

}



.booking-form__phone input {

  flex: 1;

}



.booking-form__section-title {

  display: flex;

  align-items: center;

  gap: 1.25rem;

  margin: 2rem 0 1.5rem;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 0.09em;

  color: var(--grey);

  text-align: center;

}



.booking-form__section-title::before,

.booking-form__section-title::after {

  content: "";

  flex: 1;

  height: 1px;

  background: #ddd;

}



.booking-form__section {

  margin-top: 8px;

  border-top: none;

}



.booking-form__recaptcha {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  margin-top: 28px;

  text-align: center;

}



.booking-form__recaptcha-hint {

  margin: 0 auto;

  padding: 12px 16px;

  font-size: 13px;

  line-height: 1.6;

  color: #856404;

  background: #fff8e6;

  border: 1px solid #f0e0b2;

  border-radius: 8px;

  max-width: 420px;

  text-align: center;

}



.booking-form__recaptcha-hint code {

  font-size: 12px;

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

  padding: 2px 6px;

  border-radius: 4px;

}



.booking-form__recaptcha-hint[hidden] {

  display: none;

}



#recaptchaWidget {

  min-height: 78px;

}



#recaptchaWidget:empty {

  display: none;

}



.booking-form__submit {

  text-align: center;

  margin-top: 36px;

}



@media (max-width: 768px) {

  .contact-hero {

    height: 260px;

  }



  .contact-info {

    padding: 50px 0 40px;

  }



  .contact-info__title {

    font-size: 28px;

  }



  .contact-info__desc br {

    display: none;

  }



  .contact-info__grid {

    grid-template-columns: 1fr;

    gap: 32px;

  }



  .contact-info__item {

    border-right: none;

    border-bottom: 1px solid #e5e5e5;

    padding: 0 0 32px;

  }



  .contact-info__item:last-child {

    border-bottom: none;

    padding-bottom: 0;

  }



  .booking {

    padding: 50px 0 70px;

  }



  .booking__card {

    padding: 32px 24px 40px;

  }



  .booking__title {

    font-size: 26px;

  }



  .booking-form__grid,

  .booking-form__grid--2 {

    grid-template-columns: 1fr;

  }



  .booking-form__toggle {

    max-width: 100%;

  }



  .booking-form__field--people {

    width: 100%;

    max-width: 100%;

  }



  .booking-form__phone--split>.iti {

    grid-template-columns: 1fr;

    grid-template-rows: auto auto;

    column-gap: 0;

    row-gap: 10px;

  }



  .booking-form__phone--split>.iti .iti__flag-container {

    grid-column: 1;

    grid-row: 1;

    width: 100%;

  }



  .booking-form__phone--split>.iti .iti__selected-dial-code {

    grid-column: 1;

    grid-row: 1;

    margin-left: 34px;

  }



  .booking-form__phone--split>.iti input[type="tel"] {

    grid-column: 1;

    grid-row: 2;

    width: 100% !important;

  }



  .booking-form__select-wrap--code {

    flex: 1;

  }



  .booking-form__recaptcha {

    align-items: center;

  }



  .trips-hero {

    height: 260px;

  }



  .trips-page {

    padding: 50px 0 60px;

  }



  .trips-intro {

    margin-bottom: 48px;

  }



  .trips-intro__title {

    font-size: 32px;

  }



  .trips-route__grid,

  .trips-route__grid--short {

    grid-auto-flow: row;

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

    gap: 12px;

    width: 100%;

    max-width: 100%;

  }



  .trips-route__meta {

    flex-direction: row;

    align-items: flex-end;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 20px;

  }



  .trips-route__info {

    flex: 1;

    min-width: 0;

  }



  .trips-route__duration {
    flex-shrink: 0;
    align-self: flex-end;
    white-space: nowrap;
    margin-bottom: 0;
  }

  .trips-route__itinerary {
    flex-shrink: 0;
    align-self: flex-end;
    white-space: nowrap;
    margin-bottom: 0;
  }



  .trips-route__title {

    font-size: 20px;

  }



  .trips-route {

    margin-bottom: 56px;

  }

}



/* ---- Back to Top ---- */

.back-to-top {

  position: fixed;

  right: 24px;

  bottom: 24px;

  z-index: 900;

  width: 48px;

  height: 48px;

  border: none;

  border-radius: 50%;

  background: var(--navy);

  color: var(--white);

  font-size: 18px;

  cursor: pointer;

  opacity: 0;

  visibility: hidden;

  transform: translateY(12px);

  transition:

    opacity var(--transition),

    visibility var(--transition),

    transform var(--transition),

    background var(--transition);

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

}



.back-to-top--visible {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.back-to-top:hover {

  background: var(--gold);

}



@media (prefers-reduced-motion: reduce) {

  [data-aos] {

    opacity: 1 !important;

    transform: none !important;

    transition: none !important;

  }

}



@media (max-width: 768px) {

  .back-to-top {

    right: 16px;

    bottom: 16px;

    width: 44px;

    height: 44px;

    font-size: 16px;

  }



  .footer__heading {

    font-size: 16px;

  }



  .footer__links a,

  .footer__contact li {

    font-size: 16px;

  }



  .boat-card__specs li {

    font-size: 16px;

  }



  .booking-form__phone input {

    flex: none;

  }



}



.boat-detail__specs {

  display: grid;

  grid-auto-flow: column;

  grid-auto-columns: minmax(0, 1fr);

  border-top: 1px solid #d8d8d8;

  border-bottom: 1px solid #d8d8d8;

  margin: 2.5rem 0 4rem;

}



.boat-detail__spec {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 0.65rem;

  padding: 1.75rem 1rem;

  text-align: center;

  border-right: 1px solid #d8d8d8;

}



.boat-detail__spec:first-child {

  border-left: 1px solid #d8d8d8;

}



.boat-detail__spec-value {

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

  font-size: clamp(1.75rem, 3vw, 2.35rem);

  font-weight: 300;

  line-height: 1.1;

  color: #222;

  letter-spacing: 0.01em;

}



.boat-detail__spec-value sup {

  font-size: 0.55em;

  top: -0.35em;

  font-weight: 300;

}



.boat-detail__spec-label {

  font-size: 0.85rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #222;

  line-height: 1.2;

}



@media (max-width: 767px) {

  .boat-detail__specs {

    grid-auto-flow: row;

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

    border-left: 1px solid #d8d8d8;

    border-right: 1px solid #d8d8d8;

  }



  .boat-detail__spec {

    border-right: 1px solid #d8d8d8;

    border-bottom: 1px solid #d8d8d8;

    padding: 1.35rem 0.75rem;

  }



  .boat-detail__spec:nth-child(2n) {

    border-right: none;

  }



  /* รายการคี่ตัวสุดท้าย — ขยายเต็มแถวเมื่อเหลือ 1 ช่อง */

  .boat-detail__spec:last-child:nth-child(odd) {

    grid-column: 1 / -1;

    border-right: none;

  }

}



.boat-picker {

  position: relative;

  width: 100%;

}



.boat-picker__trigger {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  width: 100%;

  height: 44px;

  padding: 0 18px 0 24px;

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

  font-size: 13px;

  color: var(--charcoal);

  background: var(--white);

  border: 1px solid #333;

  border-radius: 9999px;

  cursor: pointer;

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

}



.boat-picker__trigger:hover,

.boat-picker.is-open .boat-picker__trigger,

.boat-picker__trigger:focus {

  border-color: var(--navy);

  outline: none;

}



.boat-picker.is-invalid .boat-picker__trigger {

  border-color: #dc2626;

}



.boat-picker__selected {

  flex: 1;

  min-width: 0;

  text-align: left;

}



.boat-picker__placeholder {

  color: #aaa;

}



.boat-picker__label {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.boat-picker__trigger i {

  font-size: 11px;

  color: var(--grey);

  flex-shrink: 0;

}



.boat-picker__panel {

  position: absolute;

  top: calc(100% + 8px);

  left: 0;

  right: 0;

  z-index: 30;

  background: var(--white);

  border: 1px solid #333;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);

}



.boat-picker__panel-title {

  padding: 14px 16px 10px;

  font-size: 14px;

  font-weight: 700;

  color: #555;

  border-bottom: 1px solid #e5e5e5;

}



.boat-picker__list {

  list-style: none;

  margin: 0;

  padding: 0;

}



.boat-picker__option {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 12px 16px;

  cursor: pointer;

  transition: background var(--transition), color var(--transition);

}



.boat-picker__option+.boat-picker__option {

  border-top: 1px solid #ececec;

}



.boat-picker__option img {

  width: 120px;

  height: 80px;

  object-fit: cover;

  flex-shrink: 0;

  display: block;

  background: #f3f3f3;

}



.boat-picker__option span {

  font-size: 14px;

  color: #666;

  line-height: 1.35;

}



.boat-picker__option:hover,

.boat-picker__option.is-active {

  background: #262261;

}



.boat-picker__option:hover span,

.boat-picker__option.is-active span {

  color: var(--white);

}

.booking-form__phone--split {
  width: 100%;
}

.booking-form__phone--split>.iti {
  display: grid !important;
  grid-template-columns: 130px 1fr;
  column-gap: 25px;
  width: 100%;
  align-items: stretch;
}

.booking-form__phone--split>.iti .iti__flag-container {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  width: 100%;
  height: 44px;
  border: 1px solid #333;
  border-radius: 9999px;
  background: #fff;
  box-sizing: border-box;
  overflow: visible;
}

.booking-form__phone--split>.iti .iti__selected-flag,
.booking-form__phone--split>.iti .iti__selected-country {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 24px 0 10px;
  border-radius: 9999px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #333;
}

.booking-form__phone--split>.iti .iti__flag {
  margin-top: 0;
}

.booking-form__phone--split>.iti .iti__arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  border-top-color: #333;
}

.booking-form__phone--split>.iti .iti__selected-dial-code {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  margin-left: 5px;
  z-index: 1;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  color: #2d2d2d;
  pointer-events: none;
  padding-right: 3rem;
}

.booking-form__phone--split>.iti input[type="tel"] {
  grid-column: 2;
  grid-row: 1;
  width: 100% !important;
  height: 44px !important;
  padding: 0 24px !important;
  margin: 0 !important;
  border: 1px solid #333 !important;
  border-radius: 9999px !important;
  background: #fff !important;
  font-size: 13px;
  color: #2d2d2d;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.3s ease;
}

.booking-form__phone--split>.iti input[type="tel"]:focus {
  border-color: #262261 !important;
}

.booking-form__phone--split>.iti .iti__flag-container:hover,
.booking-form__phone--split>.iti .iti__flag-container.open {
  border-color: #262261;
}

.booking-form__phone--split .iti__country-list {
  z-index: 9999;
  min-width: 280px;
  border: 1px solid #333;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
  .booking-form__phone--split>.iti {
    grid-template-columns: 118px 1fr;
  }

  .booking-form__phone--split>.iti .iti__selected-dial-code {
    margin-left: 0px;
    padding-right: 2rem;
  }

  .booking-form__phone--split>.iti {
    row-gap: 0px;
    column-gap: 15px;
  }

  .iti__country-container {
    padding: 0;
  }
}

.iti__search-input {
  padding: 0.7rem 1rem;
}

.boats__cta {
  text-align: center;
  margin-top: 20px;
}
.boats__cta .btn--outline-dark {
  margin-top: 20px;
  border-color: #000;

}

.boats__cta .btn--outline-dark:hover {
  background-color: #000;
  color: #fff;
  transition: all 0.3s ease;
}