/* ═══════════════════════════════════════════════════════════════════════════ emergency.css — SOS button + emergency modal (UCC Nyakrom Portal) Import in : ═══════════════════════════════════════════════════════════════════════════ */ /* ── Fixed SOS button ──────────────────────────────────────────────────────── */ .sos-btn { position: fixed; bottom: 1.25rem; left: 1.25rem; /* bottom-left: the Botpress chatbot occupies bottom-right */ right: auto; z-index: 9999; background: #DC2626; color: #fff; font-weight: 800; font-size: 15px; font-family: inherit; letter-spacing: .03em; padding: .75rem 1.25rem; border: none; border-radius: 2rem; cursor: pointer; box-shadow: 0 4px 14px rgba(220, 38, 38, .45), 0 2px 4px rgba(0, 0, 0, .2); transition: background .2s ease, transform .2s ease, box-shadow .2s ease; } .sos-btn:hover { background: #B91C1C; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(220, 38, 38, .55), 0 3px 6px rgba(0, 0, 0, .25); } .sos-btn:active { transform: translateY(0); } /* ── Modal overlay ─────────────────────────────────────────────────────────── */ .em-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, .55); display: none; align-items: center; justify-content: center; padding: 1rem; } .em-overlay.open { display: flex; } /* ── Modal card ────────────────────────────────────────────────────────────── */ .em-card { position: relative; background: #fff; border-radius: .75rem; border-left: 5px solid #DC2626; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 1.5rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); } .em-title { font-size: 1.25rem; font-weight: 800; color: #0d1b3e; margin: 0 0 1rem; } .em-close { position: absolute; top: .75rem; right: .85rem; background: none; border: none; font-size: 26px; line-height: 1; color: #9ca3af; cursor: pointer; padding: .15rem; } .em-close:hover { color: #4b5563; } /* ── Section headers ───────────────────────────────────────────────────────── */ .em-section-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #6b7280; margin: 1.1rem 0 .5rem; } .em-section-head:first-of-type { margin-top: 0; } /* ── Emergency call buttons ────────────────────────────────────────────────── */ .em-call-btn { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; background: #FEF2F2; border: 1px solid #FECACA; border-radius: .5rem; padding: .85rem 1rem; margin-bottom: .5rem; text-decoration: none; transition: background .15s ease; } .em-call-btn:hover { background: #FEE2E2; } .em-call-left { display: flex; align-items: center; gap: .65rem; min-width: 0; } .em-call-icon { font-size: 22px; flex-shrink: 0; } .em-call-label { display: block; font-weight: 700; font-size: 15px; color: #111827; } .em-call-note { display: block; font-size: 12px; color: #6b7280; } .em-call-phone { font-weight: 800; font-size: 16px; color: #DC2626; white-space: nowrap; } /* ── ICE contact card ──────────────────────────────────────────────────────── */ .em-ice-card { background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: .5rem; padding: 1rem; } .em-ice-name { font-weight: 700; font-size: 15px; color: #111827; } .em-ice-rel { font-size: 13px; color: #6b7280; margin-bottom: .5rem; } .em-ice-phone { display: inline-block; margin-right: .8rem; margin-top: .2rem; font-weight: 700; font-size: 14px; color: #1d4ed8; text-decoration: none; } .em-ice-phone:hover { text-decoration: underline; } .em-ice-empty { font-size: 13px; color: #6b7280; margin: 0; } /* ── Mobile ────────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .sos-btn { bottom: 1rem; left: 1rem; right: auto; padding: .7rem 1.1rem; font-size: 14px; } .em-card { padding: 1.15rem; } .em-call-btn { padding: .75rem .85rem; } .em-call-label { font-size: 14px; } .em-call-phone { font-size: 15px; } }