/* === Bali Golf Tours — clone design overrides (restore Flatsome JS-driven states) === */
:root { --fs-color-primary:#1e512c; --fs-color-secondary:#ff4303; }

/* Flatsome icon font — declared here (loads reliably on every page via the head
   injection) so header icons never fall back to tofu when a page's inline critical
   CSS gets dropped by malformed mirrored markup (e.g. the /shop-2/ JA Services page). */
/* NOTE: the mirror saved these files with the query string literally in the filename
   (fl-icons.woff2?v=3.20.7), so the ? must be percent-encoded (%3F) to match on disk. */
@font-face{font-family:"fl-icons";font-style:normal;font-weight:normal;font-display:block;
  src:url("/wp-content/themes/flatsome/assets/css/icons/fl-icons.woff2%3Fv=3.20.7") format("woff2"),
      url("/wp-content/themes/flatsome/assets/css/icons/fl-icons.woff%3Fv=3.20.7") format("woff"),
      url("/wp-content/themes/flatsome/assets/css/icons/fl-icons.ttf%3Fv=3.20.7") format("truetype");}

/* LQIP blur-up: lazy images carry a tiny blurred WebP placeholder (src) and fade from
   blur to sharp once the real image loads (the resolver adds .lazyloaded on load). */
img.lazy-load { transition: filter .45s ease, opacity .45s ease; }
img.lazy-load:not(.lazyloaded) { filter: blur(14px); clip-path: inset(0); }

/* Solid WHITE header (no transparent overlay), sticky at top */
#header, .header { position: relative !important; }
#header .header-wrapper, .header .header-wrapper {
  position: sticky !important; top: 0 !important; z-index: 100 !important;
  background-color: #fff !important;
  box-shadow: 0 1px 10px rgba(0,0,0,.08) !important;
}
#header .header-bg, .header .header-bg { opacity: 1 !important; background-color: #fff !important; }
/* dark nav text/icons on the white bar */
.header .header-main .nav > li > a,
.header .header-main .nav > li > a:visited,
.header-main a.icon, .header .nav > li > a { color:#1a1a1a !important; }
.header .header-main .nav > li > a:hover { color: var(--fs-color-secondary) !important; }

/* Logo size to match the live white header */
.header-logo img, .logo img { height: 70px !important; width: auto !important; max-height: 70px !important; }

/* Button fills (Flatsome semantics: secondary = orange CTA, primary = green) */
.button.secondary, a.button.secondary, button.secondary, input[type=submit].secondary {
  background-color: #ff4303 !important; border-color:#ff4303 !important; color:#fff !important;
}
.button.primary, a.button.primary, button.primary {
  background-color: #1e512c !important; border-color:#1e512c !important; color:#fff !important;
}
/* base button shape (square, uppercase) in case theme button styles are partial */
.button, a.button, button.button { text-transform: uppercase; font-weight: 700; border-radius: 0; }

/* high-specificity literal overrides (win over body inline styles) */
html body a.button.secondary, html body .button.secondary { background-color:#ff4303 !important; color:#fff !important; }
html body a.button.primary, html body .button.primary { background-color:#1e512c !important; color:#fff !important; }

/* === Self-hosted fonts (live site injects these via JS; localized here) === */
@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/fonts/lato/S6uyw4BMUTPHjx4wXg.woff2") format("woff2");}
@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/fonts/lato/S6uyw4BMUTPHjxAwXjeu.woff2") format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;src:url("/wp-content/fonts/lato/S6u9w4BMUTPHh6UVSwiPGQ.woff2") format("woff2");}
@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;src:url("/wp-content/fonts/lato/S6u9w4BMUTPHh6UVSwaPGR_p.woff2") format("woff2");unicode-range:U+100-2BA,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Marcellus SC";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/fonts/marcellus-sc/ke8iOgUHP1dg-Rmi6RWjbLE_htac.woff2") format("woff2");}
@font-face{font-family:"Marcellus SC";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/fonts/marcellus-sc/ke8iOgUHP1dg-Rmi6RWjbLE_iNacKKg.woff2") format("woff2");unicode-range:U+100-2BA,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Dancing Script";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/fonts/dancing-script/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3ROp8ltA.woff2") format("woff2");}

/* apply the brand fonts (rules are injected by JS on live, missing in static mirror) */
html body, html body p, html body li, html body a, html body span, html body div,
html body input, html body select, html body button, .nav, .menu { font-family:"Lato", sans-serif; }
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
.is-title, .uppercase { font-family:"Marcellus SC", Georgia, serif !important; }
/* spans inside headings must inherit the heading font (the global span→Lato rule
   above otherwise overrides it — e.g. the mobile hero wraps text in spans). */
html body h1 span, html body h2 span, html body h3 span,
html body h4 span, html body h5 span, html body h6 span { font-family:inherit !important; }

/* Footer contact buttons: white bg, black text (override the global primary green) */
html body footer .button, html body footer .button.primary,
html body .footer .button.primary, html body #footer .button.primary {
  background-color:#ffffff !important; border-color:#ffffff !important; color:#111111 !important;
}
html body footer .button:hover, html body footer .button.primary:hover {
  background-color:#f0f0f0 !important; color:#000 !important;
}

/* Logo: keep correct size, add breathing room via padding (not scaling) */
.header-logo, .logo { padding: 4px 0 !important; display:flex !important; align-items:center !important; }
.header-logo img, .logo img { margin: 0 8px !important; }

/* Header cart total + currency switcher — normalise both to ONE consistent spec so they
   sit at the same size, weight, colour and vertical centre (the themed cart title and the
   YayCurrency select were diverging). */
.header-cart-link .header-cart-title,
.header-cart-link .cart-price,
.header-cart-link .cart-price .amount,
.header-cart-link .cart-price bdi,
.header-cart-link .woocommerce-Price-currencySymbol,
.yay-currency-custom-selected-option,
.yay-currency-selected-option{
  font-size:15px !important;
  font-weight:600 !important;
  color:#1a1a1a !important;
  letter-spacing:.02em !important;
  line-height:1 !important;
}
/* Vertically centre the cart link, divider and currency trigger on one baseline. */
.header-nav-main > li.cart-item,
.header-nav-main > li.header-divider,
.header-nav-main > li.html_nav_position_text_top,
.header-cart-link,
.yay-currency-shortcode-switcher,
.yay-currency-single-page-switcher{
  display:inline-flex !important;
  align-items:center !important;
}
/* The cart glyph after the text — match its size to the text and centre it. */
.header-cart-link .icon-shopping-cart{
  font-size:17px !important;
  margin-left:7px !important;
  line-height:1 !important;
  vertical-align:middle !important;
  display:inline-flex !important;
  align-items:center !important;
}

/* Currency select box: borderless rounded pill, no extra min-height so it lines up. */
.yay-currency-custom-select__trigger{
  border:0 !important;
  border-radius:20px !important;
  padding:0 4px !important;
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
}
.yay-currency-custom-arrow::before,
.yay-currency-custom-arrow::after{
  background-color:#1a1a1a !important; /* chevron matches the text colour */
}

/* Currency switcher — self-contained styling. The plugin's own yaycurrency-pro/src/styles.css
   serves unreliably on the static mirror (404 ↔ 200), so we OWN the whole switcher here with
   !important, giving a deterministic look regardless of whether the plugin CSS loads. */

/* Hide the plugin loading-spinner ring — the plugin only display:none's it in its own CSS;
   when that's absent it renders as a bordered ring next to the chevron. */
.yay-currency-custom-loader{ display:none !important; }

/* Dropdown PANEL — hidden by default; without this it flashes open in normal flow on load
   (see _bgt-currency.js doc-click handler). Anchored to the switcher's right edge with a
   comfortable min-width so the 3-letter codes never clip and it can't overflow off-screen. */
.yay-currency-custom-select{ position:relative !important; }
.yay-currency-custom-options{
  position:absolute !important; top:100% !important; right:0 !important; left:auto !important;
  min-width:110px !important; width:auto !important; margin:2px 0 0 !important; padding:0 !important;
  background:#fff !important; border:1px solid #ccc !important; border-radius:6px !important;
  max-height:250px; overflow:auto; z-index:99999; box-shadow:0 6px 18px rgba(0,0,0,.12);
  height:0 !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transition:opacity .15s;
}
.yay-currency-custom-select.open .yay-currency-custom-options{
  height:auto !important; opacity:1 !important; visibility:visible !important; pointer-events:all !important;
}
.yay-currency-custom-option-row{
  display:flex !important; align-items:center; justify-content:flex-start;
  list-style:none !important; margin:0 !important; padding:9px 14px !important;
  color:#1a1a1a !important; font-size:14px !important; line-height:1.1 !important; background:#fff !important;
}
.yay-currency-custom-option{ list-style:none !important; margin:0 !important; padding:0 !important; font-size:14px !important; white-space:nowrap; }
.yay-currency-custom-option-row:hover{ cursor:pointer; background:#f5f7fa !important; }
.yay-currency-custom-option-row.selected{ color:#fff !important; background:#2b8a5b !important; }

/* === Original date picker (jQuery UI Datepicker) — restore live styling ===
   Ported from the live child theme + YayExtra CSS, lost in the static mirror.
   Styles the "Date" field + calendar popup on product/course pages. */

/* Date field + its sibling selects: orange pill (live .product select/input) */
html body .product select, html body .product input {
  border: 1px solid #ff4306 !important;
  border-radius: 20px !important;
  height: 41px !important;
  font-size: 16px !important;
  margin-bottom: 0 !important;
}

/* Calendar popup container */
#ui-datepicker-div {
  background: #fff;
  width: 360px;
  box-sizing: border-box;
  padding: 0 18px !important;   /* breathing room so the grid isn't on the edge */
  margin-top: 10px;
  border-radius: 23px !important;
  box-shadow: 0 0 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.10);
}
#ui-datepicker-div th { padding: 0 0 12px 0 !important; color: #676767; }

/* Day cells: uniform centered circles */
#ui-datepicker-div td { padding: 2px !important; text-align: center !important; }
#ui-datepicker-div td a,
#ui-datepicker-div td span {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0 auto;
  padding: 0 !important;
  text-align: center !important;
  text-decoration: none;
  font-weight: 700 !important;
  color: #333;
  border-radius: 50%;
  box-sizing: border-box;
}
#ui-datepicker-div table.ui-datepicker-calendar > tbody > tr > td { cursor: pointer; }
#ui-datepicker-div .ui-datepicker-header > a { cursor: pointer; }
#ui-datepicker-div .ui-datepicker-header > .ui-datepicker-prev { margin-right: 2rem; }

