/* RPM Premium Search v1.0.0 - Modernized UI */

/* Modal */
.rpm-search-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;display:none}
.rpm-search-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Container - subtle shadow */
.rpm-search-container{position:relative;width:90%;max-width:1400px;max-height:85vh;margin:5vh auto;background:#fff;border-radius:20px;box-shadow:0 25px 60px -15px rgba(0,0,0,0.3);display:flex;flex-direction:column;overflow:hidden}

/* Header */
.rpm-search-header{padding:24px;border-bottom:1px solid #f0f0f0;background:linear-gradient(180deg,#fff 0%,#fafafa 100%)}

/* SEARCH INPUT - Subtle red glow by default */
.rpm-search-input-wrap{
    display:flex;
    align-items:center;
    gap:14px;
    background:#fff;
    border:2px solid #e8e8e8;
    border-radius:14px;
    padding:14px 18px;
    transition:all 0.3s ease;
    box-shadow:0 0 0 3px rgba(221,51,51,0.08), 0 2px 8px rgba(0,0,0,0.04);
}

.rpm-search-input-wrap:hover{
    border-color:#ddd;
    box-shadow:0 0 0 4px rgba(221,51,51,0.12), 0 4px 12px rgba(0,0,0,0.06);
}

.rpm-search-input-wrap:focus-within{
    border-color:#dd3333;
    box-shadow:0 0 0 4px rgba(221,51,51,0.15), 0 4px 16px rgba(221,51,51,0.1);
}

/* Search icon */
.rpm-search-icon{width:22px!important;height:22px!important;min-width:22px!important;max-width:22px!important;flex-shrink:0;color:#999;transition:color 0.2s}
.rpm-search-input-wrap:focus-within .rpm-search-icon{color:#dd3333}

#rpm-search-input{flex:1;border:none;outline:none;font-size:17px;background:transparent;color:#1a1a1a;font-weight:400}
#rpm-search-input::placeholder{color:#767676;font-weight:400}

/* Close button */
.rpm-search-close{background:#f5f5f5;border:none;padding:8px;cursor:pointer;color:#666;border-radius:8px;transition:all 0.2s}
.rpm-search-close:hover{background:#eee;color:#333}
.rpm-search-close svg{width:18px;height:18px}

/* Body */
.rpm-search-body{display:flex;flex:1;overflow:hidden;min-height:400px}

/* Sidebar */
.rpm-search-sidebar{width:220px;padding:20px;border-right:1px solid #f0f0f0;overflow-y:auto;background:#fafafa}
.rpm-search-section{margin-bottom:24px}
.rpm-search-section h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#666;margin:0 0 12px}

/* Trending tags */
#rpm-popular-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.rpm-trending-tag{
    display:inline-flex;
    align-items:center;
    background:#fff;
    border:1px solid #e5e5e5;
    padding:8px 14px;
    border-radius:25px;
    font-size:13px;
    font-weight:500;
    color:#444;
    cursor:pointer;
    white-space:nowrap;
    font-family:inherit;
    transition:all 0.2s ease;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.rpm-trending-tag:hover{
    background:#dd3333;
    border-color:#dd3333;
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(221,51,51,0.25);
}

/* Results */
.rpm-search-results{flex:1;padding:20px 24px;overflow-y:auto;display:flex;flex-direction:column;background:#fff}
.rpm-results-header{margin-bottom:16px}
.rpm-results-count{font-size:14px;color:#777;margin:0;font-weight:400}
.rpm-results-count strong{color:#1a1a1a;font-weight:600}
.rpm-results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* Product Card - Modern */
.rpm-product-card{
    background:#fff;
    border:1px solid #eee;
    border-radius:12px;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    display:flex;
    flex-direction:column;
    transition:all 0.25s ease;
    box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.rpm-product-card:hover{
    border-color:#dd3333;
    transform:translateY(-4px);
    box-shadow:0 12px 24px rgba(221,51,51,0.12);
}

/* Image */
.rpm-product-image{width:100%;height:180px;background:#f8f8f8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.rpm-product-image img{max-width:90%;max-height:160px;width:auto;height:auto;object-fit:contain;transition:transform 0.3s ease}
.rpm-product-card:hover .rpm-product-image img{transform:scale(1.05)}


/* Product Info */
.rpm-product-info{padding:12px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.rpm-product-title{font-size:13px;font-weight:600;line-height:1.35;color:#1f2937;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rpm-product-brand{font-size:11px;color:#6b7280;font-weight:500;text-transform:uppercase;letter-spacing:0.3px}
.rpm-product-price{font-size:13px;font-weight:700;color:#dd3333}
.rpm-product-price .woocommerce-Price-amount{font-size:13px;font-weight:700;color:#dd3333}
.rpm-product-price del{font-size:11px;color:#9ca3af;font-weight:400}
.rpm-product-price ins{text-decoration:none}
.rpm-product-stock{font-size:11px;font-weight:500;color:#10b981}
.rpm-product-stock.out-of-stock{color:#ef4444}
.rpm-product-stock.backorder{color:#f59e0b}

/* Add to Cart Button */
.rpm-add-to-cart{
    display:flex;align-items:center;justify-content:center;gap:6px;
    margin-top:auto;padding:8px 12px;
    background:#dd3333;color:#fff;
    border:none;border-radius:6px;
    font-size:12px;font-weight:600;font-family:inherit;
    cursor:pointer;transition:all 0.2s ease;
    text-decoration:none;
}
.rpm-add-to-cart:hover{background:#a00000;transform:translateY(-1px);box-shadow:0 2px 8px rgba(221,51,51,0.3)}
.rpm-add-to-cart svg{flex-shrink:0}
.rpm-add-to-cart.added{background:#10b981}
.rpm-add-to-cart.adding{opacity:0.7;pointer-events:none}

/* Footer */
.rpm-results-footer{padding:20px 24px;border-top:1px solid #f0f0f0;background:#fafafa;text-align:center}
.rpm-see-all-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:linear-gradient(135deg,#dd3333 0%,#a00000 100%);
    color:#fff!important;
    padding:14px 36px;
    border-radius:10px;
    font-weight:600;
    font-size:15px;
    text-decoration:none;
    transition:all 0.25s ease;
    box-shadow:0 4px 14px rgba(221,51,51,0.3);
}
.rpm-see-all-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(221,51,51,0.4);
}

/* Keyboard hints */
.rpm-keyboard-hints{display:flex;gap:20px;justify-content:center;padding:14px;border-top:1px solid #f0f0f0;font-size:12px;color:#666;background:#fafafa}
.rpm-keyboard-hints kbd{background:#e8e8e8;padding:3px 8px;border-radius:5px;font-family:inherit;font-weight:500;color:#555}

/* Swipe hint */
.rpm-swipe-hint{display:none}

/* Loading */
.rpm-loading{display:flex;align-items:center;justify-content:center;padding:60px}
.rpm-loading::after{content:'';width:36px;height:36px;border:3px solid #eee;border-top-color:#dd3333;border-radius:50%;animation:ffp-spin 0.8s linear infinite}
@keyframes ffp-spin{to{transform:rotate(360deg)}}

/* ========== MOBILE ========== */
@media (max-width: 768px) {
    .rpm-search-container{width:100%;max-height:100vh;height:100vh;margin:0;border-radius:0}
    .rpm-search-body{flex-direction:column;min-height:0}
    
    /* Header */
    .rpm-search-header{padding:16px}
    
    /* Search input - keep glow on mobile */
    .rpm-search-input-wrap{padding:12px 14px;border-radius:12px}
    
    /* Search icon mobile */
    .rpm-search-icon{width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important}
    
    /* CLOSE BUTTON - Red with white X */
    .rpm-search-close{
        background:#dd3333!important;
        color:#fff!important;
        border-radius:8px!important;
        padding:8px!important;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .rpm-search-close:hover{background:#aa0000!important}
    .rpm-search-close svg{width:16px!important;height:16px!important;stroke:#fff!important}
    
    /* Sidebar */
    .rpm-search-sidebar{width:100%;border-right:none;border-bottom:1px solid #f0f0f0;padding:14px 16px;overflow:visible;background:#fafafa}
    .rpm-search-section{margin-bottom:0}
    .rpm-search-section h4{margin-bottom:10px;font-size:10px}
    
    /* Hide filters */
    #rpm-recent-searches,#rpm-vehicle-filters,#rpm-brand-filters{display:none!important}
    
    /* Trending scroll */
    #rpm-popular-list{flex-wrap:nowrap!important;overflow-x:auto!important;padding-bottom:4px;-webkit-overflow-scrolling:touch;gap:10px}
    .rpm-trending-tag{flex-shrink:0;padding:8px 14px;font-size:13px}
    
    /* Results header */
    .rpm-results-header{margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
    
    /* Swipe hint */
    .rpm-swipe-hint{display:flex!important;align-items:center;gap:4px;font-size:12px;color:#999}
    .rpm-swipe-hint svg{width:16px;height:16px;animation:ffp-swipe 1.5s ease-in-out infinite}
    @keyframes ffp-swipe{0%,100%{transform:translateX(0);opacity:0.5}50%{transform:translateX(4px);opacity:1}}
    
    /* Results */
    .rpm-search-results{padding:14px 16px;flex:1}
    .rpm-results-grid{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:12px!important;padding-bottom:8px;-webkit-overflow-scrolling:touch}
    .rpm-product-card{flex:0 0 46%!important;min-width:46%!important;box-shadow:0 2px 10px rgba(0,0,0,0.06)}
    .rpm-product-image{height:110px!important}
    .rpm-product-image img{max-height:100px!important}
    .rpm-product-info{padding:8px 10px;gap:3px}
    .rpm-product-title{font-size:11px;-webkit-line-clamp:2}
    .rpm-product-price{font-size:12px}
    .rpm-product-price .woocommerce-Price-amount{font-size:12px}
    .rpm-product-stock{font-size:10px}
    .rpm-add-to-cart{padding:6px 10px;font-size:11px}
    
    #rpm-search-input{font-size:16px}
    .rpm-keyboard-hints{display:none}
    .rpm-results-footer{padding:14px 16px}
    .rpm-see-all-btn{width:100%;padding:14px 24px}
}

/* ================================================
   HOMEPAGE SEARCH BAR TRIGGER STYLING
   ================================================ */

/* Make search wrapper clickable */
.search_wrapper,
.mcb-section .mcb-wrap .mcb-item-header_search-inner .search_wrapper,
.mcb-section .mcb-wrap [class*="mcb-item-"] .search_wrapper { 
    cursor: pointer !important; 
    position: relative !important;
}

/* Form wrapper - Red glow effect */
.search_wrapper form,
.search_wrapper form.form-searchform,
.mcb-section .mcb-wrap .mcb-item-header_search-inner .search_wrapper form,
.mcb-section .mcb-wrap .mcb-item-header_search-inner .search_wrapper form.form-searchform,
.mcb-section .mcb-wrap [class*="mcb-item-"] .search_wrapper form { 
    pointer-events: none !important;
    border-radius: 12px !important;
    border: 2px solid #e0e0e0 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(221,51,51,0.08), 0 2px 8px rgba(0,0,0,0.04) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

/* Hover - Red border */
.search_wrapper:hover form,
.search_wrapper:hover form.form-searchform,
.mcb-section .mcb-wrap .mcb-item-header_search-inner .search_wrapper:hover form,
.mcb-section .mcb-wrap .mcb-item-header_search-inner .search_wrapper:hover form.form-searchform,
.mcb-section .mcb-wrap [class*="mcb-item-"] .search_wrapper:hover form {
    border-color: #dd3333 !important;
    box-shadow: 0 0 0 4px rgba(221,51,51,0.15), 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* Input field - no border */
.search_wrapper input.field,
.mcb-section .mcb-wrap .mcb-item-header_search-inner .search_wrapper input.field,
.mcb-section .mcb-wrap .mcb-item-header_search-inner .search_wrapper form input.field,
.mcb-section .mcb-wrap [class*="mcb-item-"] .search_wrapper input.field,
.mcb-section .mcb-wrap [class*="mcb-item-"] .search_wrapper form input.field { 
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    font-size: 15px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.search_wrapper input.field::placeholder {
    color: #888 !important;
}

/* Search icon */
.search_wrapper .icon_search,
.search_wrapper .icon_search i,
.mcb-section .mcb-wrap .mcb-item-header_search-inner .search_wrapper .icon_search,
.mcb-section .mcb-wrap .mcb-item-header_search-inner .search_wrapper .icon_search i {
    color: #999 !important;
    transition: color 0.2s !important;
}

/* Search icon on hover - Red */
.search_wrapper:hover .icon_search,
.search_wrapper:hover .icon_search i,
.mcb-section .mcb-wrap .mcb-item-header_search-inner .search_wrapper:hover .icon_search,
.mcb-section .mcb-wrap .mcb-item-header_search-inner .search_wrapper:hover .icon_search i {
    color: #dd3333 !important;
}

/* Ctrl+K badge - Desktop only */
.search_wrapper::after {
    content: 'Ctrl+K';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    color: #777;
    pointer-events: none;
    z-index: 10;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .search_wrapper::after { 
        display: none !important; 
    }
    
    .search_wrapper form,
    .search_wrapper form.form-searchform,
    .mcb-section .mcb-wrap .mcb-item-header_search-inner .search_wrapper form,
    .mcb-section .mcb-wrap .mcb-item-header_search-inner .search_wrapper form.form-searchform,
    .mcb-section .mcb-wrap [class*="mcb-item-"] .search_wrapper form {
        border-radius: 10px !important;
    }
}



/* ================================================
   CONTACT BAR IN SEARCH FOOTER
   ================================================ */

.rpm-contact-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    font-size: 13px;
}

.rpm-contact-text {
    color: #888;
}

.rpm-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #555 !important;
    text-decoration: none !important;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    background: #f5f5f5;
}

.rpm-contact-link:hover {
    background: #dd3333 !important;
    color: #fff !important;
}

.rpm-contact-link svg {
    flex-shrink: 0;
}

.rpm-phone-link:hover svg,
.rpm-contact-page-link:hover svg {
    stroke: #fff;
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
    .rpm-contact-bar {
        flex-direction: column;
        gap: 10px;
    }
    
    .rpm-contact-text {
        font-size: 12px;
    }
    
    .rpm-contact-link {
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* v5.1 - Moved from JS injection to prevent WP Rocket minification breakage */
.rpm-skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:ffp-shimmer 1.5s infinite}
@keyframes ffp-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.rpm-recent-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#fff;border:1px solid #e5e7eb;border-radius:6px;margin-bottom:6px;cursor:pointer;transition:all 0.15s}
.rpm-recent-item:hover{border-color:#dd3333;background:#fff5f5}
.rpm-recent-remove{background:none;border:none;color:#9ca3af;cursor:pointer;padding:4px;border-radius:4px;line-height:1}
.rpm-recent-remove:hover{color:#dd3333;background:#fee2e2}
.rpm-kbd{display:inline-block;padding:2px 6px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;font-size:11px;font-family:'Poppins',sans-serif;color:#6b7280}
.rpm-nav-hint{display:flex;align-items:center;gap:12px;justify-content:center;padding:8px;background:#f9fafb;border-top:1px solid #e5e7eb;font-size:12px;color:#6b7280}
.rpm-clear-btn{position:absolute;right:50px;background:none;border:none;color:#9ca3af;cursor:pointer;padding:4px;border-radius:4px;display:none}
.rpm-clear-btn.visible{display:block}
.rpm-clear-btn:hover{color:#dd3333;background:#fee2e2}
.search_wrapper{cursor:pointer!important}
.search_wrapper input{cursor:pointer!important}
.rpm-product-card.focused{outline:2px solid #dd3333!important;outline-offset:2px!important}

/* Focus-visible for keyboard accessibility */
.rpm-trending-tag:focus-visible,.rpm-recent-item:focus-visible,.rpm-see-all-btn:focus-visible,.rpm-add-to-cart:focus-visible,.rpm-search-close:focus-visible,.rpm-contact-link:focus-visible,.rpm-clear-btn:focus-visible{outline:2px solid #dd3333;outline-offset:2px}
.rpm-product-card:focus-visible{outline:2px solid #dd3333;outline-offset:2px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .rpm-product-card,.rpm-trending-tag,.rpm-add-to-cart,.rpm-see-all-btn,.rpm-search-input-wrap{transition:none!important}
    .rpm-product-card:hover .rpm-product-image img{transform:none!important}
    .rpm-loading::after{animation:none!important;border-top-color:#dd3333}
    .rpm-skeleton{animation:none!important;background:#f0f0f0}
    .rpm-swipe-hint svg{animation:none!important}
}

/* Mobile: scroll fade indicator for results */
@media (max-width: 768px) {
    .rpm-search-results{position:relative}
    .rpm-search-results::after{content:'';position:absolute;right:0;top:0;bottom:0;width:32px;background:linear-gradient(to left,rgba(255,255,255,0.9),transparent);pointer-events:none;z-index:1}
}
