/* Import Quicksand font */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400&display=swap');

/* 16px Regular (h4 title, main category name, offer h5) */
.sidebar-font-16 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
}

/* 14px Regular (Subcategory, Count, offer text) */
.sidebar-font-14 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
}

/* Reset default margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
}

body {
    font-family: 'Quicksand', sans-serif;
}


:root {
    --blue-primary: #0B33EF;
    --yellow-badge: #FFB81C;
    --text-grey: #717182;
    --border-mobile: rgba(255, 255, 255, 0.2);
}

body {
    font-family: 'Quicksand', sans-serif;
}

.header-blue {
    background-color: var(--blue-primary);
    padding: 0;
    /* --- FIX START --- */
    position: sticky;      /* Forces the sticky behavior */
    position: -webkit-sticky; /* Safari support */
    top: 0;                /* Sticks exactly to the top */
    z-index: 1030;         /* High z-index ensures it sits on top of all content */
    /* --- FIX END --- */
}
/* Remove border and shadow on click/focus for Search Input */
.search-input-group .form-control:focus,
.search-input-group .form-control:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Optional: If the icon container also gets a border, fix it here */
.search-input-group .input-group-text {
    border: none !important;
}
/* --- 3. Search Input Styling (Shared) --- */
.search-input-group .form-control {
    font-family: 'Quicksand';
    font-weight: 400;
    font-size: 14px;
    color: var(--text-grey);
    background: #FFFFFF;
    border: none;
    box-shadow: none !important;
    padding-left: 0; /* Icon handles spacing */
}

.search-input-group .input-group-text {
    background: #FFFFFF;
    border: none;
    padding-left: 12px;
    color: #99A1AF; /* Icon color from Figma */
}

