/* booking-engine.css — v1.8.4 (single scroll body; full-season render; 7-column alignment) */ /* Prevent page scroll when overlay or popup is open (avoid position:fixed to reduce iOS layout bugs) - html.be-no-scroll: used by our calendar & extras modals - html.no-scroll: optional helper if Bricks or interactions toggle .no-scroll on */ html.be-no-scroll, html.be-no-scroll body, html.no-scroll, html.no-scroll body { overflow: hidden; width: 100%; height: 100%; overscroll-behavior: contain; } /* Additional scroll prevention hook for form modals (kept lightweight) - body.be-form-open: can be toggled by Bricks popup interactions - body.no-scroll: fallback if you prefer a generic .no-scroll body class */ body.be-form-open, body.no-scroll { overflow: hidden; width: 100%; height: 100%; overscroll-behavior: contain; } /* ===== Overlay (floating card) ===== */ .booking-overlay { position: fixed; inset: 0; z-index: 999999; /* High but not max int32 to avoid conflicts */ background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; opacity: 0; transform: translateY(8px); transition: opacity 160ms ease, transform 160ms ease; box-sizing: border-box !important; overflow-x: hidden !important; /* Prevent horizontal scroll */ max-width: 100vw !important; } .booking-overlay.be-open { opacity: 1; transform: translateY(0); } .booking-overlay.be-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; } /* Card container */ .booking-calendar-container { width: min(94vw, 720px); /* Reduced from 96vw to 94vw for better fit on 375px screens */ height: min(92vh, 760px); background: #fff; border-radius: 20px; box-shadow: 0 10px 15px rgba(0,0,0,.05), 0 20px 45px rgba(0,0,0,.12); display: grid; /* header + scroll area (scroll area can shrink) */ grid-template-rows: auto minmax(0, 1fr) !important; overflow: hidden; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); resize: none; box-sizing: border-box !important; max-width: 100vw !important; /* Prevent horizontal overflow on mobile */ min-height: 0; } /* Mobile: Fullscreen calendar popup */ @media (max-width: 1279px) { .booking-overlay { padding: 0 !important; /* Remove padding for fullscreen */ } .booking-calendar-container { width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; border-radius: 0 !important; /* Remove rounded corners for fullscreen */ box-shadow: none !important; /* Remove shadow for fullscreen */ padding-top: env(safe-area-inset-top) !important; padding-bottom: env(safe-area-inset-bottom) !important; } } /* Further reduce width and padding on very small screens */ @media (max-width: 400px) { .booking-calendar-container { width: 100vw !important; /* Fullscreen on very small screens too */ } .be-scroll-body { padding: 22px 12px 16px !important; /* Reduce to 12px on very small screens */ } .be-global-weekdays { padding: 0 12px 8px !important; } .be-month-title { padding: 12px 12px 4px !important; } .flatpickr-days .dayContainer { padding: 6px 12px 22px !important; gap: 6px 6px !important; /* Reduce gap from 8px to 6px on very small screens */ } .be-global-weekdays { column-gap: 6px !important; /* Match the reduced gap */ } .fp-custom-header { padding: 18px 12px !important; } .fp-close-btn { right: 8px !important; /* Adjust close button for smaller padding */ } } /* Desktop: Make calendar container wider to fit 2 months side-by-side */ @media (min-width: 1280px) { .booking-calendar-container { width: min(90vw, 1000px) !important; /* Wider to fit 2 months (460px + 40px gap + 460px = 960px) */ max-width: 1000px !important; height: auto !important; /* Let height fit content instead of fixed height */ max-height: min(92vh, 760px) !important; /* Still cap at max height if needed */ grid-template-rows: auto min-content !important; /* Use min-content instead of 1fr to fit content */ } } /* Header */ .fp-custom-header { padding: 18px 16px; /* Reduced to 16px on mobile to fit 375px screens */ display: flex; align-items: center; position: relative; text-align: center; background: #fff; border-bottom: 1px solid #eef0f3; flex-shrink: 0; } .fp-close-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); /* Adjusted for smaller padding */ font-size: 24px; line-height: 1; color: #111827; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; cursor: pointer; border: 0; background: transparent; } .fp-close-btn:hover { background: #f3f4f6; } .fp-title { font-size: 18px; font-weight: 700; color: #0b1320; margin: 0 auto; } /* Loader (optional) */ .be-loader { display: none; height: 52px; padding: 12px 16px; } .be-shimmer { width: 100%; height: 100%; background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%); background-size: 400% 100%; animation: beShimmer 1.2s infinite; border-radius: 10px; } @keyframes beShimmer { 0%{background-position:100% 0} 100%{background-position:0 0} } /* ===== Single scroll body ===== */ .be-calendar-holder { overflow: hidden; /* holder = non-scrolling */ display: flex; flex-direction: column; min-height: 0 !important; } .be-scroll-body { display: block !important; /* neutralize theme utilities */ flex: 1 1 auto !important; height: auto !important; max-height: 100% !important; min-height: 0 !important; overflow: auto !important; overflow-x: hidden !important; /* Prevent horizontal scroll on mobile */ -webkit-overflow-scrolling: touch; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 22px 16px 16px; /* Reduced to 16px on mobile to fit 375px screens */ opacity: 0; transition: opacity 140ms ease; } .be-scroll-body.be-calendar-ready { opacity: 1; } /* ===== One weekday row at the very top (non-sticky) ===== */ .be-global-weekdays { padding: 0 16px 8px; /* Reduced to 16px on mobile to match scroll body */ display: grid; grid-template-columns: repeat(7, 1fr); /* Use 1fr for equal columns */ column-gap: 8px; /* must match day grid gap */ border-bottom: 1px solid #eef0f3; background: #fff; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; /* Ensure no margin causing misalignment */ } .be-global-weekdays span { text-align: center; font-size: 12px; font-weight: 600; color: #6b7280; letter-spacing: .04em; text-transform: uppercase; } @media (min-width: 1280px) { .be-global-weekdays { display: none !important; } } /* Mobile: hide Flatpickr's built-in header + weekday bar (use custom layout instead) */ @media (max-width: 1279px) { .booking-overlay .flatpickr-months, .booking-overlay .flatpickr-weekdays { display: none !important; } } /* Per-month title */ .be-month-title { padding: 12px 16px 4px; /* Reduced to 16px on mobile to match other elements */ font-size: 20px; font-weight: 800; color: #0b1320; letter-spacing: .2px; text-align: left; margin: 0 !important; /* Ensure no margin causing misalignment */ box-sizing: border-box !important; display: block !important; /* Ensure titles are always visible */ visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 1 !important; height: auto !important; width: auto !important; min-height: auto !important; min-width: auto !important; max-height: none !important; max-width: none !important; overflow: visible !important; } /* Ensure titles inside innerContainer are never hidden by nth-child rules */ .flatpickr-innerContainer > .be-month-title, .flatpickr-innerContainer .be-month-title { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; width: auto !important; min-height: auto !important; max-height: none !important; position: relative !important; z-index: 10 !important; } /* CRITICAL: Titles inside rContainers (when all months are in one rContainer) */ .flatpickr-rContainer > .be-month-title, .flatpickr-rContainer .be-month-title { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; width: auto !important; position: relative !important; z-index: 10 !important; margin: 0 !important; padding: 12px 16px 4px !important; } /* CRITICAL: Titles inside .flatpickr-days (when all months are in one rContainer) */ .flatpickr-days > .be-month-title, .flatpickr-days .be-month-title { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; width: auto !important; position: relative !important; z-index: 10 !important; margin: 0 !important; padding: 12px 16px 4px !important; } /* Ensure ALL month titles are visible, especially the second one */ .flatpickr-innerContainer .be-month-title:nth-child(2), .flatpickr-innerContainer .be-month-title:nth-child(3), .flatpickr-innerContainer .be-month-title:nth-child(4), .flatpickr-innerContainer .be-month-title:nth-child(5), .flatpickr-innerContainer .be-month-title:nth-child(n+2), .flatpickr-innerContainer > .be-month-title, .flatpickr-innerContainer .be-month-title[data-be-month-index] { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; width: auto !important; position: relative !important; min-height: auto !important; max-height: none !important; } /* Override any Flatpickr CSS that might hide titles */ .flatpickr-calendar .be-month-title, .flatpickr-calendar .flatpickr-innerContainer .be-month-title, .be-scroll-body .be-month-title, .booking-overlay .be-month-title { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; width: auto !important; } /* Increase padding on larger mobile screens */ @media (min-width: 400px) { .fp-custom-header { padding: 18px 20px; } .fp-close-btn { right: 16px; /* Restore original position on larger screens */ } .be-scroll-body { padding: 22px 20px 16px; } .be-global-weekdays { padding: 0 20px 8px; } .be-month-title { padding: 12px 20px 4px; } .flatpickr-days .dayContainer { padding: 6px 20px 22px !important; } } /* Desktop: Adjust month title spacing for side-by-side layout */ @media (min-width: 1280px) { .be-month-title { padding: 12px 0 4px; /* Remove horizontal padding on desktop since months are in grid */ font-size: 18px; } } /* Month wrappers */ .flatpickr-calendar { width: 100% !important; background: transparent !important; box-shadow: none !important; box-sizing: border-box !important; } /* Mobile: Stack months vertically (default) */ .flatpickr-innerContainer { display: block !important; /* Mobile: block layout for vertical stacking */ overflow: visible; width: 100% !important; box-sizing: border-box !important; } /* Mobile: full width, block layout */ .flatpickr-rContainer { display: block !important; width: 100% !important; box-sizing: border-box !important; border: none !important; border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: none !important; } /* Remove borders from ALL rContainers - aggressive override */ .flatpickr-rContainer, .flatpickr-rContainer:nth-child(1), .flatpickr-rContainer:nth-child(2), .flatpickr-rContainer:nth-child(3), .flatpickr-rContainer:nth-child(n+1), .flatpickr-rContainer:nth-child(n+2) { border: none !important; border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: none !important; outline: none !important; box-shadow: none !important; } /* Also remove borders from any parent containers that might have borders */ .flatpickr-innerContainer .flatpickr-rContainer, .flatpickr-calendar .flatpickr-rContainer, .be-scroll-body .flatpickr-rContainer { border: none !important; border-top: none !important; border-left: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; outline: none !important; } /* Override Flatpickr's multiMonth box-shadow borders */ .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1), .flatpickr-calendar.multiMonth .flatpickr-rContainer:nth-child(n+2) { -webkit-box-shadow: none !important; box-shadow: none !important; } /* Desktop: override to auto width for grid */ @media (min-width: 1280px) { .flatpickr-rContainer { width: auto !important; max-width: none !important; } } /* Desktop: Arrange months side-by-side */ @media (min-width: 1280px) { .be-scroll-body { padding: 16px 20px 16px !important; /* Balanced top and bottom padding for desktop */ overflow-x: hidden !important; /* Prevent horizontal scroll */ height: auto !important; /* Allow scroll body to size to content */ max-height: none !important; /* Remove max-height constraint */ } /* Target the calendar container that holds all months */ .flatpickr-calendar { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Desktop: show native month navigation/header */ .booking-overlay .flatpickr-months { display: flex !important; align-items: center; justify-content: center; padding: 0 20px !important; margin: 0 0 12px !important; gap: 40px !important; position: relative; width: 100% !important; box-sizing: border-box !important; } .booking-overlay .flatpickr-months .flatpickr-prev-month { position: absolute !important; left: 20px; width: 36px; height: 36px; flex-shrink: 0; } .booking-overlay .flatpickr-months .flatpickr-month { display: flex !important; align-items: center; justify-content: center; text-align: center; width: 420px !important; min-width: 420px !important; max-width: 420px !important; flex-shrink: 0; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .booking-overlay .flatpickr-months .flatpickr-month:nth-of-type(1) { order: 1; } .booking-overlay .flatpickr-months .flatpickr-month:nth-of-type(2) { order: 2; } .booking-overlay .flatpickr-months .flatpickr-next-month { position: absolute !important; right: 20px; width: 36px; height: 36px; flex-shrink: 0; } .booking-overlay .flatpickr-months .flatpickr-current-month { display: flex !important; align-items: center; justify-content: center; gap: 8px; font-size: 18px; font-weight: 700; color: #0b1320; width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } .booking-overlay .flatpickr-months .flatpickr-current-month input { display: none !important; } .booking-overlay .flatpickr-prev-month, .booking-overlay .flatpickr-next-month { position: static !important; display: flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #0b1320; transition: background-color 0.2s ease; } .booking-overlay .flatpickr-prev-month:hover, .booking-overlay .flatpickr-next-month:hover { background-color: rgba(11, 19, 32, 0.08); } .booking-overlay .flatpickr-weekdays { display: flex !important; align-items: center; column-gap: 40px; padding: 0 20px 8px; margin: 0; } .booking-overlay .flatpickr-weekdaycontainer { flex: 1 1 0%; display: grid !important; grid-template-columns: repeat(7, 1fr); gap: 8px; text-transform: uppercase; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #6b7280; } .booking-overlay .flatpickr-weekdaycontainer span { display: flex; align-items: center; justify-content: center; } /* Desktop month grid - override mobile block layout */ .booking-overlay .flatpickr-innerContainer, .be-scroll-body .flatpickr-innerContainer, .flatpickr-innerContainer { display: flex !important; /* Override mobile block layout */ flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: center !important; column-gap: 40px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; } /* Hide any rContainers beyond the first 2 - use multiple selectors to catch all cases */ .flatpickr-innerContainer > .flatpickr-rContainer:nth-child(n+3), .flatpickr-innerContainer .flatpickr-rContainer:nth-child(n+3), .flatpickr-innerContainer .flatpickr-rContainer:nth-of-type(n+3) { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; min-height: 0 !important; min-width: 0 !important; max-height: 0 !important; max-width: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: none !important; } /* Ensure only first 2 rContainers are visible - multiple selectors for maximum coverage */ .booking-overlay .flatpickr-innerContainer > .flatpickr-rContainer:nth-child(3), .booking-overlay .flatpickr-innerContainer > .flatpickr-rContainer:nth-child(4), .booking-overlay .flatpickr-innerContainer > .flatpickr-rContainer:nth-child(n+3), .be-scroll-body .flatpickr-innerContainer > .flatpickr-rContainer:nth-child(3), .be-scroll-body .flatpickr-innerContainer > .flatpickr-rContainer:nth-child(4), .be-scroll-body .flatpickr-innerContainer > .flatpickr-rContainer:nth-child(n+3) { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; position: absolute !important; left: -9999px !important; overflow: hidden !important; } /* NOTE: We do NOT hide dayContainers - they represent weeks within months, not months themselves. Each rContainer = one month, and can contain multiple dayContainers (weeks). We only hide extra rContainers, not dayContainers. */ /* Each month column */ .booking-overlay .flatpickr-days, .be-scroll-body .flatpickr-days { display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 40px; padding: 0 20px 0 !important; margin: 0; width: 100% !important; box-sizing: border-box !important; } .booking-overlay .flatpickr-days .dayContainer, .be-scroll-body .flatpickr-days .dayContainer { display: grid !important; grid-template-columns: repeat(7, 1fr); gap: 8px; width: 420px !important; min-width: 420px !important; max-width: 420px !important; padding: 6px 0 4px !important; box-sizing: border-box !important; } .booking-overlay .flatpickr-days .dayContainer:nth-child(n+3), .be-scroll-body .flatpickr-days .dayContainer:nth-child(n+3) { display: none !important; } /* Ensure parent of innerContainer doesn't force vertical layout */ .flatpickr-calendar { display: block !important; width: 100% !important; } .flatpickr-calendar > * { width: 100% !important; box-sizing: border-box !important; } /* Ensure scroll body has enough width */ .be-scroll-body { width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; } /* Ensure flatpickr-days doesn't interfere with grid layout */ .flatpickr-days { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; -webkit-box: unset !important; -webkit-flex: unset !important; -ms-flexbox: unset !important; flex: unset !important; } .be-global-weekdays { padding: 0 0 8px !important; /* Remove horizontal padding - scroll body handles it */ width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } } /* === ALIGNMENT: make each month a 7-column grid that matches weekday row === */ .flatpickr-days { display: block !important; width: 100% !important; box-sizing: border-box !important; overflow: visible !important; } .flatpickr-days .dayContainer { display: grid !important; grid-template-columns: repeat(7, 1fr); /* Use 1fr for equal columns */ gap: 8px 8px; /* row/col gaps – keep in sync with weekdays */ padding: 6px 16px 22px !important; /* Reduced to 16px on mobile to fit 375px screens */ width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } .flatpickr-days .dayContainer + .dayContainer { border-top: 1px solid #eef0f3; margin-top: 8px; padding-top: 18px !important; /* Override Flatpickr's box-shadow borders */ -webkit-box-shadow: none !important; box-shadow: none !important; } /* Remove ALL box-shadow borders from dayContainers (Flatpickr uses box-shadow for borders) */ .flatpickr-rContainer .flatpickr-days .dayContainer, .flatpickr-rContainer .flatpickr-days .dayContainer + .dayContainer, .flatpickr-rContainer:nth-child(2) .flatpickr-days .dayContainer, .flatpickr-rContainer:nth-child(2) .flatpickr-days .dayContainer + .dayContainer, .flatpickr-rContainer:nth-child(n+2) .flatpickr-days .dayContainer { -webkit-box-shadow: none !important; box-shadow: none !important; border-left: none !important; } /* Remove bottom padding from last dayContainer in each month */ @media (min-width: 1280px) { .flatpickr-rContainer .flatpickr-days .dayContainer:last-child { padding-bottom: 0 !important; } } /* Day cells (chips) */ .flatpickr-day { margin: 0 !important; /* remove old margins to avoid drift */ justify-self: center; /* center chip inside its grid cell */ align-self: center; /* center vertically */ width: 44px; height: 44px; line-height: 44px; text-align: center !important; /* center text inside the cell */ border: none !important; border-radius: 12px; color: #111827; font-weight: 600; transition: transform .07s ease, background .12s ease, box-shadow .12s ease; position: relative; /* for slot count badge positioning */ display: flex !important; /* use flexbox for centering */ align-items: center !important; justify-content: center !important; } .flatpickr-day:hover { background: #f3f4f6; } /* Today ring */ .flatpickr-day.today { box-shadow: 0 0 0 2px #111827 inset; background: #fff; color: #111827; } /* Selected */ .flatpickr-day.selected, .flatpickr-day.selected:focus, .flatpickr-day.selected:hover { background: #d97736; color: #fff !important; box-shadow: 0 0 0 0 transparent inset; } /* Disabled (blackouts / full) */ .flatpickr-day.disabled, .flatpickr-day.flatpickr-disabled { color: #e57373 !important; text-decoration: line-through !important; background: transparent !important; opacity: .95; cursor: not-allowed; } /* Slot count badge for per-person tours */ .be-slot-count { position: absolute; bottom: 2px; right: 2px; font-size: 9px; line-height: 1; font-weight: 700; color: #4b5563; /* neutral gray text by default */ pointer-events: none; /* Don't interfere with date clicks */ background: #f3f4f6; /* neutral gray background */ padding: 2px 4px; border-radius: 4px; pointer-events: none; white-space: nowrap; } /* Low-availability / urgency state (<= 25% remaining capacity) */ .be-slot-count--low { color: #b91c1c; /* urgent red text */ background: #fee2e2; /* soft red background */ } .flatpickr-day.selected .be-slot-count, .flatpickr-day.selected:focus .be-slot-count, .flatpickr-day.selected:hover .be-slot-count { color: #fff; background: rgba(255, 255, 255, 0.25); } /* Larger taps on desktop */ @media (min-width: 992px) { .flatpickr-day { width: 46px; height: 46px; line-height: 46px; } .be-slot-count { font-size: 10px; padding: 3px 5px; } } /* Error text */ .be-error { padding: 24px 16px; color: #b91c1c; font-weight: 600; } /* Review card — force our layout */ .gform_wrapper .be-review, .be-review{ display:grid; gap:12px; padding:24px; border-radius:12px; background:#ffffff; text-align:left; max-width:100%; overflow:hidden; /* Prevent content from breaking out */ border:1px solid #d1d5db; /* match field card border */ box-shadow: none; /* align with field cards */ } @media (min-width: 1280px) { .gform_wrapper .be-review, .be-review { margin-top: 24px; /* align top with desktop summary offset */ } } .gform_wrapper .be-review__header, .be-review__header{ display:grid !important; grid-template-columns:84px 1fr !important; gap:14px !important; align-items:center !important; } .gform_wrapper .be-review__img, .be-review__img{ width:84px !important; height:84px !important; object-fit:cover !important; border-radius:8px !important; display:block !important; } .gform_wrapper .be-review__title, .be-review__title{ margin:0 !important; font-weight:800 !important; font-size:18px !important; color:#0b1320 !important; word-wrap:break-word; overflow-wrap:break-word; max-width:100%; } .gform_wrapper .be-review__section, .be-review__section{ background:#fff !important; border:1px solid #eef0f3 !important; border-radius:10px !important; padding:12px !important; } .gform_wrapper .be-row, .be-row{ display:grid !important; grid-template-columns:140px 1fr !important; gap:10px !important; align-items:center !important; padding:8px 0 !important; border-bottom:1px solid #f1f3f5 !important; } .be-row:last-child{ border-bottom:none !important; padding-bottom:0 !important; } .gform_wrapper .be-label, .be-label{ color:#374151 !important; font-weight:700 !important; } .gform_wrapper .be-val, .be-val{ color:#111827 !important; } .be-row-total .be-val strong{ font-size:18px !important; } .gform_wrapper .be-policy-title, .be-policy-title{ font-weight:700 !important; margin-bottom:6px !important; color:#111827 !important; } .gform_wrapper .be-review__policy, .be-review__policy{ margin:0 !important; color:#374151 !important; font-size:13px !important; } @media(max-width:380px){ .gform_wrapper .be-row, .be-row{ grid-template-columns:1fr !important; gap:4px !important; } } /* Page title */ .be-review__page-title{ margin:6px 0 12px; color:#0b1320; text-align:left; } @media (max-width: 1279px) { .be-review__page-title{ font-size:26px; font-weight:600; line-height:1.2; } } @media (min-width: 1280px) { .be-review__page-title{ font-size:32px; font-weight:600; line-height:1.2; } } /* Lines with labels + pill and value underneath (Airbnb style) */ .be-line{ padding:14px 0; border-bottom:1px solid #eef0f3; } .be-line:last-child{ border-bottom:none; } .be-line__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; } .be-label{ font-weight:600; color:#374151; font-size:14px; } .be-value{ color:#111827; font-size:14px; line-height:1.4; } .be-line-total .be-value strong{ font-size:20px; font-weight:700; } /* Pills (Change / Details) */ .be-pill{ appearance:none; border:1px solid #e5e7eb; background:#f8fafc; border-radius:9999px; padding:6px 12px; font-size:12px; font-weight:600; color:#111827; cursor:pointer; transition:background .15s,border-color .15s; } .be-pill:hover{ background:#f1f5f9; border-color:#d1d5db; } /* Price details breakdown */ .be-details{ margin-top:10px; background:#f8fafc; border:1px solid #eef0f3; border-radius:8px; padding:10px; display: block; max-width: 100%; box-sizing: border-box; } .be-breakdown{ display:flex; justify-content:space-between; font-size:13px; color:#374151; gap: 12px; min-width: 0; max-width: 100%; } .be-breakdown span:first-child{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100% - 100px); /* Leave space for amount */ } .be-break-amt{ font-weight:700; color:#111827; flex-shrink: 0; white-space: nowrap; } /* Hide native number arrows */ .be-no-spin::-webkit-outer-spin-button, .be-no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .be-no-spin { -moz-appearance: textfield; appearance: textfield; } /* Stepper layout - compact Airbnb style (truly flush, borderless) */ .be-stepper, .gform_wrapper .be-stepper, .gfield .be-stepper { display:inline-flex !important; align-items:stretch !important; gap:0 !important; border:0 !important; border-radius:10px; overflow:hidden; background:transparent !important; margin:0 !important; padding:0 !important; font-size:0 !important; /* Remove whitespace gaps */ line-height:0 !important; box-shadow:none !important; } /* Input field styling - truly flush, borderless */ .be-stepper input[type="number"], .gform_wrapper .be-stepper input[type="number"], .gfield .be-stepper input[type="number"] { width:50px !important; min-width:50px !important; max-width:50px !important; text-align:center !important; border:0 !important; border-left:0 !important; border-right:0 !important; border-top:0 !important; border-bottom:0 !important; padding:10px 1px !important; margin:0 !important; outline:none !important; box-shadow:none !important; font-weight:600 !important; font-size:16px !important; background:#fff !important; flex-shrink:0 !important; vertical-align:top !important; } /* Button styling - truly flush, borderless */ .be-stepper__btn, .gform_wrapper .be-stepper__btn, .gfield .be-stepper__btn { width:40px !important; min-width:40px !important; max-width:40px !important; height:auto !important; padding:0 !important; margin:0 !important; border:0 !important; border-left:0 !important; border-right:0 !important; border-top:0 !important; border-bottom:0 !important; box-shadow:none !important; outline:none !important; cursor:pointer !important; background:#f7f7f8 !important; font-size:18px !important; line-height:1 !important; display:grid !important; place-items:center !important; color:#111827 !important; transition:background .15s !important; flex-shrink:0 !important; vertical-align:top !important; /* Prevent mobile zoom on quick taps */ touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* Round the left button on left side only */ .be-stepper__btn:first-child, .gform_wrapper .be-stepper__btn:first-child { border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } /* Round the right button on right side only */ .be-stepper__btn:last-child, .gform_wrapper .be-stepper__btn:last-child { border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; } .be-stepper__btn:hover, .gform_wrapper .be-stepper__btn:hover { background:#eef1f4 !important; } .be-stepper__btn:active, .gform_wrapper .be-stepper__btn:active { background:#e7eaee !important; transform: scale(0.95) !important; } /* Collapse the Children field until user clicks "+ Add children" */ #field_2_38.be-collapsed { display: none !important; } /* The inline reveal link (Airbnb style) */ .be-inline-link { display: inline-block; margin: 4px 0 0 0; padding: 0; background: none; border: none; cursor: pointer; text-decoration: underline; color: #111; font-size: 14px; font-weight: 400; line-height: 1.4; transition: text-decoration 0.2s ease; white-space: nowrap; /* Prevent line breaks */ /* Prevent mobile zoom on quick taps */ touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .be-inline-link:hover { text-decoration: none; } .be-inline-link:focus { outline: 2px solid currentColor; outline-offset: 2px; } /* Extras: text-only cards */ .be-extras-grid { display:grid; gap:14px; padding:16px; grid-template-columns: 1fr; } @media (min-width: 640px){ .be-extras-grid { grid-template-columns: 1fr 1fr; } } .be-extra-card { display:grid; grid-template-columns: 1fr auto; /* text on left, stepper on right */ gap:12px; padding:12px; border:1px solid #eee; border-radius:10px; align-items:center; } .be-extra-card__body { min-width: 0; } .be-extra-card__name { font-weight:600; margin-bottom:4px; } .be-extra-card__desc { color:#667085; font-size:.9rem; margin-bottom:6px; } .be-extra-card__price { font-weight:600; } .be-extra-card__unit { font-weight:400; color:#667085; margin-left:6px; } .be-extra-card__ctrl { display:flex; align-items:center; justify-content:flex-end; } /* Note: Main stepper styles are defined above. Extras steppers use .be-extra-stepper for specific styling */ /* ===== Extras modal (popup) ===== */ .be-modal { position: fixed; inset: 0; z-index: 999998; /* High but slightly below calendar overlay */ display: none; /* hidden by default */ place-items: center; padding: 16px; } .be-modal.is-open { display: grid; } .be-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); } .be-modal__panel { position: relative; background: #fff; border-radius: 16px; width: min(96vw, 720px); max-height: min(92vh, 760px); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; box-shadow: 0 10px 15px rgba(0,0,0,.05), 0 20px 45px rgba(0,0,0,.12); } .be-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #eef0f3; } .be-modal__header h3 { margin: 0; font-size: 18px; font-weight: 800; color: #0b1320; } .be-modal__close { appearance: none; border: 0; background: transparent; font-size: 22px; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; /* Prevent mobile zoom on quick taps */ touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .be-modal__close:hover { background: #f3f4f6; } .be-extras-grid { padding: 16px; overflow: auto; } .be-modal__footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid #eef0f3; background: #fff; } /* Simple primary button used in modal footer */ .be-btn { appearance: none; border: 1px solid #e5e7eb; background: #f8fafc; color: #111827; font-weight: 600; padding: 8px 14px; border-radius: 10px; cursor: pointer; /* Prevent mobile zoom on quick taps */ touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .be-btn--primary { background: #d97736; border-color: #d97736; color: #fff; } .be-btn--primary:hover { filter: brightness(0.98); } /* Small chip for “x selected” next to the Add extras link */ .be-chip { display: inline-block; margin-left: 8px; padding: 3px 8px; font-size: 12px; font-weight: 700; color: #0b1320; background: #eef2ff; border: 1px solid #e5e7eb; border-radius: 9999px; vertical-align: middle; } /* ===== Centering fixes (modal + calendar) ===== */ .booking-overlay, .be-modal { justify-items: center; align-items: center; /* equal side padding + iOS safe areas */ padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); } .booking-calendar-container, .be-modal__panel { margin-left: auto; margin-right: auto; box-sizing: border-box; } /* Slightly narrower on small screens so you get visible side gutters */ .booking-calendar-container { width: min(92vw, 720px); } .be-modal__panel { width: min(92vw, 720px); } /* ===== Extras card – stacked layout ===== */ .be-extras-grid { padding: 16px; } .be-extra-card { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px; border: 1px solid #eee; border-radius: 12px; background: #fff; } .be-extra-card__name { font-weight: 700; font-size: 1rem; color: #0b1320; } .be-extra-card__desc { color: #667085; font-size: .92rem; line-height: 1.35; } .be-extra-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .be-extra-card__price { font-weight: 700; color: #111827; } .be-extra-card__unit { font-weight: 500; color: #667085; margin-left: 6px; } /* Stepper: reuse but keep compact inside cards */ .be-extra-stepper.be-stepper { border-radius: 10px; padding: 0; gap: 4px; /* Small gap for extras steppers for better readability in cards */ } .be-extra-stepper .be-stepper__btn { width: 36px; height: 36px; } .be-extra-stepper input[type="number"] { width: 64px; padding: 6px 8px; } /* Optional: ensure any focused number input won't scroll-change */ input[type="number"].be-no-spin:focus { outline: none; } /* Ensure [hidden] truly hides even if a class sets display */ [hidden]{display:none !important;} /* Single-CTA footer styles for review, customer info, payment (per-person: form 2, vehicle: form 3) */ #gform_page_2_2 .gform_page_footer.be-footer-single, #gform_page_2_3 .gform_page_footer.be-footer-single, #gform_page_2_4 .gform_page_footer.be-footer-single, #gform_page_3_2 .gform_page_footer.be-footer-single, #gform_page_3_3 .gform_page_footer.be-footer-single, #gform_page_3_4 .gform_page_footer.be-footer-single{ display:block; padding: 0 16px 16px; } /* Hide any stray Previous buttons on these single-CTA pages (per-person + vehicle) */ #gform_page_2_2 .gform_page_footer .gform_previous_button, #gform_page_2_2 .gform_page_footer [name="gform_previous"], #gform_page_2_3 .gform_page_footer .gform_previous_button, #gform_page_2_3 .gform_page_footer [name="gform_previous"], #gform_page_2_4 .gform_page_footer .gform_previous_button, #gform_page_2_4 .gform_page_footer [name="gform_previous"], #gform_page_3_2 .gform_page_footer .gform_previous_button, #gform_page_3_2 .gform_page_footer [name="gform_previous"], #gform_page_3_3 .gform_page_footer .gform_previous_button, #gform_page_3_3 .gform_page_footer [name="gform_previous"], #gform_page_3_4 .gform_page_footer .gform_previous_button, #gform_page_3_4 .gform_page_footer [name="gform_previous"]{ display:none !important; } /* Make Next/Submit buttons use brand color and smooth shadow */ .gform_page_footer .gform_next_button, .gform_page_footer [name="gform_next_button"], .gform_next_button, .gform_page_footer .gform_button, .gform_footer .gform_button, .gform_button.button { display: block; width: calc(100% - 48px); max-width: calc(100% - 48px); padding: 12px 20px; border-radius: 12px; background: #d97736; color: #ffffff; font-weight: 600; font-size: 15px; line-height: 1.3; border: 0; cursor: pointer; text-align: center; transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.02), 0px 1px 1px rgba(3, 7, 18, 0.04), 0px 1px 1px rgba(3, 7, 18, 0.06), 0px 3px 3px rgba(3, 7, 18, 0.08), 0px 4px 4px rgba(3, 7, 18, 0.10); margin: 0 auto; box-sizing: border-box; } /* On mobile, prevent taps/scrolls on the footer padding/gradient area from affecting the underlying page – only the actual button should be interactive. */ @media (max-width: 1279px) { .gform_page_footer { pointer-events: none; } .gform_page_footer .gform_next_button, .gform_page_footer [name="gform_next_button"], .gform_page_footer .gform_button { pointer-events: auto; } } .gform_page_footer .gform_next_button:hover, .gform_page_footer [name="gform_next_button"]:hover, .gform_next_button:hover, .gform_page_footer .gform_button:hover, .gform_footer .gform_button:hover, .gform_button.button:hover { background: #ea8c3f; /* slightly lighter brand color */ transform: translateY(-1px); box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.03), 0px 1px 2px rgba(3, 7, 18, 0.06), 2px 4px 6px rgba(3, 7, 18, 0.10); } .gform_page_footer .gform_next_button:active, .gform_page_footer [name="gform_next_button"]:active, .gform_next_button:active, .gform_page_footer .gform_button:active, .gform_footer .gform_button:active, .gform_button.button:active { background: #c76627; transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .gform_page_footer .gform_next_button:focus-visible, .gform_page_footer [name="gform_next_button"]:focus-visible, .gform_next_button:focus-visible, .gform_page_footer .gform_button:focus-visible, .gform_footer .gform_button:focus-visible, .gform_button.button:focus-visible { outline: 2px solid #d97736; outline-offset: 2px; } .gform_page_footer .gform_next_button.be-loading, .gform_page_footer [name="gform_next_button"].be-loading, .gform_next_button.be-loading { opacity: 0.8 !important; cursor: wait !important; position: relative !important; pointer-events: auto !important; } .gform_page_footer .gform_next_button.be-loading::after, .gform_page_footer [name="gform_next_button"].be-loading::after, .gform_next_button.be-loading::after { content: ''; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: rgba(255, 255, 255, 1); border-radius: 50%; animation: be-spin 0.8s linear infinite; pointer-events: none; } @keyframes be-spin { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } } /* Footer: in-flow by default (no fixed positioning) for robust mobile behavior */ .gform_page_footer { position: static; bottom: auto; left: auto; right: auto; background: transparent; padding: 20px 0 0; margin-top: 16px; z-index: auto; box-shadow: none; max-width: 100%; } /* No extra bottom padding needed now that footer is not fixed */ .gform_wrapper, .gform_page { padding-bottom: 0; } /* Hide Gravity Forms spinner to prevent button shifting */ .gform_page_footer .gform_ajax_spinner, .gform_page_footer .gform_spinner { display: inline-flex !important; align-items: center; justify-content: center; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; position: absolute !important; right: 24px; top: 50%; transform: translateY(-50%); opacity: 1 !important; visibility: visible !important; } .gform_page_footer .gform_ajax_spinner img, .gform_page_footer .gform_spinner img { width: 18px !important; height: 18px !important; margin: 0 !important; display: block !important; } /* Specific pages inherit the styles above - no override needed */ /* On medium+ screens, center the footer content with a max-width */ @media (min-width: 641px) { .gform_page_footer { max-width: 600px; margin-left: auto; margin-right: auto; padding: 20px 0 0; } } @media (max-width: 640px){ .gform_page_footer { padding: 16px 0 0; } .gform_page_footer .gform_next_button, .gform_page_footer [name="gform_next_button"], .gform_next_button { width: calc(100% - 40px); max-width: calc(100% - 40px); padding: 12px 18px; font-size: 14px; } /* Specific pages inherit the fixed positioning from main .gform_page_footer rule */ } /* ---- UX polish ---- */ .be-chip { display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; line-height:1; padding:.35rem .6rem; border-radius:999px; background:#eef1f4; border:1px solid #d8dee6; } .be-extras-lines { margin:.5rem 0 0 0; padding:0 0 0 1rem; } .be-extras-lines li { margin:.15rem 0; } .be-extra-card.is-zero { opacity:.55; } .be-extra-card [data-be-stepper] input[type="number"] { width:4.25rem; text-align:center; } /* Payment method radios: revert to native GF styling (no custom pills) */ .gfield--type-radio[data-be-payment] .gchoice { margin:.25rem 0; position: relative; z-index: 1; pointer-events: auto !important; } .gfield--type-radio[data-be-payment] input[type=radio] { position: static !important; opacity: 1 !important; pointer-events: auto !important; display: inline-block !important; } .gfield--type-radio[data-be-payment] label { display: inline-block; padding: 0; border: 0; border-radius: 0; cursor: pointer; background: transparent; font-weight: 400; pointer-events: auto !important; } .gfield--type-radio[data-be-payment] input:checked + label { background: transparent; border-color: transparent; font-weight: 600; } /* Below desktop breakpoint: ensure any desktop-only layout pieces don't linger */ @media (max-width: 1279px) { /* Allow the wrapper to behave like a normal block container */ .be-desktop-layout { max-width: 100%; padding: 0 16px; } /* Hide the desktop summary card on non-desktop widths, even if JS created it earlier */ .be-desktop-summary-sticky { display: none !important; } } /* Mobile: make ALL radio options (vehicle variant, payment, etc.) full-width and nicely wrapped */ @media (max-width: 767px) { .gform_wrapper .gfield--type-radio .gchoice { display:block; margin:.25rem 0; } .gform_wrapper .gfield--type-radio label { display:flex; align-items:flex-start; justify-content:flex-start; width:100%; text-align:left; white-space:normal; line-height:1.3; } /* On mobile, payment method pills become card-like rows instead of chips */ .gfield--type-radio[data-be-payment] label { border-radius:12px; } } /* ===== DESKTOP LAYOUT (Two-Column) ===== */ @media (min-width: 1280px) { /* On true desktop, let the footer sit after the last field instead of sticking to viewport bottom */ .gform_page_footer { position: static; max-width: 100%; left: auto; right: auto; bottom: auto; transform: none; background: transparent; box-shadow: none; padding: 24px 0 0; margin-top: 24px; } /* Remove extra bottom padding since footer is no longer fixed on desktop */ .gform_wrapper, .gform_page { padding-bottom: 0; } /* Two-column layout wrapper */ .be-desktop-layout { display: grid; grid-template-columns: 1fr 400px; gap: 40px; max-width: 1400px; margin: 0 auto; padding: 0 20px; } /* Form area - left column */ .be-desktop-form-area { min-width: 0; /* Prevent grid overflow */ } /* Step 1 card styling - match review/summary cards so fields feel grouped */ #gform_page_2_1 .gform_body { background: #ffffff; border-radius: 24px; padding: 24px; border: 1px solid #e5e7eb; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06); } /* Calendar modal - wider on desktop to fit 2 months side-by-side */ .booking-calendar-container { width: min(90vw, 1000px) !important; max-width: 1000px !important; } /* Ensure alignment is maintained on desktop - force proper grid alignment */ .flatpickr-days { width: 100% !important; box-sizing: border-box !important; } .flatpickr-days .dayContainer { padding: 6px 20px 4px !important; grid-template-columns: repeat(7, 1fr) !important; gap: 8px 8px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; display: grid !important; } /* Ensure all day cells are properly centered in their grid cells */ .dayContainer > * { min-width: 0 !important; box-sizing: border-box !important; } .flatpickr-day { justify-self: center !important; align-self: center !important; margin: 0 !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Ensure empty placeholder cells take up space */ .flatpickr-day.flatpickr-empty, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { visibility: visible !important; opacity: 0 !important; pointer-events: none !important; display: block !important; } /* Summary card - right column */ .be-desktop-summary-sticky { position: sticky; top: 0; align-self: start; height: fit-content; max-height: calc(100vh - 40px); overflow-y: auto; margin-top: 68px; /* align summary border with Date Selection border */ } .be-desktop-summary { background: #fff; border-radius: 12px; padding: 24px; border:1px solid #d1d5db; box-shadow: none; } /* Remove double divider at bottom of summary */ .be-desktop-summary hr:last-of-type { display: none; } /* Remove top border on policy section across all forms/layouts */ .be-summary-policy { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; } .be-summary-policy hr { display: none !important; } /* Summary header with tour image */ .be-summary-header { margin-bottom: 20px; } .be-summary-header img { width: 100%; height: 200px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; } .be-summary-header h3 { font-size: 18px; font-weight: 700; color: #0b1320; margin: 0; line-height: 1.3; } /* Summary details section */ .be-summary-details { padding: 16px 0; border-top: 1px solid #eef0f3; border-bottom: 1px solid #eef0f3; margin-bottom: 16px; } .be-summary-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0; gap: 12px; } .be-summary-row:last-child { padding-bottom: 0; } .be-summary-label { font-size: 14px; font-weight: 600; color: #374151; flex-shrink: 0; } .be-summary-value { font-size: 14px; color: #111827; text-align: right; flex: 1; min-width: 0; } /* Price breakdown */ .be-summary-pricing { padding: 16px 0; border-bottom: 1px solid #eef0f3; margin-bottom: 16px; } .be-summary-price-section { margin-bottom: 16px; } .be-summary-price-section-title { font-size: 14px; font-weight: 600; color: #0b1320; margin-bottom: 12px; } .be-summary-price-details { display: flex; flex-direction: column; gap: 8px; } .be-summary-price-detail-line { display: flex; justify-content: space-between; font-size: 14px; color: #374151; padding: 4px 0; } .be-summary-price-detail-line span:first-child { color: #6b7280; } .be-summary-price-detail-line span:last-child { color: #0b1320; font-weight: 500; } .be-summary-price-line { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: #374151; } .be-summary-total { display: flex; justify-content: space-between; padding: 12px 0 0 0; margin-top: 12px; border-top: 1px solid #eef0f3; font-size: 18px; font-weight: 700; color: #111827; } /* CTA Button */ .be-summary-cta { width: 100%; padding: 14px 18px; border-radius: 12px; background: #111827; color: #fff; font-weight: 600; font-size: 16px; border: 0; cursor: pointer; transition: filter 0.15s; margin-bottom: 16px; } .be-summary-cta:hover { filter: brightness(1.05); } .be-summary-cta:active { filter: brightness(0.95); } /* Policy section */ .be-summary-policy { font-size: 12px; color: #6b7280; line-height: 1.5; padding-top: 16px; border-top: 1px solid #eef0f3; } .be-summary-policy-title { font-weight: 600; color: #111827; margin-bottom: 6px; } /* Wrap Gravity Forms in desktop layout - no additional styling needed */ /* Ensure form pages work well in desktop layout */ .gform_wrapper .gform_body { max-width: none; } } /* Hide the virtual product line item from the UI */ .be-hidden-product, .be-hidden-total { display: none !important; } /* Load More Dates Button */ .be-load-more-dates-btn { display: block; width: calc(100% - 32px); padding: 16px 24px; margin: 24px auto; background-color: #007bff; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; text-align: center; max-width: 300px; position: relative; z-index: 100; pointer-events: auto; clear: both; } /* Ensure button is not affected by Flatpickr styles */ .be-load-more-dates-btn { display: block !important; width: calc(100% - 32px) !important; padding: 16px 24px !important; margin: 24px auto !important; background-color: #007bff !important; color: white !important; border: none !important; border-radius: 8px !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; text-align: center !important; max-width: 300px !important; position: relative !important; z-index: 100 !important; pointer-events: auto !important; clear: both !important; box-sizing: border-box !important; } .be-load-more-dates-btn:hover:not(:disabled) { background-color: #0056b3; transform: translateY(-1px); } .be-load-more-dates-btn:active:not(:disabled) { transform: translateY(0); } .be-load-more-dates-btn:disabled { background-color: #6c757d; cursor: not-allowed; opacity: 0.7; } .be-load-more-dates-btn:focus { outline: 2px solid #007bff; outline-offset: 2px; } @media (max-width: 1279px) { .be-load-more-dates-btn { margin: 16px auto; padding: 14px 20px; font-size: 15px; } } /* Step headings used in Gravity Forms HTML fields */ .gform_wrapper .be-step-title { font-size: 26px !important; /* default/fallback */ font-weight: 600 !important; line-height: 1.2 !important; } /* Step heading responsive sizes */ @media (max-width: 1279px) { .gform_wrapper .be-step-title { font-size: 26px !important; } } @media (min-width: 1280px) { .gform_wrapper .be-step-title { font-size: 32px !important; } } /* Field wrapper spacing (all steps / all tour types) */ .gform_wrapper .gform_fields .gfield:not(.gfield_html):not(.gfield--type-html):not(.gfield_hidden) { margin-bottom: 16px; } .gform_wrapper .gform_fields .gfield:not(.gfield_html):not(.gfield--type-html):not(.gfield_hidden):last-child { margin-bottom: 0; } /* Generic input containers: no visual card by default (we style the actual inputs) */ .gform_wrapper .gform_fields .gfield:not(.gfield_html):not(.gfield--type-html):not(.gfield_hidden) > .ginput_container { width: 100%; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } /* Base single-line controls (own their border) */ .gform_wrapper input[type="text"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="number"], .gform_wrapper select, .gform_wrapper textarea { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1px solid #d1d5db; padding: 10px 12px; background: #ffffff; font-size: 16px; /* Prevent iOS Safari auto-zoom on focus */ } /* When the virtual keyboard is open on mobile, let the footer scroll with content instead of being fixed to avoid iOS layout glitches. */ @media (max-width: 1279px) { body.be-keyboard-open .gform_page_footer { position: static; left: auto; right: auto; bottom: auto; transform: none; box-shadow: none; background: #ffffff; padding-top: 16px; margin-top: 16px; } } /* Global field labels (all steps / all tour types) */ .gform_wrapper .gfield_label { color: #0b1320; font-weight: 700; margin-bottom: 6px; background: #ffffff; padding: 0 6px; position: relative; z-index: 1; } /* Name and radio (Payment Method) legends: use default inline styling */ .gform_wrapper .gfield--type-name legend.gfield_label, .gform_wrapper .gfield--type-radio legend.gfield_label { color: #0b1320; font-weight: 700; margin-bottom: 6px; } .gform_wrapper .gform_fields .gfield.gfield--type-name:not(.gfield_html):not(.gfield--type-html):not(.gfield_hidden), .gform_wrapper .gform_fields .gfield.gfield--type-radio:not(.gfield_html):not(.gfield--type-html):not(.gfield_hidden) { position: relative; padding: 0; border: 0; border-radius: 0; box-shadow: none; margin-bottom: 16px; } /* Card styling for Name field (inner container) */ .gform_wrapper .gfield--type-name .ginput_container_name { background: #ffffff; border: 1px solid #d1d5db; border-radius: 12px; padding: 14px 16px 10px 16px; box-shadow: none; } /* Card styling intentionally NOT applied to numeric steppers (Adults, Children, Number of Vehicles) so they can keep their minimalist inline look. We style only the inner .be-stepper controls above. */ /* Card styling for Payment Method (radio) field (inner container) */ .gform_wrapper .gfield--type-radio .ginput_container { background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 12px !important; padding: 14px 16px 10px 16px !important; box-shadow: none !important; position: relative; z-index: 1; pointer-events: auto !important; } /* Card styling for Gravity Forms credit card / Stripe payment element containers */ .gform_wrapper .ginput_container_creditcard, .gform_wrapper .ginput_container_stripe_creditcard, .gform_wrapper .ginput_container_stripe_payment_element { background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 12px !important; padding: 14px 16px 10px 16px !important; box-shadow: none !important; } /* Hide Gravity Forms default datepicker trigger icon (we render our own calendar) */ .ginput_container_date img.ui-datepicker-trigger, .ginput_container_date button.gform-datepicker { display: none !important; } /* Do not card the step title (HTML field) */ .gform_wrapper .gform_fields .gfield.gfield_html, .gform_wrapper .gform_fields .gfield.gfield--type-html { background: none; border: none; border-radius: 0; box-shadow: none; padding: 0; margin-bottom: 16px; }