/**
 * Lean Example Plugin - Settings Page Styles
 * 
 * These styles complement WordPress admin styles for tabbed settings interface
 * Prefix: lex- (Lean EXample)
 */

 /* Override core WP style - Only for settings pages, exclude post types and Freemius license page */
body[class*="_page_"]:not(.post-new-php):not(.post-php):not([class*="lean_player-license"]) #wpcontent {
   padding-left: 0;
}

body[class*="_page_"]:not(.post-new-php):not(.post-php):not([class*="lean_player-license"]) #wpcontent .wrap {
    margin-right: 0;
    margin-top: -3px;
}

body[class*="_page_"]:not(.post-new-php):not(.post-php):not([class*="lean_player-license"]) {
    background-color: var(--lex-admin-page-bg);
}

.lex-settings-tabs__content .form-table textarea{
    width: 100%;
}

.lex-field p.description{
    margin-top: .3rem;
    font-size: var(--lex-font-size-sm);
    color: var(--lex-color-apple-label-secondary);
    line-height: 1.5;
}

.lex-field-info--info p.description{
    margin-top: 0;
}

.lex-field-info--notice td {
    padding-top: 4px;
    padding-bottom: 4px;
}
.lex-field-info--notice .lex-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: var(--wp-color-blue-0);
    border-left: 3px solid var(--wp-color-blue-50);
    border-radius: 0 3px 3px 0;
    font-size: var(--lex-font-size-sm);
    color: var(--wp-color-gray-80);
    line-height: 1.5;
}
.lex-field-info--notice .lex-notice__icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    fill: var(--wp-color-blue-50);
}

.lex-field label +p.description {
    margin-top: 0;
}

/* Textarea-specific description spacing */
.lex-settings-tabs__content .form-table tr.lex-field-type--textarea p.description {
    margin-top: 0;
}

/* Inline radio buttons layout */
.lex-settings-tabs__content .form-table tr.lex-field--inline fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* ============================================
   COMPONENT VARIABLES (WordPress Foundation)
   ============================================ */
:root {
    /* Lex admin semantics */
    --lex-color-primary: var(--lex-color-brand-primary);
    --lex-color-primary-hover: var(--lex-color-brand-primary-hover);
    --lex-color-primary-light: var(--lex-color-brand-primary-light);
    --lex-color-primary-contrast: var(--wp-color-white);
    --lex-color-text: var(--wp-color-gray-90);
    --lex-color-text-muted: var(--wp-color-gray-60);
    --lex-color-text-subtle: var(--wp-color-gray-30);
    --lex-color-surface: var(--wp-color-white);
    --lex-color-border: var(--wp-color-gray-5);
    --lex-color-border-hover: var(--wp-color-gray-20);
    --lex-color-success: var(--wp-color-green-40);
    --lex-color-error: var(--wp-color-red-50);
    --lex-color-warning: var(--wp-color-yellow-20);
    --lex-color-info: var(--wp-color-blue-50);

    /* Lex admin component semantics */
    --lex-admin-page-bg: var(--wp-color-blue-0);
    --lex-admin-card-shadow: 0 10px 30px color-mix(in srgb, var(--wp-color-black) 12%, transparent), 0 4px 12px color-mix(in srgb, var(--wp-color-black) 8%, transparent);
    --lex-admin-danger-bg: color-mix(in srgb, var(--wp-color-red-50) 10%, transparent);
    --lex-admin-danger-bg-hover: color-mix(in srgb, var(--wp-color-red-50) 15%, transparent);
    --lex-admin-danger-bg-active: color-mix(in srgb, var(--wp-color-red-50) 20%, transparent);
    --lex-admin-danger-border: color-mix(in srgb, var(--wp-color-red-50) 30%, transparent);
    --lex-admin-danger-color-hover: var(--wp-color-red-60);
    --lex-admin-danger-shadow: 0 2px 4px color-mix(in srgb, var(--wp-color-red-50) 15%, transparent);
    --lex-primary-shadow-sm: 0 2px 8px color-mix(in srgb, var(--lex-color-primary) 25%, transparent);
    --lex-primary-shadow-md: 0 4px 12px color-mix(in srgb, var(--lex-color-primary) 35%, transparent);
    --lex-primary-shadow-active: 0 1px 4px color-mix(in srgb, var(--lex-color-primary) 30%, transparent);

    /* Text Fields (Single-line inputs only: text, password, email, url, number, select)
       Note: These are NOT for textareas - textareas     use different sizing */
    --lex-textfield-height: 30px;
    --lex-textfield-padding-y: 6px;
    --lex-textfield-padding-x: 8px;
    --lex-textfield-line-height: 1.5;
    
    /* Box Model Visual Input */
    --inner-offset: var(--lex-space-8);
    
    /* PRO Badge Dimensions (Centralized Control) */
    --lex-pro-badge-padding-y: 3px;
    --lex-pro-badge-padding-x: 8px;
    --lex-pro-badge-font-size: 10px;
    --lex-pro-badge-line-height: 1.4;
    --lex-pro-badge-letter-spacing: 0.5px;
}

/* ============================================
   NAV HEADER
   ============================================ */

.lex-nav-header {
    background: var(--lex-color-surface);
    border-bottom: 1px solid var(--lex-color-border);
    position: sticky;
    top: var(--lex-wp-adminbar-height);
    z-index: 10000;
    margin-bottom: var(--lex-space-6); /* Spacing below header */
}

.lex-nav-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--lex-space-6);
    height: var(--lex-nav-header-height);
    max-width: var(--lex-layout-max-width);
    margin: 0 auto;
}

/* ============================================
   LOGO/BRAND SECTION
   ============================================ */

.lex-nav-header__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.lex-nav-header__logo {
    width: 40px;
    height: 40px;
    background: var(--wp-color-gray-2);
    border-radius: var(--lex-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lex-nav-header__logo .dashicons {
    color: var(--lex-color-text);
    font-size: var(--lex-font-size-3xl);
    width: 24px;
    height: 24px;
    line-height: 1;
    display: block;
}

.lex-nav-header__logo svg {
    width: 24px;
    height: 24px;
    color: var(--lex-color-primary-contrast);
    display: block;
    flex-shrink: 0;
}

.lex-nav-header__name {
    font-size: var(--lex-font-size-2xl);
    font-weight: 600;
    color: var(--lex-color-text);
    letter-spacing: -0.01em;
}

.lex-nav-header__version {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: var(--lex-font-size-xs);
    font-weight: 600;
    color: var(--lex-color-text-muted);
    background: var(--wp-color-gray-0);
    border-radius: var(--lex-radius-sm);
    letter-spacing: 0.02em;
}

/* ============================================
   NAVIGATION - RIGHT ALIGNED
   ============================================ */

.lex-nav-header__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto; /* Right align the navigation */
}

.lex-nav-header__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: var(--lex-font-size-base);
    font-weight: 600;
    color: var(--lex-color-text);
    text-decoration: none;
    border-radius: var(--lex-radius-md);
    transition: all 0.15s ease;
    cursor: pointer;
    border: none;
    background: transparent;
    white-space: nowrap;
}

.lex-nav-header__item:focus {
    outline: none;
    box-shadow: none;
}

/* Hover State */
.lex-nav-header__item:hover {
    color: var(--lex-color-text);
    background-color: var(--wp-color-gray-2);
}

/* Active State */
.lex-nav-header__item--active {
    background-color: var(--wp-color-gray-2);
}

/* ============================================
   DROPDOWN - "MORE" BUTTON (HOVER TO SHOW)
   ============================================ */

.lex-nav-header__dropdown {
    position: relative;
}

.lex-nav-header__dropdown-toggle {
    position: relative;
}

.lex-nav-header__dropdown-toggle .dashicons {
    font-size: var(--lex-font-size-lg);
    width: 16px;
    height: 16px;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

/* Arrow rotates on hover */
.lex-nav-header__dropdown:hover .lex-nav-header__dropdown-toggle .dashicons {
    transform: rotate(180deg);
}

/* Dropdown Menu - Shows on HOVER */
.lex-nav-header__dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--lex-color-surface);
    border: 1px solid var(--lex-color-border);
    border-radius: var(--lex-radius-md);
    box-shadow: var(--lex-admin-card-shadow);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1001;
}

/* Show dropdown on hover */
.lex-nav-header__dropdown:hover .lex-nav-header__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown Items */
.lex-nav-header__dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: var(--lex-font-size-base);
    font-weight: 500;
    color: var(--lex-color-text-muted);
    text-decoration: none;
    border-radius: var(--lex-radius-md);
    transition: all 0.15s ease;
}

.lex-nav-header__dropdown-item:focus {
    outline: none;
    box-shadow: none;
}

.lex-nav-header__dropdown-item:hover {
    color: var(--lex-color-text);
    background-color: var(--wp-color-gray-2);
}

.lex-nav-header__dropdown-item:active {
    background-color: var(--lex-color-border);
}

/* Dropdown item icons */
.lex-nav-header__dropdown-item .dashicons {
    flex-shrink: 0;
}

