/* KW Mini Vans & Spare Parts - Brand Colors & Styles */

:root {
    /* Primary Brand Colors - Green */
    --kw-green-primary: #32CD32;      /* Lime Green */
    --kw-green-dark: #228B22;         /* Forest Green */
    --kw-green-light: #90EE90;        /* Light Green */
    
    /* Secondary Brand Colors - Orange */
    --kw-orange-primary: #FF8C00;     /* Dark Orange */
    --kw-orange-light: #FFA500;       /* Orange */
    --kw-orange-dark: #FF6600;        /* Rust Orange */
    
    /* Neutral Colors */
    --kw-dark: #1a1a1a;               /* Dark grey/black */
    --kw-dark-grey: #2d2d2d;
    --kw-light: #ffffff;
    --kw-light-beige: #f5f5dc;        /* Light beige for outlines */
}

/* Logo Styling */
.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.logo img {
    max-height: 50px;
    width: auto;
    height: auto;
    transition: transform 0.3s ease;
}

.logo:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Header Logo */
header .logo img {
    max-height: 50px;
    max-width: 250px;
}

/* Footer Logo */
footer .logo,
footer .footer-logo {
    max-height: 40px;
    max-width: 200px;
    opacity: 0.9;
}

footer .logo:hover,
footer .footer-logo:hover {
    opacity: 1;
}

/* Mobile Logo Adjustments */
@media (max-width: 768px) {
    header .logo img {
        max-height: 40px;
        max-width: 180px;
    }
    
    footer .logo,
    footer .footer-logo {
        max-height: 35px;
        max-width: 150px;
    }
}

/* Primary Buttons - Use Orange */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
a.btn-primary {
    background: linear-gradient(135deg, var(--kw-orange-primary) 0%, var(--kw-orange-dark) 100%);
    border: none;
    color: var(--kw-light);
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background: linear-gradient(135deg, var(--kw-orange-dark) 0%, var(--kw-orange-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4);
}

/* Secondary Buttons - Use Green */
.btn-secondary,
.btn-outline-primary-2 {
    border: 2px solid var(--kw-green-primary);
    color: var(--kw-green-primary);
    background: transparent;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-secondary:hover,
.btn-outline-primary-2:hover {
    background: var(--kw-green-primary);
    color: var(--kw-light);
    transform: translateY(-2px);
}

/* Links & Navigation */
a {
    color: var(--kw-green-primary);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--kw-orange-primary);
}

/* Header Background */
header.header {
    background-color: var(--kw-dark) !important;
}

/* Active Navigation Items */
.menu > li > a:hover,
.menu > li.active > a,
.nav-link.active {
    color: var(--kw-orange-primary) !important;
}

/* Product Labels & Badges */
.product-label {
    background: var(--kw-green-primary);
    color: var(--kw-light);
}

.product-label.label-sale {
    background: var(--kw-orange-primary);
}

/* Price Styling */
.product-price {
    color: var(--kw-green-dark);
    font-weight: 700;
}

/* Stock Indicators */
.stock-indicator.stock-in {
    background: var(--kw-green-primary);
    color: var(--kw-light);
}

.stock-indicator.stock-low {
    background: var(--kw-orange-light);
    color: var(--kw-dark);
}

.stock-indicator.stock-out {
    background: #dc3545;
    color: var(--kw-light);
}

/* Vendor Badge */
.vendor-badge {
    background: rgba(255, 140, 0, 0.2);
    border: 2px solid var(--kw-orange-primary);
    color: var(--kw-orange-primary);
}

/* Hero Section Buttons */
.hero .btn-primary {
    background: linear-gradient(135deg, var(--kw-orange-primary) 0%, var(--kw-orange-dark) 100%);
}

.hero .btn-secondary {
    border-color: var(--kw-light);
    color: var(--kw-light);
}

.hero .btn-secondary:hover {
    background: var(--kw-light);
    color: var(--kw-dark);
}

/* Search Button */
.header-search button.btn-primary,
.header-search .btn-primary {
    background: var(--kw-orange-primary);
    border-color: var(--kw-orange-primary);
}

.header-search button.btn-primary:hover,
.header-search .btn-primary:hover {
    background: var(--kw-orange-dark);
}

/* Footer */
footer.footer {
    background-color: var(--kw-dark) !important;
}

footer .text-primary {
    color: var(--kw-orange-primary) !important;
}

/* Highlight Text */
.highlight {
    color: var(--kw-orange-primary) !important;
}

/* Icon Boxes */
.icon-box-icon {
    color: var(--kw-green-primary);
}

/* Category Blocks */
.cat-block:hover {
    border-color: var(--kw-green-primary);
}

/* Vendor Section Gradient */
.vendor-section {
    background: linear-gradient(135deg, var(--kw-green-dark) 0%, var(--kw-green-primary) 50%, var(--kw-orange-primary) 100%);
}

.feature-icon {
    color: var(--kw-orange-primary);
}

/* Cart & Wishlist Count Badges */
.badge,
.cart-count,
.wishlist-count {
    background: var(--kw-orange-primary);
    color: var(--kw-light);
}

/* Toastr Notifications */
.toast-success {
    background-color: var(--kw-green-primary) !important;
}

.toast-error {
    background-color: var(--kw-orange-dark) !important;
}

/* Form Elements */
.form-control:focus {
    border-color: var(--kw-green-primary);
    box-shadow: 0 0 0 0.2rem rgba(50, 205, 50, 0.25);
}

/* Ratings */
.ratings-val {
    background: var(--kw-orange-primary);
}

/* Deals & Offers */
.deal h2,
.banner-title strong {
    color: var(--kw-orange-primary);
}

/* Tab Navigation */
.nav-pills .nav-link.active {
    background-color: var(--kw-orange-primary);
    border-color: var(--kw-orange-primary);
}

.nav-pills .nav-link:hover {
    color: var(--kw-green-primary);
}

/* Vehicle Search Button */
.vehicle-search button {
    background: var(--kw-orange-primary);
}

.vehicle-search button:hover {
    background: var(--kw-orange-dark);
}

/* Scroll to Top Button */
#scroll-top {
    background-color: var(--kw-green-primary);
    color: var(--kw-light);
}

#scroll-top:hover {
    background-color: var(--kw-green-dark);
}

/* Social Icons */
.social-icon:hover {
    background: var(--kw-orange-primary);
    color: var(--kw-light);
}

/* Loading Spinner */
.spinner {
    border-top-color: var(--kw-orange-primary);
}

/* Quantity Buttons */
.qty-btn.plus {
    background-color: var(--kw-green-primary);
}

.qty-btn.plus:hover {
    background-color: var(--kw-green-dark);
}

.qty-btn.minus {
    background-color: var(--kw-orange-primary);
}

.qty-btn.minus:hover {
    background-color: var(--kw-orange-dark);
}