/**
 * Custom CSS for Elementor Widget
 * Ensures styles are applied correctly
 */

/* Force widget wrapper styles */
.cpm-moodboard-widget-wrapper {
    position: relative;
}

/* Ensure grid styles apply */
.cpm-moodboard-widget-wrapper .cpm-moodboard-grid {
    display: grid !important;
}

/* Button styles override */
.cpm-moodboard-widget-wrapper .button,
.cpm-moodboard-widget-wrapper .button-primary,
.cpm-moodboard-widget-wrapper .cpm-btn-new,
.cpm-moodboard-widget-wrapper a.button,
.cpm-moodboard-widget-wrapper a.button-primary {
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
}

/* Action buttons override */
.cpm-moodboard-widget-wrapper .action-btn {
    transition: all 0.3s ease !important;
}

/* Card styles override */
.cpm-moodboard-widget-wrapper .cpm-moodboard-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.cpm-moodboard-widget-wrapper .cpm-moodboard-card:hover {
    transform: translateY(-5px);
}

/* Section styles for editor */
.cpm-moodboard-widget-wrapper .moodboard-section {
    background: var(--section-bg, #ffffff) !important;
    border-radius: var(--section-radius, 8px) !important;
    padding: var(--section-padding, 20px) !important;
    margin-bottom: var(--section-margin, 20px) !important;
}

/* Tool buttons in editor */
.cpm-moodboard-widget-wrapper .tool-btn {
    background: var(--tool-btn-bg, #f5f5f5) !important;
    color: var(--tool-btn-color, #333) !important;
    border: var(--tool-btn-border, 1px solid #e0e0e0) !important;
    border-radius: var(--tool-btn-radius, 6px) !important;
    padding: var(--tool-btn-padding, 10px 20px) !important;
}

.cpm-moodboard-widget-wrapper .tool-btn:hover {
    background: var(--tool-btn-hover-bg, #e0e0e0) !important;
    color: var(--tool-btn-hover-color, #000) !important;
}

/* Save/Download buttons in editor */
.cpm-moodboard-widget-wrapper .btn-save-moodboard,
.cpm-moodboard-widget-wrapper .btn-download-pdf,
.cpm-moodboard-widget-wrapper .btn-share-moodboard {
    background: var(--action-btn-bg, #FF6A00) !important;
    color: var(--action-btn-color, #ffffff) !important;
    border: var(--action-btn-border, none) !important;
    border-radius: var(--action-btn-radius, 6px) !important;
    padding: var(--action-btn-padding, 12px 24px) !important;
}

.cpm-moodboard-widget-wrapper .btn-save-moodboard:hover,
.cpm-moodboard-widget-wrapper .btn-download-pdf:hover,
.cpm-moodboard-widget-wrapper .btn-share-moodboard:hover {
    background: var(--action-btn-hover-bg, #E55A00) !important;
    transform: translateY(-2px);
}

/* Product boxes */
.cpm-moodboard-widget-wrapper .product-item {
    background: var(--product-bg, #ffffff) !important;
    border: var(--product-border, 1px solid #e0e0e0) !important;
    border-radius: var(--product-radius, 8px) !important;
}

/* Ornament boxes */
.cpm-moodboard-widget-wrapper .ornament-item {
    background: var(--ornament-bg, #ffffff) !important;
    border: var(--ornament-border, 1px solid #e0e0e0) !important;
    border-radius: var(--ornament-radius, 8px) !important;
}