/* PRO badge in dropdown */
.lex-nav-header__dropdown-item .lex-pro-badge--small {
    margin-left: auto;
}

/* ============================================
   TAB NAVIGATION (Stable Layout - No Shifts)
   ============================================ */
.lex-settings-tabs {
    padding: 0 var(--lex-space-4);
    margin: var(--lex-space-6) auto;
    border-bottom: 2px solid var(--lex-color-border);
    display: flex;
    gap: 0;
    position: relative;
    max-width: var(--lex-layout-max-width);
}

.lex-settings-tabs__tab {
    padding: 14px 20px;
    color: var(--lex-color-text-muted);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--lex-font-size-base);
    font-weight: var(--lex-font-weight-medium);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lex-space-1);
    position: relative;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
}

.lex-settings-tabs__tab .dashicons {
    flex-shrink: 0;
}

.lex-settings-tabs__tab:hover {
    color: var(--lex-color-primary);
    background: var(--lex-color-primary-light);
}

.lex-settings-tabs__tab:focus {
    outline: none;
    outline-offset: -2px;
    box-shadow: none;
}

.lex-settings-tabs__tab--active {
    color: var(--lex-color-primary);
    background: var(--lex-color-primary-light);
}

/* Active tab indicator - positioned absolutely to avoid layout shift */
.lex-settings-tabs__tab--active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--lex-color-primary);
    transform: translateY(2px);
}

.lex-settings-tabs__tab--pro {
    color: var(--lex-color-text-subtle);
}

/* ============================================
   PRO BADGES (Consistent Dimensions)
   ============================================ */

/* Base PRO Badge Styles - Consistent dimensions across all variations */
.lex-pro-badge,
.lex-pro-badge--auto,
.lex-pro-badge--inline,
.lex-pro-badge--small {
    padding: var(--lex-pro-badge-padding-y) var(--lex-pro-badge-padding-x);
    background: var(--lex-color-primary);
    color: var(--lex-color-primary-contrast);
    border-radius: var(--lex-radius-xs);
    font-size: var(--lex-pro-badge-font-size);
    font-weight: var(--lex-font-weight-semibold);
    line-height: var(--lex-pro-badge-line-height);
    letter-spacing: var(--lex-pro-badge-letter-spacing);
    text-transform: uppercase;
}

.lex-pro-badge--medium {
    padding: calc(var(--lex-pro-badge-padding-y) + 1px) calc(var(--lex-pro-badge-padding-x) + 2px);
    font-size: var(--lex-font-size-xs);
    line-height: 1.5;
}

/* Specific display and positioning for each variation */
.lex-pro-badge {
    display: inline-block;
    margin-left: 0;
}

.lex-pro-badge--auto {
    display: block;
    width: fit-content;
    margin-bottom: 6px;
}

/* Inline variation - shown inline after label text */
label .lex-pro-badge--auto,
.lex-pro-badge--inline {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 6px;
    vertical-align: middle;
}

/* Absolute wrapper for absolute positioned badge */
.lex-pro-badge__wrapper {
    position: relative;
    padding-top: 22px;
}

.lex-pro-badge__wrapper .lex-pro-badge--auto {
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 0;
}

.lex-field--pro-label {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Individual PRO Field Styling */
.lex-field--pro {
    position: relative;
}

.lex-field--pro label {
    opacity: 0.85;
    cursor: pointer;
}

/* PRO Badge - Variation 1: Vertical Stacking (Block Level) */
.lex-field--pro th label::before {
    content: "PRO";
    display: block;
    width: fit-content;
    padding: var(--lex-pro-badge-padding-y) var(--lex-pro-badge-padding-x);
    margin-bottom: 6px;
    background: var(--lex-color-primary);
    color: var(--lex-color-primary-contrast);
    border-radius: var(--lex-radius-xs);
    font-size: var(--lex-pro-badge-font-size);
    font-weight: var(--lex-font-weight-semibold);
    line-height: var(--lex-pro-badge-line-height);
    letter-spacing: var(--lex-pro-badge-letter-spacing);
    text-transform: uppercase;
}

.lex-field--pro input:disabled,
.lex-field--pro select:disabled,
.lex-field--pro textarea:disabled {
    background: var(--wp-color-gray-0);
    cursor: pointer;
    position: relative;
}

/* PRO Badge - Variation 2: Absolute Positioned (Top-Left Corner) */
.lex-field--pro-absolute {
    position: relative;
}

.lex-field--pro-absolute label {
    position: relative;
    padding-top: 22px;
    opacity: 0.85;
    cursor: pointer;
}

.lex-field--pro-absolute label::before {
    content: "PRO";
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--lex-pro-badge-padding-y) var(--lex-pro-badge-padding-x);
    background: var(--lex-color-primary);
    color: var(--lex-color-primary-contrast);
    border-radius: var(--lex-radius-xs);
    font-size: var(--lex-pro-badge-font-size);
    font-weight: var(--lex-font-weight-semibold);
    line-height: var(--lex-pro-badge-line-height);
    letter-spacing: var(--lex-pro-badge-letter-spacing);
    text-transform: uppercase;
}

.lex-field--pro-absolute input:disabled,
.lex-field--pro-absolute select:disabled,
.lex-field--pro-absolute textarea:disabled {
    background: var(--wp-color-gray-0);
    cursor: pointer;
}

/* PRO Badge - Variation 3: Inline (After Label Text) */
.lex-field--pro-inline {
    position: relative;
}

.lex-field--pro-inline label {
    opacity: 0.85;
    cursor: pointer;
}

.lex-field--pro-inline label::after {
    content: "PRO";
    display: inline-block;
    padding: var(--lex-pro-badge-padding-y) var(--lex-pro-badge-padding-x);
    margin-left: 6px;
    background: var(--lex-color-primary);
    color: var(--lex-color-primary-contrast);
    border-radius: var(--lex-radius-xs);
    font-size: var(--lex-pro-badge-font-size);
    font-weight: var(--lex-font-weight-semibold);
    line-height: var(--lex-pro-badge-line-height);
    letter-spacing: var(--lex-pro-badge-letter-spacing);
    text-transform: uppercase;
    vertical-align: middle;
}

.lex-field--pro-inline input:disabled,
.lex-field--pro-inline select:disabled,
.lex-field--pro-inline textarea:disabled {
    background: var(--wp-color-gray-0);
    cursor: pointer;
}

/* Clickable PRO Field (V2 - Opens Modal on Click) */
.lex-field--clickable{
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.lex-field--clickable:hover{
    opacity: 0.85;
    cursor: pointer;
}

.lex-field--clickable:active{
    opacity: 0.6;
}

/* Disable pointer events on all child elements */
.lex-field--clickable *{
    cursor: pointer;
}

.lex-field--clickable input:disabled{
    /* Override WordPress disabled cursor so clickable disabled-looking fields remain discoverable. */
    cursor: pointer !important;
}

.lex-field--clickable .description{
    color: var(--lex-color-text-muted);
    font-style: italic;
}

/* PRO Section for Grouped Features (3+ related fields) - Full Width */
.lex-pro-section {
    border-top: 1px solid var(--lex-color-border);
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding-top: calc(var(--lex-space-6) + 8px);
    padding-bottom: var(--lex-space-6);
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    margin-left: calc(var(--lex-space-6) * -1);
    margin-right: calc(var(--lex-space-6) * -1);
    background: var(--wp-color-gray-0);
    position: relative;
}

.lex-pro-section__header {
    padding: 6px var(--lex-space-4);
    font-weight: 600;
    color: var(--lex-color-text-muted);
    font-size: var(--lex-font-size-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    border: 1px solid var(--lex-color-border);
    border-radius: var(--lex-radius-sm);
    background: var(--lex-color-surface);
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    z-index: 1;
}

.lex-pro-section .lex-pro-badge {
    margin-left: 0;
}

.lex-pro-section label {
    opacity: 0.85;
}

.lex-pro-section input:disabled,
.lex-pro-section select:disabled,
.lex-pro-section textarea:disabled {
    background: var(--wp-color-gray-0);
    cursor: pointer;
}

/* Nested table inside PRO section - remove extra margins */
.lex-pro-section .form-table {
    margin-top: var(--lex-space-2);
}

.lex-pro-section .form-table tr:first-child th,
.lex-pro-section .form-table tr:first-child td {
    padding-top: var(--lex-space-2);
}

.lex-field--pro-label input[disabled] {
    cursor: not-allowed;
}

/* ============================================
   TAB CONTENT
   ============================================ */
.lex-settings-tabs__content {
    display: none;
    padding: 0;
}

.lex-settings-tabs__content--active {
    display: block;
}

/* ============================================
   SETTINGS SECTIONS (Minimal Card Style)
   ============================================ */
.lex-settings-section {
    background: var(--lex-color-surface);
    border: 1px solid var(--lex-color-border);
    border-radius: var(--lex-radius-md);
    padding: 0;
    position: relative;
    box-shadow: var(--lex-shadow-sm);
    overflow: visible;
}

.lex-settings-section + .lex-settings-section {
    margin-top: var(--lex-space-4);
}

/* Padding for direct children (paragraphs, divs, etc. not in form-table) */
.lex-settings-section > p,
.lex-settings-section > div:not(.lex-settings-section__title):not(.lex-settings-section__overlay) {
    padding-left: var(--lex-space-6);
    padding-right: var(--lex-space-6);
}

.lex-settings-section__title {
    margin: 0;
    padding: var(--lex-space-3) var(--lex-space-4);
    border-bottom: 1px solid var(--wp-color-gray-2);
    border-radius: var(--lex-radius-md) var(--lex-radius-md) 0 0;
    font-size: var(--lex-font-size-lg);
    font-weight: var(--lex-font-weight-semibold);
    color: var(--lex-color-text);
    background: var(--wp-color-gray-0);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lex-settings-section--accordion .lex-settings-section__title {
    font-size: var(--lex-font-size-lg);
    font-weight: var(--lex-font-weight-semibold);
    color: var(--lex-color-text-muted);
}

/* Pro Section Overlay */
.lex-settings-section--pro {
    position: relative;
}

.lex-settings-section__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--wp-color-white) 95%, transparent);
    backdrop-filter: blur(2px);
    border-radius: var(--lex-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.lex-settings-section__overlay-content {
    text-align: center;
    padding: var(--lex-space-8);
}

.lex-settings-section__overlay-content .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--lex-color-primary);
    margin-bottom: var(--lex-space-4);
}

