/* ============================================================ Book & Appointment Pro — Public Stylesheet v1.3 Robust: Works in any grid, tab, flexbox, theme context ============================================================ */ /* ── CSS Reset for ALL plugin elements ──────────────────────── */ #bap-modal-overlay, #bap-modal-overlay *, .bap-trigger-btn, .bap-trigger-btn * { box-sizing: border-box !important; -webkit-font-smoothing: antialiased; } /* ── CSS Variables (scoped to overlay) ──────────────────────── */ #bap-modal-overlay { --bap-accent: #4f46e5; --bap-accent-hover: #4338ca; --bap-accent-light: rgba(79,70,229,.10); --bap-white: #ffffff; --bap-bg: #f8fafc; --bap-border: #e2e8f0; --bap-text: #1e293b; --bap-muted: #64748b; --bap-success: #10b981; --bap-error: #ef4444; --bap-radius: 16px; --bap-shadow: 0 25px 60px rgba(0,0,0,.22), 0 8px 24px rgba(0,0,0,.14); --bap-transition: .22s cubic-bezier(.4,0,.2,1); } /* ── Trigger Button ─────────────────────────────────────────── */ /* Fully isolated — works inside grid cells, tabs, widgets, menus */ .bap-trigger-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: var(--bap-accent, #4f46e5) !important; color: #fff !important; border: none !important; outline: none !important; border-radius: 50px !important; padding: 13px 26px !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: .01em !important; cursor: pointer !important; transition: background .22s ease, transform .22s ease, box-shadow .22s ease !important; box-shadow: 0 4px 16px rgba(79,70,229,.30) !important; font-family: inherit !important; line-height: 1.4 !important; text-decoration: none !important; /* Prevent parent flex/grid from stretching the button */ align-self: flex-start !important; justify-self: start !important; /* No transform on the button itself to avoid stacking context issues */ will-change: auto !important; vertical-align: middle !important; position: static !important; float: none !important; } .bap-trigger-btn:hover { background: #4338ca !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(79,70,229,.38) !important; color: #fff !important; text-decoration: none !important; } .bap-trigger-btn:active { transform: translateY(0) !important; } .bap-trigger-btn:focus { outline: 3px solid rgba(79,70,229,.40) !important; outline-offset: 2px !important; } .bap-btn-icon { display: flex !important; align-items: center !important; flex-shrink: 0 !important; } /* ══════════════════════════════════════════════════════════════ OVERLAY — The most critical part Must always cover the entire viewport regardless of: - where the button lives (grid, tab, sticky header, etc.) - parent overflow / transform / z-index Solution: append to via JS (done in bap-public.js) CSS reinforcement below: ══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── OVERLAY — Nuclear-level fix for WoodMart / Elementor / Divi These themes apply transform/perspective/overflow on ancestors which breaks position:fixed. Our fix: 1. CSS: inset + vw/vh + all overrides 2. JS: always move to + MutationObserver guard ───────────────────────────────────────────────────────────── */ /* Force html+body to allow our overlay when open */ html.bap-modal-open, html.bap-modal-open body { overflow: hidden !important; } .bap-overlay { /* Fixed to viewport — use inset (modern) + explicit coords (fallback) */ position: fixed !important; inset: 0 !important; /* modern shorthand */ top: 0 !important; /* fallback */ right: 0 !important; /* fallback */ bottom: 0 !important; /* fallback */ left: 0 !important; /* fallback */ /* Explicit viewport dimensions — not %, which can inherit wrong */ width: 100vw !important; height: 100vh !important; /* Centering the modal box */ display: flex !important; align-items: center !important; justify-content: center !important; /* Padding — prevents modal touching edge on phones */ padding: 16px !important; box-sizing: border-box !important; /* Backdrop */ background: rgba(15,23,42,.70) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; /* Must be above everything — WoodMart sticky nav, Elementor popups etc */ z-index: 2147483647 !important; /* Kill any inherited transforms that break fixed positioning */ transform: none !important; -webkit-transform: none !important; will-change: opacity !important; /* Reset all box-model so nothing clamps it */ margin: 0 !important; border: none !important; padding-top: 16px !important; padding-bottom: 16px !important; max-width: 100vw !important; max-height: 100vh !important; min-width: 0 !important; min-height: 0 !important; overflow: auto !important; /* No stretching from flex/grid parents */ float: none !important; align-self: auto !important; justify-self: auto !important; flex: none !important; /* Isolation — own stacking context */ isolation: isolate !important; /* Initially hidden */ opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; transition: opacity .25s ease, visibility .25s ease !important; } .bap-overlay.is-open { opacity: 1 !important; pointer-events: all !important; visibility: visible !important; } /* ── Modal Box ──────────────────────────────────────────────── */ .bap-modal { /* Sizing — cap width + height */ width: 100% !important; max-width: 700px !important; max-height: min(92vh, 820px) !important; min-height: 200px !important; min-width: 0 !important; /* Center within overlay flex */ align-self: center !important; justify-self: center !important; flex-shrink: 0 !important; margin: auto !important; /* Layout */ display: flex !important; flex-direction: column !important; overflow: hidden !important; /* Visual */ background: #ffffff !important; border-radius: 20px !important; box-shadow: 0 32px 80px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.16) !important; border: none !important; outline: none !important; /* Animation */ transform: scale(.93) translateY(28px) !important; transition: transform .28s cubic-bezier(.34,1.28,.64,1) !important; will-change: transform !important; /* Own stacking context — nothing inside can leak out */ position: relative !important; isolation: isolate !important; float: none !important; } .bap-overlay.is-open .bap-modal { transform: scale(1) translateY(0) !important; } /* ── Modal Header ───────────────────────────────────────────── */ .bap-modal-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 20px 24px !important; border-bottom: 1px solid #e2e8f0 !important; flex-shrink: 0 !important; background: #ffffff !important; border-radius: 20px 20px 0 0 !important; /* Prevent header from collapsing */ min-height: 0 !important; } .bap-modal-title-wrap { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; flex: 1 !important; } .bap-modal-icon { width: 42px !important; height: 42px !important; min-width: 42px !important; background: rgba(79,70,229,.10) !important; color: #4f46e5 !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } /* Override any theme heading styles inside our modal */ .bap-modal-header h2, #bap-modal-title { margin: 0 !important; padding: 0 !important; font-size: 18px !important; font-weight: 700 !important; color: #1e293b !important; line-height: 1.3 !important; border: none !important; background: none !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; font-family: inherit !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ── Close Button ───────────────────────────────────────────── */ .bap-close-btn { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; color: #64748b !important; transition: all .18s ease !important; padding: 0 !important; line-height: 1 !important; flex-shrink: 0 !important; margin: 0 !important; text-decoration: none !important; box-shadow: none !important; outline: none !important; } .bap-close-btn svg { display: block !important; stroke: #64748b !important; width: 18px !important; height: 18px !important; flex-shrink: 0 !important; } .bap-close-btn:hover { background: #fee2e2 !important; border-color: #fecaca !important; } .bap-close-btn:hover svg { stroke: #ef4444 !important; } .bap-close-btn:focus { outline: 3px solid rgba(239,68,68,.30) !important; outline-offset: 2px !important; } /* ── Step Progress Bar ──────────────────────────────────────── */ .bap-steps-progress { display: flex !important; align-items: center !important; padding: 14px 24px !important; border-bottom: 1px solid #e2e8f0 !important; flex-shrink: 0 !important; background: #f8fafc !important; gap: 0 !important; min-height: 0 !important; overflow: hidden !important; } .bap-step-item { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important; flex-shrink: 0 !important; } .bap-step-circle { width: 34px !important; height: 34px !important; border-radius: 50% !important; border: 2px solid #e2e8f0 !important; background: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 700 !important; color: #64748b !important; transition: all .22s ease !important; flex-shrink: 0 !important; position: relative !important; } .bap-step-check { display: none !important; } .bap-step-num { display: block !important; } .bap-step-item.active .bap-step-circle { border-color: #4f46e5 !important; background: #4f46e5 !important; color: #fff !important; box-shadow: 0 0 0 4px rgba(79,70,229,.15) !important; } .bap-step-item.active .bap-step-circle .bap-step-num { color: #fff !important; } .bap-step-item.completed .bap-step-circle { border-color: #10b981 !important; background: #10b981 !important; } .bap-step-item.completed .bap-step-check { display: flex !important; align-items: center !important; justify-content: center !important; } .bap-step-item.completed .bap-step-check svg { display: block !important; } .bap-step-item.completed .bap-step-num { display: none !important; } .bap-step-label { font-size: 10px !important; font-weight: 700 !important; color: #94a3b8 !important; letter-spacing: .05em !important; text-transform: uppercase !important; white-space: nowrap !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; } .bap-step-item.active .bap-step-label { color: #4f46e5 !important; } .bap-step-item.completed .bap-step-label { color: #10b981 !important; } .bap-step-line { flex: 1 !important; height: 2px !important; background: #e2e8f0 !important; margin: 0 6px 20px !important; border-radius: 2px !important; transition: background .22s ease !important; min-width: 12px !important; } .bap-step-line.completed { background: #10b981 !important; } /* ── Steps Container ────────────────────────────────────────── */ .bap-steps-container { flex: 1 !important; overflow: hidden !important; position: relative !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; } .bap-step-panel { display: none !important; flex-direction: column !important; flex: 1 !important; overflow: hidden !important; min-height: 0 !important; } .bap-step-panel.active { display: flex !important; } .bap-step-content { flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 24px !important; -webkit-overflow-scrolling: touch !important; min-height: 0 !important; } /* Override theme h3/h4 styles inside modal */ .bap-step-content h3, .bap-step-heading { margin: 0 0 4px !important; padding: 0 !important; font-size: 18px !important; font-weight: 700 !important; color: #1e293b !important; border: none !important; background: none !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.3 !important; } .bap-step-subheading { margin: 0 0 20px !important; font-size: 14px !important; color: #64748b !important; padding: 0 !important; font-weight: 400 !important; line-height: 1.5 !important; } .bap-step-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 24px !important; border-top: 1px solid #e2e8f0 !important; background: #f8fafc !important; flex-shrink: 0 !important; min-height: 0 !important; gap: 12px !important; } /* ── Services Grid ──────────────────────────────────────────── */ .bap-services-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 12px !important; } .bap-service-card { border: 2px solid #e2e8f0 !important; border-radius: 12px !important; padding: 16px !important; cursor: pointer !important; transition: border-color .2s, box-shadow .2s, transform .2s !important; position: relative !important; background: #ffffff !important; user-select: none !important; } .bap-service-card:hover { border-color: #4f46e5 !important; box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important; transform: translateY(-2px) !important; } .bap-service-card.selected { border-color: #4f46e5 !important; background: rgba(79,70,229,.05) !important; } .bap-service-card.selected::after { content: '✓' !important; position: absolute !important; top: 10px !important; right: 10px !important; width: 22px !important; height: 22px !important; background: #4f46e5 !important; color: #fff !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; font-weight: 700 !important; line-height: 22px !important; text-align: center !important; } .bap-service-thumb { width: 100% !important; height: 85px !important; object-fit: cover !important; border-radius: 8px !important; margin-bottom: 10px !important; display: block !important; } .bap-service-icon { width: 42px !important; height: 42px !important; background: rgba(79,70,229,.10) !important; color: #4f46e5 !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; margin-bottom: 10px !important; flex-shrink: 0 !important; } .bap-service-name { font-size: 14px !important; font-weight: 700 !important; color: #1e293b !important; margin: 0 0 4px !important; line-height: 1.3 !important; } .bap-service-desc { font-size: 12px !important; color: #64748b !important; margin: 0 0 8px !important; line-height: 1.4 !important; } .bap-service-meta { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; } .bap-service-price { font-size: 15px !important; font-weight: 700 !important; color: #4f46e5 !important; } .bap-service-duration { font-size: 11px !important; color: #64748b !important; background: #f1f5f9 !important; padding: 2px 7px !important; border-radius: 20px !important; white-space: nowrap !important; } /* ── Date & Time Grid ───────────────────────────────────────── */ .bap-datetime-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; align-items: start !important; } /* ── Calendar ───────────────────────────────────────────────── */ .bap-calendar-wrap { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 14px !important; } .bap-calendar-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 12px !important; font-size: 14px !important; font-weight: 700 !important; color: #1e293b !important; gap: 8px !important; } .bap-cal-nav { width: 30px !important; height: 30px !important; border: 1px solid #e2e8f0 !important; background: #ffffff !important; border-radius: 7px !important; cursor: pointer !important; font-size: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all .15s !important; color: #1e293b !important; padding: 0 !important; line-height: 1 !important; flex-shrink: 0 !important; box-shadow: none !important; outline: none !important; } .bap-cal-nav:hover { background: #4f46e5 !important; color: #fff !important; border-color: #4f46e5 !important; } .bap-calendar-days-header { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; text-align: center !important; margin-bottom: 6px !important; } .bap-calendar-days-header span { font-size: 10px !important; font-weight: 700 !important; color: #94a3b8 !important; padding: 4px 0 !important; letter-spacing: .05em !important; text-transform: uppercase !important; text-align: center !important; } .bap-calendar-grid { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 2px !important; } .bap-cal-day { aspect-ratio: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; font-weight: 500 !important; border-radius: 7px !important; cursor: pointer !important; transition: all .15s !important; color: #1e293b !important; border: 2px solid transparent !important; background: transparent !important; line-height: 1 !important; padding: 0 !important; margin: 0 !important; } .bap-cal-day:hover:not(.disabled):not(.empty) { background: rgba(79,70,229,.08) !important; color: #4f46e5 !important; border-color: #4f46e5 !important; } .bap-cal-day.today { font-weight: 800 !important; color: #4f46e5 !important; } .bap-cal-day.selected { background: #4f46e5 !important; color: #fff !important; border-color: #4f46e5 !important; font-weight: 700 !important; } .bap-cal-day.disabled { color: #cbd5e1 !important; cursor: not-allowed !important; } .bap-cal-day.empty { cursor: default !important; } /* ── Time Slots ─────────────────────────────────────────────── */ .bap-slots-wrap { border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 14px !important; overflow-y: auto !important; max-height: 300px !important; background: #ffffff !important; -webkit-overflow-scrolling: touch !important; } .bap-slots-title { font-size: 13px !important; font-weight: 700 !important; color: #1e293b !important; margin: 0 0 10px !important; padding: 0 !important; border: none !important; background: none !important; } .bap-slots-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .bap-slot-btn { padding: 9px 8px !important; border: 2px solid #e2e8f0 !important; background: #f8fafc !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; text-align: center !important; transition: all .15s !important; color: #1e293b !important; font-family: inherit !important; display: block !important; width: 100% !important; line-height: 1.4 !important; box-shadow: none !important; outline: none !important; } .bap-slot-btn:hover:not(.unavailable) { border-color: #4f46e5 !important; background: rgba(79,70,229,.08) !important; color: #4f46e5 !important; } .bap-slot-btn.selected { border-color: #4f46e5 !important; background: #4f46e5 !important; color: #fff !important; } .bap-slot-btn.unavailable { opacity: .4 !important; cursor: not-allowed !important; text-decoration: line-through !important; } .bap-slots-placeholder { font-size: 13px !important; color: #94a3b8 !important; text-align: center !important; padding: 24px 0 !important; margin: 0 !important; grid-column: 1/-1 !important; } /* ── Customer Details Form ──────────────────────────────────── */ .bap-form-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; } .bap-span-2 { grid-column: span 2 !important; } .bap-form-group { display: flex !important; flex-direction: column !important; gap: 5px !important; margin: 0 !important; padding: 0 !important; } .bap-form-group label { font-size: 13px !important; font-weight: 600 !important; color: #374151 !important; display: block !important; margin: 0 !important; padding: 0 !important; cursor: default !important; } .bap-required { color: #ef4444 !important; margin-left: 2px !important; } /* Override theme input styles */ .bap-form-group input[type="text"], .bap-form-group input[type="email"], .bap-form-group input[type="tel"], .bap-form-group textarea, #bap-modal-overlay input[type="text"], #bap-modal-overlay input[type="email"], #bap-modal-overlay input[type="tel"], #bap-modal-overlay textarea { padding: 10px 13px !important; border: 2px solid #e2e8f0 !important; border-radius: 9px !important; font-size: 14px !important; color: #1e293b !important; background: #ffffff !important; transition: border-color .18s, box-shadow .18s !important; outline: none !important; font-family: inherit !important; width: 100% !important; box-shadow: none !important; margin: 0 !important; display: block !important; appearance: none !important; -webkit-appearance: none !important; line-height: 1.4 !important; max-width: none !important; min-height: 0 !important; } .bap-form-group input[type="text"]:focus, .bap-form-group input[type="email"]:focus, .bap-form-group input[type="tel"]:focus, .bap-form-group textarea:focus, #bap-modal-overlay input[type="text"]:focus, #bap-modal-overlay input[type="email"]:focus, #bap-modal-overlay input[type="tel"]:focus, #bap-modal-overlay textarea:focus { border-color: #4f46e5 !important; box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important; outline: none !important; } .bap-form-group input.is-error, .bap-form-group textarea.is-error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.10) !important; } .bap-field-error { font-size: 12px !important; color: #ef4444 !important; min-height: 16px !important; display: block !important; margin: 0 !important; padding: 0 !important; line-height: 1.3 !important; } /* ── Coupon Section ─────────────────────────────────────────── */ #bap-coupon-section { gap: 5px !important; } .bap-coupon-wrap { display: flex !important; gap: 8px !important; align-items: stretch !important; } .bap-coupon-wrap input[type="text"] { flex: 1 !important; min-width: 0 !important; } .bap-coupon-wrap .bap-btn-primary { flex-shrink: 0 !important; padding: 10px 20px !important; font-size: 13px !important; white-space: nowrap !important; border-radius: 9px !important; } #bap-coupon-msg { font-size: 13px !important; line-height: 1.5 !important; margin: 0 !important; padding: 0 !important; } /* ── Summary Card ───────────────────────────────────────────── */ .bap-summary-card { border: 1px solid #e2e8f0 !important; border-radius: 12px !important; overflow: hidden !important; margin-bottom: 14px !important; } .bap-summary-header { display: flex !important; align-items: center !important; gap: 8px !important; padding: 13px 18px !important; background: rgba(79,70,229,.07) !important; color: #4f46e5 !important; font-size: 14px !important; font-weight: 700 !important; border-bottom: 1px solid #e2e8f0 !important; margin: 0 !important; } .bap-summary-row { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; padding: 11px 18px !important; border-bottom: 1px solid #f1f5f9 !important; font-size: 14px !important; gap: 12px !important; margin: 0 !important; } .bap-summary-row:last-child { border-bottom: none !important; } .bap-summary-row-label { color: #64748b !important; font-weight: 500 !important; min-width: 100px !important; flex-shrink: 0 !important; } .bap-summary-row-value { font-weight: 600 !important; color: #1e293b !important; text-align: right !important; word-break: break-word !important; } .bap-summary-total { padding: 13px 18px !important; background: #f8fafc !important; display: flex !important; justify-content: space-between !important; font-size: 16px !important; font-weight: 800 !important; border-top: 2px solid #e2e8f0 !important; color: #1e293b !important; flex-wrap: wrap !important; gap: 8px !important; } .bap-summary-total-amount { color: #4f46e5 !important; } .bap-payment-notice { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; color: #64748b !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 10px 14px !important; margin-bottom: 10px !important; } /* ── Alerts ─────────────────────────────────────────────────── */ .bap-alert { padding: 11px 15px !important; border-radius: 9px !important; font-size: 13px !important; font-weight: 500 !important; margin-top: 8px !important; display: block !important; } .bap-alert-error { background: #fef2f2 !important; border: 1px solid #fecaca !important; color: #b91c1c !important; } .bap-alert-success { background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; color: #15803d !important; } /* ── Buttons (inside modal) ─────────────────────────────────── */ .bap-modal .bap-btn, #bap-modal-overlay .bap-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 10px 22px !important; border-radius: 50px !important; border: none !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; transition: all .18s ease !important; font-family: inherit !important; text-decoration: none !important; line-height: 1.4 !important; margin: 0 !important; box-shadow: none !important; outline: none !important; white-space: nowrap !important; flex-shrink: 0 !important; } .bap-modal .bap-btn-primary, #bap-modal-overlay .bap-btn-primary { background: #4f46e5 !important; color: #fff !important; box-shadow: 0 2px 10px rgba(79,70,229,.25) !important; border: none !important; } .bap-modal .bap-btn-primary:hover, #bap-modal-overlay .bap-btn-primary:hover { background: #4338ca !important; transform: translateY(-1px) !important; box-shadow: 0 4px 16px rgba(79,70,229,.35) !important; color: #fff !important; } .bap-modal .bap-btn-primary:disabled, #bap-modal-overlay .bap-btn-primary:disabled { opacity: .5 !important; cursor: not-allowed !important; transform: none !important; } .bap-modal .bap-btn-ghost, #bap-modal-overlay .bap-btn-ghost { background: transparent !important; color: #64748b !important; border: 1px solid #e2e8f0 !important; } .bap-modal .bap-btn-ghost:hover, #bap-modal-overlay .bap-btn-ghost:hover { background: #f1f5f9 !important; color: #1e293b !important; } .bap-modal .bap-btn-pay, #bap-modal-overlay .bap-btn-pay { background: linear-gradient(135deg, #10b981, #059669) !important; color: #fff !important; font-size: 15px !important; padding: 12px 26px !important; box-shadow: 0 4px 14px rgba(16,185,129,.28) !important; border: none !important; } .bap-modal .bap-btn-pay:hover, #bap-modal-overlay .bap-btn-pay:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(16,185,129,.38) !important; color: #fff !important; } .bap-modal .bap-btn-pay:disabled, #bap-modal-overlay .bap-btn-pay:disabled { opacity: .6 !important; cursor: not-allowed !important; transform: none !important; } /* ── Spinner ────────────────────────────────────────────────── */ .bap-loading-spinner { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 40px !important; grid-column: 1/-1 !important; color: #64748b !important; font-size: 14px !important; } .bap-spinner { width: 34px !important; height: 34px !important; border: 3px solid #e2e8f0 !important; border-top-color: #4f46e5 !important; border-radius: 50% !important; animation: bap-spin .75s linear infinite !important; display: inline-block !important; flex-shrink: 0 !important; } @keyframes bap-spin { to { transform: rotate(360deg); } } .bap-no-services { grid-column: 1/-1 !important; text-align: center !important; padding: 40px 20px !important; color: #94a3b8 !important; font-size: 14px !important; } /* ── Scrollbar ──────────────────────────────────────────────── */ .bap-step-content::-webkit-scrollbar, .bap-slots-wrap::-webkit-scrollbar { width: 5px !important; } .bap-step-content::-webkit-scrollbar-track, .bap-slots-wrap::-webkit-scrollbar-track { background: transparent !important; } .bap-step-content::-webkit-scrollbar-thumb, .bap-slots-wrap::-webkit-scrollbar-thumb { background: #e2e8f0 !important; border-radius: 3px !important; } /* ══════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { /* Slide up from bottom on mobile */ .bap-overlay { padding: 0 !important; align-items: flex-end !important; } .bap-modal { border-radius: 20px 20px 0 0 !important; max-height: 96vh !important; max-width: 100% !important; width: 100% !important; /* Override desktop animation with slide-up */ transform: translateY(100%) !important; } .bap-overlay.is-open .bap-modal { transform: translateY(0) !important; } .bap-step-label { display: none !important; } .bap-step-content { padding: 16px !important; } .bap-step-footer { padding: 12px 16px !important; } .bap-modal-header { padding: 14px 16px !important; } .bap-steps-progress { padding: 10px 16px !important; } .bap-modal .bap-btn { padding: 9px 16px !important; font-size: 13px !important; } .bap-modal .bap-btn-pay { font-size: 14px !important; padding: 11px 20px !important; } .bap-datetime-grid { grid-template-columns: 1fr !important; } .bap-form-grid { grid-template-columns: 1fr !important; } .bap-span-2 { grid-column: span 1 !important; } } @media (max-width: 380px) { .bap-step-circle { width: 28px !important; height: 28px !important; font-size: 11px !important; } .bap-step-line { margin-bottom: 14px !important; } }