/* =========================================================== Day Pass Booking System — Front-end styles Every selector below is prefixed dpbs- and unique to this plugin. Nothing here reuses a class from the Schedule Forms (cwf-*) plugin, so the two stylesheets can never override each other when both load on the same page. v1.7.1 - Added fullscreen calendar mode for mobile headers =========================================================== */ /* Position context for mobile modal absolute positioning */ .dpbs-booking-instance { position: relative; } /* Body scroll lock when fullscreen calendar is open */ .dpbs-body-no-scroll { overflow: hidden !important; position: fixed; width: 100%; height: 100%; touch-action: none; -webkit-overflow-scrolling: none; } .dpbs-form-wrap { max-width: 100%; } .dpbs-form-panel { padding: 0; } .dpbs-form-heading { font-family: "NeutraText", sans-serif !important; font-size: 27px; font-weight: 500 !important; line-height: 33px; color: #281d18; margin: 0px; margin-bottom: 20px; } .dpbs-price-line { font-family: "NeutraText", sans-serif !important; margin-bottom: 28px; font-size: 16px; font-weight: 500; line-height: 23px; color: #281d18; display: none; } .dpbs-price-line.is-visible { display: block; } /* ---- Field grid (2 columns) ---- */ .dpbs-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dpbs-field { display: flex; flex-direction: column; position: relative; } .dpbs-field-full { grid-column: 1 / -1; } .dpbs-field label { font-size: 14px; font-weight: 600; color: #1f1f1f; margin-bottom: 8px; } .dpbs-field input[type="text"], .dpbs-field input[type="tel"], .dpbs-field input[type="email"], .dpbs-field input[type="number"], .dpbs-select-wrap select { background: #fff; border: 1px solid #d8d5cc; border-radius: 10px; padding: 14px 16px; font-size: 15px; color: #1f1f1f; width: 100%; box-sizing: border-box; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .dpbs-field input:focus, .dpbs-select-wrap select:focus { outline: none; border-color: #e8521e; box-shadow: 0 0 0 3px rgba(232, 82, 30, 0.12); } .dpbs-field-hint { font-size: 11px; color: #999; margin-top: 5px; display: block; } .dpbs-select-wrap { position: relative; } .dpbs-select-wrap select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; } .dpbs-select-wrap::after { content: ""; position: absolute; right: 16px; top: 50%; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #1f1f1f; transform: translateY(-40%); pointer-events: none; } /* ---- Seats info ---- */ .dpbs-seats-info { font-size: 12px; color: #e8521e; font-weight: 600; margin-top: 5px; display: block; } /* ---- Date field with calendar icon ---- */ .dpbs-date-field { position: relative; } .dpbs-date-field input { cursor: pointer; background: #fff; padding-left: 44px; min-height: 48px; -webkit-tap-highlight-color: transparent; } .dpbs-date-icon { position: absolute; left: auto; right: 12px; top: 10px; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #e8521e, #d44415); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 2px 6px rgba(232, 82, 30, 0.3); } .dpbs-date-icon .dashicons { font-size: 14px; width: 14px; height: 14px; display: flex; align-items: center; } /* ---- Calendar popover ---- The JS (positionCalendar) sets position:fixed + top/left inline via getBoundingClientRect() after the popover is appended to , so this stylesheet only needs to own display/visibility and cosmetics — it must NOT set position/top/left/width with !important, or it will fight the JS's own positioning on resize/orientation change. */ .dpbs-calendar-popover { display: none; width: 320px; max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04); padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; } .dpbs-calendar-popover.is-open { display: block; } /* ============================================ FULLSCREEN CALENDAR MODE Used on mobile devices when the form is in a header to bypass iOS Safari's getBoundingClientRect() bug ============================================ */ .dpbs-calendar-popover.is-fullscreen { background: rgba(0, 0, 0, 0.6); border-radius: 0; box-shadow: none; padding: 20px; overflow-y: auto; } .dpbs-calendar-popover.is-fullscreen .dpbs-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } /* Calendar content card inside fullscreen overlay */ .dpbs-calendar-popover.is-fullscreen .dpbs-cal-content { background: #fff; border-radius: 16px; padding: 20px; width: 100%; max-width: 360px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1); } /* Close button for fullscreen mode */ .dpbs-cal-close { display: none; background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.3); color: #fff; font-size: 24px; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; align-items: center; justify-content: center; padding: 0; margin-left: auto; flex-shrink: 0; transition: background 0.15s ease, border-color 0.15s ease; -webkit-tap-highlight-color: transparent; } .dpbs-cal-close:hover, .dpbs-cal-close:active { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.5); } .dpbs-calendar-popover.is-fullscreen .dpbs-cal-close { display: flex; } /* Fullscreen header styling */ .dpbs-calendar-popover.is-fullscreen .dpbs-cal-title { color: #fff; font-weight: 700; font-size: 16px; } .dpbs-calendar-popover.is-fullscreen .dpbs-cal-nav-btn { background: rgba(255, 255, 255, 0.15); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); } .dpbs-calendar-popover.is-fullscreen .dpbs-cal-nav-btn:hover { background: rgba(255, 255, 255, 0.25); color: #fff; } /* ============================================ END FULLSCREEN CALENDAR MODE ============================================ */ .dpbs-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f0ede6; } .dpbs-cal-title { font-weight: 700; font-size: 15px; color: #1f1f1f; } .dpbs-cal-nav-btn { background: #f5f3ed; border: none; cursor: pointer; min-width: 44px; min-height: 44px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #444; font-size: 14px; transition: background 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; } .dpbs-cal-nav-btn:hover { background: #e8e4da; color: #1f1f1f; } .dpbs-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; } .dpbs-cal-dow-row { margin-bottom: 4px; } .dpbs-cal-dow { font-size: 10px; font-weight: 800; color: #aaa; padding-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .dpbs-cal-dow.is-weekend { color: #e8521e; } .dpbs-cal-day { position: relative; font-size: 13px; font-weight: 500; padding: 7px 0 10px; border-radius: 8px; cursor: pointer; color: #2b2b2b; background: none; border: 1.5px solid transparent; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: background 0.12s ease, border-color 0.12s ease; /* Improve touch target */ touch-action: manipulation; } .dpbs-cal-day:hover:not(.is-disabled):not(.is-empty):not(.is-selected) { background: #f8f6f1; border-color: #e8e4da; } .dpbs-cal-day:active:not(.is-disabled):not(.is-empty):not(.is-selected) { background: #f0ede6; } .dpbs-cal-day.is-empty { cursor: default; pointer-events: none; } .dpbs-cal-day.is-weekend { color: #e8521e; } .dpbs-cal-day.is-disabled { color: #d4d0c8; cursor: not-allowed; text-decoration: line-through; text-decoration-color: #e0dcd4; } .dpbs-cal-day.is-selected { background: #e8521e; color: #fff; font-weight: 700; border-color: #e8521e; box-shadow: 0 3px 10px rgba(232, 82, 30, 0.3); } .dpbs-cal-day.is-selected .dpbs-dot { background: #fff !important; } .dpbs-dot { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; } .dpbs-dot-limited { background: #3b82f6; } .dpbs-dot-full { background: #ef4444; } /* ---- Footer / submit ---- */ .dpbs-form-footer { display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding-top: 22px; } .dpbs-form-message { font-size: 13px; flex: 1; font-weight: 500; line-height: 1.4; } .dpbs-form-message.is-error { color: #c0392b; } .dpbs-form-message.is-success { color: #1c7a3d; } .dpbs-submit-btn { background: #e8521e; color: #fff; border: none; width: auto; height: 45px; padding: 14px 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; transition: background 0.15s ease; -webkit-tap-highlight-color: transparent; } .dpbs-submit-btn:hover { background: #cf4716; } .dpbs-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; } .dpbs-submit-btn .dashicons { margin-left: 8px; } /* ========================================================================== PRIVATE SUITES CALENDAR STYLING Makes the suite date fields use the same visual style as the regular day-pass calendar - same input appearance, same popover, same everything. ========================================================================== */ /* Suite date field wrapper - matches regular date field */ .dpbs-date-field--suite { position: relative; } /* Suite date inputs - identical styling to regular .dpbs-date input */ .dpbs-suite-date-input { cursor: pointer; background: #fff; border: 1px solid #d8d5cc; border-radius: 10px; padding: 14px 44px 14px 16px; font-size: 15px; color: #1f1f1f; width: 100%; box-sizing: border-box; font-family: inherit; min-height: 48px; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .dpbs-suite-date-input:focus { outline: none; border-color: #e8521e; box-shadow: 0 0 0 3px rgba(232, 82, 30, 0.12); } /* Suite calendar popovers - use same base styles as regular popover */ .dpbs-cal-popover--suite-start, .dpbs-cal-popover--suite-end { display: none; width: 320px; max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04); padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; } .dpbs-cal-popover--suite-start.is-open, .dpbs-cal-popover--suite-end.is-open { display: block; } /* Date range highlight in end date calendar - shows selected start date range */ .dpbs-cal-day.is-in-range { background: rgba(232, 82, 30, 0.08); border-radius: 0; } .dpbs-cal-day.is-range-start { border-radius: 8px 0 0 8px; background: rgba(232, 82, 30, 0.12); } .dpbs-cal-day.is-range-end { border-radius: 0 8px 8px 0; background: rgba(232, 82, 30, 0.12); } .dpbs-cal-day.is-range-start.is-range-end { border-radius: 8px; background: #e8521e; color: #fff; font-weight: 700; box-shadow: 0 3px 10px rgba(232, 82, 30, 0.3); } /* ---- Responsive ---- */ @media (max-width: 768px) { .dpbs-form-grid { grid-template-columns: 1fr; gap: 18px; } .dpbs-form-heading { font-size: 26px; } .dpbs-date-field input { min-height: 52px; font-size: 16px; /* Prevents iOS auto-zoom on focus */ -webkit-tap-highlight-color: transparent; } .dpbs-form-footer { flex-direction: column-reverse; align-items: stretch; gap: 12px; margin-top: 20px; padding-top: 0px; } .dpbs-form-message { text-align: center; } .dpbs-submit-btn { width: 100%; } /* Larger touch targets for mobile calendar */ .dpbs-cal-day { font-size: 14px; min-height: 48px; padding: 8px 0 12px; } .dpbs-cal-nav-btn { min-width: 48px; min-height: 48px; font-size: 16px; } } /* Small mobile phones */ @media (max-width: 380px) { .dpbs-calendar-popover.is-fullscreen .dpbs-cal-content { padding: 16px; border-radius: 12px; } .dpbs-cal-day { font-size: 13px; min-height: 44px; } .dpbs-cal-dow { font-size: 9px; } } /* Fix: Sunday should also be weekend */ .dpbs-cal-dow:first-child { color: #e8521e; }