/* * OunekOS Booking — Frontend Stylesheet * Covers: Workplace Search, Workplace Results + Booking Wizard, * Hospitality Search, Hospitality Results + Booking Flow + Add-ons * * Architecture notes * ------------------ * • All colours reference --oubk-* custom properties injected by PHP into . * • Bootstrap 5 utility classes are available but intentionally NOT overridden * at the global level — only scoped inside .oubk-container. * • Every rule is scoped under .oubk-container (or .oubk-*) to avoid * polluting the host theme. * • Flatpickr overrides are also scoped as tightly as possible. */ /* ============================================================ 1. LOCAL CUSTOM PROPERTIES (fallbacks if PHP injects nothing) ============================================================ */ :root { --oubk-primary: #1a2a3a; --oubk-primary-light: #2d4055; --oubk-secondary: #4a2c2a; --oubk-secondary-hover: #5d3835; --oubk-accent: #0d9488; --oubk-accent-light: #14b8a6; --oubk-bg: #faf9f7; /* Derived — always computed, never overridden via admin */ --oubk-accent-soft: rgba(13,148,136,0.12); --oubk-primary-overlay: rgba(26,42,58,0.88); --oubk-white: #ffffff; --oubk-cream: #f5f3ef; --oubk-bg-light: #f8f9fa; --oubk-border: #e5e3df; --oubk-border-light: #f0eee9; --oubk-text: #1a2a3a; --oubk-text-secondary: #5a6a7a; --oubk-text-muted: #8a9aaa; --oubk-available: #22c55e; --oubk-partial: #f59e0b; --oubk-unavailable: #ef4444; --oubk-disabled: #d1d5db; --oubk-success: #16a34a; --oubk-error: #dc2626; --oubk-shadow-sm: 0 2px 8px rgba(26,42,58,0.08); --oubk-shadow-md: 0 4px 20px rgba(26,42,58,0.12); --oubk-shadow-lg: 0 8px 40px rgba(26,42,58,0.16); --oubk-radius-sm: 4px; --oubk-radius-md: 8px; --oubk-radius-lg: 12px; --oubk-radius-pill: 50px; --oubk-radius-full: 50%; --oubk-font-display: 'Cormorant Garamond', Georgia, serif; --oubk-font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif; --oubk-transition: 0.2s ease; --oubk-transition-slow: 0.4s ease; } /* ============================================================ 2. CONTAINER BASE ============================================================ */ .oubk-container { box-sizing: border-box; font-family: var(--oubk-font-body); color: var(--oubk-text); background: transparent; line-height: 1.6; -webkit-font-smoothing: antialiased; } .oubk-container *, .oubk-container *::before, .oubk-container *::after { box-sizing: inherit; } /* Prevent host-theme heading margins bleeding in */ .oubk-container h1, .oubk-container h2, .oubk-container h3, .oubk-container h4, .oubk-container h5 { margin: 0; padding: 0; line-height: 1.2; } .oubk-container p { margin: 0; } .oubk-container a { color: var(--oubk-accent); text-decoration: none; } .oubk-container a:hover { text-decoration: underline; } .oubk-container img { max-width: 100%; height: auto; display: block; } /* ============================================================ 2b. INLINE SVG ICONS (from API all_icons) ============================================================ */ .oubk-icon-svg { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; } .oubk-icon-svg svg { width: 100%; height: 100%; fill: currentColor; } /* Larger variant inside space-type / amenity icon containers */ .oubk-space-icon .oubk-icon-svg, .oubk-service-icon .oubk-icon-svg { width: 1.2em; height: 1.2em; } .oubk-chip .oubk-icon-svg { width: 0.9em; height: 0.9em; } .oubk-amenity-tag .oubk-icon-svg { width: 0.75em; height: 0.75em; } /* ============================================================ 3. SPINNER / INIT PLACEHOLDER ============================================================ */ .oubk-init-placeholder { min-height: 200px; display: flex; align-items: center; justify-content: center; } .oubk-spinner-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .oubk-spinner { width: 48px; height: 48px; border: 3px solid var(--oubk-border); border-top-color: var(--oubk-accent); border-radius: 50%; animation: oubk-spin 0.8s linear infinite; } @keyframes oubk-spin { to { transform: rotate(360deg); } } /* ============================================================ 4. HERO SECTION (search pages) ============================================================ */ .oubk-hero { position: relative; background: var(--oubk-primary-overlay); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem 1rem; /* IMPORTANT: no overflow:hidden — dropdowns must escape the hero */ overflow: visible !important; } .oubk-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; overflow: hidden; /* clip only the background image, not child dropdowns */ } .oubk-hero__overlay { position: absolute; inset: 0; background: var(--oubk-primary-overlay); z-index: 1; pointer-events: none; /* allow clicks through to dropdowns below */ } .oubk-hero__content { position: relative; z-index: 2; text-align: center; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; overflow: visible !important; } .oubk-hero__title { font-family: var(--oubk-font-display); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 400; color: #fff; letter-spacing: 0.02em; margin-bottom: 0.2rem; } .oubk-hero__subtitle { font-family: var(--oubk-font-body); font-size: clamp(0.8rem, 1.3vw, 0.92rem); font-weight: 300; color: rgba(255,255,255,0.82); margin-bottom: 1rem; } /* Compact hero — no title/subtitle, content-sized */ .oubk-hero--compact { padding: 1.25rem 1rem; } .oubk-hero--compact .oubk-hero__title, .oubk-hero--compact .oubk-hero__subtitle { display: none; } /* No-hero variant for results pages */ .oubk-results-header { background: var(--oubk-primary); padding: 1.5rem 1rem; } .oubk-results-header__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .oubk-back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.85); font-size: 0.9rem; font-weight: 500; transition: color var(--oubk-transition); cursor: pointer; background: none; border: none; padding: 0; font-family: var(--oubk-font-body); } .oubk-back-link:hover, .oubk-back-link:focus { color: #fff; text-decoration: none; outline: none; } .oubk-back-link i { font-size: 0.8rem; } /* ============================================================ 5. SEARCH BAR (pill-shaped, shared by both verticals) ============================================================ */ .oubk-search-wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 0.75rem; position: relative; z-index: 10; } .oubk-search-bar { background: var(--oubk-white); border-radius: var(--oubk-radius-pill); padding: 0.85rem 1.25rem; box-shadow: var(--oubk-shadow-lg); display: flex; align-items: stretch; gap: 0; position: relative; /* No overflow:hidden — dropdowns must not be clipped by pill radius */ } /* Search fields */ .oubk-search-field { flex: 1 1 0%; position: relative; padding: 0.5rem 1rem; cursor: pointer; min-width: 0; z-index: 1051; } .oubk-search-field::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 36px; background: var(--oubk-border); } .oubk-search-field:last-of-type::after { display: none; } .oubk-field-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--oubk-text-secondary); margin-bottom: 0.2rem; display: block; white-space: nowrap; } .oubk-field-value { display: flex; align-items: center; justify-content: space-between; font-size: 0.88rem; font-weight: 400; color: var(--oubk-text); padding-bottom: 0.2rem; border-bottom: 2px solid var(--oubk-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; gap: 0.4rem; } .oubk-field-value .oubk-field-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .oubk-field-value i { font-size: 0.68rem; color: var(--oubk-text-secondary); flex-shrink: 0; } /* Search button — circular */ .oubk-search-btn { width: 52px; height: 52px; min-width: 52px; background: var(--oubk-secondary); border: none; border-radius: var(--oubk-radius-full); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--oubk-transition), transform var(--oubk-transition); margin-left: 0.75rem; align-self: center; flex-shrink: 0; } .oubk-search-btn:hover, .oubk-search-btn:focus { background: var(--oubk-secondary-hover); transform: scale(1.06); outline: none; } .oubk-search-btn i { font-size: 1rem; } /* Filters toggle */ .oubk-filters-toggle { width: 100%; display: flex; justify-content: center; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid rgba(255,255,255,0.15); } .oubk-filters-toggle-btn { background: transparent; border: none; color: rgba(255,255,255,0.75); font-family: var(--oubk-font-body); font-size: 0.82rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: var(--oubk-radius-md); transition: background var(--oubk-transition), color var(--oubk-transition); } .oubk-filters-toggle-btn:hover { background: rgba(255,255,255,0.1); color: #fff; } .oubk-filters-toggle-btn i.oubk-chevron { transition: transform 0.3s; } .oubk-filters-toggle-btn.is-open i.oubk-chevron { transform: rotate(180deg); } /* ============================================================ 6. AMENITY / FILTER CHIPS ============================================================ */ .oubk-advanced-filters { max-height: 0; overflow: hidden; transition: max-height var(--oubk-transition-slow), padding var(--oubk-transition-slow); width: 100%; } .oubk-advanced-filters.is-open { max-height: 360px; padding-top: 0.85rem; } .oubk-chips-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; } .oubk-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; background: var(--oubk-cream); border: 2px solid transparent; border-radius: var(--oubk-radius-md); cursor: pointer; font-family: var(--oubk-font-body); font-size: 0.82rem; color: var(--oubk-text-secondary); transition: all var(--oubk-transition); user-select: none; } .oubk-chip:hover { border-color: var(--oubk-text); color: var(--oubk-text); } .oubk-chip.is-selected { background: var(--oubk-accent-soft); border-color: var(--oubk-accent); color: var(--oubk-accent); } .oubk-chip i { font-size: 0.9rem; width: 18px; text-align: center; } /* ============================================================ 7. DROPDOWN PANELS ============================================================ */ .oubk-dropdown { position: absolute; top: calc(100% + 0.5rem); left: 0; background: var(--oubk-white); border-radius: var(--oubk-radius-lg); box-shadow: var(--oubk-shadow-lg); padding: 1.25rem; z-index: 1050; display: none; min-width: 260px; max-height: 68vh; overflow-y: auto; border: 1px solid var(--oubk-border-light); } .oubk-dropdown.is-open { display: block; animation: oubk-fade-drop 0.22s ease forwards; } @keyframes oubk-fade-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Centred variant for date range panel */ .oubk-dropdown--center { left: 50%; transform: translateX(-50%); min-width: 580px; } .oubk-dropdown--center.is-open { animation: oubk-fade-drop-center 0.22s ease forwards; } @keyframes oubk-fade-drop-center { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* Right-aligned variant */ .oubk-dropdown--right { left: auto; right: 0; } .oubk-dropdown__title { font-family: var(--oubk-font-display); font-size: 1.05rem; font-weight: 500; color: var(--oubk-text); margin-bottom: 0.85rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--oubk-border); } /* Mobile close button (hidden on desktop) */ .oubk-dropdown__close { display: none; position: absolute; top: 0.85rem; right: 0.85rem; width: 30px; height: 30px; border: none; background: var(--oubk-cream); border-radius: var(--oubk-radius-full); cursor: pointer; align-items: center; justify-content: center; color: var(--oubk-text-secondary); transition: background var(--oubk-transition); flex-shrink: 0; } .oubk-dropdown__close:hover { background: var(--oubk-border); } /* Date header with clear */ .oubk-date-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.85rem; } .oubk-clear-dates { font-size: 0.82rem; color: var(--oubk-text-secondary); cursor: pointer; transition: color var(--oubk-transition); background: none; border: none; font-family: var(--oubk-font-body); padding: 0; } .oubk-clear-dates:hover { color: var(--oubk-accent); } /* Date legend */ .oubk-date-legend { display: flex; gap: 1rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--oubk-border); flex-wrap: wrap; } .oubk-legend-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--oubk-text-secondary); } .oubk-legend-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .oubk-legend-dot--available { background: var(--oubk-available); } .oubk-legend-dot--partial { background: var(--oubk-partial); } .oubk-legend-dot--unavailable { background: var(--oubk-unavailable); } /* ============================================================ 8. LOCATION LIST ITEMS ============================================================ */ .oubk-loc-item { display: flex; align-items: center; padding: 0.45rem 0.5rem; cursor: pointer; border-radius: var(--oubk-radius-sm); transition: background var(--oubk-transition); margin: 0 -0.5rem; } .oubk-loc-item:hover { background: var(--oubk-cream); } .oubk-loc-item--all { font-weight: 600; border-bottom: 1px solid var(--oubk-border); margin-bottom: 0.4rem; padding-bottom: 0.65rem; } .oubk-loc-checkbox { width: 19px; height: 19px; border: 2px solid var(--oubk-text); border-radius: var(--oubk-radius-sm); margin-right: 0.75rem; display: flex; align-items: center; justify-content: center; transition: all var(--oubk-transition); flex-shrink: 0; } .oubk-loc-item.is-selected .oubk-loc-checkbox { background: var(--oubk-accent); border-color: var(--oubk-accent); } .oubk-loc-checkbox i { color: #fff; font-size: 0.65rem; opacity: 0; transition: opacity var(--oubk-transition); } .oubk-loc-item.is-selected .oubk-loc-checkbox i { opacity: 1; } .oubk-loc-name { font-size: 0.92rem; color: var(--oubk-text); } /* ============================================================ 9. SPACE TYPE LIST ITEMS (workplace) ============================================================ */ .oubk-space-item { display: flex; align-items: center; padding: 0.75rem 0.5rem; cursor: pointer; border-radius: var(--oubk-radius-md); border: 2px solid transparent; transition: all var(--oubk-transition); margin: 0.2rem 0; } .oubk-space-item:hover { background: var(--oubk-cream); } .oubk-space-item.is-selected { background: var(--oubk-accent-soft); border-color: var(--oubk-accent); } .oubk-space-icon { width: 38px; height: 38px; background: var(--oubk-cream); border-radius: var(--oubk-radius-md); display: flex; align-items: center; justify-content: center; margin-right: 0.85rem; color: var(--oubk-text-secondary); font-size: 1rem; flex-shrink: 0; transition: all var(--oubk-transition); } .oubk-space-item.is-selected .oubk-space-icon { background: var(--oubk-accent); color: #fff; } .oubk-space-info { flex: 1; } .oubk-space-name { font-size: 0.92rem; font-weight: 500; color: var(--oubk-text); margin-bottom: 0.1rem; } .oubk-space-capacity { font-size: 0.73rem; color: var(--oubk-text-secondary); } .oubk-space-price { font-size: 0.82rem; font-weight: 600; color: var(--oubk-accent); } /* ============================================================ 10. DURATION LIST ITEMS (workplace) ============================================================ */ .oubk-duration-item { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.5rem; cursor: pointer; border-radius: var(--oubk-radius-md); border: 2px solid transparent; transition: all var(--oubk-transition); margin: 0.2rem 0; } .oubk-duration-item:hover { background: var(--oubk-cream); } .oubk-duration-item.is-selected { background: var(--oubk-accent-soft); border-color: var(--oubk-accent); } .oubk-duration-info { display: flex; align-items: center; gap: 0.5rem; } .oubk-duration-info i { color: var(--oubk-text-secondary); width: 18px; text-align: center; font-size: 0.85rem; transition: color var(--oubk-transition); } .oubk-duration-item.is-selected .oubk-duration-info i { color: var(--oubk-accent); } .oubk-duration-name { font-size: 0.92rem; color: var(--oubk-text); } .oubk-duration-price { font-size: 0.82rem; font-weight: 600; color: var(--oubk-accent); } /* ============================================================ 11. TIME LIST (workplace start-time panel) ============================================================ */ .oubk-time-list { max-height: 270px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; } .oubk-time-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.85rem; cursor: pointer; border-radius: var(--oubk-radius-sm); font-size: 0.88rem; transition: all var(--oubk-transition); } .oubk-time-item:hover:not(.is-disabled) { background: var(--oubk-cream); } .oubk-time-item.is-selected { background: var(--oubk-accent); color: #fff; } .oubk-time-item.is-disabled { color: var(--oubk-text-muted); cursor: not-allowed; } .oubk-time-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .oubk-time-dot--available { background: var(--oubk-available); } .oubk-time-dot--unavailable { background: var(--oubk-unavailable); } .oubk-time-item.is-selected .oubk-time-dot--available { background: rgba(255,255,255,0.75); } /* ============================================================ 12. GUEST / PERSON COUNTER (both verticals) ============================================================ */ .oubk-counter-row { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--oubk-border); } .oubk-counter-row:last-child { border-bottom: none; } .oubk-counter-info h4 { font-family: var(--oubk-font-body); font-size: 0.92rem; font-weight: 600; color: var(--oubk-text); margin-bottom: 0.15rem; } .oubk-counter-info span { font-size: 0.76rem; color: var(--oubk-text-secondary); } .oubk-counter { display: flex; align-items: center; gap: 0.5rem; } .oubk-counter-btn { width: 34px; height: 34px; border: 2px solid var(--oubk-text); border-radius: var(--oubk-radius-full); background: transparent; color: var(--oubk-text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--oubk-transition); font-size: 0.9rem; line-height: 1; padding: 0; flex-shrink: 0; } .oubk-counter-btn:hover:not(:disabled) { background: var(--oubk-accent); border-color: var(--oubk-accent); color: #fff; } .oubk-counter-btn:disabled { opacity: 0.28; cursor: not-allowed; } .oubk-counter-val { width: 28px; text-align: center; font-size: 1rem; font-weight: 600; color: var(--oubk-text); font-variant-numeric: tabular-nums; } /* ============================================================ 13. FLATPICKR CUSTOM STYLES ============================================================ */ .oubk-container .flatpickr-calendar { font-family: var(--oubk-font-body) !important; box-shadow: none !important; border: none !important; width: 100% !important; background: transparent !important; } .oubk-container .flatpickr-months { padding: 0 0.25rem; } .oubk-container .flatpickr-month, .oubk-container .flatpickr-current-month { color: var(--oubk-text) !important; fill: var(--oubk-text) !important; } .oubk-container .flatpickr-monthDropdown-months, .oubk-container .flatpickr-current-month .numInputWrapper { font-family: var(--oubk-font-display) !important; font-size: 1.05rem !important; font-weight: 500 !important; } .oubk-container .flatpickr-weekday { font-family: var(--oubk-font-body) !important; font-size: 0.72rem !important; font-weight: 700 !important; color: var(--oubk-text-secondary) !important; } .oubk-container .flatpickr-day { font-family: var(--oubk-font-body) !important; font-size: 0.88rem !important; color: var(--oubk-text) !important; border-radius: var(--oubk-radius-full) !important; height: 44px !important; line-height: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; position: relative !important; padding-top: 2px !important; } .oubk-container .flatpickr-day.today { border-color: var(--oubk-accent) !important; } .oubk-container .flatpickr-day.selected, .oubk-container .flatpickr-day.startRange, .oubk-container .flatpickr-day.endRange { background: var(--oubk-accent) !important; border-color: var(--oubk-accent) !important; color: #fff !important; } .oubk-container .flatpickr-day.inRange { background: var(--oubk-accent-soft) !important; border-color: transparent !important; box-shadow: none !important; } .oubk-container .flatpickr-day.flatpickr-disabled, .oubk-container .flatpickr-day.flatpickr-disabled:hover { color: var(--oubk-text-muted) !important; background: var(--oubk-disabled) !important; opacity: 0.6 !important; cursor: not-allowed !important; text-decoration: line-through !important; } .oubk-container .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange) { background: var(--oubk-cream) !important; border-color: var(--oubk-border) !important; } .oubk-container .flatpickr-prev-month, .oubk-container .flatpickr-next-month { fill: var(--oubk-text) !important; } /* Availability dot (workplace date picker) */ .oubk-avail-dot { position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; } .oubk-avail-dot--available { background: var(--oubk-available); } .oubk-avail-dot--partial { background: var(--oubk-partial); } .oubk-avail-dot--unavailable { background: var(--oubk-unavailable); } .oubk-container .flatpickr-day.selected .oubk-avail-dot { bottom: 3px; } /* Day price label (hospitality calendar) */ .oubk-day-price { font-size: 0.58rem; color: var(--oubk-accent); font-weight: 600; line-height: 1; } .oubk-container .flatpickr-day.selected .oubk-day-price, .oubk-container .flatpickr-day.startRange .oubk-day-price, .oubk-container .flatpickr-day.endRange .oubk-day-price, .oubk-container .flatpickr-day.inRange .oubk-day-price { color: rgba(255,255,255,0.82); } .oubk-container .flatpickr-day.flatpickr-disabled .oubk-day-price { display: none; } /* Two-month range calendar */ .oubk-container .flatpickr-days { width: auto !important; } .oubk-container .flatpickr-innerContainer { display: flex !important; justify-content: center !important; } .oubk-container .dayContainer { min-width: 280px !important; max-width: 280px !important; } /* ============================================================ 14. SEARCH RESULTS LAYOUT (shared) ============================================================ */ .oubk-results-body { padding: 1.5rem 1rem 3rem; background: var(--oubk-bg-light); min-height: 500px; } .oubk-results-inner { max-width: 1200px; margin: 0 auto; } /* Search summary / modify strip */ .oubk-summary-strip { background: var(--oubk-white); border-radius: var(--oubk-radius-lg); box-shadow: var(--oubk-shadow-sm); padding: 1rem 1.25rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .oubk-summary-strip__left { display: flex; flex-direction: column; gap: 0.2rem; } .oubk-summary-strip__title { font-size: 0.72rem; color: var(--oubk-text-secondary); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .oubk-summary-strip__location { display: flex; align-items: center; gap: 0.4rem; font-size: 1.02rem; font-weight: 600; color: var(--oubk-text); } .oubk-summary-strip__location i { color: var(--oubk-accent); font-size: 0.85rem; } .oubk-summary-items { display: flex; align-items: center; gap: 0; flex-wrap: wrap; flex: 1; justify-content: flex-end; } .oubk-summary-item { display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem; border-left: 1px solid var(--oubk-border); } .oubk-summary-item:first-child { border-left: none; } .oubk-summary-item__icon { width: 30px; height: 30px; background: var(--oubk-accent-soft); border-radius: var(--oubk-radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oubk-summary-item__icon i { color: var(--oubk-accent); font-size: 0.8rem; } .oubk-summary-item__label { font-size: 0.68rem; color: var(--oubk-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; line-height: 1; margin-bottom: 0.15rem; } .oubk-summary-item__value { font-size: 0.88rem; font-weight: 500; color: var(--oubk-text); line-height: 1; } .oubk-modify-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; background: transparent; border: 2px solid var(--oubk-border); border-radius: var(--oubk-radius-md); font-family: var(--oubk-font-body); font-size: 0.82rem; font-weight: 500; color: var(--oubk-text-secondary); cursor: pointer; transition: all var(--oubk-transition); white-space: nowrap; } .oubk-modify-btn:hover { border-color: var(--oubk-text); color: var(--oubk-text); } /* Two-column results layout */ .oubk-results-layout { display: grid; grid-template-columns: 1fr 380px; gap: 1.5rem; align-items: start; } .oubk-results-col { min-width: 0; } .oubk-results-count-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; } .oubk-results-count { font-family: var(--oubk-font-display); font-size: 1.4rem; font-weight: 500; color: var(--oubk-text); } .oubk-results-count span { color: var(--oubk-accent); } .oubk-sort-wrap { display: flex; align-items: center; gap: 0.5rem; } .oubk-sort-label { font-size: 0.82rem; color: var(--oubk-text-secondary); white-space: nowrap; } .oubk-sort-select { padding: 0.35rem 0.65rem; border: 2px solid var(--oubk-border); border-radius: var(--oubk-radius-md); font-family: var(--oubk-font-body); font-size: 0.82rem; color: var(--oubk-text); background: var(--oubk-white); cursor: pointer; } .oubk-sort-select:focus { outline: none; border-color: var(--oubk-accent); } /* ============================================================ 15. RESOURCE / ACCOMMODATION CARDS ============================================================ */ .oubk-card { background: var(--oubk-white); border-radius: var(--oubk-radius-lg); box-shadow: var(--oubk-shadow-sm); border: 2px solid transparent; overflow: hidden; cursor: pointer; transition: box-shadow var(--oubk-transition), border-color var(--oubk-transition), transform var(--oubk-transition); margin-bottom: 1rem; } .oubk-card:hover { box-shadow: var(--oubk-shadow-md); transform: translateY(-2px); } .oubk-card.is-selected { border-color: var(--oubk-accent); box-shadow: 0 0 0 3px var(--oubk-accent-soft), var(--oubk-shadow-md); } /* Card image */ .oubk-card__img-wrap { position: relative; width: 100%; padding-top: 52%; overflow: hidden; background: var(--oubk-cream); } .oubk-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .oubk-card:hover .oubk-card__img { transform: scale(1.03); } .oubk-card__badge { position: absolute; top: 0.75rem; left: 0.75rem; background: var(--oubk-accent); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.55rem; border-radius: var(--oubk-radius-sm); } .oubk-card__badge--featured { background: var(--oubk-secondary); } /* Horizontal card layout (results list) */ .oubk-card--h { display: flex; align-items: stretch; padding: 0; } .oubk-card--h .oubk-card__img-wrap { width: 220px; min-width: 220px; padding-top: 0; flex-shrink: 0; } .oubk-card--h .oubk-card__img { position: relative; width: 100%; height: 100%; } .oubk-card__body { padding: 1rem 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .oubk-card__name { font-family: var(--oubk-font-display); font-size: 1.2rem; font-weight: 500; color: var(--oubk-text); line-height: 1.2; } .oubk-card__desc { font-size: 0.85rem; color: var(--oubk-text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .oubk-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .oubk-meta-pill { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--oubk-text-secondary); background: var(--oubk-cream); padding: 0.2rem 0.55rem; border-radius: 100px; } .oubk-meta-pill i { font-size: 0.7rem; color: var(--oubk-accent); } .oubk-card__amenities { display: flex; flex-wrap: wrap; gap: 0.3rem; } .oubk-amenity-tag { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: var(--oubk-text-secondary); background: var(--oubk-bg-light); border: 1px solid var(--oubk-border); padding: 0.15rem 0.45rem; border-radius: 100px; } .oubk-amenity-tag i { color: var(--oubk-accent); font-size: 0.65rem; } .oubk-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.65rem; border-top: 1px solid var(--oubk-border-light); flex-wrap: wrap; } .oubk-card__price { display: flex; flex-direction: column; line-height: 1.2; } .oubk-card__price-amount { font-size: 1.2rem; font-weight: 700; color: var(--oubk-accent); } .oubk-card__price-label { font-size: 0.7rem; color: var(--oubk-text-secondary); } .oubk-card__price-ex { font-size: 0.7rem; color: var(--oubk-text-muted); } .oubk-card__action { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.1rem; background: var(--oubk-secondary); color: #fff; border: none; border-radius: var(--oubk-radius-md); font-family: var(--oubk-font-body); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background var(--oubk-transition), transform var(--oubk-transition); white-space: nowrap; } .oubk-card__action:hover { background: var(--oubk-secondary-hover); transform: translateY(-1px); } .oubk-card.is-selected .oubk-card__action { background: var(--oubk-accent); } /* Image gallery (hospitality cards) */ .oubk-gallery { position: relative; padding-top: 58%; overflow: hidden; background: var(--oubk-cream); border-radius: var(--oubk-radius-lg) var(--oubk-radius-lg) 0 0; } .oubk-gallery__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; } .oubk-gallery__slide.is-active { opacity: 1; } .oubk-gallery__slide img { width: 100%; height: 100%; object-fit: cover; } .oubk-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background: rgba(255,255,255,0.85); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--oubk-text); font-size: 0.7rem; transition: all var(--oubk-transition); z-index: 2; } .oubk-gallery__nav:hover { background: #fff; box-shadow: var(--oubk-shadow-sm); } .oubk-gallery__nav--prev { left: 0.5rem; } .oubk-gallery__nav--next { right: 0.5rem; } .oubk-gallery__dots { position: absolute; bottom: 0.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.3rem; z-index: 2; } .oubk-gallery__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); cursor: pointer; transition: background var(--oubk-transition); } .oubk-gallery__dot.is-active { background: #fff; } /* ============================================================ 16. BOOKING SIDEBAR (workplace results) ============================================================ */ .oubk-sidebar { background: var(--oubk-white); border-radius: var(--oubk-radius-lg); box-shadow: var(--oubk-shadow-md); position: sticky; top: 90px; overflow: hidden; } .oubk-sidebar__header { background: var(--oubk-primary); padding: 1.1rem 1.25rem; } .oubk-sidebar__title { font-family: var(--oubk-font-display); font-size: 1.05rem; font-weight: 500; color: #fff; margin-bottom: 0.15rem; } .oubk-sidebar__subtitle { font-size: 0.82rem; color: rgba(255,255,255,0.72); } .oubk-sidebar__body { padding: 1.25rem; max-height: calc(100vh - 200px); overflow-y: auto; } /* Mobile sidebar toggle */ .oubk-sidebar__toggle { display: none; width: 100%; background: var(--oubk-primary); color: #fff; border: none; padding: 0.85rem 1.25rem; font-family: var(--oubk-font-body); font-size: 0.9rem; font-weight: 600; cursor: pointer; align-items: center; justify-content: space-between; } /* Empty state */ .oubk-empty-state { text-align: center; padding: 2rem 1rem; color: var(--oubk-text-secondary); } .oubk-empty-state__icon { font-size: 2.5rem; margin-bottom: 0.75rem; color: var(--oubk-text-muted); } .oubk-empty-state h4 { font-family: var(--oubk-font-body); font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--oubk-text); } .oubk-empty-state p { font-size: 0.85rem; line-height: 1.5; } /* Booking type toggle */ .oubk-booking-type-toggle { display: flex; background: var(--oubk-cream); border-radius: var(--oubk-radius-md); padding: 3px; margin-bottom: 1.1rem; } .oubk-booking-type-btn { flex: 1; padding: 0.45rem 0.5rem; background: transparent; border: none; border-radius: calc(var(--oubk-radius-md) - 2px); font-family: var(--oubk-font-body); font-size: 0.82rem; font-weight: 500; color: var(--oubk-text-secondary); cursor: pointer; transition: all var(--oubk-transition); display: flex; align-items: center; justify-content: center; gap: 0.35rem; } .oubk-booking-type-btn.is-active { background: var(--oubk-white); color: var(--oubk-text); box-shadow: var(--oubk-shadow-sm); } /* ============================================================ 17. FORM ELEMENTS (shared by sidebar + booking flow) ============================================================ */ .oubk-form-section { margin-bottom: 1.1rem; } .oubk-form-section-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--oubk-text-secondary); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; } .oubk-form-section-title i { color: var(--oubk-accent); } .oubk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .oubk-form-group { margin-bottom: 0.85rem; } .oubk-form-group.is-full { grid-column: 1 / -1; } .oubk-form-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--oubk-text); margin-bottom: 0.35rem; } .oubk-form-label .oubk-required { color: var(--oubk-error); margin-left: 2px; } .oubk-form-input { width: 100%; padding: 0.6rem 0.85rem; border: 2px solid var(--oubk-border); border-radius: var(--oubk-radius-md); font-family: var(--oubk-font-body); font-size: 0.9rem; color: var(--oubk-text); background: var(--oubk-white); transition: border-color var(--oubk-transition), box-shadow var(--oubk-transition); -webkit-appearance: none; appearance: none; } .oubk-form-input::placeholder { color: var(--oubk-text-muted); } .oubk-form-input:focus { outline: none; border-color: var(--oubk-accent); box-shadow: 0 0 0 3px var(--oubk-accent-soft); } .oubk-form-input.is-valid { border-color: var(--oubk-success); } .oubk-form-input.is-invalid { border-color: var(--oubk-error); } .oubk-input-wrap { position: relative; } .oubk-input-wrap .oubk-form-input { padding-left: 2.5rem; } .oubk-input-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--oubk-text-muted); font-size: 0.85rem; pointer-events: none; } .oubk-validation-icon { position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); font-size: 0.85rem; } .oubk-validation-icon.is-valid { color: var(--oubk-success); } .oubk-validation-icon.is-invalid { color: var(--oubk-error); } .oubk-error-msg { font-size: 0.77rem; color: var(--oubk-error); margin-top: 0.25rem; display: none; } .oubk-form-group.has-error .oubk-error-msg { display: block; } .oubk-form-select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%235a6a7a'%3E%3Cpath d='M0 0l6 8 6-8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; padding-right: 2rem; } textarea.oubk-form-input { resize: vertical; min-height: 90px; } /* ============================================================ 18. RECURRING BOOKING ELEMENTS (workplace sidebar) ============================================================ */ .oubk-frequency-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 0.4rem; margin-bottom: 0.85rem; } .oubk-freq-btn { padding: 0.5rem 0.4rem; background: var(--oubk-cream); border: 2px solid transparent; border-radius: var(--oubk-radius-md); font-family: var(--oubk-font-body); font-size: 0.78rem; font-weight: 500; color: var(--oubk-text-secondary); cursor: pointer; text-align: center; transition: all var(--oubk-transition); } .oubk-freq-btn:hover { border-color: var(--oubk-border); color: var(--oubk-text); } .oubk-freq-btn.is-active { background: var(--oubk-accent-soft); border-color: var(--oubk-accent); color: var(--oubk-accent); } .oubk-days-grid { display: flex; gap: 0.3rem; flex-wrap: wrap; } .oubk-day-toggle { width: 36px; height: 36px; border: 2px solid var(--oubk-border); border-radius: var(--oubk-radius-full); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.72rem; font-weight: 700; color: var(--oubk-text-secondary); transition: all var(--oubk-transition); user-select: none; } .oubk-day-toggle:hover { border-color: var(--oubk-accent); color: var(--oubk-accent); } .oubk-day-toggle.is-selected { background: var(--oubk-accent); border-color: var(--oubk-accent); color: #fff; } .oubk-end-toggle { display: flex; background: var(--oubk-cream); border-radius: var(--oubk-radius-md); padding: 3px; margin-bottom: 0.75rem; } .oubk-end-btn { flex: 1; padding: 0.4rem 0.5rem; background: transparent; border: none; border-radius: calc(var(--oubk-radius-md) - 2px); font-family: var(--oubk-font-body); font-size: 0.78rem; font-weight: 500; color: var(--oubk-text-secondary); cursor: pointer; transition: all var(--oubk-transition); } .oubk-end-btn.is-active { background: var(--oubk-white); color: var(--oubk-text); box-shadow: var(--oubk-shadow-sm); } .oubk-occurrences-wrap { display: flex; align-items: center; gap: 0.75rem; } .oubk-stepper { display: flex; align-items: center; border: 2px solid var(--oubk-border); border-radius: var(--oubk-radius-md); overflow: hidden; } .oubk-stepper-btn { width: 34px; height: 34px; background: var(--oubk-cream); border: none; cursor: pointer; font-size: 0.82rem; color: var(--oubk-text); display: flex; align-items: center; justify-content: center; transition: background var(--oubk-transition); flex-shrink: 0; } .oubk-stepper-btn:hover:not(:disabled) { background: var(--oubk-accent-soft); color: var(--oubk-accent); } .oubk-stepper-val { width: 40px; text-align: center; font-size: 0.95rem; font-weight: 600; color: var(--oubk-text); border: none; background: transparent; font-family: var(--oubk-font-body); } /* Volume discount tiers */ .oubk-pricing-tiers { background: var(--oubk-cream); border-radius: var(--oubk-radius-md); padding: 0.85rem; margin-top: 0.75rem; } .oubk-pricing-tiers__title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--oubk-text-secondary); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.35rem; } .oubk-tier-row { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0; font-size: 0.82rem; } .oubk-tier-row.is-active { color: var(--oubk-accent); font-weight: 600; } /* Dates preview */ .oubk-dates-preview { background: var(--oubk-cream); border-radius: var(--oubk-radius-md); padding: 0.75rem; margin-top: 0.75rem; } .oubk-dates-preview__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; font-size: 0.82rem; font-weight: 600; } .oubk-dates-preview__count { background: var(--oubk-accent); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 100px; } .oubk-preview-date { font-size: 0.8rem; color: var(--oubk-text-secondary); padding: 0.2rem 0; border-bottom: 1px solid var(--oubk-border-light); display: flex; justify-content: space-between; } .oubk-preview-date:last-child { border-bottom: none; } /* ============================================================ 19. BOOKING SUMMARY (sidebar + booking flow) ============================================================ */ .oubk-booking-summary { background: var(--oubk-bg-light); border-radius: var(--oubk-radius-md); padding: 0.85rem; margin-top: 0.85rem; } .oubk-summary-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 0.4rem 0; font-size: 0.88rem; gap: 0.5rem; } .oubk-summary-row + .oubk-summary-row { border-top: 1px solid var(--oubk-border-light); } .oubk-summary-row--total { border-top: 2px solid var(--oubk-primary) !important; margin-top: 0.3rem; padding-top: 0.6rem; font-size: 1rem; font-weight: 700; } .oubk-summary-row--total .oubk-summary-val { color: var(--oubk-accent); font-size: 1.1rem; } .oubk-summary-row--subtotal { border-top: 1px dashed var(--oubk-border) !important; } .oubk-summary-row--service { padding-left: 0.85rem; font-size: 0.82rem; color: var(--oubk-text-secondary); } .oubk-summary-label { color: var(--oubk-text-secondary); } .oubk-summary-val { font-weight: 600; color: var(--oubk-text); text-align: right; } .oubk-savings-badge { display: flex; align-items: center; gap: 0.4rem; background: rgba(34,197,94,0.12); color: var(--oubk-success); font-size: 0.78rem; font-weight: 600; padding: 0.35rem 0.65rem; border-radius: var(--oubk-radius-sm); margin-top: 0.5rem; } /* Booking action buttons (sidebar) */ .oubk-booking-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; } .oubk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 1.25rem; border-radius: var(--oubk-radius-md); font-family: var(--oubk-font-body); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all var(--oubk-transition); border: 2px solid transparent; text-align: center; white-space: nowrap; line-height: 1; } .oubk-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .oubk-btn--primary { background: var(--oubk-secondary); border-color: var(--oubk-secondary); color: #fff; } .oubk-btn--primary:hover:not(:disabled) { background: var(--oubk-secondary-hover); border-color: var(--oubk-secondary-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(74,44,42,0.28); } .oubk-btn--accent { background: var(--oubk-accent); border-color: var(--oubk-accent); color: #fff; } .oubk-btn--accent:hover:not(:disabled) { background: var(--oubk-accent-light); border-color: var(--oubk-accent-light); transform: translateY(-2px); } .oubk-btn--outline { background: transparent; border-color: var(--oubk-border); color: var(--oubk-text-secondary); } .oubk-btn--outline:hover:not(:disabled) { border-color: var(--oubk-text); color: var(--oubk-text); } .oubk-btn--ghost { background: transparent; border-color: transparent; color: var(--oubk-text-secondary); font-weight: 400; } .oubk-btn--ghost:hover:not(:disabled) { color: var(--oubk-accent); } .oubk-btn--full { width: 100%; } .oubk-btn--lg { padding: 0.85rem 1.6rem; font-size: 1rem; } /* Cart button */ .oubk-cart-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; background: var(--oubk-cream); border: 2px solid var(--oubk-border); border-radius: var(--oubk-radius-md); font-family: var(--oubk-font-body); font-size: 0.88rem; font-weight: 500; color: var(--oubk-text); cursor: pointer; transition: all var(--oubk-transition); position: relative; } .oubk-cart-btn:hover { border-color: var(--oubk-accent); color: var(--oubk-accent); } .oubk-cart-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--oubk-accent); color: #fff; font-size: 0.65rem; font-weight: 700; border-radius: 50%; line-height: 1; } /* ============================================================ 20. CART DRAWER (workplace) ============================================================ */ .oubk-cart-overlay { position: fixed; inset: 0; background: rgba(26,42,58,0.45); z-index: 1200; display: none; opacity: 0; transition: opacity 0.3s ease; } .oubk-cart-overlay.is-open { display: block; opacity: 1; } .oubk-cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw; background: var(--oubk-white); z-index: 1201; box-shadow: -4px 0 30px rgba(26,42,58,0.18); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); } .oubk-cart-drawer.is-open { transform: translateX(0); } .oubk-cart-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; background: var(--oubk-primary); flex-shrink: 0; } .oubk-cart-drawer__title { font-family: var(--oubk-font-display); font-size: 1.1rem; font-weight: 500; color: #fff; display: flex; align-items: center; gap: 0.5rem; } .oubk-cart-drawer__close { width: 30px; height: 30px; background: rgba(255,255,255,0.15); border: none; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.85rem; transition: background var(--oubk-transition); } .oubk-cart-drawer__close:hover { background: rgba(255,255,255,0.28); } .oubk-cart-drawer__body { flex: 1; overflow-y: auto; padding: 1.25rem; } .oubk-cart-drawer__footer { padding: 1.25rem; border-top: 1px solid var(--oubk-border); background: var(--oubk-white); flex-shrink: 0; } .oubk-cart-item { background: var(--oubk-bg-light); border-radius: var(--oubk-radius-md); padding: 0.85rem; margin-bottom: 0.75rem; position: relative; } .oubk-cart-item__name { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.3rem; } .oubk-cart-item__detail { font-size: 0.78rem; color: var(--oubk-text-secondary); line-height: 1.5; } .oubk-cart-item__price { font-weight: 700; color: var(--oubk-accent); font-size: 0.95rem; margin-top: 0.35rem; } .oubk-cart-item__remove { position: absolute; top: 0.6rem; right: 0.6rem; width: 22px; height: 22px; background: var(--oubk-border); border: none; border-radius: 50%; color: var(--oubk-text-secondary); font-size: 0.65rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--oubk-transition); } .oubk-cart-item__remove:hover { background: var(--oubk-error); color: #fff; } /* Floating cart button (mobile) */ .oubk-cart-float { position: fixed; bottom: 1.5rem; right: 1.5rem; background: var(--oubk-secondary); color: #fff; border: none; border-radius: 100px; padding: 0.75rem 1.25rem; display: none; align-items: center; gap: 0.5rem; font-family: var(--oubk-font-body); font-size: 0.88rem; font-weight: 600; cursor: pointer; box-shadow: var(--oubk-shadow-lg); z-index: 1100; transition: all var(--oubk-transition); } .oubk-cart-float.is-visible { display: flex; } .oubk-cart-float:hover { background: var(--oubk-secondary-hover); transform: translateY(-2px); } .oubk-cart-float__badge { background: #fff; color: var(--oubk-secondary); border-radius: 50%; width: 20px; height: 20px; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* ============================================================ 21. COUPON ROW ============================================================ */ .oubk-coupon-row { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .oubk-coupon-row .oubk-form-input { flex: 1; font-size: 0.85rem; padding: 0.5rem 0.75rem; } .oubk-coupon-row .oubk-btn { white-space: nowrap; padding: 0.5rem 0.85rem; font-size: 0.82rem; } .oubk-coupon-applied { display: flex; align-items: center; justify-content: space-between; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); border-radius: var(--oubk-radius-md); padding: 0.5rem 0.85rem; margin-top: 0.5rem; font-size: 0.82rem; } .oubk-coupon-applied span { color: var(--oubk-success); font-weight: 600; } .oubk-coupon-applied button { background: none; border: none; color: var(--oubk-text-secondary); cursor: pointer; font-size: 0.72rem; text-decoration: underline; font-family: var(--oubk-font-body); } /* ============================================================ 22. PROGRESS STEPS (booking flows) ============================================================ */ .oubk-progress-bar { background: var(--oubk-white); border-bottom: 1px solid var(--oubk-border); padding: 1.25rem 1rem; } .oubk-progress-inner { max-width: 720px; margin: 0 auto; display: flex; justify-content: space-between; position: relative; } .oubk-progress-inner::before { content: ''; position: absolute; top: 20px; left: 55px; right: 55px; height: 2px; background: var(--oubk-border); z-index: 0; } .oubk-progress-line { position: absolute; top: 20px; left: 55px; height: 2px; background: var(--oubk-accent); z-index: 1; transition: width var(--oubk-transition-slow); width: 0%; } .oubk-step { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; gap: 0.35rem; } .oubk-step__circle { width: 40px; height: 40px; border-radius: 50%; background: var(--oubk-white); border: 2px solid var(--oubk-border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.88rem; color: var(--oubk-text-muted); transition: all var(--oubk-transition); } .oubk-step.is-active .oubk-step__circle { border-color: var(--oubk-accent); color: var(--oubk-accent); box-shadow: 0 0 0 4px var(--oubk-accent-soft); } .oubk-step.is-done .oubk-step__circle { background: var(--oubk-accent); border-color: var(--oubk-accent); color: #fff; } .oubk-step__label { font-size: 0.75rem; font-weight: 500; color: var(--oubk-text-muted); text-align: center; white-space: nowrap; transition: color var(--oubk-transition); } .oubk-step.is-active .oubk-step__label, .oubk-step.is-done .oubk-step__label { color: var(--oubk-text); } /* ============================================================ 23. BOOKING FLOW LAYOUT (hospitality flow) ============================================================ */ .oubk-flow-body { padding: 2rem 1rem 3rem; background: var(--oubk-bg-light); } .oubk-flow-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; } /* Form panel */ .oubk-flow-panel { background: var(--oubk-white); border-radius: var(--oubk-radius-lg); box-shadow: var(--oubk-shadow-md); padding: 1.75rem; } .oubk-flow-panel__title { font-family: var(--oubk-font-display); font-size: 1.5rem; font-weight: 600; color: var(--oubk-primary); margin-bottom: 0.25rem; } .oubk-flow-panel__subtitle { font-size: 0.9rem; color: var(--oubk-text-secondary); margin-bottom: 1.5rem; } /* Step content panels */ .oubk-step-content { display: none; } .oubk-step-content.is-active { display: block; animation: oubk-fade-up 0.32s ease; } @keyframes oubk-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Form actions bar */ .oubk-form-actions { display: flex; gap: 0.85rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--oubk-border); } .oubk-form-actions .oubk-btn--outline { min-width: 120px; } .oubk-form-actions .oubk-btn--primary { flex: 1; } .oubk-btn-skip { width: 100%; background: none; border: none; color: var(--oubk-text-secondary); font-family: var(--oubk-font-body); font-size: 0.85rem; cursor: pointer; margin-top: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; transition: color var(--oubk-transition); } .oubk-btn-skip:hover { color: var(--oubk-accent); } /* Payment mode selection */ .oubk-payment-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem; } .oubk-payment-option { border: 2px solid var(--oubk-border); border-radius: var(--oubk-radius-lg); padding: 1rem; cursor: pointer; transition: all var(--oubk-transition); } .oubk-payment-option:hover { border-color: var(--oubk-accent); } .oubk-payment-option.is-selected { border-color: var(--oubk-accent); background: var(--oubk-accent-soft); } .oubk-payment-option__label { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.25rem; } .oubk-payment-option__amount { font-size: 1.2rem; font-weight: 700; color: var(--oubk-accent); } .oubk-payment-option__desc { font-size: 0.75rem; color: var(--oubk-text-secondary); margin-top: 0.2rem; } /* ── Disabled payment option (e.g. deposit — coming soon) ── */ .oubk-payment-option--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; user-select: none; } .oubk-coming-soon-badge { display: inline-block; margin-left: 0.4rem; padding: 1px 7px; font-size: 0.7rem; font-weight: 600; border-radius: 20px; background: var(--oubk-border, #e0e0e0); color: var(--oubk-text-secondary, #888); vertical-align: middle; letter-spacing: 0.02em; } /* ============================================================ 24. SERVICES / ADD-ONS GRID (hospitality flow step 2) ============================================================ */ .oubk-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin-bottom: 1.5rem; } /* Each wrapper is a grid item; it spans full width when expanded */ .oubk-service-wrap { display: contents; /* participates in the grid as transparent wrapper */ } .oubk-service-wrap.is-expanded { display: block; /* becomes a real block */ grid-column: 1 / -1; /* full row */ } /* When NOT expanded, the inner card must still behave as a grid item */ .oubk-service-wrap:not(.is-expanded) > .oubk-service-card { width: 100%; } .oubk-service-card { background: var(--oubk-cream); border: 2px solid transparent; border-radius: var(--oubk-radius-lg); padding: 1rem; cursor: pointer; transition: all 0.3s ease; position: relative; } .oubk-service-card:hover { background: var(--oubk-white); border-color: var(--oubk-border); box-shadow: var(--oubk-shadow-sm); } .oubk-service-card.is-selected { background: var(--oubk-accent-soft); border-color: var(--oubk-accent); } .oubk-service-card.has-options.is-selected { border-radius: var(--oubk-radius-lg) var(--oubk-radius-lg) 0 0; } .oubk-service-card__header { display: flex; align-items: flex-start; gap: 0.75rem; } /* Service icon — fixed square for SVG/FA icons */ .oubk-service-icon { width: 42px; height: 42px; background: var(--oubk-white); border-radius: var(--oubk-radius-md); display: flex; align-items: center; justify-content: center; color: var(--oubk-accent); font-size: 1rem; flex-shrink: 0; transition: all var(--oubk-transition); overflow: hidden; } .oubk-service-card.is-selected .oubk-service-icon { background: var(--oubk-accent); color: #fff; } /* Image inside service icon — fills the 42×42 container */ .oubk-service-img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--oubk-radius-md); display: block; } /* When card is selected, dim image slightly so check mark stands out */ .oubk-service-card.is-selected .oubk-service-img { opacity: 0.85; } /* Small variant for option rows */ .oubk-service-img--sm { width: 22px; height: 22px; object-fit: cover; border-radius: var(--oubk-radius-sm); flex-shrink: 0; } .oubk-opt-icon { display: flex; align-items: center; flex-shrink: 0; } .oubk-service-info { flex: 1; min-width: 0; } .oubk-service-name { font-weight: 600; font-size: 0.9rem; color: var(--oubk-text); margin-bottom: 0.2rem; } .oubk-service-desc { font-size: 0.78rem; color: var(--oubk-text-secondary); line-height: 1.4; } .oubk-service-price { font-size: 0.82rem; font-weight: 700; color: var(--oubk-accent); margin-top: 0.4rem; } .oubk-service-check { position: absolute; top: 0.75rem; right: 0.75rem; width: 20px; height: 20px; border: 2px solid var(--oubk-border); border-radius: var(--oubk-radius-sm); display: flex; align-items: center; justify-content: center; transition: all var(--oubk-transition); flex-shrink: 0; } .oubk-service-card.is-selected .oubk-service-check { background: var(--oubk-accent); border-color: var(--oubk-accent); } .oubk-service-check i { color: #fff; font-size: 0.65rem; opacity: 0; transition: opacity var(--oubk-transition); } .oubk-service-card.is-selected .oubk-service-check i { opacity: 1; } /* Service options expand panel */ .oubk-service-opts { display: none; background: var(--oubk-white); border: 2px solid var(--oubk-accent); border-top: none; border-radius: 0 0 var(--oubk-radius-lg) var(--oubk-radius-lg); padding: 1rem; margin-top: -2px; } .oubk-service-opts.is-open { display: block; animation: oubk-fade-drop 0.25s ease; } .oubk-opts-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--oubk-text-secondary); margin-bottom: 0.65rem; } .oubk-opt-item { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid var(--oubk-border-light); } .oubk-opt-item:last-child { border-bottom: none; } .oubk-opt-check { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .oubk-opt-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--oubk-accent); } .oubk-opt-name { font-size: 0.87rem; color: var(--oubk-text); } .oubk-opt-price { font-size: 0.82rem; font-weight: 700; color: var(--oubk-accent); } /* Scheduling inputs for add-ons */ .oubk-addon-schedule { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.65rem; } /* ============================================================ 25. GUEST FORM (hospitality booking flow) ============================================================ */ .oubk-guest-card { background: var(--oubk-cream); border-radius: var(--oubk-radius-lg); padding: 1.1rem; margin-bottom: 0.85rem; } .oubk-guest-card__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--oubk-border); } .oubk-guest-num { width: 34px; height: 34px; background: var(--oubk-accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .oubk-guest-card__title { font-weight: 600; font-size: 0.92rem; color: var(--oubk-text); } .oubk-guest-card__sub { font-size: 0.78rem; color: var(--oubk-text-secondary); } .oubk-copy-payer { margin-left: auto; background: transparent; border: 1px solid var(--oubk-accent); color: var(--oubk-accent); padding: 0.25rem 0.65rem; border-radius: var(--oubk-radius-md); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all var(--oubk-transition); font-family: var(--oubk-font-body); white-space: nowrap; } .oubk-copy-payer:hover { background: var(--oubk-accent); color: #fff; } /* ============================================================ 26. ORDER SUMMARY SIDEBAR (hospitality flow) ============================================================ */ .oubk-order-summary { position: sticky; top: 90px; } .oubk-order-card { background: var(--oubk-white); border-radius: var(--oubk-radius-lg); box-shadow: var(--oubk-shadow-md); overflow: hidden; } .oubk-order-card__header { background: var(--oubk-primary); padding: 1.1rem 1.25rem; } .oubk-order-card__room { font-family: var(--oubk-font-display); font-size: 1.05rem; font-weight: 500; color: #fff; margin-bottom: 0.15rem; } .oubk-order-card__sub { font-size: 0.82rem; color: rgba(255,255,255,0.7); } .oubk-order-card__body { padding: 1.1rem; } .oubk-order-dates { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--oubk-border); margin-bottom: 0.85rem; } .oubk-order-date { flex: 1; } .oubk-order-date__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--oubk-text-muted); font-weight: 600; } .oubk-order-date__val { font-weight: 600; font-size: 0.9rem; color: var(--oubk-text); margin-top: 0.1rem; } .oubk-order-date__arrow { color: var(--oubk-text-muted); } .oubk-order-guests { display: flex; align-items: center; gap: 0.4rem; font-size: 0.87rem; color: var(--oubk-text-secondary); margin-bottom: 0.85rem; } .oubk-order-guests i { color: var(--oubk-accent); } /* ============================================================ 27. POLICIES / TERMS AGREEMENT ============================================================ */ .oubk-policy-agree { margin-top: 1.25rem; } .oubk-agree-row { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0; cursor: pointer; } .oubk-agree-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--oubk-accent); flex-shrink: 0; margin-top: 2px; cursor: pointer; } .oubk-agree-row label { font-size: 0.85rem; color: var(--oubk-text-secondary); cursor: pointer; line-height: 1.4; } .oubk-agree-row label a { color: var(--oubk-accent); font-weight: 500; } /* ============================================================ 28. SPECIAL REQUEST + BOARD PLAN ============================================================ */ .oubk-board-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; } .oubk-board-btn { padding: 0.4rem 0.85rem; background: var(--oubk-cream); border: 2px solid transparent; border-radius: 100px; font-family: var(--oubk-font-body); font-size: 0.8rem; font-weight: 500; color: var(--oubk-text-secondary); cursor: pointer; transition: all var(--oubk-transition); } .oubk-board-btn:hover { border-color: var(--oubk-border); color: var(--oubk-text); } .oubk-board-btn.is-selected { background: var(--oubk-accent-soft); border-color: var(--oubk-accent); color: var(--oubk-accent); } /* ============================================================ 29. SUCCESS SCREEN ============================================================ */ .oubk-success { display: none; text-align: center; padding: 3rem 1.5rem; } .oubk-success.is-visible { display: block; animation: oubk-fade-up 0.4s ease; } .oubk-success__icon { width: 90px; height: 90px; background: linear-gradient(135deg, var(--oubk-success) 0%, #16a34a 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 2.5rem; color: #fff; animation: oubk-scale-in 0.45s cubic-bezier(0.175,0.885,0.32,1.275); } @keyframes oubk-scale-in { from { transform: scale(0); } 60% { transform: scale(1.12); } to { transform: scale(1); } } .oubk-success__title { font-family: var(--oubk-font-display); font-size: 2rem; color: var(--oubk-primary); margin-bottom: 0.75rem; } .oubk-success__msg { font-size: 0.95rem; color: var(--oubk-text-secondary); margin-bottom: 1.5rem; max-width: 380px; margin-left: auto; margin-right: auto; line-height: 1.6; } .oubk-success__ref { background: var(--oubk-cream); display: inline-block; padding: 1rem 1.75rem; border-radius: var(--oubk-radius-lg); margin-bottom: 1.5rem; } .oubk-success__ref-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--oubk-text-muted); font-weight: 600; } .oubk-success__ref-val { font-family: 'Courier New', Courier, monospace; font-size: 1.4rem; font-weight: 700; color: var(--oubk-primary); letter-spacing: 0.1em; } .oubk-success__note { background: var(--oubk-accent-soft); border-left: 4px solid var(--oubk-accent); padding: 0.85rem 1.1rem; text-align: left; border-radius: 0 var(--oubk-radius-md) var(--oubk-radius-md) 0; margin-bottom: 1.5rem; max-width: 480px; margin-left: auto; margin-right: auto; } .oubk-success__note-title { font-weight: 600; color: var(--oubk-primary); margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; } .oubk-success__note-title i { color: var(--oubk-accent); } .oubk-success__note p { font-size: 0.85rem; color: var(--oubk-text-secondary); line-height: 1.5; } /* ============================================================ 30. LOADING OVERLAY ============================================================ */ .oubk-loading-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.88); z-index: 2000; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; backdrop-filter: blur(2px); } .oubk-loading-overlay.is-visible { display: flex; } .oubk-loading-overlay .oubk-spinner { width: 56px; height: 56px; border-width: 4px; } .oubk-loading-overlay__text { font-size: 0.95rem; color: var(--oubk-text-secondary); font-weight: 500; } /* ============================================================ 31. TOAST NOTIFICATIONS ============================================================ */ .oubk-toasts { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 0.5rem; z-index: 3000; pointer-events: none; width: max-content; max-width: calc(100vw - 2rem); } .oubk-toast { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; background: var(--oubk-white); border-radius: 100px; box-shadow: var(--oubk-shadow-lg); font-size: 0.88rem; font-weight: 500; color: var(--oubk-text); pointer-events: auto; animation: oubk-toast-in 0.28s ease; border: 1px solid var(--oubk-border); white-space: nowrap; } .oubk-toast.is-leaving { animation: oubk-toast-out 0.28s ease forwards; } @keyframes oubk-toast-in { from { opacity: 0; transform: translateY(16px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes oubk-toast-out { to { opacity: 0; transform: translateY(16px) scale(0.94); } } .oubk-toast i { font-size: 1rem; } .oubk-toast--success i { color: var(--oubk-success); } .oubk-toast--error i { color: var(--oubk-error); } .oubk-toast--info i { color: var(--oubk-accent); } .oubk-toast--warning i { color: var(--oubk-partial); } /* ============================================================ 32. ALERTS / INLINE NOTICES ============================================================ */ .oubk-alert { padding: 0.75rem 1rem; border-radius: var(--oubk-radius-md); font-size: 0.87rem; display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.5; margin-bottom: 1rem; } .oubk-alert i { flex-shrink: 0; margin-top: 1px; } .oubk-alert--warning { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.35); color: #92400e; } .oubk-alert--warning i { color: var(--oubk-partial); } .oubk-alert--error { background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.3); color: #991b1b; } .oubk-alert--error i { color: var(--oubk-error); } .oubk-alert--success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.35); color: #14532d; } .oubk-alert--success i { color: var(--oubk-success); } .oubk-alert--info { background: var(--oubk-accent-soft); border: 1px solid rgba(13,148,136,0.3); color: #134e4a; } .oubk-alert--info i { color: var(--oubk-accent); } /* ============================================================ 33. NO RESULTS STATE ============================================================ */ .oubk-no-results { text-align: center; padding: 3rem 1rem; color: var(--oubk-text-secondary); } .oubk-no-results i { font-size: 3rem; color: var(--oubk-text-muted); margin-bottom: 1rem; display: block; } .oubk-no-results h3 { font-family: var(--oubk-font-display); font-size: 1.4rem; color: var(--oubk-text); margin-bottom: 0.5rem; } .oubk-no-results p { font-size: 0.9rem; line-height: 1.6; } /* ============================================================ 34. SUGGESTED COMBINATIONS BANNER (hospitality) ============================================================ */ .oubk-combo-banner { background: linear-gradient(135deg, var(--oubk-primary) 0%, var(--oubk-primary-light) 100%); border-radius: var(--oubk-radius-lg); padding: 1.25rem; margin-bottom: 1rem; color: #fff; } .oubk-combo-banner__title { font-family: var(--oubk-font-display); font-size: 1.05rem; font-weight: 500; margin-bottom: 0.6rem; } .oubk-combo-banner__desc { font-size: 0.85rem; opacity: 0.82; margin-bottom: 0.85rem; } .oubk-combo-banner__rooms { display: flex; flex-wrap: wrap; gap: 0.4rem; } .oubk-combo-pill { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); border-radius: 100px; padding: 0.25rem 0.65rem; font-size: 0.78rem; font-weight: 500; } /* ============================================================ 35. CLIENT PORTAL PLACEHOLDER ([ounekos_portal]) ============================================================ */ .oubk-portal-placeholder { text-align: center; padding: 3rem 1.5rem; background: var(--oubk-cream); border: 2px dashed var(--oubk-border); border-radius: var(--oubk-radius-lg); } .oubk-portal-placeholder i { font-size: 2.8rem; color: var(--oubk-text-muted); margin-bottom: 1rem; display: block; } .oubk-portal-placeholder h3 { font-family: var(--oubk-font-display); font-size: 1.4rem; color: var(--oubk-text); margin-bottom: 0.5rem; } .oubk-portal-placeholder p { font-size: 0.88rem; color: var(--oubk-text-secondary); } /* ============================================================ 36. SCROLLBAR STYLING ============================================================ */ .oubk-container *::-webkit-scrollbar, .oubk-sidebar__body::-webkit-scrollbar, .oubk-time-list::-webkit-scrollbar, .oubk-cart-drawer__body::-webkit-scrollbar { width: 5px; } .oubk-container *::-webkit-scrollbar-track, .oubk-sidebar__body::-webkit-scrollbar-track, .oubk-time-list::-webkit-scrollbar-track, .oubk-cart-drawer__body::-webkit-scrollbar-track { background: var(--oubk-cream); border-radius: 3px; } .oubk-container *::-webkit-scrollbar-thumb, .oubk-sidebar__body::-webkit-scrollbar-thumb, .oubk-time-list::-webkit-scrollbar-thumb, .oubk-cart-drawer__body::-webkit-scrollbar-thumb { background: var(--oubk-border); border-radius: 3px; } .oubk-container *::-webkit-scrollbar-thumb:hover { background: var(--oubk-text-muted); } /* ============================================================ 37. RESPONSIVE — TABLET (max 992px) ============================================================ */ @media (max-width: 992px) { /* Search bar stacks */ .oubk-search-bar { flex-direction: column; border-radius: var(--oubk-radius-lg); padding: 0.75rem; gap: 0; } .oubk-search-field { padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--oubk-border); min-width: unset; } .oubk-search-field::after { display: none; } .oubk-search-field:last-of-type { border-bottom: none; } .oubk-search-btn { width: 100%; height: 48px; border-radius: var(--oubk-radius-md); margin-left: 0; margin-top: 0.75rem; } /* Dropdowns become bottom-sheets on tablet/mobile */ .oubk-dropdown, .oubk-dropdown--center, .oubk-dropdown--right { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; border-radius: var(--oubk-radius-lg) var(--oubk-radius-lg) 0 0 !important; max-height: 78vh; padding-top: calc(1.25rem + 28px); z-index: 1060 !important; } .oubk-dropdown.is-open, .oubk-dropdown--center.is-open, .oubk-dropdown--right.is-open { animation: oubk-slide-up 0.3s ease; } @keyframes oubk-slide-up { from { transform: translateY(100%) !important; opacity: 0; } to { transform: translateY(0) !important; opacity: 1; } } /* Flatpickr single column on tablet */ .oubk-container .flatpickr-innerContainer { flex-direction: column !important; } .oubk-container .flatpickr-rContainer { width: 100% !important; } .oubk-container .dayContainer { min-width: 100% !important; max-width: 100% !important; } /* Results switch to single column */ .oubk-results-layout { grid-template-columns: 1fr; } .oubk-sidebar { position: static; order: -1; } .oubk-sidebar__toggle { display: flex; } .oubk-sidebar__body { max-height: none; } /* Booking flow single column */ .oubk-flow-inner { grid-template-columns: 1fr; } .oubk-order-summary { position: static; order: -1; } /* Progress steps */ .oubk-progress-inner::before { left: 40px; right: 40px; } .oubk-progress-line { left: 40px; } /* Summary strip stacks */ .oubk-summary-strip { flex-direction: column; align-items: flex-start; } .oubk-summary-items { justify-content: flex-start; } .oubk-summary-item:first-child { padding-left: 0; } /* Services grid single column */ .oubk-services-grid { grid-template-columns: 1fr; } } w /* ============================================================ 38. RESPONSIVE — MOBILE (max 768px) ============================================================ */ @media (max-width: 768px) { .oubk-hero { padding: 1.25rem 0.75rem; } .oubk-hero__title { font-size: clamp(1.4rem, 6vw, 2rem); } .oubk-form-row { grid-template-columns: 1fr; } .oubk-form-actions { flex-direction: column; } .oubk-form-actions .oubk-btn--outline { order: 1; min-width: unset; } .oubk-progress-steps .oubk-step__circle { width: 32px; height: 32px; font-size: 0.78rem; } .oubk-progress-inner::before { top: 16px; } .oubk-progress-line { top: 16px; } .oubk-step__label { font-size: 0.68rem; } .oubk-addon-schedule { grid-template-columns: 1fr; } .oubk-card--h { flex-direction: column; } .oubk-card--h .oubk-card__img-wrap { width: 100%; padding-top: 52%; } .oubk-payment-mode { grid-template-columns: 1fr; } .oubk-flow-panel { padding: 1.25rem; } .oubk-summary-items { gap: 0; width: 100%; overflow-x: auto; padding-bottom: 0.25rem; } .oubk-summary-item { padding: 0 0.65rem; flex-shrink: 0; } } /* ============================================================ 39. RESPONSIVE — SMALL MOBILE (max 576px) ============================================================ */ @media (max-width: 576px) { .oubk-results-body, .oubk-flow-body { padding: 1rem 0.75rem 2rem; } .oubk-results-count-bar { flex-direction: column; align-items: flex-start; } .oubk-chips-grid { flex-wrap: wrap; } .oubk-frequency-grid { grid-template-columns: repeat(3, 1fr); } .oubk-days-grid { gap: 0.25rem; } .oubk-toasts { bottom: 1rem; max-width: calc(100vw - 1.5rem); } .oubk-toast { border-radius: var(--oubk-radius-lg); white-space: normal; } .oubk-cart-float { bottom: 1rem; right: 1rem; } .oubk-container .flatpickr-day { height: 40px !important; font-size: 0.82rem !important; } .oubk-day-price { font-size: 0.52rem; } .oubk-success__title { font-size: 1.6rem; } .oubk-success__icon { width: 72px; height: 72px; font-size: 2rem; } } /* ============================================================ 40. BOOKING RESULT PAGE ([ounekos_booking_result]) ============================================================ */ /* Result card — shared base */ .oubk-result-card { max-width: 720px; margin: 2rem auto; background: var(--oubk-white); border-radius: var(--oubk-radius-lg); box-shadow: var(--oubk-shadow-lg); padding: 2.5rem 2rem; text-align: center; animation: oubk-fade-up 0.4s ease; } /* Success variant */ .oubk-result-success { border-top: 4px solid var(--oubk-success); } /* Failure variant */ .oubk-result-failure { border-top: 4px solid var(--oubk-error); } /* Large icon circle */ .oubk-result-icon { width: 80px; height: 80px; border-radius: var(--oubk-radius-full); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; font-size: 2.2rem; } .oubk-result-icon--success { background: linear-gradient(135deg, var(--oubk-success) 0%, #22c55e 100%); color: #fff; animation: oubk-scale-in 0.5s cubic-bezier(0.175,0.885,0.32,1.275); } .oubk-result-failure .oubk-result-icon { background: linear-gradient(135deg, var(--oubk-error) 0%, #ef4444 100%); color: #fff; animation: oubk-scale-in 0.5s cubic-bezier(0.175,0.885,0.32,1.275); } .oubk-result-title { font-family: var(--oubk-font-display); font-size: 1.8rem; font-weight: 600; color: var(--oubk-primary); margin-bottom: 0.5rem; } .oubk-result-subtitle { font-size: 0.92rem; color: var(--oubk-text-secondary); margin-bottom: 2rem; line-height: 1.6; } .oubk-result-subtitle strong { color: var(--oubk-text); font-weight: 600; } /* Details grid */ .oubk-result-details-grid { text-align: left; background: var(--oubk-bg-light); border-radius: var(--oubk-radius-md); padding: 0.25rem 0; margin-bottom: 2rem; } .oubk-result-detail { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--oubk-border-light); } .oubk-result-detail:last-child { border-bottom: none; } .oubk-result-detail__icon { width: 36px; height: 36px; background: var(--oubk-white); border-radius: var(--oubk-radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--oubk-shadow-sm); } .oubk-result-detail__icon i { color: var(--oubk-accent); font-size: 0.85rem; } .oubk-result-detail__info { flex: 1; min-width: 0; } .oubk-result-detail__label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--oubk-text-muted); margin-bottom: 0.1rem; } .oubk-result-detail__value { font-size: 0.92rem; font-weight: 500; color: var(--oubk-text); word-break: break-word; } /* Total row — highlighted */ .oubk-result-detail--total { background: var(--oubk-accent-soft); border-radius: var(--oubk-radius-md); margin: 0.25rem 0.5rem; border-bottom: none; } .oubk-result-detail--total .oubk-result-detail__icon { background: var(--oubk-accent); box-shadow: none; } .oubk-result-detail--total .oubk-result-detail__icon i { color: #fff; } .oubk-result-detail--total .oubk-result-detail__value { font-size: 1.15rem; font-weight: 700; color: var(--oubk-accent); } /* ============================================================ 41. CALENDAR BUTTONS (booking result page) ============================================================ */ .oubk-calendar-buttons { margin-bottom: 2rem; } .oubk-calendar-buttons h3 { font-family: var(--oubk-font-body); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--oubk-text-secondary); margin-bottom: 0.85rem; } .oubk-calendar-buttons__row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; } .oubk-cal-btn { min-width: 180px; padding: 0.6rem 1rem; font-size: 0.85rem; } .oubk-cal-btn i { font-size: 1rem; } .oubk-cal-btn:hover:not(:disabled) { border-color: var(--oubk-accent); color: var(--oubk-accent); } /* ============================================================ 42. RESULT PAGE ACTIONS (print, home) ============================================================ */ .oubk-result-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; } .oubk-print-btn { min-width: 180px; } /* ============================================================ 43. RETRY INDICATOR (floating, shown by OUBK_RETRY) ============================================================ */ #oubk-retry-indicator { position: fixed; bottom: 20px; right: 20px; z-index: 99999; background: var(--oubk-primary); color: #fff; border-radius: var(--oubk-radius-md); padding: 10px 18px; font-family: var(--oubk-font-body); font-size: 0.85rem; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.3); animation: oubk-fade-drop 0.25s ease; } /* Cancel button inside loading overlay during retry */ #oubk-retry-cancel-btn { margin-top: 10px; padding: 6px 18px; border-radius: var(--oubk-radius-md); border: 1px solid rgba(255,255,255,0.5); background: transparent; color: #fff; cursor: pointer; font-family: var(--oubk-font-body); font-size: 0.8rem; transition: all var(--oubk-transition); } #oubk-retry-cancel-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.8); } /* ============================================================ 44. PRINT STYLES ============================================================ */ @media print { /* Hide everything except the result card */ body * { visibility: hidden; } .oubk-result-card, .oubk-result-card * { visibility: visible; } .oubk-result-card { position: absolute; left: 0; top: 0; width: 100%; max-width: 100%; box-shadow: none; border: 1px solid #ccc; padding: 1.5rem; margin: 0; page-break-inside: avoid; } /* Hide interactive elements */ .oubk-calendar-buttons, .oubk-result-actions, .oubk-print-btn, .oubk-cal-btn, #oubk-retry-indicator, #oubk-retry-cancel-btn, .oubk-toasts, .oubk-loading-overlay, .oubk-cart-float { display: none !important; } /* Ensure details grid prints cleanly */ .oubk-result-details-grid { background: #f5f5f5; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .oubk-result-detail__icon { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .oubk-result-detail--total { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .oubk-result-icon--success, .oubk-result-failure .oubk-result-icon { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ============================================================ 44b. PAGE-BUILDER OVERFLOW FIX ============================================================ Page builders (Breakdance, Elementor, Divi, etc.) often set overflow:hidden on section/column containers to clip backgrounds and videos. This clips our dropdowns. We force overflow:visible on all ancestors of the search bar, but ONLY when a dropdown is open, to avoid breaking the builder's background clipping when dropdowns are closed. The JS already adds 'is-open' on .oubk-dropdown — we piggyback on that by adding a class to the root container via JS. As a CSS-only fallback, we also force key ancestors visible. ============================================================ */ /* === CSS-only fallback: always keep our containers unclipped === */ .oubk-container, .oubk-container .oubk-hero, .oubk-container .oubk-hero__content, .oubk-container .oubk-search-wrap, .oubk-container .oubk-search-bar, .oubk-container .oubk-search-field { overflow: visible !important; } /* Force the OunekOS root and its direct parent wrappers to a z-index high enough to sit above sibling page-builder sections */ .oubk-workplace-search, .oubk-hospitality-search { position: relative; z-index: 100; } /* When a dropdown is open, propagate overflow:visible up through common page-builder wrapper elements so the dropdown is not clipped by their overflow:hidden. The JS patch below adds .oubk-dropdown-active to the root. */ .oubk-dropdown-active, .oubk-dropdown-active .bde-section, .oubk-dropdown-active .bde-column, .oubk-dropdown-active .bde-shortcode, .oubk-dropdown-active .bde-code-block, .oubk-dropdown-active .bde-div, .oubk-dropdown-active .section-container, .oubk-dropdown-active .elementor-section, .oubk-dropdown-active .elementor-column, .oubk-dropdown-active .elementor-widget-wrap, .oubk-dropdown-active .elementor-widget, .oubk-dropdown-active .et_pb_section, .oubk-dropdown-active .et_pb_row, .oubk-dropdown-active .et_pb_column, .oubk-dropdown-active .fl-row-content, .oubk-dropdown-active .fl-col, .oubk-dropdown-active .fl-module { overflow: visible !important; } /* ============================================================ 45. RESPONSIVE — RESULT PAGE ============================================================ */ @media (max-width: 768px) { .oubk-result-card { margin: 1rem; padding: 1.5rem 1rem; } .oubk-result-icon { width: 64px; height: 64px; font-size: 1.8rem; } .oubk-result-title { font-size: 1.4rem; } .oubk-result-subtitle { font-size: 0.85rem; } .oubk-result-detail { padding: 0.6rem 0.85rem; gap: 0.65rem; } .oubk-result-detail__icon { width: 30px; height: 30px; } .oubk-result-detail__icon i { font-size: 0.75rem; } .oubk-result-detail__value { font-size: 0.85rem; } .oubk-result-detail--total .oubk-result-detail__value { font-size: 1rem; } .oubk-calendar-buttons__row { flex-direction: column; } .oubk-cal-btn { min-width: unset; width: 100%; } .oubk-result-actions { flex-direction: column; } .oubk-result-actions .oubk-btn { width: 100%; } .oubk-print-btn { min-width: unset; } } @media (max-width: 576px) { .oubk-result-card { margin: 0.5rem; padding: 1.25rem 0.75rem; border-radius: var(--oubk-radius-md); } .oubk-result-icon { width: 56px; height: 56px; font-size: 1.5rem; } .oubk-result-title { font-size: 1.2rem; } .oubk-result-detail__label { font-size: 0.65rem; } .oubk-result-detail__icon { width: 28px; height: 28px; } } /* ============================================================ 46. HOSPITALITY RESULTS FILTER BAR ============================================================ */ .oubk-filter-bar { background: var(--oubk-white); border-radius: var(--oubk-radius-lg); box-shadow: var(--oubk-shadow-sm); padding: 0.85rem 1.25rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; } .oubk-filter-bar__left { display: flex; align-items: center; gap: 0.5rem; flex: 1; flex-wrap: wrap; min-width: 0; } .oubk-filter-bar__right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* Active filters count badge */ .oubk-filter-bar__active { display: none; font-size: 0.72rem; font-weight: 700; color: var(--oubk-accent); background: var(--oubk-accent-soft); padding: 0.2rem 0.55rem; border-radius: 100px; white-space: nowrap; } .oubk-filter-bar__active.is-visible { display: inline-flex; } /* Clear all filters button */ .oubk-filter-clear-all { background: none; border: none; color: var(--oubk-text-secondary); font-family: var(--oubk-font-body); font-size: 0.78rem; cursor: pointer; padding: 0.3rem 0.5rem; border-radius: var(--oubk-radius-sm); transition: color var(--oubk-transition), background var(--oubk-transition); display: none; white-space: nowrap; } .oubk-filter-clear-all.is-visible { display: inline-flex; } .oubk-filter-clear-all:hover { color: var(--oubk-error); background: rgba(220,38,38,0.06); } /* ============================================================ 46a. FILTER DROPDOWN TRIGGER BUTTONS ============================================================ */ .oubk-filter-trigger { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; background: var(--oubk-cream); border: 2px solid transparent; border-radius: 100px; font-family: var(--oubk-font-body); font-size: 0.82rem; font-weight: 500; color: var(--oubk-text-secondary); cursor: pointer; transition: all var(--oubk-transition); position: relative; white-space: nowrap; user-select: none; } .oubk-filter-trigger:hover { border-color: var(--oubk-border); color: var(--oubk-text); } .oubk-filter-trigger.is-active { background: var(--oubk-accent-soft); border-color: var(--oubk-accent); color: var(--oubk-accent); } .oubk-filter-trigger i.fa-chevron-down { font-size: 0.6rem; transition: transform 0.2s ease; } .oubk-filter-trigger.is-open i.fa-chevron-down { transform: rotate(180deg); } /* Filter dropdown badge (shows count of active selections) */ .oubk-filter-badge { display: none; width: 17px; height: 17px; background: var(--oubk-accent); color: #fff; font-size: 0.62rem; font-weight: 700; border-radius: 50%; align-items: center; justify-content: center; line-height: 1; } .oubk-filter-badge.is-visible { display: inline-flex; } /* ============================================================ 46b. FILTER DROPDOWN PANEL ============================================================ */ .oubk-filter-panel { position: absolute; top: calc(100% + 0.4rem); left: 0; background: var(--oubk-white); border-radius: var(--oubk-radius-lg); box-shadow: var(--oubk-shadow-lg); border: 1px solid var(--oubk-border-light); padding: 1rem; z-index: 1055; min-width: 260px; max-height: 400px; overflow-y: auto; display: none; animation: oubk-fade-drop 0.2s ease forwards; } .oubk-filter-panel.is-open { display: block; } .oubk-filter-panel__title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--oubk-text-secondary); margin-bottom: 0.75rem; } /* ============================================================ 46c. PRICE RANGE SLIDER ============================================================ */ .oubk-price-filter { min-width: 280px; padding: 0.25rem 0; } .oubk-price-avg { font-size: 0.8rem; color: var(--oubk-text-secondary); margin-bottom: 0.65rem; } .oubk-price-avg strong { color: var(--oubk-accent); font-weight: 700; } /* Range slider track container */ .oubk-range-slider { position: relative; height: 36px; display: flex; align-items: center; user-select: none; touch-action: none; } .oubk-range-track { position: absolute; left: 0; right: 0; height: 4px; border-radius: 3px; background: var(--oubk-border); } .oubk-range-fill { position: absolute; height: 4px; border-radius: 3px; background: var(--oubk-accent); pointer-events: none; } .oubk-range-thumb { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--oubk-white); border: 2px solid var(--oubk-accent); box-shadow: 0 2px 6px rgba(0,0,0,0.15); cursor: grab; z-index: 2; transform: translateX(-50%); transition: box-shadow 0.15s ease, transform 0.1s ease; touch-action: none; } .oubk-range-thumb:hover, .oubk-range-thumb:active { box-shadow: 0 0 0 5px var(--oubk-accent-soft), 0 2px 6px rgba(0,0,0,0.15); cursor: grabbing; } .oubk-range-thumb:active { transform: translateX(-50%) scale(1.1); } /* Tooltip above thumb */ .oubk-range-tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--oubk-primary); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.45rem; border-radius: var(--oubk-radius-sm); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; } .oubk-range-thumb:hover .oubk-range-tooltip, .oubk-range-thumb:active .oubk-range-tooltip { opacity: 1; } .oubk-range-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--oubk-primary); } /* Price range labels under the slider */ .oubk-range-labels { display: flex; justify-content: space-between; margin-top: 0.35rem; font-size: 0.78rem; font-weight: 600; color: var(--oubk-text); font-variant-numeric: tabular-nums; } /* ============================================================ 46d. SORT SELECT ============================================================ */ .oubk-sort-dropdown { display: inline-flex; align-items: center; gap: 0.35rem; position: relative; } .oubk-sort-dropdown__label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--oubk-text-secondary); white-space: nowrap; } .oubk-sort-dropdown__select { padding: 0.4rem 2rem 0.4rem 0.65rem; border: 2px solid var(--oubk-border); border-radius: 100px; font-family: var(--oubk-font-body); font-size: 0.82rem; font-weight: 500; color: var(--oubk-text); background: var(--oubk-white); cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%235a6a7a'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.65rem center; transition: border-color var(--oubk-transition); } .oubk-sort-dropdown__select:focus { outline: none; border-color: var(--oubk-accent); } /* ============================================================ 46e. AMENITY FILTER CHIPS (inside filter panel) ============================================================ */ .oubk-filter-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; max-height: 260px; overflow-y: auto; } .oubk-filter-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; background: var(--oubk-cream); border: 2px solid transparent; border-radius: var(--oubk-radius-md); cursor: pointer; font-family: var(--oubk-font-body); font-size: 0.78rem; color: var(--oubk-text-secondary); transition: all var(--oubk-transition); user-select: none; } .oubk-filter-chip:hover { border-color: var(--oubk-border); color: var(--oubk-text); } .oubk-filter-chip.is-selected { background: var(--oubk-accent-soft); border-color: var(--oubk-accent); color: var(--oubk-accent); } .oubk-filter-chip i { font-size: 0.72rem; width: 14px; text-align: center; } /* ============================================================ 46f. FILTERED RESULTS COUNT ============================================================ */ .oubk-results-filtered-count { font-size: 0.85rem; color: var(--oubk-text-secondary); margin-left: 0.4rem; } /* ============================================================ 46g. RESPONSIVE — FILTER BAR ============================================================ */ @media (max-width: 992px) { .oubk-filter-bar { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.75rem; } .oubk-filter-bar__left { flex-wrap: wrap; gap: 0.4rem; } .oubk-filter-bar__right { width: 100%; } .oubk-sort-dropdown { width: 100%; } .oubk-sort-dropdown__select { width: 100%; } /* Filter panels: full-width bottom-sheet style */ .oubk-filter-panel { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; min-width: 100% !important; max-height: 65vh; border-radius: var(--oubk-radius-lg) var(--oubk-radius-lg) 0 0 !important; z-index: 1060 !important; padding: 1.25rem; } .oubk-filter-panel.is-open { animation: oubk-slide-up 0.3s ease; } .oubk-filter-trigger { flex: 1 1 auto; justify-content: center; min-width: 0; } .oubk-price-filter { min-width: unset; width: 100%; } } @media (max-width: 576px) { .oubk-filter-trigger { font-size: 0.75rem; padding: 0.4rem 0.65rem; } .oubk-filter-chip { font-size: 0.72rem; padding: 0.3rem 0.55rem; } .oubk-range-thumb { width: 26px; height: 26px; } } /* ============================================================ BOOKING RESULT PAGE — Success & Failure cards ============================================================ */ /* Card container */ .oubk-result-card { max-width: 680px; margin: 40px auto; padding: 40px 32px; border-radius: 16px; text-align: center; background: #fff; box-shadow: 0 4px 24px rgba(0, 0, 0, .06); } .oubk-result-card--success { border-top: 4px solid var(--oubk-accent, #0d9488); } .oubk-result-card--failure { border-top: 4px solid #ef4444; } .oubk-result-card--warn { border-top: 4px solid #f59e0b; } /* Animated icon header */ .oubk-result-header-anim { margin-bottom: 16px; } .oubk-result-icon { font-size: 3.5rem; margin-bottom: 12px; animation: oubk-result-pop .5s cubic-bezier(.34, 1.56, .64, 1); } .oubk-result-icon--success { color: var(--oubk-accent, #0d9488); } .oubk-result-icon--failure { color: #ef4444; } .oubk-result-icon--warn { color: #f59e0b; } @keyframes oubk-result-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } } /* Title & subtitle */ .oubk-result-title { font-family: 'Cormorant Garamond', serif; font-size: 1.75rem; font-weight: 600; color: var(--oubk-primary, #1a2a3a); margin: 0 0 8px; } .oubk-result-subtitle { font-size: .95rem; color: #6b7280; margin: 0 0 28px; line-height: 1.5; } .oubk-result-subtitle strong { color: var(--oubk-primary, #1a2a3a); } /* Type badge */ .oubk-result-type-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px; font-size: .8rem; font-weight: 600; margin-bottom: 20px; } .oubk-result-type-badge--workspace { background: #ede9fe; color: #7c3aed; } .oubk-result-type-badge--accommodation { background: #ecfdf5; color: var(--oubk-accent, #0d9488); } /* Details grid */ .oubk-result-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; text-align: left; margin-bottom: 24px; padding: 20px; background: var(--oubk-bg, #faf9f7); border-radius: 12px; } @media (max-width: 540px) { .oubk-result-details-grid { grid-template-columns: 1fr; } } .oubk-result-detail { display: flex; align-items: flex-start; gap: 10px; } .oubk-result-detail__icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(13, 148, 136, .1); color: var(--oubk-accent, #0d9488); font-size: .85rem; flex-shrink: 0; } .oubk-result-detail__label { font-size: .75rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; } .oubk-result-detail__value { font-size: .9rem; font-weight: 600; color: var(--oubk-primary, #1a2a3a); word-break: break-word; } .oubk-result-detail--total { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, .06); } .oubk-result-detail--total .oubk-result-detail__icon { background: rgba(13, 148, 136, .15); } .oubk-result-detail--total .oubk-result-detail__value { font-size: 1.1rem; color: var(--oubk-accent, #0d9488); } /* Payment info section */ .oubk-result-payment-info { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; text-align: left; } .oubk-result-payment-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: .9rem; } .oubk-result-payment-row--balance { border-top: 1px dashed #86efac; padding-top: 10px; margin-top: 6px; } .oubk-result-payment-label { color: #374151; display: flex; align-items: center; gap: 6px; } .oubk-result-payment-value { font-weight: 700; color: var(--oubk-primary, #1a2a3a); } .oubk-text-success { color: #059669; } .oubk-result-payment-due { font-size: .8rem; color: #92400e; background: #fef3c7; border-radius: 6px; padding: 6px 10px; margin-top: 10px; } .oubk-btn--balance { margin-top: 12px; width: 100%; justify-content: center; } .oubk-btn--accent { background: var(--oubk-accent, #0d9488); color: #fff; border-color: var(--oubk-accent, #0d9488); } .oubk-btn--accent:hover { background: var(--oubk-accent-light, #14b8a6); border-color: var(--oubk-accent-light, #14b8a6); } /* Invoice links */ .oubk-result-invoices { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; } /* Retry status */ .oubk-result-retry-status { margin-top: 16px; } /* Calendar buttons */ .oubk-calendar-buttons { margin-bottom: 24px; } .oubk-calendar-buttons h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; margin: 0 0 10px; font-weight: 600; } .oubk-calendar-buttons__row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .oubk-cal-btn { font-size: .82rem; } /* Actions row */ .oubk-result-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, .06); } /* Print styles */ @media print { .oubk-result-actions, .oubk-calendar-buttons, .oubk-result-invoices, .oubk-result-retry-status, .oubk-btn--balance { display: none !important; } .oubk-result-card { box-shadow: none; border: 1px solid #ddd; } } /* Quantity control row inside a service card */ .oubk-service-qty { display: flex; align-items: center; gap: 0.5rem; /* ← espace uniforme entre boutons et texte */ margin-top: 0.6rem; flex-wrap: wrap; } .oubk-service-qty__btn { width: 26px; height: 26px; border-radius: var(--oubk-radius-sm); border: 1px solid var(--oubk-border); background: var(--oubk-white); color: var(--oubk-text); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.7rem; transition: all var(--oubk-transition); flex-shrink: 0; } .oubk-service-qty__btn:hover { border-color: var(--oubk-accent); color: var(--oubk-accent); background: var(--oubk-accent-soft); } .oubk-service-qty__val { font-weight: 700; font-size: 0.92rem; color: var(--oubk-text); min-width: 1.5ch; text-align: center; } .oubk-service-qty__total { font-size: 0.85rem; font-weight: 700; color: var(--oubk-accent); margin-left: 0.25rem; /* léger écart visuel avant le prix total */ } .oubk-service-qty--auto, .oubk-service-qty--fixed { gap: 0.35rem; } /* ── Summary tax rows ── */ .oubk-summary-row--tax { font-size: 0.82rem; color: var(--oubk-text-secondary); } /* ── Price estimate disclaimer ── */ .oubk-summary-disclaimer { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; padding: 8px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 0.75rem; color: var(--oubk-text-secondary, #6b7280); line-height: 1.4; } .oubk-summary-disclaimer i { flex-shrink: 0; color: var(--oubk-accent, #0d9488); margin-top: 1px; } /* ============================================================ HOSPITALITY CTA ([ounekos_hospitality_cta]) Compact booking card for individual accommodation pages. Reuses --oubk-* CSS variables and shared counter styles. ============================================================ */ .oubk-hospitality-cta { width: 100%; } .oubk-cta-card { background: var(--oubk-white, #fff); border: 1px solid var(--oubk-border, #e2e8f0); border-radius: var(--oubk-radius-lg, 1rem); box-shadow: var(--oubk-shadow, 0 4px 24px rgba(0,0,0,.08)); overflow: visible; position: relative; } /* ── Dates row ── */ .oubk-cta-dates-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; border-bottom: 1px solid var(--oubk-border, #e2e8f0); } .oubk-cta-date-field { padding: 1rem 1.25rem; cursor: pointer; transition: background var(--oubk-transition, .15s ease); min-height: 72px; display: flex; flex-direction: column; justify-content: center; gap: 4px; outline: none; } .oubk-cta-date-field:first-child { border-radius: var(--oubk-radius-lg, 1rem) 0 0 0; } .oubk-cta-date-field:last-child { border-radius: 0 var(--oubk-radius-lg, 1rem) 0 0; } .oubk-cta-date-field:hover, .oubk-cta-date-field:focus { background: var(--oubk-bg, #faf9f7); } .oubk-cta-date-field[aria-expanded="true"] { background: var(--oubk-bg, #faf9f7); } .oubk-cta-date-sep { width: 1px; background: var(--oubk-border, #e2e8f0); align-self: stretch; } .oubk-cta-field-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--oubk-text-secondary, #6b7280); font-family: var(--oubk-font-body, 'Nunito Sans', sans-serif); } .oubk-cta-field-value { display: block; font-size: 1rem; font-weight: 600; color: var(--oubk-text, #1a2a3a); font-family: var(--oubk-font-body, 'Nunito Sans', sans-serif); } /* ── Calendar panel — floating dropdown overlay ───────────────────── The panel breaks out of the card flow and floats below the date row. On desktop it is wide enough for 2 months (~614 px); JS adjusts its left/right offset so it never exits the viewport. On mobile JS switches flatpickr to 1 month and centers the panel. CSS !important overrides flatpickr's inline width:2px (set at init time because the panel was hidden — no width was measurable). ──────────────────────────────────────────────────────────────────── */ .oubk-cta-cal-panel { position: absolute; z-index: 9999; top: 72px; /* fallback; overridden each open by positionCalPanel() */ left: 0; padding: 1rem; background: var(--oubk-white, #fff); border: 1px solid var(--oubk-border, #e2e8f0); border-radius: var(--oubk-radius-lg, 1rem); box-shadow: 0 12px 40px rgba(0, 0, 0, .18); /* Entry animation — CSS animations restart on display:none → display:'' */ animation: oubk-ctacal-in .18s ease both; } @keyframes oubk-ctacal-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Override flatpickr's inline width:2px -------------------------------- */ .oubk-cta-cal-panel .flatpickr-calendar { box-shadow: none; border: none; width: auto !important; min-width: 0 !important; } .oubk-cta-cal-panel .flatpickr-calendar.multiMonth { min-width: 580px; } .oubk-cta-cal-panel .flatpickr-days { width: auto !important; } /* Counteract the global @media(max-width:992px) rule that stacks months vertically — the CTA floating panel has plenty of room */ @media (max-width: 992px) { .oubk-cta-cal-panel .flatpickr-innerContainer { flex-direction: row !important; } .oubk-cta-cal-panel .flatpickr-rContainer { width: auto !important; } .oubk-cta-cal-panel .dayContainer { min-width: 260px !important; max-width: 260px !important; } } /* Mobile: single month — no 2-column constraint needed */ @media (max-width: 640px) { .oubk-cta-cal-panel { min-width: 0; /* width and left are set dynamically by JS positionCalPanel() */ } .oubk-cta-cal-panel .flatpickr-calendar.multiMonth { min-width: 0; } .oubk-cta-cal-panel .dayContainer { min-width: 240px !important; max-width: 240px !important; } } /* ── Guests field ── */ .oubk-cta-guests-field { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; cursor: pointer; border-bottom: 1px solid var(--oubk-border, #e2e8f0); transition: background var(--oubk-transition, .15s ease); gap: 0.5rem; outline: none; } .oubk-cta-guests-field:hover, .oubk-cta-guests-field:focus, .oubk-cta-guests-field[aria-expanded="true"] { background: var(--oubk-bg, #faf9f7); } .oubk-cta-guests-value-row { display: flex; align-items: center; gap: 0.5rem; color: var(--oubk-text, #1a2a3a); } .oubk-cta-guests-value-row i { font-size: 0.75rem; color: var(--oubk-text-secondary, #6b7280); transition: transform var(--oubk-transition, .15s ease); } .oubk-cta-guests-field[aria-expanded="true"] .oubk-cta-guests-value-row i { transform: rotate(180deg); } /* ── Guests dropdown panel ── */ .oubk-cta-pax-panel { padding: 0.5rem 1.25rem 0.25rem; border-bottom: 1px solid var(--oubk-border, #e2e8f0); } /* ── Book button ── */ .oubk-cta-book-btn { display: block; width: calc(100% - 2rem); margin: 1rem; padding: 0.9rem 1.25rem; background: var(--oubk-secondary, #c94b6a); color: #fff; border: none; border-radius: var(--oubk-radius-pill, 50px); font-size: 1rem; font-weight: 700; font-family: var(--oubk-font-body, 'Nunito Sans', sans-serif); letter-spacing: .02em; cursor: pointer; transition: background var(--oubk-transition, .15s ease), transform var(--oubk-transition, .15s ease); text-align: center; } .oubk-cta-book-btn:hover, .oubk-cta-book-btn:focus { background: var(--oubk-secondary-hover, #b04060); transform: translateY(-1px); outline: none; } .oubk-cta-book-btn:active { transform: translateY(0); } /* ── Responsive ── */ @media (max-width: 480px) { .oubk-cta-date-field { padding: 0.875rem 1rem; min-height: 64px; } .oubk-cta-guests-field { padding: 0.875rem 1rem; } .oubk-cta-field-value { font-size: 0.9rem; } }