.cbp-master-container { font-family: 'Inter', -apple-system, sans-serif; max-width: 1000px; margin: 40px auto; color: #333; }
.cbp-header h3 { margin-bottom: 20px; color: #111; font-weight: 600; }
.cbp-booking-card { display: flex; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); overflow: hidden; min-height: 500px; border: 1px solid #eaeaea; }
.cbp-sidebar { width: 300px; padding: 30px; border-right: 1px solid #eaeaea; background: #fafafa; }
.cbp-avatar img { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #5a4b81; object-fit: cover; }
.cbp-doc-profile h2 { margin: 15px 0 5px; font-size: 20px; }
.cbp-service-badge { display: flex; align-items: center; margin: 20px 0; }
.cbp-badge { background: #b8aced; color: #000; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: bold; margin-right: 15px; }
.cbp-meta p { color: #666; font-size: 14px; margin: 8px 0; }

.cbp-step { flex: 1; display: flex; width: 100%; flex-direction: row; }
.cbp-step-0 { flex-direction: column; }
.cbp-step-2 { flex-direction: column; align-items: center; justify-content: center; }
.cbp-step-3 { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center; padding: 40px; box-sizing: border-box; }
.cbp-cal-col { width: 50%; padding: 30px; border-right: 1px solid #eaeaea; }
.cbp-slots-col { width: 50%; padding: 30px; }
.cbp-details-col { width: 100%; max-width: 500px; padding: 30px; margin: 0 auto; }

/* Doctor Grid */
.cbp-doctor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.cbp-doctor-card { display: flex; align-items: center; gap: 15px; padding: 15px; border: 1px solid #eaeaea; border-radius: 10px; cursor: pointer; transition: all 0.2s; background: #fff; }
.cbp-doctor-card:hover, .cbp-doctor-card:focus-visible { border-color: #5a4b81; box-shadow: 0 4px 12px rgba(90, 75, 129, 0.1); outline: none; }
.cbp-doctor-card img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 1px solid #eee; }
.cbp-doc-info h4 { margin: 0 0 5px; font-size: 16px; color: #111; }
.cbp-doc-info p { margin: 0; font-size: 13px; color: #666; }
.cbp-back-btn { background: transparent; border: none; color: #5a4b81; font-weight: 500; cursor: pointer; padding: 0; margin-bottom: 20px; display: flex; align-items: center; gap: 5px; }
.cbp-back-btn:hover, .cbp-back-btn:focus-visible { text-decoration: underline; outline: none; }

.cbp-slot-btn { display: block; width: 100%; padding: 12px; margin-bottom: 10px; border: 1px solid #5a4b81; border-radius: 6px; background: transparent; color: #5a4b81; cursor: pointer; transition: 0.2s; text-align: center; }
.cbp-slot-btn:hover, .cbp-slot-btn:focus-visible { border-width: 2px; outline: none; }
.cbp-slot-row { display: flex; gap: 10px; margin-bottom: 10px; }
.cbp-slot-row .cbp-slot-btn { margin-bottom: 0; flex: 1; }
.cbp-slot-btn.active { background: #5a4b81; color: #fff; }
.cbp-next-btn { background: #4a4175; color: #fff; border: none; border-radius: 6px; padding: 12px 20px; cursor: pointer; flex-shrink: 0; }
.cbp-next-btn:focus-visible { outline: 2px solid #5a4b81; outline-offset: 2px; }

/* Form Elements */
.cbp-group { margin-bottom: 20px; }
.cbp-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; }
.cbp-group input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; }
.cbp-group input:focus-visible { outline: 2px solid #5a4b81; border-color: transparent; }
.cbp-phone-wrap { display: flex; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; background: #fff; align-items: center; }
.cbp-phone-wrap:focus-within { border-color: transparent; outline: 2px solid #5a4b81; }
.cbp-flag { background: #f9f9f9; padding: 0 15px; font-size: 14px; display: flex; align-items: center; justify-content: center; white-space: nowrap; color: #555; border-right: 1px solid #ccc; height: 48px; box-sizing: border-box; margin: 0; }
.cbp-phone-wrap input, #cbp-booking-form .cbp-phone-wrap input[type="tel"] { border: none !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; flex: 1; margin: 0 !important; padding: 0 12px !important; min-width: 0; background: transparent !important; height: 48px !important; line-height: 48px !important; box-sizing: border-box; }

.cbp-submit-btn { background: #5a4b81; color: #fff; border: none; padding: 15px; width: 100%; border-radius: 6px; font-size: 16px; cursor: pointer; }
.cbp-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.cbp-submit-btn:focus-visible { outline: 2px solid #5a4b81; outline-offset: 2px; }

.cbp-success-card { border: 1px solid #eaeaea; border-radius: 12px; padding: 25px; margin: 0 auto; max-width: 350px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.05); background: #fafafa; width: 100%; display: flex; flex-direction: column; align-items: center; }
#cbp-success-title { margin: 20px 0 10px; font-size: 28px; color: #111; }
#cbp-success-title:focus { outline: none; }
.cbp-success-msg { color: #666; margin-bottom: 30px; }
.cbp-success-details h4 { font-size: 20px; color: #5a4b81; margin: 0 0 5px; }

/* Checkmark Animation */
.cbp-success-checkmark { width: 60px; height: 60px; border-radius: 50%; display: block; stroke-width: 2; stroke: #2ecc71; stroke-miterlimit: 10; margin: 0 auto 15px auto; box-shadow: inset 0px 0px 0px #2ecc71; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
.cbp-checkmark-circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #2ecc71; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.cbp-checkmark-check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; stroke: #fff; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
@keyframes stroke { 100% { stroke-dashoffset: 0; } }
@keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
@keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px #2ecc71; } }

.cbp-calendar-actions { margin-top: 20px; display: flex; gap: 10px; justify-content: center; width: 100%; flex-wrap: wrap; }
.cbp-cal-btn { background: #fff; border: 1px solid #ddd; padding: 10px 15px; border-radius: 6px; color: #333; text-decoration: none; font-size: 14px; display: flex; align-items: center; gap: 8px; font-weight: 500; transition: 0.2s; flex: 1; justify-content: center; min-width: 130px; }
.cbp-cal-btn:hover { background: #f5f5f5; border-color: #ccc; }
.cbp-restart-btn { background: transparent; border: none; color: #5a4b81; font-weight: 600; cursor: pointer; margin-top: 20px; }
.cbp-restart-btn:focus-visible { outline: 2px solid #5a4b81; outline-offset: 2px; }
.cbp-footer-brand { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 5px; }

/* Make it responsive */
@media (max-width: 768px) {
    .cbp-booking-card { flex-direction: column; }
    .cbp-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #eaeaea; }
    .cbp-step { flex-direction: column; }
    .cbp-cal-col, .cbp-slots-col, .cbp-details-col { width: 100%; border-right: none; }
}

.cbp-cal-col .flatpickr-calendar { max-width: 100% !important; border: none; box-shadow: none; margin: 0 auto; width: 100% !important; }
.cbp-cal-col .flatpickr-rContainer, .cbp-cal-col .flatpickr-days, .cbp-cal-col .dayContainer { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
.cbp-cal-col .flatpickr-day { max-width: 14.28% !important; }
#cbp-inline-calendar { max-width: 100%; overflow: hidden; }