/* =========================================================
   BWET PUBLIC DESIGN SYSTEM
   Shared across Home, Events, Tourism, Keep Fit, Contact,
   event/tour details and checkout.
   ========================================================= */

:root {
  --black: #090909;
  --black-soft: #141414;
  --white: #ffffff;
  --warm: #f7f4ec;
  --warm-2: #eee8dc;
  --ink: #171717;
  --muted: #6f6a60;
  --line: rgba(23, 23, 23, .14);
  --line-dark: rgba(255, 255, 255, .09);
  --gold: #c99a2f;
  --gold-deep: #946a12;
  --gold-pale: #f0dfaf;
  --green: #25D366;
  --red: #a43b3b;
  --container: 1280px;
  --radius-sm: 10px;
  --radius: 20px;
  --radius-lg: 28px;
  --shadow: 0 26px 80px rgba(0, 0, 0, .12);
  --section-space: clamp(78px, 9vw, 126px);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--warm) !important;
  color: var(--ink) !important;
  font-family: var(--font-body), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.container {
  width: min(100%, var(--container)) !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 5vw, 72px) !important;
}

/* ---------- Shared typography ---------- */

.eyebrow,
.hero-kicker {
  color: var(--gold-deep) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
}

.eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.eyebrow::before {
  content: "" !important;
  width: 28px !important;
  height: 1px !important;
  background: currentColor !important;
  flex: 0 0 auto !important;
}

.hero-kicker {
  color: var(--gold-pale) !important;
}

.section-title {
  color: var(--ink);
  line-height: .96 !important;
  letter-spacing: -.055em !important;
}

.section-copy,
.long-copy {
  color: var(--muted) !important;
}

/* ---------- Shared controls ---------- */

.btn,
.event-link,
.contact-action,
.checkout-button {
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 0 20px !important;
  border: 1px solid var(--ink) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease !important;
}

.btn:hover,
.event-link:hover,
.contact-action:hover,
.checkout-button:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--ink) !important;
  color: #fff !important;
}

.btn-dark,
.filled-link {
  background: var(--ink) !important;
  color: #fff !important;
}

.btn-dark:hover,
.filled-link:hover {
  border-color: var(--gold-deep) !important;
  background: var(--gold-deep) !important;
  color: #fff !important;
}

.btn-gold {
  border-color: var(--gold) !important;
  background: var(--gold) !important;
  color: #0c0c0c !important;
}

.btn-gold:hover {
  border-color: var(--white) !important;
  background: var(--white) !important;
  color: var(--black) !important;
}

.btn-whatsapp,
.contact-action.whatsapp {
  border-color: var(--green) !important;
  background: var(--green) !important;
  color: #fff !important;
}

.btn-whatsapp:hover,
.contact-action.whatsapp:hover {
  border-color: #128c47 !important;
  background: #128c47 !important;
  color: #fff !important;
}

.checkout-button {
  width: 100% !important;
  border-radius: 12px !important;
}

.checkout-button:disabled {
  opacity: .48;
  cursor: not-allowed;
}

/* ---------- Shared header ---------- */

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(9, 9, 9, .97) !important;
  border-bottom: 1px solid var(--line-dark) !important;
  backdrop-filter: blur(16px) !important;
}

.site-header .header-inner {
  min-height: 68px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
}

.site-header .brand-logo,
.site-header .site-logo {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.site-header .brand-logo img,
.site-header .site-logo img {
  width: 116px !important;
  height: 36px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.site-header .desktop-nav,
.site-header .site-nav {
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
}

.site-header .desktop-nav a,
.site-header .site-nav a {
  position: relative !important;
  padding: 23px 0 21px !important;
  color: rgba(255, 255, 255, .68) !important;
  font-size: 12.5px !important;
  font-weight: 720 !important;
  white-space: nowrap !important;
}

.site-header .desktop-nav a::after,
.site-header .site-nav a::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 13px !important;
  left: 0 !important;
  height: 2px !important;
  background: var(--gold) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform .18s ease !important;
}

.site-header .desktop-nav a:hover,
.site-header .desktop-nav a.active,
.site-header .site-nav a:hover,
.site-header .site-nav a.active {
  color: #fff !important;
}

.site-header .desktop-nav a:hover::after,
.site-header .desktop-nav a.active::after,
.site-header .site-nav a:hover::after,
.site-header .site-nav a.active::after {
  transform: scaleX(1) !important;
}

.site-header .menu-toggle {
  display: none !important;
  width: 40px !important;
  height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #fff !important;
  cursor: pointer !important;
}

.site-header .menu-toggle svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.8 !important;
}

.site-header .mobile-nav {
  display: none !important;
}

.checkout-header-label {
  color: var(--gold-pale) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* ---------- Shared color rhythm ---------- */

/* Dark / immersive sections */
.hero,
.events-hero,
.tourism-hero,
.keepfit-hero,
.contact-hero,
.detail-hero,
.founder,
.join,
.final-cta,
.tour-cta,
.contact-cta {
  background-color: var(--black) !important;
  color: #fff !important;
}

/* Eyebrows inside dark sections */
.hero .eyebrow,
.events-hero .eyebrow,
.tourism-hero .eyebrow,
.keepfit-hero .eyebrow,
.contact-hero .eyebrow,
.detail-hero .eyebrow,
.founder .eyebrow,
.join .eyebrow,
.final-cta .eyebrow,
.tour-cta .eyebrow,
.contact-cta .eyebrow {
  color: var(--gold-pale) !important;
}

/* Warm content sections */
.intro,
.upcoming,
.events-schedule,
.tourism-intro,
.trips,
.keepfit-intro,
.community,
.contact-options,
.experience-section,
.experience,
.checkout-page {
  background-color: var(--warm) !important;
}

/* White contrast sections */
.divisions,
.gallery,
.archive,
.destinations,
.principles,
.brand-note,
.tickets-section,
.tickets,
.bottom-back {
  background-color: var(--white) !important;
}

/* Universal separators */
.event-row,
.home-event-row,
.public-ticket,
.ticket,
.contact-row,
.feature-list li,
.fact,
.principle {
  border-color: var(--line) !important;
}

/* ---------- Shared cards / image treatment ---------- */

.destination-card,
.trip-card,
.gallery-item,
.community-media,
.brand-story-image,
.feature-visual,
.moment-card,
.service-image {
  border-radius: var(--radius) !important;
}

.gallery-item,
.community-media,
.brand-story-image {
  box-shadow: 0 18px 58px rgba(0, 0, 0, .08);
}

/* ---------- Shared status / accent rules ---------- */

.event-status,
.event-month,
.home-event-date span,
.division-number,
.principle-number,
.fact span,
.contact-index {
  color: var(--gold-deep) !important;
}

.detail-status {
  border-color: rgba(201, 154, 47, .5) !important;
  color: var(--gold-pale) !important;
}

.sold-out-label,
.sold-out {
  color: var(--red) !important;
}

.closed-label,
.closed {
  color: var(--muted) !important;
}

/* ---------- Shared footer ---------- */

.site-footer,
.events-footer,
.detail-footer {
  padding: 58px 0 28px !important;
  background: var(--black) !important;
  color: #fff !important;
  border-top: 1px solid var(--line-dark) !important;
}

.site-footer .footer-shell {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.45fr) repeat(4, minmax(120px, .62fr)) !important;
  gap: 34px !important;
  padding-bottom: 44px !important;
}

