/* ── ProBook v3 — Scoped Modern Design ── */
.probook {
    --mb-blue:      #1a6fc4;
    --mb-blue-dk:   #1a6fc4;
    --mb-blue-lt:   rgba(26,111,196,0.08);
    --mb-green:     #10b981;
    --mb-green-lt:  rgba(16,185,129,0.1);
    --mb-text:      #0f172a;
    --mb-muted:     #64748b;
    --mb-border:    #e2e8f0;
    --mb-bg:        #f8fafc;
    --mb-card:      #ffffff;
    --mb-radius:    14px;
    max-width: 800px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--mb-text) !important;
    box-sizing: border-box;
}
.probook *, .probook *::before, .probook *::after { box-sizing: border-box; }

/* ── Progress Bar ── */
.probook .mb-progress-wrap {
    margin-bottom:28px;
    background:var(--mb-card);
    border:1px solid var(--mb-border);
    border-radius:10px;
    padding:18px 20px;
    box-shadow:0 1px 3px rgba(15,23,42,.06);
}
.probook .mb-progress-labels {
    display:flex; justify-content:space-between;
    margin-bottom:12px;
}
.probook .mb-progress-label {
    font-size:11px; font-weight:700;
    color:var(--mb-muted); text-transform:uppercase;
    letter-spacing:.6px; transition:color .3s;
}
.probook .mb-progress-label.active { color:var(--mb-blue); }
.probook .mb-progress-label.done   { color:var(--mb-green); }

.probook .mb-progress-track {
    width:100%; height:6px;
    background:var(--mb-border);
    border-radius:99px; overflow:hidden;
    margin-bottom:10px;
}
.probook .mb-progress-bar {
    height:100%;
    background:var(--mb-blue);
    border-radius:99px;
    transition:width .45s cubic-bezier(.4,0,.2,1);
}

.probook .mb-progress-step-text {
    font-size:12px; color:var(--mb-muted);
    text-align:right; font-weight:500;
    margin:0;
}

