/* v12.47.00 - the Patient Booking Card (patient-portal/js/booking-card.js draws it; config/booking-card.php decides it).
   One look everywhere: amber = please wait, red = you need to act (pay), green = booked - come on time, blue = today at the
   clinic, black = done, grey = closed (book again). Big words, big touch targets: many patients read slowly on small phones. */
.bkc {
    --bk-bg: #eef0f2; --bk-ink: #4b5563; --bk-ic: #6b7280;
    --bkc-card: #ffffff; --bkc-ink: #1b2530; --bkc-ink2: #5b6a79; --bkc-line: #e3e9ef;
    background: var(--bkc-card); color: var(--bkc-ink);
    border: 1px solid var(--bkc-line); border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(10, 28, 50, .07);
    text-align: left; font-size: 15px; line-height: 1.45;
}
.bkc-t-wait { --bk-bg: #fff4e0; --bk-ink: #8a5200; --bk-ic: #d97706; }
.bkc-t-pay  { --bk-bg: #fdecea; --bk-ink: #a3261b; --bk-ic: #dc2626; }
.bkc-t-ok   { --bk-bg: #e3f6ec; --bk-ink: #0f6b3e; --bk-ic: #0e9f6e; }
.bkc-t-live { --bk-bg: #e4eefc; --bk-ink: #1d4ed8; --bk-ic: #2563eb; }
.bkc-t-done { --bk-bg: #ebedef; --bk-ink: #212529; --bk-ic: #212529; }
.bkc-t-off  { --bk-bg: #eef0f2; --bk-ink: #4b5563; --bk-ic: #6b7280; }

.bkc-band { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bk-bg); color: var(--bk-ink); }
.bkc-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--bk-ic); color: #fff;
          display: inline-flex; align-items: center; justify-content: center; font-size: 21px; }
.bkc-bt { min-width: 0; }
.bkc-st { font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: .005em; }
.bkc-sub { font-size: 14px; font-weight: 600; margin-top: 2px; opacity: .92; }

.bkc-body { padding: 14px 16px 16px; display: grid; gap: 12px; }
.bkc-who b { display: block; font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.bkc-who span { display: block; font-size: 14px; color: var(--bkc-ink2); margin-top: 1px; overflow-wrap: anywhere; }

.bkc-when { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; align-items: baseline; }
.bkc-when dt { font-size: 13px; color: var(--bkc-ink2); }
.bkc-when dd { margin: 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bkc-when dd small { font-size: 12.5px; font-weight: 500; color: var(--bkc-ink2); }
.bkc-when .bkc-tok { color: #0891b2; font-size: 18px; font-weight: 800; }
.bkc-when .bkc-later { font-size: 14px; font-weight: 500; color: var(--bkc-ink2); }
.bkc-when.bkc-was dd { color: var(--bkc-ink2); font-weight: 600; }
.bkc-when.bkc-was dd.bkc-reason { color: var(--bkc-ink); font-weight: 800; }   /* v12.49.00: why the clinic could not give the time */

.bkc-arrive { display: grid; gap: 1px; border-radius: 12px; padding: 10px 14px;
              background: var(--pp-soft, #eef4ff); border: 1px solid var(--pp-line, #c7d7fb); }
.bkc-arrive span { font-size: 13.5px; color: var(--bkc-ink2); font-weight: 600; }
.bkc-arrive b { font-size: 24px; font-weight: 800; color: var(--pp-text, #1d4fc4); font-variant-numeric: tabular-nums; line-height: 1.2; }
.bkc-arrive small { font-size: 13.5px; color: var(--bkc-ink2); }
.bkc-arrive.bkc-now { background: #fff4e0; border-color: #f3d39a; }
.bkc-arrive.bkc-now b { color: #8a5200; font-size: 21px; }
.bkc-arrive.bkc-video { background: #f1f5f9; border-color: #dbe3ea; }
.bkc-arrive.bkc-video span { font-size: 16px; font-weight: 800; color: var(--bkc-ink); }

.bkc-money { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 15px; font-weight: 700; }
.bkc-paid { color: #0f6b3e; display: inline-flex; align-items: center; gap: 4px; }
.bkc-due { color: #a3261b; }

.bkc-steps { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--bkc-n, 5), minmax(0, 1fr)); }
.bkc-steps li { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; font-size: 12px; color: var(--bkc-ink2); min-width: 0; }
.bkc-steps li::before { content: ""; position: absolute; top: 10px; right: 50%; width: 100%; height: 3px; background: var(--bkc-line); z-index: 0; }
.bkc-steps li:first-child::before { display: none; }
.bkc-steps li i { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--bkc-line);
                  background: var(--bkc-card); display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
.bkc-steps li i b { font-size: 13px; color: #fff; }
.bkc-steps li span { overflow-wrap: anywhere; line-height: 1.2; }
.bkc-steps li.d i { background: #0e9f6e; border-color: #0e9f6e; }
.bkc-steps li.d::before, .bkc-steps li.c::before { background: #0e9f6e; }
.bkc-steps li.c i { border-color: var(--bk-ic); background: var(--bk-bg); }
.bkc-steps li.c span { color: var(--bkc-ink); font-weight: 800; }

.bkc-next { margin: 0; font-size: 14.5px; color: var(--bkc-ink2); border-top: 1px dashed var(--bkc-line); padding-top: 10px; }
.bkc-next b { color: var(--bkc-ink); }

.bkc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.bkc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 10px 16px;
           border-radius: 11px; border: 1.5px solid #d6dde5; background: #fff; color: #22303f;
           font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; flex: 1 1 auto; }
.bkc-btn:active { transform: scale(.99); }
.bkc-btn:focus-visible { outline: 3px solid var(--pp, #2563eb); outline-offset: 2px; }
.bkc-btn-pri { background: var(--pp, #2563eb); border-color: var(--pp, #2563eb); color: var(--pp-ink, #fff); }
.bkc-btn-pay { background: #059669; border-color: #059669; color: #fff; flex-basis: 100%; font-size: 16.5px; }
/* v12.51.00: "Save on my WhatsApp" - WhatsApp's green, dark enough for white words */
.bkc-btn-wa { background: #1a8f4a; border-color: #1a8f4a; color: #fff; flex-basis: 100%; }
.bkc-btn-wa i { color: #fff; }

/* My appointments: the same card, shorter (no steps) */
.bkc-compact .bkc-band { padding: 11px 14px; }
.bkc-compact .bkc-ic { width: 36px; height: 36px; font-size: 18px; }
.bkc-compact .bkc-st { font-size: 17.5px; }
.bkc-compact .bkc-body { padding: 12px 14px 14px; gap: 10px; }
.bkc-compact .bkc-arrive b { font-size: 20px; }

/* the moment a waiting card turns green by itself */
.bkc-news { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 14px; border-radius: 12px;
            background: #e3f6ec; color: #0f6b3e; font-weight: 800; font-size: 15px; }
.bkc-flash .bkc { animation: bkc-flash 1.6s ease-out 1; }
@keyframes bkc-flash { 0% { box-shadow: 0 0 0 0 rgba(14, 159, 110, .55); } 100% { box-shadow: 0 0 0 16px rgba(14, 159, 110, 0); } }

/* where the card sits */
.bk-result .bkc { margin: 4px 0 14px; }
.bkr-card-acts { display: grid; gap: 10px; }
.appt-cardwrap { margin-bottom: 12px; }
.appt-cardwrap.appt-tappable { cursor: pointer; }
.appt-cardwrap .appt-track { margin-top: 8px; }
.appt-cardwrap .appt-cancel { margin-top: 8px; }
.appt-cardwrap .appt-move { margin-top: 8px; }   /* v13.14.00 */
#booking-card { margin: 0 16px 14px; }
.ch-bkcard { margin-top: 10px; min-width: 0; }   /* v12.48.00: inside a chat message, after its words, before the speaker button */
.ch-bkcard .bkc { box-shadow: none; }
.ch-bkcard .bkc-btn { min-height: 44px; }

/* the status page: A+ text and the phone's dark look (only the tracking screens flip, like the rest of portal.css) */
html.pp-lg #appointment-screen .bkc-st { font-size: 23px; }
html.pp-lg #appointment-screen .bkc-sub, html.pp-lg #appointment-screen .bkc-next { font-size: 16.5px; }
html.pp-lg #appointment-screen .bkc-when dd { font-size: 18.5px; }
html.pp-lg #appointment-screen .bkc-arrive b { font-size: 28px; }
html.pp-lg #appointment-screen .bkc-btn { font-size: 17px; }
/* v12.48.00: the chat (patient-portal/chat.php) flips to dark as a whole page - its cards follow (.ch-app), with the chat's own
   dark tokens (--pp-d...), the same values as the status page */
@media (prefers-color-scheme: dark) {
    #appointment-screen .bkc, .ch-app .bkc { --bkc-card: #18202a; --bkc-ink: #e9eef3; --bkc-ink2: #a9b5c1; --bkc-line: #2b3744; box-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
    #appointment-screen .bkc-t-wait, .ch-app .bkc-t-wait { --bk-bg: #2a2410; --bk-ink: #f2d48a; }
    #appointment-screen .bkc-t-pay, .ch-app .bkc-t-pay  { --bk-bg: #3a1714; --bk-ink: #ffb4a8; }
    #appointment-screen .bkc-t-ok, .ch-app .bkc-t-ok   { --bk-bg: #10301f; --bk-ink: #7fe0ae; }
    #appointment-screen .bkc-t-live, .ch-app .bkc-t-live { --bk-bg: #142443; --bk-ink: #a9c4ff; }
    #appointment-screen .bkc-t-done, .ch-app .bkc-t-done { --bk-bg: #262c33; --bk-ink: #e9eef3; --bk-ic: #4b5563; }
    #appointment-screen .bkc-t-off, .ch-app .bkc-t-off  { --bk-bg: #262c33; --bk-ink: #c3ccd5; }
    #appointment-screen .bkc-arrive { background: var(--pp-soft); border-color: var(--pp-line); }
    .ch-app .bkc-arrive { background: var(--pp-soft-d, #1e2a3a); border-color: #2f4260; }
    .ch-app .bkc-arrive b { color: var(--pp-d, #60a5fa); }
    #appointment-screen .bkc-arrive.bkc-now, .ch-app .bkc-arrive.bkc-now { background: #2a2410; border-color: #5a4a1a; }
    #appointment-screen .bkc-arrive.bkc-now b, .ch-app .bkc-arrive.bkc-now b { color: #f2d48a; }
    #appointment-screen .bkc-arrive.bkc-video, .ch-app .bkc-arrive.bkc-video { background: #1e2731; border-color: #2b3744; }
    #appointment-screen .bkc-paid, .ch-app .bkc-paid { color: #7fe0ae; }
    #appointment-screen .bkc-due, .ch-app .bkc-due { color: #ffb4a8; }
    #appointment-screen .bkc-when .bkc-tok, .ch-app .bkc-when .bkc-tok { color: #5fd3e6; }
    #appointment-screen .bkc-btn, .ch-app .bkc-btn { background: #1e2731; border-color: #34414e; color: #e9eef3; }
    #appointment-screen .bkc-btn-pri { background: var(--pp); border-color: var(--pp); color: var(--pp-ink); }
    .ch-app .bkc-btn-pri { background: var(--pp-d, #60a5fa); border-color: var(--pp-d, #60a5fa); color: var(--pp-ink-d, #0f151b); }
    #appointment-screen .bkc-btn-pay, .ch-app .bkc-btn-pay { background: #059669; border-color: #059669; color: #fff; }
    #appointment-screen .bkc-btn-wa, .ch-app .bkc-btn-wa { background: #1a8f4a; border-color: #1a8f4a; color: #fff; }   /* v12.51.00 */
}
@media (prefers-reduced-motion: reduce) { .bkc-flash .bkc { animation: none; } .bkc-btn:active { transform: none; } }