/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.motherhood-booking-form{ max-width: 100%; margin: 0 auto; padding-bottom: 50px; }
.swal-modal{ border-radius: 10px; }
.form-section { padding: 40px 0px; border: thin solid #efefef; border-radius: 10px; background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }

/* mobile number field */
.section-title { font-size: clamp(20px, 5vw, 28px); font-weight: 700; color: #1a202c; margin-bottom: 0.5rem; text-align: center; }
.section-subtitle { font-size: clamp(13px, 3.5vw, 15px); color: #718096; line-height: 1.6; text-align: center; margin-bottom: 2rem; }
.compact-input-group { display: flex; align-items: center; background: white; border: 2px solid #e2e8f0; border-radius: 14px; padding: 0.5rem; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); width: 100%; max-width: 100%; }
.compact-input-group:focus-within { border-color: #F86D8A; box-shadow: 0 4px 20px rgba(102, 126, 234, 0.25); transform: translateY(-2px); }
.country-prefix { font-weight: 700; color: #2d3748; padding: 0 clamp(0.5rem, 2vw, 0.75rem); border-right: 2px solid #e2e8f0; margin-right: clamp(0.5rem, 2vw, 0.75rem); font-size: clamp(14px, 3.5vw, 16px); flex-shrink: 0; }
.phone-input { flex: 1; border: none; outline: none; font-size: clamp(14px, 3.5vw, 16px); font-weight: 500; padding: clamp(0.5rem, 2vw, 0.625rem) 0.5rem; color: #1a202c; min-width: 0; background: transparent;}
.phone-input::placeholder { color: #a0aec0; font-size: clamp(13px, 3vw, 15px); }
.send-btn { background: linear-gradient(135deg, #F86D8A 0%, #C44569 100%); border: none; color: white; width: clamp(44px, 10vw, 48px); height: clamp(44px, 10vw, 48px); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; flex-shrink: 0; font-size: clamp(16px, 4vw, 18px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); }
.send-btn:hover:not(:disabled) { transform: scale(1.08); box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4); }
.send-btn:active:not(:disabled) { transform: scale(0.95); }
.send-btn:disabled { background: linear-gradient(135deg, #cbd5e0 0%, #a0aec0 100%); cursor: not-allowed; box-shadow: none; }
.input-hint { display: block; color: #a0aec0; font-size: clamp(11px, 2.5vw, 13px); margin-top: 0.5rem; padding-left: 0.25rem; }
.phone-display { display: inline-block; font-weight: 700; color: #F86D8A; background: #fff0f4; padding: 0.25rem 0.75rem; border-radius: 8px; margin: 0.5rem 0.25rem; font-size: clamp(14px, 3.5vw, 16px); }
.edit-button { background: none; border: none; color: #F86D8A; cursor: pointer; padding: 0.25rem; font-size: clamp(14px, 3.5vw, 16px); transition: all 0.3s ease; vertical-align: middle; }
.edit-button:hover { transform: scale(1.1); color: #E94B7B; }

/* otp verify screen */
.otp-container { max-width: 60%; border-radius: 16px; margin-bottom: 1rem; margin: 10px auto; }
.otp-inputs { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(8px, 2vw, 12px); max-width: 100%; }
.otp-input { font-size: clamp(18px, 5vw, 24px); font-weight: 700; text-align: center; border: 2px solid #e2e8f0; border-radius: 12px; background: white; transition: all 0.3s ease; color: #1a202c; outline: none; width: 100%; height: 100%; aspect-ratio: 1; }
.otp-input:focus { border-color: #F86D8A; background: #fff5f8; box-shadow: 0 0 0 4px rgba(248, 109, 138, 0.1); transform: scale(1.05); }
.otp-input:not(:placeholder-shown) { border-color: #F86D8A; background: #fff5f8; }
.resend-wrapper { padding: 1rem; background: #f7fafc; border-radius: 10px; display: inline-block; }
.text-muted { color: #718096; font-size: clamp(13px, 3vw, 14px); }
.resend-link { color: #F86D8A; font-weight: 600; text-decoration: none; margin-left: 0.5rem; transition: all 0.3s ease; display: inline-flex; align-items: center; font-size: clamp(13px, 3vw, 14px); }
.resend-link:hover { color: #E94B7B; text-decoration: none; transform: translateX(3px); }
.button-row { display: flex; gap: clamp(0.75rem, 2vw, 1rem); width: 100%; }
.btn-back { background: white; border: 2px solid #e2e8f0; color: #4a5568; padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 3vw, 1.5rem); border-radius: 12px; font-size: clamp(14px, 3.5vw, 16px); font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.btn-back:hover { background: #f7fafc; border-color: #cbd5e0; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.btn-back:active { transform: translateY(0); }
.btn-verify { background: linear-gradient(135deg, #F86D8A 0%, #C44569 100%); border: none; color: white; padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 3vw, 1.5rem); border-radius: 12px; font-size: clamp(14px, 3.5vw, 16px); font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex: 1; box-shadow: 0 8px 20px rgba(248, 109, 138, 0.4); position: relative; overflow: hidden; }
.btn-verify:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s ease; }
.btn-verify:hover:not(:disabled):before { left: 100%; }
.btn-verify:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(248, 109, 138, 0.5); }
.btn-verify:active:not(:disabled) { transform: translateY(0); }
.btn-verify:disabled { background: linear-gradient(135deg, #cbd5e0 0%, #a0aec0 100%); cursor: not-allowed; box-shadow: none; }
.otp-verification { animation: fadeInUp 0.5s ease; }

/* step 2 with doctor */
.step-2{ display: flex; gap: 20px; }
.doctor-details{ flex: 0 0 30%; }
.doctor-card{ background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border-radius: 20px; overflow: hidden; }
.doctor-card .details-section{ padding: 20px; }

.patient-appointment-section{ flex: 0 0 70%; }
.patient-appointment-section.full-width{ flex: 0 0 100%; }

/* patients */
.action-header { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; padding: 1rem 0; flex-wrap: wrap; }
.btn-action { height: 42px; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border: 2px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; }
.btn-action:hover,
.btn-logout:hover{ border: 2px solid transparent; }
.btn-add-patient { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.btn-add-patient:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4); }
.btn-bookings { background: linear-gradient(135deg, #F86D8A 0%, #C44569 100%); color: white; box-shadow: 0 4px 12px rgba(248, 109, 138, 0.3); }
.btn-bookings:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(248, 109, 138, 0.4); }
.btn-back { background: white; color: #4a5568; border: 2px solid #e2e8f0; }
.btn-back:hover { background: #f7fafc; border-color: #cbd5e0; transform: translateY(-2px); }
.patient-appointment-section { max-width: 100%; margin: 0 auto; padding: 2.5rem 1.5rem; }
.section-header { text-align: center; margin-bottom: 2.5rem; }
.section-title { font-size: clamp(22px, 5vw, 28px); font-weight: 700; color: #1a202c; margin-bottom: 0.5rem; }
.section-subtitle { font-size: clamp(14px, 3.5vw, 16px); color: #718096; line-height: 1.6; }
.form-group { margin-bottom: 2rem; }
.form-group-title { font-size: clamp(15px, 3.5vw, 17px); font-weight: 700; color: #2d3748; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.required-mark { color: #F86D8A; font-size: 18px; }
.patient-list { display: flex; flex-direction: column; gap: 1rem; }
.patient-card { background: white; border: 2px solid #e2e8f0; border-radius: 14px; padding: 1.25rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
.patient-card:hover { border-color: #F86D8A; box-shadow: 0 4px 16px rgba(248, 109, 138, 0.15); transform: translateY(-2px); }
.patient-card.active { border-color: #F86D8A; background: linear-gradient(135deg, #fff5f8 0%, #fff0f4 100%); box-shadow: 0 4px 16px rgba(248, 109, 138, 0.2); }
.patient-card-content { display: flex; align-items: center; gap: 1rem; }
.patient-radio { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.form-check-input { width: 20px; height: 20px; cursor: pointer; border: 2px solid #cbd5e0; }
.form-check-input:checked { background-color: #F86D8A; border-color: #F86D8A; }
.patient-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #F86D8A 0%, #C44569 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; }
.patient-info { flex: 1; min-width: 0; }
.patient-name { font-size: clamp(15px, 3.5vw, 17px); font-weight: 700; color: #1a202c; margin-bottom: 0.25rem; }
.patient-details { display: flex; flex-wrap: wrap; gap: 1rem; }
.detail-item { display: inline-flex; align-items: center; gap: 0.375rem; font-size: clamp(13px, 3vw, 14px); color: #718096; }
.detail-item i { color: #F86D8A; }
.btn-edit-patient { background: none; border: 2px solid #F86D8A; color: #F86D8A; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; flex-shrink: 0; font-size: 16px; }
.btn-edit-patient:hover { background: #F86D8A; color: white; transform: scale(1.05); }
.select-wrapper { position: relative; }
.select-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #F86D8A; font-size: 18px; pointer-events: none; z-index: 1; }
.modern-select { width: 100%; padding: 0.875rem 1rem 0.875rem 3rem; border: 2px solid #e2e8f0; border-radius: 12px; font-size: clamp(14px, 3.5vw, 16px); color: #1a202c; background: white; transition: all 0.3s ease; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23718096' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; cursor: pointer; }
.modern-select:focus { outline: none; border-color: #F86D8A; box-shadow: 0 0 0 4px rgba(248, 109, 138, 0.1); }
.date-input-wrapper { position: relative; }
.date-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #F86D8A; font-size: 18px; pointer-events: none; z-index: 1; }
.modern-input { width: 100%; padding: 0.875rem 1rem 0.875rem 3rem; border: 2px solid #e2e8f0; border-radius: 12px; font-size: clamp(14px, 3.5vw, 16px); color: #1a202c; background: white; transition: all 0.3s ease; }
.modern-input:focus { outline: none; border-color: #F86D8A; box-shadow: 0 0 0 4px rgba(248, 109, 138, 0.1); }
.time-slots-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; }
.time-slot-btn { background: white; border: 2px solid #e2e8f0; border-radius: 10px; padding: 0.875rem 1rem; font-size: clamp(13px, 3vw, 14px); font-weight: 600; color: #4a5568; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.time-slot-btn:hover { border-color: #F86D8A; background: #fff5f8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(248, 109, 138, 0.15); }
.time-slot-btn.active { background: linear-gradient(135deg, #F86D8A 0%, #C44569 100%); border-color: #F86D8A; color: white; box-shadow: 0 4px 12px rgba(248, 109, 138, 0.3); }
.time-slot-btn i { font-size: 14px; }
.loading-state { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 12px; color: #0c4a6e; font-size: clamp(13px, 3vw, 14px); font-weight: 500; }
.spinner-small { width: 20px; height: 20px; border: 3px solid #e0f2fe; border-top: 3px solid #0284c7; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.empty-state { text-align: center; padding: 3rem 2rem; background: #fff5f8; border: 2px dashed #F86D8A; border-radius: 14px; }
.empty-state i { font-size: 48px; color: #F86D8A; margin-bottom: 1rem; }
.empty-state p { font-size: clamp(14px, 3.5vw, 16px); color: #718096; margin: 0; }
.empty-state-inline { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem; background: #fff5f8; border: 1px solid #ffd6e0; border-radius: 12px; color: #991b1b; font-size: clamp(13px, 3vw, 14px); font-weight: 500; }
.empty-state-inline i { font-size: 18px; color: #F86D8A; }
.form-actions { margin-top: 2.5rem; }
.btn-continue { width: 100%; background: linear-gradient(135deg, #F86D8A 0%, #C44569 100%); border: none; color: white; padding: 1rem 2rem; border-radius: 12px; font-size: clamp(15px, 3.5vw, 16px); font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.75rem; box-shadow: 0 8px 20px rgba(248, 109, 138, 0.4); }
.btn-continue:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(248, 109, 138, 0.5); }
.btn-continue:disabled { background: linear-gradient(135deg, #cbd5e0 0%, #a0aec0 100%); cursor: not-allowed; box-shadow: none; }
.btn-continue i { font-size: 20px; }

/* add patient */
.add-patient-section { margin: 0 auto; padding: 2rem; background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
.section-header { text-align: center; margin-bottom: 2rem; }
.section-title { font-size: clamp(20px, 4.5vw, 24px); font-weight: 700; color: #1a202c; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.section-title i { color: #F86D8A; font-size: clamp(22px, 5vw, 26px); }
.section-subtitle { font-size: clamp(13px, 3vw, 14px); color: #718096; margin: 0; }
.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; font-size: clamp(14px, 3.5vw, 15px); font-weight: 600; color: #2d3748; margin-bottom: 0.5rem; }
.required-mark { color: #F86D8A; margin-left: 0.25rem; }
.select-wrapper { position: relative; }
.select-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #F86D8A; font-size: 16px; pointer-events: none; z-index: 1; }
.modern-select { width: 100%; padding: 0.875rem 1rem 0.875rem 3rem; border: 2px solid #e2e8f0; border-radius: 12px; font-size: clamp(14px, 3.5vw, 15px); color: #1a202c; background: white; transition: all 0.3s ease; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23718096' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; cursor: pointer; }
.modern-select:focus { outline: none; border-color: #F86D8A; box-shadow: 0 0 0 4px rgba(248, 109, 138, 0.1); }
.input-wrapper { position: relative; }
.input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #F86D8A; font-size: 16px; pointer-events: none; z-index: 1; }
.date-input-wrapper { position: relative; }
.date-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #F86D8A; font-size: 16px; pointer-events: none; z-index: 1; }
.modern-input { width: 100%; padding: 0.875rem 1rem 0.875rem 3rem; border: 2px solid #e2e8f0; border-radius: 12px; font-size: clamp(14px, 3.5vw, 15px); color: #1a202c; background: white; transition: all 0.3s ease; }
.modern-input:focus { outline: none; border-color: #F86D8A; box-shadow: 0 0 0 4px rgba(248, 109, 138, 0.1); }
.modern-input::placeholder { color: #a0aec0; }
.form-actions-inline { display: flex; gap: 0.75rem; margin-top: 2rem; }
.btn-primary-action { flex: 1; background: linear-gradient(135deg, #F86D8A 0%, #C44569 100%); border: none; color: white; padding: 0.875rem 1.5rem; border-radius: 12px; font-size: clamp(14px, 3.5vw, 15px); font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: 0 6px 16px rgba(248, 109, 138, 0.35); }
.btn-primary-action:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(248, 109, 138, 0.45); }
.btn-primary-action i { font-size: 16px; }
.btn-secondary-action { flex: 1; background: white; border: 2px solid #e2e8f0; color: #4a5568; padding: 0.875rem 1.5rem; border-radius: 12px; font-size: clamp(14px, 3.5vw, 15px); font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.btn-secondary-action:hover { background: #f7fafc; border-color: #cbd5e0; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.btn-secondary-action i { font-size: 16px; }

/* my bookings */
.bookings-section { max-width: 100%; margin: 0 auto; padding: 2.5rem 1.5rem; }
.booking-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.booking-card { background: white; border: 2px solid #e2e8f0; border-radius: 14px; padding: 1.25rem; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
.booking-card:hover { border-color: #F86D8A; box-shadow: 0 4px 16px rgba(248, 109, 138, 0.15); transform: translateY(-2px); }
.booking-card-content { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.booking-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; flex-shrink: 0; }
.booking-info { flex: 1; min-width: 0; }
.booking-patient-name { font-size: clamp(16px, 3.5vw, 18px); font-weight: 700; color: #1a202c; margin-bottom: 0.5rem; }
.booking-details { display: flex; flex-direction: column; gap: 0.5rem; }
.booking-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.btn-reschedule { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; color: white; padding: 0.625rem 1rem; border-radius: 10px; font-size: clamp(13px, 3vw, 14px); font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); }
.btn-reschedule:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4); }
.btn-reschedule i { font-size: 14px; }
.btn-cancel { background: white; border: 2px solid #ef4444; color: #ef4444; padding: 0.625rem 1rem; border-radius: 10px; font-size: clamp(13px, 3vw, 14px); font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; }
.btn-cancel:hover { background: #ef4444; color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }
.btn-cancel i { font-size: 14px; }
.edit-booking-section { max-width: 100%; margin: 0 auto; padding: 2.5rem 1.5rem; }
.current-booking-card { background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%); border: 2px solid #bae6fd; border-radius: 14px; padding: 1.5rem; margin-bottom: 2rem; }
.info-card-header { display: flex; align-items: center; gap: 0.75rem; font-size: clamp(15px, 3.5vw, 17px); font-weight: 700; color: #0c4a6e; margin-bottom: 1rem; }
.info-card-header i { font-size: 20px; color: #0284c7; }
.info-card-body { display: flex; flex-direction: column; gap: 0.75rem; }
.info-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.info-label { display: flex; align-items: center; gap: 0.5rem; font-size: clamp(13px, 3vw, 14px); font-weight: 600; color: #0369a1; }
.info-label i { font-size: 14px; }
.info-value { font-size: clamp(13px, 3vw, 14px); color: #1e293b; font-weight: 500; }

.btn-logout { background: white; border: 2px solid #ef4444; color: #ef4444; padding: 0.625rem 1.25rem; border-radius: 10px; font-size: clamp(14px, 3.5vw, 15px); font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; }
.btn-logout:hover { background: #ef4444; color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }
.btn-logout:active { transform: translateY(0); }
.btn-logout i { font-size: 16px; }

.btn-back { background: white; color: #4a5568; border: 2px solid #e2e8f0; padding: 0.625rem 1.25rem; border-radius: 12px; font-size: clamp(14px, 3.5vw, 16px); font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.btn-back:hover { background: #f7fafc; border-color: #cbd5e0; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.btn-back:active { transform: translateY(0); }
.btn-back i { font-size: 16px; }

.modern-input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; filter: invert(56%) sepia(78%) saturate(2299%) hue-rotate(316deg) brightness(98%) contrast(95%); opacity: 1; }
.modern-input[type="date"]::-webkit-calendar-picker-indicator:hover { filter: invert(42%) sepia(67%) saturate(1547%) hue-rotate(316deg) brightness(95%) contrast(89%); transform: scale(1.1); }

/* edit patient */
.edit-patient-section { max-width: 100%; margin: 2rem auto; padding: 2rem; background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
.disabled-input { background: #f7fafc; color: #718096; cursor: not-allowed; opacity: 0.7; }
.info-section { margin-bottom: 2rem; padding: 1.5rem; background: #f8f9fa; border-radius: 12px; border: 1px solid #e2e8f0; }
.info-section-title { font-size: clamp(16px, 4vw, 18px); font-weight: 700; color: #2d3748; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem; }
.info-section-title i { color: #F86D8A; font-size: clamp(18px, 4.5vw, 20px); }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 280px; }
.form-row-three { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row-three .form-group { flex: 1; min-width: 250px; }
.input-wrapper { position: relative; }
.input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #F86D8A; font-size: 16px; pointer-events: none; z-index: 1; }

.woocommerce{ max-width: 100%!important; }
.woocommerce-order-pay .mbm-order-pay-layout{ display: flex; gap: 30px; }


/* === WooCommerce order-pay (form-pay) custom layout === */
.mbm-order-pay-wrapper { max-width: 100%; margin: 0 auto 2rem; }
.mbm-order-pay-layout { display: flex; gap: 2rem; align-items: flex-start; }
.mbm-order-pay-left,
.mbm-order-pay-right { width: 50%; }
.woocommerce-page table.shop_table{ width: 100%!important; }

/* Modern order items card */
.mbm-order-items-card { background: #ffffff; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); padding: 1.5rem; }
.mbm-order-items-header h3 { margin: 0 0 1rem; font-size: 16px; font-weight: 700; color: #1a202c; }
.mbm-order-items-list { display: flex; flex-direction: column; gap: 0.75rem; }
.mbm-order-item { padding: 0.75rem 1rem; border-radius: 12px; background: #f9fafb; border: 1px solid #e5e7eb; }
.mbm-order-item-main { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.mbm-order-item-name { font-size: 14px; font-weight: 600; color: #1f2933; }
.mbm-order-item-amount { font-size: 14px; font-weight: 700; color: #111827; }
.mbm-order-item-meta { margin-top: 0.25rem; font-size: 12px; color: #6b7280; }
.mbm-order-totals { margin-top: 1.25rem; border-top: 1px solid #e5e7eb; padding-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.mbm-order-total-row { display: flex; justify-content: space-between; font-size: 14px; }
.mbm-order-total-row--order_total .mbm-order-total-label,
.mbm-order-total-row--order_total .mbm-order-total-value { font-weight: 700; }

/* Stack columns on small screens */
@media (max-width: 767px) {
    .mbm-order-pay-layout { flex-direction: column; }
    .mbm-order-pay-left,
    .mbm-order-pay-right { width: 100%; }
}

/* Modern payment options card (right column) */
.mbm-payment-card { background: #ffffff; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); padding: 1.5rem; }

/* Remove default WooCommerce background/border inside this card */
.mbm-payment-card .woocommerce-checkout-payment { background: transparent !important; border: none !important; padding: 0; }
.mbm-payment-card #payment { margin: 0; }
.mbm-payment-card .wc_payment_methods { list-style: none; margin: 0 0 1.5rem; padding: 0!important; display: flex; flex-direction: column; }
.mbm-payment-card .wc_payment_method { border: none; padding: 0; }

/* Make the whole row (label) look like a selectable card */
.mbm-payment-card .wc_payment_method > label { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; cursor: pointer; padding: 0.75rem 1rem; border-radius: 12px; border: 1px solid #e5e7eb; background: #f9fafb; position: relative; }

/* Hide native radio, but keep it accessible */
.mbm-payment-card .wc_payment_method input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

/* Highlight selected row and show tick */
.mbm-payment-card .wc_payment_method input[type="radio"]:checked + label { border-color: #F86D8A; background: #fff5f8; }
.mbm-payment-card .wc_payment_method input[type="radio"]:checked + label::after { content: "\2713"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 999px; background: #F86D8A; color: #ffffff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.mbm-payment-card .payment_box { margin: 0.75rem 0 0; padding: 0.75rem 0.9rem; border-radius: 12px; background: #fff5f8; border: 1px solid #fbd2df; }

/* Match the tooltip arrow color to the box background */
.mbm-payment-card #payment div.payment_box:before { border-bottom-color: #fff5f8 !important; }

/* Force override of default WooCommerce payment box styling */
.mbm-payment-card #payment div.payment_box,
.mbm-payment-card .payment_box { background: #fff5f8 !important; border-color: #fbd2df !important; }
.mbm-payment-card .payment_box p:last-child { margin-bottom: 0; }
.mbm-payment-card .place-order { padding: 0!important; margin: 0!important; }
.mbm-payment-card .button{ float: none!important; margin-left: auto; }

.woocommerce-order footer{ display: none; }
.payment_box.payment_method_cod{ margin-bottom: 0px!important; }
.wc_payment_method.payment_method_billdesk{ margin-top: 15px!important; }
.payment_method_billdesk img{ width: 100px; }

.btn-back:hover{ border: thin solid #000!important; color: #000!important; }
.btn-back:hover span{ color: #000!important; }

@media (max-width: 576px) {
    .mobile-entry { padding: 1rem; }
    .section-subtitle { margin-bottom: 1.5rem; }
    .compact-input-group { border-radius: 12px; padding: 0.4rem; }
    .country-prefix { font-size: 14px; padding: 0 0.5rem; margin-right: 0.5rem; }
    .phone-input { font-size: 14px; padding: 0.5rem 0.4rem; }
    .phone-input::placeholder { font-size: 12px; }
    .send-btn { width: 44px; height: 44px; font-size: 16px; border-radius: 8px; }
    .otp-verification { padding: 1rem; }
    .otp-container { padding: 1.5rem 1rem; border-radius: 14px; }
    .otp-inputs { gap: 8px; }
    .otp-input { font-size: 18px; border-radius: 10px; }
    .resend-wrapper { padding: 0.875rem; }
    .btn-back .btn-text { display: none; }
    .btn-back { padding: 0.75rem 1rem; }
    .btn-verify { padding: 0.75rem 1.25rem; }

    /* patients */
    .action-header { padding: 0.875rem 1rem; gap: 0.5rem; }
    .btn-action span { display: none; }
    .btn-action { padding: 0.625rem 0.875rem; }
    .patient-appointment-section { padding: 1.5rem 1rem; }
    .doctor-details,
    .patient-appointment-section{ margin: 0 12px; }
    .action-header{ display: flex; flex-direction: row; }
    .action-header .btn-solid{ flex: 0 0 20%; padding: 0 10px; height: 35px; }
    .action-header .btn-solid span{ display: none; }
    .doctor-card{ display: flex; flex-direction: row; }
    .doctor-card .image-section{ flex: 0 0 25%; }
    .doctor-card .details-section{ flex: 0 0 75%; align-self: center; }
    .section-header { margin-bottom: 1.5rem; }
    .patient-card { padding: 1rem; }
    .patient-avatar { width: 45px; height: 45px; font-size: 20px; }
    .btn-edit-patient { width: 36px; height: 36px; font-size: 14px; }
    .time-slots-container { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem; }
    .time-slot-btn { padding: 0.75rem 0.5rem; font-size: 12px; }

    /* add patient */
    .add-patient-section { padding: 1.5rem 1rem; margin: 1rem auto; }
    .section-header { margin-bottom: 1.5rem; }
    .form-group { margin-bottom: 1.25rem; }
    .modern-select { padding: 0.75rem 1rem 0.75rem 2.75rem; }
    .modern-input { padding: 0.75rem 1rem 0.75rem 2.75rem; }
    .select-icon, .input-icon, .date-icon { font-size: 14px; left: 0.875rem; }
    .form-actions-inline { gap: 0.5rem; flex-direction: column; }
    .btn-primary-action, .btn-secondary-action { width: 100%; }
    
    /* edit patient */
    .edit-patient-section { padding: 1.5rem 1rem; margin: 1rem auto; }
    .info-section { padding: 1.25rem 1rem; }
    .section-header { margin-bottom: 1.5rem; }
    .info-section-title { font-size: 16px; margin-bottom: 1rem; }
    .form-row { gap: 0.75rem; }
    .form-row-three { gap: 0.75rem; }
    
    .step-2{ flex-direction: column; }
}

@media (max-width: 360px) {
    .form-section { padding: 40px 0; }
    .section-title { font-size: 18px; }
    .section-subtitle { font-size: 12px; }
    .compact-input-group { padding: 0.35rem; }
    .country-prefix { font-size: 13px; padding: 0 0.4rem; margin-right: 0.4rem; }
    .phone-input { font-size: 13px; padding: 0.45rem 0.3rem; }
    .phone-input::placeholder { font-size: 11px; }
    .send-btn { width: 40px; height: 40px; font-size: 15px; }
    .input-hint { font-size: 10px; }
    .mobile-entry { padding: 10px; }
    .otp-container { padding: 1.25rem 0.75rem; }
    .otp-inputs { gap: 6px; }
    .otp-input { font-size: 16px; border-radius: 8px; }
    .phone-display { font-size: 13px; padding: 0.2rem 0.6rem; }
    .button-row { gap: 0.5rem; }
    .btn-back { padding: 0.625rem 0.875rem; }
    .btn-verify { padding: 0.625rem 1rem; font-size: 13px; }
    
    /* patients */
    .patient-appointment-section { max-width: 600px; }
    .time-slots-container { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

    /* add patient */
    .add-patient-section { padding: 1.25rem 0.75rem; }
    .section-title { font-size: 18px; }
    .section-subtitle { font-size: 12px; }

    /* my bookings */
    .bookings-section { padding: 1rem 0.75rem; }
    .booking-card { padding: 0.875rem; }
    .booking-patient-name { font-size: 15px; }
    .edit-booking-section { padding: 1rem 0.75rem; }
    .current-booking-card { padding: 1rem 0.75rem; }

    /* edit patient */
    .edit-patient-section { padding: 1.25rem 0.75rem; }
    .info-section { padding: 1rem 0.75rem; }
    .section-title { font-size: 18px; }
    .section-subtitle { font-size: 12px; }
    .form-row { gap: 0.5rem; }
    .form-row-three { gap: 0.5rem; }
}

@media (min-width: 577px) and (max-width: 768px) {
    .mobile-entry, .otp-verification { max-width: 500px; margin: 0 auto; }
    .compact-input-group { padding: 0.6rem; }
    .otp-container { padding: 1.75rem 1.25rem; }

    /* patients */
    .patient-card:hover .btn-edit-patient { opacity: 1; }
    .btn-edit-patient { opacity: 0.7; }

    /* my bookings */
    .bookings-section, .edit-booking-section { max-width: 600px; }
}

@media (min-width: 769px) {
    .mobile-entry, .otp-verification { max-width: 50%; margin: 0 auto; }
    .compact-input-group:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
    .otp-input:hover { border-color: #F86D8A; }

    /* my bookings */
    .btn-reschedule .btn-text, .btn-cancel .btn-text { display: inline; }
    .form-row { grid-template-columns: 1fr; }
    .form-row-three { grid-template-columns: 1fr; }
}

@media (hover: none) and (pointer: coarse) {
    .send-btn { min-width: 44px; min-height: 44px; }
    .phone-input { font-size: 16px; }
    .btn-back, .btn-verify { min-height: 44px; }
    .otp-input { width: 30px; height: 30px; }
}

@media (max-width: 768px) and (orientation: landscape) {
    .section-subtitle { margin-bottom: 1rem; }
    .mobile-entry { padding: 0.5rem; }
    .otp-verification { padding: 0.5rem; }
    .otp-container { padding: 1rem 0.75rem; }

    /* edit patient */
    .form-row .form-group { flex: 1 1 100%; min-width: 100%; }
    .form-row-three .form-group { flex: 1 1 100%; min-width: 100%; }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .send-btn { box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}