/* ============================================
DOCTOR MODAL - Accessible
============================================ */
.doctor-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
animation: fadeIn 0.2s forwards;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
z-index: var(--z-overlay);
}
.modal-container {
position: relative;
width: 90%;
max-width: 800px;
max-height: 90vh;
overflow-y: auto;
background: var(--med-bg);
border-radius: 24px;
box-shadow: var(--med-shadow-lg);
z-index: var(--z-modal);
}
.modal-header {
padding: 1.5rem 2rem;
border-bottom: 1px solid var(--med-border);
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
background: var(--med-bg);
border-radius: 24px 24px 0 0;
z-index: 1;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
color: var(--med-text-muted);
cursor: pointer;
padding: 0;
width: var(--touch-target-min);
height: var(--touch-target-min);
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
border-radius: 4px;
}
.modal-close:hover {
color: var(--med-text);
background: var(--med-bg-light);
}
.modal-close:focus-visible {
outline: 3px solid var(--med-focus);
outline-offset: 2px;
}
.modal-content {
padding: 2rem;
color: var(--med-text);
}
.modal-footer {
padding: 1.5rem 2rem;
border-top: 1px solid var(--med-border);
display: flex;
justify-content: flex-end;
gap: 1rem;
position: sticky;
bottom: 0;
background: var(--med-bg);
border-radius: 0 0 24px 24px;
}
body.modal-open > *:not(.doctor-modal) {
pointer-events: none;
opacity: 0.5;
user-select: none;
}
.doctor-modal {
pointer-events: auto;
}