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

/* 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; }

/* 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; }

/* === 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 commerce leftovers (booking-request model, no cart/login) === */
li.cart-item, li.account-item,
.header-cart-link, .header-account-title, .account-item,
.widget_shopping_cart, .nav-cart, .off-canvas-cart, #cart-popup,
.mobile-sidebar .cart-item, .mobile-sidebar .account-item { display: none !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; }

/* === 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; }