/* CM Bullet Columns - Centralized CSS */
/* Single source of truth for both frontend and FSE styling */
/* Updated with New Responsive Column System */


.class_1_bg{
    background-color: #c6edc7;
}
.class_2_bg{
    background-color: #dfb8b8;
}
.class_3_bg{
    background-color: #b8d7df;
}
 

.features_wrapper,
.wp-block .features_wrapper,
.editor-styles-wrapper .features_wrapper,
.block-editor-block-list__layout .features_wrapper {
    margin: 0 auto;
    float: none !important; 
    padding: 1.5vw 0 .5vw 0;
    /* Clearfix to contain floated children */
    overflow: hidden;
    /* Initially invisible but measurable */
    opacity: 0;
}

/* Add clearfix for better float containment */
.features_wrapper::after,
.wp-block .features_wrapper::after,
.editor-styles-wrapper .features_wrapper::after,
.block-editor-block-list__layout .features_wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* Alignment variations for floated columns */
.features_wrapper.columns-align-left,
.wp-block .features_wrapper.columns-align-left,
.editor-styles-wrapper .features_wrapper.columns-align-left,
.block-editor-block-list__layout .features_wrapper.columns-align-left {
    /* Default behavior - columns float left */
}

.features_wrapper.columns-align-center,
.wp-block .features_wrapper.columns-align-center,
.editor-styles-wrapper .features_wrapper.columns-align-center,
.block-editor-block-list__layout .features_wrapper.columns-align-center {
    text-align: center; /* For inline-block fallback */
}

.features_wrapper.columns-align-center .feature-column,
.wp-block .features_wrapper.columns-align-center .feature-column,
.editor-styles-wrapper .features_wrapper.columns-align-center .feature-column,
.block-editor-block-list__layout .features_wrapper.columns-align-center .feature-column {
    display: inline-block;
    vertical-align: top;
    text-align: center; /* Center-justify the bullet content */
}

.features_wrapper.columns-align-right,
.wp-block .features_wrapper.columns-align-right,
.editor-styles-wrapper .features_wrapper.columns-align-right,
.block-editor-block-list__layout .features_wrapper.columns-align-right {
    text-align: right; /* This helps with inline-block columns */
}

.features_wrapper.columns-align-right .feature-column,
.wp-block .features_wrapper.columns-align-right .feature-column,
.editor-styles-wrapper .features_wrapper.columns-align-right .feature-column,
.block-editor-block-list__layout .features_wrapper.columns-align-right .feature-column {
    float: right;
    direction: rtl; /* Right-to-left text direction for right-aligned bullets */
    text-align: right;
}

/* Reset text direction for content within right-aligned bullets */
.features_wrapper.columns-align-right .feature-column .li-content,
.wp-block .features_wrapper.columns-align-right .feature-column .li-content,
.editor-styles-wrapper .features_wrapper.columns-align-right .feature-column .li-content,
.block-editor-block-list__layout .features_wrapper.columns-align-right .feature-column .li-content {
    direction: ltr; /* Keep text left-to-right */
    display: inline-block;
}

/* Special handling for 2-column right alignment */
.features_wrapper.columns-align-right.columns-2::before,
.wp-block .features_wrapper.columns-align-right.columns-2::before,
.editor-styles-wrapper .features_wrapper.columns-align-right.columns-2::before,
.block-editor-block-list__layout .features_wrapper.columns-align-right.columns-2::before {
    content: "";
    display: table;
}

.feature-column,
.wp-block .feature-column,
.editor-styles-wrapper .feature-column,
.block-editor-block-list__layout .feature-column {
    list-style: disc inside;
    margin: 0;
    padding: 0 .25em 0 .25em; /* Remove all padding from columns */
    box-sizing: border-box;
    text-align: left; /* Reset text alignment for list content */
}
 
.feature-column li,
.line-height-gauge,
.wp-block .feature-column li,
.wp-block .line-height-gauge,
.editor-styles-wrapper .feature-column li,
.editor-styles-wrapper .line-height-gauge,
.block-editor-block-list__layout .feature-column li,
.block-editor-block-list__layout .line-height-gauge {
    padding: var(--list-item-padding);
    margin-bottom: 0;
    word-wrap: break-word;
}

/* Ensure HTML elements within list items display inline */
.feature-column li .li-content *,
.wp-block .feature-column li .li-content *,
.editor-styles-wrapper .feature-column li .li-content *,
.block-editor-block-list__layout .feature-column li .li-content * {
    display: inline;
}

/* Dynamic bullet color using CSS custom properties - NO FALLBACKS */
li::marker,
.wp-block li::marker,
.editor-styles-wrapper li::marker,
.block-editor-block-list__layout li::marker {
    color: var(--bullet-color);
}

