/* Moved out of resources/views/partials/passkey-guide.blade.php on 2026-10-11 so browsers cache it.
   Edit THIS file; the partial links it with ?v=<mtime>. */
    .swal2-container.swal-pk-guide-wrap { padding: 14px !important; padding-top: calc(14px + var(--pkg-top, 0px)) !important; }
    .swal-pk-guide { width: min(640px, 94vw) !important; padding: 0 !important; border-radius: 20px !important; overflow: hidden; text-align: start !important; }
    .swal-pk-guide .swal2-html-container { margin: 0 !important; padding: 0 !important; text-align: start !important; font-size: 14px; overflow: hidden; }
    .swal-pk-guide .swal2-close { top: 8px; right: 10px; z-index: 3; color: #fff !important; opacity: .9; }
    .pkg-head { position: relative; padding: 16px 44px 14px 18px; background: linear-gradient(135deg, #0f2d6b 0%, #1d4ed8 60%, #06b6d4 100%); color: #fff; }
    .pkg-head h3 { margin: 0 0 2px; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
    .pkg-head h3 svg { width: 22px; height: 22px; flex: 0 0 22px; }
    .pkg-head p { margin: 0; font-size: 12.5px; opacity: .9; }
    .pkg-tabs { display: flex; flex-wrap: nowrap; gap: 6px; padding: 12px 14px 4px; overflow-x: auto; scrollbar-width: none; }
    .pkg-tab { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--swal-border, rgba(15,23,42,.14)); background: var(--swal-field, #fff); color: var(--swal-text, #111827); border-radius: 999px; padding: 6px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; font-family: inherit; }
    .pkg-tab svg { width: 16px; height: 16px; flex: 0 0 16px; }
    .pkg-tab.is-on { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
    /* The list takes the whole screen height left under the header, tabs and tip, so every step shows without scrolling. */
    .pkg-steps { max-height: calc(100vh - 250px - var(--pkg-top, 0px)); max-height: calc(100dvh - 250px - var(--pkg-top, 0px)); overflow-y: auto; padding: 6px 14px 10px; }
    .pkg-step { display: grid; grid-template-columns: 124px 1fr; gap: 14px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--swal-hairline, rgba(15,23,42,.08)); }
    .pkg-step:last-child { border-bottom: 0; }
    .pkg-pic { width: 124px; height: 82px; border-radius: 12px; background: #eef4ff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .pkg-pic svg { width: 110px; height: 78px; display: block; }
    /* Short screens (laptops at 768px): smaller pictures so the longest tab still fits. */
    @media (max-height: 820px) { .pkg-pic { height: 66px; } .pkg-pic svg { width: 90px; height: 62px; } .pkg-step { padding: 5px 0; } }
    .pkg-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #1d4ed8; color: #fff; font-size: 12px; font-weight: 700; margin-inline-end: 6px; vertical-align: middle; }
    .pkg-txt { color: var(--swal-text, #111827); font-size: 13.5px; line-height: 1.5; }
    .pkg-txt small { display: block; color: var(--swal-muted, #4b5563); font-size: 12px; margin-top: 2px; }
    .pkg-no { display: inline-block; background: #fee2e2; color: #b91c1c; font-weight: 700; border-radius: 6px; padding: 1px 7px; }
    html[data-theme="dark"] .pkg-no, html[data-bs-theme="dark"] .pkg-no, html.dark .pkg-no, body.dark .pkg-no { background: rgba(239, 68, 68, .22); color: #fca5a5; }
    .pkg-tip { margin: 4px 14px 14px; padding: 9px 12px; border-radius: 12px; background: rgba(245, 158, 11, .14); color: #b45309; font-size: 12.5px; line-height: 1.45; display: flex; gap: 8px; align-items: flex-start; }
    .pkg-tip svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
    html[data-theme="dark"] .pkg-pic, html[data-bs-theme="dark"] .pkg-pic, html.dark .pkg-pic, body.dark .pkg-pic { background: rgba(255,255,255,.08); }
    html[data-theme="dark"] .pkg-tip, html[data-bs-theme="dark"] .pkg-tip, html.dark .pkg-tip, body.dark .pkg-tip { color: #fcd34d; background: rgba(245, 158, 11, .12); }
    /* Dark mode, whichever way the app marks it (WowDash data-theme, Bootstrap data-bs-theme,
       Tailwind html.dark in edoc-v2/smart-booking, body.dark): the card paints itself, so apps
       without popup-theme.css still get light text on a dark card and dark tabs. */
    html[data-theme="dark"] .swal-pk-guide, html[data-bs-theme="dark"] .swal-pk-guide, html.dark .swal-pk-guide, body.dark .swal-pk-guide { --swal-text: #e5e7eb; --swal-muted: #94a3b8; --swal-field: rgba(255,255,255,.06); --swal-border: rgba(255,255,255,.16); --swal-hairline: rgba(255,255,255,.09); background: #0f172a !important; color: #e5e7eb !important; box-shadow: 0 18px 50px rgba(0,0,0,.55) !important; border: 1px solid rgba(255,255,255,.1); }
    html[data-theme="dark"] .pkg-tab:not(.is-on):hover, html[data-bs-theme="dark"] .pkg-tab:not(.is-on):hover, html.dark .pkg-tab:not(.is-on):hover, body.dark .pkg-tab:not(.is-on):hover { background: rgba(255,255,255,.12); }
    html[data-theme="dark"] .pkg-txt b, html[data-bs-theme="dark"] .pkg-txt b, html.dark .pkg-txt b, body.dark .pkg-txt b { color: #fff; }
    .pkg-fab { position: fixed; top: calc(14px + var(--pkg-top, 0px)); right: 14px; z-index: 1050; display: none; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.35); background: rgba(8,16,38,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; border-radius: 999px; padding: 8px 14px; font-size: 13.5px; cursor: pointer; font-family: inherit; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
    .pkg-fab svg { width: 18px; height: 18px; }
    .pkg-fab.is-shown { display: inline-flex; }
    /* Phones: placed by placeFab() under the calendar, centred, in the page's flow. */
    .pkg-fab.pkg-fab-inline { position: static; margin: 14px auto 0; }
    .pkg-fab.pkg-fab-inline.is-shown { display: flex; width: fit-content; }
    /* Phones: the top corner holds the logo and company name, so the button sits bottom-right. */
    /* Phones: the top corner holds the logo and company name, so the button sits bottom-right. */
    @media (max-width: 768px) { .pkg-fab { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } }
    /* Phones (2026-10-01): no blue box over the power lines — the icon and
       label stand on the scene by themselves. */
    @media (max-width: 768px) { .pkg-fab { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: 0 1px 6px rgba(0,0,0,.6); } .pkg-fab svg { filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); } }
    /* 'fab' => 'bottom': bottom-right on every screen (edoc-v2 sign-in, where
       the top-right button covered the logo of the centred panel on desktop). */
    /* Sign-in page on a computer (2026-09-27): the login card stays in the
       centre; the guide shrinks into the free space right of it (--pkg-w, set
       by compact()) with smaller tabs, pictures and text. */
    /* 2026-09-28: the guide fills the free space beside the card (--pkg-w,
       up to 900px); the small "compact" sizes below only when that is under 560px. */
    html.pkg-fit .swal-pk-guide { width: var(--pkg-w, 640px) !important; }
    html.pkg-wide .pkg-steps { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-content: start; }
    html.pkg-wide .pkg-step:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
    html.pkg-compact .swal-pk-guide { width: var(--pkg-w, 420px) !important; border-radius: 16px !important; }
    html.pkg-compact .pkg-head { padding: 12px 40px 10px 14px; }
    html.pkg-compact .pkg-head h3 { font-size: 15px !important; }
    html.pkg-compact .pkg-head p { font-size: 12px !important; }
    html.pkg-compact .pkg-tabs { flex-wrap: wrap; gap: 4px; padding: 8px 10px 2px; }
    html.pkg-compact .pkg-tab { flex: 0 0 auto; font-size: 12px !important; padding: 4px 8px !important; }
    html.pkg-compact .pkg-steps { padding: 4px 10px 8px; }
    html.pkg-compact .pkg-step { grid-template-columns: 84px 1fr; gap: 8px; padding: 4px 0; }
    html.pkg-compact .pkg-pic { width: 84px; height: 58px; border-radius: 9px; }
    html.pkg-compact .pkg-pic svg { width: 78px; height: 54px; }
    html.pkg-compact .pkg-txt { font-size: 13.5px !important; line-height: 1.5; }
    html.pkg-compact .pkg-tip { font-size: 12px !important; }
    .pkg-fab.pkg-fab-bottom { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
    @media (max-width: 600px) {
        .swal2-container.swal-pk-guide-wrap { padding: 8px !important; padding-top: calc(8px + var(--pkg-top, 0px)) !important; }
        .pkg-tabs { flex-wrap: wrap; }
        .pkg-tab { flex: 0 0 auto; }
        .pkg-step { grid-template-columns: 92px 1fr; }
        .pkg-pic { width: 92px; height: 70px; }
        .pkg-pic svg { width: 86px; height: 64px; }
        /* Phones: the short title on one line, sized to the screen. */
        .pkg-head { padding: 14px 40px 12px 14px; }
        .pkg-head h3 { font-size: clamp(13px, 4.3vw, 17px); white-space: nowrap; gap: 6px; }
        .pkg-head h3 svg { width: 18px; height: 18px; flex-basis: 18px; }
        .pkg-head p { font-size: clamp(11px, 3.2vw, 12.5px); }
        .pkg-long { display: none; }
        .pkg-steps { max-height: calc(100vh - 300px - var(--pkg-top, 0px)); max-height: calc(100dvh - 300px - var(--pkg-top, 0px)); }
    }