/* ============================================
   MOBILE NAVBAR FIX - Precise Positioning
   Desktop completely untouched, mobile-only fixes
   ============================================ */

/* DESKTOP FIX: Logo left, everything else RIGHT */
@media (min-width: 1201px) {
    #navbar {
        justify-content: flex-start !important;
        padding: 0 32px !important;
    }

    .nav-links {
        margin-left: auto;
        margin-right: 24px;
        gap: 4px;
    }

    .user-box {
        margin-left: 0;
        margin-right: 16px;
    }

    .desktop-lang-switcher {
        margin-left: 0;
    }
}

/* MEDIUM SCREENS (901px-1200px) - Use hamburger menu to prevent wrapping */
@media (min-width: 901px) and (max-width: 1200px) {
    /* Use hamburger menu layout like mobile */
    #navbar {
        position: relative;
        padding: 0 24px;
        justify-content: space-between;
    }

    /* Hide desktop login button */
    .nav-links li button#login-btn {
        display: none !important;
    }

    /* Hamburger menu visible */
    .hamburger-menu {
        position: absolute !important;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
        z-index: 1001;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 8px;
        cursor: pointer;
        background: transparent;
        border: none;
    }

    .hamburger-menu:focus,
    .hamburger-menu:active,
    .hamburger-menu.open {
        transform: translateY(-50%) !important;
    }

    .hamburger-menu span {
        width: 24px;
        height: 2.5px;
        background: #69B254;
        border-radius: 2px;
        display: block;
        margin: 0 auto;
    }

    /* Mobile login button */
    .mobile-login-btn {
        position: absolute !important;
        top: 50%;
        transform: translateY(-50%);
        right: 80px;
        z-index: 1001;
        padding: 8px 20px !important;
        font-size: 0.9rem !important;
        height: 54px !important;
        border-radius: 10px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-login-btn[style*="display: none"],
    .mobile-login-btn[style*="display:none"] {
        display: none !important;
    }

    /* User box */
    .user-box {
        position: absolute !important;
        top: 50%;
        transform: translateY(-50%);
        right: 80px;
        z-index: 1001;
        display: flex;
        align-items: center;
    }

    .user-box[style*="display: none"],
    .user-box[style*="display:none"] {
        display: none !important;
    }

    .user-box:focus,
    .user-box:active {
        transform: translateY(-50%) !important;
    }

    #user-avatar {
        width: 42px !important;
        height: 42px !important;
        border-radius: 50%;
        border: 2px solid rgba(105, 178, 84, 0.5);
        cursor: pointer;
        display: block;
        transition: all 0.3s ease;
    }

    #user-avatar[style*="display: none"],
    #user-avatar[style*="display:none"] {
        display: none !important;
    }

    /* Navigation menu - full screen overlay */
    .nav-links {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background: rgba(18, 25, 28, 0.98);
        backdrop-filter: blur(20px);
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 40px 20px;
        z-index: 1000;
        overflow-y: auto;
        margin: 0;
    }

    .nav-links.open {
        display: flex !important;
    }

    .nav-links li {
        width: 100%;
        max-width: 500px;
        list-style: none;
    }

    .nav-links li a,
    .nav-links li button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 18px 24px;
        font-size: 1.2rem;
        font-weight: 500;
        color: #fff;
        text-align: center;
        border-radius: 12px;
        transition: all 0.3s ease;
        min-height: 60px;
    }

    .nav-links li a:hover,
    .nav-links li button:hover {
        background: rgba(105, 178, 84, 0.15);
        color: #7bc463;
    }

    /* Hide desktop language switcher */
    .desktop-lang-switcher {
        display: none !important;
    }

    /* Show mobile language switcher in hamburger menu */
    .mobile-lang-switcher {
        display: block !important;
        width: 100%;
        max-width: 500px;
        margin-top: 24px;
        list-style: none;
    }

    .mobile-lang-switcher .language-switcher {
        display: flex !important;
        justify-content: center;
        gap: 12px;
    }
}

/* Hide mobile elements on LARGE DESKTOP (1201px+) */
@media (min-width: 1201px) {
    .mobile-lang-switcher,
    .mobile-login-btn {
        display: none;
    }
}

