/* ========================================
   Wizard Page — Glassy Modern Design
   ======================================== */

.wizard-page {
    padding: 28px 0 80px;
    direction: rtl;
    background: linear-gradient(135deg, var(--clinic-surface) 0%, #f7fbf9 50%, var(--clinic-surface-strong) 100%);
    min-height: calc(100vh - 120px);
    text-align: right;
}

/* ======== GLASS PANEL BASE ======== */
.glass {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--clinic-border);
    border-radius: var(--clinic-radius);
    box-shadow: var(--clinic-shadow), inset 0 1px 0 rgba(255,255,255,0.8);
}

/* ======== PROGRESS BAR ======== */
.wizard-steps-bar {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--clinic-border);
    padding: 26px 0;
    margin-bottom: 28px;
}

.steps-container {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    direction: rtl;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 96px;
    position: relative;
    z-index: 2;
}

.step-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: #F1F5F9;
    color: #94A3B8;
    border: 2.5px solid #E2E8F0;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.step-item.is-active .step-circle {
    background: linear-gradient(135deg, var(--clinic-primary), var(--clinic-primary-light));
    color: #fff;
    border-color: var(--clinic-primary-light);
    box-shadow: 0 0 0 .18rem rgba(var(--clinic-primary-rgb), 0.12), 0 2px 8px rgba(var(--clinic-primary-rgb), 0.12);
    transform: scale(1.08);
}

.step-item.is-done .step-circle {
    background: linear-gradient(135deg, #10B981, #34D399);
    color: #fff;
    border-color: #34D399;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.step-label {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    white-space: nowrap;
    transition: color .18s ease;
}

.step-item.is-active .step-label {
    color: var(--clinic-primary);
    font-weight: 900;
}

.step-item.is-done .step-label {
    color: #059669;
    font-weight: 800;
}

.step-line {
    flex: 1;
    height: 3px;
    min-width: 24px;
    margin-top: 20px;
    border-radius: 3px;
    background: #E2E8F0;
    transition: background .18s ease;
    position: relative;
    z-index: 1;
}

.step-line.is-filled {
    background: linear-gradient(90deg, #34D399, #10B981);
}

.step-line.is-half {
    background: linear-gradient(90deg, #10B981 0%, var(--clinic-primary) 50%, #E2E8F0 100%);
}

/* ======== LAYOUT ======== */
.wizard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    direction: rtl;
}

/* ======== SECTION HEADINGS ======== */
.section-heading {
    font-size: 13px;
    font-weight: 900;
    color: var(--clinic-heading);
    margin-bottom: 10px;
    direction: rtl;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-heading::before {
    content: '';
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, var(--clinic-primary), var(--clinic-primary-light));
    border-radius: 4px;
}

/* ======== PANELS ======== */
.wizard-panel {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--clinic-border);
    border-radius: var(--clinic-radius);
    box-shadow: var(--clinic-shadow), inset 0 1px 0 rgba(255,255,255,0.8);
    padding: 20px;
    margin-bottom: 18px;
    direction: rtl;
    text-align: right;
    transition: box-shadow .18s ease, border-color .18s ease;
}

.wizard-panel:hover {
    border-color: var(--clinic-border-strong);
    box-shadow: var(--clinic-shadow-hover), inset 0 1px 0 rgba(255,255,255,0.9);
}

.panel-title {
    font-size: 14px;
    font-weight: 900;
    color: var(--clinic-heading);
    margin-bottom: 14px;
    direction: rtl;
    text-align: right;
}

.time-note {
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
    direction: rtl;
}

/* ======== DOCTOR CARD ======== */
.doctor-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: rgba(248, 250, 252, 0.8);
    border-radius: var(--clinic-radius-sm);
    border: 1px solid var(--clinic-border);
    direction: rtl;
    text-align: right;
}

.doctor-avatar { flex-shrink: 0; }

.avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clinic-surface-strong), var(--clinic-border));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clinic-primary);
    font-size: 24px;
    border: 2px solid rgba(255,255,255,0.8);
}

.doctor-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.8);
}

.doctor-info { flex: 1; min-width: 0; direction: rtl; text-align: right; }

