/**
 * WCFM Shadcn & Tailwind CSS - Complete Dashboard Overhaul
 * Scoped Premium Design System for all WCFM Modules & Views
 */

:root {
    --wcfm-primary: #18181b; /* Zinc 900 */
    --wcfm-primary-hover: #27272a; /* Zinc 800 */
    --wcfm-primary-foreground: #ffffff;
    --wcfm-background: #ffffff;
    --wcfm-bg-gray: #f4f4f5; /* Zinc 100 */
    --wcfm-bg-soft: #fafafa; /* Zinc 50 */
    --wcfm-foreground: #09090b; /* Zinc 950 */
    --wcfm-muted: #71717a; /* Zinc 500 */
    --wcfm-muted-light: #a1a1aa; /* Zinc 400 */
    --wcfm-border: #e4e4e7; /* Zinc 200 */
    --wcfm-input: #e4e4e7;
    --wcfm-ring: rgba(24, 24, 27, 0.15);
    --wcfm-radius: 8px;
    --wcfm-radius-lg: 12px;
    --wcfm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --wcfm-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --wcfm-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -4px rgba(0, 0, 0, 0.02);
}

/* --- Global WCFM Container & Font Cleanups --- */
#wcfm-main-contentainer {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: var(--wcfm-foreground) !important;
    background-color: var(--wcfm-bg-soft) !important;
    padding: 0 !important;
    border-radius: var(--wcfm-radius-lg) !important;
    margin: 20px auto !important;
    box-shadow: none !important;
}

#wcfm-main-contentainer * {
    font-family: 'Inter', sans-serif !important;
    box-sizing: border-box;
}

#wcfm-main-contentainer h2, 
#wcfm-main-contentainer h3, 
#wcfm-main-contentainer h1, 
#wcfm-main-contentainer .wcfm-page-heading-text {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: var(--wcfm-foreground) !important;
    letter-spacing: -0.02em !important;
}

/* --- Main Layout: Sidebar & Content Area Wrapper --- */
#wcfm-content {
    background: var(--wcfm-background) !important;
    border: 1px solid var(--wcfm-border) !important;
    border-radius: var(--wcfm-radius-lg) !important;
    box-shadow: var(--wcfm-shadow-md) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    position: relative !important;
}

/* --- Left Sidebar Menu (Shadcn Dark Aesthetic) --- */
#wcfm_menu {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    background: #09090b !important; /* Zinc 950 Dark */
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-bottom: 60px !important;
    z-index: 99 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* Sidebar Logo Header */
.wcfm_menu_logo, .wcfm_menu_no_logo {
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    float: none !important;
}

.wcfm_menu_logo img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    margin: 0 10px 0 0 !important;
    float: none !important;
}

.wcfm_menu_logo h4, .wcfm_menu_logo h4 a, .wcfm_menu_no_logo h4, .wcfm_menu_no_logo h4 a {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: -0.01em !important;
    line-height: normal !important;
    float: none !important;
    margin: 0 !important;
    text-decoration: none !important;
}

/* Menu Items List */
#wcfm_menu .wcfm_menu_items {
    margin-top: 5px !important;
    padding: 0 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

#wcfm_menu .wcfm_menu_home {
    margin-top: 5px !important;
}

/* Individual Link Wrapper */
#wcfm_menu .wcfm_menu_items a.wcfm_menu_item {
    width: 100% !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 12px !important;
    border-radius: var(--wcfm-radius) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    text-align: left !important;
    text-decoration: none !important;
    margin: 0 !important;
}

/* Menu Item Icons & Accents */
#wcfm_menu .wcfm_menu_item span {
    font-size: 16px !important;
    color: var(--wcfm-muted-light) !important; /* Zinc 400 */
    transition: color 0.2s ease !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

#wcfm_menu .wcfm_menu_item span.text {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--wcfm-muted-light) !important;
}

/* Hover State */
#wcfm_menu .wcfm_menu_items a.wcfm_menu_item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

#wcfm_menu .wcfm_menu_items a.wcfm_menu_item:hover span {
    color: #ffffff !important;
}

/* Active State */
#wcfm_menu .wcfm_menu_items a.active {
    background: rgba(255, 255, 255, 0.1) !important;
}

#wcfm_menu .wcfm_menu_items a.active span {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Submenu items flyout overrides */
#wcfm_menu span.wcfm_sub_menu_items {
    background: #18181b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--wcfm-radius) !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5) !important;
    padding: 8px !important;
    width: 140px !important;
}

#wcfm_menu span.wcfm_sub_menu_items a {
    color: #a1a1aa !important;
    font-size: 12.5px !important;
    padding: 6px 10px !important;
    display: block !important;
    text-align: left !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

#wcfm_menu span.wcfm_sub_menu_items a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Remove old WCFM triangles and lines */
#wcfm_menu .wcfm_menu_items a.wcfm_menu_item:hover:after,
#wcfm_menu .wcfm_menu_items a.wcfm_menu_item:after {
    display: none !important;
}

/* --- Right Side Content Area Container --- */
#wcfm-main-contentainer .wcfm-collapse {
    width: calc(100% - 240px) !important;
    background-color: var(--wcfm-bg-soft) !important;
    border-radius: 0 !important;
    padding: 24px !important;
    margin: 0 !important;
    min-height: 650px !important;
    flex: 1 !important;
    box-shadow: none !important;
    border-left: 1px solid var(--wcfm-border) !important;
}

.wcfm-collapse-content {
    padding: 0 !important;
}

/* --- Top Header Panels & Dashboard Badges --- */
.wcfm_header_panel {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
}

