/**
 * Blockenberg Editor Styles
 * Common styles for all blocks in editor
 */

/* ========================================
   Color Panel: Make PanelColorSettings
   collapsible (ToolsPanel → PanelBody style)
   ======================================== */

/* The ToolsPanel header becomes our toggle trigger */
.block-editor-panel-color-gradient-settings {
    border-top: 1px solid #e0e0e0;
}

.block-editor-panel-color-gradient-settings .components-tools-panel-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 36px;
}

/* Chevron indicator */
.block-editor-panel-color-gradient-settings .components-tools-panel-header::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 2px solid #1e1e1e;
    border-bottom: 2px solid #1e1e1e;
    transform: translateY(-50%) rotate(45deg);
    transition: transform .2s ease;
}

/* Collapsed state */
.block-editor-panel-color-gradient-settings.bkbg-panel-collapsed .components-tools-panel-header::after {
    transform: translateY(-50%) rotate(-45deg);
}

.block-editor-panel-color-gradient-settings.bkbg-panel-collapsed > *:not(.components-tools-panel-header) {
    display: none !important;
}

/* Hide the native ⋮ dropdown menu — we keep reset via our chevron */
.block-editor-panel-color-gradient-settings .components-tools-panel-header .components-dropdown-menu {
    display: none;
}

/* ========================================
   Block Inserter: BKB Badge on Icons
   ======================================== */

/* Target Blockenberg blocks in block inserter */
.block-editor-block-types-list__item[class*="blockenberg-"] .block-editor-block-types-list__item-icon,
.block-editor-inserter__panel-content [class*="blockenberg-"] .block-editor-block-types-list__item-icon {
    position: relative;
}

.block-editor-block-types-list__item[class*="blockenberg-"] .block-editor-block-types-list__item-icon::after,
.block-editor-inserter__panel-content [class*="blockenberg-"] .block-editor-block-types-list__item-icon::after {
    content: 'BKB';
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--wp-admin-theme-color, #8668ff);
    background: #8668ff;
    color: #fff;
    font-size: 7px;
    font-weight: 700;
    padding: 1px 3px;
    border-radius: 3px;
    line-height: 1;
    letter-spacing: 0.3px;
}

/* .block-editor-block-types-list__item[class*="blockenberg-"] .block-editor-block-types-list__item-icon .dashicon:before,
.block-editor-inserter__panel-content [class*="blockenberg-"] .block-editor-block-types-list__item-icon .dashicon:before {
    color: #8668ff;
} */

/* ========================================
   Editor: Block Wrapper & Hover States
   ======================================== */
.editor-styles-wrapper .bkbg-editor-wrap,
.block-editor-block-list__block.bkbg-editor-wrap {
    position: relative;
    border: 1px dashed transparent !important;
    border-radius: 4px;
    transition: border-color 0.15s ease;
}

.editor-styles-wrapper .bkbg-editor-wrap:hover,
.block-editor-block-list__block.bkbg-editor-wrap:hover {
    border-color: rgba(0, 124, 186, 0.5) !important;
}

.editor-styles-wrapper .bkbg-editor-wrap.is-selected,
.editor-styles-wrapper .bkbg-editor-wrap.bkbg-block-selected,
.block-editor-block-list__block.bkbg-editor-wrap.is-selected {
    border-color: #007cba !important;
    border-style: solid !important;
}

/* Block label in editor */
.bkbg-editor-wrap::before {
    content: attr(data-block-label);
    position: absolute;
    top: -10px;
    left: 10px;
    background: #007cba;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bkbg-editor-wrap:hover::before,
.bkbg-editor-wrap.is-selected::before {
    opacity: 1;
}

/* ========================================
    Editor: Action Bar (Hover + Selected)
    ======================================== */

.bkbg-editor-wrap .bkbg-editor-actions {
    position: absolute;
    left: -1px;
    right: -1px;
    top: 100%;
    bottom: auto;
    transform: translateY(2px);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 20;

    padding: 10px 12px;
    border-radius: 0 0 10px 10px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px dashed rgba(0, 124, 186, 0.45);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);
}

