/*
AlpineTheme Header V2 Styles
Inspired by header.css color variables and new structure.
*/

/* ==========================================================================
   Defaults & Variables (derived from existing header.css)
   ========================================================================== */
   :root {
    --alpine-red: #e0383f;
    --alpine-dark-text: #1B1B1B;
    --alpine-light-bg: #FFFFFF;
    --alpine-light-grey: #F8F9FA;
    --alpine-grey: #adb5bd;
    --alpine-text-main: #212529;
    --alpine-text-secondary: #6c757d;
    --alpine-border-color: #dee2e6;
    --alpine-font-main: 'Atlas AAA', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Spacing units */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Header V2 Specific heights (examples, can be adjusted) */
    --header-v2-top-bar-height: 30px;
    --header-v2-main-bar-height: 70px;
    --header-v2-nav-bar-height: 50px;

    --header-v2-breakpoint: 992px; /* Tablet and below */
    --header-v2-mobile-breakpoint: 767px; /* Mobile specific */
    --header-v2-text-color: #333;
    --header-v2-link-color: #1a1a1a;
    --header-v2-link-hover-color: #e0383f;
    --header-v2-bg-color: #fff;
    --header-v2-border-color: #e9e9e9;
    --header-v2-top-bar-bg: #f8f8f8;
    --header-v2-mobile-panel-bg: #ffffff;
    --header-v2-mobile-panel-width: calc(100% - 80px); /* Panel takes full width minus 80px */
    --toggler-width: 24px;
    --toggler-height: 18px;
    --toggler-bar-height: 2px;
}

.alpine-header-v2 body {
    font-family: var(--alpine-font-main);
    color: var(--alpine-text-main);
    line-height: 1.6;
}

.alpine-header-v2 *,
.alpine-header-v2 *::before,
.alpine-header-v2 *::after {
    box-sizing: border-box;
}

.alpine-header-v2 .container-v2 {
    max-width: 1490px; /* Consistent with old header */
    margin: 0 auto;
    padding: 0 var(--space-md);
    width: 100%;
}

/* Base link styling within header v2 */
.alpine-header-v2 a {
    /* color: var(--alpine-text-main); */
    text-decoration: none;
    transition: all 0.2s ease;
}
 

/* ==========================================================================
   Overall Header Structure
   ========================================================================== */
header.alpine-header-v2 {
    background-color: var(--header-v2-bg-color);
    direction: rtl; /* Assuming RTL */
    position: sticky; /* Or fixed, depending on desired behavior */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1010; /* Higher than default content */
    /* box-shadow: 0 3px 9px -6px rgba(0,0,0,0.16); */
    /* border-bottom: 1px solid var(--header-v2-border-color); */
}

/* ==========================================================================
   1. Top Bar (Social Icons)
   ========================================================================== */
.header-v2-top-bar {
    background-color: var(--header-v2-top-bar-bg);
    min-height: var(--header-v2-top-bar-height);
    display: flex;
    align-items: center;
    font-size: 13px;
    border-bottom: 1px solid var(--header-v2-border-color);
    padding: 0 var(--space-sm); /* Add a little padding to the bar itself */
}

.header-v2-top-bar .top-bar-container { /* Changed from .container-v2 for specificity */
    display: flex;
    justify-content: space-between; /* This will push contact and social to opposite ends */
    align-items: center;
    width: 100%; /* Ensure it takes full width of its parent padding box */
}

.header-v2-contact-icons {
    display: flex;
    align-items: center;
    gap: var(--space-lg); /* Wider gap for contact items */
}

.header-v2-contact-icons a,
.header-v2-contact-icons button {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--header-v2-text-color);
    background: none;
    border: none;
    padding: 0; /* Remove padding if only icon+text */
    cursor: pointer;
    font-size: inherit; /* Inherit from top bar */
}

.header-v2-contact-icons a:hover,
.header-v2-contact-icons button:hover,
.header-v2-contact-icons a:hover span,
.header-v2-contact-icons button:hover span,
.header-v2-contact-icons a:hover i,
.header-v2-contact-icons button:hover i {
    color: var(--header-v2-link-hover-color);
}

.header-v2-contact-icons i {
    font-size: 15px; /* Slightly adjust icon size if needed */
    line-height: 1;
}

