/*
 * MDTF admin look (2.4.0).
 * Loaded only on MDTF screens (body.mdtf-admin): filter sections, categories, settings, shortcodes, sort panels,
 * constant links, widgets and edit screens with the MDTF meta box. Visual only: no field names, ids or JS hooks change here.
 * Colors follow the admin color scheme (--wp-admin-theme-color), sizes and fonts follow WordPress core controls.
 */

body.mdtf-admin {
    --mdtf-accent: var(--wp-admin-theme-color, #2271b1);
    --mdtf-accent-dark: var(--wp-admin-theme-color-darker-10, #135e96);
    --mdtf-text: #1d2327;
    --mdtf-muted: #646970;
    --mdtf-border: #c3c4c7;
    --mdtf-border-light: #dcdcde;
    --mdtf-soft: #f6f7f7;
    --mdtf-warning-bg: #fcf9e8;
    --mdtf-warning: #dba617;
    --mdtf-danger: #d63638;
    --mdtf-success: #00a32a;
    --mdtf-radius: 4px;
    --mdtf-gap: 12px;
}

/* ---------------------------------------------------------------- common */

.mdtf-admin .mdtf-red,
.mdtf-admin .mdf_for_premium_label {
    color: var(--mdtf-danger) !important;
}

.mdtf-admin .mdtf-green-b {
    color: var(--mdtf-success) !important;
}

/* hints written as <i>: readable, not italic grey crumbs */
.mdtf-admin #data_group_items i,
.mdtf-admin .mdtf-widget-hint,
.mdtf-admin .widget-content > i,
.mdtf-admin .widget-content p > i,
.mdtf-admin #meta_data_filter_options i,
.mdtf-admin .mdf_shortcode_options + i {
    font-style: normal;
    color: var(--mdtf-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* yellow and grey "fix" boxes of the widget forms -> WordPress notices */
.mdtf-admin .mdtf-widget-fix2 {
    background: var(--mdtf-warning-bg);
    border: 1px solid var(--mdtf-border-light);
    border-inline-start: 4px solid var(--mdtf-warning);
    padding: 8px 12px;
    margin: 6px 0 10px;
    color: var(--mdtf-text);
    font-size: 12px;
    line-height: 1.5;
}

.mdtf-admin .mdtf-widget-fix1 {
    background: var(--mdtf-soft);
    border: 1px solid var(--mdtf-border-light);
    padding: 6px 10px;
    font-weight: 600;
}

/* sortable lists of categories / taxonomies in widget forms and shortcodes */
.mdtf-admin .meta_data_filter_tax_ul {
    margin: 8px 0;
}

.mdtf-admin .meta_data_filter_tax_ul li,
.mdtf-admin .meta_data_filter_tax_ul_li {
    background: #fff;
    border: 1px solid var(--mdtf-border-light);
    border-radius: var(--mdtf-radius);
    padding: 6px 10px;
    margin-bottom: 4px;
    font-style: normal;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mdtf-admin .meta_data_filter_tax_ul li:hover {
    border-color: var(--mdtf-border);
    background: var(--mdtf-soft);
}

.mdtf-admin .meta_data_filter_tax_ul li label {
    flex: 1 1 auto;
    min-width: 0;
}

.mdtf-admin .mdf_childs_terms li div {
    background: var(--mdtf-soft);
    border: 1px solid var(--mdtf-border-light);
    border-radius: var(--mdtf-radius);
    padding: 6px 10px;
}

.mdtf-admin .mdf_shotcode_taxonomies_li {
    background: #fff;
    border: 1px solid var(--mdtf-border-light) !important;
    border-radius: var(--mdtf-radius);
    padding: 10px 12px !important;
}

.mdtf-admin .mdf_shotcode_taxonomies_li input[type="text"],
.mdtf-admin .mdf_shotcode_taxonomies_li select {
    margin: 4px 0;
}

/* visible keyboard focus everywhere in MDTF areas */
.mdtf-admin #data_group_items a:focus-visible,
.mdtf-admin #meta_data_filter_options a:focus-visible,
.mdtf-admin .widget-content a:focus-visible,
.mdtf-admin #tabs .ui-tabs-nav a:focus-visible,
.mdtf-admin .mdf-section-title-button:focus-visible {
    outline: 2px solid var(--mdtf-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------------------------------------------------------------- filter section: items constructor */

.mdtf-admin #data_group_items {
    margin: var(--mdtf-gap) 0;
    padding: 0;
}

.mdtf-admin #data_group_items .admin-drag-holder {
    position: relative;
    background: #fff;
    border: 1px solid var(--mdtf-border-light);
    border-inline-start: 4px solid var(--mdtf-accent);
    border-radius: var(--mdtf-radius);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
    padding: 12px 48px 12px 16px;
    margin-bottom: var(--mdtf-gap);
}

.mdtf-admin #data_group_items .admin-drag-holder:hover {
    border-color: var(--mdtf-border);
    border-inline-start-color: var(--mdtf-accent-dark);
}

.mdtf-admin #data_group_items .ui-sortable-helper {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.mdtf-admin #data_group_items .ui-sortable-placeholder,
.mdtf-admin #data_group_items .mdf-drag-place {
    border-radius: var(--mdtf-radius);
}

/* the drag handle: cursor and keyboard-free hint */
.mdtf-admin #data_group_items .mdf-drag-place {
    cursor: move;
    opacity: .7;
}

.mdtf-admin #data_group_items .mdf-drag-place:hover {
    opacity: 1;
}

.mdtf-admin #data_group_items h4 {
    margin: 14px 0 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mdtf-text);
}