/* Hide bullet markers when no-bullets class is present */
.features_wrapper.no-bullets .feature-column,
.wp-block .features_wrapper.no-bullets .feature-column,
.editor-styles-wrapper .features_wrapper.no-bullets .feature-column,
.block-editor-block-list__layout .features_wrapper.no-bullets .feature-column {
    list-style: none;
}

.features_wrapper.no-bullets .feature-column li::marker,
.wp-block .features_wrapper.no-bullets .feature-column li::marker,
.editor-styles-wrapper .features_wrapper.no-bullets .feature-column li::marker,
.block-editor-block-list__layout .features_wrapper.no-bullets .feature-column li::marker {
    content: none;
}

/* Dynamic border styles for list items only — keyed off wrapper data attribute */

.features_wrapper[data-border-type="solid"] .feature-column li.feature-item,
.wp-block .features_wrapper[data-border-type="solid"] .feature-column li.feature-item,
.editor-styles-wrapper .features_wrapper[data-border-type="solid"] .feature-column li.feature-item,
.block-editor-block-list__layout .features_wrapper[data-border-type="solid"] .feature-column li.feature-item {
    border-bottom: var(--cm-li-bdr-w) solid  var(--cm-li-bdr-clr);
}

.features_wrapper[data-border-type="dashed"] .feature-column li.feature-item,
.wp-block .features_wrapper[data-border-type="dashed"] .feature-column li.feature-item,
.editor-styles-wrapper .features_wrapper[data-border-type="dashed"] .feature-column li.feature-item,
.block-editor-block-list__layout .features_wrapper[data-border-type="dashed"] .feature-column li.feature-item {
    border-bottom: var(--cm-li-bdr-w) dashed var(--cm-li-bdr-clr);
}

.features_wrapper[data-border-type="dotted"] .feature-column li.feature-item,
.wp-block .features_wrapper[data-border-type="dotted"] .feature-column li.feature-item,
.editor-styles-wrapper .features_wrapper[data-border-type="dotted"] .feature-column li.feature-item,
.block-editor-block-list__layout .features_wrapper[data-border-type="dotted"] .feature-column li.feature-item {
    border-bottom: var(--cm-li-bdr-w) dotted var(--cm-li-bdr-clr);
}

/* No borders when type is "none" */
.features_wrapper[data-border-type="none"] .feature-column li.feature-item,
.wp-block .features_wrapper[data-border-type="none"] .feature-column li.feature-item,
.editor-styles-wrapper .features_wrapper[data-border-type="none"] .feature-column li.feature-item,
.block-editor-block-list__layout .features_wrapper[data-border-type="none"] .feature-column li.feature-item {
    border-bottom: none;
}

/* Interactive bullet styles */
.feature-column li.clickable-bullet[data-has-description="true"],
.wp-block .feature-column li.clickable-bullet[data-has-description="true"],
.editor-styles-wrapper .feature-column li.clickable-bullet[data-has-description="true"],
.block-editor-block-list__layout .feature-column li.clickable-bullet[data-has-description="true"] {
    cursor: pointer;
    transition: color 0.2s ease;
    position: relative;
}

.feature-column li.clickable-bullet[data-has-description="true"]:hover,
.wp-block .feature-column li.clickable-bullet[data-has-description="true"]:hover,
.editor-styles-wrapper .feature-column li.clickable-bullet[data-has-description="true"]:hover,
.block-editor-block-list__layout .feature-column li.clickable-bullet[data-has-description="true"]:hover {
    color: var(--hyperlink-blue);
}

.feature-column li.clickable-bullet[data-has-description="true"]:hover .li-content,
.wp-block .feature-column li.clickable-bullet[data-has-description="true"]:hover .li-content,
.editor-styles-wrapper .feature-column li.clickable-bullet[data-has-description="true"]:hover .li-content,
.block-editor-block-list__layout .feature-column li.clickable-bullet[data-has-description="true"]:hover .li-content {
    color: var(--hyperlink-blue);
}

/* Dialog window styles with CSS custom properties - NO FALLBACKS */
.cm-bullet-dialog,
.wp-block .cm-bullet-dialog,
.editor-styles-wrapper .cm-bullet-dialog,
.block-editor-block-list__layout .cm-bullet-dialog {
    position: absolute;
    background-color: var(--cm-dlg-bg);
    color: var(--cm-dlg-txt);
    border: solid 2px var(--cm-dlg-bdr-clr);
    border-radius: var(--dialog-border-radius);
    padding: var(--dialog-padding);
    max-width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: var(--dialog-z-index);
    font-size: inherit;
    line-height: 1.4;
    word-wrap: break-word;
    box-sizing: border-box;
}

