/**
 * Theme Color Overrides for Porto Theme
 * Plain CSS file with !important flags to ensure our theme colors are applied
 *
 * Theme Palette:
 * - Primary: #1F2E44 (buttons, links, active states)
 * - Primary Hover: #2B3F5C (hover states)
 * - Tertiary: #3A4F6C (lighter variant)
 * - Text: #1e1e1e
 * - Borders: #e0e0e0
 * - Light BG: #f8f8f8, #f5f5f5
 * - Success: #10b981, Error: #ef4444
 */

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

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

/* Hover state - use primary hover */
.special-products-list .sp-category-btn:hover {
    background: #f5f5f5 !important;
    color: #1F2E44 !important;
    border-color: #1F2E44 !important;
}

/* Active state - use primary */
.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: #1e1e1e !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 0 !important;
}

/* Hover state - use primary */
.sp-pagination-item .sp-pagination-link:hover {
    background: #1F2E44 !important;
    color: #ffffff !important;
    border-color: #1F2E44 !important;
}

/* Current/active page - use primary */
.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: #1e1e1e !important;
}

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

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

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

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

.special-products-list .sp-category-toggle:hover {
    background: #1F2E44 !important;
    color: #ffffff !important;
    border-color: #1F2E44 !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
   ======================================== */

/* Use flat primary color instead of gradient */
.sp-quick-view-modal .spv__add-btn {
    background: #1F2E44 !important;
    height: 48px !important;
}

.sp-quick-view-modal .spv__add-btn:hover {
    background: #2B3F5C !important;
}

.sp-quick-view-modal .spv__add-btn:active {
    background: #1F2E44 !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;
}