/* Elementor Specific Styles for Event Countdown Timer */

/* Elementor Editor Styles */
.elementor-editor-active .ect-countdown-container {
    position: relative;
}

.elementor-editor-active .ect-countdown-container::after {
    content: "Bộ Đếm Thời Gian Sự Kiện";
    position: absolute;
    top: -25px;
    left: 0;
    font-size: 11px;
    color: #9b9b9b;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 500;
    z-index: 10;
}

/* Widget Container Adjustments for Elementor */
.elementor-widget-ect-countdown .elementor-widget-container {
    overflow: visible;
}

/* Elementor Column Compatibility */
.elementor-column .ect-countdown-container {
    margin-left: 0;
    margin-right: 0;
}

/* Full Width Section Compatibility */
.elementor-section-stretched .ect-countdown-container {
    max-width: none;
}

/* Inner Section Compatibility */
.elementor-inner-section .ect-countdown-container {
    width: 100%;
}

/* Responsive Columns in Elementor */
@media (max-width: 1024px) {
    .elementor-col-50 .ect-countdown-container,
    .elementor-col-33 .ect-countdown-container,
    .elementor-col-25 .ect-countdown-container {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .elementor-col-50 .ect-countdown-display,
    .elementor-col-50 .ect-event-info,
    .elementor-col-33 .ect-countdown-display,
    .elementor-col-33 .ect-event-info,
    .elementor-col-25 .ect-countdown-display,
    .elementor-col-25 .ect-event-info {
        text-align: center;
        width: 100%;
    }
    
    .elementor-col-50 .ect-event-separator,
    .elementor-col-33 .ect-event-separator,
    .elementor-col-25 .ect-event-separator {
        transform: rotate(90deg);
    }
}

/* Elementor Background Overlay Compatibility */
.elementor-background-overlay + .elementor-container .ect-countdown-container {
    position: relative;
    z-index: 2;
}

/* Elementor Motion Effects */
.elementor-motion-effects-element .ect-countdown-container {
    will-change: transform;
}

/* Dark Mode Support for Elementor */
.elementor-preview-mode[data-elementor-device-mode="desktop"] .ect-countdown-container,
.elementor-preview-mode[data-elementor-device-mode="tablet"] .ect-countdown-container,
.elementor-preview-mode[data-elementor-device-mode="mobile"] .ect-countdown-container {
    transition: all 0.3s ease;
}

/* Elementor Editor Preview Mode */
.elementor-editor-preview .ect-countdown-container {
    pointer-events: none;
}

/* Widget Spacing in Elementor */
.elementor-widget-ect-countdown + .elementor-widget-ect-countdown .ect-countdown-container {
    margin-top: 20px;
}

/* Elementor Container Widget Support */
.e-container .ect-countdown-container {
    width: 100%;
}

/* Flexbox Container Support */
.e-con .ect-countdown-container {
    align-self: stretch;
}

/* Grid Container Support */
.e-grid .ect-countdown-container {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Custom Breakpoints Support */
@media (max-width: 1366px) {
    .elementor-kit-6 .ect-countdown-container {
        /* Large desktop adjustments */
    }
}

@media (max-width: 1025px) {
    .elementor-kit-6 .ect-countdown-container {
        /* Tablet adjustments */
    }
}

@media (max-width: 767px) {
    .elementor-kit-6 .ect-countdown-container {
        /* Mobile adjustments */
    }
}

/* RTL Support */
.rtl .ect-countdown-container {
    direction: rtl;
}

.rtl .ect-countdown-display {
    text-align: right;
}

.rtl .ect-event-info {
    text-align: left;
}

/* Elementor Pro Popup Compatibility */
.elementor-popup-modal .ect-countdown-container {
    max-width: 100%;
    margin: 10px 0;
}

/* Theme Builder Compatibility */
.elementor-location-header .ect-countdown-container,
.elementor-location-footer .ect-countdown-container {
    background: rgba(248, 248, 248, 0.95);
    backdrop-filter: blur(10px);
}

/* Loop Builder Compatibility */
.elementor-loop-item .ect-countdown-container {
    height: auto;
    min-height: 80px;
}

/* Animation Classes for Elementor */
.ect-countdown-container.elementor-animation-fadeIn {
    animation-duration: 0.8s;
}

.ect-countdown-container.elementor-animation-slideInUp {
    animation-duration: 0.6s;
}

.ect-countdown-container.elementor-animation-zoomIn {
    animation-duration: 0.5s;
}

/* Custom Elementor Styling Hooks */
.ect-countdown-container[data-element_type="widget"] {
    /* Widget specific styling */
}

.ect-countdown-container.elementor-element {
    /* Element specific styling */
}

/* Elementor Global Colors Support */
.ect-countdown-container {
    --e-global-color-primary: #6ec1e4;
    --e-global-color-secondary: #54595f;
    --e-global-color-text: #7a7a7a;
    --e-global-color-accent: #61ce70;
}

/* Elementor Global Fonts Support */
.ect-countdown-container {
    --e-global-typography-primary-font-family: "Roboto";
    --e-global-typography-secondary-font-family: "Roboto Slab";
    --e-global-typography-text-font-family: "Roboto";
    --e-global-typography-accent-font-family: "Roboto";
}