.lex-settings-section__overlay-content h3 {
    margin: 0 0 var(--lex-space-2) 0;
    color: var(--lex-color-text);
    font-weight: var(--lex-font-weight-medium);
}

.lex-settings-section__overlay-content p {
    color: var(--lex-color-text-muted);
    font-weight: var(--lex-font-weight-normal);
    margin-bottom: var(--lex-space-6);
    line-height: 1.6;
}

/* Full Tab Pro Overlay */
.lex-pro-full-overlay {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wp-color-gray-0);
    border: 2px dashed var(--lex-color-border);
    border-radius: var(--lex-radius-md);
}

.lex-pro-full-content {
    text-align: center;
    max-width: 500px;
    padding: var(--lex-space-8);
}

.lex-pro-full-content .dashicons {
    font-size: 64px;
    width: 64px;
    height: 64px;
    color: var(--lex-color-primary);
    margin-bottom: var(--lex-space-6);
}

.lex-pro-full-content h2 {
    margin: 0 0 var(--lex-space-4) 0;
    color: var(--lex-color-text);
    font-weight: var(--lex-font-weight-medium);
}

.lex-pro-full-content p {
    color: var(--lex-color-text-muted);
    font-size: var(--lex-font-size-base);
    font-weight: var(--lex-font-weight-normal);
    margin-bottom: var(--lex-space-6);
    line-height: 1.6;
}

.lex-pro-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--lex-space-8) 0;
    text-align: left;
}

.lex-pro-features li {
    display: flex;
    align-items: center;
    gap: var(--lex-space-2);
    padding: var(--lex-space-2) 0;
    color: var(--lex-color-text-muted);
}

.lex-pro-features li .dashicons {
    font-size: var(--lex-font-size-2xl);
    width: 20px;
    height: 20px;
    color: var(--lex-color-success);
}

/* ============================================
   LIVE PREVIEW BOX (Enhanced)
   ============================================ */
.lex-live-preview {
    background: linear-gradient(135deg, var(--wp-color-white) 0%, var(--wp-color-gray-0) 100%);
    border: 1px solid var(--lex-color-border);
    border-radius: var(--lex-radius-md);
    padding: var(--lex-space-8);
    margin-bottom: var(--lex-space-6);
    box-shadow: var(--lex-shadow-sm);
}

.lex-live-preview h3 {
    margin: 0 0 var(--lex-space-4) 0;
    font-size: var(--lex-font-size-lg);
    font-weight: var(--lex-font-weight-medium);
    color: var(--lex-color-text);
}

.lex-live-preview__box {
    background: var(--lex-color-surface);
    border: 1px solid var(--lex-color-border);
    border-radius: var(--lex-radius-md);
    padding: var(--lex-space-8);
    text-align: center;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--lex-shadow-sm);
}

.lex-btn--bookmark {
    display: inline-flex;
    align-items: center;
    gap: var(--lex-space-2);
    padding: 10px 20px;
    background: var(--lex-color-primary);
    color: var(--lex-color-primary-contrast);
    border: none;
    border-radius: var(--lex-radius-md);
    font-size: var(--lex-font-size-base);
    font-weight: var(--lex-font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--lex-primary-shadow-sm);
}

.lex-btn--bookmark:hover {
    background: var(--lex-color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--lex-primary-shadow-md);
}

.lex-btn--bookmark .dashicons {
    font-size: var(--lex-font-size-2xl);
    width: 18px;
    height: 18px;
}

/* ============================================
   FORM ELEMENTS ENHANCEMENTS
   ============================================ */