/* ONLY apply on mobile - desktop remains exactly as-is */
@media (max-width: 900px) {
    /* Hide desktop login button (the one inside nav-links) - ALWAYS hidden on mobile */
    #login-btn {
        display: none !important;
    }

    /* Navbar needs to be relative for absolute children */
    #navbar {
        position: relative;
        padding: 0 20px;
        height: 66px;
    }

    /* Mobile login button - compact, 80% navbar height, flex layout */
    .mobile-login-btn {
        position: absolute !important;
        top: 50%;
        transform: translateY(-50%);
        right: 80px;
        z-index: 1001;
        padding: 6px 18px !important;
        font-size: 0.9rem !important;
        height: 52px !important;  /* 80% of 66px navbar */
        min-height: unset !important;
        max-height: 52px !important;
        border-radius: 10px !important;
        line-height: 1.2 !important;
        display: flex; /* Always flex on mobile, JS controls visibility with style attr */
        align-items: center;
        justify-content: center;
    }

    /* When JavaScript sets display:none, hide it */
    .mobile-login-btn[style*="display: none"],
    .mobile-login-btn[style*="display:none"] {
        display: none !important;
    }

    /* User box - absolute position WITHIN navbar */
    .user-box {
        position: absolute !important;
        top: 50%;
        transform: translateY(-50%);
        right: 80px;
        z-index: 1001;
        display: flex; /* Default to flex on mobile, JS controls with style attr */
        align-items: center;
    }

    /* When JavaScript sets display:none, hide it */
    .user-box[style*="display: none"],
    .user-box[style*="display:none"] {
        display: none !important;
    }

    /* Keep centering on interaction */
    .user-box:focus,
    .user-box:active {
        transform: translateY(-50%) !important;
    }

    /* User avatar styling */
    #user-avatar {
        width: 42px !important;
        height: 42px !important;
        border-radius: 50%;
        border: 2px solid rgba(105, 178, 84, 0.5);
        cursor: pointer;
        display: block; /* Default to block on mobile, JS controls with style attr */
        transition: all 0.3s ease;
    }

    /* When JavaScript sets display:none, hide it */
    #user-avatar[style*="display: none"],
    #user-avatar[style*="display:none"] {
        display: none !important;
    }

    #user-avatar:hover {
        border-color: rgba(105, 178, 84, 0.8);
        transform: scale(1.05);
    }

    /* Hamburger menu - absolute position WITHIN navbar */
    .hamburger-menu {
        position: absolute !important;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
        z-index: 1001;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 8px;
        cursor: pointer;
        background: transparent;
        border: none;
    }

    /* CRITICAL: Keep vertical centering on focus/active */
    .hamburger-menu:focus,
    .hamburger-menu:active,
    .hamburger-menu.open {
        transform: translateY(-50%) !important;
    }

    .hamburger-menu span {
        width: 24px;
        height: 2.5px;
        background: #69B254;
        border-radius: 2px;
        display: block;
        margin: 0 auto;
    }

    /* Navigation menu - full screen overlay */
    .nav-links {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: calc(100vh - 64px);
        background: rgba(18, 25, 28, 0.98);
        backdrop-filter: blur(20px);
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 40px 20px;
        z-index: 1000;
        overflow-y: auto;
    }

    .nav-links.open {
        display: flex;
    }

    /* Menu items - centered and large */
    .nav-links li {
        width: 100%;
        max-width: 400px;
        list-style: none;
    }

    .nav-links li a,
    .nav-links li button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 18px 24px;
        font-size: 1.2rem;
        font-weight: 500;
        color: #fff;
        text-align: center;
        border-radius: 12px;
        transition: all 0.3s ease;
        min-height: 60px;
    }

    .nav-links li a:hover,
    .nav-links li button:hover {
        background: rgba(105, 178, 84, 0.15);
        color: #7bc463;
    }

    /* Login button in menu */
    .nav-links .login-btn {
        background: linear-gradient(135deg, #69B254, #5fa149);
        color: #fff;
        border: none;
        cursor: pointer;
        margin-top: 20px;
    }

    .nav-links .login-btn:hover {
        background: linear-gradient(135deg, #5fa149, #69B254);
        transform: translateY(-2px);
    }

    /* Hide desktop language switcher on mobile */
    .desktop-lang-switcher {
        display: none !important;
    }

    /* Show mobile language switcher in hamburger menu */
    .mobile-lang-switcher {
        display: block !important;
        width: 100%;
        max-width: 400px;
        margin-top: 24px;
        list-style: none;
    }

    .mobile-lang-switcher .language-switcher {
        display: flex !important;
        justify-content: center;
        gap: 12px;
    }
}

/* Smaller phones - 600px */
@media (max-width: 600px) {
    #navbar {
        height: 62px;
        padding: 0 16px;
    }

    .mobile-login-btn {
        right: 76px;
        font-size: 0.85rem !important;
        padding: 6px 16px !important;
        height: 50px !important;  /* 80% of 62px navbar */
        max-height: 50px !important;
    }

    .user-box {
        top: 50%;
        transform: translateY(-50%);
        right: 76px;
    }

    .user-box:focus,
    .user-box:active {
        transform: translateY(-50%) !important;
    }

    .hamburger-menu {
        top: 50%;
        transform: translateY(-50%);
        right: 16px;
        width: 42px;
        height: 42px;
    }

    .hamburger-menu:focus,
    .hamburger-menu:active,
    .hamburger-menu.open {
        transform: translateY(-50%) !important;
    }

    .nav-links {
        top: 62px;
        height: calc(100vh - 62px);
    }

    #user-avatar {
        width: 40px !important;
        height: 40px !important;
        /* display controlled by JS */
    }
}

/* Very small phones - 480px */
@media (max-width: 480px) {
    #navbar {
        height: 58px;
        padding: 0 12px;
    }

    .mobile-login-btn {
        right: 70px;
        font-size: 0.8rem !important;
        padding: 5px 14px !important;
        height: 46px !important;  /* 80% of 58px navbar */
        max-height: 46px !important;
    }

    .user-box {
        top: 50%;
        transform: translateY(-50%);
        right: 70px;
    }

    .user-box:focus,
    .user-box:active {
        transform: translateY(-50%) !important;
    }

    .hamburger-menu {
        top: 50%;
        transform: translateY(-50%);
        right: 12px;
        width: 42px;
        height: 42px;
    }

    .hamburger-menu:focus,
    .hamburger-menu:active,
    .hamburger-menu.open {
        transform: translateY(-50%) !important;
    }

    .nav-links {
        top: 58px;
        height: calc(100vh - 58px);
        padding: 32px 16px;
    }

    .nav-links li a,
    .nav-links li button {
        font-size: 1.1rem;
        padding: 16px 20px;
        min-height: 56px;
    }

    #user-avatar {
        width: 38px !important;
        height: 38px !important;
        /* display controlled by JS */
    }
}