/* CloudSynQ Event Builder - Elementor Widget Styles */

/* Elementor Widget Wrapper Adjustments */
.elementor-widget-cloudsynq_single_event .csq-single-event-card {
    margin: 0 auto;
}

.elementor-widget-cloudsynq_events_list .csq-events-list {
    margin: 0;
}

/* Elementor Editor Alerts */
.elementor-alert {
    padding: 15px;
    margin: 20px 0;
    border: 1px solid transparent;
    border-radius: 4px;
}

.elementor-alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

.elementor-alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

/* Widget Controls Specific Styles */
.elementor-control-type-select .elementor-control-input-wrapper select {
    width: 100%;
}

/* Preview Mode Adjustments */
.elementor-editor-active .csq-single-event-card:hover {
    transform: none;
}

.elementor-editor-active .csq-event-list-item:hover {
    transform: none;
}

/* Responsive adjustments for Elementor */
@media (max-width: 768px) {
    .elementor-widget-cloudsynq_single_event .csq-single-event-card {
        margin: 0;
    }
    
    .elementor-widget-cloudsynq_events_list .csq-events-list {
        padding: 15px;
    }
}

/* Dark theme support for Elementor editor */
.elementor-editor-dark .csq-single-event-card {
    background: #2a2a2a;
    color: #ffffff;
}

.elementor-editor-dark .csq-events-list {
    background: #2a2a2a;
    color: #ffffff;
}

.elementor-editor-dark .csq-event-title,
.elementor-editor-dark .csq-event-title-small {
    color: #ffffff;
}

.elementor-editor-dark .csq-events-list-title {
    color: #ffffff;
}

/* Alignment and color fixes for Elementor */
.elementor-widget-cloudsynq-single-event .csq-event-meta > div,
.elementor-widget-cloudsynq-events-list .csq-event-meta > div {
    align-items: center !important;
}

.elementor-widget-cloudsynq-single-event .csq-attendees,
.elementor-widget-cloudsynq-events-list .csq-attendees {
    align-items: center !important;
}

/* Force icon styling in Elementor context */
.elementor-widget-cloudsynq-single-event .csq-meta-icon,
.elementor-widget-cloudsynq-single-event .csq-attendees-icon,
.elementor-widget-cloudsynq-events-list .csq-meta-icon,
.elementor-widget-cloudsynq-events-list .csq-attendees-icon {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 16px !important;
    font-size: 14px !important;
    position: relative !important;
    top: -1px !important;
}

/* Remove any default Elementor icon styles that might interfere */
.elementor-widget-cloudsynq-single-event i,
.elementor-widget-cloudsynq-events-list i {
    font-style: normal !important;
}