/* Header + month title */
.ui-datepicker-header {
  position: relative;
  padding: .2em 0;
  border: 1px solid #dddddd;
  background: #e9e9e9;
  color: #333;
  font-weight: bold;
  border-radius: 8px;
  margin: 25px 7px;   /* 18px container padding + 7px = ~25px total inset */
}
.ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }

/* Prev / next month arrows — single, clean glyph (we own it).
   The static mirror already paints a "←/→" ::before glyph on the anchors, and
   the ported child-theme PNGs stacked a second arrow on top. Drop the PNG layer
   (hide the .ui-icon span) and render one crisp chevron via ::before. */
#ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next {
  position: absolute;
  top: -2px;                    /* sit high in the header */
  width: 2.4em; height: 2.4em;
  margin: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
}
#ui-datepicker-div .ui-datepicker-prev { left: 8px; }
#ui-datepicker-div .ui-datepicker-next { right: 8px; }
.ui-datepicker-prev .ui-icon, .ui-datepicker-next .ui-icon { display: none !important; }
/* big, crisp CSS chevrons (glyphs render too thin to read as arrows) */
#ui-datepicker-div .ui-datepicker-prev::before,
#ui-datepicker-div .ui-datepicker-next::before {
  content: "" !important;
  width: 9px; height: 9px;
  border: solid #333 !important;
  border-width: 0 !important;
  opacity: .75;
}
#ui-datepicker-div .ui-datepicker-prev::before {
  border-left-width: 2px !important; border-bottom-width: 2px !important;
  transform: rotate(45deg); margin-left: 3px;       /* points left */
}
#ui-datepicker-div .ui-datepicker-next::before {
  border-top-width: 2px !important; border-right-width: 2px !important;
  transform: rotate(45deg); margin-right: 3px;      /* points right */
}
.ui-datepicker-prev:hover::before, .ui-datepicker-next:hover::before { opacity: 1; }
.ui-datepicker-prev.ui-state-disabled, .ui-datepicker-next.ui-state-disabled { opacity: .3; cursor: default; }

/* Calendar grid */
.ui-datepicker-calendar { margin-bottom: 10px; width: 100%; padding: 8px 4px 22px 4px; }
.ui-datepicker-calendar th, .ui-datepicker-div th { text-align: center !important; }
.ui-datepicker-calendar thead th { padding-bottom: 20px !important; }
.ui-datepicker-calendar thead tr th { padding-bottom: 18px !important; }
.ui-datepicker-calendar td { border: none !important; }
#ui-datepicker-div td a:hover { background: #eaeaea; }
/* today */
.ui-datepicker-today a, .ui-datepicker-today span { background: #fff8b9; color: #333; }
/* selected day */
#ui-datepicker-div td a.ui-state-active { background: #1e512c !important; color: #fff !important; }
/* disabled (past) days — no circle, just muted text */
#ui-datepicker-div td.ui-state-disabled,
#ui-datepicker-div td.ui-state-disabled span {
  background: none !important;
  box-shadow: none !important;
}
#ui-datepicker-div td.ui-state-disabled span { color: #cfcfcf; }

/* Mobile: full-width bottom sheet (live @media rules) */
@media only screen and (max-width: 600px) {
  #ui-datepicker-div {
    left: 0 !important; right: 0;
    background: #fff;
    width: 100% !important;
    padding: 0 !important;
    top: auto !important;
    bottom: 23%;
    position: fixed !important;
  }
}
@media only screen and (max-width: 450px) {
  #ui-datepicker-div td a, #ui-datepicker-div td span {
    width: 11vw; height: 11vw; padding: 0 !important; border-radius: 50%;
  }
}

/* === Remove WooCommerce leftovers — KEEP the header cart (with badge), drop login/account
   and the native mini-cart panels (the bgt drawer replaces them). === */