.bkbg-editor-wrap:hover .bkbg-editor-actions,
.bkbg-editor-wrap .bkbg-editor-actions:hover,
.bkbg-editor-wrap.is-selected .bkbg-editor-actions,
.bkbg-editor-wrap.bkbg-block-selected .bkbg-editor-actions,
.bkbg-editor-wrap:focus-within .bkbg-editor-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.bkbg-editor-wrap .bkbg-editor-actions .components-button {
    gap: 6px;
}

/* Keep overlays usable when blocks are close together */
.bkbg-editor-wrap {
    z-index: 0;
}

.bkbg-editor-wrap:hover,
.bkbg-editor-wrap.is-selected,
.bkbg-editor-wrap:focus-within {
    z-index: 1;
}

/* ========================================
   Layout Blocks: Section / Row / Column
   ======================================== */

/* Layout block hierarchy visualization */
.editor-styles-wrapper [data-type="blockenberg/section"],
.editor-styles-wrapper [data-type="blockenberg/row"],
.editor-styles-wrapper [data-type="blockenberg/column"] {
    position: relative;
}

/* Section block editor styles */
.editor-styles-wrapper [data-type="blockenberg/section"] {
    margin-top: 24px;
    margin-bottom: 24px;
}

.editor-styles-wrapper [data-type="blockenberg/section"]:first-child {
    margin-top: 0;
}

/* Row block editor styles */
.editor-styles-wrapper [data-type="blockenberg/row"] {
    margin-top: 16px;
    margin-bottom: 16px;
}

.editor-styles-wrapper [data-type="blockenberg/row"]:first-child {
    margin-top: 0;
}

/* Ensure row inner blocks display as flex - direct children only */
.editor-styles-wrapper [data-type="blockenberg/row"] > .bkbg-row > .bkbg-row__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Column blocks in editor - force width constraints */
.editor-styles-wrapper [data-type="blockenberg/row"] > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="blockenberg/column"] {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    min-width: 0 !important;
    max-width: none;
}

/* Remove default Gutenberg margins on columns */
.editor-styles-wrapper [data-type="blockenberg/column"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ========================================
   Layout Block: Visual Hierarchy Indicators
   ======================================== */

/* Section outline */
.editor-styles-wrapper [data-type="blockenberg/section"] > .bkbg-section {
    position: relative;
}

.editor-styles-wrapper [data-type="blockenberg/section"] > .bkbg-section::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px dashed transparent;
    border-radius: 6px;
    pointer-events: none;
    transition: border-color 0.15s ease;
}

.editor-styles-wrapper [data-type="blockenberg/section"].is-selected > .bkbg-section::after,
.editor-styles-wrapper [data-type="blockenberg/section"]:focus-within > .bkbg-section::after {
    border-color: rgba(59, 130, 246, 0.3);
}

/* Row outline */
.editor-styles-wrapper [data-type="blockenberg/row"] > .bkbg-row::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px dashed transparent;
    border-radius: 4px;
    pointer-events: none;
    transition: border-color 0.15s ease;
}

.editor-styles-wrapper [data-type="blockenberg/row"].is-selected > .bkbg-row::after,
.editor-styles-wrapper [data-type="blockenberg/row"]:focus-within > .bkbg-row::after {
    border-color: rgba(59, 130, 246, 0.4);
}

/* ========================================
   Layout Block: Drag Resize Handles
   ======================================== */

/* Ensure handles overlay is above content */
.editor-styles-wrapper .bkbg-row__handles-overlay {
    z-index: 100;
}

/* Handle hover effect enhancement */
.editor-styles-wrapper .bkbg-row__resize-handle:hover .bkbg-row__resize-handle-line {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

/* Handle active/dragging state */
.editor-styles-wrapper .bkbg-row__resize-handle.is-resizing .bkbg-row__resize-handle-line {
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
}

/* Cursor override during resize */
.editor-styles-wrapper .bkbg-row--is-resizing,
.editor-styles-wrapper .bkbg-row--is-resizing * {
    cursor: col-resize !important;
}

/* ========================================
   Layout Block: Responsive Mode Preview
   ======================================== */

/* Tablet mode preview styling */
.editor-styles-wrapper .bkbg-row--mode-tablet {
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 10px,
        rgba(59, 130, 246, 0.02) 10px,
        rgba(59, 130, 246, 0.02) 20px
    );
}

