/* Updated Header Styles - Compact & Semi-Transparent Design */

/* ==================== Top Header - Compact & Simple ==================== */
.top-header,
.header-top,
.topbar {
    background: var(--primary-color, #8b6179) !important;
    color: var(--bg-white, #ffffff) !important;
    padding: 8px 0 !important;
    font-size: 0.85rem !important;
    border: none !important;
    position: relative !important;
    overflow: visible !important;
    min-height: 40px !important;
    height: auto !important;
    width: 100%;
    z-index: 1500 !important;
}

/* Remove complex shimmer effects for simplicity */
.top-header::before,
.header-top::before,
.topbar::before {
    display: none !important;
}

.top-header *,
.header-top *,
.topbar * {
    color: var(--bg-white, #ffffff) !important;
    position: relative;
    z-index: 2;
}

.top-header a,
.header-top a,
.topbar a {
    color: var(--bg-white, #ffffff) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
}

.top-header a:hover,
.header-top a:hover,
.topbar a:hover {
    color: var(--secondary-color, #ffbd59) !important;
    text-decoration: none !important;
}

/* Simplified Contact Info */
.top-header .contact-info,
.header-top .contact-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-header .contact-item,
.header-top .contact-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
}

.top-header .contact-item i,
.header-top .contact-item i {
    color: var(--secondary-color, #ffbd59) !important;
    font-size: 0.9rem;
}

/* Simplified Selectors */
.language-selector,
.currency-selector {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 4px 12px !important;
    color: var(--bg-white, #ffffff) !important;
    font-size: 0.8rem !important;
    transition: all 0.3s ease !important;
    margin: 0 2px !important;
    height: 28px !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    min-width: 120px !important;
    position: relative !important;
}

.language-selector:hover,
.currency-selector:hover {
    background: rgba(255, 189, 89, 0.15) !important;
    border-color: rgba(255, 189, 89, 0.3) !important;
}

.language-selector option,
.currency-selector option {
    background: var(--primary-color, #8b6179) !important;
    color: var(--bg-white, #ffffff) !important;
}

.language-selector select,
.currency-selector select {
    background: transparent !important;
    border: none !important;
    color: var(--bg-white, #ffffff) !important;
    font-size: 0.8rem !important;
    padding: 0 !important;
    height: 20px !important;
    line-height: 1.4 !important;
    width: 100% !important;
    cursor: pointer !important;
}

/* Language/Currency Dropdown Menus */
.language-selector .nice-select,
.currency-selector .nice-select {
    background: transparent !important;
    border: none !important;
    color: var(--bg-white, #ffffff) !important;
    font-size: 0.8rem !important;
    padding: 0 !important;
    height: 20px !important;
    line-height: 1.4 !important;
    width: 100% !important;
    min-width: 110px !important;
}

.language-selector .nice-select .list,
.currency-selector .nice-select .list {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 20px rgba(139, 97, 121, 0.2) !important;
    min-width: 160px !important;
    z-index: 2000 !important;
    margin-top: 2px !important;
}

.language-selector .nice-select .option,
.currency-selector .nice-select .option {
    color: var(--text-dark, #000000) !important;
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid rgba(139, 97, 121, 0.1) !important;
}

.language-selector .nice-select .option:hover,
.currency-selector .nice-select .option:hover {
    background: rgba(139, 97, 121, 0.05) !important;
    color: var(--primary-color, #8b6179) !important;
}

.language-selector .text-dark,
.currency-selector .text-dark {
    color: var(--bg-white, #ffffff) !important;
    font-size: 0.8rem !important;
}

/* Simplified User Links */
.top-links li {
    margin: 0 2px !important;
}

.top-links li a {
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 0.8rem !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    line-height: 1.4 !important;
}

.top-links li a:hover {
    background: rgba(255, 189, 89, 0.15) !important;
    border-color: rgba(255, 189, 89, 0.3) !important;
}

/* My Account Dropdown Specific Styling */
.my-account-dropdown {
    position: relative !important;
    display: inline-block !important;
}

.my-account-dropdown > a {
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 0.8rem !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.my-account-popup {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 20px rgba(139, 97, 121, 0.2) !important;
    min-width: 180px !important;
    z-index: 2500 !important;
    margin-top: 2px !important;
    padding: 0 !important;
    list-style: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
}

.my-account-dropdown:hover .my-account-popup {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.my-account-popup li {
    margin: 0 !important;
    padding: 0 !important;
}

.my-account-popup li a {
    display: block !important;
    padding: 8px 12px !important;
    color: var(--text-dark, #333333) !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(139, 97, 121, 0.1) !important;
    transition: all 0.3s ease !important;
}

.my-account-popup li a .menu-item-text {
    color: var(--text-dark, #333333) !important;
    font-weight: 500 !important;
}

.my-account-popup li a:hover .menu-item-text {
    color: var(--primary-color, #8b6179) !important;
}

.my-account-popup li:last-child a {
    border-bottom: none !important;
    border-radius: 0 0 8px 8px !important;
}

.my-account-popup li:first-child a {
    border-radius: 8px 8px 0 0 !important;
}

.my-account-popup li a:hover {
    background: rgba(139, 97, 121, 0.05) !important;
    color: var(--primary-color, #8b6179) !important;
    transform: translateX(2px) !important;
}

/* ==================== Main Header - Semi-Transparent ==================== */
.main-header,
.header-main,
.main-nav {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 12px 0 !important;
    box-shadow: 0 2px 15px rgba(139, 97, 121, 0.1) !important;
    position: relative !important;
    z-index: 999 !important;
    transition: all 0.3s ease !important;
}

.main-header.scrolled,
.header-main.scrolled,
.main-nav.scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    padding: 8px 0 !important;
    box-shadow: 0 4px 20px rgba(139, 97, 121, 0.15) !important;
}

/* Logo Styling - Enhanced for semi-transparent background */
.navbar-brand,
.logo,
.site-logo {
    font-family: 'Dancing Script', cursive !important;
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    color: var(--primary-color, #8b6179) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    text-shadow: 1px 1px 2px rgba(139, 97, 121, 0.1) !important;
}

.navbar-brand:hover,
.logo:hover,
.site-logo:hover {
    color: var(--primary-dark, #6d4a5e) !important;
    transform: scale(1.03) !important;
    text-shadow: 2px 2px 4px rgba(139, 97, 121, 0.2) !important;
}

.navbar-brand img,
.logo img,
.site-logo img {
    max-height: 80px !important;
    transition: all 0.3s ease !important;
}

.navbar-brand:hover img,
.logo:hover img,
.site-logo:hover img {
    transform: scale(1.03) !important;
}

/* Navigation Menu - Simple with underline hover effect */
.navbar-nav {
    align-items: center !important;
    gap: 8px !important;
}

.navbar-nav .nav-item {
    margin: 0 3px !important;
}

.navbar-nav .nav-link {
    color: var(--text-dark, #000000) !important;
    font-weight: 200 !important;
    font-size: 0.95rem !important;
    padding: 10px 16px !important;
    border-radius: 20px !important;
    transition: color 0.3s ease !important;
    position: relative !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    background: transparent !important;
}

/* Underline effect */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-color, #8b6179);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 80%;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary-color, #8b6179) !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Dropdown Menu - Reduced transparency for better readability */
.dropdown-menu,
.mega-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(139, 97, 121, 0.2) !important;
    margin-top: 8px !important;
    overflow: hidden !important;
    min-width: 220px !important;
}

.dropdown-item,
.mega-menu a {
    color: var(--text-dark, #000000) !important;
    padding: 10px 18px !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
    border-bottom: 1px solid rgba(139, 97, 121, 0.05) !important;
    background: transparent !important;
}

.dropdown-item:hover,
.mega-menu a:hover {
    background: rgba(139, 97, 121, 0.05) !important;
    color: var(--primary-color, #8b6179) !important;
    transform: none !important;
    border-left: none !important;
}

/* Search Bar - Enhanced for transparency */
.search-wrapper,
.search-container,
.header-search,
.product-search-one {
    position: relative !important;
    max-width: 380px !important;
}

.search-wrapper .form-control,
.search-container .form-control,
.header-search .form-control,
.product-search-one .form-control {
    border-radius: 20px !important;
    border: 2px solid rgba(139, 97, 121, 0.2) !important;
    padding: 10px 45px 10px 18px !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(5px) !important;
}

.search-wrapper .form-control:focus,
.search-container .form-control:focus,
.header-search .form-control:focus,
.product-search-one .form-control:focus {
    border-color: var(--primary-color, #8b6179) !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 97, 121, 0.2) !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

.search-wrapper .search-btn,
.search-container .search-btn,
.header-search .search-btn,
.search-submit {
    position: absolute !important;
    right: 3px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(135deg, var(--primary-color, #8b6179), var(--secondary-color, #ffbd59)) !important;
    color: var(--bg-white, #ffffff) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.search-wrapper .search-btn:hover,
.search-container .search-btn:hover,
.header-search .search-btn:hover,
.search-submit:hover {
    transform: translateY(-50%) scale(1.05) !important;
    box-shadow: 0 3px 10px rgba(139, 97, 121, 0.3) !important;
}

/* Header Actions - Enhanced for transparency */
.header-actions,
.navbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.header-actions .action-item,
.navbar-actions .action-item {
    position: relative !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(139, 97, 121, 0.2) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.header-actions .action-item:hover,
.navbar-actions .action-item:hover {
    background: linear-gradient(135deg, var(--primary-color, #8b6179), var(--secondary-color, #ffbd59)) !important;
    color: var(--bg-white, #ffffff) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(139, 97, 121, 0.3) !important;
    border-color: transparent !important;
}

.header-actions .action-item i,
.navbar-actions .action-item i {
    font-size: 1rem !important;
    color: var(--primary-color, #8b6179) !important;
    transition: color 0.3s ease !important;
}

.header-actions .action-item:hover i,
.navbar-actions .action-item:hover i {
    color: var(--bg-white, #ffffff) !important;
}

/* Badge - Simplified */
.header-actions .badge,
.navbar-actions .badge,
.action-item .badge {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    background: var(--secondary-color, #ffbd59) !important;
    color: var(--text-dark, #000000) !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid var(--bg-white, #ffffff) !important;
}

/* Mobile Menu Toggle - Enhanced */
.navbar-toggler,
.mobile-menu-toggle {
    border: none !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(5px) !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    transition: all 0.3s ease !important;
}

.navbar-toggler:hover,
.mobile-menu-toggle:hover {
    background: var(--primary-color, #8b6179) !important;
    transform: scale(1.05) !important;
}

.navbar-toggler span,
.mobile-menu-toggle span,
.navbar-toggler-icon {
    background: var(--primary-color, #8b6179) !important;
    transition: all 0.3s ease !important;
}

.navbar-toggler:hover span,
.mobile-menu-toggle:hover span,
.navbar-toggler:hover .navbar-toggler-icon {
    background: var(--bg-white, #ffffff) !important;
}

/* ==================== Mobile Responsive ==================== */
@media (max-width: 991px) {
    .navbar-collapse {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border-radius: 12px !important;
        margin-top: 12px !important;
        padding: 20px !important;
        box-shadow: 0 8px 25px rgba(139, 97, 121, 0.2) !important;
    }

    .navbar-nav .nav-link {
        padding: 10px 12px !important;
        margin: 3px 0 !important;
        text-align: center !important;
        background: rgba(139, 97, 121, 0.05) !important;
    }

    .header-actions {
        justify-content: center !important;
        margin-top: 15px !important;
    }

    .search-wrapper {
        margin: 12px 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {
    .top-header {
        padding: 4px 0 !important;
        font-size: 0.8rem !important;
        min-height: 30px !important;
    }

    .top-header .contact-info {
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    .top-header .contact-item {
        font-size: 0.75rem !important;
    }

    .navbar-brand {
        font-size: 2rem !important;
    }

    .main-header {
        padding: 8px 0 !important;
    }

    .header-actions .action-item {
        width: 35px !important;
        height: 35px !important;
    }

    .header-actions .badge {
        width: 16px !important;
        height: 16px !important;
        font-size: 0.6rem !important;
    }

    .language-selector,
    .currency-selector {
        padding: 2px 6px !important;
        font-size: 0.75rem !important;
    }

    .top-links li a {
        padding: 2px 6px !important;
        font-size: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .top-header {
        background: var(--primary-color, #8b6179) !important;
        padding: 6px 0 !important;
        min-height: 32px !important;
    }

    .navbar-brand {
        font-size: 1.8rem !important;
    }

    .main-header {
        padding: 6px 0 !important;
    }

    .search-wrapper .form-control {
        padding: 8px 40px 8px 15px !important;
        font-size: 0.85rem !important;
    }

    .search-wrapper .search-btn {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ==================== Specific Enhancements ==================== */
/* Ensure gradient coverage is responsive */
@media (min-width: 1200px) {

    .top-header,
    .header-top {
        background: var(--primary-color, #8b6179) !important;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {

    .top-header,
    .header-top {
        background: var(--primary-color, #8b6179) !important;
    }
}

@media (max-width: 991px) and (min-width: 768px) {

    .top-header,
    .header-top {
        background: var(--primary-color, #8b6179) !important;
    }
}

/* Remove any complex animations for simplicity */
.top-header *,
.header-top * {
    animation: none !important;
}

/* Ensure proper layering with slider */
.header-custom {
    position: relative !important;
    z-index: 1000 !important;
}

.hero-custom,
.home-slider {
    position: relative !important;
    z-index: 1 !important;
}

/* Smooth transition for header transparency changes */
.main-header,
.main-nav {
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease !important;
}

/* Enhanced readability on transparent background */
.navbar-nav .nav-link {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5) !important;
}

.navbar-nav .nav-link:hover {
    text-shadow: none !important;
}