@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root {
  --wv-pref-bg: rgba(244, 244, 245, 0.95);
  --wv-pref-border: rgba(24, 24, 27, 0.14);
  --wv-pref-text: #141414;
  --wv-pref-hover: rgba(0, 0, 0, 0.04);
  --wv-pref-ring: rgba(24, 24, 27, 0.22);
  --wv-font-cn-title: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --wv-font-luxe: "Playfair Display", "Cormorant Garamond", "Times New Roman", serif;
  --wv-font-body: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --body-font-family: var(--wv-font-body);
}

body,
button,
input,
textarea,
select,
.custom-form .form-control,
.custom-form .form-select,
.custom-form .form-floating > label,
.cc-login-page,
.cc-login-page .cc-input,
.cc-login-page .cc-form-field label,
.cc-login-page .cc-login-head p,
.cc-login-page .cc-signup-note,
.cc-login-page .cc-form-meta,
.cc-login-page .cc-field-error,
.cc-login-page .cc-form-error,
body[data-page="backend"],
body[data-page="backend"] .label,
body[data-page="backend"] .user,
body[data-page="backend"] .btn {
  font-family: var(--wv-font-body);
}

/* Utility classes for Tailwind/JSX markup when needed */
.font-cn-title {
  font-family: var(--wv-font-cn-title) !important;
}

.font-luxe-serif,
.font-luxe-numeric {
  font-family: var(--wv-font-luxe) !important;
  font-variant-numeric: lining-nums tabular-nums;
}

.font-ui-body {
  font-family: var(--wv-font-body) !important;
}

/* 中文主标题：强制使用思源宋/宋体体系 */
html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] .membership-display-title,
html[lang="zh-CN"] .valley-manifesto h1,
html[lang="zh-CN"] .valley-tier-card h2,
html[lang="zh-CN"] .valley-payment-panel-head h3,
html[lang="zh-CN"] .membership-price-wrap h4,
html[lang="zh-CN"] .cc-login-head h1,
html[lang="zh-CN"] body[data-page="backend"] .brand,
html[lang="zh-CN"] body[data-page="backend"] h2 {
  font-family: var(--wv-font-cn-title) !important;
  letter-spacing: 0.01em;
}

/* 金额与英文字母重点区域：Playfair/Cormorant */
.membership-price-wrap h4,
.membership-table-shell thead th,
.valley-tier-card h2,
.valley-tier-index,
.valley-tier-meta p strong,
.valley-payment-plan-name,
.valley-payment-plan-amount,
.valley-summary-row strong,
body[data-page="backend"] .value,
body[data-page="backend"] .brand,
html[lang="en"] .cc-login-head h1 {
  font-family: var(--wv-font-luxe) !important;
  font-variant-numeric: lining-nums tabular-nums;
}

body[data-theme="dark"] {
  --wv-pref-bg: rgba(34, 39, 49, 0.95);
  --wv-pref-border: rgba(255, 255, 255, 0.18);
  --wv-pref-text: #f5f7fb;
  --wv-pref-hover: rgba(255, 255, 255, 0.1);
  --wv-pref-ring: rgba(255, 255, 255, 0.24);
}

.language-switcher {
  width: auto !important;
  min-width: 0 !important;
}

.language-switcher .language-trigger,
.language-switcher .language-menu {
  display: none !important;
}

.wv-pref-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wv-pref-btn {
  height: 34px;
  border: 1px solid var(--wv-pref-border);
  border-radius: 999px;
  background: var(--wv-pref-bg);
  color: var(--wv-pref-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.wv-pref-btn:hover {
  background: var(--wv-pref-hover);
}

.wv-pref-btn:active {
  transform: translateY(1px);
}

.wv-pref-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--wv-pref-ring);
}