/* Normalize Input Heights & Spacing - All text-based inputs and selects */
.lex-field input[type="text"],
.lex-field input[type="password"],
.lex-field input[type="email"],
.lex-field input[type="url"],
.lex-field input[type="number"],
.lex-field select{
    box-sizing: border-box;
    min-height: var(--lex-textfield-height);
    padding: var(--lex-textfield-padding-y) var(--lex-textfield-padding-x);
    line-height: var(--lex-textfield-line-height);
    font-size: var(--lex-font-size-base);
    border: 1px solid var(--lex-color-text-subtle);
    border-radius: var(--lex-radius-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lex-field select{
    padding-right: calc(var(--lex-textfield-padding-x) + 15px);
}

/* Small text variant - slightly smaller but same height structure */
.lex-field input.small-text {
    max-width: 100px;
}

.lex-field-type--radio label{
    cursor: pointer;
}

.lex-settings-section .form-table {
    margin: 0;
}

.lex-settings-section .form-table th {
    width: 230px;
    padding: var(--lex-space-4) var(--lex-space-6);
    vertical-align: top;
    font-size: var(--lex-font-size-md);
    font-weight: var(--lex-font-weight-medium);
    position: relative;
    overflow: visible;
}

.lex-settings-section .form-table th .description {
    margin-top: 4px;
    font-weight: var(--lex-font-weight-normal);
}

.lex-settings-section .form-table td {
    padding: var(--lex-space-4) var(--lex-space-6);
    position: relative;
    overflow: visible;
}

.lex-settings-section .lex-form-table tr {
    border-bottom: 1px solid var(--wp-color-gray-0);
}

.lex-settings-section .form-table tr:last-child {
    border-bottom: none;
}

/* Color Picker Disabled State */
.lex-color-picker[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Section Save Buttons - Right Aligned */
.lex-section-actions {
    padding: var(--lex-space-4) var(--lex-space-6);
    border-top: 1px solid var(--wp-color-gray-2);
    background: var(--wp-color-gray-0);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--lex-space-2);
}

/* Tab Actions - Centered with Gap */
.lex-settings-tabs__content > .submit {
    margin-top: var(--lex-space-4);
    padding-top: var(--lex-space-4);
    border-top: 1px solid var(--lex-color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

/* Reset Button - Danger Style */
.lex-btn.lex-btn--reset-section {
    /* Override WordPress button skins for the destructive reset action. */
    background: var(--lex-admin-danger-bg) !important;
    color: var(--lex-color-error) !important;
    border: 1px solid var(--lex-admin-danger-border) !important;
    box-shadow: none !important;
}

.lex-btn.lex-btn--reset-section:hover,
.lex-btn.lex-btn--reset-section:focus {
    background: var(--lex-admin-danger-bg-hover) !important;
    color: var(--lex-admin-danger-color-hover) !important;
    border-color: var(--lex-color-error) !important;
    box-shadow: var(--lex-admin-danger-shadow) !important;
    transform: translateY(-1px);
}

.lex-btn.lex-btn--reset-section:active {
    background: var(--lex-admin-danger-bg-active) !important;
    transform: translateY(0);
}

/* ============================================
   ACTION BUTTONS WITH ICONS
   ============================================ */
button .dashicons {
    margin-right: var(--lex-space-1);
    vertical-align: middle;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media screen and (max-width: 1280px) {
    .lex-sidebar {
        width: 280px;
    }
}

@media screen and (max-width: 960px) {
    .lex-layout-container {
        flex-direction: column;
    }
    
    .lex-sidebar {
        width: 100%;
    }
    
    .lex-sidebar-widget {
        max-width: 500px;
    }
}

@media screen and (max-width: 782px) {
    /* Nav Header Mobile */
    .lex-nav-header {
        top: 46px; /* WordPress mobile admin bar height */
        margin-bottom: 24px; /* Reduced spacing on mobile */
    }
    
    .lex-nav-header__container {
        padding: 0 16px;
        height: 56px;
    }
    
    .lex-nav-header__brand {
        gap: 8px;
    }
    
    .lex-nav-header__logo {
        width: 36px;
        height: 36px;
    }
    
    .lex-nav-header__logo .dashicons {
        font-size: var(--lex-font-size-2xl);
        width: 20px;
        height: 20px;
    }
    
    .lex-nav-header__name {
        font-size: var(--lex-font-size-2xl);
    }
    
    .lex-nav-header__version {
        font-size: var(--lex-font-size-xs);
        padding: 3px 8px;
    }
    
    .lex-nav-header__nav {
        gap: 2px;
    }
    
    .lex-nav-header__item {
        padding: 8px 12px;
        font-size: var(--lex-font-size-md);
    }
    
    /* Settings Tabs Mobile */
    .lex-settings-tabs {
        flex-wrap: wrap;
    }
    
    .lex-settings-tabs__tab {
        padding: var(--lex-space-2) var(--lex-space-4);
        font-size: var(--lex-font-size-md);
    }
    
    .lex-settings-form .form-table th {
        width: auto;
        padding-right: 0;
    }
    
    .lex-sidebar-widget {
        max-width: 100%;
    }
}

@media screen and (max-width: 1200px) {
    /* On smaller desktops, hide Display Options */
    .lex-nav-header__nav > .lex-nav-header__item:nth-child(3) {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    /* On tablets, hide Button Customization too */
    .lex-nav-header__nav > .lex-nav-header__item:nth-child(2) {
        display: none;
    }
}

@media screen and (max-width: 782px) {
    /* On mobile, hide Advanced too - keep only General + More */
    .lex-nav-header__nav > .lex-nav-header__item:nth-child(4) {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .lex-nav-header__item {
        padding: 8px 10px;
        font-size: var(--lex-font-size-xs);
    }
    
    .lex-nav-header__name {
        display: none; /* Hide name on very small screens */
    }
    
    .lex-nav-header__version {
        display: none; /* Hide version on very small screens */
    }
}

/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */

@media (prefers-color-scheme: dark) {
    .lex-nav-header {
        background: var(--wp-color-gray-90);
        border-bottom-color: var(--lex-color-text-muted);
    }
    
    .lex-nav-header__name {
        color: var(--wp-color-gray-0);
    }
    
    .lex-nav-header__item {
        color: var(--wp-color-gray-30);
    }
    
    .lex-nav-header__item:hover,
    .lex-nav-header__item--active {
        color: var(--wp-color-gray-0);
        background-color: var(--lex-color-text-muted);
    }
    
    .lex-nav-header__dropdown-menu {
        background: var(--wp-color-gray-90);
        border-color: var(--lex-color-text-muted);
    }
    
    .lex-nav-header__dropdown-item {
        color: var(--wp-color-gray-30);
    }
    
    .lex-nav-header__dropdown-item:hover {
        color: var(--wp-color-gray-0);
        background-color: var(--lex-color-text-muted);
    }
}

/* ============================================
   LAYOUT CONTAINER (Main + Sidebar)
   ============================================ */
.lex-layout-container {
    display: flex;
    gap: var(--lex-space-6);
    align-items: flex-start;
    margin: 0 auto;
    padding: 0 var(--lex-space-6);
    max-width: var(--lex-layout-max-width);
}

.lex-main-content {
    flex: 1;
    min-width: 0; /* Prevents flex item from overflowing */
}

.lex-sidebar {
    width: 320px;
    flex-shrink: 0;
}

/* ============================================
   SIDEBAR WIDGETS (Premium Card Style)
   ============================================ */
.lex-sidebar-widget {
    background: var(--lex-color-surface);
    border: 1px solid var(--lex-color-border);
    border-radius: var(--lex-radius-md);
    margin-bottom: var(--lex-space-6);
    overflow: hidden;
    box-shadow: var(--lex-shadow-md);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.lex-sidebar-widget:hover {
    box-shadow: var(--lex-shadow-lg);
    transform: translateY(-2px);
}

.lex-sidebar-widget__header {
    padding: var(--lex-space-4) var(--lex-space-6);
    background: color-mix(in srgb, var(--lex-color-primary) 4%, var(--wp-color-white));
    border-bottom: 1px solid var(--lex-color-border);
    display: flex;
    align-items: center;
    gap: var(--lex-space-2);
}

.lex-sidebar-widget__header h3 {
    margin: 0;
    font-size: var(--lex-font-size-lg);
    font-weight: var(--lex-font-weight-medium);
    color: var(--lex-color-text);
}

.lex-sidebar-widget__header .dashicons {
    color: var(--lex-color-primary);
    font-size: var(--lex-font-size-2xl);
    width: 20px;
    height: 20px;
}

.lex-sidebar-widget__content {
    padding: var(--lex-space-8);
}

.lex-sidebar-widget__content p {
    color: var(--lex-color-text-muted);
    line-height: 1.6;
    margin: 0 0 var(--lex-space-4) 0;
}

.lex-sidebar-widget__content p:last-child {
    margin-bottom: 0;
}

.lex-sidebar-widget__footer-text {
    font-size: var(--lex-font-size-xs);
    color: var(--lex-color-text-subtle);
    /* Override form-table spacing injected by WordPress settings markup. */
    margin-top: var(--lex-space-4) !important;
    text-align: center;
}

/* Pro Upgrade Widget (Soft Purple Gradient - Current) */
.lex-sidebar-widget--pro {
    box-shadow: 0 4px 20px color-mix(in srgb, var(--lex-color-primary) 15%, transparent);
}

.lex-sidebar-widget--pro:hover {
    box-shadow: 0 8px 32px color-mix(in srgb, var(--lex-color-primary) 25%, transparent);
}

.lex-sidebar-widget--pro .lex-sidebar-widget__header {
    background: linear-gradient(135deg, var(--lex-color-primary) 0%, var(--lex-color-brand-pro-end) 100%);
    color: var(--lex-color-primary-contrast);
    border-bottom: none;
    padding: var(--lex-space-4) var(--lex-space-6);
}

.lex-sidebar-widget--pro .lex-sidebar-widget__header h3 {
    color: var(--lex-color-primary-contrast);
    font-weight: var(--lex-font-weight-semibold);
}

.lex-sidebar-widget--pro .lex-sidebar-widget__header .dashicons {
    color: var(--wp-color-yellow-20);
}

/* Pro Upgrade Widget - Solid Purple Style (Alternative) */
.lex-sidebar-widget--pro-solid {
    box-shadow: 0 4px 20px color-mix(in srgb, var(--lex-color-primary) 20%, transparent);
}

.lex-sidebar-widget--pro-solid:hover {
    box-shadow: 0 8px 32px color-mix(in srgb, var(--lex-color-primary) 30%, transparent);
}

.lex-sidebar-widget--pro-solid .lex-sidebar-widget__header {
    background: var(--lex-color-primary);
    color: var(--lex-color-primary-contrast);
    border-bottom: none;
    padding: var(--lex-space-4) var(--lex-space-6);
}

.lex-sidebar-widget--pro-solid .lex-sidebar-widget__header h3 {
    color: var(--lex-color-primary-contrast);
    font-weight: var(--lex-font-weight-semibold);
}

.lex-sidebar-widget--pro-solid .lex-sidebar-widget__header .dashicons {
    color: var(--lex-color-primary-contrast);
}

.lex-sidebar-widget--pro-solid .lex-feature-list li .dashicons {
    color: var(--wp-color-green-20);
}

/* Pro Upgrade Widget - Border Style (Wrapped with Thick Border) */
.lex-sidebar-widget--pro-outline {
    border: 3px solid var(--lex-color-primary);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--lex-color-primary) 15%, transparent);
}

.lex-sidebar-widget--pro-outline:hover {
    box-shadow: 0 8px 32px color-mix(in srgb, var(--lex-color-primary) 25%, transparent);
    border-color: var(--lex-color-primary-hover);
}

.lex-sidebar-widget--pro-outline .lex-sidebar-widget__header {
    background: var(--lex-color-primary);
    color: var(--lex-color-primary-contrast);
    border-bottom: none;
    padding: var(--lex-space-4) var(--lex-space-6);
}

.lex-sidebar-widget--pro-outline .lex-sidebar-widget__header h3 {
    color: var(--lex-color-primary-contrast);
    font-weight: var(--lex-font-weight-semibold);
}

.lex-sidebar-widget--pro-outline .lex-sidebar-widget__header .dashicons {
    color: var(--lex-color-primary-contrast);
}

.lex-sidebar-widget--pro-outline .lex-feature-list li .dashicons {
    color: var(--wp-color-green-20);
}

/* Pro Upgrade Widget - Subtle/Normal Style (Like Standard Widgets) */
.lex-sidebar-widget--pro-subtle {
    box-shadow: var(--lex-shadow-md);
}

.lex-sidebar-widget--pro-subtle:hover {
    box-shadow: var(--lex-shadow-lg);
    transform: translateY(-2px);
}

.lex-sidebar-widget--pro-subtle .lex-sidebar-widget__header {
    background: var(--wp-color-gray-0);
    color: var(--lex-color-text);
    border-bottom: 1px solid var(--lex-color-border);
    padding: var(--lex-space-4) var(--lex-space-6);
}

.lex-sidebar-widget--pro-subtle .lex-sidebar-widget__header h3 {
    color: var(--lex-color-text);
    font-weight: var(--lex-font-weight-medium);
}

.lex-sidebar-widget--pro-subtle .lex-sidebar-widget__header .dashicons {
    color: var(--lex-color-primary);
}

.lex-sidebar-widget--pro-subtle .lex-feature-list li .dashicons {
    color: var(--lex-color-success);
}

.lex-feature-list {
    list-style: none;
    padding: 0;
    margin: var(--lex-space-4) 0 var(--lex-space-6) 0;
}

.lex-feature-list li {
    display: flex;
    align-items: center;
    gap: var(--lex-space-2);
    padding: var(--lex-space-1) 0;
    color: var(--lex-color-text-muted);
    font-size: var(--lex-font-size-md);
}

.lex-feature-list li .dashicons {
    color: var(--lex-color-success);
    font-size: var(--lex-font-size-2xl);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.lex-btn--cta {
    width: 100%;
    text-align: center;
    justify-content: center;
    font-weight: var(--lex-font-weight-medium);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--lex-color-primary) 30%, transparent);
    transition: all 0.3s ease;
}

.lex-btn--cta:hover {
    box-shadow: 0 6px 20px color-mix(in srgb, var(--lex-color-primary) 40%, transparent);
    transform: translateY(-1px);
}

/* Newsletter Form */
.lex-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--lex-space-2);
}

.lex-newsletter-form input[type="email"] {
    width: 100%;
    padding: var(--lex-space-2);
}

.lex-newsletter-form button {
    width: 100%;
    justify-content: center;
}

/* Product Items */
.lex-product-item {
    padding: var(--lex-space-4) 0;
    border-bottom: 1px solid var(--wp-color-gray-2);
}

.lex-product-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lex-product-item:first-child {
    padding-top: 0;
}

.lex-product-item h4 {
    margin: 0 0 var(--lex-space-1) 0;
    font-size: var(--lex-font-size-base);
    color: var(--lex-color-text);
    font-weight: var(--lex-font-weight-medium);
}

.lex-product-item p {
    font-size: var(--lex-font-size-md);
    font-weight: var(--lex-font-weight-normal);
    margin: 0 0 var(--lex-space-2) 0;
    line-height: 1.5;
}

.lex-product-item .button {
    font-size: var(--lex-font-size-md);
}

/* Free Trial Widget - Base Styles */
.lex-sidebar-widget--trial {
    margin-bottom: var(--lex-space-6);
}

.lex-sidebar-widget--trial .lex-sidebar-widget__header {
    color: var(--lex-color-primary-contrast);
    border-bottom: none;
    padding: var(--lex-space-4) var(--lex-space-6);
}

.lex-sidebar-widget--trial .lex-sidebar-widget__header h3 {
    color: var(--lex-color-primary-contrast);
    font-weight: var(--lex-font-weight-semibold);
}

.lex-sidebar-widget--trial .lex-sidebar-widget__header .dashicons {
    color: var(--wp-color-yellow-20);
}

/* Free Trial Widget - Emerald/Teal Gradient */
.lex-sidebar-widget--trial-v1 {
    box-shadow: 0 4px 20px color-mix(in srgb, var(--lex-color-success) 15%, transparent);
}

.lex-sidebar-widget--trial-v1:hover {
    box-shadow: 0 8px 32px color-mix(in srgb, var(--lex-color-success) 25%, transparent);
}

.lex-sidebar-widget--trial-v1 .lex-sidebar-widget__header {
    background: linear-gradient(135deg, var(--wp-color-green-30) 0%, var(--wp-color-green-50) 100%);
}

/* Review Widget */
.lex-sidebar-widget--review .lex-sidebar-widget__content {
    text-align: center;
}

/* Support Widget Styles */
.lex-sidebar-widget--support {
    margin-bottom: var(--lex-space-6);
}

.lex-sidebar-widget--support .lex-sidebar-widget__header {
    background: color-mix(in srgb, var(--lex-color-primary) 4%, var(--wp-color-white));
    border-bottom: 1px solid var(--lex-color-border);
}

.lex-sidebar-widget--support .lex-sidebar-widget__header .dashicons {
    color: var(--lex-color-primary);
}

.lex-sidebar-widget__badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--lex-color-primary-light);
    color: var(--lex-color-primary);
    border-radius: var(--lex-radius-lg);
    font-size: var(--lex-font-size-md);
    font-weight: var(--lex-font-weight-semibold);
    margin-bottom: var(--lex-space-1);
}

.lex-sidebar-widget__contact {
    margin-top: var(--lex-space-6);
    padding-top: var(--lex-space-6);
    border-top: 1px solid var(--lex-color-border);
}

.lex-sidebar-widget__contact-item {
    display: flex;
    align-items: center;
    gap: var(--lex-space-2);
    margin-bottom: var(--lex-space-4);
    color: var(--lex-color-text-muted);
    font-size: var(--lex-font-size-base);
}

.lex-sidebar-widget__contact-item--highlight {
    margin-top: var(--lex-space-4);
    padding-top: var(--lex-space-4);
    border-top: 1px solid var(--lex-color-border);
    margin-bottom: 0;
}

.lex-sidebar-widget__contact-icon {
    font-size: var(--lex-font-size-2xl);
    line-height: 1;
}


.lex-sidebar-widget__contact-email {
    color: var(--lex-color-error);
    font-weight: var(--lex-font-weight-medium);
}

/* Hire Widget Styles */
.lex-sidebar-widget--hire {
    margin-bottom: var(--lex-space-6);
}

.lex-sidebar-widget--hire .lex-sidebar-widget__header {
    background: color-mix(in srgb, var(--lex-color-primary) 4%, var(--wp-color-white));
    border-bottom: 1px solid var(--lex-color-border);
    padding-bottom: var(--lex-space-4);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lex-space-2);
}

