/* R108_CCC_THEME_CHROME_CSS_V140_ACTIVE
 * สีส่วนหัว เมนู ปุ่มจอง และ Footer อ้างอิง --primary / --accent
 * ซึ่งถูกดึงจากธีมที่เลือกในระบบหลังบ้าน Resort108
 */
.khaokho-theme.ploysea-theme {
  /* ค่า fallback สำหรับเบราว์เซอร์ที่ยังไม่รองรับ color-mix() */
  --r108-theme-base: var(--primary, #0f766e);
  --r108-theme-accent: var(--accent, #f59e0b);
  --r108-theme-deep: #092f35;
  --r108-theme-dark: #0d4650;
  --r108-theme-light: #2a7882;
  --r108-theme-blend: #2f6d70;
  --r108-theme-border: rgba(255,255,255,.24);

  /* ค่าจริงจะเปลี่ยนตามสีธีมที่หลังบ้านส่งมา */
  --r108-theme-deep: color-mix(in srgb, var(--primary, #0f766e) 55%, #000 45%);
  --r108-theme-dark: color-mix(in srgb, var(--primary, #0f766e) 74%, #000 26%);
  --r108-theme-light: color-mix(in srgb, var(--primary, #0f766e) 82%, #fff 18%);
  --r108-theme-blend: color-mix(in srgb, var(--primary, #0f766e) 76%, var(--accent, #f59e0b) 24%);
}

/* 1) แถบเมนูด้านบน: ไล่เฉดเข้มไปจางตามสีธีม */
html body.khaokho-theme.ploysea-theme .topbar,
html body.khaokho-theme.ploysea-theme .experience-topbar,
html body.khaokho-theme.ploysea-theme .room-detail-topbar {
  border-bottom: 1px solid color-mix(in srgb, var(--r108-theme-light) 38%, rgba(255,255,255,.32)) !important;
  background-color: var(--r108-theme-dark) !important;
  background-image: linear-gradient(
    105deg,
    var(--r108-theme-deep) 0%,
    var(--r108-theme-dark) 48%,
    var(--r108-theme-base) 78%,
    var(--r108-theme-light) 100%
  ) !important;
  color: #fff !important;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--r108-theme-deep) 34%, transparent) !important;
}

html body.khaokho-theme.ploysea-theme .topbar .brand,
html body.khaokho-theme.ploysea-theme .topbar .brand-text strong,
html body.khaokho-theme.ploysea-theme .topbar .brand-mark {
  color: #fff !important;
}

html body.khaokho-theme.ploysea-theme .topbar .brand-text span {
  color: rgba(255,255,255,.72) !important;
}

html body.khaokho-theme.ploysea-theme .topbar .brand-mark {
  border-color: rgba(255,255,255,.62) !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

/* ปุ่มเมนูเดสก์ท็อป */
html body.khaokho-theme.ploysea-theme .topbar .menu {
  background: transparent !important;
}

html body.khaokho-theme.ploysea-theme .topbar .menu > a {
  position: relative;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  padding: 8px 13px !important;
  background: transparent !important;
  color: rgba(255,255,255,.88) !important;
  font-weight: 600 !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease !important;
}

html body.khaokho-theme.ploysea-theme .topbar .menu > a:hover,
html body.khaokho-theme.ploysea-theme .topbar .menu > a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

html body.khaokho-theme.ploysea-theme .topbar .menu > a.active,
html body.khaokho-theme.ploysea-theme .topbar .menu > a[aria-current="page"] {
  border-color: rgba(255,255,255,.34) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08)) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html body.khaokho-theme.ploysea-theme .topbar .nav-menu-button {
  border-color: rgba(255,255,255,.38) !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

html body.khaokho-theme.ploysea-theme .topbar .nav-actions .button.light {
  border-color: rgba(255,255,255,.42) !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}

/* 2) ปุ่มจองทุกหน้าที่เกี่ยวข้อง เปลี่ยนตามสีธีม */
html body.khaokho-theme.ploysea-theme a.button[href*="#booking"]:not(.light),
html body.khaokho-theme.ploysea-theme .room-booking-button,
html body.khaokho-theme.ploysea-theme .room-detail-book-button,
html body.khaokho-theme.ploysea-theme .booking-submit-button,
html body.khaokho-theme.ploysea-theme button[data-booking-submit],
html body.khaokho-theme.ploysea-theme .topbar .nav-actions .button.accent,
html body.khaokho-theme.ploysea-theme .experience-contact-row .button.accent {
  border: 1px solid color-mix(in srgb, var(--r108-theme-dark) 78%, #000 22%) !important;
  border-radius: 7px !important;
  background-color: var(--r108-theme-base) !important;
  background-image: linear-gradient(135deg, var(--r108-theme-deep) 0%, var(--r108-theme-base) 62%, var(--r108-theme-blend) 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--r108-theme-dark) 28%, transparent) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.16);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

html body.khaokho-theme.ploysea-theme a.button[href*="#booking"]:not(.light):hover,
html body.khaokho-theme.ploysea-theme .room-booking-button:hover,
html body.khaokho-theme.ploysea-theme .room-detail-book-button:hover,
html body.khaokho-theme.ploysea-theme .booking-submit-button:hover,
html body.khaokho-theme.ploysea-theme button[data-booking-submit]:hover,
html body.khaokho-theme.ploysea-theme .topbar .nav-actions .button.accent:hover,
html body.khaokho-theme.ploysea-theme .experience-contact-row .button.accent:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) saturate(1.05);
  box-shadow: 0 13px 26px color-mix(in srgb, var(--r108-theme-dark) 34%, transparent) !important;
}

/* ปุ่มจองที่อยู่ในการ์ดแพ็กเกจหรือส่วนหัวโมดูลและใช้ URL อื่น */
html body.khaokho-theme.ploysea-theme .package-card .button:not(.light),
html body.khaokho-theme.ploysea-theme .rooms-section .section-head .button:not(.light),
html body.khaokho-theme.ploysea-theme .cta-panel .button:not(.light) {
  border-color: var(--r108-theme-dark) !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, var(--r108-theme-deep), var(--r108-theme-base) 68%, var(--r108-theme-blend)) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px color-mix(in srgb, var(--r108-theme-dark) 25%, transparent) !important;
}

/* 3) Footer ทุกหน้า: ไล่เฉดเข้มไปจางตามธีม */
html body.khaokho-theme.ploysea-theme .footer,
html body.khaokho-theme.ploysea-theme .experience-footer {
  border-top: 1px solid color-mix(in srgb, var(--r108-theme-light) 34%, rgba(255,255,255,.18)) !important;
  background-color: var(--r108-theme-deep) !important;
  background-image: linear-gradient(
    110deg,
    var(--r108-theme-deep) 0%,
    var(--r108-theme-dark) 52%,
    var(--r108-theme-base) 100%
  ) !important;
  color: #fff !important;
}

html body.khaokho-theme.ploysea-theme .footer strong,
html body.khaokho-theme.ploysea-theme .experience-footer strong {
  color: #fff !important;
}

html body.khaokho-theme.ploysea-theme .footer span,
html body.khaokho-theme.ploysea-theme .footer p,
html body.khaokho-theme.ploysea-theme .experience-footer p {
  color: rgba(255,255,255,.70) !important;
}

html body.khaokho-theme.ploysea-theme .footer a,
html body.khaokho-theme.ploysea-theme .experience-footer a {
  color: rgba(255,255,255,.90) !important;
}

html body.khaokho-theme.ploysea-theme .footer-links a {
  border-color: rgba(255,255,255,.28) !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.07) !important;
}

html body.khaokho-theme.ploysea-theme .footer-links a:hover,
html body.khaokho-theme.ploysea-theme .experience-footer a:hover {
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
}

html body.khaokho-theme.ploysea-theme .footer-links .footer-line {
  border-color: rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.94) !important;
  color: var(--r108-theme-deep) !important;
}

/* เมนูมือถือ V136: หนึ่งเมนูต่อหนึ่งแถว และคงสีตามธีม */
@media (max-width: 980px) {
  html body.khaokho-theme.ploysea-theme .topbar .menu {
    border-top: 1px solid rgba(255,255,255,.16);
    background: transparent !important;
  }

  html body.khaokho-theme.ploysea-theme .topbar .menu > a {
    border-color: rgba(255,255,255,.24) !important;
    border-radius: 7px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
  }

  html body.khaokho-theme.ploysea-theme .topbar .menu > a:hover,
  html body.khaokho-theme.ploysea-theme .topbar .menu > a:focus-visible,
  html body.khaokho-theme.ploysea-theme .topbar .menu > a.active,
  html body.khaokho-theme.ploysea-theme .topbar .menu > a[aria-current="page"] {
    border-color: rgba(255,255,255,.40) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.10)) !important;
  }
}

@media (max-width: 560px) {
  html body.khaokho-theme.ploysea-theme .topbar .nav-actions .button.accent {
    border-radius: 7px !important;
  }
}