/* ============================================
   TutorHub — Booking Modal Styles
   ============================================ */

#bm-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15,23,42,.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; animation: bmFadeIn .2s ease;
}

@keyframes bmFadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes bmSlideUp { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:translateY(0) } }

#bm-modal {
    background: var(--white); border-radius: var(--radius-xl);
    width: 100%; max-width: 520px; max-height: 90vh;
    overflow-y: auto; position: relative;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    animation: bmSlideUp .25s ease;
}

#bm-close {
    position: sticky; top: 12px; float: right; margin: 12px 12px 0 0;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--gray-100); border: none; font-size: 1.2rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); transition: var(--transition); z-index: 10;
    line-height: 1;
}
#bm-close:hover { background: var(--gray-200); color: var(--text); }

/* ─── Header ──────────────────────────────── */
#bm-header { padding: 20px 24px 0; }

.bm-tutor-info {
    display: flex; gap: 14px; align-items: center; margin-bottom: 20px;
}
.bm-avatar {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--primary-light); flex-shrink: 0;
}
.bm-title { font-size: 1rem; font-weight: 700; color: var(--gray-900); margin-bottom: 2px; }
.bm-tagline { font-size: .78rem; color: var(--text-muted); }

/* ─── Step indicators ─────────────────────── */
.bm-steps {
    display: flex; align-items: center; margin-bottom: 20px;
    padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.bm-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.bm-step-num {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; border: 2px solid var(--border);
    color: var(--text-muted); background: var(--white); transition: var(--transition);
}
.bm-step span { font-size: .7rem; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.bm-step.active .bm-step-num { border-color: var(--primary); background: var(--primary); color: var(--white); }
.bm-step.active span { color: var(--primary); font-weight: 600; }
.bm-step.done .bm-step-num { border-color: var(--success); background: var(--success); color: var(--white); }
.bm-step-line { flex: 1; height: 2px; background: var(--border); margin: 0 6px 18px; transition: var(--transition); }
.bm-step-line.done { background: var(--success); }

/* ─── Body ────────────────────────────────── */
#bm-body { padding: 4px 24px 24px; }
.bm-step-body { display: flex; flex-direction: column; gap: 16px; }

.bm-field { display: flex; flex-direction: column; gap: 6px; }
.bm-field label { font-size: .82rem; font-weight: 600; color: var(--gray-700); }
.bm-field input,
.bm-field select,
.bm-field textarea {
    padding: 10px 13px; border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-sm); font-size: .9rem; color: var(--text);
    background: var(--white); font-family: var(--font); transition: var(--transition);
    width: 100%;
}
.bm-field input:focus,
.bm-field select:focus,
.bm-field textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(117,79,254,.1);
}
.bm-field textarea { min-height: 70px; resize: none; }

/* ─── Radio group ─────────────────────────── */
.bm-radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.bm-radio {
    flex: 1; min-width: 100px; display: flex; align-items: center;
    gap: 10px; padding: 11px 14px; border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
}
.bm-radio:hover { border-color: var(--primary); background: var(--primary-light); }
.bm-radio.selected { border-color: var(--primary); background: var(--primary-light); }
.bm-radio input { display: none; }
.bm-radio-content { display: flex; flex-direction: column; gap: 1px; }
.bm-radio-content strong { font-size: .85rem; color: var(--gray-900); }
.bm-radio-content span { font-size: .75rem; color: var(--text-muted); }
.bm-radio.selected .bm-radio-content strong { color: var(--primary); }

/* ─── Price summary ───────────────────────── */
.bm-price-summary {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg); border-radius: var(--radius-sm);
    padding: 12px 16px; font-size: .875rem; color: var(--text-muted);
}
.bm-price-summary strong { font-size: 1.1rem; color: var(--primary); font-weight: 800; }

/* ─── Summary box ─────────────────────────── */
.bm-summary-box {
    background: var(--bg); border-radius: var(--radius-sm); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.bm-summary-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .85rem;
}
.bm-summary-row span { color: var(--text-muted); }
.bm-summary-row strong { color: var(--gray-900); }

/* ─── Date pills ──────────────────────────── */
.bm-date-pills {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: thin;
}
.bm-date-pill {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 8px 14px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: var(--white);
    cursor: pointer; transition: var(--transition);
}
.bm-date-pill:hover { border-color: var(--primary); background: var(--primary-light); }
.bm-date-pill.active { border-color: var(--primary); background: var(--primary); color: var(--white); }
.bm-date-day { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.bm-date-pill.active .bm-date-day { opacity: 1; }
.bm-date-num { font-size: 1.1rem; font-weight: 800; }

/* ─── Time slots ──────────────────────────── */
.bm-slot-group { margin-top: 12px; }
.bm-slot-label { font-size: .75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.bm-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.bm-slot {
    padding: 8px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    background: var(--white); font-size: .875rem; font-weight: 600;
    cursor: pointer; transition: var(--transition); color: var(--text);
}
.bm-slot:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.bm-slot.active { border-color: var(--primary); background: var(--primary); color: var(--white); }

/* ─── Spinner ─────────────────────────────── */
.bm-spinner {
    width: 36px; height: 36px; border: 3px solid var(--border);
    border-top-color: var(--primary); border-radius: 50%;
    animation: bmSpin .7s linear infinite; margin: 0 auto;
}
@keyframes bmSpin { to { transform: rotate(360deg) } }

/* ─── Responsive ──────────────────────────── */
@media (max-width: 540px) {
    #bm-modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    #bm-overlay { align-items: flex-end; padding: 0; }
    .bm-radio-group { flex-direction: column; }
}

/* ─── Flexible chips ──────────────────────── */
.bm-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.bm-chip {
    padding: 8px 14px; border: 1.5px solid var(--border);
    border-radius: var(--radius-pill); background: var(--white);
    font-size: .82rem; font-weight: 500; cursor: pointer;
    transition: var(--transition); color: var(--text);
}
.bm-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.bm-chip.active { border-color: var(--primary); background: var(--primary); color: var(--white); }