.lex-sidebar-widget--hire .lex-sidebar-widget__badge {
    background: var(--wp-color-red-0);
    color: var(--lex-color-error);
}

.lex-sidebar-widget__contact-heading {
    margin: 0 0 var(--lex-space-4) 0;
    font-size: var(--lex-font-size-base);
    font-weight: var(--lex-font-weight-semibold);
    color: var(--lex-color-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lex-sidebar-widget--hire .lex-sidebar-widget__contact-item .dashicons {
    color: var(--lex-color-text-subtle);
    font-size: var(--lex-font-size-2xl);
    width: 18px;
    height: 18px;
    margin-right: var(--lex-space-1);
    flex-shrink: 0;
}

.lex-sidebar-widget--hire .lex-sidebar-widget__contact-item--highlight .dashicons {
    color: var(--lex-color-error);
}

.lex-stars {
    margin-bottom: var(--lex-space-4);
}

.lex-stars .dashicons {
    color: var(--wp-color-yellow-20);
    font-size: var(--lex-font-size-3xl);
    width: 24px;
    height: 24px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.lex-text-success {
    color: var(--lex-color-success);
}

.lex-text-error {
    color: var(--lex-color-error);
}

.lex-text-warning {
    color: var(--lex-color-warning);
}

.lex-mb-sm {
    margin-bottom: var(--lex-space-2);
}

.lex-mb-md {
    margin-bottom: var(--lex-space-4);
}

.lex-mb-lg {
    margin-bottom: var(--lex-space-6);
}

/* ============================================
   CUSTOM BUTTONS (Replacing WordPress Native)
   ============================================ */
.lex-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--lex-space-2);
    padding: 10px 20px;
    font-size: var(--lex-font-size-base);
    font-weight: var(--lex-font-weight-medium);
    line-height: 1.4;
    text-decoration: none;
    border: none;
    border-radius: var(--lex-radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Primary Button - Solid Purple */
.lex-btn--primary {
    background: var(--lex-color-primary);
    color: var(--lex-color-primary-contrast);
    box-shadow: var(--lex-primary-shadow-sm);
}

.lex-btn--primary:hover,
.lex-btn--primary:focus {
    background: var(--lex-color-primary-hover);
    color: var(--lex-color-primary-contrast);
    box-shadow: var(--lex-primary-shadow-md);
    transform: translateY(-1px);
}

.lex-btn--primary:active {
    transform: translateY(0);
    box-shadow: var(--lex-primary-shadow-active);
}

.lex-btn--primary .dashicons {
    font-size: var(--lex-font-size-2xl);
    width: 18px;
    height: 18px;
}

/* Secondary Button - White with Border */
.lex-btn--secondary {
    background: var(--lex-color-surface);
    color: var(--lex-color-text-muted);
    border: 1px solid var(--lex-color-border);
    box-shadow: var(--lex-shadow-sm);
}

.lex-btn--secondary:hover,
.lex-btn--secondary:focus {
    background: var(--wp-color-gray-0);
    color: var(--lex-color-text);
    border-color: var(--lex-color-border-hover);
    box-shadow: var(--lex-shadow-md);
    transform: translateY(-1px);
}

.lex-btn--secondary:active {
    transform: translateY(0);
    box-shadow: var(--lex-shadow-sm);
}

.lex-btn--secondary .dashicons {
    font-size: var(--lex-font-size-2xl);
    width: 18px;
    height: 18px;
}

/* Hero Button - Larger Size */
.lex-btn--hero {
    padding: 14px 28px;
    font-size: var(--lex-font-size-lg);
    font-weight: var(--lex-font-weight-semibold);
}

.lex-btn--hero .dashicons {
    font-size: var(--lex-font-size-2xl);
    width: 20px;
    height: 20px;
}

/* Small Button - Compact Size */
.lex-btn--small {
    padding: 6px 12px;
    font-size: var(--lex-font-size-md);
}

.lex-btn--small .dashicons {
    font-size: var(--lex-font-size-lg);
    width: 16px;
    height: 16px;
}

/* Button Icon Spacing */
.lex-btn .dashicons {
    margin: 0;
    flex-shrink: 0;
}

/* Focus States */
.lex-btn:focus {
    outline: 2px solid var(--lex-color-primary-light);
    outline-offset: 2px;
}

/* Disabled State */
.lex-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Full Width Buttons */
.lex-btn--block {
    width: 100%;
    justify-content: center;
}

.lex-settings-section__save-btn {
    padding: 6px 16px;
    font-size: var(--lex-font-size-md);
}

/* ============================================
   SECTION SAVE BUTTON STYLE VARIATIONS
   (Add modifier class to test different styles)
   ============================================ */

/* Style 1: Ghost Button (Subtle, bordered) */
.lex-settings-section__save-btn.lex-btn--ghost {
    background: var(--lex-color-surface);
    color: var(--lex-color-text-muted);
    border: 1px solid var(--lex-color-border);
    box-shadow: none;
}

.lex-settings-section__save-btn.lex-btn--ghost:hover {
    background: var(--wp-color-gray-0);
    color: var(--lex-color-text);
    border-color: var(--lex-color-border-hover);
    box-shadow: none;
}

/* Style 2: Secondary Gray (Filled, subtle) - V1-B2 Winner */
.lex-settings-section__save-btn.lex-btn--gray {
    background: var(--wp-color-gray-5);
    color: var(--lex-color-text-muted);
    border: 1px solid var(--wp-color-gray-20);
    box-shadow: none;
}

.lex-settings-section__save-btn.lex-btn--gray:hover {
    background: var(--wp-color-gray-10);
    color: var(--lex-color-text);
    border-color: var(--lex-color-text-subtle);
    box-shadow: none;
}

/* Gray Button Variations - Test Side by Side */

/* V1: Medium Gray (Current Default) */
.lex-settings-section__save-btn.lex-btn--gray-v1 {
    background: var(--wp-color-gray-5);
    color: var(--lex-color-text-muted);
    border: 1px solid var(--lex-color-border);
    box-shadow: none;
}

.lex-settings-section__save-btn.lex-btn--gray-v1:hover {
    background: var(--wp-color-gray-10);
    color: var(--lex-color-text);
    border-color: var(--wp-color-gray-20);
    box-shadow: none;
}

/* V1 Border Variations (Same light bg, different borders) */

/* V1-B1: Light Gray + Medium Border */
.lex-settings-section__save-btn.lex-btn--gray-v1-b1 {
    background: var(--wp-color-gray-5);
    color: var(--lex-color-text-muted);
    border: 1px solid var(--wp-color-gray-10);
    box-shadow: none;
}

.lex-settings-section__save-btn.lex-btn--gray-v1-b1:hover {
    background: var(--wp-color-gray-10);
    color: var(--lex-color-text);
    border-color: var(--wp-color-gray-20);
    box-shadow: none;
}

/* V1-B2: Light Gray + Stronger Border */
.lex-settings-section__save-btn.lex-btn--gray-v1-b2 {
    background: var(--wp-color-gray-5);
    color: var(--lex-color-text-muted);
    border: 1px solid var(--wp-color-gray-20);
    box-shadow: none;
}

.lex-settings-section__save-btn.lex-btn--gray-v1-b2:hover {
    background: var(--wp-color-gray-10);
    color: var(--lex-color-text);
    border-color: var(--lex-color-text-subtle);
    box-shadow: none;
}

/* V1-B3: Light Gray + Dark Border */
.lex-settings-section__save-btn.lex-btn--gray-v1-b3 {
    background: var(--wp-color-gray-5);
    color: var(--lex-color-text);
    border: 1px solid var(--wp-color-gray-30);
    box-shadow: none;
}

.lex-settings-section__save-btn.lex-btn--gray-v1-b3:hover {
    background: var(--wp-color-gray-10);
    color: var(--wp-color-black);
    border-color: var(--wp-color-gray-50);
    box-shadow: none;
}

/* V2: Darker Gray + Stronger Border */
.lex-settings-section__save-btn.lex-btn--gray-v2 {
    background: var(--wp-color-gray-10);
    color: var(--lex-color-text);
    border: 1px solid var(--wp-color-gray-20);
    box-shadow: none;
}

.lex-settings-section__save-btn.lex-btn--gray-v2:hover {
    background: var(--wp-color-gray-20);
    color: var(--wp-color-black);
    border-color: var(--lex-color-text-subtle);
    box-shadow: none;
}

/* V3: Darkest + Thicker Border + Subtle Shadow */
.lex-settings-section__save-btn.lex-btn--gray-v3 {
    background: var(--wp-color-gray-20);
    color: var(--lex-color-text);
    border: 1.5px solid var(--wp-color-gray-30);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--wp-color-black) 5%, transparent);
}

.lex-settings-section__save-btn.lex-btn--gray-v3:hover {
    background: var(--wp-color-gray-20);
    color: var(--wp-color-black);
    border-color: var(--wp-color-gray-50);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--wp-color-black) 8%, transparent);
}

