/* ============================================
   LUXURY MENU - style.css
   ============================================ */

.luxury-menu-wrapper-c22fcd {
    position: relative;
    z-index: 9999;
}

/* ══════════════════════════════════════════
   HAMBURGER TRIGGER
   Ultra-high specificity to override Elementor
   global button styles AND Hello theme styles
   ══════════════════════════════════════════ */

/* Base reset — beats theme's: button {} */
body button.luxury-menu-trigger-c22fcd,
body .luxury-menu-wrapper-c22fcd button.luxury-menu-trigger-c22fcd,
html body .elementor-widget-container button.luxury-menu-trigger-c22fcd {
    background:       transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border:           none !important;
    border-radius:    0 !important;        /* kills the pill shape */
    box-shadow:       none !important;
    outline:          none !important;
    padding:          10px !important;
    margin:           0 !important;
    cursor:           pointer !important;
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    transition:       transform 0.3s ease !important;
    /* animation kept as non-!important so Elementor doesn't fight it */
    width:            auto !important;
    height:           auto !important;
    min-width:        0 !important;
    min-height:       0 !important;
    line-height:      1 !important;
    text-align:       center !important;
}

/* Hover / focus / active — all states must be explicitly reset */
body button.luxury-menu-trigger-c22fcd:hover,
body button.luxury-menu-trigger-c22fcd:focus,
body button.luxury-menu-trigger-c22fcd:active,
body button.luxury-menu-trigger-c22fcd:focus-visible,
html body .elementor-widget-container button.luxury-menu-trigger-c22fcd:hover,
html body .elementor-widget-container button.luxury-menu-trigger-c22fcd:focus,
html body .elementor-widget-container button.luxury-menu-trigger-c22fcd:active {
    background:       transparent !important;
    background-color: transparent !important;
    border:           none !important;
    border-radius:    0 !important;
    box-shadow:       none !important;
    outline:          none !important;
    transform:        scale(1.05) !important;
}

/* Icon colour — driven by Elementor control */
body button.luxury-menu-trigger-c22fcd i,
body button.luxury-menu-trigger-c22fcd svg {
    pointer-events: none;
}

/* animation on trigger */
.luxury-menu-trigger-c22fcd {
    animation: slideInFromLeft 0.5s ease-out forwards;
}

/* ══════════════════════════════════════════
   OVERLAY
   ══════════════════════════════════════════ */
.luxury-menu-overlay-c22fcd {
    position:         fixed;
    top:              0;
    left:             0;
    width:            100vw;
    height:           100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity:          0;
    visibility:       hidden;
    transition:       opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                      visibility 0.6s;
    z-index:          9998;
}

/* ══════════════════════════════════════════
   SLIDE-IN PANEL
   ══════════════════════════════════════════ */
.luxury-menu-panel-c22fcd {
    position:         fixed;
    top:              0;
    left:             0;
    height:           100vh;
    background-color: #ffffff;
    border-right:     1px solid #e0ddd8;
    box-shadow:       2px 0 15px rgba(0, 0, 0, 0.08);
    transform:        translateX(-100%);
    transition:       transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index:          9999;
    display:          flex;
    flex-direction:   column;
    padding:          60px 40px;
    box-sizing:       border-box;
    overflow-y:       auto;
}

/* ── Open state ── */
body.luxury-menu-open-c22fcd {
    overflow: hidden;
}
.luxury-menu-wrapper-c22fcd.is-open .luxury-menu-overlay-c22fcd {
    opacity:    1;
    visibility: visible;
}
.luxury-menu-wrapper-c22fcd.is-open .luxury-menu-panel-c22fcd {
    transform: translateX(0);
}

/* ══════════════════════════════════════════
   CLOSE BUTTON
   Same aggressive reset as trigger
   ══════════════════════════════════════════ */
