/* Custom Navigation Bar Improvements */

/* Top Red Bar Styling */
.top-navbar {
    background-color: #dc3545 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.top-navbar a {
    color: #ffffff !important;
    transition: opacity 0.3s ease;
}

.top-navbar a:hover {
    opacity: 0.85;
}

.border-white-20 {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Icon Hover Effects */
.nav-user-info:hover {
    background-color: #f8f9fa !important;
}

a[data-toggle="tooltip"]:hover svg,
.dropdown-toggle:hover svg {
    transform: scale(1.05);
}

/* Compare and Wishlist Icons Styling */
.dark-bg-10 {
    background-color: #f8f9fa !important;
    border-radius: 8px;
}

/* Cart Button Styling */
.modern-cart a {
    background-color: #f8f9fa !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.modern-cart a:hover {
    background-color: #e9ecef !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Badge Improvements */
.badge-primary {
    background-color: #dc3545 !important;
    font-weight: 600;
}

.cart-count {
    min-width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Notification Icon */
.unread-notification-count {
    background-color: #dc3545 !important;
    min-width: 18px !important;
}

/* Language and Currency Dropdowns */
.dropdown-toggle {
    font-weight: 600 !important;
    transition: all 0.3s ease;
}

.dropdown-toggle:hover {
    color: #333 !important;
}

/* Header spacing improvements */
.logo-bar-area .d-flex {
    align-items: center;
    gap: 16px;
}

/* User section styling */
.nav-user-info {
    transition: all 0.3s ease !important;
}

.nav-user-info:hover {
    background-color: #f8f9fa !important;
    transform: translateY(-1px);
}

/* Responsive Improvements */
@media (max-width: 991px) {
    .top-navbar {
        padding: 8px 0;
    }
    
    .top-navbar .list-inline-item {
        margin: 0 8px;
    }
}

@media (min-width: 992px) {
    .modern-menu-bar {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
}

/* Animation for badges */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.badge-primary.animate {
    animation: pulse 2s infinite;
}

/* Smooth SVG transitions */
svg {
    transition: all 0.3s ease;
}

a:hover svg path {
    transition: all 0.3s ease;
}

/* Better hover states */
.dropdown-menu {
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: none !important;
}

.dropdown-item:hover {
    background-color: #f8f9fa !important;
}

/* Menu links styling */
.header_menu_links {
    transition: all 0.3s ease;
    position: relative;
}

.header_menu_links:hover {
    color: #dc3545 !important;
}

.header_menu_links.active {
    color: #dc3545 !important;
}

/* Banner (swiper) adjustments: make banner smaller and increase border-radius */
.swiper-slide.overflow-hidden,
.swiper-slide.overflow-hidden a {
    overflow: hidden;
    border-radius: 18px; /* increase this value to get more rounded corners */
}

.swiper-slide.overflow-hidden a img.img-fluid,
.swiper-slide.overflow-hidden img.img-fluid {
    max-height: 750px; /* decreased by 20px */
    width: 100%;
    object-fit: cover; /* crop image to fit nicely */
    border-radius: 20px;
    display: block;
}

@media (max-width: 768px) {
    .swiper-slide.overflow-hidden a img.img-fluid,
    .swiper-slide.overflow-hidden img.img-fluid {
        max-height: 510px;
        border-radius: 16px;
    }
}

/* Stronger override in case other CSS sets heights or radii */
.swiper-container .swiper-wrapper .swiper-slide.overflow-hidden img,
.swiper-container .swiper-wrapper .swiper-slide.overflow-hidden a img,
.swiper-slide.overflow-hidden.swiper-slide-active img {
    max-height: 750px !important;
    height: auto !important;
    border-radius: 20px !important;
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    object-fit: cover !important;
}

@media (max-width: 768px) {
    .swiper-container .swiper-wrapper .swiper-slide.overflow-hidden img {
        max-height: 510px !important;
        border-radius: 16px !important;
    }
}

/* Target carousel-box (used in many swiper slides) and override inline heights */
.carousel-box.overflow-hidden > a,
.carousel-box.overflow-hidden > a[style] {
    height: auto !important;
    max-height: 750px !important;
    display: block !important;
    overflow: hidden !important;
}

/* Images that use different utility classes in templates */
.carousel-box.overflow-hidden img.img-fit,
.carousel-box.overflow-hidden img.h-100,
.carousel-box.overflow-hidden img.img-fluid,
.carousel-box.overflow-hidden a img.img-fit,
.carousel-box.overflow-hidden a img.h-100,
.carousel-box.overflow-hidden a img.img-fluid {
    max-height: 740px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 20px !important;
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    display: block !important;
}

@media (max-width: 768px) {
    .carousel-box.overflow-hidden > a,
    .carousel-box.overflow-hidden img.img-fit,
    .carousel-box.overflow-hidden img.h-100,
    .carousel-box.overflow-hidden img.img-fluid {
        max-height: 510px !important;
        border-radius: 16px !important;
    }
}

/* Ensure hero banner slides are identical */
.hero-banner-slide {
    width: 1110px !important;
    margin-left: 5px !important;
}
.hero-banner-slide > a {
    height: 750px !important;
}
.hero-banner-slide img {
    max-height: 750px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 20px !important;
}