.header-v2-social-icons {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.header-v2-social-icons a {
    color: var(--header-v2-text-color);
    font-size: 16px; /* Slightly larger for icon-only */
}

.header-v2-social-icons a:hover {
    color: var(--header-v2-link-hover-color);
}

/* ==========================================================================
   2. Main Bar (Logo, Utility Icons)
   ========================================================================== */
.header-v2-main-bar {
    /* min-height: var(--header-v2-main-bar-height); */
    /* background-color: var(--alpine-light-bg); */
    display: flex;
    align-items: center;
    padding: 5px 0px;
    border-bottom: 1px solid #dee2e673;
    position: sticky;
}

.header-v2-main-bar .container-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-v2-logo a {
    display: table; /* For proper link area */
    line-height: 0; /* Remove extra space around img */
}

.header-v2-logo img {
    max-height: calc(var(--header-v2-main-bar-height) - 20px); /* Adjust based on padding */
    width: auto;
    display: block;
}

.header-v2-utility-icons {
    display: flex;
    align-items: center;
    gap: var(--space-md); /* Adjust gap as needed */
}

.header-v2-utility-icons .utility-icon-item a,
.header-v2-utility-icons .utility-icon-item button {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--header-v2-link-color);
    font-size: 14px;
    background: none;
    border: none;
    padding: var(--space-xs);
    cursor: pointer;
}

.header-v2-utility-icons .utility-icon-item a i,
.header-v2-utility-icons .utility-icon-item button i {
    font-size: 18px; /* Icon size */
    line-height: 1;
}

/* User/Login specific styling if text is present */
.header-v2-utility-icons .utility-icon-item.user-link span {
    font-size: 13px;
}

/* ==========================================================================
   3. Navigation Bar (WordPress Menu)
   ========================================================================== */
.header-v2-nav-bar {
    /* min-height: var(--header-v2-nav-bar-height); */
    /* background-color: var(--alpine-light-bg); */ /* Can be different if desired */
    display: flex;
    align-items: center;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.05); */ /* Optional subtle shadow */
    flex: 1;
}

.header-v2-nav-bar .container-v2 {
    display: flex;
    justify-content: flex-start; /* Align menu to the right (RTL: left) */
}

.navigation-v2 ul,
.navigation-v2 ul li,
.navigation-v2 ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigation-v2 > ul {
    display: flex;
    align-items: center;
    height: var(--header-v2-nav-bar-height);
    justify-content: start;
    width: fit-content;
    position: relative;
}

.navigation-v2 > ul > li {
    /* position: relative; */ /* For mega menu positioning */
    padding: 0 13px;
    display: flex;
    align-items: center;
    height: 100%;
}

.navigation-v2 > ul > li > a {
    font-size: 15px;
    font-weight: 500;
    color: var(--alpine-text-main);
    text-transform: uppercase; /* Optional: for a more distinct look */
    /* letter-spacing: 0.5px; */ /* Optional */
}

.navigation-v2 > ul > li:hover > a,
.navigation-v2 > ul > li.current-menu-item > a,
.navigation-v2 > ul > li.current-menu-ancestor > a {
    color: var(--alpine-red);
}

