/**
 * PC Builder Pro - Elementor Widget Styles
 * Advanced PC Builder Pro
 */

.apbp-elementor-wrapper {
    position: relative;
}

.apbp-elementor-wrapper .apbp-builder {
    margin: 0;
    padding: 0;
}

/* Ensure selected products are visible in Elementor widget */
.elementor-widget-apbp_pc_builder .apbp-selected-products {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

.elementor-widget-apbp_pc_builder .apbp-selected-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    background: var(--apbp-light, #f5f5f5) !important;
    border-radius: 8px !important;
}

.elementor-widget-apbp_pc_builder .apbp-selected-image {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
    background: #fff !important;
    border-radius: 8px !important;
}

.elementor-widget-apbp_pc_builder .apbp-selected-info {
    flex: 1 !important;
}

.elementor-widget-apbp_pc_builder .apbp-selected-name {
    font-weight: 500 !important;
    margin: 0 0 4px 0 !important;
    font-size: 14px !important;
}

.elementor-widget-apbp_pc_builder .apbp-selected-price {
    color: var(--apbp-primary, #0073aa) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.elementor-widget-apbp_pc_builder .apbp-selected-remove {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--apbp-danger, #dc3545) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
}

/* ===== Modal/Popup Styling for Elementor ===== */

/* Modal Overlay */
.elementor-widget-apbp_pc_builder .apbp-modal-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Modal Content Container */
.elementor-widget-apbp_pc_builder .apbp-modal-content {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

/* Modal Header */
.elementor-widget-apbp_pc_builder .apbp-modal-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #e9ecef !important;
    padding: 20px 24px !important;
}

.elementor-widget-apbp_pc_builder .apbp-modal-title {
    color: #212529 !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.elementor-widget-apbp_pc_builder .apbp-modal-close {
    color: #6c757d !important;
    font-size: 1.5rem !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
}

.elementor-widget-apbp_pc_builder .apbp-modal-close:hover {
    color: #dc3545 !important;
}

/* Modal Body */
.elementor-widget-apbp_pc_builder .apbp-modal-body {
    background-color: #ffffff !important;
    color: #333333 !important;
    padding: 24px !important;
}

/* Search Input in Modal */
.elementor-widget-apbp_pc_builder .apbp-search-input {
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    color: #333333 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
}

.elementor-widget-apbp_pc_builder .apbp-search-input::placeholder {
    color: #6c757d !important;
}

/* Filter Dropdowns in Modal */
.elementor-widget-apbp_pc_builder .apbp-filter select {
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    color: #333333 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
}

/* Product Cards in Modal */
.elementor-widget-apbp_pc_builder .apbp-products-grid {
    background-color: transparent !important;
}

.elementor-widget-apbp_pc_builder .apbp-product-card {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    transition: all 0.2s !important;
}

.elementor-widget-apbp_pc_builder .apbp-product-card:hover {
    border-color: #0073aa !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.elementor-widget-apbp_pc_builder .apbp-product-title {
    color: #212529 !important;
    font-weight: 600 !important;
}

.elementor-widget-apbp_pc_builder .apbp-product-price {
    color: #0073aa !important;
    font-weight: 700 !important;
}

/* Select Button in Product Card */
.elementor-widget-apbp_pc_builder .apbp-product-select {
    background-color: #0073aa !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: background-color 0.2s !important;
}

.elementor-widget-apbp_pc_builder .apbp-product-select:hover {
    background-color: #005a87 !important;
}

/* Skeleton Loading in Modal */
.elementor-widget-apbp_pc_builder .apbp-skeleton-card {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
}

/* ===== Global Modal Styles (works outside widget) ===== */

/* Modal Overlay */
.apbp-modal-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Modal Content Container - Default Light Theme */
.apbp-modal-content {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

/* Modal Header */
.apbp-modal-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #e9ecef !important;
    padding: 20px 24px !important;
}

.apbp-modal-title {
    color: #212529 !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.apbp-modal-close {
    color: #6c757d !important;
    font-size: 1.5rem !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
}

.apbp-modal-close:hover {
    color: #dc3545 !important;
}

/* Modal Body */
.apbp-modal-body {
    background-color: #ffffff !important;
    color: #333333 !important;
    padding: 24px !important;
}

/* Search Input in Modal */
.apbp-search-input {
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    color: #333333 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
}

.apbp-search-input::placeholder {
    color: #6c757d !important;
}

/* Filter Dropdowns in Modal */
.apbp-filter select {
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    color: #333333 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
}

/* Product Cards in Modal */
.apbp-products-grid {
    background-color: transparent !important;
}

.apbp-product-card {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    transition: all 0.2s !important;
}

.apbp-product-card:hover {
    border-color: #0073aa !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.apbp-product-title {
    color: #212529 !important;
    font-weight: 600 !important;
}

.apbp-product-price {
    color: #0073aa !important;
    font-weight: 700 !important;
}

/* Select Button in Product Card - Default */
.apbp-product-select {
    background-color: #0073aa !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: background-color 0.2s !important;
}

.apbp-product-select:hover {
    background-color: #005a87 !important;
}

/* Skeleton Loading in Modal */
.apbp-skeleton-card {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
}

/* ===== Dark Theme Override ===== */

.apbp-builder.apbp-theme-dark .apbp-modal-content {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

.apbp-builder.apbp-theme-dark .apbp-modal-header {
    background-color: #2a2a2a !important;
    border-bottom-color: #444 !important;
}

.apbp-builder.apbp-theme-dark .apbp-modal-title {
    color: #ffffff !important;
}

.apbp-builder.apbp-theme-dark .apbp-modal-close {
    color: #aaa !important;
}

.apbp-builder.apbp-theme-dark .apbp-modal-close:hover {
    color: #fff !important;
}

.apbp-builder.apbp-theme-dark .apbp-modal-body {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

.apbp-builder.apbp-theme-dark .apbp-search-input {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

.apbp-builder.apbp-theme-dark .apbp-search-input::placeholder {
    color: #888 !important;
}

.apbp-builder.apbp-theme-dark .apbp-filter select {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

.apbp-builder.apbp-theme-dark .apbp-product-card {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
}

.apbp-builder.apbp-theme-dark .apbp-product-card:hover {
    border-color: #0073aa !important;
}

.apbp-builder.apbp-theme-dark .apbp-product-title {
    color: #ffffff !important;
}

.apbp-builder.apbp-theme-dark .apbp-skeleton-card {
    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%) !important;
    background-size: 200% 100% !important;
}