/**
 * Theme Color Overrides for Porto Theme
 * Plain CSS file with !important flags to ensure our theme colors are applied
 *
 * Fixes:
 * 1. Category filter buttons - ensure red (#1F2E44) active state, not blue
 * 2. Pagination - ensure red (#1F2E44) current page, not blue
 * 3. Border radius - ensure 0 (square corners), not rounded
 */

/* ========================================
   Category Filter Buttons
   ======================================== */

/* Default state */
.special-products-list .sp-category-btn {
    background: #ffffff !important;
    color: #777 !important;
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
}

/* Hover state - use theme color (dark gray) */
.special-products-list .sp-category-btn:hover {
    background: #f0f0f0 !important;
    color: #222529 !important;
    border-color: #222529 !important;
}

/* Active state - use primary red */
.special-products-list .sp-category-btn.active {
    background: #1F2E44 !important;
    color: #ffffff !important;
    border-color: #1F2E44 !important;
}

/* Focus state */
.special-products-list .sp-category-btn:focus {
    outline: 2px solid #1F2E44 !important;
    outline-offset: 2px !important;
}

/* ========================================
   Pagination
   ======================================== */

/* Default pagination link */
.sp-pagination-item .sp-pagination-link {
    background: #ffffff !important;
    color: #222529 !important;
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
}

/* Hover state - use theme color (dark gray) */
.sp-pagination-item .sp-pagination-link:hover {
    background: #222529 !important;
    color: #ffffff !important;
    border-color: #222529 !important;
}

/* Current/active page - use primary red */
.sp-pagination-item.sp-pagination-current .sp-pagination-link {
    background: #1F2E44 !important;
    color: #ffffff !important;
    border-color: #1F2E44 !important;
    cursor: default !important;
}

/* Dots (ellipsis) - transparent */
.sp-pagination-item.sp-pagination-dots .sp-pagination-link {
    border: none !important;
    background: transparent !important;
}

.sp-pagination-item.sp-pagination-dots .sp-pagination-link:hover {
    background: transparent !important;
    color: #222529 !important;
}

/* ========================================
   Additional Components
   ======================================== */

/* Ensure category dropdown uses theme colors */
.special-products-list .sp-category-filter #sp-category-filter {
    background: #222529 !important;
    border-color: #222529 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}

.special-products-list .sp-category-filter #sp-category-filter:focus {
    outline: 2px solid #1a1d21 !important;
}

/* Category toggle button */
.special-products-list .sp-category-toggle {
    border-radius: 0 !important;
}

.special-products-list .sp-category-toggle:hover {
    background: #222529 !important;
    color: #ffffff !important;
    border-color: #222529 !important;
}

/* ========================================
   Category Controls
   ======================================== */

/* Hide category controls by default - JS will show when overflow detected */
.sp-category-controls {
    display: none !important;
}

/* ========================================
   Quick View Modal - Add to Cart Button
   ======================================== */

/* Override blue gradient with theme primary color */
.sp-quick-view-modal .spv__add-btn {
    background: linear-gradient(135deg, #1F2E44 0%, #2B3F5C 100%) !important;
    box-shadow: 0 4px 12px rgba(31, 46, 68, 0.3) !important;
    height: 48px !important;
}

.sp-quick-view-modal .spv__add-btn:hover {
    box-shadow: 0 6px 16px rgba(31, 46, 68, 0.4) !important;
}

.sp-quick-view-modal .spv__add-btn:active {
    box-shadow: 0 2px 8px rgba(31, 46, 68, 0.3) !important;
}

/* ========================================
   Quantity Buttons
   ======================================== */

/* Override quantity button backgrounds to white */
.sp-quick-view-modal .spv__qty-btn,
#spv-page .spv__qty-btn {
    background: #fff !important;
}

/* ========================================
   Porto Theme Overrides
   ======================================== */

/* Related products section title - remove margin-bottom */
.porto-products.title-border-bottom > .section-title,
.related.products .slider-title {
    margin-bottom: 0 !important;
}

/* Related products slider navigation - add gap */
.products-related .owl-carousel .owl-nav {
    gap: 20px !important;
}