/* Dialog animations with dynamic duration - NO FALLBACKS */
.cm-bullet-dialog.fade,
.wp-block .cm-bullet-dialog.fade,
.editor-styles-wrapper .cm-bullet-dialog.fade,
.block-editor-block-list__layout .cm-bullet-dialog.fade {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity var(--dialog-animation-duration) ease, transform var(--dialog-animation-duration) ease;
}

.cm-bullet-dialog.fade.show,
.wp-block .cm-bullet-dialog.fade.show,
.editor-styles-wrapper .cm-bullet-dialog.fade.show,
.block-editor-block-list__layout .cm-bullet-dialog.fade.show {
    opacity: 1;
    transform: translateY(0);
}

.cm-bullet-dialog.slide-up,
.wp-block .cm-bullet-dialog.slide-up,
.editor-styles-wrapper .cm-bullet-dialog.slide-up,
.block-editor-block-list__layout .cm-bullet-dialog.slide-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dialog-animation-duration) ease, transform var(--dialog-animation-duration) ease;
}

.cm-bullet-dialog.slide-up.show,
.wp-block .cm-bullet-dialog.slide-up.show,
.editor-styles-wrapper .cm-bullet-dialog.slide-up.show,
.block-editor-block-list__layout .cm-bullet-dialog.slide-up.show {
    opacity: 1;
    transform: translateY(0);
}

.cm-bullet-dialog.slide-down,
.wp-block .cm-bullet-dialog.slide-down,
.editor-styles-wrapper .cm-bullet-dialog.slide-down,
.block-editor-block-list__layout .cm-bullet-dialog.slide-down {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity var(--dialog-animation-duration) ease, transform var(--dialog-animation-duration) ease;
}

.cm-bullet-dialog.slide-down.show,
.wp-block .cm-bullet-dialog.slide-down.show,
.editor-styles-wrapper .cm-bullet-dialog.slide-down.show,
.block-editor-block-list__layout .cm-bullet-dialog.slide-down.show {
    opacity: 1;
    transform: translateY(0);
}

.cm-bullet-dialog.scale,
.wp-block .cm-bullet-dialog.scale,
.editor-styles-wrapper .cm-bullet-dialog.scale,
.block-editor-block-list__layout .cm-bullet-dialog.scale {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--dialog-animation-duration) ease, transform var(--dialog-animation-duration) ease;
}

.cm-bullet-dialog.scale.show,
.wp-block .cm-bullet-dialog.scale.show,
.editor-styles-wrapper .cm-bullet-dialog.scale.show,
.block-editor-block-list__layout .cm-bullet-dialog.scale.show {
    opacity: 1;
    transform: scale(1);
}

/* Dialog arrow pointer with dynamic colors - NO FALLBACKS */
.cm-bullet-dialog.position-above::after,
.wp-block .cm-bullet-dialog.position-above::after,
.editor-styles-wrapper .cm-bullet-dialog.position-above::after,
.block-editor-block-list__layout .cm-bullet-dialog.position-above::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--dialog-arrow-size));
    left: var(--dialog-arrow-offset);
    width: 0;
    height: 0;
    border-left: var(--dialog-arrow-size) solid transparent;
    border-right: var(--dialog-arrow-size) solid transparent;
    border-top: var(--dialog-arrow-size) solid var(--cm-dlg-bdr-clr);
}

.cm-bullet-dialog.position-above::before,
.wp-block .cm-bullet-dialog.position-above::before,
.editor-styles-wrapper .cm-bullet-dialog.position-above::before,
.block-editor-block-list__layout .cm-bullet-dialog.position-above::before {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--dialog-arrow-size) + 2px);
    left: calc(var(--dialog-arrow-offset) + 1px);
    width: 0;
    height: 0;
    border-left: calc(var(--dialog-arrow-size) - 1px) solid transparent;
    border-right: calc(var(--dialog-arrow-size) - 1px) solid transparent;
    border-top: calc(var(--dialog-arrow-size) - 1px) solid var(--cm-dlg-bg);
}

.cm-bullet-dialog.position-below::after,
.wp-block .cm-bullet-dialog.position-below::after,
.editor-styles-wrapper .cm-bullet-dialog.position-below::after,
.block-editor-block-list__layout .cm-bullet-dialog.position-below::after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--dialog-arrow-size));
    left: var(--dialog-arrow-offset);
    width: 0;
    height: 0;
    border-left: var(--dialog-arrow-size) solid transparent;
    border-right: var(--dialog-arrow-size) solid transparent;
    border-bottom: var(--dialog-arrow-size) solid var(--cm-dlg-bdr-clr);
}