.mdtf-admin #data_group_items > li > h4:first-of-type {
    margin-top: 0;
}

.mdtf-admin #data_group_items a,
.mdtf-admin #data_group_items a > * {
    color: var(--mdtf-accent);
}

.mdtf-admin #data_group_items a.button {
    color: var(--mdtf-accent);
}

.mdtf-admin #data_group_items input[type="text"] {
    width: 420px;
    max-width: 100%;
}

.mdtf-admin #data_group_items textarea {
    width: 640px;
    max-width: 100%;
    min-height: 80px;
}

.mdtf-admin #data_group_items label.sel select {
    min-width: 220px;
}

/* the item body that "Toggle" opens */
.mdtf-admin #data_group_items .mdf_admin_flter_item_box {
    border-top: 1px solid var(--mdtf-border-light);
    margin-top: var(--mdtf-gap);
    padding-top: 4px;
}

.mdtf-admin #data_group_items .mdf_admin_flter_item_box_toggle {
    margin-top: 4px;
}

.mdtf-admin #data_group_items .mdf_item_footer,
.mdtf-admin #data_group_items .mdf_item_footer_reflection {
    margin-top: 8px;
}

/* drop-down options list of a "select" item */
.mdtf-admin #data_group_items .data_item_select_options {
    margin: 8px 0;
    padding: 0;
}

.mdtf-admin #data_group_items .data_item_select_options li {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--mdtf-soft);
    border: 1px solid var(--mdtf-border-light);
    border-radius: var(--mdtf-radius);
    padding: 6px 8px;
    margin-bottom: 6px;
}

.mdtf-admin #data_group_items .data_item_select_options li br {
    display: none;
}

.mdtf-admin #data_group_items .data_item_select_options li input[type="text"] {
    width: auto;
    flex: 1 1 180px;
}

.mdtf-admin #data_group_items .mdtf_drag_and_drope {
    cursor: move;
    opacity: .6;
}

/* delete (x) of an item, top right corner of the card */
.mdtf-admin #data_group_items .close-drag-holder {
    top: 12px;
    right: 12px;
}

.mdtf-admin .add_item_to_data_group {
    margin: 4px 0;
}

/* ---------------------------------------------------------------- MDTF meta box on post / product edit screens */

.mdtf-admin h3.mdf-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--mdtf-border-light);
    font-size: 14px;
    font-weight: 600;
    color: var(--mdtf-text);
}

.mdtf-admin h3.mdf-section-title .mdf-section-title-wrap {
    position: static;
    flex: 0 0 auto;
}

.mdtf-admin h3.mdf-section-title .mdf-section-title-button {
    min-width: 32px;
    text-align: center;
}

.mdtf-admin #meta_data_filter_options .form-table th {
    font-weight: 600;
    color: var(--mdtf-text);
}

.mdtf-admin #meta_data_filter_options .form-table th .mdtf-fs11,
.mdtf-admin .mdtf-fs11 {
    display: inline-block;
    font-weight: 400;
    font-style: normal;
    color: var(--mdtf-muted);
    font-family: Consolas, Monaco, monospace;
    font-size: 12px !important;
}

/* ---------------------------------------------------------------- settings page */

.mdtf-admin .woobe-admin-preloader {
    background: rgba(240, 240, 241, .85);
}

.mdtf-admin #tabs.ui-tabs {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
}

.mdtf-admin #tabs .ui-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--mdtf-border);
    border-radius: 0;
}

.mdtf-admin #tabs .ui-tabs-nav li {
    float: none;
    position: relative;
    top: 1px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    white-space: nowrap;
}

.mdtf-admin #tabs .ui-tabs-nav li a {
    float: none;
    display: block;
    padding: 10px 14px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mdtf-muted);
    background: #f0f0f1;
    border: 1px solid var(--mdtf-border);
    border-bottom-color: var(--mdtf-border);
    border-radius: 0;
    text-decoration: none;
    box-shadow: none;
}

