/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

/* Testimonials section: let long quotes expand the parallax container
   so the owl-dots don't get clipped (especially on iPad landscape). */
.parallax_section_1 {
  height: auto;
  min-height: 70vh;
}
.parallax_section_1 > .opacity-mask {
  position: relative;
  height: auto;
  min-height: 70vh;
}

/* Direct booking banner */
.booking_banner {
  background: #978667;
  color: #fff;
  padding: 18px 0;
}
.booking_banner p {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  margin: 0;
}
.booking_banner p strong {
  font-weight: 600;
}
.booking_banner .btn_1 {
  padding: 10px 24px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 991px) {
  .booking_banner {
    text-align: center;
  }
}

/* Header: non-sticky (scrolls away with page), always transparent */
header.menu_v4 {
  position: absolute;
}
header.menu_v4 nav ul li a {
  color: #fff;
}
header.menu_v4 nav ul li a.animated_link:before {
  background-color: #fff;
}

/* Mobile: hide top-bar nav, show original hamburger that opens .panel_menu */
.mobile_burger {
  display: none;
}
@media (max-width: 1199px) {
  header.menu_v4 .main-menu {
    display: none !important;
  }
  .mobile_burger {
    display: inline-block;
    float: right;
  }
}

/* Language switcher dropdown */
header.menu_v4 nav ul li.lang_switcher {
  position: relative;
  margin-left: 10px;
}
header.menu_v4 nav ul li.lang_switcher .lang_toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 13px 18px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}
header.menu_v4 nav ul li.lang_switcher .lang_toggle:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}
header.menu_v4 nav ul li.lang_switcher .lang_toggle .bi-globe {
  font-size: 13px;
  opacity: 0.85;
}
header.menu_v4 nav ul li.lang_switcher .lang_toggle .lang_caret {
  font-size: 10px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}
header.menu_v4 nav ul li.lang_switcher.open .lang_toggle {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}
header.menu_v4 nav ul li.lang_switcher.open .lang_caret {
  transform: rotate(180deg);
}

/* Dropdown menu */
header.menu_v4 nav ul li.lang_switcher .lang_menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 4px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 100;
  white-space: nowrap;
}
header.menu_v4 nav ul li.lang_switcher.open .lang_menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
header.menu_v4 nav ul li.lang_switcher .lang_menu li {
  display: block;
  margin: 0;
  padding: 0;
}
header.menu_v4 nav ul li.lang_switcher .lang_menu a {
  display: block;
  padding: 6px 12px;
  border-radius: 5px;
  color: #555;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
header.menu_v4 nav ul li.lang_switcher .lang_menu a:before {
  display: none;
}
header.menu_v4 nav ul li.lang_switcher .lang_menu a:hover {
  background: rgba(151, 134, 103, 0.08);
  color: #978667;
}
header.menu_v4 nav ul li.lang_switcher .lang_menu a.active {
  color: #978667;
  font-weight: 700;
}
header.menu_v4 nav ul li.lang_switcher .lang_menu_check {
  display: none;
}

/* Mobile panel menu language row */
.panel_menu .wrapper_menu ul li.panel_lang {
  margin-top: 20px;
}
.panel_menu .wrapper_menu ul li.panel_lang .panel_lang_pill {
  display: inline-flex;
  padding: 4px;
  background: rgba(151, 134, 103, 0.1);
  border-radius: 30px;
}
.panel_menu .wrapper_menu ul li.panel_lang .panel_lang_option {
  display: inline-block;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #978667;
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.panel_menu .wrapper_menu ul li.panel_lang .panel_lang_option.active {
  background: #978667;
  color: #fff;
}

/* Thai site link — a SEPARATE site for Thai travellers, not a translation of this one.
   Deliberately styled unlike the EN/DE switcher: square chip instead of a pill, its own
   divider, and an external-link arrow, so it never reads as a third language option. */
.th_flag {
  width: 22px;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* The nav items are inline-block in a right-aligned ul (style.css), so adding the Thai
   chip pushed the row over the column width and it wrapped onto a second line. Lay the
   top-level nav out as a single non-wrapping flex row and tighten the 25px item gap.
   Scoped to >=1200px and to nav's DIRECT child ul, so neither the mobile slide-out nor
   the .lang_menu dropdown (also a ul) is affected. */
@media (min-width: 1200px) {
  header.menu_v4 nav > ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  header.menu_v4 nav > ul > li {
    margin-left: 18px;
  }
  header.menu_v4 nav > ul > li:first-child {
    margin-left: 0;
  }
}

/* Desktop header chip */
header.menu_v4 nav ul li.th_site {
  position: relative;
  margin-left: 14px;
  padding-left: 14px;
}
header.menu_v4 nav ul li.th_site:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.25);
}
header.menu_v4 nav ul li.th_site a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 10px 14px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
header.menu_v4 nav ul li.th_site a:before {
  display: none;
}
header.menu_v4 nav ul li.th_site a:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}
.th_site_label {
  font-family: 'Noto Sans Thai', 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
/* Six nav links plus Book Now plus the language pill leave little room, so the chip
   sheds text as the viewport narrows rather than wrapping the row. The title attribute
   carries the full wording at every size, and the panel menu always shows it in full. */
.th_site_label_full {
  display: none;
}
.th_site_label_short {
  display: inline;
}
@media (min-width: 1700px) {
  .th_site_label_full {
    display: inline;
  }
  .th_site_label_short {
    display: none;
  }
}
@media (max-width: 1399px) {
  header.menu_v4 nav ul li.th_site .th_site_label {
    display: none;
  }
}
.th_site_ext {
  font-size: 10px;
  opacity: 0.7;
  color: #fff;
}

/* Mobile top bar chip — sits left of the burger (both float right, burger is first in DOM) */
.th_site_mobile {
  display: none;
}
@media (max-width: 1199px) {
  .th_site_mobile {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    float: right;
    margin: 4px 16px 0 0;
    padding: 7px 11px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    line-height: 1;
    text-decoration: none;
  }
  .th_site_mobile span {
    font-family: 'Noto Sans Thai', 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
  }
  .th_site_mobile .th_flag {
    width: 20px;
  }
}
@media (max-width: 380px) {
  .th_site_mobile span {
    display: none;
  }
}

/* Panel menu row — separated from the English/Deutsch pill by a rule */
.panel_menu .wrapper_menu ul li.panel_th {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(151, 134, 103, 0.2);
}
.panel_menu .wrapper_menu ul li.panel_th a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: #978667;
}
.panel_menu .wrapper_menu ul li.panel_th .th_flag {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.panel_th_label {
  font-family: 'Noto Sans Thai', 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
}
.panel_menu .wrapper_menu ul li.panel_th .bi-box-arrow-up-right {
  font-size: 11px;
  opacity: 0.7;
}
.panel_th_note {
  display: block;
  margin-top: 5px;
  font-family: 'Noto Sans Thai', 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(151, 134, 103, 0.75);
}

/* Tennis icon — PNG tinted via mask to inherit parent text color */
i.icon-tennis {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  background-color: currentColor;
  -webkit-mask: url('../img/tennis.png') no-repeat center / contain;
          mask: url('../img/tennis.png') no-repeat center / contain;
}

/* Summer Package */
.summer_package {
  position: relative;
  overflow: hidden;
  background: #f7f3ec;
}
.summer_watermark {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  font-family: Montserrat, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 260px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #978667;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.summer_package .container {
  z-index: 1;
}
.summer_badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 30px;
  background: rgba(151, 134, 103, 0.12);
  color: #978667;
  font-family: Montserrat, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.summer_badge_dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #978667;
  animation: summer_pulse 1.8s ease-in-out infinite;
}
@keyframes summer_pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.5; }
}
.summer_condition {
  color: #978667;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.summer_inclusions {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.summer_inclusions_header {
  background: #978667;
  color: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.summer_inclusions_header h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.02em;
}
.summer_inclusions_header span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.summer_inclusion_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.summer_inclusion_item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid #f0ece4;
}
.summer_inclusion_item:last-child {
  border-bottom: none;
}
.inclusion_icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(151, 134, 103, 0.12);
  color: #978667;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.inclusion_icon.coral   { background: rgba(201, 123, 99, 0.14); color: #c97b63; }
