:root {
    /* Colors from your screenshot */
    --rv-white: #ffffff;
    --rv-black: #000000;
    --rv-chip-bg: #f4f4f5;
    --rv-text-main: #1a1a1a;
    --rv-text-muted: rgba(21, 21, 21, 1);
    --rv-border: #eeeeee;
    
    /* Layout Constants */
    --rv-nav-height: 60px;
    --rv-transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Container - fixed height and width for symmetry */
/* Container - we reduce the width and use a fixed gap for symmetry */
.rv-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 2000;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Aligns lines to the right like your screenshot */
    justify-content: center; /* Centers the group vertically */
    gap: 6px; /* This is the exact spacing between lines when closed */
    height: 24px; 
    width: 24px; /* Square container for perfect rotation */
    box-sizing: content-box;
}

.rv-hamburger .line {
    display: block;
    width: 22px; /* Slightly shorter for a cleaner look */
    height: 2px; /* Matches the visual weight in your screenshot */
    background: #000;
    border-radius: 0; /* Screenshot shows flat ends, not rounded */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.2s ease;
    transform-origin: center;
}

/* THE PERFECT X ALIGNMENT */
.rv-hamburger.active {
    gap: 0; /* Removes the gap so they intersect at the same point */
}

.rv-hamburger.active .line:nth-child(1) {
    /* Since gap is 0, they only need to rotate */
    transform: translateY(2px) rotate(45deg);
}

.rv-hamburger.active .line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.rv-hamburger.active .line:nth-child(3) {
    transform: translateY(-2px) rotate(-45deg);
}

/* 2. Main Overlay */
.rv-menu-overlay {
    position: fixed;
    top: var(--rv-nav-height); /* Starts below your 60px header */
    left: 0;
    width: 100%;
    height: calc(100% - var(--rv-nav-height));
    background: var(--rv-white);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.rv-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rv-menu-inner {
    padding: 10px 20px;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 100px; /* Space for the fixed footer */
}

/* 3. Chips (Horizontal Scroll) */
.rv-chips-wrapper {
    margin: 10px -20px 20px -20px;
    padding: 0 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.rv-chips-wrapper::-webkit-scrollbar { display: none; }

.rv-chips-container {
    display: flex;
    gap: 8px;
    overflow: auto;
    padding: 15px 0px;
}

.rv-chip {
    background: var(--rv-chip-bg);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    color: var(--rv-text-main);
    text-decoration: none;
    white-space: nowrap;
}

/* 4. Accordion Logic */
.rv-nav-parent {
    display: flex;
    justify-content: flex-start;;
    align-items: center;
    padding: 18px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--rv-text-main);
    border-bottom: 1px solid #f9f9f9;
    cursor: pointer;
}

.rv-nav-parent span {
    margin-right: 15px;
}

.rv-nav-parent a { text-decoration: none; color: inherit; }

.chevron {
    transition: var(--rv-transition);
}

.rv-nav-children {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.rv-nav-group.open .rv-nav-children {
    max-height: 600px;
    padding: 10px 0 20px 0;
}

.rv-nav-group.open .chevron { transform: rotate(180deg); }

.rv-nav-children a {
    padding: 12px 0;
    font-size: 14px;
    font-weight: 300;
    color: var(--rv-text-muted);
    text-decoration: none;
}

/* 5. Fixed Footer */
.rv-menu-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--rv-border);
    background: var(--rv-white);
}

.rv-btn-contact {
    border: 1.5px solid var(--rv-black);
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    color: var(--rv-black);
    text-decoration: none;
    font-size: 15px;
}

.rv-lang-selector {
    color: var(--rv-text-muted);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 1. The Container */
.rv-nav-group {
    border-bottom: 1px solid #f9f9f9;
}

/* 2. The Children Wrapper - Using Grid for smooth height */
.rv-nav-children {
    display: grid;
    grid-template-rows: 0fr; /* Starts at 0 height */
    transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

/* 3. The Inner Content - Needed for the Grid trick to work */
.rv-nav-children-inner {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 5px;
    /* We move padding here so it doesn't snap */
    padding-bottom: 0; 
    transition: padding 0.4s ease;
}

/* 4. The Open State */
.rv-nav-group.open .rv-nav-children {
    grid-template-rows: 1fr; /* Animates to the EXACT height of content */
}

.rv-nav-group.open .rv-nav-children-inner {
    padding-top: 10px;
    padding-bottom: 20px;
}

/* 5. Smooth Chevron */
.chevron {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.rv-nav-group.open .chevron {
    transform: rotate(180deg);
}