/* ==========================================================================
   MedConfirm — the skin for the platform's ONE themed confirm/alert popup
   (js/glass-confirm.js). MOVED OUT OF glass-ui.css, §3.421.1.

   ⭐ WHY IT IS ITS OWN FILE NOW: `full_screen_master.blade.php` — the lecture
   video / in-lesson quiz layout — does NOT load `glass-ui.css`, and it should
   not: that file is 1,596 lines of dashboard shell including the sidebar
   layout variables. But it DOES need this popup, because §3.421.1 replaced the
   exam's native `beforeunload` dialog (which is a TRAP in the desktop app, not
   a dialog) with `MedConfirm`. A popup with no skin is a fix that ships broken.

   ⛔ THIS IS A MOVE, NOT A COPY. The rules are gone from `glass-ui.css` — the
   #120/#128/#145/#150 family in this codebase is *two copies of one thing*, and
   a skin that exists twice is a skin that gets fixed once.
   ⚠ Every loader of `glass-confirm.js` must also load THIS file. There are
   three, and they were enumerated rather than assumed:
     · resources/views/frontend/meducatetheme/partials/_student_admin_header.blade.php
     · resources/views/backend/partials/header.blade.php
     · resources/views/frontend/meducatetheme/layouts/full_screen_master.blade.php

   ⚠ `consult-hub.css` carries scoped overrides (`.ch-rest-pop .qb-confirm-card`).
   They are higher specificity (0,2,0 vs 0,1,0), so they still win regardless of
   which stylesheet loads first — checked, not assumed.

   NOTE (kept from glass-ui.css): the pop keyframe used var(--qb-ease), which is
   scoped to .qb-root — the popup sits on <body>, so it never resolved; the
   easing is literal here.
   ========================================================================== */
.qb-confirm { position: fixed; inset: 0; z-index: 2147483400; display: flex; align-items: center; justify-content: center; background: rgba(2, 8, 20, .62); -webkit-backdrop-filter: blur(7px) saturate(140%); backdrop-filter: blur(7px) saturate(140%); font-family: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, sans-serif; animation: qb-confirm-in .2s ease; }
@keyframes qb-confirm-in { from { opacity: 0; } to { opacity: 1; } }
.qb-confirm-card { width: min(92vw, 430px); background: linear-gradient(150deg, rgba(12, 34, 78, .96), rgba(0, 18, 52, .97)); border: 1px solid rgba(236, 164, 36, .34); border-radius: 20px; padding: 28px 30px; box-shadow: 0 26px 74px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .06); text-align: center; color: #fff; animation: qb-confirm-pop .28s cubic-bezier(.22, 1, .36, 1); }
@keyframes qb-confirm-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.qb-confirm-h { font-size: 18px; font-weight: 800; color: #FFDAA4; margin-bottom: 10px; }
.qb-confirm-body { font-size: 13.5px; line-height: 1.65; color: rgba(255, 255, 255, .8); margin-bottom: 22px; }
.qb-confirm-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.qb-confirm-btns button { border: 0; border-radius: 12px; padding: 12px 24px; font: 800 13.5px 'Plus Jakarta Sans', 'Segoe UI', sans-serif; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.qb-confirm-btns button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.qb-confirm-cancel { background: rgba(255, 255, 255, .08); color: #cdd8ee; border: 1px solid rgba(255, 255, 255, .18) !important; }
.qb-confirm-ok { background: linear-gradient(100deg, #eca424, #FFDAA4); color: #3a2600; box-shadow: 0 6px 18px rgba(236, 164, 36, .35); }
.qb-confirm-ok.qb-danger { background: linear-gradient(100deg, #e5484d, #ff8a8d); color: #fff; box-shadow: 0 6px 18px rgba(229, 72, 77, .4); }

/* ==========================================================================
   §3.517 — `.med-legal`: the same popup, holding a legal DOCUMENT.

   `MedConfirm`'s card is built for a sentence — 430px wide, centred, no scroll.
   A Terms of Use is ~132 KB of headings, lists and tables. This variant widens
   it, left-aligns it and lets the body scroll; everything else (the chrome, the
   gold OK button, the backdrop, the animations) is inherited unchanged.
   ⭐ A skin, not a second modal — `glass-confirm.js` takes `opts.cls` for
   exactly this, so one caller can reshape its popup without forking the file.
   ========================================================================== */
.med-legal .qb-confirm-card { width: min(94vw, 860px); max-height: 88vh; display: flex; flex-direction: column; text-align: left; padding: 24px 26px 22px; }
.med-legal .qb-confirm-h { text-align: left; font-size: 20px; margin-bottom: 14px; flex: 0 0 auto; }
/* The scroller. `overscroll-behavior` stops a flick at the end of the document
   from scrolling the registration form behind it — on a phone that reads as the
   popup jumping. */
.med-legal .qb-confirm-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; text-align: left; font-size: 14px; line-height: 1.72; color: rgba(255, 255, 255, .84); margin-bottom: 18px; padding-right: 10px; }
.med-legal .qb-confirm-btns { flex: 0 0 auto; }

.med-legal .qb-confirm-body h2 { font-size: 18px; font-weight: 800; color: #FFDAA4; margin: 0 0 10px; }
.med-legal .qb-confirm-body h3 { font-size: 16px; font-weight: 700; color: #fff; margin: 26px 0 10px; padding-top: 14px; border-top: 1px solid rgba(236, 164, 36, .16); }
.med-legal .qb-confirm-body h4 { font-size: 14.5px; font-weight: 700; color: #FFDAA4; margin: 18px 0 8px; }
.med-legal .qb-confirm-body p { margin: 0 0 11px; }
.med-legal .qb-confirm-body strong { color: #fff; font-weight: 700; }
.med-legal .qb-confirm-body ul,
.med-legal .qb-confirm-body ol { margin: 0 0 13px; padding-left: 22px; }
.med-legal .qb-confirm-body li { margin: 0 0 6px; }
.med-legal .qb-confirm-body a { color: #eca424; text-decoration: underline; text-underline-offset: 3px; }
.med-legal .qb-confirm-body hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .12); margin: 22px 0; }
.med-legal .qb-confirm-body blockquote { margin: 16px 0; padding: 14px 18px; background: rgba(236, 164, 36, .07); border-left: 3px solid #eca424; border-radius: 0 10px 10px 0; color: #FFDAA4; }
.med-legal .qb-confirm-body blockquote strong { color: #eca424; }
/* Tables scroll on their own so a wide one cannot stretch the card. */
.med-legal .qb-confirm-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; display: block; overflow-x: auto; }
.med-legal .qb-confirm-body th,
.med-legal .qb-confirm-body td { border: 1px solid rgba(255, 255, 255, .14); padding: 8px 10px; text-align: left; vertical-align: top; }
.med-legal .qb-confirm-body th { background: rgba(236, 164, 36, .10); color: #FFDAA4; font-weight: 700; }
.med-legal .med-legal-loading { padding: 26px 0; text-align: center; color: rgba(255, 255, 255, .6); }

@media (max-width: 640px) {
    .med-legal .qb-confirm-card { width: 96vw; max-height: 92vh; padding: 18px 16px 16px; }
    .med-legal .qb-confirm-body { font-size: 13.5px; padding-right: 4px; }
}