/* CM UI FSE Panel – Border Control Styles */

.cm-border-control .cm-border-label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cm-border-control .cm-border-box div {
    border-radius: 2px;
    transition: background-color 0.15s ease;
}

.cm-border-control .cm-border-box div.active {
    background-color: #007cba;
}

/* Width section layout and alignment fixes */
.cm-border-width-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
}

/* Range control wrapper - takes most of the width */
.cm-width-range-wrapper {
    flex: 1;
    min-width: 0; /* Allow flex item to shrink */
}

/* Custom numeric display - positioned between slider and unit selector */
.cm-width-numeric-display {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    color: #333;
}

/* Unit selector wrapper - compact width */
.cm-width-unit-wrapper {
    flex: 0 0 auto;
    width: 65px;
}

/* Remove default margins from range control */
.cm-width-range-wrapper .components-range-control {
    margin-bottom: 0;
}

/* Ensure the RangeControl slider track is always visible */
.cm-width-range-wrapper .components-range-control__track {
    background: #ddd !important;
    height: 4px !important;
    border-radius: 2px;
    position: relative;
}

/* Style the filled portion of the track */
.cm-width-range-wrapper .components-range-control__rail {
    background: #007cba !important;
    height: 4px !important;
    border-radius: 2px;
}

/* Style the thumb/handle */
.cm-width-range-wrapper .components-range-control__thumb {
    background: #007cba !important;
    border: 2px solid #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    width: 18px !important;
    height: 18px !important;
}

/* Fix SelectControl alignment and remove margins */
.cm-width-unit-wrapper .components-select-control {
    margin-bottom: 0;
}

.cm-width-unit-wrapper .components-select-control .components-select-control__input {
    margin-bottom: 0;
    height: 36px; /* Match typical input height */
    font-size: 13px;
}

/* Ensure proper baseline alignment */
.cm-width-range-wrapper .components-base-control,
.cm-width-unit-wrapper .components-base-control {
    margin-bottom: 0;
}

/* Override any WordPress default margins that might interfere */
.cm-border-width-row .components-base-control__field {
    margin-bottom: 0;
}

/* Preview row: large swatch and hex code */
.cm-color-preview-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:6px;
}

/* Clickable area for color square and hex code */
.cm-color-clickable-area {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    cursor: pointer;
}

.cm-color-square{
    width:28px;
    height:28px;
    border:1px solid #ccc;
}
.cm-color-code{
    font:12px/1 monospace;
}

/* Clear link styling */
.cm-color-clear-link {
    color: #0073aa;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    transition: color 0.15s ease;
}

.cm-color-clear-link:hover {
    color: #005a87;
    text-decoration: underline;
}

.cm-color-clear-link:focus {
    outline: 1px dotted #0073aa;
    outline-offset: 2px;
}

/* Grid palette layout – 6 dots per row to mirror WP UI */
.cm-border-color-palette.components-color-palette{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:8px;
}
.cm-border-color-palette .components-color-palette__item{
    width:20px;
    height:20px;
}

/* Small color palette variant with half-size dots */
.cm-border-color-palette-small.components-color-palette{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:6px;
    max-width:100%;
    overflow:visible;
}
.cm-border-color-palette-small .components-color-palette__item{
    width:10px;
    height:10px;
    min-width:10px;
    min-height:10px;
}

/* Color palette wrapper to ensure proper layout */
.cm-color-palette-wrapper{
    width:100%;
    overflow:visible;
}

/* Hide WP's built-in large preview + custom-color UI */
.cm-border-color-palette .components-color-palette__current-color,
.cm-border-color-palette .components-color-palette__custom-color,
.cm-border-color-palette .components-color-palette__clear,
.cm-border-color-palette .components-color-palette__custom-color-mix{
    display:none !important;
}

/* Additional selectors to ensure WordPress Clear button is completely hidden */
.cm-border-color-palette .components-color-palette__clear-button,
.cm-border-color-palette .components-button.is-secondary,
.cm-border-color-palette button[aria-label*="Clear"],
.cm-border-color-palette button[aria-label*="clear"] {
    display: none !important;
}

/* Hide the specific WordPress circular option picker Clear button structure */
.components-circular-option-picker__custom-clear-wrapper,
.components-circular-option-picker__clear {
    display: none !important;
}

/* Additional targeting for the circular option picker Clear button with all its classes */
.components-button.components-circular-option-picker__clear.is-next-40px-default-size.is-tertiary {
    display: none !important;
}