.doctor-name-row { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; direction: rtl; }
.doctor-name { font-size: 13px; font-weight: 900; color: var(--clinic-heading); }
.verified-badge { color: var(--clinic-primary); font-size: 12px; }
.doctor-specialty { display: block; font-size: 11px; font-weight: 700; color: #65758B; margin-bottom: 2px; direction: rtl; }
.doctor-council { display: block; font-size: 10px; color: #94A3B8; margin-bottom: 5px; direction: rtl; }

.doctor-rating { display: flex; align-items: center; gap: 4px; direction: rtl; }
.stars { color: #F59E0B; font-size: 11px; }
.rating-number { font-size: 11px; font-weight: 900; color: var(--clinic-heading); }
.rating-count { font-size: 10px; color: #94A3B8; }

.doctor-expand { color: #94A3B8; font-size: 11px; margin-top: 3px; cursor: pointer; }

.doctor-select-wrapper { margin-top: 10px; direction: rtl; }
.doctor-dropdown {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--clinic-border); border-radius: var(--clinic-radius-sm);
    background: rgba(255,255,255,0.8); color: var(--clinic-heading);
    font-family: 'Vazir-FD', sans-serif; font-size: 11px; font-weight: 700;
    cursor: pointer; appearance: auto; direction: rtl; text-align: right;
}
.doctor-dropdown:focus { border-color: var(--clinic-primary); outline: none; box-shadow: var(--clinic-focus-ring); }

/* ======== SERVICES ======== */
.services-list { display: flex; flex-direction: column; gap: 7px; direction: rtl; text-align: right; }

.service-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--clinic-border); border-radius: var(--clinic-radius-sm);
    cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
    background: rgba(255,255,255,0.6); direction: rtl; text-align: right;
}
.service-item:hover { border-color: var(--clinic-border-strong); background: rgba(var(--clinic-primary-rgb),0.04); }
.service-item.selected { border-color: var(--clinic-primary); background: rgba(224,242,254,0.6); box-shadow: 0 2px 8px rgba(var(--clinic-primary-rgb),0.1); }

.service-checkbox {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid #CBD5E1; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.2s ease;
}
.service-item.selected .service-checkbox { background: var(--clinic-primary); border-color: var(--clinic-primary); color: #fff; }
.service-checkbox i { font-size: 9px; opacity: 0; }
.service-item.selected .service-checkbox i { opacity: 1; }

.service-details { flex: 1; min-width: 0; direction: rtl; text-align: right; }
.service-name { display: block; font-size: 12px; font-weight: 800; color: var(--clinic-heading); margin-bottom: 1px; direction: rtl; }
.service-meta { display: flex; gap: 8px; font-size: 10px; color: #94A3B8; direction: rtl; }

.service-icon {
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(224,242,254,0.6); display: flex; align-items: center; justify-content: center;
    color: var(--clinic-primary); font-size: 13px; flex-shrink: 0;
}

/* ======== CALENDAR ======== */
.calendar-panel { margin-bottom: 14px; direction: rtl; text-align: right; }
.shamsi-calendar { direction: rtl; }

.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; direction: rtl; }
.cal-month-label { font-size: 14px; font-weight: 900; color: var(--clinic-heading); direction: rtl; }

.cal-nav-btn {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--clinic-border); background: rgba(255,255,255,0.8);
    color: var(--clinic-heading); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease; font-size: 12px;
}
.cal-nav-btn:hover { background: var(--clinic-primary); color: #fff; border-color: var(--clinic-primary); }

.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; direction: rtl; }
.calendar-weekdays span { text-align: center; font-size: 10px; font-weight: 800; color: #94A3B8; padding: 3px 0; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; direction: rtl; }

.cal-day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--clinic-heading);
    cursor: pointer; transition: background-color .15s ease, color .15s ease; direction: rtl;
}
.cal-day:hover:not(.empty):not(.disabled) { background: rgba(224,242,254,0.6); color: var(--clinic-primary); }
.cal-day.selected {
    background: linear-gradient(135deg, var(--clinic-primary), var(--clinic-primary-light));
    color: #fff; font-weight: 900; border-radius: 50%;
    box-shadow: 0 2px 8px rgba(var(--clinic-primary-rgb),0.3);
}
.cal-day.disabled { color: #CBD5E1; cursor: not-allowed; }
.cal-day.empty { cursor: default; }

/* ======== TIME SLOTS ======== */
.timeslots-panel { margin-bottom: 14px; direction: rtl; text-align: right; }
.timeslots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; direction: rtl; }

.timeslot-btn {
    padding: 8px 5px; border: 1px solid var(--clinic-border); border-radius: var(--clinic-radius-sm);
    background: rgba(255,255,255,0.7); color: var(--clinic-heading);
    font-size: 12px; font-weight: 800; font-family: 'Vazir-FD', sans-serif;
    cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; text-align: center; direction: rtl;
}
.timeslot-btn:hover { border-color: var(--clinic-primary-light); background: rgba(224,242,254,0.5); }
.timeslot-btn.selected {
    background: linear-gradient(135deg, var(--clinic-primary), var(--clinic-primary-light));
    border-color: var(--clinic-primary-light); color: #fff;
    box-shadow: 0 2px 10px rgba(var(--clinic-primary-rgb),0.3);
}

/* Booked slots */
.timeslot-btn.booked {
    background: repeating-linear-gradient(-45deg, rgba(254,226,226,0.5), rgba(254,226,226,0.5) 4px, rgba(254,226,226,0.3) 4px, rgba(254,226,226,0.3) 8px);
    border: 1.5px dashed #FCA5A5; color: #991B1B; cursor: not-allowed;
    position: relative; overflow: hidden; direction: rtl;
}
.timeslot-btn.booked::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.5); }
.timeslot-btn.booked:hover { transform: none; }

