/* WebinarHub Phase 2: use existing theme; no global visual redesign. */
.wh-ux-overlay[hidden], .wh-ux-toast[hidden] { display: none !important; }
.wh-ux-overlay { position: fixed; inset: 0; z-index: 15000; background: rgba(5, 33, 48, .52); display: flex; justify-content: center; align-items: center; padding: 20px; }
.wh-ux-dialog { box-sizing: border-box; width: min(100%, 430px); max-height: calc(100dvh - 40px); overflow-y: auto; padding: clamp(23px, 4vw, 38px); background: #fff; color: #153a4b; border-radius: 17px; box-shadow: 0 25px 70px rgba(0, 22, 37, .25); text-align: center; }
.wh-ux-dialog h2 { margin: 15px 0 9px; font-size: 21px; }
.wh-ux-dialog p { line-height: 1.55; margin: 0; }
.wh-ux-wait-note { font-size: 12px; color: #647987; padding-top: 15px; }
.wh-ux-spinner { display: block; height: 43px; width: 43px; border: 4px solid #d4e9eb; border-top-color: #007f89; border-radius: 50%; margin: 0 auto; animation: wh-ux-spin .8s linear infinite; }
.wh-ux-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 25px; }
/* Even non-blocking page navigation loads in the viewport centre. */
.wh-ux-lightweight { inset: 0; align-items: center; justify-content: center; background: transparent; pointer-events: none; }
.wh-ux-lightweight .wh-ux-dialog { width: min(320px, 100%); text-align: center; padding: 18px 21px; }
.wh-ux-lightweight .wh-ux-spinner { width: 30px; height: 30px; border-width: 3px; margin: 0 auto; }
.wh-ux-lightweight h2 { font-size: 15px; margin: 10px 0 0; }
.wh-ux-lightweight #wh-ux-description, .wh-ux-lightweight .wh-ux-wait-note { display: none; }
.wh-ux-toast { position: fixed; z-index: 15500; right: 20px; bottom: 22px; max-width: min(420px, calc(100vw - 40px)); background: #fff; color: #79321f; border: 1px solid #e3b7a4; padding: 15px 20px; border-radius: 12px; box-shadow: 0 9px 28px rgba(0,0,0,.16); }
@keyframes wh-ux-spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) { .wh-ux-overlay { padding: 16px; } .wh-ux-dialog { max-height: calc(100dvh - 32px); } .wh-ux-actions { flex-direction: column-reverse; } .wh-ux-actions button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .wh-ux-spinner { animation-duration: 2s; } }

/* Shared progress feedback. Animated stripe is an indeterminate indicator,
   not a fabricated completion percentage. */
.wh-ux-dialog { position: relative; overflow-x: hidden; overflow-y: auto; }
.wh-ux-progress-track { height: 5px; overflow: hidden; border-radius: 999px; background: #dcebee; margin-top: 20px; }
.wh-ux-progress-indicator { display: block; height: 100%; width: 36%; border-radius: inherit; background: #007f89; animation: wh-ux-progress 1.65s ease-in-out infinite; }
@keyframes wh-ux-progress { from { transform: translateX(-110%); } to { transform: translateX(290%); } }
.wh-ux-lightweight .wh-ux-progress-track { display: block; margin-top: 13px; }
body.wh-ux-busy { cursor: progress; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .wh-ux-progress-indicator { animation: none; width: 100%; opacity: .6; } }

/* Same centred result experience on every page for completed user actions. */
.wh-ux-dialog-result .wh-ux-actions {justify-content:center;margin-top:23px;}
.wh-ux-dialog-result .wh-ux-actions .btn {min-width:152px;min-height:44px;}
.wh-ux-result-symbol {display:grid;place-items:center;width:52px;height:52px;margin:0 auto 13px;border-radius:50%;font-size:25px;font-weight:800;background:#e8f6f4;color:#087c82;}
.wh-ux-result-symbol.is-warning {background:#fff3df;color:#9a6000;}
.wh-ux-result-symbol.is-error {background:#fbe9e7;color:#a5332b;}
.wh-webinar-success-symbol.wh-ux-result-warning {background:#fff3df;color:#985400;}
.wh-ux-dialog-result p {overflow-wrap:anywhere;}
@media(max-width:480px){.wh-ux-dialog-result .wh-ux-actions .btn {width:100%;}}