/* compat.css — iOS-style defaults for legacy DLE pages
   (registration, pm, profile, feedback, static, userinfo, etc.)
   These pages reuse generic DLE markup; this file keeps them coherent. */

.page, .content, .static, .us, .pmessages, .feedback, .registration, .lostpassword, .userinfo {
    max-width: 980px;
    margin: 0 auto;
}

/* generic form controls */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], select, textarea {
    width: 100%;
    min-height: 44px;
    border: 0.5px solid var(--separator);
    border-radius: var(--r-sm);
    background: var(--bg-elevated);
    color: var(--label);
    padding: 10px 14px;
    font-size: 15px;
    font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
textarea { resize: vertical; min-height: 120px; }
label { font-weight: 600; color: var(--label); }

/* generic buttons */
button:not(.icon-btn):not(.btn-pill):not(.view-toolbar button):not(.segmented button):not(.rate-btn),
input[type="submit"], input[type="button"], .btn, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .2s, transform .1s;
}
button:hover, input[type="submit"]:hover, .btn:hover { filter: brightness(1.05); color: #fff; }
button:active { transform: scale(0.97); }
.btn-secondary { background: var(--separator); color: var(--label); }

/* form rows from DLE */
.form__row, .registration__row, .serv__row, .login__row, .pmessages__row, .feedback__row {
    margin-bottom: 14px;
}
.form__label, .registration__label { display: block; margin-bottom: 6px; }

/* DLE blocks / panels as surfaces */
.serv, .pmessages__item, .registration, .lostpassword, .feedback,
.userinfo__block, .static__content, .stats__block {
    background: var(--card-solid);
    border: 0.5px solid var(--separator);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 22px;
    margin-bottom: 18px;
}

h1, h2, h3 { color: var(--label); }

/* tables */
table:not(.calendar) { width: 100%; border-collapse: collapse; }
table:not(.calendar) th, table:not(.calendar) td {
    padding: 10px 12px;
    border-bottom: 0.5px solid var(--separator);
    text-align: left;
}

/* DLE editor toolbar tweaks */
.bb-editor, .quicktags { border-radius: var(--r-sm); overflow: hidden; }

/* full text content (descriptions / comments) */
.full-text img { border-radius: var(--r-sm); height: auto; }
.full-text a { color: var(--accent); }
.full-text blockquote, .quote {
    border-left: 3px solid var(--accent);
    background: var(--card-2);
    padding: 10px 14px;
    border-radius: var(--r-xs);
    margin: 10px 0;
}
hr { border: 0; border-top: 0.5px solid var(--separator); margin: 16px 0; }

/* category tag links in fullstory */
.detail__props a { color: #fff; font-weight: 700; }
.prose a { color: var(--accent); }

/* DLE flat-pm / messages */
.pm, .pm__list { display: flex; flex-direction: column; gap: 12px; }

/* ===== DLE service pages: registration, lostpassword, feedback, validation ===== */
.serv { max-width: 720px; margin: 0 auto; padding: 24px; }
.serv__title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }
.serv__subtitle {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--label-2); margin: 22px 0 10px;
}
.serv__section { display: flex; flex-direction: column; gap: 14px; }
.message-info {
    background: var(--card-2); border-radius: var(--r-md); padding: 14px 16px;
    color: var(--label-2); font-size: 14px; line-height: 1.6; margin-bottom: 18px;
}
.message-info b { color: var(--label); }