.wcfm_header_panel a {
    color: var(--wcfm-muted) !important;
    font-size: 18px !important;
    margin: 0 !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--wcfm-background) !important;
    border: 1px solid var(--wcfm-border) !important;
    box-shadow: var(--wcfm-shadow-sm) !important;
    transition: all 0.2s ease !important;
}

.wcfm_header_panel a:hover {
    color: var(--wcfm-foreground) !important;
    border-color: var(--wcfm-muted-light) !important;
}

/* Header Notification pill counts */
.wcfm_header_panel .unread_notification_count {
    background-color: #ef4444 !important; /* Red 500 */
    border: 2px solid var(--wcfm-background) !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    top: -5px !important;
    right: -8px !important;
}

.wcfm_header_panel .unread_notification_count.notice_count {
    background-color: #3b82f6 !important; /* Blue 500 */
}

/* User profile icon in header */
.wcfm_header_panel a.wcfm_header_panel_profile {
    width: 42px !important;
    height: 42px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.wcfm_header_panel .wcfm_header_panel_profile img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid var(--wcfm-border) !important;
    box-shadow: var(--wcfm-shadow-sm) !important;
}

/* Header/Menu Toggler overrides */
#wcfm-main-contentainer .wcfm_menu_toggler {
    color: #00B0F0 !important; /* Premium brand blue toggler */
    font-size: 22px !important;
    padding: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

#wcfm-main-contentainer .wcfm_menu_toggler:hover {
    color: var(--wcfm-primary-hover) !important;
}

/* Hide duplicate responsive toggler completely to keep a single clean hamburger button */
#wcfm-main-contentainer .wcfm_responsive_menu_toggler {
    display: none !important;
}

/* --- Clean Dashboard Stats & Widgets (Shadcn Cards) --- */
.wcfm_dashboard_stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 25px !important;
}

.wcfm_dashboard_stats_block {
    background: var(--wcfm-background) !important;
    border: 1px solid var(--wcfm-border) !important;
    border-radius: var(--wcfm-radius) !important;
    box-shadow: var(--wcfm-shadow-sm) !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.wcfm_dashboard_stats_block .wcfm_dashboard_stats_title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--wcfm-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.wcfm_dashboard_stats_block .wcfm_dashboard_stats_value {
    font-family: 'Outfit', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--wcfm-foreground) !important;
    line-height: 1 !important;
}

/* --- Dashboard Modules Grid Layout --- */
.wcfm_dashboard_double_column, .wcfm_dashboard_double_column_left, .wcfm_dashboard_double_column_right {
    width: 100% !important;
    float: none !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
}

/* Universal Shadcn Dashboard widget panel 
   NOTE: Excludes .wcfm-tabWrap containers (product tab panels) 
   to preserve WCFM's native geometry (absolute positioning + width:75%) */
.wcfm-container:not(.wcfm-tabWrap .wcfm-container) {
    background: var(--wcfm-background) !important;
    border: 1px solid var(--wcfm-border) !important;
    border-radius: var(--wcfm-radius-lg) !important;
    box-shadow: var(--wcfm-shadow) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

/* Header bar for internal panel widgets */
.wcfm-container h2, .wcfm-collapse-content h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--wcfm-foreground) !important;
    margin: 0 0 15px 0 !important;
    display: block !important;
    float: none !important;
    clear: both !important;
}

/* --- Top Actions & Filters --- */
.wcfm_products_menus {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 4px !important;
    margin: 0 0 20px 0 !important;
    background: var(--wcfm-bg-gray) !important;
    border-radius: var(--wcfm-radius) !important;
    gap: 4px !important;
    width: fit-content !important;
    max-width: 100% !important;
    border: none !important;
}

.wcfm_products_menu_item {
    font-size: 13px !important;
    color: transparent !important; /* Hide separator pipes */
    margin: 0 !important;
    padding: 0 !important;
}

.wcfm_products_menu_item a {
    display: inline-block !important;
    padding: 6px 12px !important;
    font-weight: 500 !important;
    color: var(--wcfm-muted) !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

.wcfm_products_menu_item a:hover {
    color: var(--wcfm-foreground) !important;
    background: rgba(255, 255, 255, 0.4) !important;
}

.wcfm_products_menu_item a.active {
    background: var(--wcfm-background) !important;
    color: var(--wcfm-foreground) !important;
    box-shadow: var(--wcfm-shadow-sm) !important;
}

/* Action button items enqueuers */
#wcfm-main-contentainer .add_new_wcfm_ele_dashboard, 
#wcfm-main-contentainer .wcfm_import_export,
#wcfm-main-contentainer .wcfm_screen_manager {
    background: var(--wcfm-background) !important;
    color: var(--wcfm-foreground) !important;
    border: 1px solid var(--wcfm-border) !important;
    border-radius: var(--wcfm-radius) !important;
    box-shadow: var(--wcfm-shadow-sm) !important;
    padding: 8px 14px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: auto !important;
    line-height: 1.5 !important;
    transition: all 0.2s ease !important;
    margin-bottom: 5px !important;
    margin-right: 8px !important;
    float: right !important;
    text-decoration: none !important;
}

#wcfm-main-contentainer .add_new_wcfm_ele_dashboard:hover, 
#wcfm-main-contentainer .wcfm_import_export:hover,
#wcfm-main-contentainer .wcfm_screen_manager:hover {
    background: var(--wcfm-bg-soft) !important;
    border-color: var(--wcfm-muted-light) !important;
    color: var(--wcfm-foreground) !important;
}

