/*
 * Rosen's Product Filter CSS
 * Minimal CSS following CSS-INTEGRATION-PLAN.md hybrid approach
 * Uses Core Framework utility classes + plugin-specific targeting
 */

/* Plugin container for isolation */
.rosens-product-filters {
    /* Container styling handled by Core Framework classes */
}

/* Filter row responsive behavior */
.rosens-filters-row.columns-4 {
    /* Ensure 4-column layout on desktop */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* Mobile responsive override */
@media (max-width: 768px) {
    .rosens-filters-row.column--on-m {
        /* Stack filters vertically on mobile */
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
}

/* Filter group styling */
.rosens-filter-group {
    /* Individual filter styling handled by Core Framework */
    display: flex;
    flex-direction: column;
}

.rosens-filter-group label {
    /* Ensure consistent label spacing */
    margin-bottom: var(--space-2xs);
	display: none;
}

/* Filter select design - pill-shaped per FILTER-DEVELOPMENT.md */
.rosens-filter-select {
    /* Override Core Framework select styling with custom design */
    border: 1px solid #67823A !important;
    border-radius: 26px !important;
    font-family: "Poppins" !important;
    font-size: 16px !important;
    color: #0C192B !important;
    background-color: #ffffff !important;
    padding: 12px 20px !important;
    appearance: none;
    background-image: url('/wp-content/uploads/Up-Arrow-copy-3.svg') !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    min-height: 44px; /* Touch-friendly */
}

.rosens-filter-select:hover {
    border-color: #67823A !important;
    box-shadow: 0 0 0 2px rgba(103, 130, 58, 0.1) !important;
}

.rosens-filter-select:focus,
.rosens-filter-select.rosens-dropdown-open {
    /* Enhanced focus state with design colors */
    border-color: #67823A !important;
    box-shadow: 0 0 0 2px rgba(103, 130, 58, 0.2) !important;
    outline: none !important;
    background-image: url('/wp-content/uploads/Up-Arrow-copy-5.svg') !important;
}

.rosens-filter-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f5f5f5 !important;
    border-color: #ccc !important;
}

/* Clear button positioning */
.rosens-filter-clear-container {
    /* Clear button container */
    display: flex;
    justify-content: flex-start;
}

.rosens-clear-btn {
    /* Clear button uses Core Framework btn classes */
    min-width: 140px;
}

/* Clear button design - matching filter green color */
.rosens-clear-btn {
    /* Override Core Framework secondary button with custom green */
    background-color: #67823A !important;
    color: white !important;
    font-family: "Poppins" !important;
    font-size: 16px !important;
	text-transform: uppercase;
    border-radius: 25px !important;
    padding: 10px 20px !important;
	margin-top: 20px;
}

.rosens-clear-btn:hover {
    background-color: #5a7032 !important;
    border-color: #5a7032 !important;
    transform: translateY(-1px);
}

.rosens-clear-btn:disabled,
.rosens-clear-btn.disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
    background-color: #67823A !important;
}

.rosens-clear-btn:disabled:hover,
.rosens-clear-btn.disabled:hover {
    /* Prevent hover effects on disabled button */
    transform: none !important;
    background-color: #67823A !important;
}

/* Loading states */
.rosens-product-filters.loading .rosens-filter-select {
    pointer-events: none;
    opacity: 0.7;
}

.rosens-product-filters.loading .rosens-clear-btn {
    pointer-events: none;
    opacity: 0.7;
}

/* Filter loading indicator */
.rosens-filter-loading {
    text-align: center;
    padding: var(--space-s);
    background: var(--bg-surface-90);
    border-radius: var(--radius-m);
    margin: var(--space-s) 0;
}

/* Ensure filters don't break on very small screens */
@media (max-width: 480px) {
    .rosens-filter-group {
        margin-bottom: var(--space-xs);
    }
    
    .rosens-filter-select {
        width: 100%;
        min-height: 44px; /* Touch-friendly height */
    }
    
    .rosens-clear-btn {
        width: 100%;
        min-height: 44px;
    }
}

/* No filters state */
.rosens-no-filters {
    /* Styling handled by Core Framework padding and text classes */
}