/* Expired slots */
.timeslot-btn.expired {
    background: repeating-linear-gradient(-45deg, rgba(245,245,244,0.8), rgba(245,245,244,0.8) 4px, rgba(231,229,228,0.5) 4px, rgba(231,229,228,0.5) 8px);
    border: 1.5px dashed #A8A29E; color: #78716C; cursor: not-allowed;
    position: relative; overflow: hidden; direction: rtl;
}
.timeslot-btn.expired::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.6); }
.timeslot-btn.expired:hover { transform: none; }

.slot-time-text { display: block; text-decoration: line-through; text-decoration-color: #DC2626; text-decoration-thickness: 1.5px; font-size: 11px; position: relative; z-index: 1; opacity: 0.6; direction: rtl; text-align: center; }

.slot-status-tag {
    display: inline-flex; align-items: center; gap: 3px;
    margin-top: 3px; padding: 1px 6px; background: #DC2626; color: #fff;
    border-radius: 5px; font-size: 8px; font-weight: 800;
    position: relative; z-index: 1; direction: rtl; text-align: center;
}
.slot-status-tag::before { content: '\1F512'; font-size: 7px; }
.expired-tag { background: #78716C !important; }
.expired-tag::before { content: '\1F550' !important; }

.slot-lock-icon { position: absolute; top: 5px; left: 5px; font-size: 9px; color: #DC2626; opacity: 0.5; z-index: 1; }

.timeslots-empty { text-align: center; padding: 28px 14px; color: #94A3B8; font-size: 11px; direction: rtl; }
.timeslots-empty i { display: block; font-size: 24px; color: #CBD5E1; margin-bottom: 8px; }

/* ======== NAVIGATION BUTTONS ======== */
.wizard-nav-buttons { display: flex; gap: 8px; direction: rtl; }

.wizard-btn {
    flex: 1; padding: 12px 18px; border-radius: var(--clinic-radius-sm); border: none;
    font-family: 'Vazir-FD', sans-serif; font-size: 13px; font-weight: 900;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    gap: 7px; transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; direction: rtl; text-align: center;
}

.btn-next {
    background: linear-gradient(135deg, var(--clinic-primary), var(--clinic-primary-hover));
    color: #fff; box-shadow: 0 2px 8px rgba(var(--clinic-primary-rgb),0.10);
}
.btn-next:hover { background: var(--clinic-primary-dark); box-shadow: var(--clinic-shadow-hover); transform: translateY(-1px); }

.btn-prev { background: rgba(241,245,249,0.8); color: var(--clinic-heading); }
.btn-prev:hover { background: rgba(226,232,240,0.8); }

.btn-submit {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff; flex: 2; box-shadow: 0 3px 12px rgba(16,185,129,0.25);
}
.btn-submit:hover { box-shadow: 0 6px 20px rgba(16,185,129,0.35); transform: translateY(-1px); }

/* ======== SUMMARY ======== */
.summary-panel { margin-bottom: 14px; direction: rtl; text-align: right; }
.summary-list { display: flex; flex-direction: column; direction: rtl; }

.summary-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--clinic-border);
    direction: rtl; text-align: right;
}
.summary-row:last-child { border-bottom: none; }

.summary-icon {
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(224,242,254,0.6); display: flex; align-items: center; justify-content: center;
    color: var(--clinic-primary); font-size: 12px; flex-shrink: 0;
}
.summary-content { flex: 1; min-width: 0; direction: rtl; text-align: right; }
.summary-label { display: block; font-size: 9px; font-weight: 700; color: #94A3B8; margin-bottom: 1px; direction: rtl; }
.summary-value { display: block; font-size: 11px; font-weight: 900; color: var(--clinic-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; }
.summary-total { color: var(--clinic-primary); font-size: 12px; }

.summary-total-section {
    margin-top: 12px; padding: 12px;
    background: rgba(var(--clinic-primary-rgb),0.04); border-radius: var(--clinic-radius-sm);
    display: flex; align-items: center; justify-content: space-between;
    direction: rtl; border: 1px solid var(--clinic-border);
}
.total-label { font-size: 11px; font-weight: 700; color: #65758B; }
.total-amount { font-size: 15px; font-weight: 900; color: var(--clinic-primary); }

/* ======== SUPPORT ======== */
.support-panel {
    background: linear-gradient(135deg, rgba(224,242,254,0.5), rgba(186,230,253,0.3));
    border: 1px solid var(--clinic-border); direction: rtl; text-align: right;
}
.support-panel p { font-size: 11px; color: #65758B; margin-bottom: 10px; direction: rtl; }
.support-contact { display: flex; flex-direction: column; gap: 7px; direction: rtl; }

.support-phone, .support-chat {
    display: flex; align-items: center; gap: 7px; padding: 8px 10px;
    border-radius: 8px; font-size: 11px; font-weight: 800; color: var(--clinic-heading);
    text-decoration: none; transition: background-color .18s ease, color .18s ease; direction: rtl; text-align: right;
}
.support-phone { background: rgba(255,255,255,0.7); }
.support-phone:hover { background: var(--clinic-primary); color: #fff; }
.support-chat { background: var(--clinic-primary); color: #fff; }
.support-chat:hover { background: var(--clinic-primary-hover); }
.support-phone i, .support-chat i { font-size: 12px; }

/* ======== PATIENT FORM MODAL ======== */
.wizard-modal-overlay {
    position: fixed; inset: 0; background: rgba(15,39,66,0.45);
    backdrop-filter: blur(4px); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; animation: fadeIn 0.2s ease; direction: rtl;
}

.wizard-modal {
    background: rgba(255,255,255,0.88); backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--clinic-border); border-radius: var(--clinic-radius);
    width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto;
    padding: 26px; box-shadow: var(--clinic-shadow-hover);
    direction: rtl; text-align: right;
}

.wizard-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 22px; direction: rtl;
}
.wizard-modal-header h3 { font-size: 17px; font-weight: 900; color: var(--clinic-heading); }

.modal-close {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--clinic-border); background: rgba(255,255,255,0.8);
    color: #65758B; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.modal-close:hover { background: #FEE2E2; color: #DC2626; border-color: #FCA5A5; }

.patient-form { display: flex; flex-direction: column; gap: 14px; direction: rtl; text-align: right; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.form-group { display: flex; flex-direction: column; gap: 4px; direction: rtl; text-align: right; }
.form-group label { font-size: 11px; font-weight: 800; color: var(--clinic-heading); }

.form-input {
    padding: 10px 12px; border: 1px solid var(--clinic-border); border-radius: var(--clinic-radius-sm);
    font-family: 'Vazir-FD', sans-serif; font-size: 12px; font-weight: 700;
    color: var(--clinic-heading); background: rgba(255,255,255,0.8);
    transition: border-color .18s ease, box-shadow .18s ease; direction: rtl; text-align: right;
}
.form-input:focus { outline: none; border-color: var(--clinic-primary); box-shadow: var(--clinic-focus-ring); }
.form-input::placeholder { color: #CBD5E1; font-weight: 600; }
.form-textarea { resize: vertical; min-height: 70px; }

/* ======== SUCCESS BANNER ======== */
.wizard-success-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 16px 20px; margin-bottom: 18px;
    background: rgba(236,253,245,0.8); backdrop-filter: blur(12px);
    border: 1px solid var(--clinic-border); border-radius: var(--clinic-radius-sm);
    animation: slideDown .18s ease; direction: rtl; text-align: right;
}

.success-content { display: flex; align-items: center; gap: 12px; direction: rtl; text-align: right; }
.success-content > i { font-size: 28px; color: #10B981; flex-shrink: 0; }
.success-content strong { display: block; font-size: 14px; font-weight: 900; color: #065F46; margin-bottom: 3px; }
.success-content p { font-size: 12px; color: #047857; margin: 0; line-height: 1.6; }
.appointment-id {
    display: inline-block; margin-top: 5px; padding: 2px 8px;
    background: rgba(255,255,255,0.8); border-radius: 6px;
    font-size: 10px; font-weight: 800; color: #065F46;
}

.success-close {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid #6EE7B7; background: rgba(255,255,255,0.8);
    color: #047857; display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: all 0.2s ease;
}
.success-close:hover { background: #FEE2E2; color: #DC2626; border-color: #FCA5A5; }

/* ======== CONFIRMATION MODAL ======== */
.wizard-modal-wide { max-width: 640px; }

.confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.confirm-section h4 {
    font-size: 12px; font-weight: 900; color: var(--clinic-primary);
    margin-bottom: 10px; padding-bottom: 6px;
    border-bottom: 2px solid rgba(224,242,254,0.6);
    direction: rtl; text-align: right;
}

.confirm-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; background: rgba(248,250,252,0.6);
    border-radius: 8px; margin-bottom: 6px; direction: rtl;
}
.confirm-row:last-child { margin-bottom: 0; }

.confirm-icon {
    width: 28px; height: 28px; border-radius: 7px;
    background: rgba(224,242,254,0.6); display: flex; align-items: center; justify-content: center;
    color: var(--clinic-primary); font-size: 11px; flex-shrink: 0;
}

.confirm-label { display: block; font-size: 9px; font-weight: 700; color: #94A3B8; direction: rtl; }
.confirm-val { display: block; font-size: 12px; font-weight: 900; color: var(--clinic-heading); direction: rtl; }

.confirm-total-box {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(224,242,254,0.5), rgba(186,230,253,0.3));
    border: 1px solid var(--clinic-border); border-radius: var(--clinic-radius-sm);
    direction: rtl;
}
.confirm-total-box span:first-child { font-size: 13px; font-weight: 800; color: var(--clinic-heading); }
.confirm-total-amount { font-size: 20px; font-weight: 900; color: var(--clinic-primary); }

@media (max-width: 575px) {
    .confirm-grid { grid-template-columns: 1fr; }
    .wizard-modal-wide { max-width: 100%; }
}

/* ======== ANIMATIONS ======== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
.fa-spin { animation: spin 1s linear infinite; }

/* ======== RESPONSIVE ======== */
@media (max-width: 1200px) { .wizard-layout { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr); } }
@media (max-width: 991px) {
    .wizard-layout { grid-template-columns: 1fr; }
    .steps-container { flex-wrap: wrap; gap: 5px; }
    .step-line { display: none; }
    .timeslots-grid { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 575px) {
    .wizard-page { padding: 16px 0 60px; }
    .wizard-panel { padding: 14px; border-radius: var(--clinic-radius-sm); }
    .timeslots-grid { grid-template-columns: repeat(3,1fr); }
    .form-row { grid-template-columns: 1fr; }
    .wizard-modal { padding: 18px; border-radius: var(--clinic-radius); }
}