li.account-item, .header-account-title, .account-item,
.widget_shopping_cart, .off-canvas-cart, #cart-popup,
.cart-item .nav-dropdown,
.mobile-sidebar .cart-item, .mobile-sidebar .account-item { display: none !important; }
/* show the header cart icon + count badge */
li.cart-item, .header-cart-link { display: inline-block !important; }

/* === Slider: stop cells animating into position on load === */
/* Flickity positions cells via transform; the theme's transform-transition animates that on init. */
.slider .flickity-slider { transition: none !important; }
.slider .flickity-slider > .img,
.slider .flickity-viewport .img.has-hover { transition: opacity .6s, box-shadow .6s !important; }

/* === Product gallery: kill the pre-Flickity-init layout shift (CLS ~0.28 on mobile) === */
/* Before Flickity adds .flickity-enabled, the gallery's slides stack vertically; on init they
   collapse into a single-slide carousel — a large layout shift measured on product pages
   (new-kuta: CLS 0.29, "Poor"). Constrain the pre-init slider to just the first slide so its
   height already matches the initialized state, eliminating the collapse. Scoped to
   :not(.flickity-enabled): both rules go fully inert the instant Flickity takes over, so they
   cannot affect the live/interactive gallery — worst case (if init is ever skipped) the extra
   slides stay hidden, which is the correct fallback anyway. */
.slider.slider-style-container:not(.flickity-enabled) { overflow: hidden; }
.slider.slider-style-container:not(.flickity-enabled) > .img:not(:first-child) { display: none; }

/* === Booking widget: total price (restore live YayExtra sizing) === */
/* The currency layer (_bgt-currency.js) hides the native .yayextra-total-price — its YayExtra
   token markup fights us — and renders the visible total into a sibling .bgt-total it creates:
   `<span class="total-price-title">…</span> <span class="total-price">Rp …</span>`.
   So the VISIBLE element to style is `.bgt-total .total-price`, NOT the hidden native one.
   We also style `.yayextra-total-price` to match, so the native element (shown for a beat before
   JS hides it on load) is already big — no big→small flash during hydration.
   Use rem (not em) so size can't compound if a .woocommerce-Price-amount ever nests inside. */
.bgt-total { margin-bottom: 1em; }
.bgt-total .total-price-title,
.yayextra-total-price .total-price-title { font-size: 16px; font-weight: 400; margin-right: 7px; }
.bgt-total .total-price,
.yayextra-total-price span.total-price,
.yayextra-total-price span.total-price .woocommerce-Price-amount {
  display: block; color: #111; white-space: nowrap;
  font-size: 1.6rem !important; font-weight: 700 !important;
}

/* === Footer address: WP content hard-codes it green inline (color:#0e590e) — owner wants
   it neutral gray like the rest of the footer text. !important beats the inline style. === */
html body #footer [style*="0e590e"],
html body #footer h5 span { color: #555555 !important; }

