/* =========================================================
   Kamaliya Meta Fields Builder - Block Editor Modal Premium UI
   ========================================================= */

/* 1. Remove Blurriness & Make Text Crisp */
.components-modal__content {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    --wp-admin-theme-color: #ea580c !important;
    --wp-components-color-accent: #ea580c !important;
    --wp-components-color-accent-darker-10: #dc2626 !important;
    --wp-components-color-accent-darker-20: #b91c1c !important;
}
  
/* 2. Content / Style Tabs Styling (Brand Red/Orange) */
.kmfb-sidebar-tabs .components-tab-panel__tabs {
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 24px !important;
    gap: 16px !important;
    display: flex !important;
}

.kmfb-sidebar-tabs .components-tab-panel__tabs button {
    border: none !important;
    background: transparent !important;
    padding: 8px 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: -1px !important;
}

.kmfb-sidebar-tabs .components-tab-panel__tabs button.is-active {
    color: #ea580c !important;
    /* Brand Color */
    border-bottom-color: #ea580c !important;
}

/* 3. Global Field Spacing (Khula-khula spacing) */
/* Override JS inline margins for more breathing room */
.components-modal__content div[style*="margin-bottom: 10px"],
.components-modal__content div[style*="margin-bottom: 15px"] {
    margin-bottom: 28px !important;
}

/* 4. Form Labels (Proper spacing below label) */
.components-modal__content .components-base-control__label,
.components-modal__content label {
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 10px !important;
    /* Input se thoda door */
    display: block !important;
}

/* 5. Form Inputs (Focus State to Brand Color) */
.components-modal__content .components-text-control__input,
.components-modal__content .components-select-control__input,
.components-modal__content .components-textarea-control__input,
.components-modal__content .kmfb-url-input-field input {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    /* Taller, cleaner inputs */
    font-size: 14px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    background-color: #ffffff !important;
    width: 100% !important;

}

.components-modal__content .components-text-control__input:focus,
.components-modal__content .components-select-control__input:focus,
.components-modal__content .components-textarea-control__input:focus,
.components-modal__content .kmfb-url-input-field input:focus {
    border-color: #ea580c !important;
    /* Brand Color */
    box-shadow: 0 0 0 1px #ea580c !important;
    outline: none !important;
}

/* 6. Repeater Outer Box (Brand Color Border) */
.components-modal__content div[style*="background: #f0f0f1"],
.components-modal__content div[style*="background: rgb(240, 240, 241)"] {
    background-color: #f8fafc !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #ea580c !important;
    /* Brand Color */
    padding: 24px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 24px !important;
}