/* Mobile mode preview styling */
.editor-styles-wrapper .bkbg-row--mode-mobile {
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 8px,
        rgba(234, 88, 12, 0.02) 8px,
        rgba(234, 88, 12, 0.02) 16px
    );
}

/* Mode badge color variants */
.editor-styles-wrapper .bkbg-row--mode-tablet .bkbg-row__mode-badge {
    background: #8b5cf6;
}

.editor-styles-wrapper .bkbg-row--mode-mobile .bkbg-row__mode-badge {
    background: #ea580c;
}

/* ========================================
   Layout Block: Empty State
   ======================================== */

/* Empty column placeholder */
.editor-styles-wrapper .bkbg-column:empty::before,
.editor-styles-wrapper .bkbg-column .bkbg-column__inner:empty::before {
    content: 'Add content';
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    color: #94a3b8;
    font-size: 12px;
    font-style: italic;
}

/* Empty row placeholder */
.editor-styles-wrapper .bkbg-row .bkbg-row__inner:empty::before {
    content: 'Add columns';
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    color: #94a3b8;
    font-size: 12px;
    font-style: italic;
}

/* ========================================
   Layout Block: Toolbar & Controls
   ======================================== */

/* Preset buttons in inspector */
.bkbg-row-presets {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bkbg-row-presets .components-button {
    justify-content: flex-start;
    width: 100%;
    padding: 8px 12px;
}

.bkbg-row-presets .components-button:hover {
    background: #f1f5f9;
}

/* Column width controls */
.bkbg-column-widths-controls .components-range-control__wrapper {
    margin-bottom: 12px;
}

/* ========================================
   Layout Block: Selection States
   ======================================== */

/* When section is selected */
.editor-styles-wrapper [data-type="blockenberg/section"].is-selected {
    z-index: 1;
}

/* When row is selected inside section */
.editor-styles-wrapper [data-type="blockenberg/section"] [data-type="blockenberg/row"].is-selected {
    z-index: 2;
}

/* When column is selected inside row */
.editor-styles-wrapper [data-type="blockenberg/row"] [data-type="blockenberg/column"].is-selected {
    z-index: 3;
}

/* ========================================
   Layout Block: Appender Buttons
   ======================================== */

/* Row appender */
.editor-styles-wrapper .bkbg-row .block-list-appender {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    margin: 0 8px;
}

/* Column appender */
.editor-styles-wrapper .bkbg-column .block-list-appender {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Section appender */
.editor-styles-wrapper .bkbg-section .block-list-appender {
    margin-top: 16px;
}

/* ========================================
   Testimonials / Team Members: Carousel Nav
   ======================================== */

/* Ensure bottom nav is clickable in editor */
.editor-styles-wrapper .bkbg-ts-nav-bottom .bkbg-ts-nav,
.editor-styles-wrapper .bkbg-tm-nav-bottom .bkbg-tm-nav {
    position: relative;
    z-index: 10;
}

.editor-styles-wrapper .bkbg-ts-nav-bottom .bkbg-ts-nav-btn,
.editor-styles-wrapper .bkbg-tm-nav-bottom .bkbg-tm-nav-btn {
    position: relative;
    z-index: 11;
}

/* ========================================
   Inspector Tabs: General / Advanced
   ======================================== */

/* TabPanel: make tab buttons stretch equally */
.bkbg-inspector-tab-panel > .components-tab-panel__tabs {
    display: flex;
    margin: 0;
}

.bkbg-inspector-tab-panel > .components-tab-panel__tabs .components-tab-panel__tabs-item {
    flex: 1;
    justify-content: center;
}

/* Advanced section heading */
.bkbg-advanced-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #757575;
    padding: 16px 16px 8px;
}

/* Separator between control groups */
.bkbg-adv-separator {
    height: 1px;
    background: #e0e0e0;
    margin: 16px 0;
}

/* ---- Tab visibility: toggle block panels vs. advanced panels ---- */

/* When the Advanced tab is active, hide every PanelBody that is NOT ours */
.block-editor-block-inspector[data-bkbg-tab="advanced"] .components-panel__body:not(.bkbg-adv-panel) {
    display: none !important;
}

/* Also hide the built-in WP "Advanced" section (HTML anchor / extra CSS classes) */
.block-editor-block-inspector[data-bkbg-tab="advanced"] .block-editor-block-inspector__advanced {
    display: none !important;
}

/* ========================================
   Advanced Layout Controls
   ======================================== */

/* --- Spacing Control (Margin / Padding) --- */

.bkbg-spacing-control {
    margin-bottom: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.bkbg-spacing-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.bkbg-spacing-label {
    font-size: 13px;
    font-weight: 500;
    color: #4f5b66;
    line-height: 1;
}

.bkbg-spacing-inputs {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.bkbg-spacing-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.bkbg-spacing-side:first-child {
    margin-left: 0;
}

.bkbg-spacing-input {
    width: 100%;
    height: 32px;
    border: 1px solid #c8cdd4;
    border-radius: 0;
    border-right: 0;
    text-align: center;
    font-size: 13px;
    padding: 0 4px;
    background: #fff;
    color: #4f5b66;
    -moz-appearance: auto;
    appearance: auto;
    box-sizing: border-box;
}

.bkbg-spacing-side:first-child .bkbg-spacing-input {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.bkbg-spacing-side:last-of-type .bkbg-spacing-input {
    border-right: 1px solid #c8cdd4;
}

.bkbg-spacing-side .bkbg-spacing-input {
    border-radius: 0 !important;
    border-right: 0;
}

.bkbg-spacing-side:first-child .bkbg-spacing-input {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

.bkbg-spacing-side:last-of-type .bkbg-spacing-input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.bkbg-spacing-input::-webkit-inner-spin-button,
.bkbg-spacing-input::-webkit-outer-spin-button {
    opacity: 0;
    pointer-events: none;
    margin: 0;
    transition: opacity .12s ease;
}

.bkbg-spacing-input:hover::-webkit-inner-spin-button,
.bkbg-spacing-input:hover::-webkit-outer-spin-button,
.bkbg-spacing-input:focus::-webkit-inner-spin-button,
.bkbg-spacing-input:focus::-webkit-outer-spin-button {
    opacity: 1;
    pointer-events: auto;
}

.bkbg-spacing-input:focus {
    border-color: var(--wp-admin-theme-color, #007cba);
    box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #007cba);
    outline: none;
}

.bkbg-spacing-side-label {
    font-size: 11px;
    color: #7a8594;
    margin-top: 6px;
}

/* Link / Unlink Button */
.bkbg-link-btn.components-button {
    min-width: 44px;
    width: 44px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c8cdd4;
    border-left: 0;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: #d2d7de;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 44px;
    align-self: flex-start;
    color: #1f2328;
}

.bkbg-link-btn.is-linked.components-button {
    background: #ccd2da;
    color: #1f2328;
}

.bkbg-link-btn.components-button:not(.is-linked) {
    background: #ffffff;
    color: #1f2328;
}

.bkbg-link-btn .dashicons,
.bkbg-link-btn .dashicons-before:before,
.bkbg-link-btn .dashicons-admin-links:before {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

/* --- Device Switcher --- */

.bkbg-device-switcher {
    position: relative;
    display: inline-flex;
}

.bkbg-device-btn.components-button {
    min-width: 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #949494;
}

.bkbg-device-btn.components-button:hover {
    background: transparent;
    color: #e50087;
}

.bkbg-device-popover .components-popover__content {
    padding: 6px;
    border-radius: 8px;
}

.bkbg-device-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px;
}

.bkbg-device-option.components-button {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: none;
    background: transparent;
}

.bkbg-device-option.components-button:hover {
    background: #f0f0f0;
}

.bkbg-device-option.is-active.components-button {
    background: #f5e6f0;
}

/* --- Unit Selector --- */

.bkbg-unit-selector {
    position: relative;
    display: inline-flex;
    margin-left: auto;
}

.bkbg-unit-btn.components-button {
    font-size: 13px;
    font-weight: 500;
    color: #4f5b66;
    padding: 0 2px;
    height: 24px;
    min-width: 0;
    border: none;
    background: transparent;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.bkbg-unit-btn.components-button:hover {
    color: #4f5b66;
    background: #f0f0f0;
}

.bkbg-unit-value {
    line-height: 1;
}

.bkbg-unit-caret.dashicons {
    font-size: 12px;
    width: 14px;
    height: 14px;
    line-height: 17px;
    margin: 0;
}

.bkbg-unit-popover .components-popover__content {
    padding: 6px 10px;
    border-radius: 8px;
}

.bkbg-unit-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px;
    min-width: 56px;
}

.bkbg-unit-option.components-button {
    width: 100%;
    height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #4f5b66;
}

.bkbg-unit-option.components-button:hover {
    background: #f0f0f0;
}

.bkbg-unit-option.is-active.components-button {
    color: #e50087;
    font-weight: 500;
}

/* --- Z-Index Control --- */

.bkbg-zindex-control {
    margin-bottom: 18px;
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.bkbg-zindex-control .bkbg-spacing-header {
    margin-bottom: 0;
    flex: 0 0 108px;
    width: 108px;
}

.bkbg-zindex-control .bkbg-spacing-label {
    white-space: nowrap;
}

.bkbg-zindex-input-wrap {
    display: flex;
    justify-content: flex-start;
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.bkbg-zindex-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 32px;
    border: 1px solid #c8cdd4;
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
    padding: 0 8px;
    background: #fff;
    color: #4f5b66;
    -moz-appearance: textfield;
    appearance: textfield;
    box-sizing: border-box;
}

.bkbg-zindex-input:focus {
    border-color: var(--wp-admin-theme-color, #007cba);
    box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #007cba);
    outline: none;
}

/* --- CSS ID / CSS Classes Control --- */

.bkbg-css-control {
    margin-bottom: 18px;
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.bkbg-css-control .bkbg-spacing-header {
    margin-bottom: 0;
    flex: 0 0 108px;
    width: 108px;
}

.bkbg-css-control .bkbg-spacing-label {
    white-space: nowrap;
}

.bkbg-css-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.bkbg-css-input {
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 32px;
    border: 1px solid #c8cdd4;
    border-radius: 6px;
    font-size: 13px;
    padding: 0 8px;
    background: #fff;
    color: #4f5b66;
    box-sizing: border-box;
}

.bkbg-css-input:focus {
    border-color: var(--wp-admin-theme-color, #007cba);
    box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #007cba);
    outline: none;
}

/* ========================================
   Background Panel Controls
   ======================================== */

/* --- Normal / Hover State Tabs --- */

.bkbg-bg-state-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.bkbg-bg-state-tab.components-button {
    flex: 1;
    justify-content: center;
    height: 34px;
    font-size: 12px;
    font-weight: 500;
    color: #4f5b66;
    border: none;
    border-radius: 0;
    background: #f7f7f7;
    transition: background 0.15s, color 0.15s;
}

.bkbg-bg-state-tab.components-button:not(:last-child) {
    border-right: 1px solid #e0e0e0;
}

.bkbg-bg-state-tab.components-button:hover {
    background: #eee;
}

.bkbg-bg-state-tab.is-active.components-button {
    background: #fff;
    color: #e50087;
    font-weight: 600;
}

/* --- Background Type Row --- */

.bkbg-bg-type-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.bkbg-bg-type-buttons {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.bkbg-bg-type-btn.components-button {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d2d7de;
    border-radius: 4px;
    background: #fff;
    color: #757575;
    transition: all 0.15s;
}

.bkbg-bg-type-btn.components-button:hover {
    border-color: #949494;
    color: #4f5b66;
}

.bkbg-bg-type-btn.is-active.components-button {
    background: #e50087;
    border-color: #e50087;
    color: #fff;
}

/* --- Color Swatch Row --- */

.bkbg-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.bkbg-color-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.bkbg-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #d2d7de;
    cursor: pointer;
    transition: border-color 0.15s;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><pattern id="c" width="8" height="8" patternUnits="userSpaceOnUse"><rect width="4" height="4" fill="%23ccc"/><rect x="4" y="4" width="4" height="4" fill="%23ccc"/></pattern></defs><rect fill="url(%23c)" width="24" height="24"/></svg>');
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.bkbg-color-swatch:hover {
    border-color: #e50087;
}

.bkbg-color-popover .components-popover__content {
    padding: 12px;
    border-radius: 8px;
    overflow: visible;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.bkbg-color-popover {
    z-index: 1000001 !important;
}

.bkbg-color-picker-wrap {
    width: 240px;
}

.bkbg-color-picker-wrap .components-color-picker {
    width: 100%;
}

.bkbg-color-clear.components-button {
    width: 100%;
    justify-content: center;
    margin: 8px 0;
    font-size: 12px;
}

/* --- Image Upload Control --- */

.bkbg-image-control {
    margin-bottom: 14px;
}

.bkbg-image-upload-area {
    margin-top: 0;
}

.bkbg-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    background: #f0f0f0;
    border: 2px dashed #d2d7de;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    min-height: 80px;
}

.bkbg-image-placeholder:hover {
    border-color: #e50087;
    background: #fdf2f8;
}

.bkbg-image-plus {
    font-size: 28px;
    color: #949494;
    line-height: 1;
    font-weight: 300;
}

.bkbg-image-choose.components-button {
    font-size: 12px;
}

.bkbg-image-preview {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #d2d7de;
}

.bkbg-image-preview img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 140px;
    object-fit: cover;
}

.bkbg-image-actions {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.9);
    justify-content: center;
}

.bkbg-image-replace.components-button,
.bkbg-image-remove.components-button {
    font-size: 11px;
}

/* --- Range Slider Control --- */

.bkbg-range-control {
    margin-bottom: 14px;
}

.bkbg-range-unit {
    font-size: 12px;
    font-weight: 500;
    color: #949494;
    margin-left: auto;
}

.bkbg-range-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bkbg-range-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #d2d7de;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    min-width: 0;
}

.bkbg-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e50087;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.bkbg-range-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e50087;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.bkbg-range-number {
    width: 56px;
    height: 32px;
    border: 1px solid #c8cdd4;
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
    padding: 0 4px;
    background: #fff;
    color: #4f5b66;
    flex-shrink: 0;
    box-sizing: border-box;
}

.bkbg-range-number:focus {
    border-color: var(--wp-admin-theme-color, #007cba);
    box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #007cba);
    outline: none;
}

/* --- Gradient Notice --- */

.bkbg-grad-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: #fff8e1;
    border-left: 3px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    margin-bottom: 16px;
    font-size: 12px;
    line-height: 1.5;
    color: #78571c;
}

.bkbg-grad-notice-icon {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1.3;
}

/* --- Gradient Type Dropdown --- */

.bkbg-grad-type-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.bkbg-grad-type-select {
    flex: 1;
    min-width: 0;
}

/* --- Transition Duration --- */

.bkbg-transition-control {
    margin-bottom: 4px;
}

/* --- Dropdown Row Control --- */

.bkbg-dropdown-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.bkbg-dropdown-label-side {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.bkbg-dropdown-select-side {
    flex: 1;
    min-width: 0;
}

.bkbg-dropdown-select {
    width: 100%;
    height: 32px;
    border: 1px solid #c8cdd4;
    border-radius: 6px;
    font-size: 13px;
    padding: 0 8px;
    background: #fff;
    color: #4f5b66;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6z" fill="%23757575"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    padding-right: 28px;
}

.bkbg-dropdown-select:focus {
    border-color: var(--wp-admin-theme-color, #007cba);
    box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #007cba);
    outline: none;
}

/* --- Custom Position / Size Inputs --- */

.bkbg-custom-pos-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    padding-left: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.bkbg-custom-pos-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.bkbg-custom-pos-lbl {
    font-size: 12px;
    font-weight: 500;
    color: #949494;
    flex-shrink: 0;
}

.bkbg-custom-pos-input {
    flex: 1;
    min-width: 0;
    width: 50px;
    max-width: 100%;
    height: 32px;
    border: 1px solid #c8cdd4;
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
    padding: 0 4px;
    background: #fff;
    color: #4f5b66;
    box-sizing: border-box;
    -moz-appearance: textfield;
    appearance: textfield;
}

.bkbg-custom-pos-input::-webkit-inner-spin-button,
.bkbg-custom-pos-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.bkbg-custom-pos-input:focus {
    border-color: var(--wp-admin-theme-color, #007cba);
    box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #007cba);
    outline: none;
}

.bkbg-custom-pos-unit {
    font-size: 12px;
    color: #949494;
    flex-shrink: 0;
}

/* --- Box Shadow Control --- */

.bkbg-shadow-control {
    margin-bottom: 0;
}

.bkbg-shadow-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.bkbg-shadow-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.bkbg-shadow-reset-btn.components-button,
.bkbg-shadow-toggle-btn.components-button {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #757575;
    border-radius: 4px;
    transition: all 0.15s;
}

.bkbg-shadow-reset-btn.components-button:hover,
.bkbg-shadow-toggle-btn.components-button:hover {
    color: #e50087;
    background: rgba(229, 0, 135, 0.06);
}

.bkbg-shadow-toggle-btn.is-active.components-button {
    background: #1e1e1e;
    color: #fff;
}

.bkbg-shadow-toggle-btn.is-active.components-button:hover {
    background: #333;
    color: #fff;
}

.bkbg-shadow-body {
    margin-top: 12px;
    padding: 14px;
    background: #fafafa;
    border: 1px solid #e8eaed;
    border-radius: 8px;
}

.bkbg-shadow-body .bkbg-color-row {
    margin-bottom: 12px;
}

.bkbg-shadow-body .bkbg-range-control {
    margin-bottom: 10px;
}

.bkbg-shadow-body .bkbg-dropdown-row {
    margin-bottom: 0;
}

/* ========================================
   Responsive Panel
   ======================================== */

.bkbg-responsive-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.bkbg-responsive-row:last-child {
    border-bottom: none;
}

.bkbg-responsive-label {
    font-size: 13px;
    color: #1e1e1e;
    font-weight: 400;
}

.bkbg-responsive-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.bkbg-toggle-track {
    width: 36px;
    height: 20px;
    background: #ccc;
    border-radius: 10px;
    position: relative;
    transition: background 0.2s ease;
}

.bkbg-responsive-toggle.is-active .bkbg-toggle-track {
    background: var(--wp-admin-theme-color, #007cba);
}

.bkbg-toggle-thumb {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.bkbg-responsive-toggle.is-active .bkbg-toggle-thumb {
    transform: translateX(16px);
}

.bkbg-toggle-label {
    font-size: 12px;
    color: #757575;
    min-width: 30px;
}

/* ========================================
   Typography Control (Elementor-style)
   ======================================== */

/* Label row: "Title  [✏]" */
.bkbg-typo-control {
    margin-bottom: 4px;
}

.bkbg-typo-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    min-height: 36px;
}

.bkbg-typo-label {
    font-size: 13px;
    font-weight: 500;
    color: #4f5b66;
    flex: 1;
}

.bkbg-typo-label.has-value {
    color: #1e1e1e;
}

.bkbg-typo-edit-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    background: #f8f9fa !important;
    color: #757575 !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0;
}

.bkbg-typo-edit-btn:hover,
.bkbg-typo-edit-btn.has-value {
    border-color: #8668ff !important;
    color: #8668ff !important;
    background: #f4f0ff !important;
}

/* Typography popover panel */
.bkbg-typo-popover .components-popover__content {
    padding: 0 !important;
    min-width: 280px !important;
    max-width: 310px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
    border-radius: 8px !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    border: 1px solid #e0e0e0 !important;
}

/* macOS-style scrollbar — always visible, light grey */
.bkbg-typo-popover .components-popover__content::-webkit-scrollbar {
    width: 6px;
}
.bkbg-typo-popover .components-popover__content::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 0 8px 8px 0;
}
.bkbg-typo-popover .components-popover__content::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 3px;
    transition: background 0.2s;
}
.bkbg-typo-popover .components-popover__content::-webkit-scrollbar-thumb:hover {
    background: #b8b8b8;
}
.bkbg-typo-popover .components-popover__content::-webkit-scrollbar-button {
    display: none;
}

.bkbg-typo-panel {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

/* Panel header */
.bkbg-typo-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    background: #fafafa;
    border-bottom: 1px solid #ebebeb;
}

.bkbg-typo-panel-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #4f5b66;
}

.bkbg-typo-panel-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bkbg-typo-header-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    border-radius: 4px !important;
    color: #757575 !important;
    background: transparent !important;
    border: none !important;
}

.bkbg-typo-header-btn:hover {
    background: #f0f0f0 !important;
    color: #1e1e1e !important;
}

/* Individual field row */
.bkbg-typo-field {
    padding: 8px 14px;
    border-bottom: 1px solid #f5f5f5;
}

.bkbg-typo-field:last-child {
    border-bottom: none;
}

.bkbg-typo-field-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
    margin-bottom: 6px;
}

.bkbg-typo-field .components-select-control__input,
.bkbg-typo-field .components-base-control,
.bkbg-typo-field .components-input-control {
    margin-bottom: 0 !important;
}

/* Responsive field (has device + unit selectors) */
.bkbg-typo-responsive-field {
    padding-bottom: 12px;
}

.bkbg-typo-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bkbg-typo-field-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Slider + number input row */
.bkbg-typo-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bkbg-typo-range {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.bkbg-typo-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #8668ff;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(134, 104, 255, 0.4);
}

.bkbg-typo-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #8668ff;
    cursor: pointer;
    border: none;
}

.bkbg-typo-number {
    width: 52px !important;
    min-width: 52px !important;
    padding: 4px 6px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    text-align: center !important;
    color: #1e1e1e !important;
    background: #fff !important;
    transition: border-color 0.15s ease !important;
}

.bkbg-typo-number:focus {
    border-color: #8668ff !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(134, 104, 255, 0.25) !important;
}

/* Scope unit/device popovers inside typo popover */
.bkbg-typo-popover .bkbg-unit-btn {
    font-size: 11px !important;
}

/* Custom HTML is used as full-width page sections. Theme content-size otherwise boxes and centers it.
   Do not use 100vw here: it includes the scrollbar and padding, so sections overflow the canvas. */
.editor-styles-wrapper .block-editor-block-list__block[data-type="core/html"] {
    max-width: none !important;
    width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}

.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .block-editor-block-list__block[data-type="core/html"] {
    margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
    margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
    width: auto !important;
    max-width: none !important;
}

.editor-styles-wrapper .block-editor-block-list__block[data-type="core/html"] > :where(section, div, header, footer, article, main, aside),
.editor-styles-wrapper .block-editor-block-list__block[data-type="core/html"] .block-editor-inner-content > :where(section, div, header, footer, article, main, aside) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    transform: none !important;
}

.editor-styles-wrapper.bkbg-ai-html-picking [data-type="core/html"] {
    cursor: crosshair;
}

.editor-styles-wrapper [data-bkbg-html-target] {
    outline: 2px solid #8668ff;
    outline-offset: 3px;
    position: relative;
}

.editor-styles-wrapper .block-editor-block-list__block[data-type="core/html"] img,
.editor-styles-wrapper .block-editor-block-list__block[data-type="core/html"] video,
.editor-styles-wrapper .block-editor-block-list__block[data-type="core/html"] iframe {
    max-width: 100%;
    height: auto;
}