/* Content Blocks Widget CSS

 * File: assets/css/content-blocks-widget.css

 */



.content-blocks-wrapper {

    position: relative;

    width: 100%;

}



/* Grid Layout Styles - Dynamic columns based on Elementor setting */

.content-blocks-grid {

    display: grid;

    width: 100% !important;

    box-sizing: border-box;

}



.content-blocks-grid .content-block {

    display: flex;

    flex-direction: column;

    height: 100%;

}



/* Content Block Base Styles */

.content-block {

    background: #ffffff;

    border: 1px solid #e1e8ed;

    border-radius: 8px;

    padding: 24px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



/* Icon Styles */

.content-block-icon-wrapper {

    margin-bottom: 16px;

}



.content-block-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

}



.content-block-icon i,

.content-block-icon svg {

    transition: all 0.3s ease;

}



/* Smart SVG Icon Coloring - Handle All SVG Structures */



/* Default: inherit current color for all icons */

.content-block-icon {

    color: inherit;

}



/* For inline SVG icons - smart approach */

.content-block-icon svg {

    color: currentColor;

}



/* Handle SVGs with stroke defined on root element (like heart.svg) */

.content-block-icon svg[stroke] {

    stroke: currentColor !important;

}



.content-block-icon svg[fill="none"] {

    fill: none !important;

}



/* Handle SVGs with stroke defined on root and paths inherit it */

.content-block-icon svg[stroke] path:not([stroke]):not([fill]) {

    stroke: inherit !important;

    fill: none !important;

}



/* Only apply fill to paths that originally have fill (not outline icons) */

.content-block-icon svg path[fill]:not([fill="none"]):not([fill=""]) {

    fill: currentColor !important;

}



/* For stroke-based (outline) icons - apply color to stroke only */

.content-block-icon svg path[stroke],

.content-block-icon svg path[fill="none"] {

    stroke: currentColor !important;

    fill: none !important;

}



/* Handle paths that inherit stroke from parent SVG */

.content-block-icon svg[stroke][fill="none"] path {

    stroke: currentColor !important;

    fill: none !important;

}



/* For custom uploaded SVG images - use filter method */

.content-block-icon img {

    filter: brightness(0) saturate(100%) !important;

}



/* Fallback for FontAwesome and other icon fonts */

.content-block-icon i {

    color: currentColor !important;

}



/* Font Icon Specific Styles */

.content-block-icon .content-block-font-icon {

    display: inline-block;

    line-height: 1;

}



/* Icon placeholder for preview */

.content-block-icon .content-block-icon-placeholder {

    display: inline-block;

    padding: 4px 8px;

    background: #f0f0f0;

    border: 1px dashed #ccc;

    border-radius: 4px;

    font-size: 0.8em;

    color: #666;

}



.content-block:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

}



.content-block-title {

    font-size: 18px;

    font-weight: 600;

    line-height: 1.4;

    margin: 0 0 16px 0;

    color: #2c3e50;

}



.content-block-main {

    font-size: 16px;

    line-height: 1.6;

    margin: 0 0 12px 0;

    color: #34495e;

    flex-grow: 1;

}



.content-block-secondary {

    font-size: 14px;

    line-height: 1.5;

    margin: 0;

    color: #7f8c8d;

    font-style: italic;

}



/* Slider Layout Styles */

.content-blocks-slider {

    position: relative;

    overflow: hidden;

    width: 100%;

    /* Remove fixed height - let content determine height */

    transition: height 0.3s ease; /* Smooth height transitions */

}



.content-blocks-slides {

    display: flex;

    transition: transform 0.5s ease-in-out;

    width: 100%;

    height: auto;

}



.content-blocks-slider .content-block {

    /* Let JavaScript set the flex and width properties */

    margin-right: 0;

    box-sizing: border-box;

    /* Remove fixed min-height - let content determine height */

    display: flex;

    flex-direction: column;

}



/* Navigation Arrows */

.content-blocks-navigation {

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    transform: translateY(-50%);

    display: flex !important; /* Force display */

    justify-content: space-between;

    pointer-events: none;

    z-index: 10;

    visibility: visible !important; /* Ensure visibility */

}



.content-blocks-nav-arrow {

    background: rgba(255, 255, 255, 0.9) !important;

    border: 1px solid #ddd;

    border-radius: 50%;

    width: 44px;

    height: 44px;

    display: flex !important; /* Force display */

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;

    pointer-events: all !important; /* Ensure clickable */

    font-size: 18px;

    color: #34495e !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    visibility: visible !important; /* Ensure visibility */

    opacity: 1 !important; /* Ensure opacity */

}



.content-blocks-nav-arrow:hover {

    background: #ffffff;

    transform: scale(1.1);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

}



.content-blocks-nav-arrow:active {

    transform: scale(0.95);

}



.content-blocks-nav-arrow.prev-arrow {

    margin-left: 15px;

}



.content-blocks-nav-arrow.next-arrow {

    margin-right: 15px;

}



.content-blocks-nav-arrow:disabled {

    opacity: 0.5;

    cursor: not-allowed;

    pointer-events: none;

}



/* Pagination Dots */

.content-blocks-dots {

    display: flex !important;

    justify-content: center;

    align-items: center;

    margin-top: 20px;

    gap: 8px;

    visibility: visible !important;

    opacity: 1 !important;

    width: 100% !important;

    position: relative !important;

    z-index: 999 !important;

}



.content-blocks-dots .dot {

    width: 12px !important;

    height: 12px !important;

    border-radius: 50% !important;

    background: #bdc3c7 !important;

    border: none !important;

    cursor: pointer !important;

    transition: all 0.3s ease !important;

    padding: 0 !important;

    margin: 0 2px !important;

    display: inline-block !important;

    visibility: visible !important;

    opacity: 1 !important;

    position: relative !important;

    z-index: 9999 !important;

}