.inclusion_icon.sky     { background: rgba(107, 150, 168, 0.14); color: #5a8699; }
.inclusion_icon.sage    { background: rgba(122, 155, 110, 0.14); color: #6b8d61; }
.inclusion_icon.gold    { background: rgba(151, 134, 103, 0.14); color: #978667; }
.inclusion_icon.ocean   { background: rgba(61, 123, 128, 0.14); color: #3d7b80; }
.inclusion_icon.highlight {
  background: #978667;
  color: #fff;
}
.inclusion_text {
  flex: 1;
  min-width: 0;
}
.inclusion_name {
  font-family: Montserrat, Helvetica, sans-serif;
  font-weight: 600;
  color: #222;
  margin: 0 0 2px;
  font-size: 15px;
}
.inclusion_sub {
  color: #777;
  font-size: 13px;
  margin: 0;
  line-height: 1.4;
}
.inclusion_tag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 20px;
}
.inclusion_tag.free {
  background: rgba(151, 134, 103, 0.12);
  color: #978667;
}
.inclusion_tag.bonus {
  background: #978667;
  color: #fff;
}
.summer_inclusions_footer {
  padding: 16px 24px;
  background: #faf8f4;
  border-top: 1px solid #f0ece4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.summer_inclusions_footer p {
  margin: 0;
  font-size: 12px;
  color: #888;
  letter-spacing: 0.04em;
}
.summer_total {
  font-weight: 600;
  color: #978667 !important;
  text-transform: uppercase;
}
.summer_inclusion_item.featured {
  background: linear-gradient(90deg, rgba(151, 134, 103, 0.08), transparent 60%);
}
@media (max-width: 900px) {
  .summer_watermark {
    font-size: 140px;
    right: -20px;
  }
}
@media (max-width: 600px) {
  .summer_watermark { font-size: 100px; }
  .summer_inclusion_item { padding: 14px 18px; gap: 12px; }
  .inclusion_icon { flex-basis: 38px; width: 38px; height: 38px; font-size: 17px; }
  .inclusion_tag { font-size: 10px; padding: 5px 10px; }
  .summer_inclusions_header { padding: 16px 18px; }
  .summer_inclusions_footer { padding: 14px 18px; }
}