.appointment-page { padding:32px 0 64px; color:#353550; }
.appointment-page [hidden] { display:none!important; }
.appointment-heading { padding:10px 0 30px; }
.appointment-heading>span,.appointment-kicker { color:#188cb8; font-size:12px; font-weight:600; letter-spacing:1.1px; }
.appointment-heading h1 { font-size:clamp(30px,3.2vw,44px); letter-spacing:-1px; margin:12px 0; line-height:1.2; }
.appointment-heading p,.appointment-step>p { color:#718093; font-size:16px; line-height:1.7; }
.appointment-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:32px; align-items:start; }
.appointment-summary { background:#eaf4f9; border:1px solid #deebf2; border-radius:22px; padding:32px; position:sticky; top:110px; overflow:hidden; }
#appointment-intro>img { width:100%; height:260px; object-fit:contain; margin-bottom:20px; }
.appointment-summary h2 { font-size:27px; line-height:1.4; margin:12px 0; }
.appointment-summary p { font-size:15px; line-height:1.7; color:#62778a; }
.appointment-summary a { color:#1588b9; font-weight:500; }
#appointment-doctor-summary { border-top:1px solid #d4e5ed; margin-top:24px; padding-top:24px; }
#appointment-doctor-summary>img { display:block; width:160px; height:180px; object-fit:cover; object-position:top; border-radius:16px; margin:0 0 20px; background:#fff; }
#appointment-doctor-summary h3 { font-size:23px; margin:10px 0 6px; }
.appointment-note { display:flex; align-items:flex-start; gap:12px; border-top:1px solid #d4e5ed; margin-top:24px; padding-top:22px; }
.appointment-note i { font-size:24px; color:#1c96c5; }
.appointment-note p { font-size:13px; margin:0; }
.appointment-panel { background:#fff; border:1px solid #e5eaf1; border-radius:22px; padding:32px; min-width:0; }
.appointment-steps { display:flex; justify-content:space-between; gap:10px; list-style:none; padding:0; margin:0 0 20px; }
.appointment-steps li { display:flex; align-items:center; gap:9px; font-size:14px; color:#8795a6; }
.appointment-steps b { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#f1f4f8; font-size:14px; }
.appointment-steps [aria-current],.appointment-steps .is-complete { color:#1687b5; }
.appointment-steps [aria-current] b,.appointment-steps .is-complete b { background:#2099cd; color:white; }
.appointment-progress { height:4px; background:#edf3f7; border-radius:10px; margin-bottom:30px; }
.appointment-progress span { display:block; width:33.333%; height:100%; background:#2099cd; border-radius:10px; transition:width .32s; }
.appointment-step h2 { font-size:27px; margin:10px 0; outline:none; }
.appointment-step>p { font-size:14px; margin-bottom:24px; }
.appointment-clinics,.appointment-doctors { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.appointment-choice { position:relative; margin:0; cursor:pointer; }
.appointment-choice>input { position:absolute; opacity:0; width:1px; height:1px; }
.appointment-choice-body { display:flex; align-items:center; gap:12px; height:100%; min-height:94px; padding:16px; border:1px solid #e1e8f0; background:#fafbfd; border-radius:13px; transition:border-color .2s,background .2s; }
.appointment-choice-body>span { flex:1; min-width:0; }
.appointment-choice strong { display:block; font-size:15px; font-weight:500; line-height:1.5; }
.appointment-choice small { display:block; font-size:12px; color:#76879a; margin-top:5px; }
.appointment-choice img { width:48px; height:58px; object-fit:cover; object-position:top; border-radius:8px; }
.appointment-choice i { color:#2099cd; }
.appointment-choice input:checked+.appointment-choice-body { border-color:#229bce; background:#edf8fc; box-shadow:0 0 0 1px #229bce; }
.appointment-choice input:focus-visible+.appointment-choice-body { outline:3px solid #2099cd55; outline-offset:3px; }
.appointment-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.appointment-fields>label { display:flex; flex-direction:column; gap:8px; font-size:14px; margin:0; }
.appointment-wide { grid-column:1/-1; }
.appointment-fields input:not([type=radio]) { width:100%; min-width:0; min-height:52px; padding:12px 15px; border:1px solid #e0e7ef; border-radius:11px; color:#353550; background:#f7f8fb; font-size:16px; }
.appointment-fields input:focus { outline:2px solid #2099cd66; border-color:#2099cd; background:white; }
.appointment-time { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; border:0; }
.appointment-time legend { float:none; font-size:14px; margin:0 0 10px; }
.appointment-time label { flex:1; margin:0; position:relative; }
.appointment-time input { position:absolute; opacity:0; }
.appointment-time label span { display:block; text-align:center; border:1px solid #e1e8ef; padding:12px 8px; border-radius:10px; font-size:13px; }
.appointment-time input:checked+span { color:#1385b2; background:#edf8fc; border-color:#2099cd; }
.appointment-time input:focus-visible+span { outline:2px solid #2099cd; outline-offset:2px; }
.appointment-consents { display:grid; gap:14px; padding-top:24px; }
.appointment-consents label { display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.65; margin:0; }
.appointment-consents input { flex-shrink:0; width:18px; height:18px; margin-top:3px; accent-color:#2099cd; }
.appointment-document { padding:0; border:0; background:none; color:#1689b8; font:inherit; text-align:left; text-decoration:underline; text-underline-offset:3px; }
.appointment-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }
.appointment-actions button { border:0; padding:14px 22px; border-radius:11px; font-size:15px; font-weight:500; background:#2099cd; color:#fff; }
.appointment-actions .appointment-back { margin-right:auto; background:#f0f4f8; color:#506579; }
.appointment-actions button:disabled { opacity:.5; cursor:not-allowed; }
.appointment-field-error,#appointment-status { color:#b34c41; font-size:13px; line-height:1.5; }
.appointment-field-error:empty,#appointment-status:empty { display:none; }
#appointment-status { margin:18px 0 0; }
.appointment-unavailable { grid-column:1/-1; background:#f5f8fb; border-radius:12px; padding:20px; font-size:15px; line-height:1.8; }
.appointment-success { text-align:center; padding:36px 8px; outline:none; }
.appointment-check { width:84px; height:84px; border-radius:50%; background:#e6f6f1; color:#289e82; display:grid; place-items:center; font-size:45px; margin:0 auto 28px; animation:appointment-pop .5s ease-out; }
.appointment-success h2 { font-size:30px; line-height:1.35; margin:16px 0; }
.appointment-success p { color:#6c7e91; font-size:15px; line-height:1.8; }
.appointment-reference { background:#f0f8fc; border:1px dashed #9accdf; border-radius:14px; padding:22px 12px; margin:28px 0; }
.appointment-reference span { display:block; font-size:13px; color:#687e90; }
.appointment-reference strong { display:block; font-size:clamp(16px,2vw,23px); letter-spacing:1px; color:#1684af; margin:12px 0; overflow-wrap:anywhere; }
.appointment-copy { border:0; background:transparent; color:#1684af; font-size:13px; }
.appointment-success>a { color:#1684af; font-weight:500; }
.appointment-dialog { width:calc(100% - 32px); max-width:700px; max-height:85vh; padding:28px; border:1px solid #dce8ef; border-radius:18px; color:#353550; box-shadow:0 24px 100px #17364840; }
.appointment-dialog::backdrop { background:#14283988; backdrop-filter:blur(3px); }
.appointment-dialog-head { display:flex; align-items:flex-start; gap:20px; }
.appointment-dialog h2 { font-size:23px; line-height:1.4; }
.appointment-dialog-head button { margin-left:auto; border:0; background:#edf4f8; border-radius:8px; min-width:36px; font-size:25px; }
.appointment-dialog-body p { font-size:15px; line-height:1.8; color:#5e7084; }
.appointment-dialog-done { border:0; border-radius:9px; padding:12px 18px; background:#2099cd; color:white; }
@keyframes appointment-pop { from { transform:scale(.6); opacity:0; } to { transform:scale(1); opacity:1; } }
@media(max-width:991px){.appointment-layout{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:20px}.appointment-panel,.appointment-summary{padding:24px}.appointment-clinics,.appointment-doctors{grid-template-columns:1fr}}
@media(max-width:767px){.appointment-page{padding:20px 0 40px}.appointment-layout{grid-template-columns:1fr}.appointment-summary{position:static}.appointment-panel{padding:24px 20px}.appointment-summary #appointment-intro>img{display:none}.appointment-summary h2{font-size:23px}.appointment-steps li{font-size:12px;gap:6px}.appointment-steps b{width:28px;height:28px}.appointment-fields{gap:16px}.appointment-actions button{padding:13px 16px;font-size:14px}.appointment-dialog{padding:22px}.appointment-time label span{font-size:12px}.appointment-success h2{font-size:26px}#appointment-doctor-summary>img{width:100px;height:120px}}
@media(prefers-reduced-motion:reduce){.appointment-page *{animation:none!important;transition:none!important}}
.appointment-manage-open{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:1px solid #b9dfed;background:#fff;color:#087ca6;border-radius:12px;padding:15px 17px;margin:22px 0;font-family:inherit;font-size:15px;font-weight:600;line-height:1.5;cursor:pointer;text-align:left}
.appointment-manage-open:hover{background:#f5fcff;border-color:#219bcd}
.appointment-manage form{display:grid;gap:12px}.appointment-manage [hidden]{display:none!important}.appointment-manage label{font-size:15px;font-weight:600;color:#34354f}.appointment-manage input,.appointment-manage select{width:100%;min-height:48px;border:1px solid #dce6ef;border-radius:10px;padding:12px;background:#f7f9fc;font:inherit;font-size:16px;color:#34354f}.appointment-manage input:focus,.appointment-manage select:focus{outline:2px solid #229bcd;outline-offset:2px}.appointment-manage form button{border:0;border-radius:10px;padding:13px 18px;background:#229bcd;color:white;font-size:15px;font-weight:600;cursor:pointer}.appointment-manage form button:disabled{opacity:.6;cursor:wait}.appointment-manage form .appointment-manage-restart{background:#eef6fa;color:#087ca6}.appointment-manage fieldset{border:0;padding:0;margin:0;display:grid;gap:12px}.appointment-manage-details{background:#eef8fc;padding:16px;border-radius:12px;white-space:pre-line;color:#34354f;font-size:16px!important}.appointment-manage-policy,#appointment-manage-status{font-size:15px;line-height:1.65}.appointment-manage-open:focus-visible{outline:2px solid #087ca6;outline-offset:3px}
/* Shared appointment calendar; native date value and validation are preserved. */
.appointment-calendar{display:block;position:relative;min-width:0}
.appointment-page .appointment-calendar-source{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;min-width:0!important;padding:0!important;border:0!important;opacity:0;pointer-events:none}
.appointment-page .appointment-calendar button{font-family:inherit;cursor:pointer;line-height:1.4;box-sizing:border-box}
.appointment-page .appointment-calendar .appointment-calendar-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:12px 15px;border:1px solid #e0e7ef;border-radius:11px;background:#f7f8fb;color:#718093;font-size:16px;font-weight:400;text-align:left}
.appointment-page .appointment-calendar-trigger.has-value{color:#353550}
.appointment-calendar-trigger>span:last-child{color:#168cb9;font-size:24px;line-height:1}
.appointment-page .appointment-calendar button:focus-visible{outline:2px solid #2099cd;outline-offset:3px}
.appointment-page .appointment-calendar-trigger[aria-expanded=true]{border-color:#2099cd;background:#fff;box-shadow:0 0 0 3px #2099cd15}
.appointment-calendar-panel{display:block;width:340px;max-width:100%;box-sizing:border-box;margin-top:10px;padding:16px;border:1px solid #dceaf2;border-radius:16px;background:#fff;box-shadow:0 10px 28px #174b7010;animation:appointment-pop .18s ease-out}
.appointment-calendar-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.appointment-calendar-head strong{font-size:17px;font-weight:600;color:#353550;text-transform:capitalize}
.appointment-page .appointment-calendar-head button{width:36px;height:36px;padding:0;border:0;border-radius:10px;background:#edf7fb;color:#168cb9;font-size:25px;font-weight:400}
.appointment-calendar-weekdays,.appointment-calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.appointment-calendar-weekdays{margin-bottom:7px;color:#718093;font-size:13px;font-weight:500;line-height:26px}
.appointment-page .appointment-calendar-days button{display:grid;place-items:center;width:100%;min-height:38px;padding:4px 0;border:1px solid transparent;border-radius:10px;background:transparent;color:#353550;font-size:15px;font-weight:500}
.appointment-page .appointment-calendar-days button:not(:disabled):hover{background:#eaf6fc;color:#087ca6}
.appointment-page .appointment-calendar-days [aria-current=date]{border-color:#9dd3e8;color:#087ca6}
.appointment-page .appointment-calendar-days [aria-pressed=true],.appointment-page .appointment-calendar-days [aria-pressed=true]:hover{background:#2099cd;color:#fff;border-color:#2099cd;box-shadow:0 3px 8px #2099cd25}
.appointment-page .appointment-calendar button:disabled{opacity:.35;cursor:not-allowed}
.appointment-calendar-foot{display:flex;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid #edf2f6}
.appointment-page .appointment-calendar-foot button{padding:7px 10px;border:0;border-radius:8px;background:#eff8fc;color:#1286b3;font-size:14px;font-weight:500}
/* Shared confirmation / verified appointment cards. */
.appointment-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;text-align:left;min-width:0}
.appointment-success-selection{margin:24px 0 28px}
.appointment-manage-details.appointment-detail-grid{padding:0;background:none;white-space:normal;margin:12px 0 6px;border-radius:0}
.appointment-detail-card{display:flex;align-items:center;gap:13px;min-width:0;padding:18px;background:#f7fafc;border:1px solid #e0ebf2;border-radius:16px}
.appointment-detail-icon{flex:0 0 38px;width:38px;height:38px;border-radius:11px;background:#e7f4fb;color:#1c95c4;display:grid;place-items:center;font-size:21px}
.appointment-detail-content{min-width:0;display:flex;flex-direction:column;gap:5px}
.appointment-detail-label{display:block;font-size:12px;line-height:1.5;font-weight:500;color:#74899b;letter-spacing:.15px}
.appointment-detail-value{display:block;font-size:16px;line-height:1.5;font-weight:600;color:#34445b;overflow-wrap:anywhere}
.appointment-detail-caption{display:block;font-size:13px;line-height:1.5;color:#71869a}
.appointment-detail-doctor,.appointment-detail-clinic{grid-column:1/-1}
.appointment-detail-doctor{background:linear-gradient(115deg,#edf8fc,#f8fcfe);border-color:#d6ebf4;padding:16px 18px;gap:18px}
.appointment-detail-doctor .appointment-detail-value{font-size:19px;color:#24455d}
.appointment-detail-avatar{position:relative;display:grid;place-items:center;flex:0 0 76px;width:76px;height:88px;background:#deeff7;border-radius:13px;overflow:hidden;color:#3998bb;font-size:32px}
.appointment-detail-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.appointment-detail-meta{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;border-radius:14px;border:1px solid #d7ebf4;background:#eff8fc}
.appointment-detail-meta>div{min-width:0}.appointment-detail-meta>div:last-child:not(:first-child){text-align:right}
.appointment-detail-number{display:block;font-size:23px;font-weight:700;line-height:1.4;letter-spacing:.8px;color:#158db9}
@media(max-width:480px){.appointment-detail-grid{gap:10px}.appointment-detail-card{padding:14px;gap:10px}.appointment-detail-card:not(.appointment-detail-doctor):not(.appointment-detail-clinic){align-items:flex-start;flex-direction:column}.appointment-detail-value{font-size:15px}.appointment-detail-doctor .appointment-detail-value{font-size:17px}.appointment-detail-avatar{flex-basis:64px;width:64px;height:76px}.appointment-detail-meta{align-items:flex-start;flex-direction:column;gap:10px}.appointment-detail-meta>div:last-child:not(:first-child){text-align:left}}
/* Mobile clinic disclosure uses the existing radios and selection flow. */
.appointment-clinic-trigger{display:none}
@media(max-width:767px){
 .appointment-clinic-trigger:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:16px 18px;border:1px solid #d8e5ef;border-radius:13px;background:#f8fbfd;color:#34435d;text-align:left;font:inherit;font-size:15px;line-height:1.5;cursor:pointer}
 .appointment-clinic-trigger span{min-width:0;overflow-wrap:anywhere}.appointment-clinic-trigger i{color:#2099cd;font-size:21px;flex-shrink:0}
 .appointment-clinic-trigger[aria-expanded=true]{border-color:#2099cd;background:#eef8fc}.appointment-clinic-trigger[aria-expanded=true] i{transform:rotate(180deg)}
 .appointment-clinic-trigger:focus-visible{outline:3px solid #2099cd55;outline-offset:3px}
 .appointment-clinic-trigger+.appointment-clinics:not([hidden]){grid-template-columns:minmax(0,1fr);gap:8px;max-height:min(340px,50dvh);overflow-y:auto;overscroll-behavior:contain;margin-top:10px;padding:4px 5px 4px 3px}
 .appointment-clinic-trigger+.appointment-clinics .appointment-choice-body{min-height:72px;padding:13px 15px}
 .appointment-clinic-trigger+.appointment-clinics .appointment-choice strong{font-size:14px}
 .appointment-clinic-trigger+.appointment-clinics .appointment-choice small{font-size:12px}
}
/* Put the appointment form before its supporting summary on phones. */
@media(max-width:767px){
 .appointment-layout>.appointment-panel{order:1}
 .appointment-layout>.appointment-summary{order:2}
}