/* 7. Nested Repeater Box */
.components-modal__content div[style*="background: #eef0f2"],
.components-modal__content div[style*="background: rgb(238, 240, 242)"] {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 3px solid #94a3b8 !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

/* 8. Collapsible Row / Group Wrapper */
.components-modal__content div[style*="border: 1px solid #ccd0d4"],
.components-modal__content div[style*="border: 1px solid rgb(204, 208, 212)"] {
    border-color: #e2e8f0 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    background-color: #ffffff !important;
    margin-bottom: 16px !important;
}

/* 9. Collapsible Row Header */
.components-modal__content div[style*="background: #f6f7f7"],
.components-modal__content div[style*="background: rgb(246, 247, 247)"] {
    background-color: #ffffff !important;
    border-bottom-color: #e2e8f0 !important;
    padding: 16px 20px !important;
    border-radius: 6px 6px 0 0 !important;
}

.components-modal__content div[style*="background: #f6f7f7"] strong,
.components-modal__content div[style*="background: rgb(246, 247, 247)"] strong {
    color: #0f172a !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
    font-size: 13px !important;
}

/* 10. Primary Button (+ Add Row, Apply Link) -> BRAND COLOR */
.components-modal__content .components-button.is-primary {
    background-color: #ea580c !important;
    /* Brand Color */
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 18px !important;
    height: auto !important;
    transition: all 0.2s ease !important;
}

.components-modal__content .components-button.is-primary:hover {
    background-color: #dc2626 !important;
    /* Darker Brand Hover */
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(234, 88, 12, 0.3) !important;
}

/* 11. Secondary Buttons (Change Image, Select File) -> BRAND COLOR */
.components-modal__content .components-button.is-secondary {
    color: #ea580c !important;
    /* Brand Color */
    border: 1px solid #ea580c !important;
    background: transparent !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.components-modal__content .components-button.is-secondary:hover {
    background: #fffaf7 !important;
    color: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* 12. Link Buttons (Clear color picker text) -> BRAND COLOR */
.components-modal__content .components-button.is-link,
.components-modal__content .components-button.is-tertiary {
    color: #ea580c !important;
    /* Brand Color */
}

.components-modal__content .components-button.is-link:hover,
.components-modal__content .components-button.is-tertiary:hover {
    color: #dc2626 !important;
}

/* 13. Delete Button (Red Text) */
.components-modal__content .components-button.is-destructive {
    color: #ef4444 !important;
    background: transparent !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
    border: none !important;
}

.components-modal__content .components-button.is-destructive:hover {
    color: #dc2626 !important;
    background: #fef2f2 !important;
}

/* 14. Small Icons (Clone, Move Up/Down) */
.components-modal__content .components-button.is-small:not(.is-primary):not(.is-destructive):not(.is-secondary) {
    color: #64748b !important;
    border: none !important;
}

.components-modal__content .components-button.is-small:not(.is-primary):not(.is-destructive):not(.is-secondary):hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
}

.components-modal__content .components-base-control {
    padding-bottom: 14px !important;
}

.components-modal__content select {
    height: 40px !important;
}

.components-modal__conten .components-flex {
    align-items: inherit !important;
}

.components-input-control__container .components-input-control__backdrop {
    border-color: transparent !important;
}



.components-modal__content *:focus,
.components-modal__content *:focus-visible {
    outline-color: #ea580c !important;
    outline: 1px;
}

/* Fix for modern WP Input wrappers focus-within states */
.components-modal__content .components-base-control:focus-within input,
.components-modal__content .components-base-control:focus-within textarea,
.components-modal__content .components-base-control:focus-within select,
.components-modal__content .components-input-control:focus-within {
    border-color: #ea580c !important;
    box-shadow: 0 0 0 0px #ea580c !important;
    outline: none !important;

}

.components-modal__content .components-circular-option-picker {
    min-width: 112px;
}

.components-modal__content .kmfb-link-control-edit-wrap div {
    border: none !important;
}

.components-modal__content .kmfb-link-control-edit-wrap div:focus {
    border: none !important;
}

.components-modal__content .components-color-palette__custom-color-wrapper {
    text-align: left !important;
    display: flex !important;
}

.components-modal__content .components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper {
    margin-top: -13px;
}


.components-modal__content .components-color-palette__custom-color-wrapper button,
.components-modal__content .components-color-palette__custom-color-wrapper div {
    max-width: 100px;
}


.components-modal__content .components-base-control:focus-within select:focus,
.components-input-control__container .components-input-control__backdrop:focus,
.components-input-control__container .components-input-control__backdrop:focus-within {
    border-color: #ea580c !important;
    box-shadow: 0 0 0 0px #ea580c !important;
    outline: none !important;
    border-radius: 6px !important;
    box-shadow: 0 0 0 0px !important;
}




/* =========================================================
   21. Remove WordPress Input Backdrop Heavy Blue Focus Glow
   ========================================================= */

/* Kisi bhi dropdown (select) ya input par click karne par jo mota blue dabba aata hai use complete block kiya */
.components-modal__content .components-input-control__backdrop,
.components-modal__content div[class*="components-input-control__backdrop"],
.components-modal__content .em5sgkm6 {
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
}

/* Jab input controller focus state mein ho, tab uske backdrop ke shadow ko remove karo */
.components-modal__content div:focus-within>.components-input-control__backdrop,
.components-modal__content div[class*="11pat5e"]:focus-within .em5sgkm6 {
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
}

/* Ekdum clean aur professional orange border focus dynamic inputs ke liye */
.components-modal__content .components-select-control__input:focus,
.components-modal__content select:focus {
    border-color: #ea580c !important;
    box-shadow: 0 0 0 1px #ea580c !important;
    outline: none !important;
}

.components-modal__content .components-base-control__field>div {
    align-items: inherit !important;
}

.components-modal__content .components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper {
    max-width: 110px;
}

.kmfb-custom-color-palette {
    max-width: 130px;
}