/*
Theme Name: Autoparts4business
Theme URI: https://wordpress.org/themes/autoparts4business/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autoparts
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/        
/* Define the custom orange color and other variables */
         :root {
         --autokart-orange: #ee3826;
         --autokart-teal: #20C997;
         --autokart-magenta: #F80088;
         --autokart-gray: #f8f9fa;
         }
         body {
         font-family: 'Inter', sans-serif;
         background-color: #ffffff;
         }
         /* Utility to constrain content width */
         .max-width-container {
         max-width: 1800px;
         margin-left: auto;
         margin-right: auto;
         }
         /* General Custom Orange Text/Hover */
         .text-custom-orange {
         color: var(--autokart-orange) !important;
         }
         .icon-link:hover i, .hover-orange:hover {
         color: var(--autokart-orange) !important;
         }
         /* --- 2. Main Header (Search Bar) Styling --- */
         .autokart-logo {
         font-size: 2.25rem;
         font-weight: 800;
         letter-spacing: -0.025em;
         }
         .search-group-custom {
         border: 2px solid var(--autokart-orange);
         border-radius: 0.5rem;
         height: auto;
         }
         .search-group-custom input,
.search-group-custom select,
.search-group-custom button {
    border: none !important;
    box-shadow: none !important;
    height: 44px;
    line-height: 44px;
    padding: 0.5rem 0.75rem;
}
         .search-group-custom .select-categories {
         line-height: 23px;
         background-color: #ffffff;
         border-right: 1px solid #e9ecef !important;
         appearance: none;
         cursor: pointer;
         width: 180px;
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
         background-repeat: no-repeat;
         background-position: right 0.75rem center;
         background-size: 16px 12px;
         }
         .search-group-custom .form-control {
         padding-left: 1rem;
         flex-grow: 1;
         }
         .search-group-custom .btn-search {
         background-color: var(--autokart-orange);
         color: white;
         font-weight: 600;
         padding-left: 1.5rem;
         padding-right: 1.5rem;
         height: 48px;
         line-height: 23px;
         text-align: center;
         }
         .search-group-custom .btn-search:hover {
         background-color: #d15c1e;
         }
         /* --- 3. Navigation Bar Styling --- */
         .nav-bar-main {
         background-color: var(--autokart-orange);
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         position: relative; 
         }
         /* Category Button */
         .btn-categories {
         background-color: white;
         color: var(--autokart-orange);
         font-weight: 700;
         border: 2px solid var(--autokart-orange);
         height: 56px;
         width: 256px; 
         border-radius: 0;
         transition: background-color 0.2s;
         display: flex;
         align-items: center;
         justify-content: center;
         }
         .btn-categories:hover,.btn-categories:focus {
         background-color: #f8f9fa;
         }
         /* Main Nav Links */
         .nav-link-orange {
         color: white !important;
         font-weight: 500;
         height: 100%;
         display: flex;
         align-items: center;
         padding-top: 0;
         padding-bottom: 0;
         transition: text-shadow 0.2s;
         }
         .nav-link-orange:hover {
         text-shadow: 0 0 5px rgba(0,0,0,0.3); 
         }
         /* Custom Badges */
         .badge-sale { background-color: var(--autokart-teal) !important; }
         .badge-hot { background-color: var(--autokart-magenta) !important; }
         .badge-nav {
         position: absolute;
         top: 2px;
         right: -15px;
         font-size: 0.65rem;
         padding: 0.1rem 0.4rem;
         line-height: 1;
         }
         /* Mega Menu */
         .mega-menu {
         top: 0px !important; 
         left: 0 !important;
         width: 800px;
         padding: 1rem;
         border-radius: 0;
         border-top: 2px solid var(--autokart-orange);
         box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
         }
         .mega-menu .category-list a {
         padding: 0.5rem 0.5rem;
         display: block;
         color: #343a40;
         text-decoration: none;
         font-weight: 500;
         transition: background-color 0.2s;
         border-radius: 0.25rem;
         }
         .mega-menu .category-list a:hover {
         background-color: var(--autokart-gray);
         color: var(--autokart-orange);
         }
         .mega-menu .mega-banner {
         border-radius: 0.5rem;
         overflow: hidden;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
         }
         /* --- 4. Hero Slider Custom Styling --- */
         .carousel-item-custom {
         height: 400px; /* Fixed height for the carousel */
         border-radius: 0.75rem;
         overflow: hidden;
         background-color: #f0f0f0; /* Default background for safety */
         position: relative;
         }
         .carousel-content {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         display: flex;
         align-items: center;
         padding: 2rem 3rem;
         }
         .carousel-item-1 {
         background-image: linear-gradient(to right, rgba(255, 255, 255, 0.373) 35%, rgba(255,255,255,0.0) 75%), 
         url('./image/main-banner-1.jpg');
         background-size: cover;
         background-position: right center;
         }
         .carousel-item-2 {
         background-image: linear-gradient(to right, rgba(255,255,255,0.9) 35%, rgba(255,255,255,0.0) 75%), 
         url('./image/main-banner-2.jpg');
         background-size: cover;
         background-position: center center;
         }
         /* Side Banners */
         .side-banner {
         border-radius: 0.5rem;
         padding: 1.5rem;
         color: white;
         position: relative;
         overflow: hidden;
         transition: transform 0.3s ease-in-out;
         cursor: pointer;
         height: 190px; /* Half of 400px (carousel height) minus gap (10px) */
         }
         .side-banner:hover {
         transform: scale(1.02);
         }
         .side-banner h4 {
         font-weight: 800;
         }
         .banner-1 { 
         background-color: #343a40; 
         background-image: url('./image/sub-banner-1.jpg');
         background-size: cover;
         background-position: center;
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         }
         .banner-2 { 
         background-color: var(--autokart-orange); 
         background-image: url('./image/sub-banner-2.jpg');
         background-size: cover;
         background-position: right bottom;
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         margin-top: 20px; /* Space between banners */
         }
         /* Ensure responsive height on mobile for side banners */
         @media (max-width: 991.98px) {
         .carousel-item-custom {
         height: 300px;
         margin-bottom: 20px;
         }
         .side-banner {
         height: 150px;
         margin-top: 10px;
         }
         .banner-2 {
         margin-top: 10px;
         }
         }
         .text-custom-orange { color: #ff6a00; }
         .owl-nav button {
         background: #000 !important;
         color: #fff !important;
         border-radius: 50% !important;
         width: 35px;
         height: 35px;
         display: flex !important;
         align-items: center;
         justify-content: center;
         font-size: 20px !important;
         }
         .owl-nav { position:absolute; top:40%; width:100%; display:flex; justify-content:space-between; }
         .owl-nav button span { font-size:28px; }
         .tab-pane {
         position: relative;
         width: 100%;
         transition: opacity .2s ease;
         }
         .tab-pane.hidden-tab {
         visibility: hidden;
         opacity: 0;
         position: absolute;
         left: 0;
         top: 0;
         }
         .top-features {
         padding-top: 40px;
         padding-bottom: 40px;
         }
         .feature-item {
         gap: 15px;
         margin-bottom: 25px;
         }
         .feature-icon {
         width: 42px;
         height: 42px;
         object-fit: contain;
         margin-right: 12px;
         }
         .feature-title {
         font-weight: 600;
         margin: 0;
         font-size: 16px;
         }
         .feature-sub {
         margin: 0;
         color: #6c757d;
         font-size: 14px;
         }
         @media (max-width: 767px) {
         .feature-item {
         justify-content: flex-start;
         text-align: left;
         }
         }
         .testimonial-section {
         background: #f8f9fa !important;
         }
         .testimonial-card {
         background: #fff;
         border-radius: 10px;
         box-shadow: 0 3px 10px rgba(0,0,0,0.07);
         min-height: 260px;
         }
         .stars {
         color: #ffb400;
         font-size: 18px;
         margin-bottom: 10px;
         }
         .avatar {
         width: 55px !important;
         height: 55px;
         border-radius: 50%;
         object-fit: cover;
         }
         .deal-week-section .deal-item img {
         max-width: 260px;
         }
         .deal-countdown div {
         text-align: center;
         }
         .deal-countdown span {
         display: block;
         font-size: 22px;
         font-weight: bold;
         }
         .deal-countdown small {
         font-size: 10px;
         color: #777;
         }
         .old-price { text-decoration: line-through; color: #999; margin-right: 5px; }
         .new-price { color: #ff6600; font-size: 20px; font-weight: bold; }
         .product-item img {
         object-fit: cover;
         }
         .rating { font-size: 14px; }
         .footer {
         background: #111;
         color: white !important;
         }
         .footer-title {
         font-weight: 600;
         margin-bottom: 15px;
         color: #fff;
         }
         .footer-links {
         list-style: none;
         padding: 0;
         }
         .footer-links li {
         margin-bottom: 8px;
         }
         .footer-links a {
         color: #bbbbbb;
         text-decoration: none;
         transition: 0.3s;
         }
         .footer-links a:hover {
         color: #ff6f00;
         }
         .footer-social a {
         display: inline-block;
         width: 38px;
         height: 38px;
         line-height: 38px;
         text-align: center;
         border-radius: 50%;
         background: #ee3826 !important;
         margin-right: 10px;
         color: #fff;
         font-size: 15px;
         transition: 0.3s;
         }
         .footer-social a:hover {
         background: #ff6f00;
         color: #fff;
         }
         .footer-newsletter {
         position: relative;
         margin-top: 10px;
         }
         .footer-newsletter input {
         width: 100%;
         padding: 10px 45px 10px 15px;
         border: none;
         border-radius: 4px;
         background: #222;
         color: #fff;
         }
         .footer-newsletter button {
         position: absolute;
         top: 0;
         right: 0;
         width: 45px;
         height: 100%;
         border: none;
         background: #ff6f00;
         color: #fff;
         border-radius: 0 4px 4px 0;
         cursor: pointer;
         }
         .newsletter-section {
         background: #e05f0f; /* orange bg */
         color: #fff;
         }
         .newsletter-icon i {
         font-size: 48px;
         color: #fff;
         }
         .newsletter-title {
         font-size: 24px;
         font-weight: 700;
         }
         .newsletter-subtitle {
         opacity: 0.9;
         font-size: 14px;
         }
         .newsletter-form .email-input {
         height: 48px;
         border-radius: 4px 0 0 4px;
         border: none;
         padding-left: 15px;
         }
         .subscribe-btn {
         background: #f3c3a5;
         color: #6b3c29;
         font-weight: 600;
         border-radius: 0 4px 4px 0;
         padding: 0 25px;
         }
         .subscribe-btn:hover {
         background: #e7b291;
         }
         .terms-check {
         font-size: 14px;
         }
         .terms-check input {
         margin-right: 6px;
         }

/* WRAPPER */
.custom-filter-form {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    position: relative;
}

/* FILTER TOGGLE (Mobile) */
.toggle-filters-label {
    background: #222;
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    display: block;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 15px;
}

.toggle-filters-checkbox {
    display: none;
}

/* Filter Panel Hidden by Default (Mobile) */
.filter-inner {
    display: none;
    animation: fadeIn 0.3s ease;
}

/* Show when toggled */
.toggle-filters-checkbox:checked ~ .filter-inner {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* FILTER GROUPS */
.filter-group {
    margin-bottom: 20px;
}

.filter-group label {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
    color: #333;
}

/* SELECT + INPUT STYLE */
.custom-filter-form select,
.custom-filter-form input[type="number"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: 0.2s ease;
}

.custom-filter-form select:focus,
.custom-filter-form input[type="number"]:focus {
    border-color: #000;
}

/* PRICE RANGE INPUTS */
.price-range {
    display: flex;
    gap: 10px;
}

.price-range input {
    flex: 1;
}

/* CHECKBOX LIST */
.category-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 8px;
    cursor: pointer;
}

.category-list input[type="checkbox"] {
    transform: scale(1.1);
}

/* APPLY FILTER BUTTON */
.filter-btn {
    width: 100%;
    background: #222;
    color: #fff;
    padding: 10px;
    border: none;
    font-weight: 600;
    border-radius: 8px;
    transition: 0.2s;
}

.filter-btn:hover {
    background: #000;
}

/* DESKTOP STYLING */
@media (min-width: 992px) {
	
    .toggle-filters-label { display: none !important; }
    .filter-inner { display: block !important; }

    /* Sticky Sidebar */
    .custom-filter-form {
        position: sticky;
        top: 15px;
    }
}
.custom-field {
    margin-bottom: 25px
}

.custom-field label {
    display: block;
    font-size: 12px;
    color: #777;
    margin-bottom: 8px;
    letter-spacing: 1px
}

.custom-input,.custom-textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    background: 0 0;
    font-size: 14px;
    outline: none
}

.custom-input:focus,.custom-textarea:focus {
    border-bottom: 1px solid #a67c52
}

.custom-textarea {
    height: 50px;
    resize: none
}
.product-info p{
	margin-left:5px;
}
.custom-btn {
    width: 100%;
    background: #f44336;
    color: #fff;
    border: none;
    padding: 15px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 10px;
    transition: .3s
}

.custom-btn:hover {
    background: black;
}