/*** Baldur Booking Engine - Frontend Styles** Professional styles matching ClinicMaster theme*/:root { --bs-primary: #00BDE0; --bs-secondary: #031B4E; --bs-success: #31A56D; --bs-danger: #D23636; --bs-light: #ECF5FB; --bs-dark: #444444; --bs-body-color: #566593; --bs-heading-color: #031B4E; --bs-border-color: #E1EBF1; --bs-border-radius: 0.375rem; --bs-border-radius-lg: 1rem; --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --bs-box-shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.05); --font-family-base: "Poppins", sans-serif; } #baldur-booking-app { max-width: 1000px; margin: 0 auto; padding: 40px 20px; font-family: var(--font-family-base); background: #fff; border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow-sm); } .baldur-booking-header { text-align: center; margin-bottom: 20px; } .baldur-booking-header h2 { font-size: 2.5rem; color: var(--bs-heading-color); margin-bottom: 15px; font-weight: 600; line-height: 1.2; } .baldur-booking-header p { font-size: 1.1rem; color: var(--bs-body-color); max-width: 600px; margin: 0 auto; line-height: 1.6; } .baldur-booking-steps { display: flex; justify-content: center; margin-bottom: 20px; position: relative; padding: 0 20px; } .baldur-booking-steps::before { content: ''; position: absolute; top: 25px; left: 15%; right: 15%; height: 3px; background: var(--bs-border-color); z-index: 1; border-radius: 2px; } .baldur-step { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; background: #fff; padding: 0 25px; transition: all 0.3s ease; } .step-number { width: 50px; height: 50px; border-radius: 50%; background: var(--bs-border-color); color: var(--bs-body-color); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.1rem; margin-bottom: 15px; transition: all 0.3s ease; border: 3px solid transparent; } .step-title { font-size: 0.95rem; color: var(--bs-body-color); text-align: center; font-weight: 500; transition: all 0.3s ease; } .baldur-step.active .step-number { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); box-shadow: 0 4px 15px rgba(0, 189, 224, 0.3); } .baldur-step.active .step-title { color: var(--bs-heading-color); font-weight: 600; } .baldur-step.completed .step-number { background: var(--bs-success); color: #fff; border-color: var(--bs-success); } .baldur-step.completed .step-title { color: var(--bs-success); font-weight: 600; } .baldur-step-content { background: #fff; border-radius: var(--bs-border-radius-lg); padding: 25px; box-shadow: var(--bs-box-shadow-sm); margin-bottom: 25px; border: 1px solid var(--bs-border-color); } .baldur-step-content h3 { color: var(--bs-heading-color); margin-bottom: 20px; font-size: 1.4rem; font-weight: 600; text-align: center; } .baldur-services-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 20px; } .baldur-category-card { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: white; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03); overflow: hidden; transition: all 0.3s ease; } .baldur-category-card:hover { box-shadow: var(--bs-box-shadow); } .category-header { background: var(--bs-light); padding: 15px 20px; cursor: pointer; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; transition: all 0.3s ease; border-bottom: 1px solid var(--bs-border-color); } .category-header:hover { background: var(--bs-primary); color: white; } .category-header h3 { margin: 0; color: var(--bs-heading-color); font-size: 1.2em; font-weight: 600; text-align: left; } .category-header:hover h3 { color: white; } .category-count { color: white; font-size: 0.85em; background: var(--bs-primary); padding: 6px 12px; border-radius: var(--bs-border-radius); font-weight: 500; white-space: nowrap; min-width: 80px; text-align: center; } .category-toggle { font-size: 1.2em; color: var(--bs-primary); font-weight: bold; transition: transform 0.3s ease; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .category-header:hover .category-toggle { color: white; } .category-services { padding: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .baldur-service-card { border: 2px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); padding: 18px; cursor: pointer; transition: all 0.3s ease; background: #fff; position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; height: 100%; } .baldur-service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--bs-primary); transform: scaleX(0); transition: transform 0.3s ease; } .baldur-service-card:hover { border-color: var(--bs-primary); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 189, 224, 0.15); } .baldur-service-card:hover::before { transform: scaleX(1); } .baldur-service-card.selected { border-color: var(--bs-primary); background: var(--bs-light); box-shadow: 0 8px 25px rgba(0, 189, 224, 0.2); transform: translateY(-3px); } .baldur-service-card.selected::before { transform: scaleX(1); } .service-content { display: flex; flex-direction: column; height: 100%; } .service-main-content { flex: 1; display: flex; flex-direction: column; } .service-image img { width: 100%; height: 100px; object-fit: cover; border-radius: var(--bs-border-radius); } .service-content h4 { color: var(--bs-heading-color); margin-top: 6px; margin-bottom: 8px; font-size: 1.2rem; font-weight: 600; line-height: 1.3; } .service-description { color: var(--bs-body-color); line-height: 1.5; font-size: 0.9rem; flex: 1; } .service-details { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #f8f9fa; border-radius: var(--bs-border-radius); margin-top: auto; } .service-price { font-size: 1.3rem; font-weight: 700; color: var(--bs-success); } .service-duration { background: var(--bs-primary); color: #fff; padding: 6px 12px; border-radius: 15px; font-size: 0.85rem; font-weight: 500; } .service-notes { font-size: 0.9rem; color: var(--bs-danger); font-style: italic; margin-top: 15px; padding: 10px; background: #fff5f5; border-radius: var(--bs-border-radius); border-left: 3px solid var(--bs-danger); } .baldur-calendar-section { margin-bottom: 40px; } .baldur-date-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 25px; background: #f8f9fa; padding: 20px; border-radius: var(--bs-border-radius-lg); } .baldur-date-btn { padding: 20px 15px; border: 2px solid var(--bs-border-color); background: #fff; border-radius: var(--bs-border-radius); cursor: pointer; transition: all 0.3s ease; text-align: center; font-weight: 500; font-size: 0.95rem; } .baldur-date-btn:hover { border-color: var(--bs-primary); background: var(--bs-light); transform: translateY(-2px); } .baldur-date-btn.selected { border-color: var(--bs-primary); background: var(--bs-primary); color: #fff; box-shadow: 0 4px 15px rgba(0, 189, 224, 0.3); } .baldur-date-btn.disabled { opacity: 0.4; cursor: not-allowed; background: #f8f9fa; } .baldur-time-slots { margin-bottom: 40px; } .baldur-slots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin-top: 25px; } .baldur-slot-btn { padding: 18px 15px; border: 2px solid var(--bs-border-color); background: #fff; border-radius: var(--bs-border-radius); cursor: pointer; transition: all 0.3s ease; text-align: center; font-weight: 500; font-size: 0.95rem; } .baldur-slot-btn:hover { border-color: var(--bs-primary); background: var(--bs-light); transform: translateY(-2px); } .baldur-slot-btn.selected { border-color: var(--bs-primary); background: var(--bs-primary); color: #fff; box-shadow: 0 4px 15px rgba(0, 189, 224, 0.3); } .baldur-slot-btn.unavailable { opacity: 0.4; cursor: not-allowed; background: #f8f9fa; } .baldur-customer-form { max-width: 500px; margin: 0 auto; } .baldur-form-group { display: flex; flex-direction: column; margin-bottom: 20px; } .baldur-form-group label { margin-bottom: 8px; font-weight: 600; color: var(--bs-heading-color); font-size: 0.95rem; } .baldur-form-group input { padding: 12px 16px; border: 2px solid var(--bs-border-color); border-radius: var(--bs-border-radius); font-size: 1rem; transition: all 0.3s ease; font-family: var(--font-family-base); background: #fff; } .baldur-form-group input:focus { outline: none; border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(0, 189, 224, 0.1); } .baldur-confirmation { max-width: 700px; margin: 0 auto; } .appointment-summary { background: var(--bs-light); padding: 30px; border-radius: var(--bs-border-radius-lg); margin-bottom: 40px; border: 1px solid var(--bs-border-color); } .appointment-summary h4 { color: var(--bs-heading-color); margin-bottom: 20px; font-size: 1.4rem; font-weight: 600; } .appointment-summary p { margin-bottom: 12px; color: var(--bs-body-color); font-size: 1rem; line-height: 1.6; } .price-summary { border-top: 2px solid var(--bs-border-color); padding-top: 20px; margin-top: 20px; } .price-summary p { font-weight: 600; color: var(--bs-heading-color); font-size: 1.1rem; } .baldur-payment-section { background: #fff; padding: 30px; border-radius: var(--bs-border-radius-lg); text-align: center; border: 2px solid var(--bs-border-color); } .baldur-payment-section h4 { color: var(--bs-heading-color); margin-bottom: 20px; font-size: 1.3rem; font-weight: 600; } .baldur-payment-info p { color: var(--bs-body-color); margin-bottom: 25px; font-size: 1rem; line-height: 1.6; } .baldur-navigation { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--bs-border-color); } .baldur-btn { padding: 15px 35px; border: none; border-radius: var(--bs-border-radius); font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; font-family: var(--font-family-base); position: relative; overflow: hidden; } .baldur-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .baldur-btn:hover::before { left: 100%; } .baldur-btn-primary { background: var(--bs-primary); color: #fff; box-shadow: 0 4px 15px rgba(0, 189, 224, 0.3); } .baldur-btn-primary:hover { background: #00a8c7; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 189, 224, 0.4); } .baldur-btn-secondary { background: var(--bs-secondary); color: #fff; box-shadow: 0 4px 15px rgba(3, 27, 78, 0.3); } .baldur-btn-secondary:hover { background: #021a42; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(3, 27, 78, 0.4); } .baldur-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } .baldur-btn:disabled:hover { transform: none; box-shadow: none; } .baldur-loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; } .baldur-spinner { width: 60px; height: 60px; border: 4px solid rgba(255, 255, 255, 0.3); border-top: 4px solid var(--bs-primary); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 25px; } .baldur-loading-overlay p { color: #fff; font-size: 1.2rem; font-weight: 500; font-family: var(--font-family-base); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .baldur-message { padding: 20px; border-radius: var(--bs-border-radius); margin-bottom: 25px; font-weight: 500; font-size: 1rem; } .baldur-message.error { background: #fff5f5; color: var(--bs-danger); border: 1px solid #fecaca; } .baldur-message.success { background: #f0fdf4; color: var(--bs-success); border: 1px solid #bbf7d0; } @media (max-width: 768px) { #baldur-booking-app { padding: 25px 15px; margin: 10px; } .baldur-booking-header h2 { font-size: 2rem; } .baldur-booking-steps { flex-direction: column; gap: 25px; padding: 0 10px; } .baldur-booking-steps::before { display: none; } .baldur-step { flex-direction: row; gap: 20px; padding: 15px; background: var(--bs-light); border-radius: var(--bs-border-radius-lg); } .step-number { margin-bottom: 0; width: 40px; height: 40px; } .baldur-step-content { padding: 25px; } .baldur-services-grid { grid-template-columns: 1fr; } .category-services { grid-template-columns: repeat(2, 1fr); } .baldur-form-row { grid-template-columns: 1fr; } .baldur-navigation { flex-direction: column; gap: 20px; } .baldur-btn { width: 100%; padding: 18px 35px; } .baldur-nav-arrow { width: 35px; height: 35px; font-size: 14px; } .baldur-nav-arrow-bottom { width: 35px; height: 35px; font-size: 14px; } .baldur-top-navigation { padding: 0.8rem; margin-bottom: 15px; } .baldur-bottom-navigation { padding: 0.8rem; margin-top: 15px; } .baldur-date-picker { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 15px; } .baldur-date-btn { padding: 15px 10px; font-size: 0.9rem; } .baldur-slots-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .baldur-booking-header h2 { font-size: 1.8rem; } .baldur-category-filters { justify-content: center; } .baldur-date-picker { grid-template-columns: repeat(2, 1fr); } .baldur-slots-grid { grid-template-columns: 1fr; } .category-services { grid-template-columns: 1fr; } } .baldur-btn:focus,.baldur-service-card:focus,.baldur-date-btn:focus,.baldur-slot-btn:focus { outline: 3px solid rgba(0, 189, 224, 0.3); outline-offset: 2px; } @media print { .baldur-navigation,.baldur-payment-section { display: none; } #baldur-booking-app { box-shadow: none; border: 1px solid #ccc; } } .baldur-booking-container .baldur-btn.disabled,.baldur-booking-container .baldur-btn:disabled { opacity: 0.6 !important; cursor: not-allowed !important; background-color: #6c757d !important; border-color: #6c757d !important; pointer-events: none !important; } .baldur-booking-container .baldur-btn.disabled:hover,.baldur-booking-container .baldur-btn:disabled:hover { background-color: #6c757d !important; border-color: #6c757d !important; transform: none !important; box-shadow: none !important; } .baldur-booking-container button.baldur-btn:disabled { -webkit-appearance: none !important; appearance: none !important; cursor: not-allowed !important; } .baldur-btn[title] { position: relative; } .service-summary-card { display: flex; gap: 20px; align-items: center; padding: 20px; background: white; border-radius: var(--bs-border-radius); border: 1px solid var(--bs-border-color); } .service-summary-card .service-image { flex-shrink: 0; width: 80px; height: 80px; border-radius: var(--bs-border-radius); overflow: hidden; } .service-summary-card .service-image img { width: 100%; height: 100%; object-fit: cover; } .service-summary-card .service-details { flex-grow: 1; } .service-summary-card .service-details h4 { margin: 0 0 8px 0; color: var(--bs-heading-color); font-size: 1.2em; } .service-summary-card .service-description { margin: 0 0 10px 0; color: var(--bs-body-color); font-size: 0.95em; line-height: 1.4; } .service-summary-card .service-meta { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; } @media (max-width: 768px) { .service-summary-card { flex-direction: column; gap: 15px; padding: 15px; } .service-summary-card .service-image { width: 60px; height: 60px; align-self: center; } .service-summary-card .service-meta { flex-direction: column; align-items: flex-start; gap: 8px; } .service-summary-card .service-price { font-size: 1em; } .service-summary-card .service-duration { font-size: 0.8em; padding: 3px 6px; } } .service-summary-card .service-price { font-weight: bold; color: var(--bs-primary); font-size: 1.1em; } .service-summary-card .service-duration { color: white; font-size: 0.9em; background: var(--bs-primary); padding: 4px 8px; border-radius: var(--bs-border-radius); font-weight: 500; } .service-summary-card .service-notes { color: var(--bs-body-color); font-size: 0.85em; font-style: italic; } .baldur-calendar-section { margin-bottom: 25px; } .baldur-calendar-section h3 { color: var(--bs-heading-color); margin-bottom: 12px; font-size: 1.1em; } .baldur-date-picker { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 10px; background: white; box-shadow: var(--bs-box-shadow-sm); display: flex; flex-direction: column; width: 100%; } .baldur-calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 5px; width: 100%; } .baldur-calendar-nav { background: var(--bs-primary); color: white; border: none; padding: 4px 8px; border-radius: var(--bs-border-radius); cursor: pointer; font-size: 0.75em; transition: all 0.3s ease; } .baldur-calendar-nav:hover { background: #009ac2; transform: translateY(-1px); } .baldur-calendar-month { font-size: 1.1em; font-weight: 600; color: var(--bs-heading-color); } .baldur-calendar-grid { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 0px !important; background: var(--bs-border-color) !important; border-radius: var(--bs-border-radius) !important; width: 100% !important; margin-top: 0 !important; clear: both !important; } .baldur-calendar-day-header { background: var(--bs-light); padding: 4px 2px; text-align: center; font-weight: 600; color: var(--bs-body-color); font-size: 0.75em; min-height: 22px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--bs-border-color); } .baldur-calendar-day { background: white; padding: 6px 4px; text-align: center; cursor: pointer; transition: all 0.2s ease; min-height: 24px; display: flex; align-items: center; justify-content: center; font-size: 0.8em; border: 1px solid #f0f0f0; position: relative; } .baldur-calendar-day:hover:not(.disabled) { background: var(--bs-primary); color: white; } .baldur-calendar-day.selected { background: var(--bs-primary); color: white; font-weight: bold; } .baldur-calendar-day.disabled { background: #f8f9fa; color: #adb5bd; cursor: not-allowed; } @media (max-width: 768px) { .baldur-calendar-day-header { padding: 3px 1px; font-size: 0.7em; min-height: 20px; } .baldur-calendar-day { padding: 3px 1px; font-size: 0.75em; min-height: 20px; } .baldur-calendar-nav { padding: 3px 6px; font-size: 0.7em; } .baldur-calendar-month { font-size: 0.9em; } .baldur-date-picker { padding: 10px; } } .baldur-time-slots { margin-bottom: 30px; } .baldur-time-slots h3 { color: var(--bs-heading-color); margin-bottom: 15px; } .baldur-slots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; } .baldur-time-slot { background: var(--bs-light); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 8px 12px; text-align: center; cursor: pointer; transition: all 0.2s ease; color: var(--bs-body-color); font-weight: 500; } .baldur-time-slot:hover:not(.unavailable) { background: var(--bs-primary); color: #ffffff !important; border-color: var(--bs-primary); box-shadow: 0 4px 8px rgba(0, 189, 224, 0.3); } .baldur-time-slot.selected { background: var(--bs-primary); color: #ffffff !important; border-color: var(--bs-primary); box-shadow: 0 4px 8px rgba(0, 189, 224, 0.3); } .baldur-time-slot.unavailable { background: #f8f9fa; color: #adb5bd; cursor: not-allowed; text-decoration: line-through; } .baldur-time-slot .occupied-badge,.baldur-time-slot .reserved-badge,.baldur-time-slot .unavailable-badge { position: absolute; top: -8px; right: -8px; font-size: 0.6rem; font-weight: 600; padding: 2px 4px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.3px; z-index: 10; min-width: 20px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .occupied-badge { background: #dc3545 !important; color: white !important; } .reserved-badge { background: #28a745 !important; color: white !important; } .unavailable-badge { background: #6c757d !important; color: white !important; } .baldur-time-slot.locked-by-others { background: #fff5f5 !important; border-color: #fecaca !important; color: #991b1b !important; position: relative; cursor: not-allowed !important; } .baldur-time-slot.locked-by-others:hover { background: #fff5f5 !important; border-color: #fecaca !important; transform: none !important; cursor: not-allowed !important; } .baldur-time-slot.locked-by-me { background: #f0fff4 !important; border-color: #9ae6b4 !important; color: #22543d !important; position: relative; cursor: pointer !important; } .baldur-time-slot.locked-by-me:hover { background: #dcfce7 !important; border-color: #86efac !important; color: #166534 !important; transform: translateY(-1px) !important; cursor: pointer !important; box-shadow: 0 4px 8px rgba(34, 197, 94, 0.3); } .baldur-time-slot.unavailable { background: #f8f9fa !important; border-color: #dee2e6 !important; color: #6c757d !important; cursor: not-allowed !important; text-decoration: line-through !important; } .baldur-time-slot.unavailable:hover { background: #f8f9fa !important; border-color: #dee2e6 !important; transform: none !important; cursor: not-allowed !important; } .baldur-time-slot.selectable-within-duration { background: #f8fafc; border-color: #e2e8f0; color: #475569; cursor: pointer; } .baldur-time-slot.selectable-within-duration:hover { background: #e2e8f0; border-color: #cbd5e1; transform: translateY(-1px); color: #334155 !important; box-shadow: 0 4px 8px rgba(71, 85, 105, 0.2); } .baldur-message { padding: 12px 16px; border-radius: var(--bs-border-radius); margin-bottom: 16px; font-weight: 500; animation: slideDown 0.3s ease; } .baldur-message-error { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; } .baldur-message-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #2563eb; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .baldur-slot-lock-notification { background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%); border: 2px solid var(--bs-primary); border-radius: var(--bs-border-radius-lg); padding: 20px; margin: 20px 0; display: flex; align-items: center; gap: 15px; box-shadow: var(--bs-box-shadow-sm); animation: slideInDown 0.3s ease-out; } .baldur-slot-lock-notification .lock-icon { font-size: 1.2em; font-weight: bold; color: var(--bs-primary); background: white; padding: 8px 12px; border-radius: var(--bs-border-radius); border: 2px solid var(--bs-primary); flex-shrink: 0; } .baldur-slot-lock-notification .lock-message { flex: 1; } .baldur-slot-lock-notification .lock-message strong { color: var(--bs-primary); font-size: 1.1em; display: block; margin-bottom: 5px; } .baldur-slot-lock-notification .lock-message p { margin: 0; color: var(--bs-body-color); font-size: 0.95em; line-height: 1.4; } @keyframes slideInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .baldur-slot-lock-notification { padding: 15px; gap: 10px; } .baldur-slot-lock-notification .lock-icon { font-size: 1em; padding: 6px 10px; } .baldur-slot-lock-notification .lock-message strong { font-size: 1em; } .baldur-slot-lock-notification .lock-message p { font-size: 0.9em; } } .baldur-payment-summary { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); } .baldur-payment-summary h3 { color: #2c3e50; margin-bottom: 20px; text-align: center; font-size: 1.3em; } .baldur-summary-details { margin-bottom: 30px; } .baldur-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #ecf0f1; } .baldur-summary-row:last-child { border-bottom: none; } .baldur-summary-row .baldur-label { font-weight: 600; color: #34495e; } .baldur-summary-row .baldur-value { color: #2c3e50; font-weight: 500; } .baldur-payment-options { margin-bottom: 30px; } .baldur-payment-options h4 { color: #2c3e50; margin-bottom: 20px; text-align: center; } .baldur-payment-choice { display: flex; flex-direction: column; gap: 15px; } .baldur-radio-option { display: flex; align-items: center; padding: 10px; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; margin-bottom: 10px; } .baldur-radio-option:hover { border-color: #3498db; } .baldur-radio-option input[type="radio"] { margin-right: 15px; transform: scale(1.2); } .baldur-radio-option input[type="radio"]:checked+.baldur-radio-label { color: #2c3e50; } .baldur-radio-option:has(input[type="radio"]:checked) { border-color: #3498db; background-color: #f0f8ff; } .baldur-radio-label { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 1.1em; } .baldur-radio-label strong { color: #2c3e50; } .baldur-price { color: #27ae60; font-weight: bold; font-size: 1.2em; } .baldur-slot-indicators { display: flex; flex-wrap: wrap; gap: 15px; margin: 10px 0 20px 0; padding: 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef; } .indicator-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #495057; } .indicator-color { width: 16px; height: 16px; border-radius: 4px; border: 1px solid #dee2e6; } .indicator-color.available { background-color: #007bff; } .indicator-color.reserved { background-color: #28a745; } .indicator-color.occupied { background-color: #dc3545; } .indicator-color.unavailable { background-color: #6c757d; } .indicator-text { font-weight: 500; } @media (max-width: 768px) { .baldur-payment-summary { padding: 20px; } .baldur-summary-row { flex-direction: column; align-items: flex-start; gap: 5px; } .baldur-radio-label { flex-direction: column; align-items: flex-start; gap: 5px; } } .baldur-time-slot.locked-by-user { background-color: #28a745 !important; color: white !important; border-color: #28a745 !important; position: relative; } .baldur-time-slot.locked-by-user:hover { background-color: #218838 !important; border-color: #218838 !important; } .baldur-payment-confirmation { text-align: center; padding: 2rem; max-width: 600px; margin: 0 auto; } .baldur-success-icon { width: 80px; height: 80px; background: #28a745; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: bold; margin: 0 auto 1.5rem; } .baldur-payment-confirmation h3 { color: #28a745; margin-bottom: 1rem; font-size: 1.8rem; } .baldur-payment-confirmation p { color: #666; margin-bottom: 2rem; font-size: 1.1rem; } .baldur-appointment-details { background: #f8f9fa; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; text-align: left; } .baldur-appointment-details h4 { color: #333; margin-bottom: 1rem; text-align: center; } .baldur-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #e9ecef; } .baldur-detail-row:last-child { border-bottom: none; } .baldur-label { font-weight: 600; color: #666; } .baldur-value { color: #333; font-weight: 500; } .baldur-confirmation-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .baldur-payment-error { text-align: center; padding: 2rem; max-width: 600px; margin: 0 auto; } #payment-container-step5 { margin-top: 2rem; } #bold-payment-container { margin-top: 1rem; } .baldur-booking-container { position: relative; display: flex; flex-direction: column; margin: 0 auto; background: white; border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow); overflow: hidden; } .baldur-booking-header,.baldur-booking-steps { position: relative; background: white; z-index: 100; padding: 1rem; flex-shrink: 0; } .baldur-booking-header { padding-bottom: 0.5rem; } .baldur-booking-steps { padding-top: 0.5rem; padding-bottom: 1rem; position: relative; } .baldur-step-content { flex: 1; padding: 1rem; overflow-y: auto; margin-top: 6px; } .baldur-top-navigation { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: white; border-bottom: 1px solid #e9ecef; margin-bottom: 20px; } .baldur-nav-arrow { width: 40px; height: 40px; background: var(--bs-primary); color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-weight: bold; } .baldur-nav-arrow:hover { background: var(--bs-secondary); transform: scale(1.05); } .baldur-nav-arrow.left { margin-right: auto; } .baldur-nav-arrow.right { margin-left: auto; } .baldur-nav-arrow:disabled { opacity: 0.3; cursor: not-allowed; } .baldur-nav-arrow:disabled:hover { transform: none; background: var(--bs-primary); } .baldur-bottom-navigation { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: white; border-top: 1px solid #e9ecef; flex-shrink: 0; margin-top: 20px; } .baldur-nav-arrow-bottom { width: 40px; height: 40px; background: var(--bs-primary); color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-weight: bold; } .baldur-nav-arrow-bottom:hover { background: var(--bs-secondary); transform: scale(1.05); } .baldur-nav-arrow-bottom:disabled { opacity: 0.3; cursor: not-allowed; } .baldur-nav-arrow-bottom:disabled:hover { transform: none; background: var(--bs-primary); } .baldur-nav-arrow-bottom.left { order: 1; } .baldur-nav-arrow-bottom.right { order: 2; } .baldur-bottom-navigation.only-prev { justify-content: flex-start; } .baldur-bottom-navigation.only-next { justify-content: flex-end; } .baldur-bottom-navigation.both-buttons { justify-content: space-between; } .baldur-error-icon { width: 80px; height: 80px; background: #dc3545; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: bold; margin: 0 auto 1.5rem; } .baldur-payment-error h3 { color: #dc3545; margin-bottom: 1rem; font-size: 1.8rem; } .baldur-payment-error p { color: #666; margin-bottom: 2rem; font-size: 1.1rem; } .baldur-error-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }