/* v12.52.00 - Patient App Adoption (patient-portal/js/app-adopt.js): the moment cards, the "Why the app?" sheet and the
   "Allow alerts" card. Colours from the clinic's theme tokens (--pp...) with plain fallbacks. The cards sit on the
   sign-in pages (always light), so they are light; the sheet and the alerts card follow the phone's dark mode. */
.ppa-slot { margin-top: 16px; }
.ppa-slot[hidden] { display: none !important; }
.ppa-card {
    background: var(--pp-soft, #eef4ff); border: 1.5px solid var(--pp-line, #c9d7f5); border-radius: 14px;
    padding: 13px 14px; text-align: left; color: #17212b; display: flex; flex-direction: column; gap: 10px;
}
.ppa-head { display: flex; gap: 11px; align-items: flex-start; }
.ppa-ic {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
    box-shadow: 0 1px 4px rgba(10, 28, 50, .1);
}
.ppa-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.4; color: #334155; }
.ppa-tx b { font-size: 15.5px; color: #0f1c2b; line-height: 1.3; }
.ppa-gains { display: flex; flex-direction: column; gap: 8px; }
.ppa-gain { display: flex; gap: 10px; align-items: center; font-size: 13.5px; line-height: 1.35; }
.ppa-gic {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; background: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1;
}
.ppa-gtx { display: flex; flex-direction: column; min-width: 0; color: #55606b; }
.ppa-gtx b { color: #17212b; font-size: 14px; }
.ppa-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ppa-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 15px;
    border-radius: 10px; border: 1.5px solid transparent; font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.2;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ppa-btn:focus-visible { outline: 3px solid var(--pp, #2563eb); outline-offset: 2px; }
.ppa-btn:active { transform: scale(.98); }
.ppa-pri { background: var(--pp, #2563eb); border-color: var(--pp, #2563eb); color: var(--pp-ink, #fff); }
.ppa-out { background: #fff; border-color: var(--pp, #2563eb); color: var(--pp-text, #1d4ed8); }
.ppa-lite { background: transparent; border-color: #cbd5e1; color: #475569; }
.ppa-big { width: 100%; min-height: 48px; font-size: 15.5px; }

/* the "Why the app?" sheet - slides up from the bottom, above the Reception tab */
.ppa-modal {
    position: fixed; inset: 0; z-index: 2147483500; background: rgba(6, 18, 31, .5);
    display: flex; align-items: flex-end; justify-content: center;
}
.ppa-sheet {
    position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
    background: #fff; color: #17212b; border-radius: 20px 20px 0 0;
    padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .3); animation: ppa-up .25s ease-out;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
@keyframes ppa-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ppa-grab { width: 42px; height: 4px; border-radius: 4px; background: #d5dce3; align-self: center; }
.ppa-x {
    position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0;
    background: #eef2f5; color: #55606b; font-size: 24px; line-height: 38px; padding: 0; cursor: pointer;
}
.ppa-sh { margin: 4px 44px 0 0; font-size: 19px; font-weight: 800; line-height: 1.3; }
.ppa-sub { font-size: 13.5px; color: #55606b; margin-top: -6px; }
.ppa-sheet .ppa-gains { gap: 11px; padding: 4px 0; }
.ppa-sheet .ppa-gic { width: 38px; height: 38px; font-size: 20px; background: var(--pp-soft, #eef4ff); }
.ppa-sheet .ppa-gain { font-size: 14px; }
.ppa-sheet .ppa-gtx b { font-size: 15px; }
.ppa-sacts { display: flex; flex-direction: column; gap: 8px; }

/* after install: "Allow alerts" - a card at the bottom, never over the sheet or the iPhone guide */
.ppa-dock {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 120;
    max-width: 460px; margin: 0 auto; background: #fff; color: #17212b; border-radius: 16px;
    border: 1.5px solid var(--pp-line, #c9d7f5); box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; animation: ppa-up .25s ease-out;
}
.ppa-dock .ppa-ic { background: var(--pp-soft, #eef4ff); box-shadow: none; }
body.ppa-dock-up #opdchat-launch[data-place^="bottom"] { bottom: calc(var(--ppa-dock-h, 120px) + 24px); }

@media (prefers-color-scheme: dark) {
    .ppa-sheet, .ppa-dock { background: #18202a; color: #e9eef3; border-color: #26313d; }
    .ppa-sheet .ppa-gtx, .ppa-sub, .ppa-dock .ppa-tx { color: #a9b5c1; }
    .ppa-sheet .ppa-gtx b, .ppa-dock .ppa-tx b, .ppa-sh { color: #e9eef3; }
    .ppa-sheet .ppa-gic, .ppa-dock .ppa-ic { background: #26313d; }
    .ppa-x { background: #26313d; color: #c9d3dc; }
    .ppa-grab { background: #34414e; }
    .ppa-sheet .ppa-lite, .ppa-dock .ppa-lite { border-color: #34414e; color: #c9d3dc; }
    .ppa-sheet .ppa-pri, .ppa-dock .ppa-pri { background: var(--pp-d, #60a5fa); border-color: var(--pp-d, #60a5fa); color: var(--pp-ink-d, #0f151b); }
}
@media (prefers-reduced-motion: reduce) { .ppa-sheet, .ppa-dock { animation: none; } .ppa-btn:active { transform: none; } }