#wcfm-main-contentainer #add_new_product_dashboard,
#wcfm-main-contentainer .wcfm_submit_button,
#wcfm-main-contentainer button.wcfm_submit_button {
    background: var(--wcfm-primary) !important;
    color: var(--wcfm-primary-foreground) !important;
    border: 1px solid var(--wcfm-primary) !important;
    box-shadow: var(--wcfm-shadow) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    border-radius: var(--wcfm-radius) !important;
}

#wcfm-main-contentainer #add_new_product_dashboard:hover,
#wcfm-main-contentainer .wcfm_submit_button:hover,
#wcfm-main-contentainer button.wcfm_submit_button:hover {
    background: var(--wcfm-primary-hover) !important;
    border-color: var(--wcfm-primary-hover) !important;
    color: var(--wcfm-primary-foreground) !important;
}

/* WCFM Top element wrapper cleanup */
.wcfm-top-element-container {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 15px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-height: none !important;
    margin-top: 0 !important;
}

/* Filter controls wrap panel */
.wcfm_filters_wrap {
    background: var(--wcfm-background) !important;
    border: 1px solid var(--wcfm-border) !important;
    border-radius: var(--wcfm-radius) !important;
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
    box-shadow: var(--wcfm-shadow-sm) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
}

.wcfm_filters_wrap select, 
.wcfm_filters_wrap .select2-container {
    background: var(--wcfm-background) !important;
    border: 1px solid var(--wcfm-border) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    color: var(--wcfm-foreground) !important;
    height: 36px !important;
    min-width: 160px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.wcfm_filters_wrap select:focus {
    border-color: var(--wcfm-primary) !important;
    box-shadow: 0 0 0 2px var(--wcfm-ring) !important;
}

/* --- Clean Tables Overhaul (Desktop & Mobile) --- */
#wcfm_products_listing_expander,
.wcfm_products_listing_expander {
    background: var(--wcfm-background) !important;
    border: 1px solid var(--wcfm-border) !important;
    border-radius: var(--wcfm-radius-lg) !important;
    box-shadow: var(--wcfm-shadow) !important;
    padding: 0px !important;
    overflow: hidden !important;
}

#wcfm-products, 
#wcfm-orders, 
#wcfm-coupons, 
.wcfm-datatable {
    border-collapse: collapse !important;
    margin: 0 !important;
    width: 100% !important;
    border: none !important;
}

#wcfm-products thead, 
.wcfm-datatable thead {
    background: var(--wcfm-bg-soft) !important;
    border-bottom: 1px solid var(--wcfm-border) !important;
}

#wcfm-products thead th, 
.wcfm-datatable thead th {
    padding: 14px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--wcfm-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: left !important;
    border: none !important;
}

#wcfm-products tbody tr, 
.wcfm-datatable tbody tr {
    border-bottom: 1px solid var(--wcfm-border) !important;
    transition: background-color 0.2s ease !important;
}

#wcfm-products tbody tr:last-child, 
.wcfm-datatable tbody tr:last-child {
    border-bottom: none !important;
}

#wcfm-products tbody tr:hover, 
.wcfm-datatable tbody tr:hover {
    background-color: var(--wcfm-bg-soft) !important;
}

#wcfm-products tbody td, 
.wcfm-datatable tbody td {
    padding: 16px !important;
    font-size: 14px !important;
    color: var(--wcfm-foreground) !important;
    vertical-align: middle !important;
    border: none !important;
}

/* Image Thumbnails inside Tables */
#wcfm-products img, 
.wcfm-datatable img {
    width: 46px !important;
    height: 46px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
    border: 1px solid var(--wcfm-border) !important;
    box-shadow: var(--wcfm-shadow-sm) !important;
}

/* Action Icons inside Tables */
.wcfm-action-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 6px !important;
    border: 1px solid var(--wcfm-border) !important;
    background: var(--wcfm-background) !important;
    color: var(--wcfm-foreground) !important;
    box-shadow: var(--wcfm-shadow-sm) !important;
    transition: all 0.2s ease !important;
    margin-right: 4px !important;
    float: none !important;
}

.wcfm-action-icon:hover {
    background: var(--wcfm-primary) !important;
    color: var(--wcfm-primary-foreground) !important;
    border-color: var(--wcfm-primary) !important;
}

/* --- Clean Modern Status Badges --- */
#wcfm-main-contentainer .product-status,
#wcfm-main-contentainer .order-status,
.wcfm-datatable tbody td .product-status,
.wcfm-datatable tbody td .order-status {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    border-radius: 9999px !important;
    display: inline-block !important;
    text-transform: capitalize !important;
    line-height: 1 !important;
    margin: 0 !important;
    float: none !important;
    color: var(--wcfm-foreground) !important;
    border: 1px solid var(--wcfm-border) !important;
}

.product-status-publish, .order-status-completed {
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}

.product-status-draft, .order-status-processing {
    background-color: #f4f4f5 !important;
    color: #3f3f46 !important;
    border: 1px solid #e4e4e7 !important;
}

.product-status-pending, .order-status-pending {
    background-color: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

.product-status-archived, .order-status-cancelled {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

/* --- INPUTS & SELECTIONS OVERHAUL (Shadcn Aesthetics) --- */
#wcfm_products_manage_form, .wcfm {
    background: transparent !important;
}

/* Scoped inputs & controls */
#wcfm-main-contentainer input[type="text"],
#wcfm-main-contentainer input[type="password"],
#wcfm-main-contentainer input[type="number"],
#wcfm-main-contentainer input[type="time"],
#wcfm-main-contentainer input[type="search"],
#wcfm-main-contentainer textarea,
#wcfm-main-contentainer select {
    width: 100% !important;
    background: var(--wcfm-background) !important;
    border: 1px solid var(--wcfm-border) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: var(--wcfm-foreground) !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    box-shadow: var(--wcfm-shadow-sm) !important;
    height: auto !important;
}