body button.luxury-menu-close-c22fcd,
html body .luxury-menu-panel-c22fcd button.luxury-menu-close-c22fcd {
    position:         absolute !important;
    top:              20px !important;
    right:            20px !important;
    background:       transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border:           none !important;
    border-radius:    0 !important;
    box-shadow:       none !important;
    outline:          none !important;
    cursor:           pointer !important;
    padding:          10px !important;
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    transition:       transform 0.3s ease !important;
    z-index:          10000 !important;
    width:            auto !important;
    height:           auto !important;
    min-width:        0 !important;
    min-height:       0 !important;
    line-height:      1 !important;
}
body button.luxury-menu-close-c22fcd:hover,
body button.luxury-menu-close-c22fcd:focus,
body button.luxury-menu-close-c22fcd:active,
html body .luxury-menu-panel-c22fcd button.luxury-menu-close-c22fcd:hover {
    background:       transparent !important;
    background-color: transparent !important;
    border:           none !important;
    border-radius:    0 !important;
    box-shadow:       none !important;
    transform:        rotate(90deg) !important;
}

/* ══════════════════════════════════════════
   CONTENT LAYOUT
   ══════════════════════════════════════════ */
.luxury-menu-content-c22fcd {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    height:          100%;
}

/* ══════════════════════════════════════════
   NAV ITEMS
   ══════════════════════════════════════════ */
.luxury-menu-items-c22fcd {
    list-style: none;
    padding:    0;
    margin:     40px 0 0 0;
    text-align: center;
}
.luxury-menu-item-c22fcd {
    position:      relative;
    margin-bottom: 20px;
}
.luxury-menu-item-c22fcd a {
    text-decoration: none;
    color:           #333;
    transition:      color 0.3s ease;
    display:         inline-block;
}
.luxury-menu-item-c22fcd:not(:last-child)::after {
    content:          '';
    display:          block;
    width:            4px;
    height:           4px;
    background-color: #dcdcdc;
    border-radius:    50%;
    margin:           20px auto 0;
}

/* ══════════════════════════════════════════
   BOTTOM SECTION
   ══════════════════════════════════════════ */
.luxury-menu-bottom-c22fcd {
    margin-top:  40px;
    text-align:  center;
    padding-top: 30px;
    border-top:  1px solid #eaeaea;
    width:       100%;
}

/* "EHTIQ Talks" — styled as a proper menu link */
.luxury-menu-bottom-title-c22fcd {
    margin-bottom: 20px;
    text-align:    center;
}
.luxury-menu-bottom-title-c22fcd a {
    text-decoration: none;
    color:           #333;
    transition:      color 0.3s ease;
    display:         inline-block;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
}
.luxury-menu-bottom-title-c22fcd a:hover {
    color: #000;
}

/* ══════════════════════════════════════════
   SOCIAL ICONS
   ══════════════════════════════════════════ */
.luxury-menu-socials-c22fcd {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             20px;
    width:           100%;
}
.luxury-menu-socials-c22fcd a {
    text-decoration: none;
    transition:      transform 0.3s ease, opacity 0.3s ease;
    opacity:         0.7;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.luxury-menu-socials-c22fcd a:hover {
    transform: translateY(-2px);
    opacity:   1;
}

/* ══════════════════════════════════════════
   KEYFRAME
   ══════════════════════════════════════════ */
@keyframes slideInFromLeft {
    0%   { transform: translateX(-100%); opacity: 0; }
    100% { transform: translateX(0);     opacity: 1; }
}

/* ══════════════════════════════════════════
   MOBILE  (≤ 767px)
   ══════════════════════════════════════════ */
@media (max-width: 767px) {
    .luxury-menu-panel-c22fcd {
        width:   100% !important;
        padding: 70px 30px 40px !important; /* extra top clearance for close btn */
    }

    /* Close button — explicitly repositioned for mobile */
    body button.luxury-menu-close-c22fcd,
    html body .luxury-menu-panel-c22fcd button.luxury-menu-close-c22fcd {
        top:   16px !important;
        right: 16px !important;
    }

    /* Centre the bottom block */
    .luxury-menu-bottom-c22fcd {
        display:        flex;
        flex-direction: column;
        align-items:    center;
    }
    .luxury-menu-bottom-title-c22fcd,
    .luxury-menu-socials-c22fcd {
        width:           100%;
        justify-content: center;
    }
}