.cm-bullet-dialog.position-below::before,
.wp-block .cm-bullet-dialog.position-below::before,
.editor-styles-wrapper .cm-bullet-dialog.position-below::before,
.block-editor-block-list__layout .cm-bullet-dialog.position-below::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--dialog-arrow-size) + 2px);
    left: calc(var(--dialog-arrow-offset) + 1px);
    width: 0;
    height: 0;
    border-left: calc(var(--dialog-arrow-size) - 1px) solid transparent;
    border-right: calc(var(--dialog-arrow-size) - 1px) solid transparent;
    border-bottom: calc(var(--dialog-arrow-size) - 1px) solid var(--cm-dlg-bg);
}

/* Dialog close button styles with CSS custom properties - NO FALLBACKS */
.cm-bullet-dialog .cm-dialog-close,
.wp-block .cm-bullet-dialog .cm-dialog-close,
.editor-styles-wrapper .cm-bullet-dialog .cm-dialog-close,
.block-editor-block-list__layout .cm-bullet-dialog .cm-dialog-close {
    position: absolute;
    top: var(--close-button-top);
    right: var(--close-button-right);
    width: var(--close-button-size);
    height: var(--close-button-size);
    background: #b056567a;
    color: white;    
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: var(--close-button-padding);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.cm-bullet-dialog .cm-dialog-close:hover,
.wp-block .cm-bullet-dialog .cm-dialog-close:hover,
.editor-styles-wrapper .cm-bullet-dialog .cm-dialog-close:hover,
.block-editor-block-list__layout .cm-bullet-dialog .cm-dialog-close:hover {
    background-color: #3b81487a;
    opacity: 0.8;
}

.cm-bullet-dialog .cm-dialog-close:focus,
.wp-block .cm-bullet-dialog .cm-dialog-close:focus,
.editor-styles-wrapper .cm-bullet-dialog .cm-dialog-close:focus,
.block-editor-block-list__layout .cm-bullet-dialog .cm-dialog-close:focus {
    outline: 1px solid var(--cm-dlg-txt);
    outline-offset: 1px;
}

/* Responsive dialog sizing */
@media (max-width: 768px) {
    .cm-bullet-dialog,
    .wp-block .cm-bullet-dialog,
    .editor-styles-wrapper .cm-bullet-dialog,
    .block-editor-block-list__layout .cm-bullet-dialog {
        padding: var(--dialog-responsive-padding);
    }
}
 
/* Smooth transitions for responsive changes - NO FALLBACKS */
.features_wrapper.transitioning .feature-column,
.wp-block .features_wrapper.transitioning .feature-column,
.editor-styles-wrapper .features_wrapper.transitioning .feature-column,
.block-editor-block-list__layout .features_wrapper.transitioning .feature-column {
    transition: width var(--responsive-transition-duration) ease,
                opacity var(--responsive-transition-duration) ease,
                margin var(--responsive-transition-duration) ease !important;
}

/* Base transition for all column changes - using PHP-generated custom property */
.features_wrapper .feature-column,
.wp-block .features_wrapper .feature-column,
.editor-styles-wrapper .features_wrapper .feature-column,
.block-editor-block-list__layout .features_wrapper .feature-column {
    transition: width var(--base-transition-duration) ease, margin var(--base-transition-duration) ease !important;
}

.line-height-gauge,
.wp-block .line-height-gauge,
.editor-styles-wrapper .line-height-gauge,
.block-editor-block-list__layout .line-height-gauge {
    display: block;
    position: absolute;
    float: left;
    background: pink;
    opacity: 0;
    top: 225px;
    left: 35%;
}

/* Utility width classes using PHP-generated custom properties - NO HARDCODED VALUES */
.cm-total-cols-1,
.wp-block .cm-total-cols-1,
.editor-styles-wrapper .cm-total-cols-1,
.block-editor-block-list__layout .cm-total-cols-1 {
    width: var(--utility-col-1-width); /* will be dynamically changed by centralized.js so disregard */
    float: none !important;
    margin: 0 auto;
}

.cm-total-cols-2,
.wp-block .cm-total-cols-2,
.editor-styles-wrapper .cm-total-cols-2,
.block-editor-block-list__layout .cm-total-cols-2 {
    width: var(--utility-col-2-width);
    float: left !important; 
}

.cm-total-cols-3,
.wp-block .cm-total-cols-3,
.editor-styles-wrapper .cm-total-cols-3,
.block-editor-block-list__layout .cm-total-cols-3 {
    width: var(--utility-col-3-width);
    float: left !important; 
}