#wcfm-main-contentainer input:focus,
#wcfm-main-contentainer textarea:focus,
#wcfm-main-contentainer select:focus {
    border-color: var(--wcfm-primary) !important;
    box-shadow: 0 0 0 2px var(--wcfm-ring) !important;
}

/* Custom WCFM helper class wrappers */
#wcfm-main-contentainer input.wcfm-text, 
#wcfm-main-contentainer select.wcfm-select, 
#wcfm-main-contentainer textarea.wcfm-textarea {
    width: 60% !important;
    max-width: 100% !important;
    margin-bottom: 15px !important;
}

#wcfm-main-contentainer input.wcfm_product_title {
    font-size: 20px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    padding: 12px 16px !important;
    width: 100% !important;
    border-radius: var(--wcfm-radius) !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
}

#wcfm-main-contentainer p.wcfm_title, 
#wcfm-main-contentainer span.wcfm_title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--wcfm-foreground) !important;
    margin-bottom: 8px !important;
    width: 35% !important;
    display: inline-block !important;
}

#wcfm-main-contentainer p.wcfm_title strong,
#wcfm-main-contentainer span.wcfm_title strong {
    font-style: normal !important;
    font-weight: 600 !important;
}

/* Description / Help notes */
#wcfm-main-contentainer p.description,
#wcfm-main-contentainer p.instructions {
    font-size: 12px !important;
    color: var(--wcfm-muted) !important;
    margin-top: -8px !important;
    margin-bottom: 15px !important;
    font-style: normal !important;
}

/* --- TABS SYSTEM OVERHAUL (.wcfm-tabWrap) --- */
/* Shadcn aesthetic skin layer — do NOT alter display:none/block which WCFM JS controls */
.wcfm-collapse .wcfm-tabWrap {
    background: var(--wcfm-background) !important;
    border: 1px solid var(--wcfm-border) !important;
    border-radius: var(--wcfm-radius-lg) !important;
    box-shadow: var(--wcfm-shadow) !important;
    overflow: hidden !important;
    margin-top: 20px !important;
}

/* Navigation vertical list left — style only, preserve width/display from WCFM */
.wcfm-tabWrap .page_collapsible {
    background: var(--wcfm-bg-soft) !important;
    border-right: 1px solid var(--wcfm-border) !important;
    border-bottom: 1px solid var(--wcfm-border) !important;
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    color: var(--wcfm-muted) !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    margin: 0 !important;
}

.wcfm-tabWrap .page_collapsible:hover {
    color: var(--wcfm-foreground) !important;
    background: var(--wcfm-bg-gray) !important;
}

.wcfm-tabWrap .collapse-open {
    background: var(--wcfm-background) !important;
    color: var(--wcfm-foreground) !important;
    font-weight: 600 !important;
    border-right: 3px solid var(--wcfm-primary) !important;
}

/* WCFM JS controls display:none/block on .wcfm-container - only skin, never touch display */
.wcfm-tabWrap .wcfm-container {
    background: var(--wcfm-background) !important;
    padding: 24px !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- IMAGE UPLOADS & MEDIA DROPZONES --- */
.wcfm-product-feature-upload {
    border: 2px dashed var(--wcfm-border) !important;
    background: var(--wcfm-bg-soft) !important;
    border-radius: var(--wcfm-radius) !important;
    padding: 16px !important;
    width: 100% !important;
    max-width: 220px !important;
    text-align: center !important;
    margin: 0 auto 20px auto !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.wcfm-product-feature-upload:hover {
    border-color: var(--wcfm-primary) !important;
    background: var(--wcfm-bg-gray) !important;
}

/* Gallery layout boxes */
#gallery_img {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)) !important;
    gap: 10px !important;
    margin-top: 15px !important;
}

#gallery_img .multi_input_block {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    position: relative !important;
}

#gallery_img .wcfm-wp-fields-uploader {
    width: 68px !important;
    height: 68px !important;
    border: 1px dashed var(--wcfm-border) !important;
    border-radius: 6px !important;
    background: var(--wcfm-bg-soft) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#gallery_img .wcfm-wp-fields-uploader:hover {
    border-color: var(--wcfm-primary) !important;
}

#gallery_img .wcfm-wp-fields-uploader img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Delete image button */
#gallery_img .multi_input_block_manupulate {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    cursor: pointer !important;
}

/* Category Checklist box */
.wcfm_product_manager_cats_checklist_fields {
    border: 1px solid var(--wcfm-border) !important;
    border-radius: var(--wcfm-radius) !important;
    background: var(--wcfm-background) !important;
    padding: 10px !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
}

ul.product_taxonomy_checklist {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    max-height: 180px !important;
}

ul.product_taxonomy_checklist li {
    font-size: 13px !important;
    padding: 4px 0 !important;
}

/* --- Submit and Action Controls --- */
#wcfm_products_simple_submit {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: 20px !important;
    border-top: 1px solid var(--wcfm-border) !important;
    padding-top: 20px !important;
    float: none !important;
    clear: both !important;
}

#pruduct_manager_draft_button {
    background: var(--wcfm-background) !important;
    color: var(--wcfm-foreground) !important;
    border: 1px solid var(--wcfm-border) !important;
    border-radius: var(--wcfm-radius) !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    box-shadow: var(--wcfm-shadow-sm) !important;
    transition: all 0.2s ease !important;
    float: none !important;
    margin: 0 !important;
}

