/*
 * Frontend WP Classic Editor (TinyMCE/wp.editor) compatibility
 *
 * Goal: Use core WP editor UI, but prevent theme CSS from breaking
 * buttons/tabs/layout inside Elementor popups.
 * Scope: ONLY inside .uermedia-wysiwyg-wrap.
 */

.uermedia-wysiwyg-wrap {
    width: 100%;
}

.uermedia-wysiwyg-wrap .wp-editor-wrap,
.uermedia-wysiwyg-wrap .wp-editor-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* Base colors (WP admin-like) */
.uermedia-wysiwyg-wrap,
.uermedia-wysiwyg-wrap .wp-editor-wrap {
    color: #1d2327;
}

/* Keep the tools bar above the editor (some themes create columns) */
.uermedia-wysiwyg-wrap .wp-editor-tools,
.uermedia-wysiwyg-wrap .wp-editor-container {
    float: none !important;
    clear: both !important;
}

/* Neutralize aggressive theme button styles inside the editor UI */
.uermedia-wysiwyg-wrap .wp-media-buttons .button,
.uermedia-wysiwyg-wrap .wp-media-buttons .button-secondary,
.uermedia-wysiwyg-wrap .wp-switch-editor,
.uermedia-wysiwyg-wrap .mce-toolbar .mce-btn button {
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Force WP-like button/tab colors (remove theme accent red) */
.uermedia-wysiwyg-wrap .wp-media-buttons .button,
.uermedia-wysiwyg-wrap .wp-media-buttons .button-secondary {
    background: #f6f7f7 !important;
    border-color: #c3c4c7 !important;
    color: #1d2327 !important;
}

.uermedia-wysiwyg-wrap .wp-media-buttons .button:hover,
.uermedia-wysiwyg-wrap .wp-media-buttons .button-secondary:hover {
    background: #f0f0f1 !important;
    border-color: #8c8f94 !important;
    color: #1d2327 !important;
}

.uermedia-wysiwyg-wrap .wp-switch-editor {
    background: #f6f7f7 !important;
    border: 1px solid #c3c4c7 !important;
    color: #1d2327 !important;
}

.uermedia-wysiwyg-wrap .wp-switch-editor:hover,
.uermedia-wysiwyg-wrap .wp-switch-editor:focus {
    background: #f0f0f1 !important;
    border-color: #8c8f94 !important;
    color: #1d2327 !important;
}

/* Active tab should not be red; WP uses white tab */
.uermedia-wysiwyg-wrap .wp-switch-editor.switch-tmce,
.uermedia-wysiwyg-wrap .wp-switch-editor.switch-html {
    background: #fff !important;
    border-bottom-color: #fff !important;
}

/* TinyMCE toolbar buttons */
.uermedia-wysiwyg-wrap .mce-toolbar .mce-btn button {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #1d2327 !important;
}

.uermedia-wysiwyg-wrap .mce-toolbar .mce-btn:hover button,
.uermedia-wysiwyg-wrap .mce-toolbar .mce-btn:focus button {
    background: #fff !important;
    border-color: #c3c4c7 !important;
    color: #1d2327 !important;
}

/* Active/pressed toolbar buttons: keep icons visible (avoid theme turning them white) */
.uermedia-wysiwyg-wrap .mce-toolbar .mce-btn.mce-active button,
.uermedia-wysiwyg-wrap .mce-toolbar .mce-btn.mce-pressed button {
    background: #fff !important;
    border-color: #8c8f94 !important;
    color: #1d2327 !important;
}

.uermedia-wysiwyg-wrap .mce-toolbar .mce-btn.mce-active .mce-ico,
.uermedia-wysiwyg-wrap .mce-toolbar .mce-btn.mce-pressed .mce-ico,
.uermedia-wysiwyg-wrap .mce-toolbar .mce-btn.mce-active i,
.uermedia-wysiwyg-wrap .mce-toolbar .mce-btn.mce-pressed i {
    color: #1d2327 !important;
}

.uermedia-wysiwyg-wrap .mce-toolbar .mce-btn.mce-active .mce-ico:before,
.uermedia-wysiwyg-wrap .mce-toolbar .mce-btn.mce-pressed .mce-ico:before {
    color: #1d2327 !important;
}

/* Toolbar background */
.uermedia-wysiwyg-wrap .mce-toolbar-grp {
    background: #f6f7f7 !important;
    border-bottom: 1px solid #dcdcde !important;
}

/* Make sure tabs stay aligned and visible */
.uermedia-wysiwyg-wrap .wp-editor-tabs {
    float: right;
    margin: 0 !important;
}

/* Prevent toolbar buttons from stacking vertically */
.uermedia-wysiwyg-wrap .mce-toolbar .mce-btn,
.uermedia-wysiwyg-wrap .mce-toolbar .mce-btn-group {
    float: none !important;
    display: inline-block !important;
    vertical-align: top;
}

.uermedia-wysiwyg-wrap iframe {
    width: 100% !important;
}

/* Featured image field layout */
.uermedia-featured-image-field {
    width: 100%;
}

/* If legacy markup is present, keep it hidden once our JS initializes/upgrades the UI */
.uermedia-featured-image-field[data-uermedia-featured-image-initialized="1"] .uermedia-featured-image-button,
.uermedia-featured-image-field[data-uermedia-featured-image-initialized="1"] .uermedia-featured-image-preview {
    display: none !important;
}

/* Dropzone-like square (clickable) */
.uermedia-featured-image-field .uermedia-featured-image-dropzone {
    position: relative;
    display: block;
    /* Prevent Elementor/theme styles from stretching this control */
    flex: 0 0 auto;
    width: min(200px, 100%) !important;
    max-width: 200px !important;
    aspect-ratio: 1 / 1;
    border: 2px dashed #c3c4c7 !important;
    border-radius: 2px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
}

.uermedia-featured-image-field .uermedia-featured-image-dropzone:hover,
.uermedia-featured-image-field .uermedia-featured-image-dropzone:focus {
    border-color: #8c8f94;
    outline: none;
}

.uermedia-featured-image-field .uermedia-featured-image-dropzone-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
    text-align: center;
    padding: 12px;
}