/* Mega Menu Styles */
.navigation-v2 .mega-menu-v2 {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: -webkit-fill-available;
    margin: auto;
    max-width: 1000px;
    /* transform: translateX(50%); */
    background-color: white;
    border: 1px solid #e0e0e0;
    border-top: none;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    padding: 20px 30px 25px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.navigation-v2 li:hover > .mega-menu-v2 {
    display: table;
    opacity: 1;
    visibility: visible;
}

.mega-menu-v2-columns {
    display: flex;
    gap: 0px;
    width: 100%;
}

.mega-menu-v2-column {
    flex: 1;
    width: -webkit-fill-available;
    direction: rtl;
}

.mega-menu-v2-column h4 {
    font-size: 16px;
    font-weight: 600;
    color: #d32f2f;
    margin-top: 0;
        margin-bottom: 0px;
    text-align: start;
    direction: rtl;
    width: fit-content;
}

.mega-menu-v2-column h4 a {
    color: #d32f2f;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mega-menu-v2-column h4 a:hover {
    color: #b71c1c;
}

.mega-menu-v2-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu-v2-column ul li {
    margin-bottom: 0px;
}

.mega-menu-v2-column ul li a {
    display: block;
    padding: 8px 0 4px;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
    text-align: right;
    font-weight: 700;
}

.mega-menu-v2-column ul li a:hover {
    color: #d32f2f;
}

.mega-menu-v2-column ul li .sub-menu {
    margin-top: 8px;
    /* padding-right: 8px; */
    position: relative;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.mega-menu-v2-column ul li .sub-menu li a {
    font-size: 13px;
    color: #494949;
    padding: 0px 5px;
    display: table;
    margin: 0px -5px;
}

.mega-menu-v2-column ul li .sub-menu li a:hover {
    color: #d32f2f;
    background: #eeeeeeab;
}

.mega-menu-v2-column ~ .mega-menu-v2-column {
    margin-top: 20px;
}

.mega-menu-v2-column ul li a {
    font-weight: 500;
}

.mega-menu-v2-column > ul > li > a {
    color: #d32f2f;
    border-bottom: 1px groove #9f9f9f;
    margin-bottom: 4px;
    width: fit-content;
    padding-bottom: 0px;
    line-height: 1.3;
    padding-bottom: 6px;
}

.mega-menu-v2-column ul ul {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
}

.mega-menu-v2-column ul ul li {
    flex: calc(100% / 2 - 5px);
}

.mega-menu-v2-column {
    border-inline-start: 1px solid #dddddd91;
    padding: 0px 25px;
}

.mega-menu-v2-column:last-of-type {
    /* border: 0; */
    padding-inline-end: 0;
}

.mega-menu-v2-column:first-of-type {
    border-inline-start: 0;
    padding-inline-start: 0;
}

/* Brands and Deals Menu Items */
.menu-item-brands .sub-menu,
.brands-sub-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 15px;
    min-width: 200px;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-item-brands:hover .sub-menu,
.menu-item-brands:hover .brands-sub-menu {
    opacity: 1;
    visibility: visible;
}

/* Brands Mega Menu - Uses standard mega menu structure */



/* ==========================================================================
   Mobile Considerations (Basic Placeholders)
   ========================================================================== */
.header-v2-mobile-toggle {
    display: none; /* Hidden on desktop */
    /* Add styles for mobile toggle button here */
}

/* ==========================================================================
   General Header V2 Structure
   ========================================================================== */
header.alpine-header-v2 {
    background-color: var(--header-v2-bg-color);
    /* border-bottom: 1px solid var(--header-v2-border-color); */
    position: sticky;
    top: 0;
    z-index: 100000; /* High z-index for header */
    direction: rtl; /* Ensure RTL for the entire header */
    background: rgb(255 255 255 / 97%);
    backdrop-filter: blur(20px);
}

.alpine-header-v2:hover {
    z-index: 1000003;
}
.container-v2 {
    width: 100%;
    max-width: 1400px; /* Adjust as per your design */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* ==========================================================================
   Top Bar (Desktop Only)
   ========================================================================== */
.header-v2-top-bar {
    background-color: var(--header-v2-top-bar-bg);
    border-bottom: 1px solid #dee2e673;
    padding: 14px 0;
    font-size: 13px;
    transition: 0.3s all ease;
}

body.is-sticky .header-v2-top-bar {
    transform: translateY(-100%);
    margin-bottom: -48px;
}

.header-v2-top-bar .top-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-v2-contact-icons, 
.header-v2-social-icons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-v2-contact-icons a,
.header-v2-contact-icons button,
.header-v2-social-icons a {
    color: var(--header-v2-text-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s ease;
}

.header-v2-contact-icons a:hover,
.header-v2-contact-icons button:hover,
.header-v2-social-icons a:hover {
    color: var(--header-v2-link-hover-color);
}

.header-v2-contact-icons button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* ==========================================================================
   Main Bar (Logo, Nav, Utility)
   ========================================================================== */
.header-v2-main-bar-inner {
    display: flex;
    align-items: center;
    padding: 15px 0;
    min-height: 50px;
    position: relative; /* For absolute positioning of logo on desktop if needed */
}

/* Mobile Toggler - Positioned first for mobile */
.header-v2-mobile-toggle {
    display: none; /* Hidden on desktop by default */
    order: -1; /* Visual order for flex */
}

.header-v2-mobile-toggle button {
    background: none;
    border: none;
    padding: 10px; /* Make it easier to tap */
    cursor: pointer;
    width: calc(var(--toggler-width) + 20px); /* Button wider than icon for tap area */
    height: calc(var(--toggler-height) + 20px);
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* This will help position bars if using height on button */
    align-items: center; /* Center the bars container */
    position: relative; /* For absolute positioning of bars if preferred */
    z-index: 1041; /* Above panel overlay but below panel itself if part of header */
}

.header-v2-mobile-toggle .toggler-icon {
    display: block;
    width: var(--toggler-width);
    height: var(--toggler-bar-height);
    background-color: var(--header-v2-link-color);
    border-radius: 1px;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
    margin: 2px 0; /* simplified spacing */
}

/* Animated Toggler (when panel is open) */
.header-v2-mobile-toggle button.is-active .top-bar {
    transform: translateY(calc(var(--toggler-height)/2 - var(--toggler-bar-height)/2)) rotate(45deg);
}
.header-v2-mobile-toggle button.is-active .middle-bar {
    opacity: 0;
    transform: translateX(-100%);
}
.header-v2-mobile-toggle button.is-active .bottom-bar {
    transform: translateY(calc(-1 * (var(--toggler-height)/2 - var(--toggler-bar-height)/2))) rotate(-45deg);
}

.header-v2-logo {
    /* order: 2; */ /* Visual order for flex */
    margin-left: auto; /* Push to center/right in LTR desktop */
    margin-right: auto; /* Push to center/left in RTL desktop */
    height: fit-content;
}

html[dir="rtl"] .header-v2-logo {
    margin-left: auto;
    /* margin-right: var(--space-sm); */ /* Space from toggler on mobile */
}
html[dir="ltr"] .header-v2-logo {
    margin-right: auto;
    margin-left: var(--space-sm); /* Space from toggler on mobile */
}

.header-v2-logo img {
    max-height: 45px;
    width: auto;
    display: block; /* Remove extra space below img */
}

.desktop-navigation {
    order: 3; /* Desktop visual order */
    margin: 0 auto; /* Helps centering if space allows */
}

.header-v2-utility-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    order: 4; /* Desktop visual order */
    margin-inline-end: -10px; /* Desktop LTR: push to the right */
    margin-inline-start: 0; /* Desktop RTL: push to the left */
}

.header-v2-utility-icons .utility-icon-item a,
.header-v2-utility-icons .utility-icon-item button {
    color: var(--header-v2-link-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 8px;
    border-radius: 50%;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.header-v2-utility-icons .utility-icon-item a:hover,
.header-v2-utility-icons .utility-icon-item button:hover {
    color: var(--header-v2-link-hover-color);
    /* background-color: #f0f0f0; */
}

.header-v2-utility-icons .utility-icon-item button {
    background: none;
    border: none;
    cursor: pointer;
}

.header-v2-utility-icons .utility-icon-item i {
    font-size: 18px;
}

.header-v2-utility-icons .utility-icon-item span {
    font-size: 13px;
    margin-right: 6px; /* RTL: margin-left */
}

/* ==========================================================================
   Mobile Navigation Panel V2 (Updated for Dual-Focus Personalized Panel)
   ========================================================================== */
.alpine-mobile-nav-panel-v2 {
    position: fixed;
    top: 0;
    right: calc(-1 * var(--header-v2-mobile-panel-width)); /* Start off-screen (RTL) */
    width: var(--header-v2-mobile-panel-width);
    max-width: 400px; /* Max width for larger screens but still mobile context */
    height: 100vh; /* Full viewport height */
    background-color: var(--header-v2-mobile-panel-bg, #ffffff);
    z-index: 9999999; /* Higher than header, potentially above overlay */
    overflow: hidden; /* Prevent any overflow */
    transition: right 0.35s ease-in-out; /* RTL: transition: left */
    box-shadow: -3px 0 15px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column; /* Key for overall layout */
    box-sizing: border-box;
    /* Mobile fixed positioning improvements */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

html[dir="ltr"] .alpine-mobile-nav-panel-v2 {
    left: calc(-1 * var(--header-v2-mobile-panel-width));
    right: auto;
    transition: left 0.35s ease-in-out;
    box-shadow: 3px 0 15px rgba(0,0,0,0.15);
}

.alpine-mobile-nav-panel-v2.is-open {
    right: 0; /* Slide in from right (RTL) */
}
html[dir="ltr"] .alpine-mobile-nav-panel-v2.is-open {
    left: 0;
}

/* Panel Header */
.alpine-mobile-nav-v2-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-sm);
    border-bottom: 1px solid var(--header-v2-border-color);
    min-height: var(--header-v2-main-bar-height); /* Match main bar height */
    background-color: var(--alpine-light-bg); /* Or a slightly different shade */
    /* Improve mobile touch targets */
    min-height: 60px;
}

.alpine-mobile-nav-v2-header .mobile-panel-logo-v2 img {
    max-height: 35px; /* Adjust as needed */
    width: auto;
}

.alpine-mobile-panel-greeting {
    font-size: 18px;
    font-weight: 500;
    color: var(--alpine-text-main);
    margin: 0 var(--space-sm); /* Give it some space */
    text-align: center; /* Or right for RTL */
    flex-grow: 1; /* Allow it to take space */
}

.alpine-mobile-nav-v2-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--alpine-text-secondary);
    cursor: pointer;
    padding: 10px;
    line-height: 1;
    /* Improve mobile touch target */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* Add subtle background for better visibility */
    /* background: rgba(0, 0, 0, 0.05); */
    transition: all 0.3s ease;
}
.alpine-mobile-nav-v2-close:hover {
    color: var(--alpine-red);
    background: rgba(224, 25, 46, 0.1);
    transform: scale(1.1);
}

/* View Toggle */
.alpine-mobile-panel-view-toggle {
    display: flex;
    /* background-color: var(--alpine-light-grey); */ /* Light background for the toggle bar */
    /* padding: var(--space-sm); */
    /* border-bottom: 1px solid var(--header-v2-border-color); */
    padding: 10px 10px 0px;
}

.alpine-mobile-panel-view-toggle .view-toggle-btn {
    flex: 1; /* Equal width */
    padding: var(--space-sm) var(--space-xs);
    background-color: transparent;
    border: none;
    /* border-radius: 25px; */ /* Rounded buttons like new-page.css */
    color: var(--alpine-text-main);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

.alpine-mobile-panel-view-toggle .view-toggle-btn:first-child {
    /* border-top-left-radius: 0; */
    /* border-bottom-left-radius: 0; */
}
html[dir="ltr"] .alpine-mobile-panel-view-toggle .view-toggle-btn:first-child {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.alpine-mobile-panel-view-toggle .view-toggle-btn:last-child {
    /* border-top-right-radius: 0; */
    /* border-bottom-right-radius: 0; */
}
html[dir="ltr"] .alpine-mobile-panel-view-toggle .view-toggle-btn:last-child {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.alpine-mobile-panel-view-toggle .view-toggle-btn.active {
    background-color: var(--alpine-red);
    color: white;
    /* box-shadow: 0 2px 8px rgba(224, 25, 46, 0.3); */
    border-radius: 10px 10px 0px 0px;
}

.alpine-mobile-panel-content-views {
    flex: 1; /* Take remaining space */
    overflow-y: auto; /* Scrollable content */
    display: flex;
    flex-direction: column;
    border-top: 4px solid #e0383f;
}

.alpine-panel-view {
    display: none; /* Hidden by default */
}

.alpine-panel-view.active {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Mobile Search Styling - Updated to match new-page.css */
#alpine-panel-store-view .mobile-header-search-v2 {
    border-radius: 12px;
    margin: 15px 10px 5px;
}

.mobile-header-search-v2 .searchform-v2 > div {
    position: relative;
    display: flex;
    align-items: center;
    background: #efefef;
    border-radius: 5px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    overflow: hidden;
}

.mobile-header-search-v2 input[type="text"] {
    flex: 1;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    background: transparent;
    outline: none;
    color: #333;
    font-weight: 400;
}

.mobile-header-search-v2 input[type="text"]::placeholder {
    color: #999;
    font-weight: 400;
}

.mobile-header-search-v2 button[type="submit"] {
    border-radius: 10px;
    background: #e0192e;
    border: none;
    padding: 12px 8px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    text-align: center;
    align-items: center;
    flex: 0 0 40px;
    min-width: 40px;
}

.mobile-header-search-v2 button[type="submit"]:hover {
    background: #c01729;
}

.mobile-header-search-v2 button[type="submit"] i {
    font-size: 16px;
    text-align: center;
    width: 100%;
}

/* Mobile Menu Navigation */
.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2,
.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 li,
.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 ul li {
    margin: 0;
}

.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 li a,
.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 ul li a {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    color: var(--alpine-text-main);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border-bottom: 1px solid var(--header-v2-border-color);
    transition: all 0.3s ease;
    position: relative;
    background: white;
    width: 100%;
}

.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 li a:hover,
.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 ul li a:hover {
    background-color: var(--alpine-light-grey);
    color: var(--alpine-red);
    padding-right: 25px; /* RTL: padding-left */
}

.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 li.current-menu-item > a,
.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 ul li.current-menu-item > a {
    background-color: var(--alpine-red);
    color: white;
}

.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 ul.sub-menu {
    background-color: var(--alpine-light-bg);
    border-right: 3px solid var(--alpine-red); /* RTL: border-left */
    margin-right: 20px; /* RTL: margin-left */
    display: none;
    width: -webkit-fill-available;
}

html[dir="ltr"] .alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 ul.sub-menu {
    border-left: 3px solid var(--alpine-red);
    border-right: none;
    margin-left: 20px;
    margin-right: 0;
}

.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 li.submenu-open > ul.sub-menu {
    display: block;
}

.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 ul.sub-menu li a {
    padding: 12px 20px;
    font-size: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background-color: transparent;
}

.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 ul.sub-menu ul.sub-menu {
    margin-right: 20px; /* RTL: margin-left */
}

html[dir="ltr"] .alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 ul.sub-menu ul.sub-menu {
    margin-left: 20px;
    margin-right: 0;
}

.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 li.menu-item-has-children {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}

.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 li.menu-item-has-children > a {
    flex: 1;
}

.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 li.menu-item-has-children .menu-toggle-arrow {
    position: relative;
    left: 20px; /* RTL: left */
    font-size: 12px;
    color: var(--alpine-text-secondary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    cursor: pointer;
    padding: 10px;
    margin: -10px;
}

html[dir="ltr"] .alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 li.menu-item-has-children .menu-toggle-arrow {
    right: auto;
    left: 20px;
}

.alpine-mobile-main-menu-v2 .alpine-main-nav-list-v2 li.menu-item-has-children.submenu-open .menu-toggle-arrow {
    transform: rotate(180deg);
}

/* Store Utility Links in Panel - Updated with rounded buttons */
.alpine-mobile-store-utility-v2 {
    padding: 15px 20px;
    border-top: 1px solid var(--header-v2-border-color);
    display: grid;
    flex-wrap: wrap;
    gap: 10px;
    background: white;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    margin-top: auto;
}

.alpine-mobile-store-utility-v2 .mobile-utility-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    /* text-decoration: none; */
    color: var(--alpine-text-main);
    border: none;
    border-radius: 25px; /* Rounded buttons like new-page.css */
    background: white;
    width: auto;
    min-width: 120px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    justify-content: center;
    transition: all 0.3s ease;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    outline: none;
}

html[dir="ltr"] .alpine-mobile-store-utility-v2 .mobile-utility-item {
    text-align: center;
}

.alpine-mobile-store-utility-v2 .mobile-utility-item:hover {
    color: var(--alpine-red);
    background-color: var(--alpine-light-grey);
    border-color: var(--alpine-red);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.alpine-mobile-store-utility-v2 .mobile-utility-item i {
    font-size: 16px;
    width: 16px;
    text-align: center;
    color: var(--alpine-red);
}

/* Account View Specifics */
/* Mobile Account Menu Styling */
.alpine-mobile-account-menu-v2 {
    padding: 0;
    margin: 0;
    background: transparent;
}

.alpine-mobile-account-menu-v2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

.alpine-mobile-account-menu-v2 li {
    margin: 0;
    border-bottom: 1px solid var(--header-v2-border-color, #e9ecef);
    background: white;
}

.alpine-mobile-account-menu-v2 li:last-child {
    border-bottom: none;
}

.alpine-mobile-account-menu-v2 a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    color: var(--alpine-text-main, #333);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
    background: white;
    border: none;
    outline: none;
    position: relative;
}

.alpine-mobile-account-menu-v2 a:hover {
    background-color: var(--alpine-light-grey, #f8f9fa);
    color: var(--alpine-red, #e0192e);
    padding-right: 25px; /* RTL: slight indent on hover */
    transform: translateX(-3px); /* RTL: slight shift */
}

html[dir="ltr"] .alpine-mobile-account-menu-v2 a:hover {
    padding-left: 25px; /* LTR: slight indent on hover */
    transform: translateX(3px); /* LTR: slight shift */
}

.alpine-mobile-account-menu-v2 a i {
    font-size: 18px;
    width: 20px;
    text-align: center;
    color: var(--alpine-red, #e0192e);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.alpine-mobile-account-menu-v2 a:hover i {
    color: var(--alpine-red, #e0192e);
    transform: scale(1.1);
}

/* Add subtle hover effect arrow for RTL */
.alpine-mobile-account-menu-v2 a::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid transparent;
    opacity: 0;
    transition: all 0.3s ease;
}

html[dir="ltr"] .alpine-mobile-account-menu-v2 a::after {
    left: 15px;
    right: auto;
    border-right: 6px solid transparent;
    border-left: none;
}

.alpine-mobile-account-menu-v2 a:hover::after {
    opacity: 1;
    border-left-color: var(--alpine-red, #e0192e);
}

html[dir="ltr"] .alpine-mobile-account-menu-v2 a:hover::after {
    border-right-color: var(--alpine-red, #e0192e);
    border-left-color: transparent;
}

#alpine-panel-account-view .alpine-mobile-login-prompt-v2 {
    text-align: center;
    padding: var(--space-xl, 32px) 20px;
    background: white;
    margin: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#alpine-panel-account-view .alpine-mobile-login-prompt-v2 p {
    margin-bottom: var(--space-lg, 24px);
    font-size: 1.1em;
    color: var(--alpine-text-main, #333);
    line-height: 1.5;
}

#alpine-panel-account-view .alpine-mobile-login-prompt-v2 .button {
    padding: 12px 24px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 25px; /* Rounded button */
    background-color: var(--alpine-red);
    color: white;
    border: none;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(224, 25, 46, 0.3);
}

#alpine-panel-account-view .alpine-mobile-login-prompt-v2 .button:hover {
    background-color: #c01729;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(224, 25, 46, 0.4);
}

/* Social Icons in Panel (at the bottom) */
.alpine-mobile-nav-panel-v2 .alpine-mobile-social-icons-v2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-md);
    border-top: 1px solid var(--header-v2-border-color);
    background-color: var(--alpine-light-bg);
}

.alpine-mobile-nav-panel-v2 .alpine-mobile-social-icons-v2 a {
    color: var(--alpine-text-secondary);
    font-size: 18px;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.alpine-mobile-nav-panel-v2 .alpine-mobile-social-icons-v2 a:hover {
    color: var(--alpine-red);
    background: var(--alpine-light-grey);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Prevent body scroll when mobile nav is open */
body.mobile-nav-v2-open {
    overflow: hidden;
    /* Don't use position: fixed as it breaks mobile fixed positioning */
    touch-action: none;
    -webkit-overflow-scrolling: touch;
}

/* Overlay for body when panel is open */
body.mobile-nav-v2-open::before {
    content: '';
    position: fixed;
    top: 0;
    /* Position it to cover the 80px area not covered by the panel */
    right: var(--header-v2-mobile-panel-width); /* RTL: next to the panel */
    left: 0; /* RTL: covers from left edge up to where panel stops */
    width: auto; /* Let right/left define width */
    height: 100%;
    background: rgba(0,0,0,0.6); /* Darker overlay */
    z-index: 1040; /* Below panel, above content */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
    /* Mobile fixed positioning improvements */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

html[dir="ltr"] body.mobile-nav-v2-open::before {
    left: var(--header-v2-mobile-panel-width);
    right: 0;
}

body.mobile-nav-v2-open.overlay-visible::before {
    opacity: 1;
    visibility: visible;
}


/* Ensure main content isn't interactive when panel is open (optional, if overlay doesn't suffice) */
/* body.mobile-nav-v2-open #page-v2 {
    pointer-events: none;
} */


/* Adjust existing mobile toggler to ensure it's above the overlay */
.header-v2-mobile-toggle button#alpine-mobile-nav-v2-trigger {
    z-index: 1050; /* Higher than panel and overlay */
    position: relative; /* If it's not already */
}

/* Hide original mobile social icons that were at the bottom of body */
/* body > .alpine-mobile-social-icons-v2 { 
    display: none !important; 
} 
This is now handled by commenting out the PHP block in header-2.php
*/

/* ==========================================================================
   Responsive: Hide/Show Elements
   ========================================================================== */
/* @media (max-width: calc(var(--header-v2-breakpoint) - 1px)) { */
@media (max-width: 991px) { /* Explicit value for testing toggler visibility */
    .header-v2-top-bar,
    .header-v2-nav-bar, /* Hide the whole desktop nav bar container */
    .header-v2-utility-icons .utility-icon-item:not(.search-trigger):not(.user-link):not(.auctions-link) { /* Example: keep search, user, auctions if they are also for mobile header bar */
        /* display: none !important; */ /* More targeted hiding below */
    }
    /* Hide specific utility icons if they are desktop only */
    .header-v2-utility-icons .desktop-only-icon { /* Add this class to icons meant only for desktop */
         display: none !important;
    }

    .header-v2-mobile-toggle {
        display: flex; /* Show mobile toggle */
    }
    .header-v2-main-bar .container-v2 { /* Renamed from header-v2-main-bar-inner for consistency */
        justify-content: space-between; /* Ensure logo and toggler are spaced out */
    }

    html[dir="rtl"] .header-v2-logo {
        margin-left: auto; /* Pushes logo away from toggler */
        margin-right: var(--space-sm); 
    }
    html[dir="ltr"] .header-v2-logo {
        margin-right: auto; /* Pushes logo away from toggler */
        margin-left: var(--space-sm); 
    }
    
    /* Ensure the main desktop navigation menu itself is hidden */
    .header-v2-nav-bar nav.navigation-v2 {
        display: none;
    }
}

/* Further adjustments for very small mobile if needed */
@media (max-width: calc(var(--header-v2-mobile-breakpoint) - 1px)) {
    .alpine-mobile-utility-icons-v2 {
        grid-template-columns: 1fr; /* Single column for very small devices */
    }
    .alpine-mobile-nav-panel-v2 {
        padding: 15px;
    }
} 

@media (max-width: 767px) {
    .header-v2-contact-icons a span {
        display: none;
    }
}
    
@media (max-width: 991px) { /* Example breakpoint */
    .header-v2-nav-bar .navigation-v2 > ul {
        display: none; /* Hide desktop nav */
    }
    .header-v2-mobile-toggle {
        /* display: block; Show mobile toggle */ /* Already handled by more specific rule */
    }
    .header-v2-nav-bar {
        display: none;
    }
    .header-v2-utility-icons {
        gap: 0;
    }
    
    /* Hide mega menus on mobile */
    .navigation-v2 .mega-menu-v2 {
        display: none !important;
    }
    

    /* Add further mobile-specific styles */
    
    /* Mobile Account Menu Responsive */
    .alpine-mobile-account-menu-v2 a {
        padding: 16px 18px;
        font-size: 15px;
        gap: 12px;
    }
    
    .alpine-mobile-account-menu-v2 a i {
        font-size: 16px;
        width: 18px;
    }
    
    #alpine-panel-account-view .alpine-mobile-login-prompt-v2 {
        margin: 15px;
        padding: 24px 16px;
    }
} 

/* Extra small mobile adjustments */
@media (max-width: 480px) {
    .alpine-mobile-account-menu-v2 a {
        padding: 14px 16px;
        font-size: 14px;
        gap: 10px;
    }
    
    .alpine-mobile-account-menu-v2 a i {
        font-size: 15px;
        width: 16px;
    }
    
    .alpine-mobile-account-menu-v2 a:hover {
        padding-right: 22px;
    }
    
    html[dir="ltr"] .alpine-mobile-account-menu-v2 a:hover {
        padding-left: 22px;
    }
    
    #alpine-panel-account-view .alpine-mobile-login-prompt-v2 {
        margin: 12px;
        padding: 20px 14px;
        border-radius: 10px;
    }
}

/* Mobile responsive for mega menu h4 */
@media (max-width: 767px) {
    .mega-menu-v2-column h4 {
        font-size: 15px;
        margin-bottom: 12px;
        padding-bottom: 6px;
    }
}