/* --- 4. DESKTOP STYLES (min-width: 992px) --- */
@media (min-width: 992px) {
    .header-blue {
        height: 66px;
        display: flex;
        align-items: center;
        padding: 0 16px; /* Figma: padding: 0px 16px */
    }

    .navbar-brand svg {
        width: 76px;
        height: 28px;
    }

    /* Search Bar - Desktop specific */
    .search-desktop {
        width: 672px; /* Exact Figma width */
        height: 36px;
        margin-left: 32px; /* Approximate spacing to clear logo */
    }

    .search-desktop .input-group {
        border-radius: 8px;
        height: 100%;
        border: 2px solid #FFFFFF; /* Figma border */
        overflow: hidden;
    }

    /* Right Side Actions */
    .nav-actions {
        display: flex;
        align-items: center;
        gap: 12px; /* Figma gap */
        margin-left: auto;
    }

    /* Location Link */
    .location-link {
        font-size: 14px;
        color: #FFFFFF !important;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Dealer Login Button */
    .btn-dealer {
        width: 106px;
        height: 32px;
        border: 1px solid #FFFFFF;
        border-radius: 8px;
        color: #FFFFFF;
        font-weight: 500;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    /* Customer Login Button */
    .btn-customer-login {
        width: 60.22px;
        height: 32px;
        background: #FFFFFF;
        border-radius: 8px;
        color: var(--blue-primary);
        font-weight: 500;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- 5. MOBILE STYLES (max-width: 991px) --- */
@media (max-width: 991px) {
    .header-blue {
        /* Auto layout flex column */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0 0 16px 0; /* Bottom padding for search breathing room */
        height: auto; /* Adapts to content */
        min-height: 113px; /* Figma height */
        border-bottom: 1.22px solid var(--border-mobile);
    }

    /* Mobile Top Row Container */
    .mobile-top-row {
        width: 100%;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        position: relative;
    }

    /* Hamburger Icon */
    .navbar-toggler {
        border: none;
        padding: 0;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Logo Centering Trick */
    .mobile-logo-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .mobile-logo-center svg {
        /* Scale logo slightly if needed, using Figma generic dimensions */
        height: 24px; 
        width: auto;
    }

    /* Mobile Search Container */
    .mobile-search-container {
        width: 100%;
        padding: 0 16px;
        margin-top: 0px; 
    }

    .search-mobile .input-group {
        width: 100%;
        height: 36px;
        border-radius: 8px;
        border: 1.22px solid #FFFFFF; /* Specific Figma Border */
        overflow: hidden;
    }
    
    .search-mobile input {
        font-size: 16px; /* Figma: 16px for mobile input */
    }
}

/* --- 6. Language Switcher (Shared) --- */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 2px;
}

.lang-btn {
    height: 28px;
    width: 42px; /* Approx based on Figma */
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
}

.lang-btn.active {
    color: var(--blue-primary);
    font-weight: 600;
}

.lang-btn:not(.active) {
    color: #414141;
    font-weight: 400;
}

/* --- 7. Cart & Badge (Shared) --- */
.cart-link {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.cart-badge {
    position: absolute;
    top: 0px; /* Adjusted to match visual */
    left: 20px; /* Adjusted to match visual */
    background-color: var(--yellow-badge);
    color: #101828;
    font-family: 'Quicksand';
    font-weight: 500;
    font-size: 12px; /* Desktop 12px */
    width: 20px;
    height: 20px;
    border-radius: 4px; /* Figma radius */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@media (max-width: 991px) {
    .cart-badge {
        width: 16px;
        height: 16px;
        font-size: 10px; /* Mobile 10px */
        left: 18px;
    }
}

.features-banner {
    background-color: #f5a623;
    color: #000;
}

.collection-card-img {
    height: 350px;
    object-fit: cover;
}

/* Custom styles to match the image */
.site-footer {
    background-color: #f8f9fa;
    color: #5a5a5a;
}

/* image css */
.card-body {
    background-color: #0B33EF;
}

/* TRENDING COLLECTIONS */
.traeding-collectuions {
    background-color: #0B33EF;
}

/* Style for the link lists */
.footer-links {
    list-style: none;
    padding-left: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    text-decoration: none;
    color: inherit;
}

/* --- PRODUCT IMAGE FIX --- */
.product-img-container {
    height: 300px;
}

.product-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* login page css */
.login-card {
    border-radius: 0;
    background-color: #fff;
    width: 100%;
    max-width: 400px;
}

.input-group-text {
    border-radius: 0;
    box-shadow: none;
    background: white;
}

.form-control {
    border-radius: 0;
    background: white;
}

.btn {
    border-radius: 0;
}

/* Remove blue focus border and shadow */
.form-control:focus,
.input-group:focus-within {
    box-shadow: none !important;
    border-color: #6c757d !important;
}

/* this is cart image size */
.imgp {
    height: 92px;
    width: 92px;
}

/* this css for bill image */
.bimg {
    height: 60px;
    width: 60px;
    object-fit: cover;
}

/* --- NEW CSS FOR MOBILE OFFCANVAS --- */
.offcanvas-header {
    border-bottom: 1px solid #dee2e6;
}

/* Styles for the buttons at the bottom of offcanvas */
.offcanvas-footer .btn-login,
.offcanvas-footer .btn-dealer,
.offcanvas-footer .btn-location {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.65rem 1rem;
    margin-bottom: 0.75rem;
    font-weight: 500;
    border: 1px solid #dee2e6;
    background-color: #fff;
    color: #212529;
    text-decoration: none;
}

.offcanvas-footer .btn-login {
    background-color: #0B33EF;
    color: #fff;
    border-color: #0B33EF;
}

.offcanvas-footer .btn-dealer {
    border: 2px solid #0B33EF;
}

.offcanvas-footer .btn-location {
    border: 2px solid gray;
    text-align: left;
}

.offcanvas-footer i {
    margin-right: 0.5rem;
}

/* Style for the special offer box inside offcanvas */
.offcanvas .special-offer-box {
    background-color: #0B33EF;
    color: white;
}

.offcanvas .special-offer-box .small-title {
    font-weight: 500;
}

/* --- FIXES FOR NAVBAR TOGGLER --- */
.navbar-toggler {
    border: none;
    padding-left: 0;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* Css For Payment */
.payment-option {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.payment-option:hover {
    background-color: #f8f9fa;

}

.payment-option.active {
    background-color: #f8f9fa !important;
    border: 2px solid #0B33EF !important;
   
}

/* css for text area */
.form-control:focus {
    box-shadow: none !important;
    border-color: #000 !important;
}

/* for logpage */
.input-group .form-control:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
}

.input-group:focus-within {
    border-color: #D1D5DC !important;
}

/* Cart badge styling */
.cart-badge {
    background-color: #ffc107;
    color: #000;
    border-radius: 2px !important;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    line-height: 1;
}

/* Adjust position for smaller screens */
@media (max-width: 576px) {
    .cart-badge {
        width: 14px;
        height: 14px;
        top: 2px;
        left: 65%;
    }
}

/* product button */
.btn-clean {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0;
}

.btn-clean:focus,
.btn-clean:active {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

/* --- RESPONSIVENESS FIX --- */
.sidebar {
    background-color: white;
    color: black;
    height: auto;
    position: static;
}

.category-link .bi {
    transition: transform 0.3s ease;
}

.category-link[aria-expanded="true"] .bi {
    transform: rotate(180deg);
}

@media (min-width: 992px) {
    .sidebar {
        height: 100vh;
        position: fixed;
        background-color: #fff;
        padding: 0;
        margin: 0;
    }
}

/* --- SIDEBAR STYLES --- .categories-title {
    color: #0B33EF;
    margin: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    background: #F9FAFB;
}*/


.category-menu {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    border-top: 1px solid #dee2e6;
}

.category-menu li a.category-link {
    color: black;
    text-decoration: none;
    display: block;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.category-menu li.active > a.category-link {
    color: #0B33EF;
}

.category-menu li.active > a.category-link .count {
    color: #0B33EF !important;
}

.category-menu li a.category-link .count {
    color: #6c757d;
}

.sub-menu {
    list-style: none;
    padding: 0.5rem 0.5rem 0.5rem 2.5rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.sub-menu li a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 0.5rem 0;
}

.sub-menu li a:hover {
    color: #0B33EF;
}

/* --- ACCORDION SIDEBAR --- */
.accordion-button {
    box-shadow: none !important;
    background-color: #fff !important;
    padding: 0.75rem 1rem !important;
    border: none;
    border-bottom: 1px solid #dee2e6;
    margin: 0;
    border-radius: 0 !important;
    color: #101828;
    transition: background-color 0.2s ease;
}

.accordion-button span.ms-auto {
    color: #6c757d;
}

.accordion-button:focus {
    box-shadow: none !important;
}

.accordion-button:hover,
.accordion-button:not(.collapsed) {
    background-color: #f8f9fa !important;
    color: #0B33EF !important;
}

.accordion-item {
    border: none;
    border-bottom: 1px solid #dee2e6;
}

.accordion-body {
    padding: 0;
    border-top: 1px solid #dee2e6;
    background-color: #f8f9fa;
}

.accordion-body ul {
    margin: 0;
    padding: 0;
}

.accordion-body ul li a {
    display: block;
    padding: 0.65rem 1rem;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
}

.accordion-body ul li a:hover {
    background-color: #e9ecef;
    color: #0B33EF;
}

/* Special Offer Box.special-offer-box {
    background-color: #1a40ff;
    color: #fff;
    border-radius: 0;
    padding: 1.25rem;
    margin: 0.75rem 1rem 1rem;
    text-align: left;
}

.special-offer-box .small-title {
    opacity: 0.9;
    text-transform: uppercase;
}

.special-offer-box h5 {
    font-weight: 600;
    margin-top: 0.5rem;
}

.special-offer-box p {
    margin: 0;
    opacity: 0.9;
} */


/* Responsive Sidebar */
@media (max-width: 991px) {
    .sidebar {
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }
}

/* Default: no border-radius for large screens */
.order-summary-box {
    border-radius: 0;
}

/* Mobile view (screens below 992px) */
@media (max-width: 991.98px) {
    .order-summary-box {
        border-radius: 10px;
    }
}

.justify-content-between {
    justify-content: space-between !important;
}