#pruduct_manager_draft_button:hover {
    background: var(--wcfm-bg-soft) !important;
}

#pruduct_manager_submit_button {
    background: var(--wcfm-primary) !important;
    color: var(--wcfm-primary-foreground) !important;
    border: 1px solid var(--wcfm-primary) !important;
    border-radius: var(--wcfm-radius) !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    box-shadow: var(--wcfm-shadow) !important;
    transition: all 0.2s ease !important;
    float: none !important;
    margin: 0 !important;
}

#pruduct_manager_submit_button:hover {
    background: var(--wcfm-primary-hover) !important;
    border-color: var(--wcfm-primary-hover) !important;
}

/* --- WCFM Custom Checkbox Adaptions --- */
#wcfm-main-contentainer input.wcfm-checkbox, 
#wcfm-main-contentainer input[type="checkbox"] {
    border: 1px solid var(--wcfm-border) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    height: 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    appearance: none !important;
    background-color: var(--wcfm-background) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    transition: all 0.15s ease !important;
    box-shadow: var(--wcfm-shadow-sm) !important;
}

#wcfm-main-contentainer input.wcfm-checkbox:checked,
#wcfm-main-contentainer input[type="checkbox"]:checked {
    background-color: var(--wcfm-primary) !important;
    border-color: var(--wcfm-primary) !important;
}

#wcfm-main-contentainer input.wcfm-checkbox:checked:before,
#wcfm-main-contentainer input[type="checkbox"]:checked:before {
    font-family: "Font Awesome 5 Free" !important;
    content: "\f00c" !important;
    color: var(--wcfm-primary-foreground) !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    display: block !important;
    line-height: 1 !important;
}