.mdtf-admin #tabs .ui-tabs-nav li a:hover {
    color: var(--mdtf-accent);
    background: #fff;
}

.mdtf-admin #tabs .ui-tabs-nav li.ui-tabs-active a,
.mdtf-admin #tabs .ui-tabs-nav li.ui-state-active a {
    color: var(--mdtf-text);
    background: #fff;
    border-bottom-color: #fff;
}

.mdtf-admin #tabs .ui-tabs-panel {
    background: #fff;
    border: 1px solid var(--mdtf-border);
    border-top: 0;
    border-radius: 0;
    padding: 8px 24px 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}

.mdtf-admin #tabs .ui-tabs-panel .form-table th {
    font-weight: 600;
    color: var(--mdtf-text);
}

.mdtf-admin #tabs .ui-tabs-panel .form-table td p.description,
.mdtf-admin #tabs .ui-tabs-panel .form-table td .description {
    color: var(--mdtf-muted);
}

.mdtf-admin .mdtf-powered-by {
    margin-top: 10px !important;
}

/* ---------------------------------------------------------------- shortcode editor */

.mdtf-admin .mdtf-shortcode-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mdtf-border-light);
    font-size: 14px;
    font-weight: 600;
    color: var(--mdtf-text);
}

.mdtf-admin .options_meta_box_html_items .form-table th {
    font-weight: 600;
}

.mdtf-admin .options_meta_box_html_items .form-table td ul {
    margin: 0;
}

.mdtf-admin .options_meta_box_html_items .form-table td li {
    margin-bottom: 2px;
}

.mdtf-admin .options_meta_box_html_items .mdtf-h11 {
    height: auto !important;
    font-style: normal;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    color: var(--mdtf-muted);
}

.mdtf-admin #mdf_shotcode_taxonomies {
    margin-inline-start: 0 !important;
}

/* ---------------------------------------------------------------- widget forms (classic screen, customizer, Legacy Widget block) */

.mdtf-admin .widget-content hr,
.mdtf-admin .wp-block-legacy-widget hr {
    border: 0;
    border-top: 1px solid var(--mdtf-border-light);
    margin: 14px 0;
}

.mdtf-admin .widget-content h3,
.mdtf-admin .wp-block-legacy-widget__edit-form h3 {
    margin: 16px 0 8px;
    font-size: 14px;
    font-weight: 600;
}

.mdtf-admin .widget-content p > label,
.mdtf-admin .wp-block-legacy-widget__edit-form p > label {
    font-weight: 500;
}

/* ---------------------------------------------------------------- narrow screens (WordPress mobile breakpoint) */

@media screen and (max-width: 782px) {
    .mdtf-admin #data_group_items .admin-drag-holder {
        padding: 12px 40px 12px 12px;
    }

    .mdtf-admin #data_group_items input[type="text"],
    .mdtf-admin #data_group_items textarea,
    .mdtf-admin #data_group_items label.sel,
    .mdtf-admin #data_group_items label.sel select,
    .mdtf-admin .mdtf-w400,
    .mdtf-admin .mdtf-w300,
    .mdtf-admin .mdtf-w45p,
    .mdtf-admin .mdtf-w50p,
    .mdtf-admin .mdtf-w49p {
        width: 100% !important;
        min-width: 0;
    }

    .mdtf-admin #tabs .ui-tabs-nav li a {
        padding: 8px 10px;
        font-size: 13px;
    }

    .mdtf-admin #tabs .ui-tabs-panel {
        padding: 4px 12px 16px;
    }

    .mdtf-admin h3.mdf-section-title {
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------------- right-to-left */

.rtl.mdtf-admin #data_group_items .admin-drag-holder {
    padding: 12px 16px 12px 48px;
}

.rtl.mdtf-admin #data_group_items .close-drag-holder {
    left: 12px;
    right: auto;
}

.rtl.mdtf-admin #data_group_items .mdf-drag-place {
    left: 8px;
    right: auto;
}

@media screen and (max-width: 782px) {
    .rtl.mdtf-admin #data_group_items .admin-drag-holder {
        padding: 12px 12px 12px 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mdtf-admin #data_group_items * {
        transition: none !important;
    }
}

/* ---------------------------------------------------------------- shortcode side box, filter style side box */

.mdtf-admin .mdtf-shortcode-copy {
    margin: 0 0 12px;
}

.mdtf-admin .mdtf-shortcode-copy code {
    display: block;
    margin-top: 4px;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
    word-break: break-word;
    user-select: all;
}

.mdtf-admin #meta_data_filter_style i {
    font-style: normal;
    color: var(--mdtf-muted);
    font-size: 12px;
}

.mdtf-admin #meta_data_filter_style h4,
.mdtf-admin #meta_data_filter_style h5 {
    margin: 12px 0 6px;
    font-size: 13px;
    font-weight: 600;
}