/* UX2 — transparent doctor booking funnel. */
.booking-selection-summary { margin:12px 0 15px; border:1px solid rgba(15,163,163,.24); border-radius:16px; padding:12px; background:linear-gradient(145deg,var(--accent-soft),var(--card)); }
.booking-selection-empty { display:flex; align-items:center; gap:10px; color:var(--muted); }
.booking-selection-empty>span { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:11px; color:var(--accent); background:var(--card); font-size:17px; }
.booking-selection-empty b,.booking-selection-empty small { display:block; }
.booking-selection-empty b { color:var(--text); font-size:11px; }
.booking-selection-empty small { margin-top:2px; font-size:9px; line-height:1.35; }
.booking-selection-head { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:10px; }
.booking-selection-head>span { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:var(--button-text); background:var(--accent); font-weight:900; }
.booking-selection-head small,.booking-selection-head b { display:block; }
.booking-selection-head small { color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.05em; }
.booking-selection-head b { margin-top:2px; font-size:12px; }
.booking-selection-summary dl { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:11px 0 9px; }
.booking-selection-summary dl>div { min-width:0; border-radius:11px; padding:9px; background:var(--card); }
.booking-selection-summary dt,.booking-selection-summary dd { margin:0; }
.booking-selection-summary dt { color:var(--muted); font-size:8px; }
.booking-selection-summary dd { margin-top:3px; font-size:10px; font-weight:800; overflow-wrap:anywhere; }
.booking-selection-total { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; border-top:1px solid rgba(15,163,163,.2); padding-top:9px; }
.booking-selection-total span { color:var(--muted); font-size:9px; }
.booking-selection-total strong { color:var(--accent); font-size:17px; white-space:nowrap; }

.doctor-booking-timeline { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:12px 0; }
.doctor-booking-timeline>div { position:relative; min-width:0; overflow:hidden; text-align:center; }
.doctor-booking-timeline>div::before { content:''; position:absolute; z-index:0; top:12px; right:50%; left:-50%; height:2px; background:var(--line); }
.doctor-booking-timeline>div:first-child::before { display:none; }
.doctor-booking-timeline i { position:relative; z-index:1; display:grid; place-items:center; width:25px; height:25px; margin:auto; border:2px solid var(--line); border-radius:50%; color:var(--muted); background:var(--card); font-size:8px; font-style:normal; font-weight:900; }
.doctor-booking-timeline span { display:block; margin-top:5px; overflow:hidden; color:var(--muted); font-size:7px; line-height:1.2; text-overflow:ellipsis; }
.doctor-booking-timeline .done::before,.doctor-booking-timeline .done i { border-color:var(--accent); background:var(--accent); }
.doctor-booking-timeline .done::before { background:var(--accent); }
.doctor-booking-timeline .done i { color:var(--button-text); }
.doctor-booking-timeline .done span,.doctor-booking-timeline .current span { color:var(--text); font-weight:800; }
.doctor-booking-timeline .current i { border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.doctor-booking-timeline.stopped .done:nth-child(2) i { border-color:var(--bad); background:var(--bad); }

.doctor-next-step { margin:12px 0; border:1px solid rgba(15,163,163,.22); border-radius:15px; padding:12px; background:linear-gradient(145deg,var(--accent-soft),var(--card)); }
.doctor-next-step>div { display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; }
.doctor-next-step>div>span { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:var(--accent); background:var(--card); font-size:17px; }
.doctor-next-step small,.doctor-next-step b,.doctor-next-step p { display:block; margin:0; }
.doctor-next-step small { color:var(--accent); font-size:8px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.doctor-next-step b { margin-top:2px; font-size:12px; }
.doctor-next-step p { margin-top:3px; color:var(--muted); font-size:9px; line-height:1.4; }
.doctor-next-step .btn { margin-top:10px; }
.doctor-next-step.waiting { border-color:rgba(232,162,61,.25); background:linear-gradient(145deg,rgba(232,162,61,.1),var(--card)); }
.doctor-next-step.waiting small,.doctor-next-step.attention small { color:#996515; }
.doctor-next-step.attention { border-color:rgba(232,162,61,.3); background:#fff9ea; }
.doctor-next-step.ready { border-color:rgba(47,168,79,.24); background:linear-gradient(145deg,rgba(47,168,79,.09),var(--card)); }

.request-secondary-actions { margin-top:12px; border-top:1px solid var(--line); padding-top:9px; }
.request-secondary-actions summary { min-height:44px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:10px; font-weight:800; cursor:pointer; list-style:none; }
.request-secondary-actions summary::-webkit-details-marker { display:none; }
.request-secondary-actions summary::after { content:'⌄'; margin-left:7px; color:var(--accent); font-size:14px; transition:transform .15s; }
.request-secondary-actions[open] summary::after { transform:rotate(180deg); }
.request-secondary-actions .request-actions { margin-top:5px; }
.payment-history summary { display:flex; align-items:center; min-height:44px; cursor:pointer; }

@media(max-width:350px) {
  .booking-selection-summary dl { grid-template-columns:1fr; }
  .doctor-booking-timeline span { font-size:6.5px; }
}
@media(prefers-color-scheme:dark) {
  .doctor-next-step.attention { background:color-mix(in srgb,#8a641b 20%,var(--card)); }
}