/* --- RESPONSIVE MOBILE SCALINGS --- */
@media screen and (max-width: 768px) {
    #wcfm-main-contentainer {
        padding: 0 20px !important; /* Force EXACTLY 20px side paddings on the entire Store Manager upon entry */
        margin: 10px auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #wcfm-content {
        flex-direction: column !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        width: 100% !important;
    }
    
    /* Modern Off-canvas Overlay Drawer for WCFM Menu */
    #wcfm_menu {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important; /* Hidden off-screen left */
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        height: 100vh !important;
        z-index: 99999 !important; /* High z-index to overlay on top of everything */
        background: #09090b !important;
        box-shadow: 10px 0 30px rgba(0,0,0,0.2) !important;
        padding-bottom: 40px !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        flex-direction: column !important;
        display: flex !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    
    /* Open State for the Off-canvas */
    .wcfm-menu-open #wcfm_menu {
        left: 0 !important;
    }
    
    #wcfm-main-contentainer .wcfm-collapse {
        width: 100% !important;
        padding: 16px 0 !important; /* Parent container now handles the 20px side padding */
        border-left: none !important;
        border-top: none !important;
        background: transparent !important;
    }

    /* Hide the original products status menu on mobile (now using the clean select dropdown instead) */
    #wcfm-main-contentainer .wcfm_products_menus {
        display: none !important;
    }

    /* Product Creation Layout Improvements on Mobile (/store-manager/products-manage/) */
    .wcfm_product_manager_general_fields,
    .wcfm_product_manager_gallery_fields {
        width: 100% !important;
        padding-right: 0 !important;
        float: none !important;
        display: block !important;
    }
    
    .wcfm_half_ele {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block !important;
    }
    
    .wcfm_half_ele_right {
        margin-left: 0 !important;
    }

    /* Checklist & Tags Ele 100% width on Mobile */
    .wcfm_product_manager_cats_checklist_fields,
    .product_tags_ele,
    .wcfm_add_new_category,
    .wcfm_fetch_tag_cloud,
    .wcfm_side_tag_cloud,
    .wcfm_side_add_new_category {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        text-align: left !important;
    }

    /* Select2 dropdowns full-width on mobile */
    .select2-container {
        width: 100% !important;
    }

    /* Make Add Product button highly visible, green, and stylish on mobile */
    #wcfm-main-contentainer #add_new_product_dashboard {
        background: #10b981 !important; /* Vibrant emerald green */
        border-color: #10b981 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important; /* Full width for high visibility on mobile */
        padding: 12px !important;
        border-radius: var(--wcfm-radius) !important;
        box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2), 0 2px 4px -1px rgba(16, 185, 129, 0.1) !important;
        margin: 10px 0 20px 0 !important;
        float: none !important;
        text-align: center !important;
        height: auto !important;
    }
    
    #wcfm-main-contentainer #add_new_product_dashboard:hover {
        background: #059669 !important;
        border-color: #059669 !important;
    }

    /* Hide the product limit labels completely on mobile */
    #wcfm-main-contentainer .wcfm_products_limit_label,
    #wcfm-main-contentainer .wcfm_products_limit_label_wrapper,
    #wcfm-main-contentainer [class*="products_limit"] {
        display: none !important;
    }
    
    .wcfm_menu_logo, .wcfm_menu_no_logo {
        height: 60px !important;
        margin-bottom: 10px !important;
        padding: 0 16px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    
    /* Vertical stack layout for items inside the off-canvas drawer */
    #wcfm_menu .wcfm_menu_items,
    #wcfm-main-contentainer #wcfm_menu.wcfm_menu_toggle .wcfm_menu_items {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 10px !important;
        gap: 6px !important;
        display: flex !important;
    }
    
    #wcfm_menu .wcfm_menu_items a.wcfm_menu_item,
    #wcfm-main-contentainer #wcfm_menu.wcfm_menu_toggle .wcfm_menu_items a.wcfm_menu_item {
        width: 100% !important;
        padding: 8px 12px !important;
        height: 40px !important;
        gap: 12px !important;
        display: flex !important;
        justify-content: flex-start !important;
    }
    
    #wcfm_menu .wcfm_menu_item span.text,
    #wcfm-main-contentainer .wcfm_menu_toggle .wcfm_menu_item span.text,
    #wcfm_menu.wcfm_menu_toggle .wcfm_menu_item span.text,
    #wcfm_menu .wcfm_menu_logo h4,
    #wcfm-main-contentainer .wcfm_menu_toggle .wcfm_menu_logo h4,
    #wcfm_menu.wcfm_menu_toggle .wcfm_menu_logo h4,
    #wcfm_menu .wcfm_menu_logo span,
    #wcfm-main-contentainer .wcfm_menu_toggle .wcfm_menu_logo span,
    #wcfm_menu.wcfm_menu_toggle .wcfm_menu_logo span {
        font-size: 13.5px !important;
        display: inline-block !important; /* Make text readable again in side panel */
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Neutralise the collapsed/toggle menu state on mobile completely */
    #wcfm-main-contentainer #wcfm_menu.wcfm_menu_toggle {
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        left: -280px !important; /* Remain hidden until toggled */
    }

    .wcfm-menu-open #wcfm-main-contentainer #wcfm_menu.wcfm_menu_toggle {
        left: 0 !important; /* Slide in correctly when open */
    }

    #wcfm-main-contentainer .wcfm_menu_toggle .wcfm_menu_logo {
        padding: 0 16px !important;
        justify-content: space-between !important;
    }

    #wcfm-main-contentainer #wcfm_menu.wcfm_menu_toggle + .wcfm-collapse {
        width: 100% !important; /* The content continues to fill full width on mobile collapse */
    }

    /* Prevent Header Panel & Header Heading Overlaps on Mobile Screens */
    #wcfm-main-contentainer .wcfm-page-headig {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 50px !important;
        padding: 8px 12px !important;
        gap: 10px !important;
        float: none !important;
        width: 100% !important;
        border-bottom: 1px solid var(--wcfm-border) !important;
        margin-bottom: 15px !important;
    }
    
    #wcfm-main-contentainer .wcfm-page-heading-text {
        margin: 0 !important;
        font-size: 18px !important;
    }
    
    .wcfm_header_panel {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin: 0 !important;
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .wcfm_header_panel a {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    /* Mobile Table-to-Cards Overlap-proof CSS Grid Override */
    #wcfm-products, .wcfm-datatable {
        display: block !important;
    }

    #wcfm-products thead, .wcfm-datatable thead {
        display: none !important;
    }

    #wcfm-products tbody, .wcfm-datatable tbody {
        display: block !important;
        width: 100% !important;
    }

    #wcfm-products tbody tr, .wcfm-datatable tbody tr {
        display: grid !important;
        grid-template-columns: 80px 1fr !important;
        gap: 12px 16px !important;
        background: var(--wcfm-background) !important;
        border: 1px solid var(--wcfm-border) !important;
        border-radius: var(--wcfm-radius-lg) !important;
        box-shadow: var(--wcfm-shadow) !important;
        margin-bottom: 16px !important;
        padding: 16px !important;
        width: 100% !important;
        position: relative !important;
    }

    #wcfm-products tbody td, .wcfm-datatable tbody td {
        display: none !important; /* Hide other columns by default to prevent overlap */
        padding: 0 !important;
        border: none !important;
    }

    /* Keep only thumbnail, title/meta, status, and actions visible */
    #wcfm-products tbody td:nth-child(2),
    .wcfm-datatable tbody td:nth-child(2) { /* Thumbnail */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 80px !important;
        height: 80px !important;
    }
    
    #wcfm-products tbody td:nth-child(2) img,
    .wcfm-datatable tbody td:nth-child(2) img {
        width: 80px !important;
        height: 80px !important;
        border-radius: 8px !important;
    }

    #wcfm-products tbody td:nth-child(3),
    .wcfm-datatable tbody td:nth-child(3) { /* Title, SKU, Price, and Stock info */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    #wcfm-products tbody td:nth-child(5),
    .wcfm-datatable tbody td:nth-child(5) { /* Status Badge */
        display: block !important;
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        width: auto !important;
        z-index: 10 !important;
    }

    #wcfm-products tbody td:last-child,
    .wcfm-datatable tbody td:last-child { /* Actions row at the bottom of the card */
        display: flex !important;
        grid-column: span 2 !important;
        border-top: 1px solid var(--wcfm-border) !important;
        margin-top: 8px !important;
        padding-top: 12px !important;
        gap: 8px !important;
        justify-content: flex-end !important;
    }

    /* Universal Responsive DataTables Filter & Search Styling to Prevent Overlaps */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        display: block !important;
        float: none !important;
        text-align: left !important;
        width: 100% !important;
        padding: 8px 12px !important;
        margin: 0 !important;
    }
    
    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 6px !important;
        display: block !important;
    }
}

/* Stacking tabs on smaller viewport accordions (mobile only) */
@media screen and (max-width: 640px) {
    /* On small screens WCFM collapses tab panels vertically - skin only */
    .wcfm-tabWrap .page_collapsible {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--wcfm-border) !important;
    }
    /* When WCFM shows a container on mobile, make it full width and relative */
    .wcfm-tabWrap .wcfm-container[style*="display: block"],
    .wcfm-tabWrap .wcfm-container[style*="display:block"] {
        width: 100% !important;
        position: relative !important;
        padding: 16px !important;
    }
}