.form__row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.form__label, .form__caption { font-weight: 600; color: var(--label); font-size: 14px; }
.form__label--important::after { content: ' *'; color: var(--ios-red); }
.form__sec-code { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.form__sec-code input { flex: 1; min-width: 160px; }
.form__find-related { align-self: flex-start; }
.form__row--submit { margin-top: 8px; }
.form__btn { min-width: 200px; }
.form__table { width: 100%; }
.form__table td { padding: 6px 8px 6px 0; vertical-align: top; }

/* social login icons */
.login__social, .serv__social { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.login__social a, .serv__social a {
    width: 44px; height: 44px; border-radius: var(--r-sm); overflow: hidden;
    display: inline-grid; place-items: center; background: var(--card-2);
    border: 0.5px solid var(--separator); transition: transform .15s;
}
.login__social a:hover, .serv__social a:hover { transform: translateY(-2px); }
.login__social a img, .serv__social a img { width: 24px; height: 24px; }

/* ===== User profile popup (profile_popup.tpl in DLE dialog) ===== */
.us--card { padding: 4px; text-align: center; }
.us--card .us__one { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.us--card .us__img { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; border: 3px solid var(--separator); }
.us--card .us__img img { width: 100%; height: 100%; object-fit: cover; }
.us--card .us__status { font-size: 13px; font-weight: 600; color: var(--label-2); order: 2; }
.us--card .us__status.on { color: var(--ios-green); }
.us--card .us__two { display: flex; justify-content: center; gap: 24px; margin: 14px 0; }
.us--card .us__info { display: flex; flex-direction: column; }
.us--card .us__info-desc { font-size: 22px; font-weight: 800; }
.us--card .us__info-caption { font-size: 12px; color: var(--label-2); }
.us--card .us__list { display: flex; flex-direction: column; gap: 8px; text-align: left; font-size: 14px; }
.us--card .us__list li { display: flex; gap: 8px; }
.us--card .us__list li > span:first-child { color: var(--label-2); font-weight: 600; flex: 0 0 120px; }

/* DLE checkbox switches */
.checkbox { display: flex; align-items: center; gap: 8px; }
.checkbox label { font-weight: 500; color: var(--label-2); }

/* =====================================================================
   iOS-style modal dialogs (DLE jQuery UI popups: complaint, PM, etc.)
   Overrides engine.css.
   ===================================================================== */
.ui-widget-overlay {
    background: rgba(0, 0, 0, .45) !important;
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    backdrop-filter: saturate(160%) blur(8px);
    opacity: 1 !important;
    z-index: 1200 !important;
}
.ui-dialog {
    background: var(--card-solid) !important;
    border: 0.5px solid var(--separator) !important;
    border-radius: var(--r-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden !important;
    padding: 0 !important;
    max-width: calc(100vw - 28px) !important;
    z-index: 1201 !important;
}
.ui-dialog .ui-dialog-titlebar,
.dle-popup-complaint .ui-dialog-titlebar,
.dle-popup-sendpm .ui-dialog-titlebar {
    background: var(--card-solid) !important;
    background-image: none !important;
    color: var(--label) !important;
    padding: 16px 60px 15px 22px !important;
    border: 0 !important;
    border-bottom: 0.5px solid var(--separator) !important;
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
    position: relative !important;
    display: flex !important; align-items: center !important;
    min-height: 58px;
}
.ui-dialog .ui-dialog-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--label) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
}
/* round, clean close button */
.ui-dialog .ui-dialog-titlebar-close {
    position: absolute !important;
    top: 50% !important; right: 14px !important; left: auto !important;
    transform: translateY(-50%) !important;
    width: 34px !important; height: 34px !important;
    margin: 0 !important; padding: 0 !important;
    border-radius: 50% !important;
    background: var(--separator) !important;
    color: var(--label-2) !important;
    display: inline-grid !important; place-items: center !important;
    overflow: hidden !important; text-indent: 0 !important;
    cursor: pointer; border: 0 !important;
    transition: background .2s, color .2s, transform .1s;
}
.ui-dialog .ui-dialog-titlebar-close:hover { background: var(--ios-red) !important; color: #fff !important; }
.ui-dialog .ui-dialog-titlebar-close:active { transform: translateY(-50%) scale(.9) !important; }
/* neutralize the original broken icon/label, draw a single clean ✕ */
.ui-dialog .ui-dialog-titlebar .ui-button-text,
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-icon-closethick { font-size: 0 !important; text-indent: 0 !important; background: none !important; width: auto !important; height: auto !important; position: static !important; }
.ui-dialog .ui-dialog-titlebar .ui-button-text::before,
.ui-dialog .ui-icon-closethick::before { content: "" !important; }
.ui-dialog .ui-dialog-titlebar-close::before {
    content: "✕" !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 17px !important; font-weight: 700 !important; line-height: 1 !important;
    text-indent: 0 !important; color: inherit !important;
}
.ui-dialog-content {
    padding: 20px 22px !important;
    color: var(--label) !important;
    background: var(--card-solid) !important;
    font-size: 15px;
}
.ui-dialog-content label { color: var(--label); font-weight: 600; }
.ui-dialog-content input[type="text"],
.ui-dialog-content input[type="password"],
.ui-dialog-content input[type="email"],
.ui-dialog-content select,
.ui-dialog-content textarea {
    width: 100% !important;
    border: 0.5px solid var(--separator) !important;
    border-radius: var(--r-sm) !important;
    background: var(--bg-elevated) !important;
    color: var(--label) !important;
    padding: 12px 14px !important;
    margin-top: 8px;
    font-size: 15px;
}
.ui-dialog-content textarea { min-height: 110px !important; resize: vertical; }
.ui-dialog-content input:focus, .ui-dialog-content textarea:focus, .ui-dialog-content select:focus {
    outline: 2px solid var(--accent) !important; border-color: transparent !important;
}
.ui-dialog-buttonpane { padding: 0 22px 20px !important; background: var(--card-solid) !important; border: 0 !important; }
.ui-dialog-buttonset, .save-buttons { display: flex !important; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.ui-dialog-buttonset button, .save-buttons input.bbcodes {
    height: 44px !important; padding: 0 22px !important; border-radius: var(--r-pill) !important;
    font-size: 15px !important; font-weight: 600 !important; border: 0 !important; cursor: pointer;
    background: var(--accent) !important; color: #fff !important; box-shadow: none !important;
}
/* secondary (cancel) button — usually the first one */
.ui-dialog-buttonset button:first-child:not(:only-child) {
    background: var(--separator) !important; color: var(--label) !important;
}
.ui-dialog-buttonset button:hover { filter: brightness(1.06); }
.ui-dialog .ui-resizable-handle { display: none !important; }

/* user profile popup inside dialog */
.dle-popup-userprofile .ui-dialog-content { padding: 18px !important; }

/* ---- Mobile: dialogs become bottom sheets ---- */
@media (max-width: 600px) {
    .ui-dialog {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
        width: 100% !important; max-width: 100% !important;
        border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
        max-height: 88vh; overflow-y: auto;
    }
    .ui-dialog-titlebar { padding: 16px 56px 14px 18px !important; }
    .ui-dialog-content { padding: 18px !important; }
    .ui-dialog-buttonpane { padding: 0 18px calc(18px + env(safe-area-inset-bottom)) !important; }
    .ui-dialog-buttonset button { flex: 1; }
}