/* 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 { width: min(100%, 430px); 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; }
.wh-ux-lightweight { inset: auto 18px 18px auto; background: transparent; padding: 0; pointer-events: none; }
.wh-ux-lightweight .wh-ux-dialog { width: min(320px, calc(100vw - 36px)); display: flex; text-align: left; align-items: center; gap: 12px; padding: 13px 17px; }
.wh-ux-lightweight .wh-ux-spinner { width: 23px; height: 23px; flex: none; border-width: 3px; }
.wh-ux-lightweight h2 { font-size: 14px; margin: 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-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: hidden; }
.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: none; }
body.wh-ux-busy { cursor: progress; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .wh-ux-progress-indicator { animation: none; width: 100%; opacity: .6; } }