/* Style 3: Minimal Text (Borderless, text-only) */
.lex-settings-section__save-btn.lex-btn--minimal {
    background: transparent;
    color: var(--lex-color-primary);
    border: none;
    box-shadow: none;
}

.lex-settings-section__save-btn.lex-btn--minimal:hover {
    background: var(--lex-color-primary-light);
    color: var(--lex-color-primary-hover);
    box-shadow: none;
}

/* Style 4: Soft Purple (Light purple background by default) */
.lex-settings-section__save-btn.lex-btn--soft {
    background: color-mix(in srgb, var(--lex-color-primary) 15%, transparent);
    color: var(--lex-color-primary-hover);
    border: none;
    box-shadow: none;
}

.lex-settings-section__save-btn.lex-btn--soft:hover {
    background: color-mix(in srgb, var(--lex-color-primary) 20%, transparent);
    color: var(--lex-color-primary-hover);
    box-shadow: none;
}

.lex-section--textareas .lex-pro-section{
    /* Negative margin to cover white background comes with td */
    margin-bottom: -15px; 
}

/* ============================================
   CSS VALUE INPUTS (Phase 1: Simple CSS Value)
   ============================================ */

/* CSS Input Wrapper - Container for CSS value inputs */
.lex-css-input-wrapper {
    max-width: 420px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.lex-css-input-wrapper .lex-css-input-wrapper__input {
    flex: 1 1 auto;
    min-width: 220px;
}

.lex-css-input-wrapper[data-mode="text"] .lex-css-input-wrapper__visual-wrapper {
    display: none;
}

.lex-css-input-wrapper .lex-css-input-wrapper__visual-wrapper {
    flex: 1 1 100%;
    margin-top: 8px;
}

.lex-css-input-wrapper__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--lex-color-text-subtle);
    border-radius: var(--lex-radius-sm);
    background: var(--lex-color-surface);
    color: var(--lex-color-text-muted);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.lex-css-input-wrapper__toggle:hover {
    border-color: var(--lex-color-primary-hover);
    color: var(--lex-color-primary);
}

.lex-css-input-wrapper__toggle:focus {
    outline: 2px solid var(--lex-color-primary-light);
    outline-offset: 2px;
    border-color: var(--lex-color-primary);
}

.lex-css-input-wrapper__toggle.is-active {
    background: var(--lex-color-primary-light);
    border-color: var(--lex-color-primary);
    color: var(--lex-color-primary);
}

.lex-css-input-wrapper__toggle .dashicons {
    margin: 0;
    font-size: var(--lex-font-size-lg);
    width: 16px;
    height: 16px;
}

.lex-field-type--border .lex-css-input-wrapper[data-mode="visual"] .lex-css-input-wrapper__input {
    display: none;
}

.lex-field-type--border .lex-css-input-wrapper[data-mode="visual"] .lex-css-input-wrapper__mode-btn {
    order: 3;
}

.lex-css-input-wrapper[data-mode="text"] .lex-css-input-wrapper__border-wrapper {
    display: none;
}

.lex-css-input-wrapper[data-mode="visual"] .lex-css-input-wrapper__border-wrapper {
    display: block;
}

.lex-css-input-wrapper__visual {
    position: relative;
    height: 200px;
    overflow: visible;
}

