/* Shared form dialogs use the jQuery UI engine already loaded by DLE. */
:root {
    --ukm-bg: #222323;
    --ukm-panel: #2b2c2c;
    --ukm-text: #f2f0ec;
    --ukm-muted: #b4b0aa;
    --ukm-line: #3b3b39;
    --ukm-accent: #d06349;
    --ukm-button: #bf5038;
    --ukm-accent-hover: #b74b34;
    --ukm-tint: #342b28;
    --ukm-radius: 14px;
}
.ui-dialog {
    box-sizing: border-box;
    max-width: calc(100vw - 32px) !important;
    padding: 0;
    overflow: hidden;
    color: var(--ukm-text);
    background: var(--ukm-bg);
    border: 1px solid var(--ukm-line);
    border-radius: var(--ukm-radius);
    box-shadow: 0 20px 70px rgba(0, 0, 0, .32);
    font: 14px/1.55 'PT Sans', Arial, sans-serif;
}
/* Center by the current height, including after fonts/content change. */
.ui-dialog.uk-modal-dialog:not(.modalfixed):not(.dle-popup-quickedit) {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}
.ui-dialog .ui-dialog-titlebar {
    position: relative;
    box-sizing: border-box;
    padding: 19px 60px 19px 24px;
    margin: 0;
    min-height: 64px;
    background: var(--ukm-bg);
    color: var(--ukm-text);
    border: 0;
    border-bottom: 1px solid var(--ukm-line);
    border-radius: 0;
    font: 600 16px/1.5 'PT Sans', Arial, sans-serif;
    text-align: left;
}
.ui-dialog .ui-dialog-title {
    display: block;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
}
.ui-dialog .ui-dialog-content {
    box-sizing: border-box;
    padding: 24px;
    background: var(--ukm-bg);
    color: var(--ukm-text);
    border: 0;
    font-size: 14px;
    line-height: 1.55;
}
.ui-dialog:not(.modalfixed):not(.dle-popup-quickedit) .ui-dialog-content {
    max-height: calc(100vh - var(--ukm-dialog-chrome, 166px) - 24px) !important;
    max-height: calc(100dvh - var(--ukm-dialog-chrome, 166px) - 24px) !important;
    overflow: auto;
}
.ui-dialog.uk-modal-autosize { height: auto !important; }
.ui-dialog #dlesubscribeedit { height: auto !important; min-height: 0 !important; }
.ui-dialog .ui-dialog-buttonpane {
    box-sizing: border-box;
    padding: 16px 24px;
    margin: 0;
    background: var(--ukm-bg);
    border: 0;
    border-top: 1px solid var(--ukm-line);
    text-align: right;
}
.ui-dialog .ui-dialog-buttonset {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    float: none;
}
.ui-dialog .ui-dialog-buttonset button,
.ui-dialog .uk-modal-form .foot button,
.ui-dialog .uk-modal-form .note-foot button,
.ui-dialog .uk-modal-form .uf-btn,
.ui-dialog .login-button button,
.uk-update-watch {
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    height: auto;
    padding: 11px 19px;
    margin: 0 !important;
    color: #fffaf6 !important;
    background: var(--ukm-button);
    background-image: none;
    border: 1px solid transparent;
    border-radius: 7px;
    box-shadow: none;
    font: 600 14px/1.4 'PT Sans', Arial, sans-serif !important;
    text-align: center;
    text-decoration: none !important;
    white-space: normal;
    cursor: pointer;
    transition: background-color .15s ease;
}
.ui-dialog .ui-dialog-buttonset button:hover,
.ui-dialog .uk-modal-form .foot button:hover,
.ui-dialog .uk-modal-form .note-foot button:hover,
.ui-dialog .uk-modal-form .uf-btn:hover,
.ui-dialog .login-button button:hover,
.uk-update-watch:hover { background: var(--ukm-accent-hover); }
.ui-dialog .ui-dialog-buttonset .uk-modal-secondary {
    color: var(--ukm-text) !important;
    background: var(--ukm-panel);
    border-color: var(--ukm-line);
}
.ui-dialog .ui-dialog-buttonset .uk-modal-secondary:hover { background: #393a39; }
.ui-dialog button:disabled { opacity: .5; cursor: default; }
.ui-dialog .ui-dialog-titlebar-close {
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    top: 13px;
    right: 13px;
    display: block;
    width: 36px;
    height: 36px !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ukm-muted) !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 7px;
    box-shadow: none !important;
    opacity: 1;
    font-size: 0 !important;
    line-height: 1;
    text-indent: 0;
    transform: none;
    cursor: pointer;
}
.ui-dialog .ui-dialog-titlebar-close > * { display: none !important; }
.ui-dialog .ui-dialog-titlebar-close::before,
.ui-dialog .ui-dialog-titlebar-close::after {
    content: '';
    position: absolute;
    top: 17px;
    left: 10px;
    width: 16px;
    height: 1px;
    background: currentColor;
    transform: rotate(45deg);
}
.ui-dialog .ui-dialog-titlebar-close::after { transform: rotate(-45deg); }
.ui-dialog .ui-dialog-titlebar-close:hover { background: var(--ukm-panel) !important; color: var(--ukm-text) !important; }
.ui-dialog:focus { outline: none; }
.ui-dialog :focus-visible { outline: 2px solid var(--ukm-accent); outline-offset: 3px; }
.ui-dialog label { color: var(--ukm-text); }
.ui-dialog a { color: #e9947c; }
.ui-widget-overlay { background: #000; opacity: .62; }
body.uk-modal-open { overflow: hidden; }
.ui-dialog .uk-modal-form > input,
.ui-dialog .uk-modal-form > textarea,
.ui-dialog .uk-modal-form #dle-promt-text { display: block; width: 100% !important; }
#fav-create-list > label { display: block; margin: 14px 0 0; }
.ui-dialog .uk-modal-form .foot,
.ui-dialog .uk-modal-form .note-foot { text-align: right; padding-top: 16px; }
.ui-dialog .uk-modal-form .uf-wrapper {
    position: static; width: auto; margin: 0; background: transparent;
    box-shadow: none; border: 0; color: inherit;
}
.ui-dialog .uk-modal-form .uf-content { padding: 0; color: inherit; }
.ui-dialog .ui-dialog-content :is(input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url], textarea, select) {
    box-sizing: border-box;
    max-width: 100%;
    padding: 10px 12px;
    background: #191b1c;
    color: var(--ukm-text);
    border: 1px solid #4b4b48;
    border-radius: 6px;
    box-shadow: none;
    font: 14px/1.4 'PT Sans', Arial, sans-serif;
}
.ui-dialog .ui-dialog-content :is(input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url], select) { min-height: 44px; height: auto; }
.ui-dialog .ui-dialog-content .uf-input-error,
.ui-dialog .ui-dialog-content .ui-state-error { border-color: #e47863; background: #362723; }
.ui-dialog .ui-dialog-content input:focus,
.ui-dialog .ui-dialog-content textarea:focus { border-color: var(--ukm-accent); }
.ui-dialog input::placeholder,
.ui-dialog textarea::placeholder { color: var(--ukm-muted); opacity: 1; }
.ui-dialog .login-box {
    position: relative; top: auto; left: auto; margin: 0; width: auto;
}
.ui-dialog .login-checkbox,
.ui-dialog .login-links { color: var(--ukm-muted); }
/* Subscription update card. Other PMs keep their normal subject/author preview. */
.dle-popup-newpm.uk-update-window .ui-dialog-titlebar { padding-right: 60px; }
.uk-update-window .ui-dialog-title::before {
    content: '\f0a2';
    display: inline-block;
    margin-right: 10px;
    color: var(--ukm-accent);
    font-family: FontAwesome;
    font-weight: normal;
}
.ui-dialog.uk-update-window #newpm {
    height: auto !important;
    min-height: 0 !important;
    padding: 0;
    max-height: none !important;
    overflow: hidden;
}
.uk-update-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
}
.uk-update-card-main { box-sizing: border-box; min-height: 0; overflow-y: auto; }
.uk-update-footer { flex-shrink: 0; }
.uk-update-card-main { padding: 24px; }
.uk-update-eyebrow { margin: 0 0 8px; color: var(--ukm-muted); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.uk-update-name { margin: 0; font-size: 23px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; overflow-wrap: anywhere; }
.uk-update-alias { margin: 5px 0 0; color: var(--ukm-muted); font-size: 14px; overflow-wrap: anywhere; }
.uk-update-change { margin: 22px 0 14px; padding: 15px 17px; border-left: 3px solid var(--ukm-accent); border-radius: 0 8px 8px 0; background: var(--ukm-tint); overflow-wrap: anywhere; }
.uk-update-heading { font-size: 18px; font-weight: 700; line-height: 1.35; }
.uk-update-heading .fa { margin-right: 8px; color: var(--ukm-accent); font-size: 15px; }
.uk-update-meta { margin-top: 5px; color: var(--ukm-muted); font-size: 13px; }
.uk-update-time { display: flex; align-items: center; gap: 7px; margin-bottom: 22px; color: var(--ukm-muted); font-size: 12px; }
.uk-update-watch { width: 100%; }
.uk-update-all { display: block; padding-top: 14px; color: var(--ukm-muted) !important; font-size: 12px; text-align: center; text-decoration: none; }
.uk-update-all:hover { color: var(--ukm-text) !important; }
.uk-update-footer { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 13px 20px; border-top: 1px solid var(--ukm-line); }
.uk-update-footer a { color: var(--ukm-muted) !important; font-size: 12px; text-decoration: none; }
.uk-update-footer a:hover { color: var(--ukm-text) !important; }
.uk-update-footer .fa { margin-right: 5px; }
.pm-alert-preview { font-style: normal; line-height: 1.55; overflow-wrap: anywhere; }

/* Match media controls without turning image/iframe viewers into form cards. */
.fancybox__container .f-button { border-radius: 7px; }
.fancybox__container .f-button:hover { background: #343535; }

@media (max-width: 600px) {
    .ui-dialog, .ui-dialog.uk-modal-dialog { max-width: calc(100vw - 24px) !important; }
    .ui-dialog .ui-dialog-titlebar { padding-left: 19px; }
    .ui-dialog .ui-dialog-content, .uk-update-card-main { padding: 20px 19px; }
    .ui-dialog .ui-dialog-buttonpane { padding: 15px 19px; }
    .ui-dialog .ui-dialog-buttonset { flex-direction: column; }
    .ui-dialog .ui-dialog-buttonset button { width: 100%; }
    .ui-dialog.uk-update-window #newpm { padding: 0; }
    .uk-update-name { font-size: 22px; }
    .ui-dialog .ui-dialog-content input,
    .ui-dialog .ui-dialog-content textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-dialog * { transition: none !important; }
}

/* Popularity is a chart, not the video/profile aspect-ratio container. */
.ui-dialog.uk-popularity-dialog { height: auto !important; }
.ui-dialog.uk-popularity-dialog #dleuserpopup {
    position: relative;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden;
}
.ui-dialog.uk-popularity-dialog #uakinotrends {
    position: static;
    display: block;
    width: 100%;
    height: 440px;
    max-height: calc(100vh - var(--ukm-dialog-chrome, 66px) - 24px);
    max-height: calc(100dvh - var(--ukm-dialog-chrome, 66px) - 24px);
    border: 0;
    background: #1f2123;
}

/* Account navigation keeps its own text hierarchy inside a dialog. */
.ui-dialog.uk-login-dialog .login-menu a,
.ui-dialog.uk-login-dialog .login-avatar a {
    color: var(--ukm-text);
    font-family: 'PT Sans', Arial, sans-serif;
}
.ui-dialog.uk-login-dialog .login-menu a { font-weight: 600; }
.ui-dialog.uk-login-dialog .login-menu a:hover,
.ui-dialog.uk-login-dialog .login-avatar a:hover { color: #e9947c; }

.fancybox__container { --fancybox-backdrop-bg: rgba(0, 0, 0, .62); --fancybox-backdrop-filter: none; }
