/* Shared dialog surfaces for the website and administration console. */
:root{--dialog-mask:rgba(23,35,62,.44);--dialog-line:#e6ebf2;--dialog-radius:16px;--dialog-shadow:0 24px 80px rgba(23,36,61,.2);--dialog-blue:#2878ed}
body:has(dialog[open]){overflow:hidden}
dialog:not(.auth-dialog){width:min(700px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:24px;border:1px solid var(--dialog-line);border-radius:var(--dialog-radius);background:#fff;color:#17243d;box-shadow:var(--dialog-shadow);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
dialog:not(.auth-dialog)::backdrop{background:var(--dialog-mask);backdrop-filter:blur(4px)}
.auth-dialog{padding:16px;background:var(--dialog-mask);backdrop-filter:blur(4px)}
.auth-dialog::backdrop{background:transparent}
.auth-dialog .auth-card{max-width:420px;max-height:calc(100dvh - 32px);padding:24px;border:1px solid var(--dialog-line);border-radius:var(--dialog-radius);background:#fff;color:#17243d;box-shadow:var(--dialog-shadow);scrollbar-width:thin;overscroll-behavior:contain}
dialog .dialog-head,.auth-dialog .auth-heading{min-height:36px;padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--dialog-line);gap:12px}
dialog .dialog-head h2,.auth-dialog .auth-heading h1,dialog #user-moderation-title{font-size:22px;line-height:1.4;font-weight:650;letter-spacing:-.4px;margin:0;color:#17243d}
.auth-dialog .auth-heading{padding-right:36px}
.auth-dialog .auth-heading p{font-size:13px;line-height:1.7;color:#7d899e;margin-top:4px}
dialog #user-moderation-title{padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--dialog-line)}
:is(dialog .dialog-head [data-close],.auth-dialog .auth-close){position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;min-height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:#7d899e;font-size:0;cursor:pointer}
:is(dialog .dialog-head [data-close],.auth-dialog .auth-close)::before,:is(dialog .dialog-head [data-close],.auth-dialog .auth-close)::after{content:"";position:absolute;left:9px;top:15px;width:14px;height:1.5px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
:is(dialog .dialog-head [data-close],.auth-dialog .auth-close)::after{transform:rotate(-45deg)}
:is(dialog .dialog-head [data-close],.auth-dialog .auth-close)>svg{display:none}
:is(dialog .dialog-head [data-close],.auth-dialog .auth-close):hover:not(:disabled){background:#f2f6fc;color:#26354a}
.auth-dialog .auth-card .auth-close{position:absolute;top:20px;right:20px}
dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),textarea){border:1px solid #dfe5ee;border-radius:8px;background:#fff;color:#26354a;padding:10px 12px;font-size:14px;line-height:1.5}
dialog input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]){min-height:42px}
dialog :is(input,textarea):focus-visible{outline:none;border-color:var(--dialog-blue);box-shadow:0 0 0 3px #2878ed1c}
dialog :is(.button,button[type=submit],#payment-action-confirm){min-height:42px;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;line-height:1.5}
dialog :is(.button:not(.secondary):not(.danger),button[type=submit]:not(.secondary):not(.danger),#payment-action-confirm){border:1px solid var(--dialog-blue);background:var(--dialog-blue);color:#fff}
dialog button.secondary:not([data-close]),dialog .button.secondary{min-height:42px;padding:10px 20px;border:1px solid #dfe5ee;border-radius:8px;background:#fff;color:#46546b;font-size:14px;line-height:1.5}
dialog button.danger{border-color:#c74646;background:#c74646;color:#fff}
dialog button.secondary.danger{border-color:#edcbcb;background:#fff;color:#b62929}
dialog .actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--dialog-line)}
.auth-dialog .auth-switch{margin-top:20px;padding-top:16px;border-top:1px solid var(--dialog-line);font-size:13px;line-height:1.7}
dialog :is(button,a,input,textarea,[role=combobox]):focus-visible{outline:3px solid #9fc2f7;outline-offset:3px}
#user-moderation-dialog,#payment-action-dialog{max-width:480px}
dialog[open]:not(.auth-dialog),.auth-dialog[open] .auth-card{animation:dialog-enter .16s ease-out}
@keyframes dialog-enter{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}
@media(max-width:720px){dialog:not(.auth-dialog){width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:20px}.auth-dialog{padding:12px}.auth-dialog .auth-card{max-height:calc(100dvh - 24px);padding:24px 20px}.auth-dialog .auth-close{top:16px;right:16px}dialog .dialog-head h2,.auth-dialog .auth-heading h1,dialog #user-moderation-title{font-size:20px}dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),textarea){font-size:16px}dialog .actions{gap:8px}}
@media(prefers-reduced-motion:reduce){dialog[open]:not(.auth-dialog),.auth-dialog[open] .auth-card{animation:none}}
@media(forced-colors:active){dialog:not(.auth-dialog),.auth-dialog .auth-card{border:1px solid CanvasText}}