/* === Branded flatpickr date picker (green header, brand-green selection, orange today) === */
.flatpickr-calendar { font-family: "Lato", sans-serif !important; border:none !important; border-radius:10px !important; box-shadow:0 10px 34px rgba(0,0,0,.18) !important; overflow:hidden; }
.flatpickr-calendar.arrowTop:after { border-bottom-color:#1e512c !important; }
.flatpickr-calendar.arrowBottom:after { border-top-color:#fff !important; }
.flatpickr-months { background:#1e512c !important; padding:6px 0 4px !important; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-current-month input.cur-year, .flatpickr-monthDropdown-months { color:#fff !important; font-weight:700 !important; }
.flatpickr-monthDropdown-months { background:#1e512c !important; }
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { color:#1a1a1a !important; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill:#fff !important; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill:#ff4303 !important; }
.numInputWrapper span.arrowUp:after { border-bottom-color:#fff !important; }
.numInputWrapper span.arrowDown:after { border-top-color:#fff !important; }
.flatpickr-weekdays { background:#fff !important; box-shadow: inset 0 -1px 0 #eee !important; padding-top:4px !important; }
span.flatpickr-weekday { color:#6b7d70 !important; font-weight:700 !important; font-size:.8rem !important; }
.flatpickr-day { color:#333 !important; border-radius:50% !important; height:auto !important; aspect-ratio:1 / 1 !important; line-height:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; }  /* square cells: height tracks the % width */
.flatpickr-day:hover, .flatpickr-day:focus { background:#eef4ef !important; border-color:#eef4ef !important; }
.flatpickr-day.today { border-color:#ff4303 !important; color:#ff4303 !important; font-weight:700 !important; }
.flatpickr-day.today:hover { background:#ff4303 !important; border-color:#ff4303 !important; color:#fff !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { background:#1e512c !important; border-color:#1e512c !important; color:#fff !important; box-shadow:none !important; }
.flatpickr-day.flatpickr-disabled { color:#cbcbcb !important; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color:#9aa39c !important; }
.flatpickr-input.altInput, input.altInput { cursor:pointer; }

/* date picker: a little more breathing room around the day grid */
.flatpickr-calendar { width: auto !important; padding-bottom: 8px !important; }
.flatpickr-innerContainer { padding: 6px 12px 4px !important; }
.flatpickr-day { margin: 2px 0 !important; }

/* date picker: align weekday labels with day columns (flatpickr caps days at 39px → drift) */
span.flatpickr-weekday { flex: 0 0 14.2857% !important; max-width: 14.2857% !important; }
.flatpickr-day { flex: 0 0 14.2857% !important; max-width: 14.2857% !important; }

/* === date picker header refinement: clean centered month/year, no native select chrome === */
.flatpickr-months { display:flex !important; align-items:center !important; justify-content:center !important; height:48px !important; padding:0 !important; position:relative; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { position:absolute !important; top:0 !important; height:48px !important; width:auto !important; display:flex !important; align-items:center !important; padding:0 16px !important; }
.flatpickr-months .flatpickr-prev-month { left:0 !important; }
.flatpickr-months .flatpickr-next-month { right:0 !important; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width:14px !important; height:14px !important; }
.flatpickr-current-month { position:static !important; left:auto !important; width:auto !important; transform:none !important; padding:7px 0 0 !important; height:auto !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; line-height:1 !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important;
  background:transparent !important; border:none !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; font-size:1.05rem !important; font-weight:700 !important;
  text-align:right !important; text-align-last:right !important; cursor:pointer;
}
.flatpickr-current-month .cur-month { font-size:1.05rem !important; font-weight:700 !important; margin:0 !important; }  /* static month text — match the year size */
.flatpickr-current-month input.cur-year { font-size:1.05rem !important; font-weight:700 !important; padding:0 !important; }
.flatpickr-current-month .numInputWrapper { width: 4.2ch !important; }
.flatpickr-current-month .numInputWrapper span { display:none !important; }  /* hide year spinner arrows */

/* contact form: left-align field labels (they inherit centered alignment) */
.wpforms-form .wpforms-field-label,
.wpforms-form .wpforms-field-sublabel,
.wpforms-form .wpforms-field label { text-align: left !important; display: block !important; }
.wpforms-form .wpforms-field { text-align: left !important; }

/* hide broken Google reCAPTCHA (tied to old domain; we use a honeypot + server validation) */
.wpforms-form .wpforms-recaptcha-container,
.wpforms-form .g-recaptcha,
.wpforms-form div[class*="recaptcha" i] { display: none !important; }

/* contact form: remove redundant labels (placeholders convey the fields); kept for a11y/screen-readers */
.wpforms-form .wpforms-field-label,
.wpforms-form .wpforms-field > label {
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

/* ============================================================================
   Booking cart — slide-out drawer + /cart page (restores the lost WooCommerce
   cart). Brand: orange CTA #ff4303, green #1e512c, Marcellus SC headings.
   ============================================================================ */
.bgt-btn{display:inline-block;background:#ff4303;color:#fff !important;border:0;padding:13px 20px;
  text-transform:uppercase;font-weight:700;letter-spacing:.03em;cursor:pointer;text-align:center;
  border-radius:3px;text-decoration:none;font-size:14px;line-height:1.2}
.bgt-btn:hover{filter:brightness(.93)}
.bgt-btn-ghost{display:block;width:100%;background:none;border:0;color:#1e512c;cursor:pointer;
  padding:10px;font-weight:600;font-size:13px;text-decoration:underline}
.bgt-empty{color:#777;font-size:15px}

/* ---- Cart drawer ---- mirrors the burger off-canvas (#main-menu.bgt-drawer in _bgt-menu.js)
   but slides from the RIGHT: same overlay tint, panel slide timing, shadow weight, max-width
   and green close, so the cart and menu drawers feel like one component. */
#bgt-drawer{position:fixed;inset:0;z-index:10000;visibility:hidden;opacity:0;transition:opacity .28s ease}
#bgt-drawer.open{visibility:visible;opacity:1}
#bgt-drawer .bgt-drawer-ov{position:absolute;inset:0;background:rgba(0,0,0,.5)}
#bgt-drawer .bgt-drawer-panel{position:absolute;top:0;right:0;height:100%;width:340px;max-width:86vw;
  background:#fff;box-shadow:-4px 0 26px rgba(0,0,0,.22);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s ease}
#bgt-drawer.open .bgt-drawer-panel{transform:translateX(0)}
.bgt-drawer-head{position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:18px 56px 18px 22px;border-bottom:1px solid #eee}
.bgt-drawer-head h3{margin:0;font-family:"Marcellus SC",Georgia,serif;color:#1e512c;font-size:20px}
/* Close pinned to the panel's top-right corner (matches the burger menu's .bgt-menu-close). */
#bgt-drawer .bgt-drawer-x{position:absolute !important;top:-2px !important;right:10px !important;z-index:3;
  margin:0 !important;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;font-size:30px;line-height:1;cursor:pointer;color:#1e512c;padding:0}
.bgt-drawer-items{flex:1;overflow-y:auto;padding:8px 22px}
.bgt-drawer-items .bgt-empty{padding:34px 6px;text-align:center;line-height:1.6}
.bgt-drawer-foot{border-top:1px solid #eee;padding:18px 22px}
.bgt-drawer-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;
  font-size:16px}
.bgt-drawer-total strong{font-size:20px;color:#1e512c}
.bgt-checkout{width:100%}

/* ---- Product thumbnails (WooCommerce-style cart image) ---- */
/* .bgt-thumb is the sized box; <img> fills it; falls back to a golf-flag placeholder */
.bgt-thumb{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  background:#eef3ee;border-radius:3px;flex:0 0 auto;vertical-align:middle}
.bgt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bgt-thumb.is-empty::after{content:"⛳";font-size:18px;line-height:1;opacity:.45}
.bgt-line-thumb{width:54px;height:54px}
.bgt-crow-img{width:88px}
.bgt-crow-thumb{width:72px;height:72px}

/* ---- Line item (shared by drawer + cart page) ---- */
.bgt-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #f0f0f0}
.bgt-line-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.bgt-line-title{font-weight:700;color:#222;font-size:15px;text-decoration:none}
.bgt-line-meta{font-size:12px;color:#888;line-height:1.4}
/* structured booking-detail list (label / value), WooCommerce-cart style */
.bgt-meta{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0 0;font-size:12.5px;line-height:1.45;text-transform:none}
.bgt-meta dt{margin:0;color:#7c8694;font-weight:400;white-space:nowrap;text-transform:none}
.bgt-meta dt::after{content:":"}
.bgt-meta dd{margin:0;color:#222;font-weight:600;text-transform:none}
.bgt-cart-table .bgt-meta{font-size:13px}
.bgt-line-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.bgt-line-price{font-weight:700;color:#1e512c}
.bgt-line-rm{border:0;background:none;color:#c0392b;cursor:pointer;font-size:12px;padding:0;text-decoration:underline}

/* ---- /cart page — original 3-step (Shopping Cart › Checkout Details › Order Complete) ---- */
#bgt-cart-page{max-width:1180px;margin:0 auto;padding:10px 0 50px}
.bgt-cart-h1{font-family:"Marcellus SC",Georgia,serif;color:#1e512c;font-size:30px;margin:0 0 14px}
/* step breadcrumb — Flatsome "checkout-breadcrumbs heading-font h3 uppercase" look */
.bgt-steps{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:6px 0 42px;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.bgt-step{display:inline-flex;align-items:center;gap:11px;font-size:18px;color:#c2c2c2;font-weight:700;line-height:1}
/* beat the global `span{font-family:inherit!important}` rule with the elegant heading font */
.bgt-steps .bgt-step,.bgt-steps .bgt-step-t{font-family:"Marcellus SC",Georgia,"Times New Roman",serif !important}
.bgt-step-t{line-height:1}
.bgt-step.is-current{color:#222}
.bgt-step-n{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:27px;height:27px;border-radius:50%;background:#cfcfcf;color:#fff;font-size:14px;line-height:1;
  font-family:Lato,sans-serif !important;font-weight:700;padding-bottom:1px}
.bgt-step.is-current .bgt-step-n{background:#ff4303}
.bgt-step-div{display:inline-flex;align-items:center;color:#cfcfcf;font-style:normal;font-size:40px;line-height:1;
  font-family:"Marcellus SC",Georgia,serif}
@media(max-width:749px){.bgt-steps{gap:9px;margin-bottom:26px}.bgt-step-t{display:none}.bgt-step{gap:0}
  .bgt-step-n{width:24px;height:24px;font-size:13px}}
/* layout: items | totals sidebar (vertical divider between) */
.bgt-cart-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:50px;align-items:start}
.bgt-cart-side,.bgt-summary{border-left:1px solid #e7e7e7;padding-left:50px}
@media(max-width:849px){.bgt-cart-grid{grid-template-columns:1fr;gap:28px}
  .bgt-cart-side,.bgt-summary{border-left:0;padding-left:0;border-top:1px solid #e7e7e7;padding-top:24px}}
/* cart table */
.bgt-cart-table{width:100%;border-collapse:collapse}
.bgt-cart-table thead th{text-align:left;font-weight:700;font-size:15px;color:#222;padding:0 0 12px;border-bottom:2px solid #e7e7e7}
.bgt-cart-table .bgt-th-sub{text-align:right}
.bgt-cart-table td{padding:20px 10px 20px 0;border-bottom:1px solid #ededed;vertical-align:middle}
.bgt-crow-rm{width:48px}
.bgt-crow-rm .bgt-line-rm{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;max-height:28px;
  flex:0 0 auto;padding:0!important;margin:0;
  border:1px solid #d2d2d2;border-radius:50%;color:#9a9a9a;font-size:15px;line-height:1;text-decoration:none;background:none;cursor:pointer}
.bgt-crow-rm .bgt-line-rm:hover{border-color:#c0392b;color:#c0392b}
.bgt-crow-img{width:104px}
.bgt-crow-thumb{width:84px;height:62px;border-radius:4px}
.bgt-crow-thumb.is-empty::after{font-size:24px}
.bgt-crow-title{display:block;font-weight:700;color:#ff4303;font-size:17px;text-decoration:none;margin-bottom:6px}
.bgt-crow-title:hover{color:#1e512c}
.bgt-crow-edit{display:inline-block;margin-top:8px;color:#ff4303;font-size:13.5px;text-decoration:none}
.bgt-crow-edit:hover{text-decoration:underline}
.bgt-crow-price{text-align:right;font-weight:700;color:#222;white-space:nowrap}
.bgt-cart-table .bgt-meta dt{color:#777}
.bgt-cart-table .bgt-meta dd{color:#222}
/* continue shopping (green outline) */
.bgt-continue{display:inline-block;margin-top:26px;border:2px solid #1e512c;color:#1e512c !important;background:none;
  padding:13px 22px;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.03em;border-radius:0;text-decoration:none}
.bgt-continue:hover{background:#1e512c;color:#fff !important}
/* cart totals */
.bgt-totals h3,.bgt-cart-form h3,.bgt-summary h3{margin:0 0 16px;font-weight:700;font-size:18px;color:#222;
  text-transform:uppercase;letter-spacing:.02em;font-family:Lato,sans-serif}
.bgt-tot-row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid #ededed;font-size:15px}
.bgt-tot-row span:last-child{font-weight:700}
.bgt-tot-grand{border-bottom:0;font-size:18px}
.bgt-tot-grand span:last-child{font-size:25px;color:#222;font-weight:800}
.bgt-proceed{display:block;width:100%;margin:18px 0 0;background:#ff4303;color:#fff;border:0;border-radius:0;
  padding:17px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:15px;cursor:pointer}
.bgt-proceed:hover{background:#e23a00}
.bgt-proceed:disabled{cursor:default}
.bgt-proceed.bgt-loading{display:flex;align-items:center;justify-content:center;gap:10px;background:#e23a00}
.bgt-proceed.bgt-loading::before{content:"";width:16px;height:16px;border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;border-radius:50%;animation:bgt-spin .7s linear infinite}
@keyframes bgt-spin{to{transform:rotate(360deg)}}
.bgt-nocharge{text-align:center;color:#444;margin:16px 0 0;font-size:15px}
/* ---- checkout details (step 2) — mirrors original WooCommerce checkout ---- */
.bgt-checkout-grid{grid-template-columns:1.4fr 1fr}
@media(max-width:849px){.bgt-checkout-grid{grid-template-columns:1fr}}
.bgt-cart-msg{margin:10px 0 0;font-size:14px}
.bgt-cart-msg:empty{margin:0}
/* clickable "done" breadcrumb step */
.bgt-steps button.bgt-step{background:none;border:0;cursor:pointer;font:inherit;
  margin:0!important;padding:0!important;min-height:0!important;height:auto!important;line-height:1!important;vertical-align:middle}
.bgt-step.is-done:hover{color:#1e512c}
.bgt-step.is-done:hover .bgt-step-n{background:#1e512c}
/* left: gray rounded container with field sections */
.bgt-checkout-form{background:#f7f7f7;border-radius:6px;padding:6px 26px}
.bgt-co-sect{padding:26px 0;border-bottom:1px solid #e6e6e6}
.bgt-co-sect:last-child{border-bottom:0}
.bgt-co-sect h3{margin:0 0 18px;font-family:"Marcellus SC",Georgia,serif;font-weight:600;font-size:19px;
  color:#0a0a0a;text-transform:uppercase;letter-spacing:.01em}
.bgt-checkout-form input,.bgt-checkout-form textarea,.bgt-checkout-form select{width:100%;box-sizing:border-box;background:#fff;
  border:1px solid #bab9b9;border-radius:8px;padding:14px;font:inherit;font-size:16px;color:#333;margin:0 0 14px;
  height:auto!important;min-height:0!important}/* beat theme's fixed height on tel/email so all fields match */
.bgt-checkout-form input::placeholder,.bgt-checkout-form textarea::placeholder{color:#9a9a9a}
/* mandatory fields: highlight invalids in red only after a submit attempt */
.bgt-checkout-form.bgt-show-errors input:invalid,.bgt-checkout-form.bgt-show-errors textarea:invalid{
  border-color:#c0392b;background:#fdf3f2}
.bgt-checkout-form textarea{min-height:120px;resize:vertical}
/* custom chevron so the pick-up <select> reads as a dropdown (native arrow is faint/stripped) */
.bgt-checkout-form select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
/* pick-up reassurance line under the dropdown (green = included free, muted = nudge) */
.bgt-pickup-hint{font-size:14px;line-height:1.4;margin:-6px 0 14px}
.bgt-pickup-hint.is-free{color:#1a7a3c;font-weight:600}
.bgt-pickup-hint.is-muted{color:#777}
.bgt-pickup-hint:empty{display:none}
.bgt-co-sect>input:last-child,.bgt-co-sect>textarea:last-child,.bgt-co-sect>select:last-child{margin-bottom:0}
/* validated international phone field (intl-tel-input + libphonenumber) */
.bgt-checkout-form .iti{display:block;width:100%;margin:0 0 14px}
.bgt-checkout-form .iti input{margin:0!important}
#bgt-phone.bgt-phone-invalid{border-color:#c0392b!important;background:#fdf3f2}
.iti__dropdown-content{z-index:1001}                 /* sit above the order box */
.bgt-checkout-form .iti--separate-dial-code .iti__selected-dial-code{font-size:16px;color:#333}
/* name: first | last */
.bgt-name-row{display:flex;gap:14px}
.bgt-name-row input{flex:1}
@media(max-width:560px){.bgt-name-row{display:block}}
/* right: Your order box (green border) */
.bgt-order{border:2px solid #1e512c;border-radius:8px;padding:26px 24px;align-self:start}
.bgt-order h3{margin:0 0 18px;font-family:"Marcellus SC",Georgia,serif;font-weight:600;font-size:19px;
  color:#0a0a0a;text-transform:uppercase;letter-spacing:.01em}
.bgt-order-item{padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid #ededed}
.bgt-order-item .bgt-crow-title{font-size:17px;margin-bottom:10px}
/* booking details larger here, matching original "Your order" (15px) */
.bgt-order .bgt-meta{font-size:15px;gap:4px 14px}
.bgt-order .bgt-meta dt,.bgt-order .bgt-meta dd{line-height:1.55}
.bgt-paylater{background:#f0f0f0;border-radius:6px;padding:15px 18px;margin:16px 0 0}
.bgt-paylater strong{display:block;color:#222;font-size:15px;margin-bottom:3px}
.bgt-paylater span{color:#444;font-size:14px}
.bgt-order .bgt-proceed{margin-top:16px;border-radius:5px}
/* order complete (step 3) — matches original WooCommerce order-received page */
.bgt-received-grid{grid-template-columns:1.4fr 1fr;align-items:start}
@media(max-width:849px){.bgt-received-grid{grid-template-columns:1fr}
  /* mobile: show the green "booking received" column above the order details */
  .bgt-received-grid .bgt-or-side{order:-1}
  .bgt-received-grid .bgt-or-details{order:0}}
/* left: bordered order-details card */
.bgt-or-details{border:1px solid #e2e2e2;border-radius:8px;padding:30px 32px}
.bgt-or-details h3{margin:0 0 18px;font-family:"Marcellus SC",Georgia,serif;font-weight:600;font-size:23px;
  color:#0a0a0a;text-transform:uppercase;letter-spacing:.01em}
.bgt-or-details h3:nth-of-type(2){margin-top:28px}
.bgt-or-item{display:flex;justify-content:space-between;gap:18px;padding:0 0 20px}
.bgt-or-item-info .bgt-crow-title{font-size:17px;margin-bottom:8px}
.bgt-or-item-info .bgt-meta{font-size:15px}
.bgt-or-item-price{font-weight:700;color:#222;white-space:nowrap;font-size:15px}
.bgt-or-row{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-top:1px solid #ededed;font-size:15px}
.bgt-or-row span:first-child{font-weight:700;color:#222}
.bgt-or-row span:last-child{color:#444}
.bgt-or-total span{font-weight:700;color:#222!important}
.bgt-or-idr{border-top:0;padding:2px 0 0;font-size:13px}
.bgt-or-idr span:last-child{color:#888!important;font-weight:400}
.bgt-or-info-row{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-top:1px solid #ededed;font-size:15px}
.bgt-or-info-row span:first-child{font-weight:700;color:#222}
.bgt-or-info-row span:last-child{color:#666;text-align:right}
.bgt-or-customer{margin-top:26px;font-style:italic;color:#333;font-size:15px;line-height:1.7}
/* right: green "booking received" box */
.bgt-or-box{background:#e9f2e2;border-radius:8px;padding:30px 32px}
#bgt-cart-page .bgt-or-box h2{margin:0 0 16px;font-family:Lato,sans-serif!important;font-weight:700;font-size:31px;
  color:#3a6429;line-height:1.2;text-transform:none!important;letter-spacing:0}
.bgt-or-box p{margin:0 0 16px;font-size:17px;color:#436a31;line-height:1.55}
.bgt-or-box .bgt-or-connect{color:#1a1a1a;font-weight:700}
#bgt-cart-page .bgt-or-wa{display:inline-block;background:#1e512c;color:#fff!important;text-decoration:none;
  padding:14px 26px;border-radius:8px;font-weight:700;font-size:17px;font-family:Lato,sans-serif}
#bgt-cart-page .bgt-or-wa:hover{background:#163d22;color:#fff!important}
/* "what to expect" list under the green box — hidden for now */
.bgt-expect{display:none;margin-top:28px;padding:0 4px}
.bgt-expect p{margin:0 0 14px;font-size:15px;line-height:1.6;color:#333}
.bgt-expect p:last-child{margin-bottom:0}
.bgt-expect .bgt-expect-intro{font-weight:700;color:#0a0a0a}
.bgt-expect strong{font-weight:700;color:#0a0a0a}
#bgt-cart-page .bgt-expect a{color:#1e512c;font-weight:700;text-decoration:none}
#bgt-cart-page .bgt-expect a:hover{text-decoration:underline}
.bgt-empty{color:#777;font-size:16px;text-align:center;padding:30px 0}
/* golf booking sub-category + rate selectors — use native YayExtra field markup
   (.yayextra-option-set) so they inherit the page styles. Fallback to match the
   native non-required dropdown look in case the page CSS keys off field name/id. */
.bgt-gfset select{height:41px;padding:0 22px 0 12px;border:1px solid #cfd0d4;border-radius:20px;font-size:16px;background:#fff;color:#333}
/* uniform field spacing: a 2nd field-wrap inside one option-set (Date + Tee Time)
   gets the same gap as between separate option-sets */
/* Uniform vertical spacing between booking fields: drop the flex gap and let every
   field-wrap carry the same 16px bottom margin (so grouped Date+Tee Time match the
   rest). Scoped to forms that actually have the YayExtra fields. */
form.cart:has(.yayextra-option-set){gap:0 !important}
form.cart .yayextra-option-field-wrap{margin-top:0 !important;padding-top:0 !important;margin-bottom:16px !important}

/* Bottom copyright bar (.absolute-footer) was gray — make it brand green to match
   the original. The main address/contacts footer above is left untouched (white). */
footer.footer-wrapper .absolute-footer{background-color:#1e512c !important}

/* Mobile burger menu: dark green (matches original; my white-header rule had
   turned the bars dark gray). The bars are border-top on .icon-menu + pseudos. */
.icon-menu,.icon-menu::before,.icon-menu::after{border-top-color:#1e512c !important;color:#1e512c !important}

/* Mobile off-canvas menu (re-implemented; Flatsome JS stripped from the mirror) */
#main-menu.bgt-drawer{position:fixed !important;top:0;left:0;right:auto;height:100%;width:300px;max-width:86vw;background:#fff;z-index:10001;transform:translateX(-100%);transition:transform .28s ease;overflow-y:auto;display:block !important;box-shadow:4px 0 26px rgba(0,0,0,.22);padding:52px 0 24px}
#main-menu.bgt-drawer.open{transform:none}
/* Defense-in-depth: if Flatsome's Magnific Popup ever still wraps the drawer in a
   transformed `.mfp-content`, that transform makes our position:fixed drawer resolve
   against the wrapper (collapsing it to an invisible sliver). Neutralise it so fixed
   positioning stays viewport-relative. _bgt-menu.js normally suppresses MFP entirely. */
.mfp-content:has(#main-menu.bgt-drawer){transform:none !important}
.bgt-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .25s;z-index:10000}
.bgt-menu-overlay.open{opacity:1;visibility:visible}
.bgt-menu-close{position:absolute;top:8px;right:14px;background:none;border:0;font-size:34px;line-height:1;color:#1e512c;cursor:pointer;z-index:2}
/* Language selector (English / 日本語) at the top of the off-canvas drawer */
.bgt-drawer .bgt-langsel{display:flex;align-items:center;gap:10px;padding:16px 24px 8px;margin-top:10px;font-size:15px}
.bgt-drawer .bgt-langsel a{color:#8a8a8a;text-decoration:none;font-weight:600}
.bgt-drawer .bgt-langsel a:hover{color:#1e512c}
.bgt-drawer .bgt-langsel a.bgt-lang-active{color:#1e512c;text-decoration:underline;text-underline-offset:3px}
.bgt-drawer .bgt-lang-sep{color:#d3d3d3}
html.bgt-menu-lock,html.bgt-menu-lock body{overflow:hidden}
#main-menu.bgt-drawer .sidebar-menu,#main-menu.bgt-drawer .nav-sidebar{display:block;width:100%;margin:0}
#main-menu.bgt-drawer .nav-sidebar li{display:block;width:100%;border-bottom:1px solid #eee;margin:0;float:none}
#main-menu.bgt-drawer .nav-sidebar > li > a{display:block;padding:13px 22px;color:#1a1a1a;font-weight:700}
#main-menu.bgt-drawer .nav-dropdown,#main-menu.bgt-drawer ul.sub-menu{display:block !important;position:static !important;box-shadow:none !important;padding:0;margin:0;background:#f7f7f7;min-width:0;border:0}
#main-menu.bgt-drawer .nav-dropdown li a,#main-menu.bgt-drawer ul.sub-menu li a{display:block;padding:11px 22px 11px 40px;color:#444;font-weight:400;text-transform:none}
/* nav-anim leaves items opacity:0 / transformed (Flatsome JS animates them in) — force
   them visible and flowing normally inside the drawer. */
#main-menu.bgt-drawer .sidebar-menu,#main-menu.bgt-drawer .nav-sidebar{position:static !important;left:auto !important;width:100% !important;transform:none !important;text-align:left !important}
#main-menu.bgt-drawer .nav-sidebar li{opacity:1 !important;transform:none !important;position:static !important;float:none !important;left:auto !important;width:100% !important}
#main-menu.bgt-drawer .nav-sidebar li a{opacity:1 !important;transform:none !important}
/* reveal submenu <ul>s (nav-anim leaves the UL itself at opacity:0, hiding its items) */
#main-menu.bgt-drawer .sub-menu,#main-menu.bgt-drawer .nav-dropdown,#main-menu.bgt-drawer .children{opacity:1 !important;transform:none !important;visibility:visible !important}
/* drop Cart + Login from the mobile menu (removed elsewhere in the rebuild) */
#main-menu.bgt-drawer li.account-item,
#main-menu.bgt-drawer li:has(> a[href="/cart/"]),
#main-menu.bgt-drawer li:has(> a[href="/my-account/"]){display:none !important}
/* --- refined mobile drawer menu --- */
#main-menu.bgt-drawer{padding:58px 0 28px}
#main-menu.bgt-drawer .nav-sidebar .toggle{display:none !important} /* empty Flatsome submenu toggle → gap */
#main-menu.bgt-drawer .nav-sidebar > li{border-bottom:1px solid #ececec}
#main-menu.bgt-drawer .nav-sidebar > li > a{padding:15px 26px !important;font-size:14px !important;font-weight:700 !important;letter-spacing:.03em;color:#1e512c !important;line-height:1.25 !important}
#main-menu.bgt-drawer .nav-sidebar > li > a:hover{color:#ff4303 !important}
#main-menu.bgt-drawer .sub-menu{background:#fafafa !important;border-top:1px solid #efefef}
#main-menu.bgt-drawer .sub-menu > li{border-bottom:1px solid #efefef}
#main-menu.bgt-drawer .sub-menu > li:last-child{border-bottom:0}
#main-menu.bgt-drawer .sub-menu li a{padding:12px 26px 12px 44px !important;font-size:14px !important;font-weight:400 !important;text-transform:none !important;color:#4a4a4a !important;line-height:1.25 !important}
#main-menu.bgt-drawer .sub-menu li a:hover{color:#1e512c !important}
.bgt-menu-close{top:12px;right:18px;font-size:30px;color:#1e512c}
/* Close button: tight box pinned to the drawer's top-right corner (reset inherited
   theme button width/margin/padding). */
#main-menu .bgt-menu-close{position:absolute !important;top:8px !important;right:10px !important;left:auto !important;width:40px !important;height:40px !important;margin:0 !important;padding:0 !important;background:none !important;border:0 !important;font-size:30px !important;line-height:40px !important;color:#1e512c !important;text-align:center !important;z-index:3;cursor:pointer}

/* Reviews: on mobile stack the testimonial box (photo on top, text below) and
   cap the photo to a tidy centered avatar (it otherwise blows up to ~410px). */
@media (max-width:849px){
  .icon-box.testimonial-box{flex-direction:column !important;align-items:center !important;text-align:center !important}
  .icon-box.testimonial-box .icon-box-img.testimonial-image{width:150px !important;max-width:55% !important;margin:0 auto 14px !important;float:none !important}
  .icon-box.testimonial-box .icon-box-text{text-align:left}
}

/* Reviews slider: on desktop keep the testimonial text clear of the prev/next arrows. */
@media (min-width:850px){
  .slider[data-flickity-options] .testimonial-box .icon-box-text{padding-right:56px}
}

/* Underline/link-style buttons are text links — don't give them the solid green
   fill (e.g. "Our Instagram: @baligolftours"). */
html body a.button.is-underline, html body .button.is-underline,
html body a.button.is-link, html body .button.is-link{
  background-color:transparent !important; border-color:transparent !important;
  box-shadow:none !important; color:#1e512c !important;
}

/* Product pages: section headings (h3) are brand dark green on the original;
   the static mirror lost that (body class stripped → defaulted to grey #555).
   Scope via the .product wrapper, which contains all the section h3s. */
.product h3{color:#1e512c !important}

/* Product pages: in-text links brand green + bolder (exclude buttons + product-card links). */
.product p a:not(.button), .product li a:not(.button):not(.woocommerce-LoopProduct-link){
  color:#1e512c !important; font-weight:700 !important;
}

/* In-text links across all page content: brand green + bold (exclude buttons +
   product-card links). Keep links inside dark-background sections light/legible. */
#content p a:not(.button), #content li a:not(.button):not(.woocommerce-LoopProduct-link){
  color:#1e512c !important; font-weight:700 !important;
}
#content .dark p a:not(.button), #content .dark li a:not(.button){
  color:#f1f1f1 !important; font-weight:400 !important;
}

/* Booking form anti-FOUC: the YayExtra option fields ship in source order (optional
   fields like Club Rentals / Non-Golfers first); _bgt-golf.js reorder() moves them
   below the required fields (Date, Tee Time, Players) on load. To avoid users seeing
   that shuffle, keep the fields invisible until reorder() flags the form ready, then
   fade them in. Pure-CSS fallback reveals them after 2s if the script never runs. */
form.cart .yayextra-option-set{ opacity:0; animation:bgtFieldsReveal 0s linear 2s forwards; }
form.cart.bgt-fields-ready .yayextra-option-set{ opacity:1; animation:none; transition:opacity .15s ease; }
@keyframes bgtFieldsReveal{ to{ opacity:1; } }

/* Book Now CTA on the product booking form: subtle rounded corners. The global
   `.button` rule squares every button (border-radius:0); soften just this one. */
.single_add_to_cart_button.button { border-radius: 4px !important; }

/* Non-golf products book via WhatsApp only. Hide just the "Book Now" submit on
   golf-lesson and transport pages; the rest of the booking form (variation selectors,
   quantity, price) stays, and the separate ".chatwithus" Reserve-via-WhatsApp button
   is the booking CTA. Golf tee-time pages (product_cat-golf-course / -jap / golf-local)
   are untouched and keep Book Now. NOTE: this is a category blocklist — add any new
   non-golf category class (e.g. a future day-tour) here to keep this behaviour. */
.product_cat-golf-instructor .single_add_to_cart_button,
.product_cat-golf-instructor-jap .single_add_to_cart_button,
.product_cat-transportation .single_add_to_cart_button,
.product_cat-transportation-jap .single_add_to_cart_button { display: none !important; }

/* On those WhatsApp-only pages (Book Now hidden above), the "Reserve via WhatsApp"
   button (.chatwithus, normally the outlined .button.white) is the sole booking CTA, so
   make it a solid brand-green fill with white text. Every other product page keeps the
   outlined style. Keep this category list in sync with the Book Now hide rule above. */
.product_cat-golf-instructor a.chatwithus.button,
.product_cat-golf-instructor-jap a.chatwithus.button,
.product_cat-transportation a.chatwithus.button,
.product_cat-transportation-jap a.chatwithus.button,
.product_cat-golf-instructor a.chatwithus.button:hover,
.product_cat-golf-instructor-jap a.chatwithus.button:hover,
.product_cat-transportation a.chatwithus.button:hover,
.product_cat-transportation-jap a.chatwithus.button:hover {
  background-color:#1e512c !important; border-color:#1e512c !important; color:#fff !important;
}
.product_cat-golf-instructor a.chatwithus.button span,
.product_cat-golf-instructor-jap a.chatwithus.button span,
.product_cat-transportation a.chatwithus.button span,
.product_cat-transportation-jap a.chatwithus.button span { color:#fff !important; }

/* Sticky sidebar (Flatsome .is-sticky-column) — e.g. the green "Bali Golf Tours / Chat on
   Whatsapp" CTA column on the course pages and the Nirwana page. With the theme's fixed
   `top:107px`, a column TALLER than (viewport − header) sticks with its bottom clipped
   below the fold, so the green box and its button are never fully shown.
   Fix: offset the stick point by the column's own height —
   `min(107px, 100vh − columnHeight)`. When the column fits under the header, 100vh−h is
   ≥107px so min() resolves to 107px and it sits just below the header (the normal case).
   When it doesn't fit, min() resolves lower, so the column scrolls up a little until its
   bottom reaches the fold, then sticks with the whole box — CTA button included — visible.

   --bgt-sticky-h is measured and published per column by _bgt-fixes.js (and re-measured on
   resize / late-loading images), so this works for ANY sticky column regardless of its
   content — no per-page constant to go stale. The 840px fallback is the course-guide
   column's height, i.e. the no-JS behaviour is the old hard-coded one.
   Desktop only: below 850px the column is full-width and not sticky. */
@media (min-width:850px){
  .is-sticky-column{
    top: min(107px, calc(100vh - var(--bgt-sticky-h, 840px))) !important;
    bottom: auto !important;
  }
}

/* Booking-form selects (Tee Time, Pickup Time, …) show their "Select…" placeholder
   in the same muted grey as the native date-input placeholder (#757575) until a real
   value is chosen. A required select with an empty value is :invalid (the :has() form
   also covers non-required placeholder selects); once a value is picked neither matches
   and it falls back to flatsome's #333. Keep the open dropdown options at full contrast. */
form.cart select.yayextra-field-required:invalid,
form.cart select:has(option[value=""]:checked) { color: #757575 !important; }
form.cart select option { color: #333 !important; }
/* Homepage service pill buttons (.servbtn): on tablet widths the two cards sit side-by-side
   and the inner text column shrinks to ~260px. The theme's max-width:100% then capped the pill
   to that width, forcing the label to wrap AND the chevron onto its own line — uneven, oversized
   buttons. Let the pill size to its one-line content instead: it stays a neat inline-block pill
   (never full width) that sits comfortably inside the card at every screen size. */
.servbtn{ max-width:none !important; white-space:nowrap !important; }
.servbtn > span{ white-space:nowrap !important; }
/* Mobile grid gutters (/services/ product grid). The child theme collapses EVERY
   .row-small gutter below 850px with `padding:0 !important`, so the 2-up tiles render
   flush against each other and bleed to the screen edge (the row keeps its -10px side
   margins). Restore a proportional gutter — !important + later source order to beat the
   child rule. The row's -10px side margins are re-matched to the 8px col padding so the
   two cancel at the outer edges: the tiles line up flush with the section headings while
   still getting a 16px gutter between them. Same 850px breakpoint as the rule it
   counteracts, so there's no width where both miss. */
@media only screen and (max-width:850px){
  .row-small:not(.row-collapse),
  .row .row-small:not(.row-collapse){ margin-left:-8px !important; margin-right:-8px !important; }
  .row-small > .col,
  .row-small > .flickity-viewport > .flickity-slider > .col{ padding:0 8px 24px !important; }
}
/* Mobile page-title spacing. fix_seo.py injects the H1 with an inline `margin:.5em 0 0`
   (zero bottom). On desktop that reads fine — the H1 is centred and the first section
   title sits left of it, so they never visually collide. On phones the H1 wraps to two
   lines and the section title lands directly beneath it with a 0px gap. Add breathing
   room below the title on small screens only; needs !important to beat the inline style. */
@media only screen and (max-width:850px){
  h1.bgt-page-h1{ margin-bottom:.85em !important; }
}
/* Mobile dead space above the page title. WooCommerce's `.shop-page-title` bar sits
   between the header and <main>, and its inner has `padding-top:60px` + `min-height:60px`
   — but the only thing inside is a breadcrumb the theme sets to `display:none` at EVERY
   width. So it's ~80px of pure white space pushing the title down the phone screen.
   Collapse the padding rather than display:none-ing the bar, so anything that ever does
   become visible in there still renders — just without the empty 60px reserve. The title's
   own top margin then sets the gap. */
@media only screen and (max-width:850px){
  .shop-page-title .page-title-inner{ padding-top:0 !important; min-height:0 !important; }
  h1.bgt-page-h1{ margin-top:1.25em !important; }
}
/* "Currently closed for renovations" tag on the courses guide (fix_course_notes.py).
   Needs to out-specify `html body h3 span{font-family:inherit!important}` above, which
   otherwise drags it into the Marcellus SC heading face — a status chip wants the body
   font. Sits inline beside the heading on desktop; drops to its own line on phones so a
   long heading + chip can't jam together or force a horizontal scroll. */
html body h3 span.bgt-course-tag,
span.bgt-course-tag{
  display:inline-block; vertical-align:middle; margin-left:.6em;
  padding:.35em .8em; border-radius:999px;
  background:#fdeee9; color:#b3350f; border:1px solid #f6c9b8;
  font-family:"Lato", sans-serif !important;
  /* rem, not em: an em here inherits the 28px heading and renders the chip at ~17px —
     as large as body copy. A fixed rem keeps it visibly secondary next to any heading. */
  font-size:.7rem !important; font-weight:700; letter-spacing:.06em; line-height:1.5;
  text-transform:uppercase; white-space:nowrap;
}
@media only screen and (max-width:850px){
  html body h3 span.bgt-course-tag,
  span.bgt-course-tag{ display:block; width:fit-content; margin:.55em 0 0; white-space:normal; }
}

/* Quote form inside the dark green sticky card (/bali-golf-holiday-packages/).
   _bgt-contact.js sets the status line's colour inline — #333 while sending, #c00 on error —
   which was chosen for the white contact page and is unreadable on dark green. Force white:
   the wording already carries the state ("Sending…" vs "Please fill in your name, email and
   message"), so the colour is not the thing communicating it. !important because the script
   writes an inline style. */
.col-inner.dark .bgt-contact-note { color: #fff !important; }
/* Native controls inherit the dark card's white text otherwise, giving white-on-white input. */
.col-inner.dark #wpforms-form-quote input,
.col-inner.dark #wpforms-form-quote textarea { color: #222; }
.col-inner.dark #wpforms-form-quote input::placeholder,
.col-inner.dark #wpforms-form-quote textarea::placeholder { color: #6b756b; opacity: 1; }