.uermedia-featured-image-field img.uermedia-featured-image-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uermedia-featured-image-field .uermedia-featured-image-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0 6px;
    min-height: 28px;
    line-height: 26px;
}

.uermedia-featured-image-field .uermedia-featured-image-remove .dashicons {
    line-height: 26px;
}

/*
 * Media Library modal (wp.media)
 * Themes often apply global H1/H2/button/link styles that leak into the dialog.
 * Keep this scoped to the modal to mimic wp-admin appearance.
 */
.media-modal,
.media-modal .media-frame {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #1d2327 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.media-modal h1,
.media-modal h2,
.media-modal h3,
.media-modal h4 {
    font-family: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #1d2327 !important;
}

/* Normalize heading sizes inside the modal (themes often blow these up) */
.media-modal h1 {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 8px 0 !important;
}

.media-modal h2 {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Main title: "Medien hinzufügen" */
.media-modal .media-frame-title {
    padding: 0 16px !important;
}

.media-modal .media-frame-title h1 {
    font-size: 23px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

/* Left column (menu) width like wp-admin */
.media-modal .media-frame-menu {
    width: 240px !important;
}

/* Keep other frame parts aligned with the widened menu */
.media-modal .media-frame-title,
.media-modal .media-frame-router,
.media-modal .media-frame-content,
.media-modal .media-frame-toolbar {
    left: 240px !important;
}

/* Sidebar heading like "Aktionen" */
.media-modal .media-frame-menu h1,
.media-modal .media-frame-menu h2,
.media-modal .media-frame-menu h3,
.media-modal .media-frame-menu .media-menu-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    margin: 0 0 8px 0 !important;
}

/* Specifically bump the left menu title (e.g. "Aktionen") a bit */
.media-modal .media-frame-menu .media-menu-title {
    font-size: 18px !important;
}

/* Sidebar links: wrap instead of overflowing */
.media-modal .media-frame-menu .media-menu a {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
}

/* Sidebar/toolbar headings like "Medien filtern" */
.media-modal .media-frame-content h2 {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
}

/* Router tabs + sidebar menu items */
.media-modal .media-router a,
.media-modal .media-menu a {
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Prevent theme button styles (e.g., big red backgrounds) */
.media-modal .button,
.media-modal button,
.media-modal input[type="button"],
.media-modal input[type="submit"] {
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Close button should look like wp-admin */
.media-modal .media-modal-close {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.media-modal .media-modal-close .media-modal-icon:before {
    color: #646970 !important;
}

.media-modal .media-modal-close:hover .media-modal-icon:before,
.media-modal .media-modal-close:focus .media-modal-icon:before {
    color: #1d2327 !important;
}