/* ── Steps (hidden — replaced by progress bar) ── */
.probook .mb-steps { display:none; }
.probook .mb-steps { display:flex; align-items:center; margin-bottom:32px; padding:0 8px; }
.probook .mb-step  { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
.probook .mb-step:not(:last-child)::after {
    content:''; position:absolute; top:14px; left:56%;
    width:88%; height:2px; background:var(--mb-border); z-index:0; transition:background .4s;
}
.probook .mb-step.done:not(:last-child)::after   { background:var(--mb-green); }
.probook .mb-step.active:not(:last-child)::after { background:var(--mb-blue); }

.probook .mb-dot {
    width:30px; height:30px; border-radius:50%;
    background:var(--mb-card); border:2px solid var(--mb-border);
    color:var(--mb-muted); display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; position:relative; z-index:1; transition:all .3s;
    font-family:inherit !important;
}
.probook .mb-step.active .mb-dot {
    background:var(--mb-blue) !important; border-color:var(--mb-blue) !important;
    color:#fff !important; box-shadow:0 0 0 5px rgba(26,111,196,.15); transform:scale(1.1);
}
.probook .mb-step.done .mb-dot {
    background:var(--mb-green) !important; border-color:var(--mb-green) !important; color:#fff !important;
}
.probook .mb-slabel {
    font-size:10px; font-weight:700; color:var(--mb-muted);
    margin-top:7px; text-transform:uppercase; letter-spacing:.6px;
}
.probook .mb-step.active .mb-slabel { color:var(--mb-blue); }
.probook .mb-step.done   .mb-slabel { color:var(--mb-green); }

/* ── Panels ── */
.probook .mb-panel         { display:none !important; }
.probook .mb-panel.active  { display:block !important; animation:mbfade .25s ease; }
@keyframes mbfade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.probook .mb-panel-title { color:var(--mb-text) !important; margin:0 0 4px !important; padding:0; border:none; }
.probook .mb-panel-sub   { font-size:14px; color:var(--mb-muted); margin:0 0 28px; line-height:1.5; }

/* ── Doctor Cards ── */
.probook .mb-doc-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:16px; margin-bottom:32px;
}
/* 4+ doctors: switch to auto-fill so they wrap naturally */
.probook .mb-doc-grid:has(.mb-doc-card:nth-child(4)) {
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.probook .mb-doc-card {
    background:var(--mb-card) !important;
    border:1.5px solid var(--mb-border) !important;
    border-radius:var(--mb-radius) !important;
    padding:28px 20px 24px !important;
    text-align:center; cursor:pointer;
    transition:all .25s cubic-bezier(.4,0,.2,1);
    box-shadow:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
    position:relative; overflow:hidden;
}
.probook .mb-doc-card::before {
    content:''; position:absolute; top:0; left:0; right:0;
    height:3px; background:var(--mb-blue);
    opacity:0; transition:opacity .25s;
}
.probook .mb-doc-card:hover {
    border-color:rgba(26,111,196,.35) !important;
    transform:translateY(-3px);
    box-shadow:0 12px 40px rgba(15,23,42,.12),0 4px 12px rgba(15,23,42,.06) !important;
}
.probook .mb-doc-card:hover::before { opacity:1; }
.probook .mb-doc-card.picked {
    border-color:var(--mb-blue) !important;
    background:#ffffff !important;
    box-shadow:0 4px 16px rgba(15,23,42,.08),0 0 0 3px rgba(26,111,196,.12) !important;
}
.probook .mb-doc-card.picked::before { opacity:1; }

.probook .mb-doc-img {
    width:90px; height:90px; border-radius:50% !important;
    object-fit:cover; margin:0 auto 16px; display:block;
    box-shadow:0 4px 12px rgba(15,23,42,.15); border:3px solid #fff !important;
}
.probook .mb-doc-ini {
    width:90px; height:90px; border-radius:50%;
    background:var(--mb-blue);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:32px; font-weight:800; margin:0 auto 16px;
    box-shadow:0 4px 12px rgba(26,111,196,.3);
}
.probook .mb-doc-name { font-weight:700; font-size:15px; color:var(--mb-text); line-height:1.3; }
.probook .mb-doc-dur {
    font-size:12px; color:var(--mb-muted);
    background:var(--mb-bg); display:inline-block;
    padding:3px 10px; border-radius:20px; margin-top:8px;
}
.probook .mb-doc-tick {
    position:absolute; top:12px; right:12px;
    width:22px; height:22px; border-radius:50%;
    background:var(--mb-blue); color:#fff;
    display:none; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; box-shadow:0 2px 8px rgba(26,111,196,.4);
}
.probook .mb-doc-card.picked .mb-doc-tick { display:flex; }

/* ── Date & Time ── */
/* mb-datetime-layout is now a table element — no CSS grid needed */
.probook .mb-datetime-layout,
.probook .mb-datetime-layout tr,
.probook .mb-datetime-layout td {
    background:transparent !important;
    background-color:transparent !important;
}

/* ── Calendar ── */
.probook .mb-cal-card {
    background:#ffffff !important;
    background-color:#ffffff !important;
    border-radius:var(--mb-radius); padding:20px;
    box-shadow:0 4px 16px rgba(15,23,42,.08),0 1px 4px rgba(15,23,42,.04) !important;
    width:100% !important; box-sizing:border-box !important;
}
.probook .mb-cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.probook .mb-cal-title  { font-size:15px; font-weight:700; color:var(--mb-text); }
.probook .mb-cal-nav {
    width:32px; height:32px; border-radius:8px;
    background:var(--mb-bg) !important; border:1px solid var(--mb-border) !important;
    color:var(--mb-muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; transition:all .15s; line-height:1;
}
.probook .mb-cal-nav:hover { background:var(--mb-blue) !important; color:#fff !important; border-color:var(--mb-blue) !important; }
.probook .mb-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.probook .mb-cal-dow { text-align:center; font-size:10px; font-weight:700; color:var(--mb-muted); padding:4px 0 8px; text-transform:uppercase; letter-spacing:.5px; }
.probook .mb-cal-day { text-align:center; padding:8px 4px; font-size:13px; border-radius:8px; color:#cbd5e1; font-weight:500; transition:all .15s; cursor:default; line-height:1; }
.probook .mb-cal-day.other-month { color:#e2e8f0; }
.probook .mb-cal-day.past        { color:#e2e8f0; }
.probook .mb-cal-day.today       { color:var(--mb-blue); font-weight:800; }
.probook .mb-cal-day.available   { color:var(--mb-text); cursor:pointer; font-weight:700; }
.probook .mb-cal-day.available::after { content:''; display:block; width:4px; height:4px; border-radius:50%; background:var(--mb-green); margin:3px auto 0; }
.probook .mb-cal-day.available:hover  { background:var(--mb-blue-lt); color:var(--mb-blue); }
.probook .mb-cal-day.selected { background:var(--mb-blue) !important; color:#fff !important; font-weight:800; box-shadow:0 2px 8px rgba(26,111,196,.35); }
.probook .mb-cal-day.selected::after { background:rgba(255,255,255,.6); }

/* ── Time Slots ── */
.probook .mb-slots-card {
    background:var(--mb-card) !important; border:1px solid var(--mb-border);
    border-radius:var(--mb-radius); padding:20px;
    box-shadow:0 4px 16px rgba(15,23,42,.08),0 1px 4px rgba(15,23,42,.04);
    max-height:380px; overflow-y:auto;
}
.probook .mb-slots-title { font-size:15px; font-weight:700; color:var(--mb-text); margin:0 0 16px; }
.probook .mb-slots-group-label {
    font-size:10px; font-weight:800; color:var(--mb-muted);
    text-transform:uppercase; letter-spacing:.8px;
    margin:16px 0 8px; display:flex; align-items:center; gap:8px;
}
.probook .mb-slots-group-label:first-child { margin-top:0; }
.probook .mb-slots-group-label::after { content:''; flex:1; height:1px; background:var(--mb-border); }
.probook .mb-slots-group { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:4px; }
.probook .mb-slot {
    padding:10px 8px; border:1.5px solid var(--mb-border) !important;
    border-radius:10px; font-size:13px; font-weight:600;
    cursor:pointer; transition:all .15s;
    background:var(--mb-card) !important; color:var(--mb-text) !important; text-align:center;
}
.probook .mb-slot:hover { border-color:var(--mb-blue) !important; color:var(--mb-blue) !important; background:var(--mb-blue-lt) !important; transform:translateY(-1px); }
.probook .mb-slot.picked { background:var(--mb-blue) !important; color:#fff !important; border-color:var(--mb-blue) !important; box-shadow:0 3px 10px rgba(26,111,196,.3); }
.probook .mb-no-slots    { font-size:13px; color:var(--mb-muted); text-align:center; padding:20px 0; }
.probook .mb-slots-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; height:200px; gap:12px; color:var(--mb-muted); font-size:13px; text-align:center; }
.probook .mb-slots-placeholder svg { opacity:.25; }

/* ── Summary Bar ── */
.probook .mb-summary-bar {
    background:rgba(0,0,0,0.04);
    border:1px solid rgba(26,111,196,.15); border-radius:10px;
    padding:14px 18px; font-size:14px; color:#1e3a8a;
    margin-bottom:20px; display:flex; align-items:center; gap:10px; font-weight:500;
}

/* ── Form ── */
.probook .mb-form-card {
    background:var(--mb-card) !important; border:1px solid var(--mb-border);
    border-radius:var(--mb-radius); padding:24px;
    box-shadow:0 4px 16px rgba(15,23,42,.08),0 1px 4px rgba(15,23,42,.04); margin-bottom:16px;
}
.probook .mb-form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.probook .mb-fld { display:flex; flex-direction:column; gap:6px; }
.probook .mb-fld.full { grid-column:1/-1; }
.probook .mb-fld label { font-size:13px; font-weight:600; color:var(--mb-text); }
.probook .mb-fld input,
.probook .mb-fld select,
.probook .mb-fld textarea {
    padding:11px 14px !important; border:1.5px solid var(--mb-border) !important;
    border-radius:10px !important; font-size:14px !important; font-family:inherit !important;
    color:var(--mb-text) !important; transition:all .2s;
    background:var(--mb-bg) !important; outline:none !important;
    box-shadow:none !important; width:100%;
}
.probook .mb-fld input:focus,
.probook .mb-fld select:focus,
.probook .mb-fld textarea:focus {
    border-color:var(--mb-blue) !important; background:#fff !important;
    box-shadow:0 0 0 4px rgba(26,111,196,.08) !important;
}
.probook .mb-fld textarea { min-height:80px; resize:vertical; }
.probook .mb-req { color:#ef4444; }

/* ── Terms ── */
.probook .mb-fld-terms { grid-column:1/-1; }
.probook .mb-terms-box { background:var(--mb-bg); border:1.5px solid var(--mb-border); border-radius:10px; padding:16px; }
.probook .mb-terms-heading { font-size:13px; font-weight:700; color:var(--mb-text); margin:0 0 10px; }
.probook .mb-terms-label   { display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.probook .mb-terms-label input[type=checkbox] { width:18px !important; height:18px !important; margin-top:1px; flex-shrink:0; accent-color:var(--mb-blue); cursor:pointer; }
.probook .mb-terms-body { font-size:13px; color:var(--mb-muted); line-height:1.6; }
.probook .mb-terms-body a { color:var(--mb-blue); text-decoration:underline; }
.probook .mb-fld-check label { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:14px; font-weight:500; color:var(--mb-text); line-height:1.5; }
.probook .mb-fld-check input { width:17px !important; height:17px !important; margin-top:2px; accent-color:var(--mb-blue); }

/* ── Error ── */
.probook .mb-err { background:#fef2f2; color:#991b1b; border-left:4px solid #ef4444; border-radius:8px; padding:12px 16px; font-size:14px; margin-bottom:14px; display:none; }

/* ── Navigation ── */
.probook .mb-nav { display:flex; justify-content:space-between; align-items:center; margin-top:24px; }
.probook .mb-back {
    padding:11px 22px !important; border-radius:10px !important;
    font-size:14px !important; font-weight:600 !important;
    cursor:pointer; border:1.5px solid var(--mb-border) !important;
    background:transparent !important; color:var(--mb-muted) !important;
    font-family:inherit !important; transition:all .2s; box-shadow:none !important;
}
.probook .mb-back:hover { border-color:var(--mb-blue) !important; color:var(--mb-blue) !important; background:var(--mb-blue-lt) !important; }
.probook .mb-next {
    padding:12px 28px !important; border-radius:10px !important;
    font-size:14px !important; font-weight:700 !important; cursor:pointer;
    border:none !important;
    background:var(--mb-blue) !important;
    color:#fff !important; font-family:inherit !important; transition:all .2s;
    box-shadow:0 4px 14px rgba(26,111,196,.35) !important; letter-spacing:.1px;
}
.probook .mb-next:hover    { transform:translateY(-1px); box-shadow:0 6px 20px rgba(26,111,196,.45) !important; }
.probook .mb-next:disabled { background:#e2e8f0 !important; color:#94a3b8 !important; box-shadow:none !important; transform:none; cursor:not-allowed; }

/* ── Success ── */
.probook .mb-success { text-align:center; padding:64px 20px; }
.probook .mb-success-icon {
    width:80px; height:80px; border-radius:50%;
    background:var(--mb-green-lt); color:var(--mb-green);
    font-size:36px; display:flex; align-items:center; justify-content:center;
    margin:0 auto 24px; box-shadow:0 0 0 12px rgba(16,185,129,.06);
}
.probook .mb-success h3 { font-size:26px; font-weight:800; color:var(--mb-text); margin-bottom:12px; letter-spacing:-.3px; }
.probook .mb-success p  { color:var(--mb-muted); font-size:15px; line-height:1.7; max-width:400px; margin:0 auto; }

/* ── Spinner ── */
.probook .mb-spin { display:inline-block; width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; vertical-align:middle; margin-right:6px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Responsive — Tablet & Mobile ── */
@media (max-width:700px) {
    .probook .mb-datetime-layout { flex-direction:column !important; }
    .probook .mb-datetime-layout > div { width:100% !important; flex:none !important; }
    .probook .mb-cal-card,
    .probook .mb-slots-card {
        width:100% !important;
        box-sizing:border-box !important;
    }
}

/* ── Responsive — Mobile ── */
@media (max-width:540px) {
    /* Outer padding */
    .probook                     { padding:0 14px; }

    /* Progress bar */
    .probook .mb-progress-wrap   { padding:12px 14px; margin-bottom:20px; }
    .probook .mb-progress-labels { display:none; } /* hide labels on mobile — too cramped */
    .probook .mb-progress-step-text { font-size:12px; font-weight:600; color:var(--mb-blue); }

    /* Panel */
    .probook .mb-panel-title     { font-size:21px; }
    .probook .mb-panel-sub       { font-size:13px; margin-bottom:18px; }

    /* Doctor cards — single column on mobile */
    .probook .mb-doc-grid        { grid-template-columns:1fr; gap:12px; max-width:340px; margin-left:auto; margin-right:auto; }
    .probook .mb-doc-grid:has(.mb-doc-card:nth-child(4)) { grid-template-columns:1fr 1fr; max-width:100%; }
    .probook .mb-doc-card        { padding:20px 16px; display:flex; align-items:center; gap:16px; text-align:left; }
    .probook .mb-doc-card::before { height:0; width:3px; top:0; left:0; bottom:0; border-radius:var(--mb-radius) 0 0 var(--mb-radius); }
    .probook .mb-doc-img         { width:56px; height:56px; margin:0; flex-shrink:0; }
    .probook .mb-doc-ini         { width:56px; height:56px; font-size:20px; margin:0; flex-shrink:0; }
    .probook .mb-doc-name        { font-size:14px; }
    .probook .mb-doc-dur         { display:inline-block; font-size:11px; margin-top:5px; }
    .probook .mb-doc-tick        { top:10px; right:10px; }

    /* Calendar */
    .probook .mb-cal-card        { padding:14px 10px; }
    .probook .mb-cal-day         { padding:8px 3px; font-size:13px; border-radius:6px; }
    .probook .mb-cal-dow         { font-size:9px; padding:3px 0 8px; letter-spacing:0; }
    .probook .mb-cal-title       { font-size:14px; }
    .probook .mb-cal-nav         { width:30px; height:30px; font-size:15px; }
    .probook .mb-cal-grid        { gap:2px; }

    /* Time slots — full width single column for easy tapping */
    .probook .mb-slots-card      { max-height:none; padding:14px 12px; }
    .probook .mb-slots-group     { grid-template-columns:1fr; gap:8px; }
    .probook .mb-slot            { padding:13px 12px; font-size:14px; border-radius:8px; }
    .probook .mb-slots-title     { font-size:14px; margin-bottom:12px; }

    /* Summary bar */
    .probook .mb-summary-bar     { font-size:13px; padding:12px 14px; flex-direction:column; align-items:flex-start; gap:3px; line-height:1.6; }

    /* Form */
    .probook .mb-form-card       { padding:16px 14px; }
    .probook .mb-form-row        { grid-template-columns:1fr; gap:12px; margin-bottom:12px; }
    .probook .mb-fld input,
    .probook .mb-fld select,
    .probook .mb-fld textarea    { padding:13px 14px !important; font-size:16px !important; } /* 16px prevents iOS zoom */
    .probook .mb-fld label       { font-size:14px; }

    /* Terms */
    .probook .mb-terms-box       { padding:14px 12px; }
    .probook .mb-terms-body      { font-size:13px; line-height:1.7; }
    .probook .mb-terms-label     { gap:10px; }
    .probook .mb-terms-label input[type=checkbox] { width:20px !important; height:20px !important; }

    /* Navigation — full width stacked */
    .probook .mb-nav             { flex-direction:column-reverse; gap:10px; margin-top:20px; }
    .probook .mb-next            { width:100% !important; text-align:center; padding:15px !important; font-size:15px !important; border-radius:10px !important; }
    .probook .mb-back            { width:100% !important; text-align:center; padding:13px !important; font-size:14px !important; border-radius:10px !important; }

    /* Success */
    .probook .mb-success         { padding:40px 16px; }
    .probook .mb-success h3      { font-size:22px; }
    .probook .mb-success-icon    { width:68px; height:68px; font-size:30px; }
}