@media screen and (min-width: 769px) {
    /* --- Left Sidebar Collapse Support --- */
    #wcfm-main-contentainer #wcfm_menu.wcfm_menu_toggle {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    #wcfm-main-contentainer #wcfm_menu.wcfm_menu_toggle + .wcfm-collapse {
        width: calc(100% - 60px) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    #wcfm-main-contentainer .wcfm_menu_toggle .wcfm_menu_logo {
        padding: 0 !important;
        justify-content: center !important;
    }

    #wcfm-main-contentainer .wcfm_menu_toggle .wcfm_menu_logo img {
        margin: 0 !important;
    }

    #wcfm-main-contentainer .wcfm_menu_toggle .wcfm_menu_logo h4,
    #wcfm-main-contentainer .wcfm_menu_toggle .wcfm_menu_logo span,
    #wcfm-main-contentainer .wcfm_menu_toggle .wcfm_menu_item span.text {
        display: none !important;
    }

    #wcfm-main-contentainer .wcfm_menu_toggle .wcfm_menu_items a.wcfm_menu_item {
        justify-content: center !important;
        padding: 0 !important;
    }

    #wcfm-main-contentainer .wcfm_menu_toggle .wcfm_menu_items a.wcfm_menu_item span {
        margin: 0 !important;
    }
}

/* --- Hide Premium / Pro Upsells & Locked Dummy Elements --- */

/* Hide Enquiry (Tablón de consultas) and Notice (Avisos) sidebar options completely */
#wcfm_menu a[href*="enquiry"], 
#wcfm_menu a[href*="notice"],
#wcfm_menu a[href*="avisos"],
#wcfm_menu a[href*="consultas"],
#wcfm_menu a[class*="enquiry"], 
#wcfm_menu a[class*="notice"] {
    display: none !important;
}

/* Hide annoying tooltips globally */
.qtip, .qtip-default, .qtip-wcfm-menu-css, .qtip-wcfm-core-css, [class*="qtip"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* Inactive Screen Manager dummy buttons and locks */
.wcfm_screen_manager_dummy,
#wcfm-main-contentainer .wcfm_screen_manager_dummy,
.wcfm_screen_manager_dummy_wrapper,
.wcfmfa.fa-lock {
    display: none !important;
}

/* Inactive Dummy action buttons on WCFM dashboards (Import, Stock Manager, etc. which use onclick return false) */
#wcfm-main-contentainer a[onclick*="return false;"],
#wcfm-main-contentainer a[onclick*="return false"],
#wcfm-main-contentainer input[onclick*="return false;"],
#wcfm-main-contentainer input[onclick*="return false"],
#wcfm-main-contentainer span[onclick*="return false;"],
#wcfm-main-contentainer span[onclick*="return false"] {
    display: none !important;
}

/* Ultimate feature advice boxes & promotional notices */
.wcfm-wcfmu,
.wcfm-wcfmu1,
.wcfm_wcfmu_feature_advise,
.wcfm_wcfmu_advise,
.wcfmu-feature-notice,
.wcfmu_feature_help_text_show,
#wcfm-main-contentainer .wcfm-wcfmu,
#wcfm-main-contentainer .wcfm_wcfmu_feature_advise,
.wcfm_ultimate_notice {
    display: none !important;
}

/* Locked bulk edit checkboxes */
#wcfm-products thead th input[onclick*="return false"],
#wcfm-products tfoot th input[onclick*="return false"],
.bulk_action_checkbox_all[onclick*="return false"] {
    display: none !important;
}

/* Off-canvas Blurred Backdrop Overlay */
.wcfm-menu-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 99998 !important;
    display: none;
    transition: opacity 0.3s ease !important;
    opacity: 0;
}

.wcfm-menu-open .wcfm-menu-backdrop {
    display: block !important;
    opacity: 1 !important;
}

body.wcfm-menu-open {
    overflow: hidden !important; /* Disable double scrolling when menu is open */
}

/* --- TinyMCE WYSIWYG Description Editor & Green Buttons Overhaul --- */

/* Make "Añadir objeto" / "Add Media" (insert-media) button highly visible, premium emerald green */
#wcfm-main-contentainer .insert-media,
#wcfm-main-contentainer button.insert-media,
#wcfm-main-contentainer .wp-media-buttons .insert-media {
    background: #10b981 !important; /* Vibrant Emerald Green */
    border: 1px solid #10b981 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: var(--wcfm-shadow-sm) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 34px !important;
    min-height: 34px !important;
    line-height: normal !important;
    cursor: pointer !important;
}

#wcfm-main-contentainer .insert-media:hover,
#wcfm-main-contentainer button.insert-media:hover {
    background: #059669 !important; /* Darker emerald hover */
    border-color: #059669 !important;
    color: #ffffff !important;
}

#wcfm-main-contentainer .insert-media span.wp-media-buttons-icon,
#wcfm-main-contentainer button.insert-media span.wp-media-buttons-icon {
    color: #ffffff !important; /* Force white media icon */
    filter: brightness(0) invert(1) !important; /* Invert black dashicon to white */
}

/* Visual / Text Switch Editor tabs styling */
#wcfm-main-contentainer .wp-switch-editor {
    background: #f4f4f5 !important;
    color: #71717a !important;
    border: 1px solid #e4e4e7 !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-right: 4px !important;
    transition: all 0.2s ease !important;
    height: auto !important;
}

