/*
 * Premium Menu Interactions - Alan Perfumes
 * Version: 2.0.0
 * Theme: Gold & Black Luxury
 * Focus: Professional click feedback + Premium styling
 */

/* ===================================
   1. CSS Variables - Brand Colors
   =================================== */

:root {
    --menu-gold: #d4a853;
    --menu-gold-light: #e6c882;
    --menu-gold-dark: #b8942e;
    --menu-black: #111111;
    --menu-dark: #1a1a1a;
    --menu-white: #ffffff;
    --menu-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --menu-transition-fast: 0.15s ease;
}

/* ===================================
   2. Keyframe Animations
   =================================== */

@keyframes ripple-gold {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }

    100% {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(212, 168, 83, 0);
    }

    50% {
        box-shadow: 0 0 12px 2px rgba(212, 168, 83, 0.4);
    }
}

@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ===================================
   3. Menu Toggle Button (Mobile)
   =================================== */

.menu-toggle {
    position: relative;
    overflow: hidden;
    transition: all var(--menu-transition);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

/* Active press effect */
.menu-toggle:active {
    transform: scale(0.92);
}

/* Hamburger bars - gold accent on hover */
.menu-toggle:hover .bar,
.menu-toggle:focus .bar {
    background-color: var(--menu-gold) !important;
}

/* Ripple effect container */
.menu-toggle .ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--menu-gold) 0%, transparent 70%);
    transform: scale(0);
    animation: ripple-gold 0.6s ease-out forwards;
    pointer-events: none;
}

/* Menu text glow on hover */
.menu-toggle .bar-text {
    transition: color var(--menu-transition), text-shadow var(--menu-transition);
}

.menu-toggle:hover .bar-text {
    color: var(--menu-gold) !important;
    text-shadow: 0 0 8px rgba(212, 168, 83, 0.3);
}

/* ===================================
   4. Desktop Navigation Styling
   =================================== */

@media (min-width: 993px) {

    /* Main navigation links */
    .main-navigation a {
        position: relative;
        transition: color var(--menu-transition);
    }

    /* Gold underline slide effect */
    .menu-primary-menu-container>ul>li>a span::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--menu-gold), var(--menu-gold-light));
        transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .menu-primary-menu-container>ul>li>a:hover span::after,
    .menu-primary-menu-container>ul>li.current-menu-item>a span::after {
        width: 100%;
    }

    /* Hover text color */
    .menu-primary-menu-container>ul>li>a:hover {
        color: var(--menu-gold) !important;
    }

    /* Active/Current menu item */
    .menu-primary-menu-container>ul>li.current-menu-item>a {
        color: var(--menu-gold) !important;
    }

    /* Submenu styling */
    .main-navigation .sub-menu-wrapper {
        transition: opacity 0.35s ease,
            transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0.35s;
    }

    .main-navigation li:not(:hover)>.sub-menu-wrapper {
        opacity: 0;
        transform: translateY(-12px);
        pointer-events: none;
    }

    .main-navigation li:hover>.sub-menu-wrapper,
    .main-navigation li:focus-within>.sub-menu-wrapper {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Submenu items hover */
    .main-navigation ul.sub-menu a {
        transition: all var(--menu-transition);
        border-left: 2px solid transparent;
    }

    .main-navigation ul.sub-menu a:hover {
        color: var(--menu-gold) !important;
        border-left-color: var(--menu-gold);
        padding-left: 1.2em !important;
        background: rgba(212, 168, 83, 0.05);
    }
}

/* ===================================
   5. Mobile Navigation Premium Style
   =================================== */

@media (max-width: 992px) {

    /* Mobile drawer - smooth slide */
    .col-full-nav {
        transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.35s ease,
            visibility 0.45s;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.5);
    }

    body:not(.mobile-toggled) .col-full-nav {
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
    }

    body.mobile-toggled .col-full-nav {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

    /* Menu items styling */
    .main-navigation ul>li>a {
        position: relative;
        display: block;
        padding: 14px 18px !important;
        margin: 4px 8px;
        border-radius: 8px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        border-left: 4px solid transparent;
        background: transparent;
    }

    /* Hover/Active state - VERY PROMINENT */
    .main-navigation ul>li>a:hover,
    .main-navigation ul>li>a:active,
    .main-navigation ul>li>a:focus {
        background: linear-gradient(90deg, rgba(212, 168, 83, 0.3), rgba(212, 168, 83, 0.05)) !important;
        border-left-color: var(--menu-gold);
        color: var(--menu-gold) !important;
        padding-left: 24px !important;
        box-shadow:
            0 0 15px rgba(212, 168, 83, 0.2),
            inset 0 0 20px rgba(212, 168, 83, 0.05);
        text-shadow: 0 0 8px rgba(212, 168, 83, 0.3);
    }

    /* Active press effect - VERY VISIBLE */
    .main-navigation ul>li>a:active {
        transform: scale(0.97) translateX(4px);
        background: linear-gradient(90deg, rgba(212, 168, 83, 0.45), rgba(212, 168, 83, 0.1)) !important;
        box-shadow:
            0 0 20px rgba(212, 168, 83, 0.35),
            inset 0 0 30px rgba(212, 168, 83, 0.1);
    }

    /* Current page indicator - GOLD HIGHLIGHT */
    .main-navigation ul>li.current-menu-item>a,
    .main-navigation ul>li.current_page_item>a {
        border-left-color: var(--menu-gold);
        background: linear-gradient(90deg, rgba(212, 168, 83, 0.2), transparent) !important;
        color: var(--menu-gold) !important;
        box-shadow: 0 0 10px rgba(212, 168, 83, 0.15);
    }

    /* Stagger animation for menu items */
    body.mobile-toggled .main-navigation ul>li {
        animation: fade-in-up 0.4s ease forwards;
        opacity: 0;
    }

    body.mobile-toggled .main-navigation ul>li:nth-child(1) {
        animation-delay: 0.05s;
    }

    body.mobile-toggled .main-navigation ul>li:nth-child(2) {
        animation-delay: 0.1s;
    }

    body.mobile-toggled .main-navigation ul>li:nth-child(3) {
        animation-delay: 0.15s;
    }

    body.mobile-toggled .main-navigation ul>li:nth-child(4) {
        animation-delay: 0.2s;
    }

    body.mobile-toggled .main-navigation ul>li:nth-child(5) {
        animation-delay: 0.25s;
    }

    body.mobile-toggled .main-navigation ul>li:nth-child(6) {
        animation-delay: 0.3s;
    }

    body.mobile-toggled .main-navigation ul>li:nth-child(7) {
        animation-delay: 0.35s;
    }

    body.mobile-toggled .main-navigation ul>li:nth-child(n+8) {
        animation-delay: 0.4s;
    }

    /* Submenu items indented */
    .main-navigation .sub-menu a {
        padding-left: 32px !important;
        font-size: 0.95em;
        opacity: 0.9;
    }

    .main-navigation .sub-menu a:hover {
        padding-left: 40px !important;
    }
}

