/* Patient Portal - Mobile-First PWA Styles (v3.8.0 Phase 2) */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f5f5;
    color: #333;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

.screen { display: none; }
.screen.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Loading */
.loader-container {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100vh; padding: 20px;
}
.spinner {
    width: 40px; height: 40px;
    border: 4px solid #e0e0e0; border-top-color: var(--pp, #2563eb);
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Header */
.portal-header {
    position: sticky; top: 0; z-index: 10;
    padding: 12px 16px; color: #fff;
}
.header-content {
    display: flex; align-items: center; gap: 10px;
}
.clinic-name {
    flex: 1; font-weight: 600; font-size: 16px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lang-toggle {
    display: flex; gap: 4px; margin-left: auto;
}
.lang-btn {
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4);
    color: #fff; padding: 3px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 600; cursor: pointer;
    transition: all 0.2s;
}
.lang-btn.active {
    background: #fff; color: var(--pp-text, #333);
}
/* v9.16.0: one language = the button stays as a label */
.lang-btn[disabled] { cursor: default; opacity: 1; }

/* Greeting */
.greeting {
    padding: 20px 16px 8px;
    font-size: 18px; font-weight: 500;
}
.patient-name { font-weight: 700; }

/* Status Section */
.status-section {
    padding: 0 16px 12px;
}
.status-badge {
    display: inline-block; padding: 4px 12px;
    border-radius: 20px; font-size: 13px; font-weight: 600;
    color: #fff;
}
.status-scheduled { background: #0d6efd; }
.status-rescheduled { background: #fd7e14; }
.status-ongoing { background: #0891b2; }
.status-completed { background: #212529; }
.status-absent { background: #6f42c1; }
.status-cancelled { background: #dc3545; }
.status-closed { background: #475569; } /* v8.82.0: clinic closed / doctor on leave */

.queue-details {
    display: flex; flex-direction: column; gap: 10px;
}
.queue-detail-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: #555;
}
.queue-detail-item i {
    font-size: 16px; width: 20px; text-align: center;
    transition: color 0.3s;
}
/* v8.78.0: engine sentence under the doctor chip ("Seeing the last patients") */
.doctor-status-note {
    margin: -6px 16px 12px 44px;
    font-size: 12.5px;
    font-weight: 600;
    color: #0891b2;
}

/* Queue position change animation */
.tc-big.position-changed {
    animation: positionBounce 0.6s ease;
}
@keyframes positionBounce {
    0% { transform: scale(1); }
    20% { transform: scale(1.18); }
    40% { transform: scale(0.9); }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Arrival done - green accent */
.card-row.arrival-done span {
    color: #059669; font-weight: 600;
}
.card-row.arrival-done i {
    color: #059669;
}

/* Appointment Card */
.appointment-card {
    margin: 8px 16px 12px; padding: 16px;
    background: var(--s-card, #fff); border-radius: 12px; color: var(--s-ink, #333);
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.card-title {
    font-size: 14px; font-weight: 600; color: var(--s-ink2, #888);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}
.card-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; font-size: 15px;
    border-bottom: 1px solid var(--s-line, #f8f8f8);
}
.card-row:last-child { border-bottom: none; }
.card-row i { color: var(--s-ink2, #888); font-size: 16px; width: 20px; text-align: center; }

/* Connection Status */
.connection-status {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; padding: 12px; font-size: 12px; color: #999;
}
.status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block;
}
.status-dot.live { background: #22c55e; }
.status-dot.stale { background: #eab308; }
.status-dot.offline { background: #ef4444; }

/* Install Prompt */
.install-prompt {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff; padding: 16px 16px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    display: flex; align-items: center; gap: 12px;
    font-size: 14px; z-index: 100;
    border-top: 3px solid var(--pp, #2563eb);
    animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.install-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: #eef2ff; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.install-icon i { font-size: 22px; color: var(--pp-text, #2563eb); }
.install-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.install-info strong { font-size: 15px; color: #111; }
.install-info span { font-size: 12px; color: #666; }
.install-btn {
    background: var(--pp, #2563eb); color: var(--pp-ink, #fff);
    border: none; padding: 10px 20px; border-radius: 8px;
    font-weight: 600; cursor: pointer; white-space: nowrap; font-size: 14px;
    flex-shrink: 0;
}
.install-btn:active { background: #1d4ed8; }
.install-dismiss {
    background: none; border: none; font-size: 16px;
    color: #999; cursor: pointer; padding: 4px; flex-shrink: 0;
}
/* v10.26.0: room under the page while the strip is up on the portal's own
   screens (login, home, booking), so it never sits on a form's last button.
   Not applied on the tracking screen, which keeps its layout as it was. */
body.pp-strip-on { padding-bottom: 92px; }
/* v10.26.1: on a wide screen the chat is a 400px box at one bottom corner, so
   the strip stays and is pulled in from that side (400 + 18 margin + a gap),
   keeping the Install button clear of the panel. Phones hide it instead. */
@media (min-width: 600px) {
    body.pp-strip-chat-right .install-prompt { right: 440px; }
    body.pp-strip-chat-left .install-prompt { left: 440px; }
}

/* Queue Info Toggle */
.queue-info-toggle {
    display: inline-block; cursor: pointer;
    color: var(--pp-text, #2563eb); font-size: 16px;
    margin-left: 4px; vertical-align: middle;
    opacity: 0.7; transition: opacity 0.2s;
}
.queue-info-toggle:hover, .queue-info-toggle:active {
    opacity: 1;
}
.queue-info-box {
    margin-top: 10px; padding: 12px 14px;
    background: var(--pp-soft, #f0f4ff); border-radius: 10px;
    border: 1px solid var(--pp-line, #bfdbfe);
    font-size: 12px; color: var(--s-ink, #1e40af);
    line-height: 1.5; text-align: left;
}
.queue-info-box strong {
    display: block; margin-bottom: 4px;
    font-size: 13px; color: var(--pp-text, #1e3a8a);
}
.queue-info-box p {
    margin: 0;
}

/* v8.81.0: the estimate's disclaimer box sits under its line */
.wait-info-box {
    margin: 2px 0 4px 0;
}

/* Journey Message */
.journey-message {
    margin: 0 16px 12px; padding: 12px 14px;
    background: var(--pp-soft, #f0f9ff); border-radius: 10px;
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14.5px; color: var(--s-ink, #1e40af);
    border-left: 4px solid var(--pp, #2563eb);
    line-height: 1.5;
}
.journey-message i { font-size: 18px; flex-shrink: 0; margin-top: 1px; color: var(--pp-text, #2563eb); }

/* Journey Stepper */
.journey-stepper {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 16px 6px; margin: 0 16px 8px; gap: 0;
}
.step {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-width: 40px;
}
.step-dot {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--s-line, #e0e0e0); border: 2px solid var(--s-line2, #ccc);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; transition: all 0.3s;
}
.step-label {
    font-size: 10.5px; color: var(--s-ink2, #999); font-weight: 500;
    white-space: nowrap;
}
.step-line {
    flex: 1; height: 3px; background: var(--s-line, #e0e0e0);
    min-width: 15px; margin: 0 2px; margin-bottom: 18px;
    transition: background 0.3s;
}
/* Stepper states */
.step.completed .step-dot {
    background: var(--pp, #22c55e); border-color: var(--pp, #22c55e); color: var(--pp-ink, #fff);
}
.step.completed .step-dot::after { content: '✓'; }
.step.completed .step-label { color: var(--pp-text, #22c55e); }
.step.active .step-dot {
    background: var(--s-card, #fff); border-color: var(--pp, #2563eb);
    box-shadow: 0 0 0 4px var(--pp-soft, rgba(37,99,235,0.2));
}
.step.active .step-label { color: var(--pp-text, #2563eb); font-weight: 700; }
/* v8.82.0: a visit that cannot go on (clinic closed / doctor on leave) */
.step.paused .step-dot { background: var(--s-card, #fff); border-color: #94a3b8; }
.step.paused .step-label { color: #475569; font-weight: 700; }
.step.failed .step-dot {
    background: #dc3545; border-color: #dc3545; color: #fff;
}
.step.failed .step-dot::after { content: '✗'; }
.step.failed .step-label { color: #dc3545; }
.step.active-warn .step-dot {
    background: #f59e0b; border-color: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245,158,11,0.2);
}
.step.active-warn .step-label { color: #d97706; font-weight: 700; }
.step-line.done { background: var(--pp, #22c55e); }
.step-line.active { background: var(--pp-line, #2563eb); }

/* Feedback Popup */
.feedback-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; animation: fadeIn 0.3s;
}
.feedback-popup {
    background: #fff; border-radius: 20px; padding: 28px 24px;
    max-width: 380px; width: 100%; position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    animation: slideUp 0.3s ease-out;
}
.feedback-close {
    position: absolute; top: 12px; right: 14px;
    background: none; border: none; font-size: 18px;
    color: #999; cursor: pointer; padding: 4px;
}
.feedback-prompt {
    text-align: center; font-size: 17px; font-weight: 600;
    color: #333; margin-bottom: 20px;
}
.feedback-stars {
    display: flex; justify-content: center; gap: 8px;
    margin-bottom: 6px;
}
.feedback-stars .star {
    font-size: 40px; color: #ddd; cursor: pointer;
    transition: color 0.2s, transform 0.15s;
    user-select: none;
}
.feedback-stars .star.active { color: #f59e0b; }
.feedback-stars .star:hover { transform: scale(1.2); }
.feedback-labels {
    display: flex; justify-content: space-between;
    font-size: 11px; color: #999; margin-bottom: 16px;
    padding: 0 10px;
}
.feedback-textarea {
    width: 100%; border: 1px solid #ddd; border-radius: 10px;
    padding: 12px; font-size: 14px; resize: none;
    margin-bottom: 14px; outline: none;
    font-family: inherit;
}
.feedback-textarea:focus { border-color: var(--pp, #2563eb); }
.feedback-submit-btn {
    width: 100%; padding: 14px; border: none; border-radius: 12px;
    background: var(--pp, #2563eb); color: var(--pp-ink, #fff); font-size: 16px;
    font-weight: 600; cursor: pointer; transition: background 0.2s;
}
.feedback-submit-btn:disabled { background: #cfd6dd; color: #55636f; cursor: not-allowed; }
.feedback-submit-btn:not(:disabled):hover { filter: brightness(.92); }
.feedback-skip {
    text-align: center; margin-top: 12px; font-size: 13px;
    color: #888; cursor: pointer; text-decoration: underline;
}
.feedback-thanks-icon { text-align: center; font-size: 48px; margin-bottom: 12px; }
.feedback-thanks-title { text-align: center; font-size: 18px; font-weight: 700; color: #333; margin-bottom: 8px; }
.feedback-thanks-rating { text-align: center; font-size: 28px; color: #f59e0b; letter-spacing: 4px; }

/* Portal Ad */
.portal-ad-container {
    margin: 12px 16px; padding: 12px;
    background: var(--s-card, #fff); border-radius: 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    text-align: center;
}
.portal-ad-label {
    font-size: 10px; color: #bbb;
    margin-top: 6px; text-align: center;
    letter-spacing: 0.5px;
}

/* Pull-to-Refresh */
.ptr-indicator {
    display: none; align-items: center; justify-content: center; gap: 8px;
    padding: 10px; font-size: 13px; color: #666; background: #f0f4ff;
}
.ptr-indicator.active { display: flex; }
.ptr-spinner {
    width: 18px; height: 18px;
    border: 2px solid #ddd; border-top-color: var(--pp, #2563eb);
    border-radius: 50%; animation: spin 0.6s linear infinite;
}

/* ===== v5.11.3: Digital Slip — premium full-bleed screen ===== */
.slip2 { max-width: 680px; margin: 0 auto; padding: 0 0 28px; }
.slip2-hero {
    background: var(--pp);
    background: linear-gradient(168deg, var(--pp) 0%, var(--pp2, color-mix(in srgb, var(--pp) 62%, #06121f)) 100%);
    /* bottom padding must exceed the token medallion's rise above the hero edge (122px) so it never covers the name */
    color: #fff; text-align: center; padding: 28px 20px 140px;
}
.slip2-clinic { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.slip2-title { font-size: 19px; font-weight: 800; letter-spacing: .08em; margin-top: 6px; text-wrap: balance; }
.slip2-status { margin-top: 14px; }
.slip2-status .status-badge { box-shadow: 0 2px 10px rgba(0,0,0,.28); font-size: 13px; padding: 6px 16px; }
.slip2-patient { font-size: 26px; font-weight: 800; margin-top: 14px; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.18); }
.slip2-cardno { font-size: 13.5px; opacity: .85; margin-top: 3px; }
.slip2-sheet {
    background: #fff; border-radius: 24px; margin: -56px 14px 0;
    padding: 20px 20px 18px; position: relative;
    box-shadow: 0 14px 36px rgba(10, 28, 50, .16);
}
.slip2-token {
    width: 132px; height: 132px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 26px rgba(10, 28, 50, .22);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--pp) 22%, #fff), 0 10px 26px rgba(10, 28, 50, .22);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    margin: -86px auto 8px;
}
.slip2-token-label { font-size: 14px; font-weight: 800; letter-spacing: .28em; color: var(--pp); opacity: .8; text-indent: .28em; }
.slip2-token-value { font-size: 42px; font-weight: 800; color: #122033; line-height: 1.05; font-variant-numeric: tabular-nums; }
.slip2-rows { display: flex; flex-direction: column; margin-top: 10px; }
.slip2-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 2px; font-size: 16px; color: #22303f;
    border-bottom: 1px solid #eef2f6;
}
.slip2-row:last-child { border-bottom: none; }
.slip2-ic {
    width: 38px; height: 38px; border-radius: 12px; flex: 0 0 38px;
    background: #f2f6fa;
    background: color-mix(in srgb, var(--pp) 8%, #fff);
    color: var(--pp);
    display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.slip2-row.slip-arrived span { color: #0b7a55; font-weight: 700; }
.slip2-row.slip-arrived .slip2-ic { background: #e7f6ef; color: #0b7a55; }
.slip2-note {
    margin-top: 14px; text-align: center; font-size: 13px; color: #7c8b9a;
    background: #f7fafc; border-radius: 12px; padding: 10px 12px;
}
/* Wide, breathable ad area — outside the sheet, nearly edge-to-edge */
.slip2-ads { margin: 20px 10px 0; }
.slip2-ads .portal-ad-container { margin: 0; padding: 0; background: transparent; box-shadow: none; }
.slip2-ads img { border-radius: 14px; box-shadow: 0 6px 18px rgba(10,28,50,.12); }
.slip2-contact {
    margin: 20px 16px 0; text-align: center; font-size: 13px; color: #5f6f7f;
    display: flex; flex-direction: column; gap: 5px; align-items: center;
}
.slip2-contact i { margin-right: 5px; color: #93a1b0; }
@media (min-width: 700px) { .slip2-hero { border-radius: 0 0 30px 30px; } }

/* ===== v6.0.0: Patient Self-Booking — login / OTP / home screens ===== */
.auth-body { max-width: 460px; margin: 0 auto; padding: 28px 22px 20px; }
.auth-title { font-size: 24px; font-weight: 800; text-align: center; margin: 4px 0 2px; color: #1b2530; }
.auth-sub { text-align: center; color: #6b7a89; font-size: 14.5px; margin: 0 0 22px; }
.auth-label { display: block; font-size: 13px; font-weight: 600; color: #45535f; margin: 0 0 6px; }
.auth-input {
    width: 100%; box-sizing: border-box; padding: 14px 16px; font-size: 17px;
    border: 1.5px solid #d6dde5; border-radius: 12px; background: #fff; color: #1b2530;
    outline: none; transition: border-color .15s;
}
.auth-input:focus { border-color: #9db4cc; }
.auth-otp-input { text-align: center; letter-spacing: .5em; font-size: 26px; font-weight: 700; padding-left: .5em; }
.auth-error { color: #c0392b; font-size: 13.5px; margin-top: 10px; text-align: center; }
.auth-btn {
    width: 100%; margin-top: 18px; padding: 15px; border: none; border-radius: 12px;
    background: #2563eb; /* default so white text is never invisible; inline theme color / .auth-btn-ghost override */
    color: #fff; font-size: 17px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 6px 16px rgba(10,28,50,.14);
}
.auth-btn:disabled { opacity: .6; cursor: default; }
.auth-btn-ghost { background: #eef2f6 !important; color: #45535f; box-shadow: none; margin-top: 26px; }
/* Outlined secondary button — clearly reads as a button; theme color + border set inline */
.auth-btn-outline { background: #fff !important; box-shadow: 0 2px 8px rgba(10,28,50,.08); margin-top: 12px; }
.auth-note { text-align: center; color: #8b99a9; font-size: 12.5px; margin-top: 16px; line-height: 1.5; }
.auth-retry-row { display: flex; justify-content: center; gap: 18px; margin-top: 18px; }
.auth-retry-row a { color: #1d4fc4; font-size: 14px; font-weight: 600; text-decoration: none; }
.auth-change { display: block; text-align: center; color: #8b99a9; font-size: 13px; margin-top: 18px; text-decoration: none; }
.auth-profiles-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #93a1b0; margin: 4px 2px 10px; }
.auth-profile-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border: 1px solid #e6ecf2; border-radius: 12px;
    background: #fff; margin-bottom: 10px;
}
.auth-profile-card .ap-name { font-weight: 700; color: #1b2530; font-size: 15.5px; }
.auth-profile-card .ap-card { color: #8b99a9; font-size: 13px; }
.auth-soon {
    display: flex; gap: 12px; align-items: flex-start;
    background: #f2f7fc; border-radius: 12px; padding: 14px 16px; margin-top: 16px;
    color: #52606d; font-size: 14px; line-height: 1.5;
}
.auth-soon i { font-size: 20px; color: #1d4fc4; margin-top: 1px; }
/* Auth header: language toggle pinned top-right (out of flow), brand centered */
#auth-login-screen .portal-header, #auth-otp-screen .portal-header, #auth-home-screen .portal-header,
#auth-book-screen .portal-header, #auth-appts-screen .portal-header { text-align: center; position: relative; padding-top: 14px; }
#auth-login-screen .lang-toggle, #auth-home-screen .lang-toggle,
#auth-book-screen .lang-toggle, #auth-appts-screen .lang-toggle {
    display: inline-flex; float: none; position: absolute; top: 12px; right: 12px; margin: 0;
}
#auth-login-screen .portal-header h1, #auth-otp-screen .portal-header h1, #auth-home-screen .portal-header h1 { font-size: 20px; font-weight: 700; }
/* Center the logo + clinic name as one tidy block */
#auth-login-screen .portal-header img { display: block; margin: 4px auto 6px !important; }
#auth-login-screen .portal-header h1 { margin: 0 auto !important; }

/* v6.0.2: not-registered clinic contact card on the login screen */
.auth-contact-card {
    margin-top: 14px; padding: 14px 16px; border-radius: 12px;
    background: #fff6f4; border: 1px solid #f3d4cc;
}
.auth-contact-card .acc-title { font-size: 13px; font-weight: 700; color: #9a3b28; margin-bottom: 10px; }
.auth-contact-card .acc-row {
    display: flex; align-items: center; gap: 10px; padding: 7px 0;
    font-size: 14.5px; color: #34424f; text-decoration: none;
    border-top: 1px solid #f5e2dc;
}
.auth-contact-card .acc-row:first-of-type { border-top: none; }
.auth-contact-card .acc-row i { width: 18px; text-align: center; color: #c0603f; font-size: 15px; }
.auth-contact-card .acc-row span { word-break: break-word; }
.auth-contact-card a.acc-row[href] span { color: #1d4fc4; }

/* ===== v6.2.0: Booking wizard + My Appointments ===== */
.bk-back { position:absolute; left:14px; top:12px; color:#fff; font-size:22px; text-decoration:none; }
.bk-field { margin-bottom: 16px; }
.bk-profiles { display:flex; flex-wrap:wrap; gap:8px; }
.bk-chip { padding:9px 16px; border:1.5px solid #d6dde5; border-radius:22px; background:#fff; font-size:14.5px; font-weight:600; color:#34424f; cursor:pointer; }
.bk-chip.sel { background:#eef4ff; border-color:#2563eb; color:#1d4fc4; }
.bk-slots { display:flex; flex-wrap:wrap; gap:8px; }
.bk-slot { padding:10px 14px; border:1.5px solid #d6dde5; border-radius:10px; background:#fff; font-size:14.5px; font-weight:600; color:#22303f; cursor:pointer; font-variant-numeric:tabular-nums; }
.bk-slot.sel { background:#0891b2; border-color:#0891b2; color:#fff; }
.bk-noslots { color:#8b99a9; font-size:14px; padding:8px 2px; }
.bk-result { text-align:center; padding:18px 6px; }
.bkr-icon { font-size:52px; line-height:1; } .bkr-icon.ok { color:#0e9f6e; } .bkr-icon.pend { color:#d97706; }
.bkr-title { font-size:19px; font-weight:800; margin-top:8px; color:#1b2530; }
.bkr-sub { color:#6b7a89; font-size:14px; margin-top:4px; }
.bkr-token { font-size:22px; font-weight:800; color:#0891b2; margin-top:8px; font-variant-numeric:tabular-nums; }
.auth-next-appt { background:#eff6ff; border:1px solid #bfdbfe; border-radius:12px; padding:12px 14px; margin-bottom:14px; font-size:14px; color:#1e40af; }
.appts-head { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#93a1b0; margin:18px 2px 10px; }
.appts-empty { color:#8b99a9; font-size:14px; padding:10px 2px; }
.appt-card { border:1px solid #e6ecf2; border-radius:12px; background:#fff; padding:14px 16px; margin-bottom:10px; }
.appt-card.pending { border-left:4px solid #d97706; }
.appt-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.appt-name { font-weight:800; color:#1b2530; font-size:15.5px; }
.appt-badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:20px; color:#fff; }
.appt-badge.s-scheduled { background:#0d6efd; } .appt-badge.s-rescheduled { background:#fd7e14; }
.appt-badge.s-ongoing { background:#0891b2; } .appt-badge.s-completed { background:#212529; }
.appt-badge.s-absent { background:#6f42c1; } .appt-badge.s-cancelled { background:#dc3545; }
.appt-badge.s-pending { background:#d97706; }
.appt-meta { display:flex; align-items:center; gap:8px; font-size:14px; color:#45535f; padding:3px 0; }
.appt-meta i { color:#93a1b0; width:16px; text-align:center; }
.appt-token { margin-left:auto; font-size:12.5px; font-weight:700; color:#0891b2; font-variant-numeric:tabular-nums; }
.appt-cancel { margin-top:10px; padding:8px 14px; border:1.5px solid #f3d4cc; border-radius:9px; background:#fff6f4; color:#c0392b; font-size:13.5px; font-weight:600; cursor:pointer; }

/* ===== v6.2.1: Guided booking redesign ===== */
.bk-loading { display:flex; align-items:center; justify-content:center; min-height:180px; }
.bk-back { position:absolute; left:14px; top:12px; color:#fff; font-size:22px; text-decoration:none; z-index:2; }
.bk-pick { margin-bottom:16px; }
.bk-pick-label { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#45535f; margin-bottom:8px; }
.bk-pick-label i { color:#2563eb; }
.bk-summary { background:#f2f9f4; border:1px solid #cdeBD6; border:1px solid #cfe9d6; border-radius:14px; padding:16px 18px; margin:6px 0 4px; text-align:left; }
.bks-icon { color:#0e9f6e; font-size:26px; line-height:1; }
.bks-lead { font-size:16px; color:#1b2530; margin-top:4px; } .bks-lead b { font-weight:800; }
.bks-line { display:flex; align-items:center; gap:9px; font-size:15px; color:#34424f; margin-top:8px; }
.bks-line i { color:#0b7a55; width:17px; text-align:center; }
.bk-confirm-btn { margin-top:14px; font-size:18px; padding:16px; }

/* v6.2.2: fixed "Confirm" bar pinned to the bottom of the booking screen */
#auth-book-screen .auth-body { padding-bottom: 150px; } /* clear space for the fixed bar */
.bk-actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: #fff; border-top: 1px solid #e6ecf2;
    box-shadow: 0 -4px 18px rgba(10,28,50,.12);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
.bk-actionbar-inner { max-width: 520px; margin: 0 auto; }
.bk-summary-bar { margin-bottom: 10px; }
.bsb-l1 { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; color: #1b2530; }
.bsb-l1 i { color: #0e9f6e; font-size: 17px; }
.bsb-l2 { font-size: 14px; color: #45535f; margin-top: 4px; }
.bsb-l2 i { color: #0b7a55; }
.bk-actionbar .bk-confirm-btn { margin-top: 0; }

/* v6.4.3: tappable upcoming appointment cards → open live tracking */
.appt-card.appt-tappable { cursor: pointer; transition: box-shadow .15s, transform .05s; position: relative; }
.appt-card.appt-tappable:hover { box-shadow: 0 4px 14px rgba(10,28,50,.12); }
.appt-card.appt-tappable:active { transform: scale(.995); }
/* v6.5.2: prominent "View live status" call-to-action button */
.appt-track {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 12px; padding: 12px 14px;
    color: #fff; border-radius: 11px;
    font-size: 15px; font-weight: 700; letter-spacing: .01em;
    box-shadow: 0 4px 12px rgba(10,28,50,.18);
    animation: appt-track-pulse 2.4s ease-in-out infinite;
}
.appt-track i { font-size: 16px; }
.appt-track .bi-broadcast { animation: appt-live-blink 1.6s ease-in-out infinite; }
.appt-track:active { transform: scale(.99); }
@keyframes appt-track-pulse { 0%,100% { box-shadow: 0 4px 12px rgba(10,28,50,.18); } 50% { box-shadow: 0 7px 22px rgba(10,28,50,.32); } }
@keyframes appt-live-blink { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .appt-track, .appt-track .bi-broadcast { animation: none; } }
/* v9.7.0: "Rate your visit" strip on a completed card whose stars are still open — no pulse, amber star */
.appt-track.appt-rate { animation: none; }
.appt-track.appt-rate .bi-star-fill { color: #fbbf24; }

/* v9.7.0: home-screen "How was your visit?" card — a door to the rating popup, never a popup itself */
.auth-visit-ask { background: #fffbeb; border: 1px solid #fde68a; border-radius: 14px; padding: 16px 16px 14px; margin-bottom: 16px; text-align: center; }
.auth-visit-ask .ask-stars { color: #fbbf24; font-size: 20px; letter-spacing: 3px; line-height: 1; }
.auth-visit-ask .ask-title { font-size: 17px; font-weight: 800; color: #1b2530; margin-top: 8px; }
.auth-visit-ask .ask-meta { font-size: 13.5px; color: #6b7a89; margin-top: 4px; }
.auth-visit-ask .ask-btn {
    width: 100%; margin-top: 12px; padding: 12px 14px; border: none; border-radius: 11px;
    background: #2563eb; /* default so white text is never invisible; the theme colour is set inline */
    color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 12px rgba(10,28,50,.18);
}
.auth-visit-ask .ask-btn:active { transform: scale(.99); }

/* v6.7.0: add family member */
.bk-chip-add { border-style: dashed; color: #1d4fc4; border-color: #9db4cc; font-weight: 700; }
.row-2col { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }

/* === Terms & Policies (v6.15.0) — clinic-authored, both portal modes === */
.pp-terms-wrap { margin: 14px 16px 6px; }
.pp-terms-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 10px 14px; font-size: 14px; font-weight: 600; color: #334155;
    cursor: pointer; font-family: inherit;
}
.pp-terms-toggle:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.pp-terms-chevron { color: #94a3b8; font-weight: 700; }
.pp-terms-body {
    border: 1px solid #e2e8f0; border-top: 0; border-radius: 0 0 10px 10px;
    background: #fff; padding: 12px 16px; font-size: 13px; line-height: 1.65; color: #475569;
}
.pp-terms-line { padding: 2px 0; }
.pp-terms-line a { color: #2563eb; word-break: break-all; }
.pp-terms-updated {
    margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e2e8f0;
    font-size: 11px; color: #94a3b8;
}

/* === Doctor status snapshot on the Digital Slip (v6.16.0) === */
.slip2-docstatus {
    margin: 10px 16px 0; padding: 10px 13px;
    border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc;
}
.slip2-docstatus-line { font-size: 14px; font-weight: 600; color: #334155; }
/* v6.56.0: a dot in the status's OWN colour, beside its emoji. Hidden by JS
   when the status has no colour configured, so nothing renders as a blank gap. */
.slip2-docstatus-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block;
    margin-right: 6px; vertical-align: middle; }
.slip2-docstatus-meta {
    display: flex; align-items: center; gap: 8px;
    margin-top: 4px; font-size: 11px; color: #94a3b8;
}
.slip2-refresh {
    background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
    color: #2563eb; cursor: pointer; text-decoration: underline;
}
.slip2-refresh:disabled { color: #94a3b8; cursor: default; text-decoration: none; }

/* === Optional field titles (v6.17.0) === */
/* The wrapper renders as a single column: with an empty caption it is visually
   identical to the plain value it replaced, so titles-off looks unchanged. */
.row-body { display: flex; flex-direction: column; min-width: 0; }
.row-label {
    /* v6.17.1: the first pass was too faint to read comfortably on a phone,
       especially for older or low-literacy patients — darker and a little
       larger, while still clearly secondary to the value beneath it. */
    font-size: 12.5px; line-height: 1.3; color: #64748b;
    font-weight: 600; letter-spacing: .01em; margin-bottom: 2px;
}
.row-label:empty { display: none; }
/* Value gets its emphasis only when a caption is actually present, so the
   titles-off rendering stays byte-for-byte what it was. */
.row-label:not(:empty) + span { font-weight: 600; color: #1e293b; }

/* ============================================================================
   v8.31.0 — Login-screen booking tutorial (.tut-*)
   ============================================================================
   A drawn phone playing the four booking steps on a 20s CSS loop — no video,
   no library, ~zero bandwidth. Rendered only when self-booking is live (the
   markup sits inside the $selfBookingEnabled gate in index.php).

   Layout contract: on phones everything stacks below the login card; from
   920px the login screen becomes two columns (.auth-cols) — card left, demo
   right — filling the space that used to be empty. The demo NEVER sits above
   the login: a returning patient's only job is the OTP.

   The accent colour arrives per-clinic as --tut-accent (inline style on
   .tut-wrap, from theme_primary_color). Everything inside .tut-screen is a
   DEPICTION of the portal and is painted explicitly — it must not inherit.  */

.auth-cols { display: block; }
@media (min-width: 920px) {
    .auth-cols {
        display: grid;
        grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
        gap: 36px; align-items: start;
        max-width: 1060px; margin: 0 auto; padding: 0 22px;
    }
    .auth-cols .auth-body { margin: 0; }
}

.tut-wrap { max-width: 560px; margin: 6px auto 0; padding: 0 22px 28px; }
@media (min-width: 920px) { .tut-wrap { margin: 28px 0 0; padding: 0 0 28px; } }

.tut-head { text-align: center; font-size: 15px; font-weight: 800; color: #1b2530; margin: 0 0 2px; }
.tut-head-sub { display: block; font-size: 12.5px; font-weight: 500; color: #64748b; margin-top: 2px; }
@media (min-width: 920px) { .tut-head { text-align: left; } }

.tut-demo { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 14px; }
@media (min-width: 620px) {
    .tut-demo { flex-direction: row; align-items: flex-start; justify-content: center; }
    .tut-caps { flex: 1; min-width: 0; }
}

/* --- the phone frame --- */
.tut-phone { width: 196px; height: 372px; flex: none; border-radius: 26px;
             background: #dbe3ee; border: 1px solid #b9c6d8; padding: 8px;
             box-shadow: 0 16px 34px -18px rgba(15, 35, 70, .35); }
.tut-screen { position: relative; width: 100%; height: 100%; border-radius: 19px;
              overflow: hidden; background: #f5f7fb; }
.tut-top { position: absolute; top: 0; left: 0; right: 0; height: 36px; z-index: 5;
           background: var(--tut-accent, #2563eb); color: #fff;
           display: flex; align-items: center; justify-content: center;
           font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
           padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tut-step { position: absolute; top: 36px; right: 0; bottom: 0; left: 0; padding: 13px 12px; opacity: 0;
            animation: tutCycle 20s infinite; }
.tut-step.ts1 { animation-delay: 0s; }
.tut-step.ts2 { animation-delay: 5s; }
.tut-step.ts3 { animation-delay: 10s; }
.tut-step.ts4 { animation-delay: 15s; }
@keyframes tutCycle {
    0%   { opacity: 0; transform: translateX(12px); }
    2.5% { opacity: 1; transform: translateX(0); }
    23%  { opacity: 1; transform: translateX(0); }
    25%  { opacity: 0; transform: translateX(-12px); }
    100% { opacity: 0; }
}

/* mini-UI atoms — tiny on purpose: they read as UI, not as text */
.tut-lbl { font-size: 8.5px; color: #64748b; font-weight: 700; margin: 8px 1px 3px; }
.tut-input { background: #fff; border: 1.5px solid #c3cedd; border-radius: 7px; height: 26px;
             display: flex; align-items: center; padding: 0 8px; font-size: 10px; color: #1b2530; }
.tut-btn { margin-top: 10px; background: var(--tut-accent, #2563eb); color: #fff; border-radius: 8px;
           height: 29px; display: flex; align-items: center; justify-content: center;
           font-size: 10.5px; font-weight: 800; }

/* step 1: the number types itself, then the OTP boxes fill */
.tut-type::after { content: ""; animation: tutType 20s infinite steps(2); }
@keyframes tutType { 0%, 3% { content: ""; } 8%, 100% { content: "98765 43210"; } }
.tut-otp { display: flex; gap: 6px; justify-content: center; margin-top: 11px; }
.tut-otp b { width: 26px; height: 31px; background: #fff; border: 1.5px solid #c3cedd; border-radius: 6px;
             display: flex; align-items: center; justify-content: center;
             font-size: 13px; font-weight: 800; color: var(--tut-accent, #2563eb); }
.tut-otp i { font-style: normal; opacity: 0; animation: tutOtp 20s infinite; }
.tut-otp b:nth-child(1) i { animation-delay: 0s; }
.tut-otp b:nth-child(2) i { animation-delay: .3s; }
.tut-otp b:nth-child(3) i { animation-delay: .6s; }
.tut-otp b:nth-child(4) i { animation-delay: .9s; }
@keyframes tutOtp { 0%, 14% { opacity: 0; } 16%, 100% { opacity: 1; } }

/* step 2: family chips + a slot picking itself */
.tut-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.tut-chips span { border: 1.5px solid #c3cedd; background: #fff; color: #475569;
                  border-radius: 12px; padding: 2px 9px; font-size: 9px; font-weight: 700; }
.tut-chips span.on { background: var(--tut-accent, #2563eb); border-color: var(--tut-accent, #2563eb); color: #fff; }
.tut-chips span.add { border-style: dashed; color: var(--tut-accent, #2563eb); background: #fff; }
.tut-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 3px; }
.tut-slots span { background: #fff; border: 1.5px solid #c3cedd; border-radius: 6px; height: 22px;
                  display: flex; align-items: center; justify-content: center; font-size: 8.5px; color: #475569; }
.tut-slots span.pick { animation: tutPick 20s infinite; }
@keyframes tutPick {
    0%, 32%  { background: #fff; border-color: #c3cedd; color: #475569; }
    34%, 100% { background: var(--tut-accent, #2563eb); border-color: var(--tut-accent, #2563eb); color: #fff; }
}

/* step 3: summary + the button presses itself */
.tut-sum { background: #eef2fb; border: 1px solid #d4ddf0; border-radius: 8px; padding: 8px 10px; margin-top: 7px; }
.tut-sum div { font-size: 9px; color: #3d4c63; margin: 2.5px 0; display: flex; justify-content: space-between; gap: 8px; }
.tut-sum b { color: #1b2530; text-align: right; }
.tut-press { animation: tutPress 20s infinite; }
@keyframes tutPress { 0%, 60% { transform: scale(1); } 61.5% { transform: scale(.94); } 63%, 100% { transform: scale(1); } }

/* step 4: the ending — rendered by PHP for THIS clinic's booking mode */
.tut-end { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 20px; }
.tut-ic { width: 52px; height: 52px; border-radius: 50%; color: #fff;
          display: flex; align-items: center; justify-content: center; font-size: 24px;
          animation: tutPop 20s infinite; }
.tut-ic.wait { background: #b06e10; }
.tut-ic.done { background: #15803d; }
@keyframes tutPop { 0%, 76% { transform: scale(0); } 79% { transform: scale(1.1); } 81%, 100% { transform: scale(1); } }
.tut-end-t { font-size: 11.5px; font-weight: 800; color: #1b2530; margin-top: 10px; }
.tut-end-d { font-size: 8.5px; color: #55657a; margin-top: 4px; line-height: 1.5; max-width: 150px; }
.tut-pill { margin-top: 10px; font-size: 8px; font-weight: 800; border-radius: 11px; padding: 3px 9px; }
.tut-pill.wait { background: #fdf0d5; color: #92590c; }
.tut-pill.done { background: #dcf2e4; color: #15803d; }

/* --- captions, highlighted in sync with the phone --- */
.tut-caps { width: 100%; max-width: 340px; }
.tut-cap { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 8px 10px;
           border-radius: 9px; animation: tutCapOn 20s infinite; }
.tut-cap:nth-child(1) { animation-delay: 0s; }
.tut-cap:nth-child(2) { animation-delay: 5s; }
.tut-cap:nth-child(3) { animation-delay: 10s; }
.tut-cap:nth-child(4) { animation-delay: 15s; }
@keyframes tutCapOn {
    0%, 2%   { background: transparent; }
    4%, 23%  { background: #e8eefb; }
    25%, 100% { background: transparent; }
}
.tut-num { width: 22px; height: 22px; border-radius: 50%; background: #e2e8f0; color: #64748b;
           display: flex; align-items: center; justify-content: center;
           font-size: 11px; font-weight: 800; margin-top: 1px; }
.tut-cap-t { font-size: 13px; font-weight: 800; color: #1b2530; }
.tut-cap-d { font-size: 11.5px; color: #64748b; line-height: 1.45; margin-top: 1px; }

/* An animations-off phone gets the steps as stills: step 1 stays on the
   screen, every caption is plain text — the information survives, only the
   motion goes. */
@media (prefers-reduced-motion: reduce) {
    .tut-step, .tut-otp i, .tut-slots span.pick, .tut-press, .tut-ic, .tut-cap, .tut-type::after { animation: none !important; }
    .tut-step.ts1 { opacity: 1; }
    .tut-otp i { opacity: 1; }
    .tut-ic { transform: scale(1); }
    .tut-type::after { content: "98765 43210"; }
}

/* === v8.33.0 — Release 3: tracking-screen book button + booking-result nudge === */
.book-next-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 14px 16px 0; padding: 13px 16px; border-radius: 10px;
    background: var(--pp, #2563eb); color: var(--pp-ink, #fff);
    font-size: 15.5px; font-weight: 700; text-decoration: none;
}
.book-next-btn:active { opacity: .85; }
.bkr-nudge {
    display: flex; align-items: center; gap: 12px; text-align: left;
    background: #eef4ff; border: 1.5px solid #c9d7f5; border-radius: 10px;
    padding: 11px 13px; margin-top: 16px;
}
.bkr-nudge-txt { flex: 1; font-size: 13px; color: #334155; line-height: 1.4; }
.bkr-nudge-txt b { display: block; font-size: 14px; color: #0f1c2b; }
.bkr-nudge-btn {
    border: none; border-radius: 8px; padding: 9px 16px;
    color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer;
}

/* ===================================================================
   v8.82.0: TRACKING LINK REDESIGN - surfaces, the turn card, the chip
   Tokens --pp* come from <style id="pp-theme"> (PHP-derived, plain hex).
   Surfaces --s-* are light by default; the tracking screens flip them
   in dark mode below. Meaning colours (NEXT amber, YOUR TURN green,
   late amber, absent purple, cancelled red, closed slate) never move.
   =================================================================== */
:root {
    --s-bg: #f3f5f8; --s-card: #ffffff; --s-ink: #17212b; --s-ink2: #5a6773;
    --s-line: #e6eaef; --s-line2: #d5dbe2; --s-shadow: 0 2px 12px rgba(0,0,0,0.08);
    --s-amber-bg: #fff7e6; --s-amber-line: #f2d48a; --s-amber-ink: #7a4b00; /* v9.10.3: the late note */
}
#appointment-screen, #clinic-screen, #landing-screen, #error-screen { background: var(--s-bg); color: var(--s-ink); min-height: 100vh; }
#appointment-screen .greeting { color: var(--s-ink); }

/* Header: painted by the tokens; light variant for navbar_style = light */
.portal-header.pp-hdr { background: linear-gradient(135deg, var(--pp), var(--pp2)); color: var(--pp-ink); }
.portal-header.pp-hdr.light { background: var(--s-card); color: var(--s-ink); border-bottom: 3px solid var(--pp); }
.portal-header.pp-hdr.light .lang-btn { background: var(--pp-soft); border-color: var(--pp-line); color: var(--pp-text); }
.portal-header.pp-hdr.light .lang-btn.active { background: var(--pp); color: var(--pp-ink); }
.pp-logo-d { display: none; }
.size-btn {
    margin-left: auto; margin-right: 6px;
    background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.4); color: inherit;
    border-radius: 6px; padding: 2px 7px; font-size: 12px; font-weight: 700; cursor: pointer; line-height: 1.3;
}
.size-btn span { font-size: 9px; vertical-align: super; }
.size-btn[aria-pressed="true"] { background: #fff; color: var(--pp-text); }
.portal-header.pp-hdr.light .size-btn { background: var(--pp-soft); border-color: var(--pp-line); color: var(--pp-text); }
.portal-header.pp-hdr.light .size-btn[aria-pressed="true"] { background: var(--pp); color: var(--pp-ink); }
.size-btn + .lang-toggle { margin-left: 0; }

/* The turn card */
.turn-card {
    margin: 4px 16px 12px; padding: 18px 16px 16px;
    background: var(--s-card); color: var(--s-ink);
    border: 1px solid var(--s-line); border-radius: 18px; text-align: center;
    box-shadow: var(--s-shadow); transition: background .3s, border-color .3s;
}
.tc-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--s-ink2); }
.tc-big { font-size: 56px; font-weight: 800; line-height: 1.05; color: var(--pp-text); margin: 6px 0 4px; font-variant-numeric: tabular-nums; text-wrap: balance; }
.tc-big.mid { font-size: 30px; line-height: 1.15; }
.tc-sub { font-size: 14.5px; color: var(--s-ink2); }
.tc-line { margin-top: 8px; font-size: 14.5px; color: var(--s-ink); }
.tc-eta {
    margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--s-line2);
    font-size: 15px; font-weight: 700; color: var(--s-ink);
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.tc-eta i { color: var(--pp-text); font-size: 16px; }
.tc-small { margin-top: 6px; font-size: 13px; color: var(--s-ink2); }
/* v9.10.3: the late-arrival note - replaces the desk's ↓N/N on the phone */
.tc-late-note {
    margin-top: 12px; padding: 10px 12px; border-radius: 12px; text-align: left;
    background: var(--s-amber-bg); border: 1px solid var(--s-amber-line); color: var(--s-amber-ink);
    font-size: 13.5px; line-height: 1.5;
}
.tc-late-note::before { content: "\26A0\FE0F  "; }
.turn-card.tc-fill .tc-late-note { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4); color: #fff; }
/* v10.0.0: the prescription line on the completed card - a light tint on the dark card, above the stars */
.tc-rx {
    display: block; margin-top: 12px; padding: 11px 12px; border-radius: 12px; text-align: center;
    background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.45); color: #fff;
    font-size: 15px; font-weight: 700; text-decoration: none; line-height: 1.4;
}
.tc-rx:hover, .tc-rx:focus { background: rgba(255,255,255,0.26); color: #fff; text-decoration: none; }
.slip2-rx { display: block; margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; text-align: center; background: #e7f3ee; border: 1px solid #bcdcd0; color: #0e7a5f; font-weight: 700; text-decoration: none; }
.slip2-rx:hover { background: #d3ebe1; color: #0b5f4a; }
.card-row.late-note-row { align-items: flex-start; }
.card-row.late-note-row i { color: #c2871a; margin-top: 3px; }
.card-row.late-note-row span { color: var(--s-amber-ink); font-size: 13.5px; line-height: 1.5; }
html.pp-lg #appointment-screen .tc-late-note, html.pp-lg #appointment-screen .late-note-row span { font-size: 15.5px; }
.tc-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.tc-btn {
    display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none;
    background: var(--pp); color: var(--pp-ink); font-weight: 700; font-size: 15px;
}
.tc-btn.ghost { background: transparent; color: var(--pp-text); border: 1.5px solid var(--pp); }
.tc-btn:active { filter: brightness(.94); }
/* v10.0.3: the rating card - its own .turn-card (light surface) under the completed card, never a
   section inside it. The .tc-fill overrides below no longer reach it, so the popup's own star,
   prompt and textarea styles apply as they do in the overlay. */
/* v10.0.4 (owner: "it looks like a disabled option, nobody will rate"): the card must look ALIVE.
   A gold band and warm border, a bold ink prompt, gold stars at rest (not grey) with one welcoming
   wiggle when the card appears, and a Submit that keeps the clinic colour even before a star is
   chosen (softer, never grey). Same ids, same runtime contract - nothing in portal.js changed. */
.tc-feedback { position: relative; margin-top: 0; padding-top: 44px; overflow: hidden;
               background: linear-gradient(180deg, var(--s-amber-bg) 0%, var(--s-card) 64%);
               border: 1.5px solid var(--s-amber-line); box-shadow: 0 8px 24px rgba(245,158,11,.16); }
.tc-feedback::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
                       background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 25%, #fff3c4 50%, #fbbf24 75%, #f59e0b 100%);
                       background-size: 200% 100%; animation: tcFbBand 3.2s linear infinite; }
.tc-feedback .feedback-prompt { font-size: 18px; font-weight: 800; color: var(--s-ink); margin-bottom: 12px; letter-spacing: -.01em; }
.tc-feedback .feedback-stars { gap: 10px; }
/* v10.0.5: the stars twinkle in a wave every few seconds until one is tapped; tapped stars pop */
.tc-feedback .feedback-stars .star { font-size: 40px; color: #f5b82e; opacity: .55; text-shadow: 0 2px 0 rgba(0,0,0,.06);
                                     animation: tcFbTwinkle 5.5s ease-in-out infinite; animation-delay: .35s; }
.tc-feedback .feedback-stars .star:nth-child(2) { animation-delay: .5s; }
.tc-feedback .feedback-stars .star:nth-child(3) { animation-delay: .65s; }
.tc-feedback .feedback-stars .star:nth-child(4) { animation-delay: .8s; }
.tc-feedback .feedback-stars .star:nth-child(5) { animation-delay: .95s; }
.tc-feedback .feedback-stars .star:hover { opacity: .85; transform: scale(1.2); animation: none; }
.tc-feedback .feedback-stars .star.active { color: #f59e0b; opacity: 1; text-shadow: 0 0 12px rgba(245,158,11,.55); animation: tcFbPop .45s ease-out 1; }
.tc-feedback .feedback-stars:has(.star.active) .star:not(.active) { animation: none; }
/* v10.0.5 (owner): no text in the disabled grey - the Poor / Excellent labels and Skip read in ink */
.tc-feedback .feedback-labels { color: var(--s-ink); font-weight: 700; font-size: 12.5px; margin-bottom: 12px; }
.tc-feedback .feedback-textarea { margin-bottom: 12px; border: 1.5px solid var(--s-amber-line); background: var(--s-card); color: var(--s-ink); }
.tc-feedback .feedback-textarea:focus { border-color: var(--pp, #2563eb); }
.tc-feedback .feedback-textarea::placeholder { color: var(--s-ink2); opacity: 1; }
.tc-feedback .feedback-submit-btn { position: relative; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.14); transition: background .2s, opacity .2s, transform .15s; }
/* v10.0.5: once a star is chosen the Submit carries a slow sheen - the next tap is obvious */
.tc-feedback .feedback-submit-btn:not(:disabled)::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
                                     background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
                                     animation: tcFbSheen 2.6s ease-in-out infinite; pointer-events: none; }
.tc-feedback .feedback-submit-btn:disabled { background: var(--pp, #2563eb); color: var(--pp-ink, #fff); opacity: .55; cursor: not-allowed; box-shadow: none; }
.tc-feedback .feedback-submit-btn:not(:disabled) { opacity: 1; transform: translateY(-1px); }
.tc-feedback .feedback-skip { color: var(--s-ink); }
.tc-feedback .feedback-thanks-icon { font-size: 36px; margin-bottom: 6px; }
.tc-feedback .feedback-thanks-title { font-size: 16px; }
@keyframes tcFbWiggle { 0%, 100% { transform: none; } 20% { transform: rotate(-14deg) scale(1.12); } 40% { transform: rotate(12deg) scale(1.12); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
@keyframes tcFbTwinkle { 0%, 20%, 100% { transform: none; opacity: .55; } 4% { transform: rotate(-14deg) scale(1.15); opacity: 1; } 8% { transform: rotate(12deg) scale(1.15); opacity: 1; } 12% { transform: rotate(-6deg) scale(1.05); opacity: .9; } 16% { transform: rotate(4deg); opacity: .7; } }
@keyframes tcFbPop { 0% { transform: scale(1); } 45% { transform: scale(1.38) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes tcFbBand { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
@keyframes tcFbSheen { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .tc-feedback .feedback-stars .star, .tc-feedback .feedback-stars .star.active, .tc-feedback::before, .tc-feedback .feedback-submit-btn:not(:disabled)::after { animation: none; } }
/* v10.2.1: the family view on the portal home - every profile's prescriptions */
.auth-rx-who { font-weight: 800; font-size: 13px; color: var(--s-ink2, #5a6773); margin: 10px 0 4px; letter-spacing: .04em; text-transform: uppercase; }
.auth-rx-row { display: block; text-decoration: none; color: inherit; background: var(--s-card, #fff); border: 1px solid var(--s-line, #e6eaef); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.auth-rx-row .arx-l1 { display: block; font-weight: 700; font-size: 14px; }
.auth-rx-row .arx-l2 { display: block; color: var(--s-ink2, #5a6773); font-size: 13px; margin-top: 2px; }
.auth-rx-row .arx-st { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; color: #157347; background: #e8f4ee; border: 1px solid #a3d9b8; border-radius: 6px; padding: 1px 8px; }
.auth-rx-row.auth-rx-refill .arx-st { color: #7a4b00; background: #fff7e6; border-color: #f2d48a; }
.auth-rx-row.auth-rx-completed .arx-st { color: var(--s-ink2, #5a6773); background: var(--s-line, #e6eaef); border-color: var(--s-line2, #d5dbe2); }
/* v10.0.2: the rating is optional - a × in the card's corner closes it (owner: never look like a toll gate) */
.tc-fb-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--s-line2);
               background: transparent; color: var(--s-ink2); font-size: 22px; line-height: 1; padding: 0; cursor: pointer; z-index: 2; }
.tc-fb-close:hover, .tc-fb-close:focus { background: var(--s-line); outline: none; }
/* v8.82.2: feedback texts on the filled card - the prompt was #333 on #1b2530 */
.turn-card.tc-fill .feedback-prompt, .turn-card.tc-fill .feedback-thanks-title { color: #fff; }
.turn-card.tc-fill .feedback-labels { color: rgba(255,255,255,.82); font-size: 12.5px; }
.turn-card.tc-fill .feedback-stars .star { color: rgba(255,255,255,.4); }
.turn-card.tc-fill .feedback-stars .star.active { color: #fbbf24; }
.turn-card.tc-fill .feedback-skip { color: rgba(255,255,255,.88); }
.turn-card.tc-fill .feedback-textarea { background: #fff; color: #1b2530; border-color: transparent; }
.turn-card.tc-fill .feedback-textarea::placeholder { color: #6b7a89; }
.turn-card.tc-fill .feedback-submit-btn:disabled { background: rgba(255,255,255,.24); color: rgba(255,255,255,.8); }
.turn-card.tc-fill .feedback-submit-btn:not(:disabled) { background: #fff; color: #1b2530; }

/* Filled shapes: white ink, meaning colours */
.turn-card.tc-fill { color: #fff; border-color: transparent; }
.turn-card.tc-fill .tc-label, .turn-card.tc-fill .tc-sub, .turn-card.tc-fill .tc-line,
.turn-card.tc-fill .tc-eta, .turn-card.tc-fill .tc-small, .turn-card.tc-fill .tc-eta i { color: #fff; opacity: .95; }
.turn-card.tc-fill .tc-big { color: #fff; }
.turn-card.tc-fill .tc-eta { border-top-color: rgba(255,255,255,.35); }
.turn-card.tc-fill .queue-info-toggle { color: #fff; }
.turn-card.tc-fill .queue-info-box { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; }
.turn-card.tc-fill .queue-info-box strong { color: #fff; }
.turn-card.tc-fill .tc-btn { background: #fff; color: var(--pp-text); }
.turn-card.tc-fill .tc-btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.turn-card.tc-up { background: linear-gradient(135deg, var(--pp), var(--pp2)); }
.turn-card.tc-up, .turn-card.tc-up .tc-big, .turn-card.tc-up .tc-label, .turn-card.tc-up .tc-sub,
.turn-card.tc-up .tc-line, .turn-card.tc-up .tc-small, .turn-card.tc-up .tc-eta, .turn-card.tc-up .tc-eta i { color: var(--pp-ink); }
.turn-card.tc-next { background: linear-gradient(135deg, #d97706, #f59e0b); animation: next-pulse 2s ease-in-out infinite; }
.turn-card.tc-turn { background: linear-gradient(135deg, #059669, #10b981); animation: pulse-glow 1.5s ease-in-out infinite; }
.turn-card.tc-done { background: #1b2530; }
.turn-card.tc-absent { background: linear-gradient(135deg, #6f42c1, #8b5cf6); }
.turn-card.tc-can { background: linear-gradient(135deg, #b42318, #dc2626); }
.turn-card.tc-closed { background: linear-gradient(135deg, #334155, #475569); }
.turn-card.tc-next .tc-btn, .turn-card.tc-turn .tc-btn, .turn-card.tc-done .tc-btn,
.turn-card.tc-absent .tc-btn, .turn-card.tc-can .tc-btn, .turn-card.tc-closed .tc-btn { color: #1b2530; }
/* Outlined shapes */
.turn-card.tc-late { border: 2px solid #f59e0b; }
.turn-card.tc-late .tc-big { color: #d97706; }
.turn-card.tc-hold { background: var(--pp-soft); border-color: var(--pp-line); }
.turn-card.tc-leave { border: 2px solid #475569; }
.turn-card.tc-leave .tc-big { color: #334155; }
@keyframes next-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(217,119,6,0.3); transform: scale(1); }
    50% { box-shadow: 0 0 25px rgba(217,119,6,0.5); transform: scale(1.01); }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(5,150,105,0.3); }
    50% { box-shadow: 0 0 30px rgba(5,150,105,0.6); }
}

/* The doctor chip */
.doctor-chip {
    margin: 0 16px 12px; padding: 10px 14px;
    background: var(--s-card); border: 1px solid var(--s-line); border-radius: 10px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14.5px; color: var(--s-ink);
}
.doctor-chip i { font-size: 16px; width: 20px; text-align: center; }
.dc-suffix { margin-left: auto; font-size: 13px; color: var(--s-ink2); text-align: right; }
.dc-suffix:empty { display: none; }

/* Details fold */
.details-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
    font-size: 14px; font-weight: 600; color: var(--s-ink2); text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 12px; padding: 0 0 8px; border-bottom: 1px solid var(--s-line);
}
.details-toggle[aria-expanded="false"] { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.details-chevron { font-size: 14px; color: var(--pp-text); }

/* Ad below the visit; translated label */
.portal-ad-label { color: var(--s-ink2); opacity: .7; }

/* Comfort text size (A+) - remembered per phone */
html.pp-lg #appointment-screen .greeting { font-size: 21px; }
html.pp-lg #appointment-screen .tc-big { font-size: 66px; }
html.pp-lg #appointment-screen .tc-big.mid { font-size: 36px; }
html.pp-lg #appointment-screen .tc-sub, html.pp-lg #appointment-screen .tc-line { font-size: 17px; }
html.pp-lg #appointment-screen .tc-eta { font-size: 17.5px; }
html.pp-lg #appointment-screen .tc-small, html.pp-lg #appointment-screen .queue-info-box { font-size: 14.5px; }
html.pp-lg #appointment-screen .journey-message, html.pp-lg #appointment-screen .doctor-chip { font-size: 17px; }
html.pp-lg #appointment-screen .card-row { font-size: 17.5px; }
html.pp-lg #appointment-screen .step-label { font-size: 12.5px; }
html.pp-lg #appointment-screen .tc-btn { font-size: 17px; padding: 14px; }

/* Dark mode: the phone decides; only the tracking screens flip */
@media (prefers-color-scheme: dark) {
    #appointment-screen, #clinic-screen, #landing-screen, #error-screen {
        --s-bg: #0f151b; --s-card: #18202a; --s-ink: #e9eef3; --s-ink2: #a9b5c1;
        --s-line: #26313d; --s-line2: #34414e; --s-shadow: 0 2px 12px rgba(0,0,0,0.5);
        --s-amber-bg: #2a2410; --s-amber-line: #5a4a1a; --s-amber-ink: #f2d48a; /* v9.10.3 */
        --pp: var(--pp-d); --pp-soft: var(--pp-soft-d); --pp-line: var(--pp-line-d);
        --pp-text: var(--pp-d); --pp-ink: var(--pp-ink-d);
    }
    #appointment-screen .portal-header.pp-hdr, #landing-screen .portal-header.pp-hdr, #clinic-screen .portal-header.pp-hdr, #error-screen .portal-header.pp-hdr { background: var(--s-card); color: var(--s-ink); border-bottom: 3px solid var(--pp); }
    #appointment-screen .pp-logo-l, #landing-screen .pp-logo-l, #clinic-screen .pp-logo-l, #error-screen .pp-logo-l { display: none; }
    #appointment-screen .pp-logo-d, #landing-screen .pp-logo-d, #clinic-screen .pp-logo-d, #error-screen .pp-logo-d { display: inline-block; }
    #appointment-screen .pp-logo-l:only-of-type, #landing-screen .pp-logo-l:only-of-type, #clinic-screen .pp-logo-l:only-of-type, #error-screen .pp-logo-l:only-of-type { display: inline-block; }
    #appointment-screen .lang-btn, #landing-screen .lang-btn, #clinic-screen .lang-btn, #error-screen .lang-btn { background: var(--pp-soft); border-color: var(--pp-line); color: var(--s-ink); }
    #appointment-screen .lang-btn.active, #landing-screen .lang-btn.active, #clinic-screen .lang-btn.active, #error-screen .lang-btn.active { background: var(--pp); color: var(--pp-ink); }
    #appointment-screen .size-btn, #landing-screen .size-btn, #clinic-screen .size-btn, #error-screen .size-btn { background: var(--pp-soft); border-color: var(--pp-line); color: var(--s-ink); }
    #appointment-screen .size-btn[aria-pressed="true"], #landing-screen .size-btn[aria-pressed="true"], #clinic-screen .size-btn[aria-pressed="true"], #error-screen .size-btn[aria-pressed="true"] { background: var(--pp); color: var(--pp-ink); }
    #appointment-screen .turn-card.tc-leave .tc-big { color: #cbd5e1; }
    #appointment-screen .turn-card.tc-late .tc-big { color: #fbbf24; }
    #appointment-screen .doctor-status-note { color: #5fd3e6; }
    /* v10.26.0: the strip is a body-level sibling of the screens now, so the
       tracking screen's dark look reaches it through the sibling combinator
       (same values as --s-card / --s-ink / --s-ink2 above, which are scoped to
       the screen and would not be visible from body level). Only while the
       tracking screen is the active one, exactly as before. */
    #appointment-screen.active ~ .install-prompt, #appointment-screen.active ~ .install-prompt .install-info strong { background: #18202a; color: #e9eef3; }
    #appointment-screen.active ~ .install-prompt .install-info span { color: #a9b5c1; }
    #appointment-screen .feedback-textarea { background: var(--s-bg); color: var(--s-ink); border-color: var(--s-line2); }
    #appointment-screen .feedback-prompt, #appointment-screen .feedback-thanks-title { color: var(--s-ink); }
    #appointment-screen .connection-status { color: var(--s-ink2); }
    #appointment-screen .pp-terms-toggle, #appointment-screen .pp-terms-body { background: var(--s-card); color: var(--s-ink); }
}

/* Reduced motion: no pulse, no bounce */
@media (prefers-reduced-motion: reduce) {
    .turn-card.tc-next, .turn-card.tc-turn, .tc-big.position-changed { animation: none; }
}

/* ============================================================
   v9.1.0 RATING FORK — the Google road on the feedback screen
   ============================================================ */
#feedback-fork { margin-top: 12px; text-align: center; }
.fb-fork-title { font-weight: 700; font-size: 17px; margin-bottom: 4px; }
/* v9.2.3: the fork renders on the WHITE slip popup AND inside the DARK turn
   card of the full portal — every text inherits the host's ink and dims via
   opacity, never a fixed grey that dies on one of the two grounds. */
.fb-fork-sub { font-size: 13px; color: inherit; opacity: .78; margin-bottom: 10px; }
.fb-fork-quote {
    border-left: 3px solid #22c55e; background: #f0fdf4; color: #333;
    font-style: italic; padding: 8px 10px; border-radius: 8px;
    font-size: 13.5px; margin: 0 0 10px; text-align: left; word-break: break-word;
}
.fb-fork-copied {
    display: inline-flex; align-items: center; gap: 4px;
    background: #dcfce7; color: #15803d; border: 1px solid #22c55e;
    border-radius: 999px; font-size: 11px; font-weight: 700;
    padding: 3px 10px; margin-bottom: 8px;
}
.fb-fork-google-btn {
    display: block; width: 100%; background: #16a34a; color: #fff;
    border: none; border-radius: 10px; padding: 12px;
    font-size: 15px; font-weight: 700; cursor: pointer; margin-bottom: 8px;
}
.fb-fork-copy-btn {
    display: block; width: 100%; background: transparent; color: inherit; opacity: .88;
    border: 1px solid rgba(128, 128, 128, .55); border-radius: 10px; padding: 9px;
    font-size: 13px; cursor: pointer; margin-bottom: 8px;
}
.fb-fork-steps { font-size: 11.5px; color: inherit; opacity: .68; }
.fb-fork-small-link { display: inline-block; font-size: 12px; color: inherit; opacity: .72; text-decoration: underline; margin-top: 6px; }