/* Radio Field Type */
.form-table .lex-field-type--radio.lex-field--inline td fieldset label + label {
    /* Override WordPress form-table label spacing for inline radio groups. */
    margin-left: 10px !important;
}

/* make lex-css-input-wrapper width same as text input - the button width */
.lex-field-type--border .lex-css-input-wrapper[data-mode="visual"] .lex-css-input-wrapper__border-wrapper {
    width: calc(386px - 34px);
}

.lex-css-input-wrapper__visual-wrapper {
    border-radius: var(--lex-radius-md);
    border: 2px solid color-mix(in srgb, var(--lex-color-apple-blue) 50%, transparent);
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    max-width: 300px;
}

.lex-css-input-wrapper__visual::before {
    content: "";
    position: absolute;
    inset: var(--inner-offset);
    border-radius: calc(14px - 8px);
    border: 2px dashed color-mix(in srgb, var(--lex-color-apple-blue) 60%, transparent);
    pointer-events: none;
}

.form-table input.lex-css-input-wrapper__visual-input {
    position: absolute;
    width: 72px;
    height: 36px;
    background: var(--lex-color-surface);
    border: 1px solid color-mix(in srgb, var(--lex-color-apple-blue) 40%, transparent);
    border-radius: var(--lex-radius-md);
    text-align: center;
    color: var(--lex-color-text);
    box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--lex-color-apple-blue) 25%, transparent);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    z-index: 2;
}

.lex-css-input-wrapper__visual-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--lex-color-apple-blue) 70%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lex-color-apple-blue) 20%, transparent);
}

.lex-css-input-wrapper__visual-input.top {
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.lex-css-input-wrapper__visual-input.right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.lex-css-input-wrapper__visual-input.bottom {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.lex-css-input-wrapper__visual-input.left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.lex-css-input-wrapper__connector {
    position: absolute;
    border: none;
    border-top: 2px dashed color-mix(in srgb, var(--lex-color-apple-blue) 50%, transparent);
    pointer-events: none;
    z-index: 1;
}

.lex-css-input-wrapper__connector.top {
    top: 48px;
    left: 50%;
    width: 1px;
    height: calc(var(--inner-offset) - 36px);
    border-top: none;
    border-left: 2px dashed color-mix(in srgb, var(--lex-color-apple-blue) 50%, transparent);
    transform: translateX(-50%);
}

.lex-css-input-wrapper__connector.right {
    right: 48px;
    top: 50%;
    width: calc(var(--inner-offset) - 36px);
    height: 1px;
    transform: translateY(-50%);
}

.lex-css-input-wrapper__connector.bottom {
    bottom: 48px;
    left: 50%;
    width: 1px;
    height: calc(var(--inner-offset) - 36px);
    border-top: none;
    border-left: 2px dashed color-mix(in srgb, var(--lex-color-apple-blue) 50%, transparent);
    transform: translateX(-50%);
}

.lex-css-input-wrapper__connector.left {
    left: 48px;
    top: 50%;
    width: calc(var(--inner-offset) - 36px);
    height: 1px;
    transform: translateY(-50%);
}

.lex-css-input-wrapper__visual-content {
    position: absolute;
    inset: var(--inner-offset);
    display: grid;
    place-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--lex-color-apple-blue) 75%, transparent);
    background: color-mix(in srgb, var(--lex-color-apple-blue) 8%, transparent);
    border-radius: calc(14px - 8px);
}

.lex-css-input-wrapper__border-wrapper {
    border: 1px solid color-mix(in srgb, var(--lex-color-apple-blue) 35%, transparent);
    border-radius: var(--lex-radius-sm);
    padding: 12px;
    background: var(--wp-color-blue-0);
}

.lex-css-input-wrapper__border-wrapper.lex-css-input-wrapper__border-wrapper--unsupported-color {
    border-color: color-mix(in srgb, var(--wp-color-yellow-20) 60%, transparent);
    background: color-mix(in srgb, var(--wp-color-yellow-20) 12%, transparent);
}

.lex-css-input-wrapper__border-wrapper.lex-css-input-wrapper__border-wrapper--unsupported-color .lex-css-input-wrapper__border-input.color {
    opacity: 0.6;
}

.lex-css-input-wrapper__border-visual {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.lex-css-input-wrapper__border-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lex-css-input-wrapper__border-field-label {
    display: block;
    font-size: var(--lex-font-size-md);
    font-weight: var(--lex-font-weight-medium);
    color: var(--lex-color-text);
}

.lex-css-input-wrapper__border-input.width {
    max-width: 90px;
}

.lex-css-input-wrapper__border-select.style {
    min-width: 120px;
}

.lex-css-input-wrapper__border-input.color {
    width: 48px;
    height: 34px;
    padding: 0;
    cursor: pointer;
}

.lex-css-input-wrapper__border-input.color::-webkit-color-swatch-wrapper {
    padding: 0;
}

.lex-css-input-wrapper__border-input.color::-webkit-color-swatch {
    border: none;
    border-radius: var(--lex-radius-sm);
}

/* ============================================
   BOTTOM CENTER NOTIFICATION (Custom Markup)
   ============================================ */

.lex-notice-bottom {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 100000;
    min-width: 300px;
    max-width: 600px;
    background-color: var(--lex-color-text);
    color: var(--lex-color-primary-contrast);
    border-radius: var(--lex-radius-md);
    box-shadow: var(--lex-shadow-lg);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    overflow: hidden;
}

.lex-notice-bottom--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.lex-notice-bottom__content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    flex: 1;
}

.lex-notice-bottom__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: var(--lex-color-surface);
    border-radius: 50%;
    font-size: var(--lex-font-size-xs);
    font-weight: var(--lex-font-weight-semibold);
    color: var(--lex-color-text);
    flex-shrink: 0;
}

.lex-notice-bottom__message {
    font-size: var(--lex-font-size-base);
    line-height: 1.5;
    color: var(--lex-color-primary-contrast);
    margin: 0;
}

.lex-notice-bottom__dismiss {
    position: relative;
    padding: 14px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: color-mix(in srgb, var(--wp-color-white) 70%, transparent);
    font-size: var(--lex-font-size-3xl);
    line-height: 1;
    transition: color 0.2s ease, background-color 0.2s ease;
    flex-shrink: 0;
    width: 44px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lex-notice-bottom__dismiss:hover {
    color: var(--lex-color-primary-contrast);
    background-color: color-mix(in srgb, var(--wp-color-white) 10%, transparent);
}

/* Error variant - red background */
.lex-notice-bottom--error {
    background-color: var(--lex-color-error);
}

.lex-notice-bottom--error .lex-notice-bottom__icon {
    background-color: var(--lex-color-surface);
    color: var(--lex-color-error);
}

/* Success variant - black background (default) */
.lex-notice-bottom--success {
    background-color: var(--lex-color-text);
}

.lex-notice-bottom--success .lex-notice-bottom__icon {
    background-color: var(--lex-color-surface);
    color: var(--lex-color-text);
}

/* Info variant - blue background */
.lex-notice-bottom--info {
    background-color: var(--lex-color-info);
}

.lex-notice-bottom--info .lex-notice-bottom__icon {
    background-color: var(--lex-color-surface);
    color: var(--lex-color-info);
}

/* Alternative gray background variant (uncomment to use gray instead of black) */
/*
.lex-notice-bottom {
    background-color: var(--lex-color-text-muted);
}
*/

/* ============================================
   MEDIA FIELD (WordPress Media Library - Attachment ID)
   ============================================ */

/* Media wrapper - vertical layout for preview input above and buttons below */
.lex-media-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Media preview input (readonly URL display) */
.lex-media__preview {
    width: 100%;
    margin-right: 0;
}

/* Image preview thumbnail */
.lex-media__preview-image {
    max-width: 75px;
    max-height: 75px;
    width: auto;
    height: auto;
    border: 1px solid var(--wp-color-gray-5);
    border-radius: var(--lex-radius-sm);
    padding: 4px;
    background: var(--lex-color-surface);
    display: block;
}

/* Media buttons container - horizontal layout for buttons */
.lex-media-wrapper .lex-media__button,
.lex-media-wrapper .lex-media__remove {
    align-self: flex-start;
    margin-top: 0;
}

/* Buttons side by side */
.lex-media-wrapper .lex-media__button {
    margin-right: 10px;
}

/* Ensure proper spacing for description below */
.lex-field-type--media .description {
    margin-top: 8px;
    margin-bottom: 0;
}

/* Responsive: stack on smaller screens */
@media (max-width: 782px) {
    .lex-media-wrapper {
        flex-direction: column;
        gap: 8px;
    }
    
    .lex-media__preview {
        max-width: 100%;
        width: 100%;
    }
    
    .lex-media__button,
    .lex-media__remove {
        width: 100%;
        margin-right: 0;
    }
}

/* ============================================
   INHERITED FIELDS (Grayed Out When Empty)
   ============================================ */

/* Gray out input/select when field is inherited and empty */
.lex-field--inherited,
.lex-field-row--inherited input,
.lex-field-row--inherited select {
    background-color: var(--wp-color-gray-2);
    transition: background-color 0.2s ease;
}

/* Remove gray when input has non-empty value */
.lex-field-row--inherited input[value]:not([value=""]),
.lex-field-row--inherited input:not([value=""]) {
    opacity: 1;
    background-color: var(--lex-color-surface);
}

/* Remove gray when select has non-empty value (value attribute) */
.lex-field-row--inherited select[value]:not([value=""]) {
    opacity: 1;
    background-color: var(--lex-color-surface);
}

/* ============================================
   SORTABLE CHECKBOXES
   ============================================ */

/* Master checkbox (Select All) */
.lex-checkbox-master-wrapper {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--wp-color-gray-5);
}