/* ===================================
   6. Mobile Overlay Premium Blur
   =================================== */

@media (max-width: 992px) {
    .mobile-overlay {
        transition: opacity 0.35s ease,
            visibility 0.35s,
            backdrop-filter 0.35s ease;
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }

    body.mobile-toggled .mobile-overlay {
        visibility: visible;
        opacity: 1;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        background: rgba(0, 0, 0, 0.6) !important;
    }

    body:not(.mobile-toggled) .mobile-overlay {
        visibility: hidden;
        opacity: 0;
    }
}

/* ===================================
   7. Loading State - Gold Spinner
   =================================== */

.main-navigation a.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.main-navigation a.loading::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(212, 168, 83, 0.3);
    border-top-color: var(--menu-gold);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* ===================================
   8. Social Links Premium Style
   =================================== */

@media (max-width: 992px) {

    /* "Follow Up" section styling */
    .mobile-extra .heading {
        color: var(--menu-gold) !important;
        font-size: 10px !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        opacity: 0.8 !important;
    }

    /* Social buttons - gold outline style */
    .mobile-extra .widget a,
    .mobile-extra a {
        transition: all var(--menu-transition);
        border-radius: 4px;
        padding: 8px 12px;
    }

    .mobile-extra .widget a:hover,
    .mobile-extra a:hover {
        color: var(--menu-gold) !important;
        background: rgba(212, 168, 83, 0.1);
    }
}

/* ===================================
   9. Cart Icon Enhancement  
   =================================== */

.cart-contents {
    transition: all var(--menu-transition);
}

.cart-contents:hover {
    transform: scale(1.05);
}

.cart-contents:active {
    transform: scale(0.95);
}

/* Cart count badge glow */
.cart-contents .count {
    transition: all var(--menu-transition);
}

.cart-contents:hover .count {
    box-shadow: 0 0 10px rgba(212, 168, 83, 0.4);
}

/* Pulse when updated */
.cart-contents.pulse {
    animation: pulse-glow 0.6s ease;
}

/* ===================================
   10. Close Drawer Button
   =================================== */

.close-drawer {
    transition: all var(--menu-transition);
    opacity: 0.8;
}

.close-drawer:hover {
    opacity: 1;
    transform: rotate(90deg);
    color: var(--menu-gold) !important;
}

.close-drawer:active {
    transform: rotate(90deg) scale(0.9);
}

/* ===================================
   11. Search Box Enhancement
   =================================== */

@media (max-width: 992px) {
    .col-full-nav .site-search input[type="search"] {
        transition: all var(--menu-transition);
        border: 1px solid rgba(212, 168, 83, 0.2) !important;
    }

    .col-full-nav .site-search input[type="search"]:focus {
        border-color: var(--menu-gold) !important;
        box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.1);
    }
}

/* ===================================
   12. Caret/Arrow Premium Style
   =================================== */

@media (max-width: 992px) {
    .main-navigation span.caret {
        transition: all var(--menu-transition);
        border-radius: 4px;
    }

    .main-navigation span.caret:hover {
        background: rgba(212, 168, 83, 0.15);
    }

    .main-navigation span.caret::after {
        transition: background-color var(--menu-transition);
    }

    .main-navigation li.dropdown-open>span.caret::after {
        background-color: var(--menu-gold) !important;
    }
}

/* ===================================
   13. Accessibility - Reduce Motion
   =================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .menu-toggle .ripple {
        display: none;
    }
}

/* ===================================
   14. Touch Highlight Removal
   =================================== */

.main-navigation a,
.menu-toggle,
.cart-contents,
.close-drawer {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}