/* === 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; } /* === 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; } /* === 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: `… Rp …`. 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:8px !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, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color:#cbcbcb !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} /* ---- Drawer ---- */ #bgt-drawer{position:fixed;inset:0;z-index:10000;visibility:hidden;opacity:0;transition:opacity .2s} #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:380px;max-width:90vw; background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.18);display:flex;flex-direction:column; transform:translateX(100%);transition:transform .25s ease} #bgt-drawer.open .bgt-drawer-panel{transform:translateX(0)} .bgt-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px; border-bottom:1px solid #eee} .bgt-drawer-head h3{margin:0;font-family:"Marcellus SC",Georgia,serif;color:#1e512c;font-size:20px} .bgt-drawer-x{border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:#333} .bgt-drawer-items{flex:1;overflow-y:auto;padding:8px 22px} .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; 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{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} .bgt-co-sect>input:last-child,.bgt-co-sect>textarea: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-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} 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