.lex-checkbox-master-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: var(--lex-color-text);
    user-select: none;
}

.lex-checkbox-master {
    margin-right: 8px;
    cursor: pointer;
}

.lex-checkbox-master-text {
    font-size: var(--lex-font-size-base);
}

.lex-sortable-checkbox-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Styling for scrollable containers with max-height */
.lex-sortable-checkbox-container[style*="max-height"] {
    border: 1px solid var(--wp-color-gray-5);
    border-radius: 0;
    padding: 10px;
    background-color: var(--lex-color-surface);
    scrollbar-width: thin;
    scrollbar-color: var(--wp-color-gray-10) var(--wp-color-gray-2);
}

.lex-sortable-checkbox-container[style*="max-height"]::-webkit-scrollbar {
    width: 8px;
}

.lex-sortable-checkbox-container[style*="max-height"]::-webkit-scrollbar-track {
    background: var(--wp-color-gray-2);
    border-radius: var(--lex-radius-sm);
}

.lex-sortable-checkbox-container[style*="max-height"]::-webkit-scrollbar-thumb {
    background: var(--wp-color-gray-10);
    border-radius: var(--lex-radius-sm);
}

.lex-sortable-checkbox-container[style*="max-height"]::-webkit-scrollbar-thumb:hover {
    background: var(--wp-color-gray-20);
}

.lex-sortable-checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--wp-color-gray-5);
    border-radius: var(--lex-radius-sm);
    background-color: var(--lex-color-surface);
    cursor: move;
    user-select: none;
    transition: background-color 0.2s, opacity 0.2s;
}

.lex-sortable-checkbox-item:hover {
    background-color: var(--wp-color-gray-0);
}

.lex-sortable-checkbox-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.lex-sortable-checkbox-item.drag-over {
    border-color: var(--lex-color-apple-blue);
    background-color: var(--wp-color-blue-0);
}

.lex-drag-handle {
    cursor: grab;
    color: var(--wp-color-gray-30);
    font-size: var(--lex-font-size-lg);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    user-select: none;
}

.lex-drag-handle:active {
    cursor: grabbing;
}

.lex-sortable-checkbox-item label {
    cursor: pointer;
    flex-grow: 1;
    margin: 0;
}

.lex-sortable-checkbox-item input[type="checkbox"] {
    margin-right: 8px;
}

/* ============================================
   COLLAPSIBLE SECTIONS
   ============================================ */

.lex-settings-section--collapsible > .lex-settings-section__title {
    cursor: pointer;
    user-select: none;
}

.lex-settings-section__chevron {
    margin-left: auto;
    margin-right: 4px;
    font-size: var(--lex-font-size-lg);
    width: 20px;
    height: 20px;
    color: var(--lex-color-text-muted);
    transition: transform 0.2s ease;
}

.lex-settings-section--collapsed > .lex-settings-section__title .lex-settings-section__chevron {
    transform: rotate(-90deg);
}

.lex-settings-section--collapsed > .lex-settings-section__title {
    border-bottom: none;
}

.lex-settings-section--collapsed > .form-table.lex-form-table,
.lex-settings-section--collapsed > .submit {
    display: none;
}

/* ── Vertical tabs (Apple Settings style) ─────────────────────────── */
.lex-vtabs {
    display: flex;
    gap: var(--lex-space-4, 16px);
    align-items: flex-start;
}

.lex-vtabs__nav {
    width: 180px;
    flex-shrink: 0;
    background: var(--wp-color-gray-0);
    border-radius: var(--lex-radius-md);
    /* padding: 6px; */
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: var(--lex-vtab-sticky-top, calc(var(--lex-sticky-top) + var(--lex-space-4)));
}

.lex-vtabs__nav button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: var(--lex-font-size-md);
    font-weight: 400;
    border-radius: var(--lex-radius-sm);
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--lex-color-text);
    text-align: left;
    transition: background .12s, color .12s;
}

.lex-vtabs__nav button svg {
    flex-shrink: 0;
    opacity: .6;
}

.lex-vtabs__nav button:hover {
    background: var(--wp-color-gray-2);
}

.lex-vtabs__group-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--lex-color-text-muted, #94a3b8);
    padding: 12px 12px 4px;
}

.lex-vtabs__group-label:first-child {
    padding-top: 8px;
}

.lex-vtabs__divider {
    height: 1px;
    background: var(--lex-color-border, #e2e8f0);
    margin: 10px 8px 0;
}

.lex-vtabs__btn--active {
    background: var(--lex-color-apple-blue) !important;
    color: #fff !important;
    font-weight: 500 !important;
}

.lex-vtabs__btn--active svg {
    opacity: 1 !important;
}

.lex-vtabs__content {
    flex: 1;
    min-width: 0;
}

.lex-settings-section--vtab-member { display: none; }
.lex-settings-section--vtab-member.is-active-vtab { display: block; }

/* Horizontal layout */
.lex-vtabs[data-layout="horizontal"] {
    flex-direction: column;
}

.lex-vtabs[data-layout="horizontal"] .lex-vtabs__nav {
    flex-direction: row;
    width: auto;
    flex-shrink: unset;
    position: static;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: var(--lex-radius-md);
    padding: 5px;
    gap: 2px;
    align-self: flex-start;
}

.lex-vtabs[data-layout="horizontal"] .lex-vtabs__nav button {
    flex: 0 0 auto;
    width: auto;
    padding: 7px 14px;
    border-radius: var(--lex-radius-sm);
}

.lex-vtabs[data-layout="horizontal"] .lex-vtabs__nav button:hover {
    background: var(--wp-color-gray-2);
}

.lex-vtabs[data-layout="horizontal"] .lex-vtabs__btn--active {
    background: var(--lex-color-apple-blue) !important;
    color: #fff !important;
}

.lex-vtabs[data-layout="horizontal"] .lex-vtabs__btn--active svg {
    opacity: 1;
}

.lex-vtabs[data-layout="horizontal"] .lex-vtabs__content {
    width: 100%;
}

@media (max-width: 782px) {
    .lex-vtabs { flex-direction: column; }
    .lex-vtabs__nav {
        width: 100%;
        position: static;
        flex-direction: row;
        overflow-x: auto;
    }
}

/* ── Tab content loader ─────────────────────────────────────────── */

/* Hide real content while loader is present */
.lex-settings-tabs__content--active.lex-tab--loading {
    display: none;
}

.lex-loader {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Shimmer variant — default */
.lex-loader--shimmer .lex-loader__shimmer-panel {
    width: 100%;
    height: 240px;
    border-radius: var(--lex-radius-md, 8px);
    background: linear-gradient(
        120deg,
        var(--wp-color-gray-0, #f6f7f7) 0%,
        var(--wp-color-gray-2, #f0f0f1) 30%,
        #ffffff 50%,
        var(--wp-color-gray-2, #f0f0f1) 70%,
        var(--wp-color-gray-0, #f6f7f7) 100%
    );
    background-size: 300% 100%;
    animation: lex-loader-shimmer 2.4s ease-in-out infinite;
}

@keyframes lex-loader-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -100% 0; }
}

/* Dots variant — opt-in */
.lex-loader--dots .lex-loader__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lex-loader__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lex-color-primary, #2271b1);
    animation: lex-loader-dot 1.2s ease-in-out infinite;
}

.lex-loader__dot:nth-child(2) { animation-delay: 0.15s; }
.lex-loader__dot:nth-child(3) { animation-delay: 0.30s; }

@keyframes lex-loader-dot {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
    40%           { opacity: 1;    transform: scale(1.1); }
}

/* Fade out when loader removed */
.lex-loader--hiding {
    animation: lex-loader-fade-out 0.2s ease forwards;
}

@keyframes lex-loader-fade-out {
    to { opacity: 0; }
}

/* Reduced motion — disable all loader animations */
@media (prefers-reduced-motion: reduce) {
    .lex-loader--shimmer .lex-loader__shimmer-panel,
    .lex-loader__dot {
        animation: none;
    }
    .lex-loader--shimmer .lex-loader__shimmer-panel {
        background: var(--wp-color-gray-0, #f6f7f7);
    }
}

.lex-settings-tabs__content--active.lex-tab--revealed {
    animation: lex-tab-fade-in 0.25s ease forwards;
}

@keyframes lex-tab-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