#wcfm-main-contentainer .active .wp-switch-editor {
    background: #18181b !important;
    color: #ffffff !important;
    border-color: #18181b !important;
}

/* Text editor toolbar styling (HTML mode) */
#wcfm-main-contentainer .quicktags-toolbar {
    background: #f4f4f5 !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 8px !important;
}

#wcfm-main-contentainer .quicktags-toolbar input.button {
    background: #ffffff !important;
    color: #18181b !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-right: 4px !important;
    margin-bottom: 4px !important;
    box-shadow: var(--wcfm-shadow-sm) !important;
}

#wcfm-main-contentainer .quicktags-toolbar input.button:hover {
    background: #f4f4f5 !important;
    border-color: #d4d4d8 !important;
}

/* --- PRODUCT MANAGER CLUTTER REMOVALS & SPECIFIC UX IMPROVEMENTS --- */

/* 1. Hide Simple Product Selector and Catalog / Virtual / Downloadable checkboxes */
#product_type,
select#product_type,
.wcfm_ele_simple,
#is_catalog,
#is_virtual,
#is_downloadable,
label[for="is_catalog"],
label[for="is_virtual"],
label[for="is_downloadable"],
input[name="is_catalog"],
input[name="is_virtual"],
input[name="is_downloadable"],
.wcfm_catalog_wrap,
.wcfm_virtual_wrap,
.wcfm_downloadable_wrap,
#wcfm_products_manage_form_general_expander .wcfm_title_wrapper {
    display: none !important;
}

/* Ensure the product type wrapper itself does not leave empty visual gaps */
.wcfm_product_type_wrapper,
.wcfm_catalog_wrapper,
.wcfm_virtual_wrapper,
.wcfm_downloadable_wrapper {
    display: none !important;
}

/* 2. Style the Product Title input beautifully */
#wcfm-main-contentainer input.wcfm_product_title {
    font-size: 22px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    padding: 14px 18px !important;
    width: 100% !important;
    border: 2px solid var(--wcfm-border) !important;
    border-radius: 8px !important;
    background: var(--wcfm-background) !important;
    color: var(--wcfm-foreground) !important;
    margin-top: 8px !important;
    margin-bottom: 24px !important;
    box-shadow: var(--wcfm-shadow-sm) !important;
    transition: all 0.2s ease !important;
}
#wcfm-main-contentainer input.wcfm_product_title:focus {
    border-color: var(--wcfm-primary) !important;
    box-shadow: 0 0 0 3px var(--wcfm-ring) !important;
}

/* 3. Hide External / Affiliate product URL and button text fields ONLY
   IMPORTANT: Do NOT use .external class — WCFM uses it as a product-type modifier
   on panel containers (inventory, linked, etc.) to mean "show for external products too".
   Only target the specific field IDs and names for the URL/button inputs. */
#product_url,
#button_text,
[name="product_url"],
[name="button_text"],
.wcfm_ele_external,
#wcfm_products_manage_form_external_expander,
.wcfm_external_wrapper {
    display: none !important;
}

/* 4. Hide sale price scheduling dates 
   - sales_schedule_ele: WCFM's own class for the schedule date inputs
   - .sales_schedule: the "schedule" link that toggles the date pickers
   - Using field IDs: sale_date_from / sale_date_upto (from PHP inspection) */
.sales_schedule_ele,
.sales_schedule,
.var_sales_schedule_ele,
#sale_date_from,
#sale_date_upto,
[name="sale_date_from"],
[name="sale_date_upto"],
a.wcfm_price_schedule,
.wcfm_price_schedule_btn {
    display: none !important;
}

/* 5. Improve legibility of Short & Long Description Visual/Text Editor Toolbar buttons (TinyMCE) */
[id*="mceu_"], 
#mceu_2-button, 
.mce-btn,
.mce-toolbar-grp,
.mce-panel {
    background-color: #ffffff !important;
    border-color: #e4e4e7 !important;
    border-radius: 6px !important;
}
.mce-btn button,
[id*="mceu_"] button,
.mce-ico,
.mce-text {
    color: #18181b !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
}
.mce-btn:hover,
[id*="mceu_"]:hover,
.mce-btn.mce-active,
.mce-btn-group .mce-btn:focus {
    background-color: #f4f4f5 !important;
    border-color: #d4d4d8 !important;
}
.mce-toolbar-grp {
    border-bottom: 1px solid #e4e4e7 !important;
    padding: 6px !important;
}

/* 6. Hide Product Tags & Brands ("etiquetas" and "marcas") sections completely */
.product_tags_ele,
.product_tags,
[name*="product_tags"],
#wcfm_products_manage_form_tags_expander,
.product_brands,
.product_brand_ele,
[name*="product_brand"],
#wcfm_products_manage_form_brands_expander,
.wcfm_taxonomy_brand_checklist,
.wcfm_taxonomy_brand,
#wcfm_products_manage_form_brand_expander,
.wcfm_taxonomy_product_brand,
#wcfm_products_manage_form_product_brand_expander {
    display: none !important;
}

/* --- DESKTOP LAYOUT STABILIZERS (safe overrides only) --- */
@media screen and (min-width: 769px) {
    /* Stabilize product editor general vs sidebar column structures */
    .wcfm_product_manager_general_fields {
        width: 65% !important;
        float: left !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }
    .wcfm_product_manager_gallery_fields {
        width: 35% !important;
        float: right !important;
        box-sizing: border-box !important;
    }
    /* Clearfix for the main form */
    #wcfm_products_manage_form::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }
}