/* Base component */
.video-header {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    pointer-events: auto;

}

/* Background elements */
.video-header__background,
.video-header__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.video-header__background {
    object-fit: cover;
    z-index: var(--z-behind);
}

.video-header__overlay {
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-normal);
}

/* Main content container */
.video-header__content {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: var(--z-header);
    max-width: 1920px;
    margin: 0 auto;
    pointer-events: auto;

}

/* Only Logo positioning */
.video-header__logo-symbol-wrapper {
    position: absolute;
    top: 3vh;
    left: -3vw;
    width: clamp(200px, 250vw, 450px);
    aspect-ratio: 618/300.72;
}

.video-header__logo-symbol {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Word Logo positioning */
.video-header__logo-word-wrapper {
    position: absolute;
    top: -5vh;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(250px, 30vw, 500px);
    aspect-ratio: 412/202;
}

.video-header__logo-word {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Navigation positioning */
.video-header__nav {
    position: absolute;
    top: calc(3vh + calc(clamp(200px, 25vw, 450px) * 0.376)); /* Aligns with bottom of Only-Logo */
    left: calc(3vw + clamp(10px, 20vw, 450px) + 0.001rem); /* Positions right after Only-Logo */
    width: max-content;
}

.video-header__nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    gap: clamp(3.25rem, 2vw, 20.5rem);
    margin: 0;
    padding: 0;
}

.video-header__nav-item {
    flex-shrink: 0;
}

.video-header__nav-link {
    color: var(--color-secondary);
    font-family: var(--font-primary);
    font-size: clamp(16px, 2vw, 35px);
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    line-height: 1.2;
}

.video-header__nav-link:hover {
    opacity: 0.8;
}

/* Mobile optimization - maintaining same layout */
/* iPhone SE (375px x 667px) */
@media (min-width: 320px) and (max-width: 375px) {
    .video-header__logo-symbol-wrapper {
        width: clamp(230px, 30vw, 180px) !important;
    }
    .video-header__nav {
        left: calc(2vw + clamp(0px, 13vw, 180px) + 0.0000005rem) !important;
    }
    .video-header__nav-link {
        font-size: clamp(9.5px, 2.5vw, 14px) !important;
    }
}
/* iPhone 14 Pro Max (430px x 932px) */
@media (min-width: 391px) and (max-width: 430px) {
    .video-header__nav-link {
        font-size: clamp(11.45px, 2.5vw, 14px) !important;
        padding: 0.25rem;
    }
}
@media screen and (max-width: 768px) {
    .video-header__logo-symbol-wrapper {
        width: clamp(250px, 30vw, 180px);
        top: 1vh;
        left: -22vw;
    }

    .video-header__logo-word-wrapper {
        width: clamp(230px, 35vw, 200px);
        top: -2vh;
    }

    .video-header__nav {
        top: calc(2vh + calc(clamp(130px, 30vw, 180px) * 0.487)); /* Aligns with bottom of Only-Logo */
        left: calc(2vw + clamp(0px, 13vw, 180px) + 0.5rem);
    }

    .video-header__nav-list {
        gap: 0.2rem;
    }

    .video-header__nav-link {
        font-size: clamp(10.5px, 2.5vw, 14px);
        padding: 0.25rem;
    }
}

/* iPad Mini (768px x 1024px) */
@media (min-width: 431px) and (max-width: 768px) {
    .video-header__logo-symbol-wrapper {
        width: clamp(450px, 30vw, 190px) !important;
        top: 0vh;
        left: -17vw;
    }

    .video-header__logo-word-wrapper {
        width: clamp(370px, 35vw, 200px);
        top: -2vh;
    }

    .video-header__nav {
        top: calc(2vh + calc(clamp(130px, 30vw, 180px) * 0.687)); /* Aligns with bottom of Only-Logo */
        left: calc(2vw + clamp(0px, 130vw, 150px) + 0.5rem);
    }

    .video-header__nav-list {
        gap: 1.2rem;
    }

    .video-header__nav-link {
        font-size: clamp(17.5px, 2.5vw, 14px);
        padding: 0.25rem;
    }
}



/* iPad (810px x 1080px) */
@media screen and (min-width: 769px) and (max-width: 830px) {
    .video-header__nav {
        left: calc(30vw + clamp(10px, 20vw, 30px) + 5.5rem) !important;
    }
    .video-header__nav-list {
        gap: 2rem;
    }
    .video-header__logo-word-wrapper {
        width: clamp(400px, 35vw, 200px);
        top: -4vh;
    }
    .video-header__logo-symbol-wrapper {
        top: 0vh;
        left: -14vw;
    }

    .video-header__nav {
        top: calc(2vh + calc(clamp(130px, 30vw, 180px) * 0.687)); /* Aligns with bottom of Only-Logo */
        left: calc(2vw + clamp(0px, 130vw, 150px) + 0rem) !important;
    }

    .video-header__nav-link {
        font-size: clamp(19px, 1.8vw, 20px);
    }
}
/* iPad Pro 12.9" (1024px x 1366px) */
@media (min-width: 831px) and (max-width: 1024px) {
    .video-header__nav {
        left: calc(30vw + clamp(10px, 20vw, 30px) + 5.5rem) !important;
    }
    .video-header__nav-list {
        gap: 2rem;
    }
    .video-header__logo-word-wrapper {
        width: clamp(550px, 35vw, 200px);
        top: -4vh;
    }
    .video-header__logo-symbol-wrapper {
        top: 2vh;
        left: -12vw;
    }

    .video-header__nav {
        top: calc(2vh + calc(clamp(130px, 30vw, 180px) * 0.767)); /* Aligns with bottom of Only-Logo */
        left: calc(2vw + clamp(0px, 130vw, 150px) + 2.8rem) !important;
    }

    .video-header__nav-link {
        font-size: clamp(25px, 1.8vw, 20px);
    }
}
/* Surface PRO 7 and examples */

@media screen and (min-width: 900px) and (max-width: 1024px) 
       and (min-height: 1200px) and (max-height: 1400px) {
        .video-header__nav-link {
            font-size: clamp(21px, 1.8vw, 20px);
        }
}
/* Surface DUO  and examples */

@media screen and (min-width: 540px) and (max-width: 720px)
       and (min-height: 700px) and (max-height: 900px) {
        .video-header__nav-list {
            gap: 1rem;
        }
        .video-header__logo-word-wrapper {
            width: clamp(350px, 35vw, 200px);
            top: -5vh;
        }
        .video-header__logo-symbol-wrapper {
            top: 0vh;
            left: -29vw;
        }
    
        .video-header__nav {
            top: calc(2vh + calc(clamp(130px, 30vw, 180px) * 0.667)); /* Aligns with bottom of Only-Logo */
            left: calc(2vw + clamp(0px, 90vw, 90px) + 0.8rem) !important;
        }
    
        .video-header__nav-link {
            font-size: clamp(12px, 1.8vw, 20px);
        }

}
/* Asus and similar */

@media screen and (min-width: 800px) and (max-width: 900px)
       and (min-height: 1200px) and (max-height: 1366px) {
    .video-header__nav-link {
        font-size: clamp(19px, 1.6vw, 17px);
    }
}
/* Handle ultra-wide screens */
@media screen and (min-width: 1921px) {
    .video-header__content {
        padding: 0 3vw;
    }

    .video-header__logo-symbol-wrapper {
        left: 2vw;
    }

    .video-header__nav-link {
        font-size: 35px;
    }
}

/* Prevent layout shifts during loading */
.video-header__logo-word,
.video-header__logo-symbol {
    opacity: 0;
    animation: fadeIn 0.3s ease-in-out forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Ensure smooth scrolling for navigation overflow */
@media (max-width: 1024px) {
    .video-header__nav-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 0.5rem;
    }

    .video-header__nav-list::-webkit-scrollbar {
        display: none;
    }
}

.video-header__background--mobile {
    display: none;
}

@media (max-width: 768px) {
    .video-header__background--desktop {
        display: none;
    }
    .video-header__background--mobile {
        display: block;
    }
}

/* Language switcher styles - Keep existing desktop styles */
.video-header__language-switcher {
    position: absolute;
    top: 2rem;
    right: 2rem;
    display: flex;
    gap: 1rem;
    z-index: 1000;
}

.lang-switch {
    background: transparent;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1001;
    pointer-events: auto;
}

.lang-switch:hover {
    background: var(--color-secondary);
    color: var(--color-primary);
}

/* Mobile and Tablet Styles */
@media screen and (max-width: 768px) {
    .video-header__language-switcher {
        top: 90%;
        left: 25%;
        transform: translate(-50%, -50%);
        right: auto;
        flex-wrap: wrap;
        width: 160px; /* Adjust based on your needs */
        justify-content: center;
        gap: 0.5rem; /* Smaller gap for mobile */
    }

    /* Style for EN and FR buttons */
    .lang-switch[data-lang="en"],
    .lang-switch[data-lang="fr"] {
        width: calc(50% - 0.25rem); /* Half width minus half of the gap */
    }

    /* Style for AR button */
    .lang-switch[data-lang="ar"] {
        width: 100%; /* Full width */
        margin-top: 0.5rem; /* Space between top buttons and AR button */
    }

    /* Ensure text alignment */
    .lang-switch {
        text-align: center;
        padding: 0.75rem 0.5rem; /* Slightly larger padding for better touch targets */
    }
}

/* RTL specific mobile adjustments */
@media screen and (max-width: 1024px) {
    [dir="rtl"] .video-header__language-switcher {
        right: 50%;
        transform: translate(50%, -50%);
    }
}

/* Additional adjustments for very small screens */
@media screen and (max-width: 360px) {
    .video-header__language-switcher {
        width: 140px; /* Slightly smaller for very small screens */
    }

    .lang-switch {
        padding: 0.5rem 0.25rem;
    }
}

/* Font face declaration if not already in your settings.css */
@font-face {
    font-family: 'Amsterdam-Four';
    src: url('../assets/fonts/Amsterdam-Four_ttf.woff2') format('woff2');
    font-display: swap;
}

.video-header__shipping-container {
   position: absolute;
   top: 70%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 1000;
   pointer-events: auto;
}

.worldwide-shipping {
   width: clamp(300px, 40vw, 500px);
   height: auto;
   animation: rotateShipping 30s linear infinite;
   display: flex;
   justify-content: center;
   align-items: center;
}

@keyframes rotateShipping {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}
.worldwide-shipping svg {
   width: 100%;
   height: 100%;
   object-fit: contain;
}
@media screen and (max-width: 768px) {
    .worldwide-shipping {
        width: clamp(200px, 35vw, 400px);
    }
    .video-header__shipping-container {
   top: 50%;
    }
}

@media screen and (max-width: 360px) {
    .worldwide-shipping {
        width: clamp(150px, 30vw, 300px);
    }
    .video-header__shipping-container {
   top: 50%;
    }
}

/* RTL Support */
[dir="rtl"] .worldwide-shipping {
    font-family: 'Amsterdam-Four', sans-serif;
}

/* iPhone 16 Pro Max Safari-specific fixes */
@media screen 
  and (device-width: 440px) 
  and (device-height: 956px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
    @supports (-webkit-touch-callout: none) {
        .video-header__logo-symbol-wrapper {
            position: absolute;
            left: -37vw;  /* Reset and set small margin from left */
            top: 1vh;
            width: clamp(250px, 30vw, 180px);
        }

        .video-header__logo-word-wrapper {
            position: absolute;
            width: clamp(230px, 35vw, 200px);
            top: -2vh;
        }

        .video-header__nav {
            position: absolute;
                    left: calc(2vw + clamp(0px, 13vw, 180px) + 0.5rem);

            top: calc(3vh + calc(clamp(200px, 25vw, 180px) * 0.476));
        }

        .video-header__nav-list {
            gap: 0.5rem;
        }

        .video-header__nav-link {
            font-size: clamp(11px, 2.5vw, 14px);
            padding: 0.2rem;
        }
    }
}