.content-blocks-dots .dot:hover {

    background: #95a5a6 !important;

    transform: scale(1.2);

}



.content-blocks-dots .dot.active {

    background: #3498db !important;

    transform: scale(1.3);

}



.content-blocks-dots .dot:focus {

    outline: 2px solid #3498db;

    outline-offset: 2px;

}





/* Responsive Design */

@media (max-width: 1024px) {

    .content-blocks-grid {

        gap: 16px;

    }

    

    .content-block {

        padding: 20px;

    }

    

    .content-block-title {

        font-size: 16px;

        margin-bottom: 12px;

    }

    

    .content-block-main {

        font-size: 15px;

        margin-bottom: 10px;

    }

    

    .content-block-secondary {

        font-size: 13px;

    }

    

    .content-blocks-nav-arrow {

        width: 40px;

        height: 40px;

        font-size: 16px;

    }

}



@media (max-width: 768px) {

    .content-blocks-grid {

        gap: 12px;

    }

    

    .content-block {

        padding: 16px;

    }

    

    .content-block-title {

        font-size: 15px;

        margin-bottom: 10px;

    }

    

    .content-block-main {

        font-size: 14px;

        margin-bottom: 8px;

    }

    

    .content-block-secondary {

        font-size: 12px;

    }

    

    .content-blocks-nav-arrow {

        width: 36px;

        height: 36px;

        font-size: 14px;

    }

    

    .content-blocks-nav-arrow.prev-arrow {

        margin-left: 10px;

    }

    

    .content-blocks-nav-arrow.next-arrow {

        margin-right: 10px;

    }

    

    .content-blocks-dots {

        margin-top: 15px;

        gap: 6px;

    }

    

    .content-blocks-dots .dot {

        width: 10px;

        height: 10px;

    }

}



@media (max-width: 480px) {

    .content-block {

        padding: 12px;

    }

    

    .content-block-title {

        font-size: 14px;

        margin-bottom: 8px;

    }

    

    .content-block-main {

        font-size: 13px;

        margin-bottom: 6px;

    }

    

    .content-block-secondary {

        font-size: 11px;

    }

    

    .content-blocks-nav-arrow {

        width: 32px;

        height: 32px;

        font-size: 12px;

    }

    

    .content-blocks-nav-arrow.prev-arrow {

        margin-left: 5px;

    }

    

    .content-blocks-nav-arrow.next-arrow {

        margin-right: 5px;

    }

    

    .content-blocks-dots {

        margin-top: 12px;

        gap: 4px;

    }

    

    .content-blocks-dots .dot {

        width: 8px;

        height: 8px;

    }

}





.content-blocks-slides.transitioning {

    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.content-blocks-slides:not(.transitioning) {

    transition: none;

}



/* Accessibility Improvements */

.content-blocks-nav-arrow:focus,

.content-blocks-dots .dot:focus {

    outline: 2px solid #3498db;

    outline-offset: 2px;

}



.content-blocks-wrapper[data-reduced-motion="true"] .content-block,

.content-blocks-wrapper[data-reduced-motion="true"] .content-blocks-slides,

.content-blocks-wrapper[data-reduced-motion="true"] .content-blocks-nav-arrow {

    transition: none !important;

    animation: none !important;

}



/* RTL Support */

[dir="rtl"] .content-blocks-nav-arrow.prev-arrow {

    margin-right: 15px;

    margin-left: 0;

}



[dir="rtl"] .content-blocks-nav-arrow.next-arrow {

    margin-left: 15px;

    margin-right: 0;

}



@media (max-width: 768px) {

    [dir="rtl"] .content-blocks-nav-arrow.prev-arrow {

        margin-right: 10px;

        margin-left: 0;

    }

    

    [dir="rtl"] .content-blocks-nav-arrow.next-arrow {

        margin-left: 10px;

        margin-right: 0;

    }

}



@media (max-width: 480px) {

    [dir="rtl"] .content-blocks-nav-arrow.prev-arrow {

        margin-right: 5px;

        margin-left: 0;

    }

    

    [dir="rtl"] .content-blocks-nav-arrow.next-arrow {

        margin-left: 5px;

        margin-right: 0;

    }

}



/* Dark Mode Support */

.content-blocks-wrapper.dark-mode .content-block {

    background: #2c3e50;

    border-color: #34495e;

    color: #ecf0f1;

}



.content-blocks-wrapper.dark-mode .content-block-title {

    color: #ecf0f1;

}



.content-blocks-wrapper.dark-mode .content-block-main {

    color: #bdc3c7;

}



.content-blocks-wrapper.dark-mode .content-block-secondary {

    color: #95a5a6;

}



.content-blocks-wrapper.dark-mode .content-blocks-nav-arrow {

    background: rgba(44, 62, 80, 0.9);

    border-color: #34495e;

    color: #ecf0f1;

}



.content-blocks-wrapper.dark-mode .content-blocks-nav-arrow:hover {

    background: #2c3e50;

}



/* Print Styles */

@media print {

    .content-blocks-wrapper {

        break-inside: avoid;

    }

    

    .content-blocks-slider .content-blocks-slides {

        display: block !important;

    }

    

    .content-blocks-slider .content-block {

        display: block !important;

        break-inside: avoid;

        margin-bottom: 20px;

    }

    

    .content-blocks-navigation,

    .content-blocks-dots {

        display: none !important;

    }

    

    .content-block {

        box-shadow: none !important;

        border: 1px solid #ddd !important;

    }

}