.wv-lang-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--wv-pref-border);
  border-radius: 999px;
  background: var(--wv-pref-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.wv-lang-opt {
  min-width: 30px;
  height: 26px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  letter-spacing: 0.03em;
  transition: background 0.18s ease, color 0.18s ease;
}

.wv-lang-opt:hover {
  background: var(--wv-pref-hover);
}

.wv-lang-opt.is-active {
  background: hsl(231 48% 48%);
  color: #fff;
}

body[data-theme="dark"] .wv-lang-opt.is-active {
  background: hsl(231 48% 62%);
  color: #fff;
}

.wv-pref-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wv-pref-icon svg,
.wv-theme-icons svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wv-theme-btn {
  min-width: 54px;
  padding: 0 9px;
}

.wv-theme-icons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wv-theme-icons .wv-theme-sun {
  opacity: 0.55;
}

body[data-theme="dark"] .wv-theme-icons .wv-theme-sun {
  opacity: 1;
}

body[data-theme="dark"] .wv-theme-icons .wv-theme-moon {
  opacity: 0.55;
}

.wv-floating-preferences {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1500;
}

.cc-login-page .wv-floating-preferences,
body[data-page="backend"] .wv-floating-preferences {
  top: 16px;
  right: 16px;
}

@media (max-width: 575px) {
  .wv-floating-preferences {
    top: 10px;
    right: 10px;
  }

  .wv-pref-btn {
    height: 32px;
  }

  .wv-lang-btn {
    min-width: 72px;
    padding: 0 9px;
  }
}

/* -------- Dark mode: main template pages -------- */
body[data-theme="dark"] {
  background-color: #0f1218;
  color: #e8edf5;
}

body[data-theme="dark"] p,
body[data-theme="dark"] ul li,
body[data-theme="dark"] .text-secondary,
body[data-theme="dark"] .membership-note,
body[data-theme="dark"] .valley-tier-note,
body[data-theme="dark"] .valley-purchase-note,
body[data-theme="dark"] .purchase-copy,
body[data-theme="dark"] .contact-link {
  color: #a9b4c4 !important;
}

body[data-theme="dark"] .section-bg,
body[data-theme="dark"] .membership-section,
body[data-theme="dark"] .events-section,
body[data-theme="dark"] .contact-section,
body[data-theme="dark"] .about-section,
body[data-theme="dark"] .site-footer,
body[data-theme="dark"] .section-bg-image,
body[data-theme="dark"] .membership-purchase-main,
body[data-theme="dark"] .member-portal-main {
  background-color: #111722 !important;
}

body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6,
body[data-theme="dark"] .membership-price-wrap h4,
body[data-theme="dark"] .valley-section-title,
body[data-theme="dark"] .navbar-brand-text,
body[data-theme="dark"] .site-footer-title,
body[data-theme="dark"] .custom-block-info .events-title {
  color: #f1f5fb !important;
}

body[data-theme="dark"] .navbar {
  background: rgba(11, 15, 22, 0.84) !important;
  backdrop-filter: blur(8px);
}

body[data-theme="dark"] .sticky-wrapper.is-sticky .navbar {
  background: rgba(11, 15, 22, 0.96) !important;
}

body[data-theme="dark"] .navbar .navbar-brand,
body[data-theme="dark"] .navbar .navbar-brand:hover,
body[data-theme="dark"] .navbar-nav .nav-link,
body[data-theme="dark"] .dropdown-item {
  color: #e8edf5 !important;
}

body[data-theme="dark"] .navbar-brand-image {
  filter: brightness(0) invert(1) !important;
}

body[data-theme="dark"] .dropdown-menu,
body[data-theme="dark"] .offcanvas,
body[data-theme="dark"] .custom-block,
body[data-theme="dark"] .section-bg-image-block,
body[data-theme="dark"] .membership-form,
body[data-theme="dark"] .contact-form,
body[data-theme="dark"] .membership-price-wrap,
body[data-theme="dark"] .valley-tier-card,
body[data-theme="dark"] .valley-payment-entry,
body[data-theme="dark"] .valley-payment-summary,
body[data-theme="dark"] .contact-info-item,
body[data-theme="dark"] .member-login-form-body {
  background: #17202d !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e8edf5 !important;
  box-shadow: none !important;
}

body[data-theme="dark"] .membership-table-shell {
  background: #f9f5ec !important;
}
body[data-theme="dark"] .membership-table-shell thead th,
body[data-theme="dark"] .membership-table-shell td,
body[data-theme="dark"] .membership-table-shell tbody th {
  color: #4b5320 !important;
}

body[data-theme="dark"] .dropdown-menu::before {
  border-bottom-color: #17202d !important;
}

body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select,
body[data-theme="dark"] .custom-form input,
body[data-theme="dark"] .custom-form textarea {
  background: #0f1622 !important;
  color: #e8edf5 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

body[data-theme="dark"] .form-floating > label,
body[data-theme="dark"] label,
body[data-theme="dark"] .custom-block-span,
body[data-theme="dark"] .table th,
body[data-theme="dark"] .table td {
  color: #c5cfdb !important;
}

body[data-theme="dark"] .table,
body[data-theme="dark"] .table tr,
body[data-theme="dark"] .table tbody,
body[data-theme="dark"] .table thead {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body[data-theme="dark"] .custom-btn,
body[data-theme="dark"] .member-submit-btn,
body[data-theme="dark"] .valley-primary-btn,
body[data-theme="dark"] .valley-tier-cta {
  background: #d8c3a5 !important;
  color: #1f2a1a !important;
  border-color: #d8c3a5 !important;
}

body[data-theme="dark"] .custom-border-btn,
body[data-theme="dark"] .member-google-btn,
body[data-theme="dark"] .valley-secondary-btn {
  background: transparent !important;
  color: #e8edf5 !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

body[data-theme="dark"] .valley-tier-card.is-active {
  border-color: #d8c3a5 !important;
  box-shadow: 0 0 0 1px #d8c3a5 inset;
}

body[data-theme="dark"] .site-footer svg path,
body[data-theme="dark"] .hero-section > svg path,
body[data-theme="dark"] .hero-section .container + svg path,
body[data-theme="dark"] .section-bg-image > svg path,
body[data-theme="dark"] .section-bg-image .container + svg path {
  fill: #111722 !important;
}

/* -------- Dark mode: login/signup -------- */
body.cc-login-page[data-theme="dark"] {
  --background: 222 30% 7%;
  --foreground: 210 20% 95%;
  --muted-foreground: 215 14% 70%;
  --border: 216 18% 22%;
  --input: 216 18% 22%;
  --ring: 42 44% 69%;
  --primary: 42 44% 69%;
  --primary-foreground: 225 20% 15%;
  --destructive: 0 70% 62%;
  --left-text: 210 20% 95%;
  --left-link: 210 20% 78%;
  --left-chip: 0 0% 100% / 0.16;
  --left-grid: 0 0% 100% / 0.06;
  --left-glow-top: 220 20% 60% / 0.3;
  --left-glow-bottom: 230 20% 75% / 0.22;
}

body.cc-login-page[data-theme="dark"] .cc-login-visual {
  background: linear-gradient(135deg, #2f3542 0%, #222936 52%, #181f2a 100%);
}

body.cc-login-page[data-theme="dark"] .cc-hover-button {
  background: #121926;
  border-color: rgba(255, 255, 255, 0.16);
}

body.cc-login-page[data-theme="dark"] .cc-hover-button-secondary {
  background: #182232;
}

/* -------- Dark mode: backend -------- */
body[data-page="backend"][data-theme="dark"] {
  --bg: #0f131b;
  --card: #151b26;
  --text: #edf2fa;
  --muted: #97a3b8;
  --line: #2d3748;
  --btn: #edf2fa;
  --btnText: #111827;
}

body[data-page="backend"][data-theme="dark"] .pill {
  background: rgba(216, 195, 165, 0.18);
  color: #f0d9bf;
}


/* ── Footer legal links ── */
.site-footer-legal-links {
  font-size: 11px;
  color: #808080;
  margin-top: 6px;
  line-height: 1.8;
}
.site-footer-legal-links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}
.site-footer-legal-links a:hover {
  color: #b0a898;
}

/* ── Navbar: hide mobile-actions on small phones (≤480px) ── */
@media (max-width: 480px) {
  .navbar-mobile-actions { display: none !important; }
}

/* ── Navbar: hide "Membership Purchase" from mobile-actions on 481–1199px ── */
@media (min-width: 481px) and (max-width: 1199px) {
  .navbar-mobile-actions .btn.custom-btn:not(.custom-border-btn) {
    display: none !important;
  }
  .navbar-mobile-actions .btn.custom-btn.custom-border-btn {
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 0.82rem !important;
    white-space: nowrap;
  }
}

/* ══ Navbar redesign: new structural classes ══════════════════════ */

/* Mobile right cluster: [Apply CTA] + [hamburger] */
.wv-nav-mobile-end {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wv-apply-mobile-btn {
  padding: 7px 13px !important;
  font-size: 0.78rem !important;
  white-space: nowrap;
  line-height: 1.3 !important;
}

/* Desktop ghost "Member Login" link */
.wv-nav-login-link {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none !important;
  padding: 6px 2px;
  white-space: nowrap;
  transition: color 0.2s;
  background: none;
  border: none;
  display: inline-block;
}
.wv-nav-login-link:hover {
  color: #fff;
}
/* On frosted sticky (light) */
.sticky-wrapper.is-sticky .wv-nav-login-link {
  color: #5a4a38;
}
.sticky-wrapper.is-sticky .wv-nav-login-link:hover {
  color: #2d2d2d;
}
body[data-theme="dark"] .wv-nav-login-link,
body[data-theme="dark"] .sticky-wrapper.is-sticky .wv-nav-login-link {
  color: rgba(200, 212, 228, 0.85);
}
body[data-theme="dark"] .wv-nav-login-link:hover,
body[data-theme="dark"] .sticky-wrapper.is-sticky .wv-nav-login-link:hover {
  color: #f5f7fb;
}
/* On mobile frosted navbar (max-width:767px), login link in collapse: dark */
@media (max-width: 1199px) {
  .wv-nav-login-link { color: inherit; }
}

/* Desktop lang host (wv-pref-controls injected by JS) */
.wv-desktop-lang-host {
  display: inline-flex;
  align-items: center;
}

/* Mobile collapse extras: login + lang below nav links */
.wv-collapse-extras {
  padding-top: 14px;
  margin-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}
body[data-theme="dark"] .wv-collapse-extras {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.wv-collapse-lang-host {
  display: flex;
  align-items: center;
}

/* ── Reserve section: warm deep forest green (replaces pure black) ── */
.wv-reserve-section {
  background-color: #2c3420 !important;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(120, 140, 60, 0.20) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 100%, rgba(204, 181, 138, 0.10) 0%, transparent 60%) !important;
}
/* Ensure all text has strong contrast on the new background */
.wv-reserve-title,
.wv-reserve-subtitle,
.wv-reserve-list { color: #EBE4D5 !important; }
.wv-reserve-eyebrow { color: #d4bb88 !important; }
/* Price area: force visible on dark background */
.wv-reserve-price-lines span,
.wv-reserve-price-deco,
.wv-reserve-price-badge { color: #EBE4D5 !important; }
.wv-reserve-price-lines [style*="color:#EBE4D5"],
.wv-reserve-price-lines [style*="color:rgba(204"] { color: #d4bb88 !important; }

/* ── Team avatars: center on mobile ── */
@media (max-width: 767px) {
  .member-block { text-align: center; }
  .member-block-info {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 4px;
  }
  .member-block-info .ms-auto { margin-left: 0 !important; }
}

/* ── Membership fee table: desktop fits without scroll ── */
.tbl-price   { white-space: nowrap; display: block; font-size: 1rem; font-weight: 700; }
.tbl-deposit { white-space: nowrap; display: block; font-size: 0.7rem; opacity: .7; margin-top: 2px; }
.membership-table-shell thead th { white-space: nowrap; font-size: 0.76rem; padding: 10px 6px; }
.membership-table-shell td,
.membership-table-shell tbody th  { padding: 10px 6px; font-size: 0.84rem; }
/* Desktop: no scroll (override Bootstrap .table-responsive overflow) */
@media (min-width: 768px) {
  .membership-table-shell { overflow: visible !important; }
}


/* ══════════════════════════════════════════════════════════════════
   APPLE MOBILE STYLE  ·  zoxpa.com  ·  ≤ 767 px
   Frosted glass · SF Pro typography · Rounded cards · Generous space
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ─── 1. System font — mirrors SF Pro on Apple devices ─── */
  body {
    font-family: -apple-system, BlinkMacSystemFont, "DM Sans", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ─── 2. Frosted-glass navbar ─── */
  .navbar {
    background: rgba(251, 251, 253, 0.82) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.10) !important;
    box-shadow: none !important;
    transition: background 0.3s ease;
  }
  body[data-theme="dark"] .navbar {
    background: rgba(22, 22, 24, 0.82) !important;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.08) !important;
  }
  .sticky-wrapper.is-sticky .navbar {
    background: rgba(251, 251, 253, 0.92) !important;
  }
  body[data-theme="dark"] .sticky-wrapper.is-sticky .navbar {
    background: rgba(22, 22, 24, 0.92) !important;
  }

  /* ─── 2b. Navbar text & logo — dark on frosted-glass light bg ─── */
  .navbar .navbar-brand,
  .navbar .navbar-brand:hover {
    color: #1d1d1f !important;
  }
  .navbar .navbar-brand-text span,
  .navbar .navbar-brand-text small {
    color: #1d1d1f !important;
  }
  .navbar .navbar-brand-image {
    filter: none !important;
  }
  .navbar .nav-link,
  .navbar .nav-link:hover,
  .navbar .dropdown-toggle {
    color: #1d1d1f !important;
  }
  .navbar .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.18) !important;
  }
  .navbar .navbar-toggler-icon {
    filter: brightness(0) !important;
  }

  /* ─── Dark mode: restore white for navbar text ─── */
  body[data-theme="dark"] .navbar .navbar-brand,
  body[data-theme="dark"] .navbar .navbar-brand:hover,
  body[data-theme="dark"] .navbar .navbar-brand-text span,
  body[data-theme="dark"] .navbar .navbar-brand-text small,
  body[data-theme="dark"] .navbar .nav-link,
  body[data-theme="dark"] .navbar .nav-link:hover,
  body[data-theme="dark"] .navbar .dropdown-toggle {
    color: #f5f5f7 !important;
  }
  body[data-theme="dark"] .navbar .navbar-brand-image {
    filter: brightness(0) invert(1) !important;
  }
  body[data-theme="dark"] .navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2) !important;
  }
  body[data-theme="dark"] .navbar .navbar-toggler-icon {
    filter: invert(1) !important;
  }

  /* Placeholder — already handled above */
  body[data-theme="dark"] .sticky-wrapper.is-sticky .navbar {
    background: rgba(22, 22, 24, 0.92) !important;
  }

  /* ─── 3. Headlines — tight tracking, generous weight ─── */
  h1, h2, h3 {
    letter-spacing: -0.025em !important;
    line-height: 1.08 !important;
  }
  h2 { font-size: clamp(28px, 7.5vw, 40px) !important; }
  h3 { font-size: clamp(22px, 6vw, 30px) !important; }

  /* ─── 4. Section rhythm — generous Apple-style breathing room ─── */
  .section-padding {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  /* ─── 5. Buttons — 44pt tap target, capsule shape ─── */
  .btn.custom-btn,
  .btn.custom-btn.custom-border-btn {
    border-radius: 980px;
    min-height: 44px;
    padding: 0 22px;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn.custom-btn.custom-border-btn.w-100 {
    border-radius: 12px;
  }
  .btn, a.btn {
    -webkit-tap-highlight-color: transparent;
  }

  /* ─── 6. Collapsed navbar menu — card-style ─── */
  .navbar-collapse.show {
    background: rgba(251, 251, 253, 0.95);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-radius: 0 0 20px 20px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
    padding: 12px 8px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  }
  body[data-theme="dark"] .navbar-collapse.show {
    background: rgba(28, 28, 30, 0.95);
    border-top: 0.5px solid rgba(255,255,255,0.08);
  }
  .navbar-nav .nav-link {
    border-radius: 10px;
    padding: 10px 14px;
    margin: 2px 0;
    font-size: 1rem;
    font-weight: 500;
  }
  .navbar-nav .nav-link:active {
    background: rgba(0,0,0,0.05);
  }

  /* ─── 7. Hero section ─── */
  .hero-section {
    padding-top: 120px;
    padding-bottom: 40px;
  }
  /* Purchase page: manifesto hero */
  .valley-manifesto { padding-top: 120px !important; }
  .hero-section h1 {
    font-size: clamp(32px, 9vw, 52px) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.06 !important;
  }
  .hero-section .custom-btn-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .hero-section .ratio {
    border-radius: 18px;
    overflow: hidden;
    margin-top: 32px;
  }

  /* ─── 8. About / Team section ─── */
  .about-section .col-lg-5 {
    background: rgba(255, 255, 255, 0.62);
    border-radius: 22px;
    padding: 28px 22px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 28px;
  }
  body[data-theme="dark"] .about-section .col-lg-5 {
    background: rgba(44, 44, 46, 0.62);
    box-shadow: 0 2px 20px rgba(0,0,0,0.28);
  }
  .member-block {
    background: rgba(255, 255, 255, 0.70);
    border-radius: 20px;
    padding: 18px 14px 16px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(0,0,0,0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  body[data-theme="dark"] .member-block {
    background: rgba(44, 44, 46, 0.70);
    box-shadow: 0 2px 14px rgba(0,0,0,0.32), 0 0 0 0.5px rgba(255,255,255,0.06);
  }

  /* ─── 9. Membership tier cards ─── */
  .valley-tier-card {
    border-radius: 22px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07) !important;
  }

  /* ─── 10. Membership fee table — Apple-style elevated container ─── */
  .membership-table-shell {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(0,0,0,0.06);
  }
  .membership-table-shell .table {
    margin-bottom: 0;
    font-size: 0.8rem;
  }
  .membership-table-shell thead th {
    padding: 14px 10px;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .membership-table-shell td,
  .membership-table-shell tbody th {
    padding: 12px 10px;
  }

  /* ─── 11. Events / Custom blocks ─── */
  .custom-block {
    border-radius: 22px !important;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  }
  .custom-block-image-wrap {
    border-radius: 0;
  }

  /* ─── 12. Newsletter / section-bg-image ─── */
  .section-bg-image-block {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    padding: 28px 22px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .section-bg-image-block input[type="email"] {
    border-radius: 12px 0 0 12px;
    min-height: 44px;
  }
  .section-bg-image-block button[type="submit"] {
    border-radius: 0 12px 12px 0;
    min-height: 44px;
    font-weight: 600;
    color: #fff !important;
    background: rgba(61, 64, 91, 0.88) !important;
    border-color: transparent !important;
  }

  /* ─── 13. Contact section cards ─── */
  .contact-section .col-lg-5,
  .contact-section .col-lg-4 {
    background: rgba(255,255,255,0.55);
    border-radius: 22px;
    padding: 24px 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  body[data-theme="dark"] .contact-section .col-lg-5,
  body[data-theme="dark"] .contact-section .col-lg-4 {
    background: rgba(44,44,46,0.55);
  }

  /* ─── 14. Footer ─── */
  .site-footer .navbar-brand {
    margin-bottom: 24px;
  }
  .site-footer-legal-links {
    font-size: 11px;
    line-height: 2.2;
  }

  /* ─── 15. Language / pref controls — pill group ─── */
  .wv-pref-controls {
    border-radius: 20px;
    padding: 6px;
  }

  /* ─── 16. Reserve section ─── */
  .wv-reserve-inner {
    padding: 0 4px;
  }
  .wv-reserve-benefits {
    background: rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 24px;
  }

  /* ─── 17. Tap highlight removal ─── */
  * {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ─── Navbar fit fix: xl desktop (1200px – 1440px) ──────────────
   Hamburger shows below 1200px; above 1200px compact the full desktop bar  */
@media (min-width: 1200px) and (max-width: 1440px) {
  /* Hide "Golf Club" subtitle to reclaim ~50px */
  .navbar-brand-text small { display: none !important; }

  /* Tighten brand gap */
  .navbar-brand { margin-right: 10px !important; }

  /* Shrink nav-link padding */
  .navbar .nav-link {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 0.86rem;
  }

  /* Compact CTA buttons */
  .navbar-desktop-actions .btn.custom-btn,
  .navbar-desktop-actions .btn.custom-btn.custom-border-btn {
    padding-left: 13px !important;
    padding-right: 13px !important;
    font-size: 0.8rem !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
  }

  /* Tighten desktop-actions gap */
  .navbar-desktop-actions.ms-xl-3 { margin-left: 6px !important; }

  /* Compact language buttons */
  .wv-lang-opt {
    min-width: 24px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
  }
  .wv-theme-btn { min-width: 46px !important; }
}

/* ─── Navbar collapse: tablet / small laptop (768px – 1199px) ───
   The hamburger shows in this range; style the expanded menu card  */
@media (min-width: 768px) and (max-width: 1199px) {
  .navbar-collapse.show {
    background: rgba(251, 251, 253, 0.96);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-radius: 0 0 16px 16px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
    padding: 12px 12px 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  }
  body[data-theme="dark"] .navbar-collapse.show {
    background: rgba(28, 28, 30, 0.96);
    border-top: 0.5px solid rgba(255,255,255,0.08);
  }
  .navbar-nav .nav-link {
    border-radius: 8px;
    padding: 9px 14px;
    margin: 2px 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1d1d1f !important;
  }
  body[data-theme="dark"] .navbar-nav .nav-link {
    color: #f5f5f7 !important;
  }
}

/* ── Mobile purchase page: compact deposit price rows ── */
@media (max-width: 767px) {
  .valley-deposit-tier-row {
    padding: 12px 0 !important;
  }
  .valley-deposit-tier-idx {
    margin-bottom: 2px !important;
    font-size: 0.7rem !important;
  }
  .valley-deposit-tier-name {
    font-size: 1.05rem !important;
    margin-bottom: 2px !important;
  }
  .valley-deposit-tier-total {
    font-size: 0.82rem !important;
    margin-bottom: 1px !important;
  }
  .valley-deposit-tier-amount {
    font-size: 1.05rem !important;
    margin: 0 !important;
  }
  /* ── Mobile tier cards: horizontal swipe carousel ── */
  /* Grid becomes a horizontal scroll strip */
  .valley-tier-grid {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Extend past container padding so first card sits flush */
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 12px !important;
    --bs-gutter-x: 0.75rem !important;
  }
  .valley-tier-grid::-webkit-scrollbar { display: none; }

  /* Each column: fixed card width showing ~1.5 cards */
  .valley-tier-grid > [class*="col-"] {
    flex: 0 0 auto !important;
    width: 72vw !important;
    max-width: 300px;
    scroll-snap-align: start;
  }

  /* Restore full card layout (not the cramped col-4 version) */
  .valley-tier-card {
    padding: 22px 18px 20px !important;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .valley-tier-card h2 {
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
  }
  .valley-tier-card h2 span { display: inline !important; }
  .valley-tier-index {
    font-size: 0.65rem !important;
    margin-bottom: 6px !important;
  }
  .valley-tier-lead { display: block !important; font-size: 0.78rem !important; }
  .valley-tier-meta { margin-top: 10px !important; }
  .valley-tier-fee-dim {
    display: block !important;
    font-size: 0.78rem !important;
    white-space: normal;
  }
  .valley-tier-deposit-badge {
    font-size: 0.65rem !important;
    padding: 3px 10px !important;
  }
  .valley-tier-benefits { display: block !important; }
  .valley-tier-benefits li {
    font-size: 0.78rem !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    line-height: 1.45 !important;
  }
  .valley-tier-card-action {
    margin-top: auto !important;
    min-height: 40px !important;
    font-size: 0.72rem !important;
    padding: 8px 12px !important;
    width: 100% !important;
  }
  /* Membership fee table: restore horizontal scroll on mobile */
  .membership-table-shell { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .membership-table-shell .table { min-width: 560px; }
}