/* ---- Main Navbar Bar ---- */
      .custom-navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9000;
        background: #000;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      body {
        padding-top: 55px;
      }

      /* ---- Logo ---- */
      .navbar-logo {
        display: flex;
        align-items: center;
        text-decoration: none;
        z-index: 10;
      }

      .navbar-logo img {
        height: 40px;
        width: auto;
        max-width: fit-content;
        object-fit: contain;
        margin: auto;
        display: block;
      }

      @media (max-width: 991px) {
        .custom-navbar {
          height: 60px;
          padding: 0;
          align-items: stretch;
        }

        .navbar-logo {
          align-items: center;
          height: 100%;
        }

        .navbar-logo img {
          height: 38px;
          max-width: fit-content;
          object-fit: contain;
          object-position: center;
        }

        .hamburger-btn {
          height: 60px;
        }

        body {
          padding-top: 60px;
        }
      }

      /* ---- Desktop Nav Links ---- */
      .desktop-nav {
        position: absolute;
        left: 30px;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        gap: 4px;
      }

      html[lang="ar"] .desktop-nav {
        left: auto;
        right: 30px;
      }

      .desktop-nav a {
        color: #fff;
        text-decoration: none;
        font-size: 0.9rem;
        padding: 8px 12px;
        border-radius: 4px;
        transition: color 0.2s;
        font-family: inherit;
      }

      .desktop-nav a:hover {
        color: #ffbd59;
      }

      /* ---- Desktop Auth Container ---- */
      .desktop-auth {
        position: absolute;
        right: 30px;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      html[lang="ar"] .desktop-auth {
        right: auto;
        left: 30px;
      }

      .desktop-auth a {
        font-family: inherit;
        text-decoration: none;
      }

      /* ---- Hamburger Button (Mobile) ---- */
      .hamburger-btn {
        display: none;
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0 12px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        z-index: 10;
      }

      html[lang="ar"] .hamburger-btn {
        left: auto;
        right: 15px;
      }

      .hamburger-btn span {
        display: block;
        width: 24px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: all 0.3s ease;
      }

      .hamburger-btn.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }

      .hamburger-btn.open span:nth-child(2) {
        opacity: 0;
      }

      .hamburger-btn.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      /* ---- Mobile Sidebar Overlay ---- */
      .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9998;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .sidebar-overlay.active {
        display: block;
        opacity: 1;
      }

      /* ---- Mobile Sidebar Panel ---- */
      .mobile-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        max-width: 80vw;
        height: 100%;
        background: #111;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
      }

      html[lang="ar"] .mobile-sidebar {
        left: auto;
        right: -100%;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
      }

      .mobile-sidebar.open {
        left: 0;
      }

      html[lang="ar"] .mobile-sidebar.open {
        left: auto;
        right: 0;
      }

      /* ---- Sidebar Header ---- */
      .sidebar-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 28px 18px 22px;
        background: linear-gradient(160deg, #1a1a1a 0%, #000 100%);
        border-bottom: 1px solid rgba(255, 189, 89, 0.2);
        position: relative;
        text-align: center;
        gap: 6px;
      }

      .sidebar-header-logo {
        display: block;
        height: 42px;
        width: auto;
        max-width: 160px;
        object-fit: contain;
        margin-bottom: 2px;
      }

      .sidebar-header-tagline {
        font-size: 0.7rem;
        color: rgba(255, 189, 89, 0.75);
        letter-spacing: 2px;
        text-transform: uppercase;
        font-family: inherit;
        font-weight: 500;
      }

      .sidebar-close-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #aaa;
        font-size: 1.1rem;
        cursor: pointer;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        transition: background 0.2s, color 0.2s;
        flex-shrink: 0;
      }

      html[lang="ar"] .sidebar-close-btn {
        right: auto;
        left: 12px;
      }

      .sidebar-close-btn:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
      }

      /* ---- Sidebar User Profile ---- */
      .sidebar-user-profile {
        padding: 20px 18px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }

      html[lang="ar"] .sidebar-user-profile {
        align-items: flex-end;
      }

      .sidebar-user-profile.visible {
        display: flex;
      }

      .sidebar-user-info {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 4px;
      }

      .sidebar-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #ffbd59;
      }

      .sidebar-username {
        font-weight: bold;
        color: #fff;
        font-size: 0.95rem;
        font-family: inherit;
      }

      /* ---- Sidebar Nav Links ---- */
      .sidebar-nav-links {
        padding: 12px 0;
        flex: 1;
      }

      .sidebar-nav-links a {
        display: block;
        color: #e0e0e0;
        text-decoration: none;
        font-size: 1rem;
        padding: 14px 22px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: background 0.2s, color 0.2s;
        font-family: inherit;
      }

      html[lang="ar"] .sidebar-nav-links a {
        text-align: right;
      }

      .sidebar-nav-links a:hover {
        background: rgba(255, 189, 89, 0.1);
        color: #ffbd59;
      }

      .sidebar-nav-links a:active {
        background: rgba(255, 189, 89, 0.2);
      }

      /* ---- Sidebar Action Buttons ---- */
      .sidebar-actions {
        padding: 16px 18px 24px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
      }

      .sidebar-btn {
        display: block;
        text-align: center;
        padding: 12px 16px;
        border-radius: 8px;
        font-weight: bold;
        font-size: 0.95rem;
        cursor: pointer;
        text-decoration: none;
        font-family: inherit;
        transition: opacity 0.2s, transform 0.1s;
        border: none;
        width: 100%;
        box-sizing: border-box;
      }

      .sidebar-btn:active {
        transform: scale(0.97);
      }

      .sidebar-btn-login {
        background: #ffbd59;
        color: #000;
        box-shadow: 0 2px 8px rgba(255, 189, 89, 0.35);
      }

      .sidebar-btn-bookings {
        background: #8bc34a;
        color: #000;
      }

      .sidebar-btn-logout {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        color: #fff;
      }

      .sidebar-btn-lang {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #ccc;
        font-size: 0.9rem;
      }

      /* ---- Mobile Header Lang ---- */
      .mobile-header-lang {
        display: none;
        position: absolute;
        right: 15px;
        top: 0;
        bottom: 0;
        align-items: center;
        z-index: 100;
      }

      .mobile-header-lang .lang-dropdown-btn {
        padding: 4px 7px 4px 6px;
        font-size: 0.72rem;
        gap: 4px;
        border-radius: 6px;
      }

      .mobile-header-lang .lang-flag img {
        width: 16px;
        height: 11px;
      }

      .mobile-header-lang .lang-label {
        font-size: 0.72rem;
      }

      .mobile-header-lang .lang-arrow {
        font-size: 0.5rem;
      }

      .mobile-header-lang .lang-dropdown-menu {
        min-width: 100px;
        top: calc(100% + 5px);
      }
      
      .mobile-header-lang .lang-option {
        padding: 8px 12px;
        font-size: 0.8rem;
      }

      html[lang="ar"] .mobile-header-lang {
        right: auto;
        left: 15px;
      }

      /* ---- Responsive: Show hamburger on mobile, hide desktop items ---- */
      @media (max-width: 991px) {
        .hamburger-btn {
          display: flex;
        }

        .mobile-header-lang {
          display: flex;
        }

        .desktop-nav,
        .desktop-auth {
          display: none !important;
        }
      }