/* ===================================================================== COAST 67 — Booking bar (/book/ hero) → hands off to letsbook.me Scoped under body.coast67-tide. Brand palette + type per the Tide system (assets/coast67-tide.css). Namespaced .c67-bkg*. The flatpickr calendar is themed separately (it mounts on ). ===================================================================== */ /* ---- local fallbacks so the bar is self-sufficient ------------------ */ .coast67-tide .c67-bkg { --bkg-orange: var(--c67-orange, #D6894E); --bkg-orange-deep: var(--c67-orange-deep, #C2773B); --bkg-ink: var(--c67-ink, #4E4F47); --bkg-ink-soft: var(--c67-ink-soft, #6B6C62); --bkg-cream: var(--c67-cream, #FBF3E8); --bkg-cream-deep: var(--c67-cream-deep, #F3E7D5); --bkg-gold: var(--c67-gold, #F5C888); --bkg-opal: var(--c67-opal, #ADD2CB); --bkg-ease: var(--c67-ease, cubic-bezier(.16, 1, .3, 1)); --bkg-ui: var(--c67-ui, "Bantayog", "Jost", system-ui, sans-serif); --bkg-display: var(--c67-display, "Minimalust", "Jost", system-ui, sans-serif); --bkg-serif: var(--c67-serif, "Gowa", Georgia, serif); } /* ---- wrapper the Elementor shortcode widget sits in ----------------- */ .coast67-tide .c67-bookbar-wrap { width: 100%; } .coast67-tide .c67-bookbar-wrap .elementor-widget-container { display: flex; flex-direction: column; align-items: center; } /* ---- the reservation bar ------------------------------------------- */ .coast67-tide .c67-bkg { position: relative; width: min(940px, 92vw); margin: 34px auto 0; background: rgba(251, 243, 232, .93); -webkit-backdrop-filter: blur(9px) saturate(1.05); backdrop-filter: blur(9px) saturate(1.05); border: 1px solid rgba(251, 243, 232, .55); border-radius: 2px; box-shadow: 0 26px 70px -28px rgba(22, 23, 19, .62), 0 2px 0 rgba(255, 255, 255, .25) inset; font-family: var(--bkg-ui); color: var(--bkg-ink); } .coast67-tide .c67-bkg__row { display: grid; grid-template-columns: 1.35fr 1fr auto; align-items: stretch; } /* a single field (Dates / Guests) — a click target that opens a popover */ .coast67-tide .c67-bkg__field { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 20px 26px; text-align: left; background: transparent; border: 0; border-right: 1px solid rgba(78, 79, 71, .14); cursor: pointer; font-family: inherit; color: inherit; transition: background-color .4s var(--bkg-ease); min-width: 0; } .coast67-tide .c67-bkg__field:hover, .coast67-tide .c67-bkg__field.is-open { background: rgba(255, 255, 255, .5); } .coast67-tide .c67-bkg__field:focus-visible { outline: 2px solid var(--bkg-orange); outline-offset: -2px; } .coast67-tide .c67-bkg__label { font-family: var(--bkg-ui); font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--bkg-orange); line-height: 1; } .coast67-tide .c67-bkg__value { font-family: var(--bkg-display); font-weight: 100; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.15; color: var(--bkg-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .coast67-tide .c67-bkg__value.is-placeholder { color: var(--bkg-ink-soft); font-style: normal; } .coast67-tide .c67-bkg__value small { font-family: var(--bkg-ui); font-weight: 400; font-size: .62em; color: var(--bkg-ink-soft); margin: 0 .45em; letter-spacing: .04em; } /* the submit button cell */ .coast67-tide .c67-bkg__go { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 clamp(24px, 3vw, 44px); min-height: 100%; background: var(--bkg-orange); color: var(--bkg-cream); border: 0; cursor: pointer; font-family: var(--bkg-ui); font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; transition: background-color .4s var(--bkg-ease); } .coast67-tide .c67-bkg__go:hover { background: var(--bkg-orange-deep); } .coast67-tide .c67-bkg__go:focus-visible { outline: 2px solid var(--bkg-ink); outline-offset: 3px; } .coast67-tide .c67-bkg__go .c67-bkg__arrow { width: 22px; height: 8px; transition: transform .45s var(--bkg-ease); } .coast67-tide .c67-bkg__go:hover .c67-bkg__arrow { transform: translateX(5px); } /* flatpickr anchor input lives inside the dates field but is not shown */ .coast67-tide .c67-bkg__fp { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: 0; bottom: 0; padding: 0; border: 0; } /* raw native inputs = engine-facing source of truth (a11y + no-JS GET fallback). Visually hidden by default; the