.site-footer .footer-brand img,
.site-footer .footer-logo img,
.events-footer .footer-logo img,
.detail-footer .footer-logo img {
  width: 116px !important;
  height: 36px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.site-footer .footer-brand p,
.site-footer .footer-copy,
.events-footer .footer-copy {
  max-width: 360px !important;
  margin: 15px 0 0 !important;
  color: rgba(255, 255, 255, .50) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

.site-footer .footer-col h3 {
  margin: 0 0 14px !important;
  color: var(--gold-pale) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.site-footer .footer-col a,
.site-footer .footer-col span,
.site-footer .footer-links a,
.events-footer .footer-links a,
.detail-footer .footer-links a {
  color: rgba(255, 255, 255, .62) !important;
  font-size: 13px !important;
}

.site-footer .footer-col a {
  display: block !important;
  margin: 9px 0 !important;
}

.site-footer .footer-col a:hover,
.site-footer .footer-links a:hover,
.events-footer .footer-links a:hover,
.detail-footer .footer-links a:hover {
  color: #fff !important;
}

.site-footer .footer-bottom,
.events-footer .footer-bottom,
.detail-footer .footer-bottom {
  padding-top: 22px !important;
  border-top: 1px solid var(--line-dark) !important;
  color: rgba(255, 255, 255, .38) !important;
  font-size: 12px !important;
}

/* ---------- WhatsApp action ---------- */

.floating-whatsapp {
  background: var(--green) !important;
  color: #fff !important;
  box-shadow: var(--shadow) !important;
}

/* ---------- Checkout consistency ---------- */

.checkout-page {
  width: min(100%, var(--container)) !important;
  margin-inline: auto !important;
  padding: 54px clamp(20px, 5vw, 72px) 100px !important;
}

.checkout-layout {
  gap: clamp(40px, 6vw, 82px) !important;
}

.checkout-form-section {
  border-color: var(--line) !important;
}

.checkout-form-section input,
.checkout-form-section select {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  background: #fff !important;
}

.checkout-form-section input:focus,
.checkout-form-section select:focus {
  border-color: var(--gold-deep) !important;
  box-shadow: 0 0 0 3px rgba(201, 154, 47, .14) !important;
}

.checkout-summary {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--warm-2) !important;
}

.reservation-page {
  background: var(--warm) !important;
  color: var(--ink) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .site-header .desktop-nav,
  .site-header .site-nav {
    display: none !important;
  }

  .site-header .menu-toggle {
    display: inline-flex !important;
  }

  .site-header .mobile-nav {
    position: fixed !important;
    top: 68px !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 999 !important;
    display: grid !important;
    max-height: 0 !important;
    overflow: hidden !important;
    background: var(--black) !important;
    border-bottom: 1px solid var(--line-dark) !important;
    transition: max-height .3s ease !important;
  }

  .site-header .mobile-nav.open {
    max-height: 430px !important;
  }

  .site-header .mobile-nav a {
    padding: 17px 22px !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    color: rgba(255, 255, 255, .76) !important;
    font-size: 14px !important;
    font-weight: 750 !important;
  }

  .site-header .mobile-nav a.active {
    color: var(--gold-pale) !important;
  }

  .site-footer .footer-shell {
    grid-template-columns: 1.2fr 1fr !important;
  }

  .site-footer .footer-brand {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 620px) {
  .site-header .header-inner {
    min-height: 64px !important;
  }

  .site-header .brand-logo img,
  .site-header .site-logo img {
    width: 104px !important;
    height: 32px !important;
  }

  .site-header .mobile-nav {
    top: 64px !important;
  }

  .site-footer,
  .events-footer,
  .detail-footer {
    padding-top: 48px !important;
  }

  .site-footer .footer-shell {
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 22px !important;
  }

  .site-footer .footer-brand {
    grid-column: 1 / -1 !important;
  }

  .site-footer .footer-brand img,
  .site-footer .footer-logo img,
  .events-footer .footer-logo img,
  .detail-footer .footer-logo img {
    width: 104px !important;
    height: 32px !important;
  }

  .site-footer .footer-bottom,
  .events-footer .footer-bottom,
  .detail-footer .footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .floating-whatsapp {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .floating-whatsapp span {
    display: none !important;
  }
}
/* ---------- BWET SVG icon system ---------- */
.bnet-icon{width:1.08em;height:1.08em;display:inline-block;flex:0 0 auto;vertical-align:-.14em;color:currentColor}
.desktop-nav a,.mobile-nav a,.site-nav a,.nav-item,.back-link,.primary-action,.secondary-button,.small-action,.checkout-button,.contact-action,.nav-whatsapp,.btn.has-svg-icon,.logout-button.has-svg-icon{display:inline-flex;align-items:center;gap:.5rem}
.desktop-nav .bnet-icon{width:15px;height:15px;opacity:.82}
.desktop-nav a:hover .bnet-icon,.desktop-nav a.active .bnet-icon{opacity:1;color:var(--gold,#c9a34e)}
.mobile-nav .bnet-icon{width:18px;height:18px;color:var(--gold,#c9a34e)}
.btn .bnet-icon,.primary-action .bnet-icon,.secondary-button .bnet-icon,.checkout-button .bnet-icon,.contact-action .bnet-icon,.small-action .bnet-icon{width:17px;height:17px}
.back-link .bnet-icon{width:16px;height:16px}
.nav-item .bnet-icon{width:18px;height:18px;color:#d5b568}
.logout-button .bnet-icon{width:17px;height:17px}
.service-icon{width:24px;height:24px;color:var(--gold,#c9a34e);margin-right:.35rem;vertical-align:-.28em}
@media(max-width:920px){.desktop-nav .bnet-icon{display:none}}



/* ---------- BWET loading states ---------- */
.ui-loading,
.loading-state {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}
.ui-spinner,
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(23,23,23,.16);
  border-top-color: var(--gold-deep);
  border-radius: 50%;
  animation: bwet-spin .72s linear infinite;
}
@keyframes bwet-spin { to { transform: rotate(360deg); } }

/* Keep public controls consistent with the 9px system radius. */
.btn,
.event-link,
.contact-action,
.checkout-button,
.back-link,
input,
select,
textarea { border-radius: 9px !important; }

/* Full BWET logo sizing */
.site-header .brand-logo img,.site-header .site-logo img{width:154px!important;height:44px!important;object-fit:contain!important;}
.site-footer img,.footer-brand img{max-width:190px!important;height:auto!important;}
@media(max-width:640px){.site-header .brand-logo img,.site-header .site-logo img{width:132px!important;height:38px!important;}}