* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     margin: 0;
     padding: 0;
     font-family: 'Frutiger LT Arabic';
 }

 #map {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 100%;
 }

 /* Nearby Menu - Updated for new container structure */
 /* #nearbyContainer .nearby-restaurant-card {
      display: flex;
      background-color: white;
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      transition: transform 0.1s ease;
    }

 #nearbyContainer .nearby-restaurant-card:hover {
     transform: scale(1.01);
 }

 #nearbyContainer .nearby-restaurant-info {
     flex: 1;
 }

 #nearbyContainer .nearby-restaurant-name {
     font-weight: bold;
     font-size: 16px;
     margin-bottom: 4px;
 }

 #nearbyContainer .nearby-rating {
     display: none;
     color: #fbbc05;
     font-size: 14px;
     margin-bottom: 4px;
 }

 #nearbyContainer .nearby-restaurant-type,
 #nearbyContainer .nearby-restaurant-location,
 #nearbyContainer .nearby-restaurant-hours,
 #nearbyContainer .nearby-restaurant-tags {
     font-size: 13px;
     color: #555;
     margin-bottom: 3px;
 }

 #nearbyContainer .nearby-restaurant-status {
     color: green;
     font-weight: bold;
     font-size: 13px;
 }

    #nearbyContainer .nearby-restaurant-image {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 8px;
      margin-left: 10px;
    } */


 #nearbyContainer {
     max-width: 380px;
     /* margin: 28px auto; */
     background: #fff;
     border-radius: 16px;
     box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
     overflow: hidden;
 }

 .header {
     display: flex;
     align-items: center;
     padding: 16px 18px;
     border-bottom: 1px solid #f0f0f0;
     font-weight: 600;
     font-size: 20px;
     background: #fff;
 }

 .back-button {
     background: none;
     border: none;
     margin-right: 16px;
     cursor: pointer;
     padding: 2px;
     border-radius: 50%;
     transition: background 0.1s;
 }

 #swapIcon:hover g {
     fill: #04615c;
     /* Changes the fill color on hover */
 }

 .direction-search-box {
     display: flex;
 }

 .icon-container {
     justify-items: center;
     margin: 7% 0%;
 }

 .icon-circle {
     border-radius: 50%;
     margin: 3px;
 }

 .gray-circle {
     height: 10px;
     width: 10px;
     background: gray;
 }

 .white-circle {
     height: 6px;
     width: 6px;
     background: rgb(242, 242, 242);
 }

 .inputs-container {
     width: 90%;
 }

 .swap-icon-container {
     transform: translate(0%, 39%) scale(1);
 }

 /* .back-button:hover { background: #fbbc0540; } */
 .search-section {
     position: relative;
     padding: 14px 18px 6px 18px;
     background: #fff;
 }

 .search-input-nearby {
    margin: 2% 0%;
    transition: box-shadow 0.15s;
    width: 90%;
    padding: 12px 16px 12px 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    background-color: #f8f9fa;
    color: #333;
    outline: none;
    box-sizing: border-box;
    height: 40px;
    font-family: "Frutiger LT Arabic";
 }

 .clear-btn {
     position: absolute;
     right: 30px;
     top: 18px;
     background: none;
     border: none;
     font-size: 20px;
     color: #bbb;
     cursor: pointer;
     display: none;
 }

 .search-input:not(:placeholder-shown)+.clear-btn {
     display: block;
 }

 #nearbyFilters {
     display: none;
     gap: 8px;
     /* flex-wrap: wrap; */
     margin: 0% 5% 1% 0%;
     padding: 8px 18px 10px 18px;
     background: #fff;
     overflow-x: auto;
 }

 .filter-btn {
     background: #f2f2f2;
     border: none;
     border-radius: 16px;
     padding: 6px 14px;
     font-size: 13px;
     cursor: pointer;
     transition: background 0.2s;
 }

 .filter-btn.active,
 .filter-btn:focus {
     background: #fbbc05;
     color: white;
 }

 #nearbySortWrapper {
     display: none;
     padding: 4px 18px 10px 18px;
     background: #fff;
     font-size: 14px;
     align-items: center;
     gap: 8px;
 }

 #nearbySortSelect {
     border-radius: 8px;
     border: 1px solid #ddd;
     padding: 4px 8px;
     background: #fafafa;
     font-size: 14px;
 }

 #nearbyCategoriesSection {
     max-height: 368px;
     overflow-y: auto;
     padding: 0 18px 14px 18px;
     background: #fff;
 }

 .section-title {
     margin: 12px 0 10px 0;
     font-size: 17px;
     font-weight: 600;
     letter-spacing: 0.02em;
 }

 /* Card styling from your CSS */
 #nearbyContainer .nearby-restaurant-card {
     display: flex;
     background-color: white;
     border-radius: 12px;
     padding: 12px;
     margin-bottom: 12px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     transition: transform 0.1s ease;
     position: relative;
 }

 #nearbyContainer .nearby-restaurant-card:hover {
     transform: scale(1.01);
 }

 #nearbyContainer .nearby-restaurant-info {
     flex: 1;
     min-width: 0;
 }

 #nearbyContainer .nearby-restaurant-name {
     font-weight: bold;
     font-size: 16px;
     margin-bottom: 4px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 170px;
 }

 #nearbyContainer .nearby-rating {
     display: none;
     color: #fbbc05;
     font-size: 14px;
     margin-bottom: 4px;
     user-select: none;
 }

 #nearbyContainer .nearby-restaurant-type,
 #nearbyContainer .nearby-restaurant-location,
 #nearbyContainer .nearby-restaurant-hours,
 #nearbyContainer .nearby-restaurant-tags {
     font-size: 13px;
     color: #555;
     margin-bottom: 3px;
 }

 #nearbyContainer .nearby-restaurant-status {
     color: green;
     font-weight: bold;
     font-size: 13px;
 }

 #nearbyContainer .nearby-restaurant-image {
     width: 80px;
     height: 80px;
     object-fit: cover;
     border-radius: 8px;
     margin-left: 10px;
     /* background: #eee; */
     flex-shrink: 0;
     /* box-shadow: 0 1px 5px rgba(0, 0, 0, 0.07);*/
 }

 .favorite-btn {
     display: none;
     background: none;
     border: none;
     position: absolute;
     top: 10px;
     right: 10px;
     font-size: 20px;
     cursor: pointer;
     color: #bbb;
     transition: color 0.2s;
     z-index: 1;
     padding: 0;
 }

 .favorite-btn.active {
     color: #fbbc05;
 }

 @media (max-width: 480px) {
    #nearbyContainer {
        max-width: unset !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        background: white !important;
        z-index: 9999 !important;
        transform: none !important; /* Reset any sliding transform */
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }
    .share-dropdown-menu{
        margin-left: -140px !important;
    }
    #nearbyCategoriesSection {
    max-height: 100% !important;
    }

    /* .locations-list {
        max-height: 100% !important;
    } */

     #legendToggle {
     bottom: 11% !important;
    }
    #legendPanel {
       bottom: 11% !important;
       display: block !important;
    }

    .language-panel.show{
        transform: translateY(0);
        bottom: 0px;
        top: unset;
        z-index: 9999;
        left: 0px;
        width: 100% !important;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }

     .menu-container.show {
        padding:0px 12px 12px 12px !important;
        /* padding: 12px; */
        display: block;
        opacity: 1;
        /* transition: opacity 0.5s ease-in; */
    }

     .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl, .mapboxgl-ctrl-right .mapboxgl-ctrl{
        margin-bottom: 100%;
     }

     #nearbyCategoriesSection {
         padding: 0 8px 10px 8px;
     }

     #nearbyFilters,
     #nearbySortWrapper,
     .search-section {
         padding-left: 8px;
         padding-right: 8px;
     }

     .header {
         padding-left: 8px;
         padding-right: 8px;
     }
 }



 /* Language Button and Menu */

 .lang-button {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     border: 2px solid #eee;
     background-color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 0 0 2px #eee inset;
 }

 .lang-button i {
     color: #007bff;
     /* Blue icon */
     font-size: 18px;
 }

 .language-panel {
     display: none;
     position: fixed;
     max-height: 600px;
     overflow: visible;
     top: 20px;
     left: 20px;
     background: #fff;
     border-radius: 20px;
     width: 350px !important;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.3s ease, transform 0.3s ease;
 }

 @keyframes fadeInLanguagePanel {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .fadeInAnimation {
     animation: fadeInLanguagePanel 0.3s ease-out;
 }

 @keyframes fadeIn {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .header {
     display: flex;
     align-items: center;
     padding: 14px 16px;
     font-size: 17px;
     font-weight: bold;
     color: #333;
     /* border-bottom: 1px solid #f0f0f0; */
     gap: 8px;
     /* Space between back icon and text */
 }

 .header .back-button {
     background: none;
     border: none;
     cursor: pointer;
     padding: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: transform 0.2s ease;
 }

 .header .back-button i {
     font-size: 20px;
     color: #333;
 }

 .header .back-button:hover {
     transform: scale(1.1);
     color: #04615c;
 }

 /* Animation for language panel sliding down when shown */
 .language-panel.show {
     display: block;
     opacity: 1;
     transform: translateY(0);
 }

 @keyframes slideFadeIn {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .header i {
     font-size: 20px;
     margin-right: 10px;
     cursor: pointer;
 }

 .language-list {
     list-style: none;
     margin: 0;
     padding: 0;
     max-height: 300px;
     overflow-y: auto;
     overflow-x: hidden;
 }

 .language-item {
     padding: 12px 16px;
     display: flex;
     align-items: center;
     font-size: 15px;
     color: #555;
     gap: 15px;
     cursor: pointer;
     transition: background 0.2s, transform 0.1s;
 }

 .language-item:last-child {
     border-bottom: none;
 }

 .language-item:hover {
     background-color: #f9f9f9;
     transform: translateX(4px);
 }

 .language-item.active {
     color: #007bff;
     font-weight: 500;
 }

 .location-hours {
     margin-top: 4px;
     font-size: 0.9em;
     display: flex;
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
 }

 .status {
     display: block;
     text-align: center;
     font-size: 0.85em;
     font-weight: 500;
     line-height: 1.1;
     width: 60px;
     padding: 5px 5px 5px 5px;
 }

 .status::before {
     /* margin-right: 4px; */
     font-size: 1.2em;
 }

 .status.open {
     color: white;
     background-color: #04615cb8;
     border-radius: 5px;
 }

 .status.closed {
     color: white;
     background-color: #ef4129b8;
     border-radius: 5px;
 }

 .language-item.active i {
     color: #007bff;
 }

 /* Optional Scrollbar Styling */
 .language-list::-webkit-scrollbar {
     width: 6px;
 }

 .language-list::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 3px;
 }

 /* Airport Menu Component Styles */
 .menu-container {
     position: fixed;
     top: 20px;
     left: 20px;
     width: 350px !important;
     background: white;
     border-radius: 12px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     overflow: hidden;
     font-family: 'Frutiger LT Arabic';
     z-index: 1000;
     transition: transform 0.3s ease, max-height 0.3s ease;
     will-change: transform, max-height;
     max-height: 250px;
     /* Start as collapsed */
 }

 /* Collapsed State */
 .menu-container.desktop-collapsed {
     max-height: 205px;
     overflow: hidden;
 }

 /* Expanded State */
 .menu-container.desktop-expanded {
     max-height: 785px;
     overflow: visible;
 }

 /* Animate individual rows */
 .menu-item.row-2,
 .menu-item.row-3,
 .menu-item.row-4 {
     opacity: 0;
     transform: translateY(3px);
     height: 0;
     overflow: hidden;
     padding: 0;
     margin: 0;
     transition: opacity 0.3s ease, transform 0.3s ease, height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
     display: none;
 }

 /* When Expanded: fade and slide in rows */
 .menu-container.desktop-expanded .menu-item.row-2,
 .menu-container.desktop-expanded .menu-item.row-3,
 .menu-container.desktop-expanded .menu-item.row-4 {
     opacity: 1;
     /* transform: translateY(0); */
     height: auto;
     padding: 5px 0;
     /* Restore padding if needed */
     margin: 0;
     display: flex;
 }


 /* Search Section */

 .search-section {
     padding: 4px;
     /* border-bottom: 1px solid #eee; */
     position: relative;
     text-align: center;
 }

 .search-input {
     width: 62%;
     padding: 12px 16px;
     border: 0px solid #ddd;
     border-radius: 40px;
     font-size: 14px;
     outline: none;
     transition: border-color 0.2s ease;
     background-color: rgb(242, 242, 242);
     font-family: "Frutiger LT Arabic";
 }

 .search-input:focus {
     border-color: #007AFF;
 }

 /* Categories Section */
 .categories-section {
     padding: 11px 6px;
     max-height: 100px;
 }

 .section-title {
     display: none;
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 16px;
     color: #333;
 }

 .categories-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 0px;
     margin-bottom: 16px;
     max-height: fit-content;
 }

 .menu-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 0px 0px;
     text-align: center;
     cursor: pointer;
     transition: all 0.2s ease;
     min-height: 60px;
     width: 70px;
     height: 70px;
     /* border-radius: 50%; */
     /* background-color: #f8f9fa; */
 }

 .menu-item:hover {
     /* background-color: #ddd; */
     transform: translateY(-3px);
 }

 .Main-category-icon {
     width: 30px;
 }

 .menu-icon {
     margin-bottom: 4px;
     color: #333;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 5px;
     border-radius: 30px;
     background-color: rgb(242, 242, 242);
     color: #04615c;
 }

 .menu-icon svg {
     width: 18px;
     height: 18px;
 }

 .parking-icon {
     font-size: 16px;
     font-weight: bold;
     color: #333;
 }

 .menu-label {
     font-size: 10px;
     color: #333;
     font-weight: 500;
     text-align: center;
     line-height: 1.2;
     max-width: 90px;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 /* Menu Arrow */
 .menu-arrow {
     display: flex;
     justify-content: center;
     align-items: center;
     color: #666;
     cursor: pointer;
     padding: 0px;
     transition: transform 0.2s ease;
     /* Ensure menu arrow is always visible in categories view */
     visibility: visible;
     opacity: 1;
 }

 .menu-arrow:hover {
     color: #333;
 }

 .menu-arrow.expanded {
     transform: rotate(180deg);
 }

 /* Hide menu arrow when not in categories view */
 .menu-arrow.hidden {
     display: none !important;
 }

 /* Styling the share icon */
 .share-icon {
     cursor: pointer;
     color: #a1a1a1;
     font-size: 22px;
 }

 .share-icon:hover {
     color: #04615c;
 }

 /* Share dropdown menu styling */

 .share-dropdown-menu {
     position: absolute;
     top: 100%;
     /* Appear just below the icon */
     left: 0;
     margin-top: 10px;
     /* Slight spacing below the icon */
     font-family: 'Frutiger LT Arabic';
     display: none;
     background-color: #fff;
     border-radius: 12px;
     box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
     /* Blended shadow */
     min-width: 160px;
     overflow: hidden;
     z-index: 1000;
 }

 .share-dropdown-menu.open {
     display: block;
 }

 /* Provided styles for dropdown items */
 .share-wrapper {
     position: relative;
     /* Make this the positioning context */
     display: inline-block;
     /* Keep it as small as the icon */
 }

 .share-dropdown-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 16px;
     font-size: 14px;
     font-weight: 500;
     color: #444;
     background: #fff;
     cursor: pointer;
     transition: background 0.2s ease;
 }


 /* .share-dropdown-item:hover {
  background: #f5f5f5;
} */

 .share-dropdown-item:hover i,
 .share-dropdown-item:hover span {
     color: #04615c;
 }

 /* Flex layout: 80% text, 20% icon */
 .share-dropdown-item i {
     flex: 0 0 20%;
     /* Icon takes 20% */
     font-size: 16px;
     color: #444;
     width: 20px;
     text-align: center;
 }

 .share-dropdown-item:not(:last-child) {
     border-bottom: 1px solid #eee;
 }

 .share-dropdown-item span {
     flex: 1;
     /* Text takes the remaining 80% */
 }

 .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.7);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
 }

 .modal-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 .qr-modal {
     background: white;
     border-radius: 16px;
     width: 90%;
     max-width: 350px;
     padding: 30px;
     text-align: center;
     transform: scale(0.9);
     transition: transform 0.3s ease;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
 }

 .modal-overlay.active .qr-modal {
     transform: scale(1);
 }

 .qr-modal h3 {
     color: #04615c;
     margin-bottom: 25px;
     font-size: 22px;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 10px;
 }

 #qrcode {
     display: flex;
     justify-content: center;
     margin: 20px 0;
     padding: 15px;
     background: #F8F9FB;
     border-radius: 12px;
 }

 .modal-actions {
     display: flex;
     gap: 12px;
     margin-top: 25px;
 }

 .modal-btn {
     flex: 1;
     padding: 14px;
     border-radius: 10px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
     border: 0px solid #04615c;
 }

 .close-btn {
     background-color: rgb(242, 242, 242);
     color: rgb(96, 96, 96);
 }

 .close-btn:hover {
     background: #04615c;
     color: white;
 }

 .notification {
     position: fixed;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     background: #04615c;
     color: white;
     padding: 15px 30px;
     border-radius: 50px;
     font-weight: 500;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
 }

 #notificationRoute {
     background: #F2003C !important;
 }

 .notification.show {
     opacity: 1;
     visibility: visible;
     bottom: 40px;
 }

 @media (max-width: 600px) {
     .container {
         border-radius: 12px;
     }

     .header {
         padding: 20px;
     }

     .content {
         padding: 20px;
     }

     .share-btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }

 /* Subcategories View */
 .subcategories-view {
     display: none;
     padding: 10px;
     /* Ensure consistent layout when view is shown */
     position: relative;
     width: 100%;
     box-sizing: border-box;
 }

 .view-header {
     display: flex;
     align-items: center;
     margin-bottom: 10px;
 }

 .back-button {
     background: none;
     border: none;
     cursor: pointer;
     padding: 5px;
     margin-right: 8px;
     border-radius: 4px;
     transition: background-color 0.2s ease;
 }

 .back-button:hover {
     /* background-color: #f0f0f0; */
     color: #04615c;
     transform: translateY(-1px);
 }

 .view-title {
     font-size: 20px;
     font-weight: 600;
     color: #333;
 }

 .subcategories-list {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     gap: 9px;
     height: auto;
     max-height: 64vh;
     overflow-y: scroll;
 }

 .subcategory-item {
     display: flex;
     align-items: center;
     padding: 12px;
     background-color: #f8f9fa;
     background-color: rgb(242, 242, 242);
     border-radius: 8px;
     cursor: pointer;
     transition: all 0.2s ease;
     color: rgb(96, 96, 96);
 }

 .subcategory-item:hover {
     background-color: #e9ecef;
     background-color: rgb(242, 242, 242);
     transform: translateY(-1px);
     color: #04615c;
     transform: scale(1) !important;
 }

 .subcategory-icon {
     font-size: 20px;
     margin-right: 12px;
     display: none;
 }

 .subcategory-label {
     font-size: 14px;
     font-weight: 500;
     color: rgb(96, 96, 96);
 }

 .subcategory-item:hover .subcategory-label {
     color: #04615c;
 }

 /* Locations View */
 .locations-view {
     display: none;
     padding: 10px;
     /* Ensure consistent layout when view is shown */
     position: relative;
     width: 100%;
     box-sizing: border-box;
 }

 .locations-list {
     display: flex;
     flex-direction: column;
     gap: 9px;
     max-height: 375px;
     overflow-y: scroll;
 }

 .location-item {
     display: flex;
     align-items: center;
     padding: 10px;
     margin-bottom: 5px;
     background-color: rgb(242, 242, 242);
     border-radius: 8px;
     cursor: pointer;
     transition: all 0.2s ease;
 }

 .location-item:hover {
     /* background-color: #e9ecef; */
     transform: translateY(-1px);
 }

 .location-item:hover .location-name,
 .location-item:hover .location-address {
     color: #04615c;
 }

 .location-icon {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 12px;
     font-size: 18px;
     /* background-color: #04615c; */
     color: white;
 }

 .location-details {
     flex: 1;
 }

 .location-name {
     font-size: 14px;
     font-weight: 700;
     color: #333;
     margin-bottom: -5px;
 }

 .location-address {
     font-size: 12px;
     color: #666;
 }

 /* Location Details View */
 .location-details-view {
     display: none;
     padding: 10px;
     /* Ensure consistent layout when view is shown */
     position: relative;
     width: 100%;
     box-sizing: border-box;
 }

 .location-title-with-icon {
     margin-bottom: 5px;
     display: flex;
     align-items: center;
     /* margin-bottom: 12px;
  gap: 12px; */
 }

 .location-icon-column {
     flex: 0 0 40%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .location-icon-img {
     width: 100%;
     max-width: 75px;
     height: auto;
     object-fit: contain;
 }

 .location-text-column {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     /* text-align: left; */
 }

 .location-title {
     font-size: 18px;
     font-weight: 600;
     color: #222;
     margin-bottom: 4px;
 }

 .location-subtitle {
     font-size: 14px;
     color: #666;
 }


 .location-info {
     /* margin-bottom: 20px; */
 }

 .location-title {
     font-size: 18px;
     font-weight: 600;
     color: #333;
     margin-bottom: 8px;
 }

 .location-subtitle {
     font-size: 14px;
     color: #666;
     margin-bottom: 16px;
 }

 .location-amenities {
     margin-bottom: 16px;
 }

 .amenities-title {
     font-size: 14px;
     font-weight: 600;
     color: #333;
     margin-bottom: 8px;
 }

 .amenities-list {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
 }

 .amenity-tag {
     padding: 4px 8px;
     background-color: #04615c26;
     color: #062f2c;
     border-radius: 12px;
     font-size: 12px;
 }

 .location-actions {
     display: flex;
     gap: 12px;
 }

 .action-button {
     flex: 1;
     padding: 5px 16px;
     border: none;
     border-radius: 8px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
     font-family: 'Frutiger LT Arabic';
 }

 .primary-button {
     background-color: rgb(242, 242, 242);
     color: rgb(96, 96, 96);
 }

 .primary-button:hover {
     background-color: #04615c;
     color: white;
 }

 .secondary-button {
     /* background-color: #f0f0f0; */
     color: #04615c;
 }

 .secondary-button:hover {
     background-color: #e0e0e0;
 }

 /* Directions View */
 .directions-view {
     display: none;
     padding: 10px;
     /* Ensure consistent layout when view is shown */
     position: relative;
     width: 100%;
     box-sizing: border-box;
 }

 .directions-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0px 4px 0px 4px;
     margin-bottom: 10px;
     /* border-bottom: 1px solid #f0f0f0; */
 }

 .directions-header .back-button {
     margin-right: 12px;
     background: none;
     border: none;
     cursor: pointer;
     padding: px;
     color: #666;
 }

 .directions-header .view-title {
     font-size: 20px;
     font-weight: 600;
     color: #333;
     flex: 1;
 }

 .header-options {
     display: none !important;
     align-items: center;
     gap: 8px;
 }

 .accessible-label {
     font-size: 12px;
     color: #666;
 }

 .toggle-switch {
     position: relative;
     width: 40px;
     height: 20px;
 }

 .toggle-switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 .toggle-switch label {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     border-radius: 20px;
     transition: 0.4s;
 }

 .toggle-switch label:before {
     position: absolute;
     content: "";
     height: 16px;
     width: 16px;
     left: 2px;
     bottom: 2px;
     background-color: white;
     border-radius: 50%;
     transition: 0.4s;
 }

 .toggle-switch input:checked+label {
     background-color: #007AFF;
 }

 .toggle-switch input:checked+label:before {
     transform: translateX(20px);
 }

 .more-options {
     background: none;
     border: none;
     cursor: pointer;
     padding: 4px;
     color: #666;
     font-size: 16px;
     display: none;
 }

 .hide-scrollbar {
     overflow: auto;
     /* or scroll */
     scrollbar-width: none;
     /* Firefox */
     -ms-overflow-style: none;
     /* Internet Explorer 10+ */
 }

 .hide-scrollbar::-webkit-scrollbar {
     display: none;
     /* Chrome, Safari, and Opera */
 }

 .departure-input-container {
     position: relative;
     margin-left: 16px;
     margin-right: 16px;
     margin-bottom: 6px;
     margin-top: 10px;
 }

 .Navigationbtncontrollers {
     display: flex;
 }

 .departure-input {
     width: 100%;
     padding: 12px 16px 12px 12px;
     border: none;
     border-radius: 8px;
     font-size: 14px;
     background-color: #f8f9fa;
     color: #333;
     outline: none;
     box-sizing: border-box;
     height: 40px;
     font-family: "Frutiger LT Arabic";
 }

 .departure-input:focus {
     border-color: #007AFF;
     background-color: #fff;
 }

 .departure-input.filled {
     color: #333;
     font-weight: 500;
     background-color: rgb(242, 242, 242);
     ;
 }

 .departure-input::placeholder {
     color: #999;
     font-weight: 400;
 }

 .departure-results {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background: white;
     border: 0px solid #e0e0e0;
     border-top: none;
     border-radius: 0 0 8px 8px;
     max-height: 200px;
     overflow-y: auto;
     z-index: 1000;
 }

 .departure-result-item {
     display: flex;
     align-items: center;
     padding: 12px 16px;
     cursor: pointer;
     /* border-bottom: 1px solid #f0f0f0; */
 }

 .departure-result-item:last-child {
     border-bottom: none;
 }

 .departure-result-item:hover {
     background-color: #f8f9fa;
 }

 .departure-result-icon {
     width: 24px;
     height: 24px;
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 12px;
     font-size: 12px;
     color: white;
 }

 .departure-result-details {
     flex: 1;
 }

 .departure-result-name {
     font-size: 14px;
     font-weight: 500;
     color: #333;
     margin-bottom: 2px;
 }

 .departure-result-address {
     font-size: 12px;
     color: #666;
 }

 .route-summary {
     padding: 0px 16px;
 }

 .add-destination {
     display: flex;
     align-items: center;
     padding: 12px 0;
     display: none !important;
     color: #666;
     font-size: 14px;
     cursor: pointer;
 }

 .add-icon {
     margin-right: 8px;
     font-size: 16px;
 }

 .time-estimate {
     display: flex;
     justify-content: space-between;
     align-items: center;
     /* padding: 16px 0; */
     text-align: center;
 }

 .time-estimate>div {
     width: 33%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     /* Ensures vertical centering */
     gap: 4px;
     /* Optional spacing between label and value */
 }

 .time-label {
    font-size: 13px;
    font-weight: 700;
    color: #6c757d;
    margin-bottom: 5px;
 }

 #stepsButton:hover {
     background-color: #2574bb;
     /* Change color on hover */
     color: #ffffff;
     /* Change text color on hover */
 }

 #endRoutebtn:hover {
     background-color: #ef4129;
     /* Change color on hover */
     color: #ffffff;
     /* Change text color on hover */
 }

 .time-value {
     font-size: 12px;
     font-weight: 100;
     color: #2c3e50;
 }

 .steps-button {
     flex: 1;
     min-width: 95px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 8px;
     border: none;
     border-radius: 8px;
     font-weight: 500;
     font-size: 12px;
     color: #2c3e50;
     cursor: pointer;
     transition: all 0.2s ease;
     /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
     margin: 10px 3px;
     font-family: 'Frutiger LT Arabic';
 }

 .steps-button:hover {
     background-color: #0056CC;
 }

 .journey-breakdown {
     flex: 1;
     min-width: 44px;
     display: none;
     flex-direction: row;
     align-items: center;
     gap: 6px;
     padding: 20px 6px;
     background: white;
     border-radius: 10px;
     /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); */
     transition: all 0.3s ease;
     /* border: 1px solid #eaeaea;*/
 }

 .journey-step:hover {
     color: #04615c;
     /* transform: translateY(-8px); */
     /* box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border-color: #4DA8DA; */
 }

 .journey-step {
     display: flex;
     align-items: center;
     gap: 4px;
     font-size: 12px;
     color: #666;
 }

 .step-icon {
     width: 40px;
     height: 40px;
     background: rgb(242, 242, 242);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: rgb(96, 96, 96);
     font-size: 14px;
     transition: all 0.3s ease;
 }

 .journey-step:hover .step-icon {
     /* background: #04615c; */
     color: #04615c;
     transform: scale(1.1);
 }

 .step-time {
     font-size: 0.65rem;
     font-weight: 600;
     color: #2c3e50;
     text-align: center;
 }

 .step-label {
     font-size: 0.9rem;
     color: #6c757d;
     text-align: center;
     display: none;
 }

 .departure-search-icon {
     position: absolute;
     left: 12px;
     top: 50%;
     transform: translateY(-50%);
     color: #999;
     font-size: 14px;
 }

 .destination-container {
     display: flex;
     align-items: center;
     /* padding: 12px 16px; */
     margin-bottom: 15px !important;
     margin: 0 16px;
     background-color: #f8f9fa;
     border-radius: 8px;
     /* border: 1px solid #e0e0e0; */
 }

 .destination-icon {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background-color: #34C759;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 12px;
     color: white;
     font-size: 10px;
 }

 .destination-text {
     font-size: 14px;
     color: #333;
     font-weight: 500;
     flex: 1;
 }

 .swap-locations-btn {
     background: none;
     border: none;
     display: none;
     cursor: pointer;
     padding: 4px;
     color: #999;
 }

 /* Popular Locations View */
 .popular-locations-view {
     display: none;
     padding: 0;
 }

 .popular-section-title {
     font-size: 16px;
     font-weight: 600;
     color: #333;
     margin: 20px 16px 12px 16px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .refresh-icon {
     color: #999;
     cursor: pointer;
     font-size: 16px;
     display: none;
 }

 .popular-locations-list {
     display: flex;
     flex-direction: column;
     gap: 9px;
     padding: 0 16px 16px 16px;
     overflow-y: auto;
     max-height: 225px;
 }

 .popular-location-item {
     display: flex;
     align-items: center;
     padding: 12px 0;
     cursor: pointer;
     transition: all 0.2s ease;
     /* border-bottom: 1px solid #f0f0f0; */
 }

 .popular-location-item:last-child {
     border-bottom: none;
 }

 .popular-location-item:hover {
     background-color: #f8f9fa;
     margin: 0 -16px;
     padding: 12px 16px;
 }

 .popular-location-icon {
     width: 32px;
     height: 32px;
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 12px;
     font-size: 16px;
     color: white;
     flex-shrink: 0;
 }

 .popular-location-icon.amex {
     background-color: #2E5BBA;
 }

 .popular-location-icon.panda {
     background-color: #D32F2F;
 }

 .popular-location-icon.starbucks {
     background-color: #00704A;
 }

 .popular-location-details {
     flex: 1;
     min-width: 0;
 }

 .flag-icon {
     vertical-align: middle;
     border: 1px solid #eee;
 }

 .popular-location-name {
     font-size: 14px;
     font-weight: 500;
     color: #333;
     margin-bottom: 2px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .popular-location-address {
     font-size: 12px;
     color: #666;
     font-weight: 400;
 }

 /* Navigation View */
 /* Vertical Line Dots Navigation Enhancement */

 /* Navigation Steps Container with Timeline */
 .navigation-steps-container {
     padding: 2px 17px;
     max-height: 400px;
     overflow-y: auto;
     position: relative;
 }

 #navigationStepsList {
     display: flex;
     flex-direction: column;
     gap: 0;
     position: relative;
 }

 /* Vertical Timeline Line */
 /* #navigationStepsList::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 40px;
    bottom: 20px;
    width: 2px;
    background: linear-gradient(to bottom, #878787f7 0%, #ddd 10%, #ddd 10%, #ddd 90%, #ddd 90%, #878787f7 100%);
    z-index: 11;
    margin-bottom: 20px;
} */

 #navigationStepsList::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 44px;
    bottom: 28px;
    width: 0px;
    border-left: 2px dashed #b3b3b3;
    z-index: 11;
    margin-bottom: 20px;
 }

 /* Location Header Styles with Dots */
 .location-header {
     display: flex;
     align-items: center;
     padding: 12px 0;
     margin: 8px 0;
     position: relative;
     z-index: 2;
     background: white;
 }

 #NoResultsFound {
     font-size: 13px;
     text-align: center;
     display: none;
     padding: 13px 0px;
     color: #636363;
 }

 .mapboxgl-ctrl button:not(:disabled):hover {
     transform: translateY(-3px);
     box-shadow: 0 7px 15px rgba(26, 42, 108, 0.2), inset 0 0 0 1px rgba(26, 42, 108, 0.1);
     color: #1a2a6c;
     background: rgba(255, 255, 255, 1);
 }

 .mapboxgl-ctrl-group button {
     background-color: white;
     border-radius: 7px !important;
     font-family: 'Frutiger LT Arabic';
     font-weight: 700;
     width: 35px;
     height: 35px;
     box-shadow: 0 4px 10px rgba(26, 42, 108, 0.1), inset 0 0 0 1px rgba(26, 42, 108, 0.05);
     margin: 2px 4px;
     transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }

 .mapboxgl-ctrl-group:hover {
     transform: translateY(-2px);
     box-shadow: 0 7px 15px rgba(26, 42, 108, 0.2), inset 0 0 0 1px rgba(26, 42, 108, 0.1);
     color: #1a2a6c;
     background: rgba(255, 255, 255, 1);
 }

 .mapboxgl-ctrl-group button:hover {
     transform: translateY(-2px);
     box-shadow: 0 7px 15px rgba(26, 42, 108, 0.2), inset 0 0 0 1px rgba(26, 42, 108, 0.1);
     color: #1a2a6c;
     background: rgba(255, 255, 255, 1);
 }

 #currentlocation {
     float: right;
     font-family: 'Frutiger LT Arabic';
     position: relative;
     display: flex;
     flex-direction: column;
     width: 43px;
     background: white;
     border-radius: 10px;
     box-shadow: 0 10px 30px rgba(26, 42, 108, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
     padding: 4px 0px;
     margin: 13% 2%;
     z-index: 10;
     text-align: center;
     transition: transform 0.3s ease;
 }

 #currentlocation:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 35px rgba(26, 42, 108, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
 }

 #cur_btn {
     transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }



 #cur_btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 7px 15px rgba(26, 42, 108, 0.2), inset 0 0 0 1px rgba(26, 42, 108, 0.1);
     color: #1a2a6c;
     background: rgba(255, 255, 255, 1);
 }


 .location-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     margin-right: 16px;
     flex-shrink: 0;
     border: 2px solid white;
     box-shadow: 0 0 0 2px currentColor;
     position: relative;
     z-index: 3;
 }

 .location-dot.departure {
     background-color: #04615c;
     color: #04615c;
 }

 .location-dot.destination {
     background-color: #04615c;
     color: #04615c;
     width: 12px !important;
 }

 .location-text {
     font-size: 16px;
     color: #333;
 }

 .glass-box {
     width: 300px;
     padding: 0px;
     border-radius: 16px;
     background: rgba(255, 255, 255, 0.1);
     /* semi-transparent background */
     backdrop-filter: blur(10px);
     /* main glass effect */
     -webkit-backdrop-filter: blur(10px);
     /* for Safari */
     /* border: 1px solid rgba(255, 255, 255, 0.2); */
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
     color: white;
 }

 .glass-box:hover {
     backdrop-filter: blur(15px);
     transform: scale(1.02);
     transition: 0.3s ease;
 }

 /* Clean Step Item with Timeline Dots */
 .clean-step-item {
     display: flex;
     align-items: flex-start;
     padding: 3px 0;
     padding-left: 20px;
     padding-right: 20px;
     position: relative;
     z-index: 2;
     background: white;
     transition: background-color 0.3s ease, color 0.3s ease;
 }

 .clean-step-item:hover .clean-step-text,
 .clean-step-item:hover .clean-step-time {
     color: #04615c;
     /* Change text color */
 }

 .clean-step-item:hover::before {
     background-color: #04615c;
     /* Change background color on hover */
 }

 .clean-step-item:hover .clean-step-icon {
     background-color: #04615c;
     /* Change background color */
     color: white;
     /* Change icon color */
 }

 /* Step Timeline Dot */
 .clean-step-item::before {
     content: '';
     left: 20px;
     top: 17px;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background-color: #ddd;
     border: 2px solid white;
     z-index: 3;
     margin-top: 15px;
 }

 .clean-step-icon {
     width: 40px;
     height: 40px;
     background-color: #e3e3e3;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 12px;
     margin-left: 16px;
     font-size: 30px;
     color: #04615c;
     flex-shrink: 0;
     margin-top: 0px;
     user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
     cursor: pointer;
 }

 .clean-step-icon:hover {
     background-color: #04615c;
     color: white;
 }

 .clean-step-content {
     flex: 1;
 }

 .clean-step-text {
     font-size: 12px;
     color: #333;
     line-height: 1.5;
     margin-bottom: 0px;
 }

 .clean-step-time {
     font-size: 12px;
     color: #666;
     font-style: italic;
 }

 /* Enhanced Visual Hierarchy */
 .location-header:first-child {
     margin-top: 0;
 }

 .location-header:last-child {
     margin-bottom: 0;
 }

 /* Alternative: Dotted Line Style */
 .navigation-steps-container.dotted-style #navigationStepsList::before {
     background: linear-gradient(to bottom,
             #28a745 0%,
             #28a745 10%,
             transparent 10%,
             transparent 90%,
             #dc3545 90%,
             #dc3545 100%);
     border-left: 2px dotted #ddd;
     background: none;
 }

 /* Alternative: Dashed Line Style */
 .navigation-steps-container.dashed-style #navigationStepsList::before {
     background: linear-gradient(to bottom,
             #28a745 0%,
             #28a745 10%,
             transparent 10%,
             transparent 90%,
             #dc3545 90%,
             #dc3545 100%);
     border-left: 2px dashed #ddd;
     background: none;
 }

 /* Mobile Responsive */
 @media (max-width: 768px) {
     .navigation-steps-container {
         max-height: 300px;
     }

     #navigationStepsList::before {
         left: 10px;
     }

     .clean-step-item::before {
         left: 7px;
         width: 6px;
         height: 6px;
     }

     .clean-step-icon {
         margin-left: 14px;
     }

     .clean-step-text {
         font-size: 13px;
     }

     .clean-step-time {
         font-size: 11px;
     }
 }



 .current-instruction {
     background-color: #007AFF;
     color: white;
     padding: 16px;
     border-radius: 8px;
     margin-bottom: 20px;
     text-align: center;
 }

 .instruction-icon {
     font-size: 24px;
     margin-bottom: 8px;
 }

 .instruction-text {
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 4px;
 }

 .instruction-distance {
     font-size: 14px;
     opacity: 0.9;
 }

 .steps-list {
     margin-bottom: 20px;
 }

 .steps-title {
     font-size: 14px;
     font-weight: 600;
     color: #333;
     margin-bottom: 12px;
 }

 .step-item {
     display: flex;
     align-items: center;
     padding: 8px 0;
     border-bottom: 1px solid #eee;
 }

 .step-item:last-child {
     border-bottom: none;
 }

 .step-number {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: 600;
     margin-right: 12px;
 }

 .step-number.completed {
     background-color: #28a745;
     color: white;
 }

 .step-number.current {
     background-color: #007AFF;
     color: white;
 }

 .step-number.upcoming {
     background-color: #f0f0f0;
     color: #666;
 }

 .step-content {
     flex: 1;
 }

 .step-text {
     font-size: 14px;
     color: #333;
     margin-bottom: 2px;
 }

 .step-distance {
     font-size: 12px;
     color: #666;
 }

 .navigation-actions {
     display: flex;
     gap: 12px;
 }

 .next-step-btn,
 .end-navigation-btn {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 12px 16px;
     border: none;
     /* border-radius: 8px; */
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
 }

 .next-step-btn {
     background-color: #007AFF;
     color: white;
 }

 .next-step-btn:hover {
     background-color: #0056CC;
 }

 .next-step-btn:disabled {
     background-color: #ccc;
     cursor: not-allowed;
 }

 .end-navigation-btn {
     background-color: #04615c;
     color: #ffffff;
     ;
 }

 .end-navigation-btn:hover {
     background-color: #e0e0e0;
 }

 /* Path visualization styles */
 .path-line {
     stroke: #007AFF;
     stroke-width: 3;
     fill: none;
     stroke-dasharray: 5, 5;
     animation: pathAnimation 2s linear infinite;
 }

 .path-marker {
     fill: #007AFF;
 }

 .path-marker.start {
     fill: #34C759;
 }

 .path-marker.end {
     fill: #FF3B30;
 }

 @keyframes pathAnimation {
     to {
         stroke-dashoffset: -10;
     }
 }

 /* Mobile States */
@media (max-width: 768px) {
    .menu-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100% !important;
        border-radius: 16px 16px 0 0;
        /* Safari fixes */
        -webkit-transform: translateY(calc(100% - 80px)); /* Prefix for Safari */
        transform: translateY(calc(100% - 80px));
        -webkit-transition: -webkit-transform 0.3s ease, max-height 0.3s ease; /* Prefix needed */
        transition: transform 0.3s ease, max-height 0.3s ease;
        max-height: 100vh;
        height: auto;
        overflow: visible;
        /* Safari rendering optimizations */
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
        z-index: 1000; /* Ensure proper stacking */
    }
    
    .menu-container.mobile-search-only {
        -webkit-transform: translateY(calc(100% - 30px)); /* Safari prefix */
        transform: translateY(calc(100% - 30px));
        max-height: 40px;
        overflow: hidden; /* Prevent content bleeding in Safari */
    }
    
    .menu-container.mobile-partial {
        -webkit-transform: translateY(calc(100% - 200px)); /* Safari prefix */
        transform: translateY(calc(100% - 200px));
        max-height: 220px;
        overflow: hidden; /* Fixes Safari clipping issues */
    }
    
    .menu-container.mobile-full {
        -webkit-transform: translateY(0); /* Safari prefix */
        transform: translateY(0);
        max-height: 100vh;
        overflow: visible; /* Maintain original behavior */
    }

    /* Show all menu items on mobile */
    .menu-container .menu-item.row-2,
    .menu-container .menu-item.row-3,
    .menu-container .menu-item.row-4 {
        display: flex;
    }
}

 @media (min-width: 769px) {
     .menu-container {
         position: fixed;
         top: 20px;
         left: 20px;
         bottom: auto;
         right: auto;
         width: auto;
         border-radius: 12px;
         transform: none;
     }
 }

 /* Original map styles preserved */
 .floor-container {
     background: rgba(255, 255, 255, 0.95);
     border-radius: 20px;
     box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
     padding: 30px;
     position: relative;
     max-width: 500px;
     width: 100%;
     text-align: center;
 }

 .floor-header {
     margin-bottom: 30px;
 }

 .floor-header h1 {
     font-size: 2.2rem;
     color: #1a2a6c;
     margin-bottom: 8px;
 }
 .mapboxgl-ctrl-right{
    display: none;
 }

 .floor-header p {
     font-size: 1.1rem;
     color: #555;
     font-weight: 400;
 }

 /* Modern Floor Selector Styles */
 #menu {
     float: right;
     font-family: 'Frutiger LT Arabic';
     position: relative;
     display: flex;
     flex-direction: column;
     width: 43px;
     background: white;
     border-radius: 10px;
     box-shadow: 0 10px 30px rgba(26, 42, 108, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
     padding: 0px 0;
     margin: 42% 2%;
     z-index: 10;
     transition: transform 0.3s ease;
 }

.category-icon-searchbar{
width: 45px;
    height: 45px;
    background: rgb(255 255 255);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3px;
    font-size: 21px;
    color: #04615c;
    /* box-shadow: 0 0 15px rgba(79, 195, 247, 0.2); */
    border: 1px solid #04615c;
    transition: all 0.3s ease;
}

 .category-icon-searchbar:hover {
     /* background: #04615c; Change background color on hover */
     color: #0a938c;
     border: 1px solid #0a938c;

     /* Optional: Change text color on hover */
 }

 .tippy-box[data-theme~='custom'] {
      background-color: #ffffff; /* tooltip background */
      color: #04615c;            /* tooltip text color */
      font-size: 14px;
      border-radius: 6px;
      padding: 6px 10px;
      box-shadow: 0 10px 30px rgba(26, 42, 108, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    }

    /* Optional: change arrow color */
    .tippy-box[data-theme~='custom'] .tippy-arrow {
      color: #ffffff;
    }

 #menu:hover {
     transform: translateY(-5px);
     box-shadow:
         0 15px 35px rgba(26, 42, 108, 0.25),
         inset 0 0 0 1px rgba(255, 255, 255, 0.8);
 }

 #menu::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 50px;
     background: white;
     border-radius: 15px 15px 0 0;
     z-index: -1;
     transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }

 .floor-item {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 35px;
     width: 35px;
     margin: 6px auto;
     border-radius: 7px;
     color: rgb(96, 96, 96);
     text-decoration: none;
     font-size: 0.9rem;
     font-weight: 600;
     background: rgba(255, 255, 255, 0.8);
     box-shadow: 0 4px 10px rgba(26, 42, 108, 0.1), inset 0 0 0 1px rgba(26, 42, 108, 0.05);
     transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
     z-index: 2;
 }

 .floor-item:hover {
     transform: translateY(-5px);
     box-shadow:
         0 7px 15px rgba(26, 42, 108, 0.2),
         inset 0 0 0 1px rgba(26, 42, 108, 0.1);
     color: #1a2a6c;
     background: rgba(255, 255, 255, 1);
 }

 .floor-active {
     background: #04615c;
     color: white !important;
     transform: scale(1.1);
     box-shadow: 0 7px 15px rgba(26, 42, 108, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.8) !important;
 }

 .floor-active:hover {
     background: #04615c;
     transform: scale(1.12) !important;
 }

 .floor-item::before {
     content: '';
     position: absolute;
     top: -5px;
     left: 50%;
     transform: translateX(-50%);
     width: 5px;
     height: 5px;
     background: #5a6ab0;
     border-radius: 50%;
     opacity: 0;
     transition: all 0.3s ease;
 }

 .mapboxgl-ctrl-icon {
     background-size: 25px;
 }

 .floor-active::before {
     opacity: 1;
     top: 3px;
     background: #ffd166;
 }

 /* .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl, .mapboxgl-ctrl-right .mapboxgl-ctrl:hover{
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(26, 42, 108, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
 } */

 .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,
 .mapboxgl-ctrl-right .mapboxgl-ctrl {
     float: right;
     /* margin: 0 10px 10px 0; */
     /* float: right; */
     font-family: 'Frutiger LT Arabic';
     /* position: relative; */
     display: flex;
     flex-direction: column;
     width: 43px;
     background: white;
     border-radius: 10px;
     box-shadow: 0 10px 30px rgba(26, 42, 108, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
     padding: 4px 0px;
     /* margin: 2% 2%; */
     z-index: 10;
     text-align: center;
     transition: transform 0.3s ease;
     
 }

 .floor-tooltip {
     position: absolute;
     /* left: 70px; */
     right: 70px;
     background: #04615c;
     color: white;
     padding: 5px 15px;
     border-radius: 30px;
     font-size: 0.9rem;
     font-weight: 500;
     white-space: nowrap;
     opacity: 0;
     transform: translateX(-10px);
     pointer-events: none;
     transition: all 0.4s ease;
 }

 .floor-item:hover .floor-tooltip {
     opacity: 1;
     transform: translateX(0);
 }

 /* Animation for floor indicator */
 @keyframes floor-pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(26, 42, 108, 0.4);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(26, 42, 108, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(26, 42, 108, 0);
     }
 }

 .floor-display {
     text-align: center;
     padding: 25px;
     background: linear-gradient(135deg, #1a2a6c, #3a56c9);
     border-radius: 15px;
     color: white;
     box-shadow: 0 10px 30px rgba(26, 42, 108, 0.3);
     margin-top: 30px;
 }

 .floor-display h2 {
     font-size: 1.2rem;
     font-weight: 400;
     margin-bottom: 10px;
     color: rgba(255, 255, 255, 0.9);
 }

 .floor-display .floor-number {
     font-size: 3.5rem;
     font-weight: 700;
     padding: 20px;
     border-radius: 50%;
     width: 140px;
     height: 140px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 15px;
     background: rgba(255, 255, 255, 0.1);
     border: 3px solid rgba(255, 255, 255, 0.2);
 }

 .floor-display .floor-name {
     font-size: 1.4rem;
     font-weight: 500;
     color: #ffd166;
 }

  @media (max-height: 500px) {
    .navigation-steps-container {
        padding: 2px 17px;
        max-height: 158px;
        overflow-y: auto;
        position: relative;
    }
    .mapboxgl-ctrl-bottom-right {
    bottom: 0px !important;
    }
    #mapcontrollers{
    margin-bottom: 250% !important;
    }
    .qr-modal {
    padding: 20px;
    }

     .dropdown-container {
     right: 60px !important;
    }

  }

  #mapcontrollers{
    box-shadow: none;
    background-color: transparent;
    margin-bottom: 375%; 
    width: 43px;
  }


 /* Responsive design */
 @media (max-width: 480px) {
     .floor-container {
         padding: 20px;
     }

     .floor-header h1 {
         font-size: 1.8rem;
     }

     .floor-display .floor-number {
         width: 120px;
         height: 120px;
         font-size: 3rem;
     }
 }

 .mapboxgl-ctrl.mapboxgl-ctrl-attrib {
     display: none;
 }

 a.mapboxgl-ctrl-logo {
     display: none;
     width: 100px !important;
     height: 19px !important;
     background-size: 80px 12px !important;
     background-image: url(./logo.png) !important;
 }

 /* Card container - main control panel */
 .card {
     position: absolute;
     top: 40px;
     left: 10px;
     width: 90%;
     max-width: 400px;
     background: #ffffff;
     border-radius: 3px;
     box-shadow: 0 0 0 1.5px rgb(0 0 0 / 20%);
     overflow: hidden;
     font-family: 'Frutiger LT Arabic';
     z-index: 100;
     display: none;
 }

 /* Each location input row */
 .location-input {
     display: flex;
     align-items: center;
     padding: 8px 12px;
 }

 .location-input:not(:last-child) {
     border-bottom: 1px solid #e0e0e0;
 }

 /* A/B label styling */
 .label {
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     color: #ffffff;
     margin-right: 8px;
     flex-shrink: 0;
 }

 /* Specific colors for A and B */
 .location-input.start .label {
     background-color: #3BB3D0;
     border-radius: 3px;
 }

 .location-input.end .label {
     background-color: #8B8ACC;
     border-radius: 3px;
 }

 /* Style the select dropdown */
 select {
     flex: 1;
     border: none;
     background: transparent;
     font-size: 14px;
     color: #333;
     padding: 6px 4px;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     width: 100%;
 }

 select:focus {
     outline: none;
 }

 /* Placeholder text in disabled option */
 select option[disabled] {
     color: #888;
 }

 .select2-container--default .select2-selection--single .select2-selection__arrow {
     height: 26px;
     position: absolute;
     top: 1px;
     right: 1px;
     width: 20px;
     display: none;
 }

 /* Clear (×) button styling */
 .clear-btn {
     margin-left: auto;
     background: none;
     border: none;
     font-size: 0px;
     color: #888;
     cursor: pointer;
 }

 .clear-btn:hover {
     color: #444;
 }

 /* Swap button between rows */
 .swap-btn {
     width: 21px;
     height: 21px;
     margin: -10px auto;
     background: #ffffff;
     border: 1px solid #e0e0e0;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     color: #555;
     cursor: pointer;
     z-index: 2;
 }

 .foo {
     color: #828282;
     margin-top: 5px;
     font-size: 10px;
 }

 .foo:hover {
     color: #ffffff;
 }

 .select2-results {
     font-family: 'Frutiger LT Arabic';
     font-size: 12px;
     display: block;
 }

 .select2-container--default .select2-selection--single {
     background-color: #fff;
     border: none !important;
     border-radius: 4px;
 }

 .select2-container--default .select2-search--dropdown .select2-search__field {
     border: 1px solid #aaa;
     border-radius: 4px;
 }

 .select2-container--default .select2-selection--single .select2-selection__rendered {
     color: #444;
     line-height: 28px;
     font-size: 13px;
 }

 .mapboxgl-popup-close-button {
     background-color: initial;
     border: 0;
     border-radius: 0 3px 0 0;
     cursor: pointer;
     position: absolute;
     right: 0;
     top: 0;
     font-size: 1.5em;
     width: 16px;
     color: white;
 }

 .mapboxgl-popup-content {
     background: #0090bf;
     border-radius: 3px;
     box-shadow: 0 1px 2px #0000001a;
     padding: 10px 10px 15px;
     pointer-events: auto;
     position: relative;
 }

 .mapboxgl-ctrl-bottom-right {
     bottom: 30px;
     right: 0
 }

 /* Directions panel styling */
 .directions-panel {
     bottom: unset;
     top: 145px;
     width: 401px;
     max-height: 85%;
     background-color: #e5e5e5;
     border-radius: 4px;
     overflow: hidden;
     position: absolute;
     left: 10px;
     display: none;
     color: white;
     font-family: 'Frutiger LT Arabic';
     overflow-y: auto;
     scrollbar-width: none;
     border: 1px solid #e0e0e0;
     box-shadow: 0 0 0 1px rgb(0 0 0 / 20%);
 }

 /* Hide scrollbar but keep functionality */
 .directions-panel::-webkit-scrollbar {
     width: 0;
     height: 0;
 }

 /* Summary bar */
 .summary {
     display: flex;
     justify-content: space-between;
     padding: 12px 5px;
     background-color: rgb(219 219 219 / 20%);
     color: #444;
     border-bottom: 1px solid lightgrey;
 }

 .summary .distance {
     font-size: 0.8em;
     padding-top: 3px;
 }

 .summary .time {
     font-size: 0.8em;
     color: #444;
     padding-top: 3px;
 }

 /* Instructions list */
 .instructions {
     list-style: none;
     position: relative;
     overflow-y: scroll;
     scrollbar-width: none;
     margin: 0;
     padding: 0;
     color: #444;
 }

 .instructions::-webkit-scrollbar {
     width: 0;
     height: 0;
 }

 /* Vertical dashed line */
 .instructions::before {
     content: '';
     position: absolute;
     top: 0px;
     bottom: 0px;
     left: 17px;
     width: 0;
     border-left: 4px dotted #44444480;
     z-index: 1;
 }

 .instruction {
     display: flex;
     height: 50px;
     left: 25px;
     position: relative;
     align-items: center;
     padding: 0 15px;
 }

 .instruction .letter,
 .instruction .icon {
     margin-right: 15px;
     min-width: 24px;
     text-align: center;
     position: relative;
     z-index: 2;
     border-radius: 10px;
     font-weight: bolder;
     height: 35px;
     width: 35px;
     align-content: center;
     font-size: 1.5em !important;
     color: white;
 }

 ul {
     display: block;
     list-style-type: disc;
     margin-block-start: 5px;
     margin-block-end: 5px;
     padding-inline-start: 25px;
     unicode-bidi: isolate;
 }

 .instruction .letter {
     font-weight: bold;
     font-size: 18px;
     background-color: #0000008f;
     border-radius: 10px;
     color: white;
 }

 .instruction .icon {
     font-size: 18px;
     background-color: #0000008f;
     border-radius: 10px;
 }

 .instruction .text {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .instruction .text .main {
     margin-bottom: 4px;
     line-height: 1.3;
     font-size: 0.8em;
     font-weight: 500;
 }

 .instruction .text .distance {
     font-size: 0.7em;
     color: #9f9f9f;
 }

 .cloes {
     background-color: rgb(219 219 219 / 20%);
     border: none;
     color: #444;
     font-size: 17px;
 }

 .cloes:hover {
     border: none;
     color: #B06161;
 }

 #endroute:hover {
     background-color: #d3d3d3;
     transform: scale(1.1);
     color: #B06161;
 }

 #endroute {
     width: 100%;
     background-color: #e5e5e5;
     border: none;
     color: #444;
     border-top: 1px solid lightgrey;
     height: 45px;
     font-family: 'Frutiger LT Arabic';
     font-size: 1em;
     transition: transform 0.3s ease, background-color 0.3s ease;
 }

 .from {
     position: relative;
     padding-left: 13px;
     width: 100%;
     font-size: 0.8em;
     font-weight: 700;
     margin-top: 10px;
 }

 .to {
     position: relative;
     padding-left: 14px;
     width: 100%;
     font-size: 0.8em;
     font-weight: 700;
     margin-bottom: 10px;
 }

 .destination {
     font-size: 0.8em;
     width: 8px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-top: 3px;
 }

 .expandcollapse {
     text-align: center;
     background-color: rgba(249, 249, 249, 0.83);
     padding-bottom: 10px;
     font-size: 1em;
     padding-top: 10px;
     color: #444;
     transition: transform 0.3s ease, background-color 0.3s ease;
 }

 .expandcollapse:hover {
     color: #ebab40;
     transform: scale(1.1);
 }

 .from,
 .instructions,
 .to {
     overflow: hidden;
     max-height: 0px;
     opacity: 0;
     transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s;
     margin-top: 0px;
     margin-bottom: 0px;
 }

 .from.expanded {
     max-height: 500px;
     opacity: 1;
     margin-top: 0px;
     transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s;
     color: #444;
     background-color: white;
     padding-top: 10px;
     padding-bottom: 10px;
 }

 .instructions.expanded {
     max-height: 385px;
     overflow-y: scroll;
     opacity: 1;
     transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s;
     background-color: white;
 }

 .to.expanded {
     max-height: 500px;
     opacity: 1;
     padding-bottom: 10px;
     padding-top: 10px;
     transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s;
     color: #444;
     background-color: white;
 }

 .select2-container {
     width: 90% !important;
     ;
     max-width: 400px !important;
     ;
     left: 10px !important;
 }

 .select2-container--open .select2-dropdown--below {
     width: 100% !important;
 }

 /* Simple, direct responsive styles */
 @media screen and (max-width: 768px) {
     .card {
         width: 50% !important;
         max-width: 90% !important;
         left: 5% !important;
         right: 5% !important;
     }

     .directions-panel {
         width: 80% !important;
         left: 11% !important;
         right: 10% !important;
         max-height: 70% !important;
         bottom: 38px;
         top: unset;
     }

     .instruction {
         height: 43px !important;
     }

     .instruction .letter,
     .instruction .icon {
         height: 40px !important;
         width: 40px !important;
         font-size: 1.2em !important;
     }

     .instruction .text .main {
         font-size: 13px !important;
     }

     .instruction .text .distance {
         font-size: 12px !important;
     }
 }

 @media screen and (max-width: 480px) {
     .card {
         width: 95% !important;
         max-width: 95% !important;
         left: 2% !important;
         right: 2% !important;
     }

     .location-input {
         padding: 6px !important;
     }

     .label {
         width: 28px !important;
         height: 28px !important;
         margin-right: 8px !important;
     }

     .swap-btn {
         width: 18px !important;
         height: 18px !important;
         font-size: 14px !important;
     }

     .directions-panel {
         width: 95% !important;
         left: 2.5% !important;
         right: 2.5% !important;
     }
 }


 /* Legend Toggle Button */
 #legendToggle {
     position: fixed;
     bottom: 30px;
     left: 0;
     background-color: #04615c;
     color: white;
     padding: 8px 0px;
     writing-mode: vertical-rl;
     text-orientation: mixed;
     border-radius: 0 6px 6px 0;
     cursor: pointer;
     z-index: 1000;
     user-select: none;
     /* Standard */
     -webkit-user-select: none;
     /* Chrome/Safari */
     -moz-user-select: none;
     /* Firefox */
     -ms-user-select: none;
     /* IE/Edge */
     cursor: pointer;
     /* Optional: makes it feel clickable */
 }

 /* Legend Container */
 #legendPanel {
     position: fixed;
     bottom: 45px;
     left: -575px;
     /* Hidden initially */
     background-color: white;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
     padding: 10px 20px;
     display: flex;
     align-items: center;
     gap: 20px;
     transition: left 0.4s ease;
     z-index: 999;
 }

 #legendPanel.show {
     left: 50px;
     /* Slide in */
 }

 .legend-item {
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: 14px;
 }

 .icon {
     width: 20px;
     height: 20px;
     border-radius: 3px;
     display: inline-block;
 }

 .short {
     background-color: purple;
 }

 .intl {
     background-color: maroon;
 }

 .long {
     background-color: orange;
 }

 .valet {
     background-color: lightgray;
     border: 1px solid #ccc;
 }


 .dropdown-container {
     position: fixed;
     top: 20px;
     right: 20px;
     /* ⬅ Top Right */
     z-index: 1000;
     display: flex;
 }

 .dropdown {
     display: flex;
     align-items: center;
     background: white;
     border-radius: 12px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     width: 175px;
     cursor: pointer;
 }

 .dropdown-content {
     padding: 5px;
     flex-grow: 1;
     text-align: center;
 }

 .dropdown-title {
     font-weight: bold;
     font-size: 11.5px;
 }

 .dropdown-subtitle {
     font-size: 13px;
     color: gray;
 }

 .dropdown-arrow {
     background-color: #04615c;
     color: white;
     padding: 0 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     font-size: 18px;
     height: 55px;
     user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     cursor: pointer;
 }

 .dropdown-list {
     display: none;
     margin-top: 60px;
     background: white;
     border-radius: 8px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     position: absolute;
     right: 54;
     width: 175px;
     text-align: center;
 }

 .dropdown-list.show {
     display: block;
 }

 .dropdown-option {
     padding: 10px 15px;
     border-bottom: 1px solid #eee;
     cursor: pointer;
     font-size: 12px;
 }

 .dropdown-option:last-child {
     border-bottom: none;
 }

 .dropdown-option:hover {
     background-color: #f5f5f5;
 }

 #stepsContainer {
     height: 200px;
     overflow-y: scroll;
 }

 .navigation-header {
     padding-left: 17px;
     margin-bottom: -15px;
     display: none;
 }

 #splash-screen {
     position: fixed;
     width: 100%;
     height: 100%;
     background: white;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
 }

 .loader-wrapper {
     position: relative;
     width: 250px;
     height: 250px;
 }

 .loader-ring {
     width: 100%;
     height: 100%;
     border: 2px solid #ddd;
     border-top: 5px solid #04615c;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     position: absolute;
     top: 0;
     left: 0;
 }


 .loader-logo {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     max-width: 80%;
     max-height: 80%;
     object-fit: contain;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .hidden {
     display: none;
 }

 .fade-out {
     opacity: 0;
     transition: opacity 0s ease-out;
 }

 .menu-container.hide {
     padding: 12px;
     display: none;
     opacity: 0;
     transition: opacity 0.5s ease-out;
 }

 .menu-container.show {
    padding: 12px;
     /* padding: 12px; */
     display: block;
     opacity: 1;
     /* transition: opacity 0.5s ease-in; */
 }

 .language-panel {
     position: absolute;
     top: 20px;
     left: 20px;
     width: 100%;
     height: 100%;
     background-color: white;
     z-index: 1000;
     transform: translateX(100%);
     transition: transform 0.3s ease-in-out;
     height: auto;
     max-height: 250px;
     overflow: hidden;
     border-radius: 12px;
 }

 .language-panel.show {
     transform: translateX(0);
 }

 .language-panel.hide {
     transform: translateX(100%);
 }

 .back-button {
     background: none;
     border: none;
     font-size: 0px;
     cursor: pointer;
     color: #333;
     margin-right: 10px;
 }

 .header {
     display: flex;
     align-items: center;
     padding: 15px;
     border-bottom: 1px solid #eee;
     font-size: 20px;
     font-weight: 600;
     color: #333;
 }

 #nearbyContainer {
     display: none;
     position: absolute;
     /* width: 100%; */
     /* height: 57%; */
     background-color: white;
     z-index: 1000;
     transition: transform 0.3s ease-in-out;
     top: 20px;
     left: 20px;
     height: auto;
     max-height: 506px;
 }

 #nearbyContainer.show {
     transform: translateX(0);
 }

 #nearbyContainer.hide {
     transform: translateX(100%);
 }

 /* Main Categories Items */
 .category-item {
     /* background: rgba(25, 50, 90, 0.7); */
     /* border-radius: 12px; */
     /* padding: 20px 10px; */
     text-align: center;
     transition: all 0.3s ease;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     align-items: center;
     /* border: 1px solid rgba(64, 169, 255, 0.1); */
     /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); */
     position: relative;
     overflow: hidden;
     margin: 3px;
 }

 /* Default state (non-hover) */
 .category-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 5px;
     /* background: linear-gradient(90deg, #1a75bc, #29b6f6); */
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 /* Hover state */
 .category-item:hover {
     transform: translateY(0px);
     /* background: rgba(35, 65, 120, 0.8);
            border-color: rgba(79, 195, 247, 0.4);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); */
 }

 .category-item:hover::before {
     opacity: 1;
 }

 

 .category-icon {
     width: 45px;
     height: 45px;
     background: #b1e3e0;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 3px;
     font-size: 21px;
     color: #04615c;
     /* box-shadow: 0 0 15px rgba(79, 195, 247, 0.2); */
     /* border: 2px solid rgba(50, 50, 50, 0.3); */
     transition: all 0.3s ease;
 }

 .category-icon:hover {
     /* background: #04615c; Change background color on hover */
     color: #04615c;
     /* Optional: Change text color on hover */
 }

 .category-item:hover .category-icon {
     /* background: rgba(33, 150, 243, 0.2); */
     transform: scale(1.05);
     /* box-shadow: 0 0 20px rgba(79, 195, 247, 0.4); */
 }

 .category-label {
     font-size: 10px;
     font-weight: 500;
     color: rgb(74, 78, 87);
     line-height: 1.4;
     transition: all 0.3s ease;
     margin: 10px 0px;
 }

 .fa-parking:before,
 .fa-square-parking:before {
     content: "\f540";
     font-size: 22px;
 }

 .category-item:hover .category-label {
     color: #04615c;
     /* text-shadow: 0 0 8px rgba(79, 195, 247, 0.5); */
 }

 /* Responsive adjustments */
 @media (max-width: 992px) {
     .categories-grid {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 @media (max-width: 768px) {
     .categories-grid {
         grid-template-columns: repeat(4, 1fr);
     }

     .container {
         padding: 20px;
     }

     header h1 {
         font-size: 2rem;
     }
 }

 @media (max-width: 480px) {
     .categories-grid {
         grid-template-columns: repeat(4, 1fr);
     }

     .category-item {
         /* flex-direction: row; */
         /* text-align: left; */
         padding: 5px;
     }

     .category-icon {
         margin-bottom: 0;
         width: 50px;
         height: 50px;
         font-size: 24px;
     }
 }

 /* Animation for expanding categories */
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .additional-categories {
     animation: fadeIn 0.5s ease-out;
 }

 .close-button {
     background: white;
     ;
     border: none;
     color: black;
     font-size: 15px;
     font-weight: bold;
     cursor: pointer;
     position: absolute;
     top: 8px;
     right: 10px;
     border-radius: 3px;
     width: 30px;
     height: 30px;
     transition: color 0.3s;
 }

 .close-button:hover {
     color: #04615c;
     transform: scale(1) !important;
     background-color: white;
 }

 .side-menu-button {
     position: fixed;
     top: 20px;
     right: 20px;
     background-color: #777;
     color: white;
     border: none;
     border-radius: 5px;
     padding: 10px 15px;
     cursor: pointer;
     z-index: 1001;
     transition: transform 0.3s ease;
 }

 .side-menu-button:hover {
     transform: scale(1.1);
 }

 .popup-menu {
     font-family: 'Frutiger LT Arabic';
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.8);
     width: 400px;
     max-height: 96vh;
     background: #fff;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
     border-radius: 10px;
     overflow-y: auto;
     padding: 20px;
     opacity: 0;
     transition: all 0.4s ease;
     z-index: 1000;
     display: none;
     animation: fadeInPopup 0.5s ease forwards;
     font-size: 0.7em;
 }

 @keyframes fadeInPopup {
     from {
         transform: translate(-50%, -50%) scale(0.8);
         opacity: 0;
     }

     to {
         transform: translate(-50%, -50%) scale(1);
         opacity: 1;
     }
 }

 .popup-menu.open {
     display: block;
 }

 .menu-header {
     font-size: 18px;
     text-align: center;
     margin-bottom: 20px;
     font-family: 'Frutiger LT Arabic';
 }

 .tabs {
     display: flex;
     justify-content: space-between;
     margin-bottom: 20px;
 }

 .tab {
     flex: 1;
     padding: 10px;
     background-color: #ddd;
     text-align: center;
     font-weight: bold;
     margin-right: 5px;
     border-radius: 5px;
 }

 .tab:last-child {
     margin-right: 0;
 }

 .tools {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px;
 }

 .tool-card {
     background-color: rgb(242, 242, 242);
     border-radius: 8px;
     padding: 20px;
     text-align: center;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .tool-card:hover {
     color: #04615c;
     transform: scale(1) !important
 }

 .tool-card i {
     display: block;
     font-size: 20px;
     margin-bottom: 5px;
 }

 .tool-card.active {
     background-color: #04615c;
     border: 2px solid #04615c;
     color: white;
 }

 .tool-card.active i {
     color: white;
 }

 .reset-button {
     margin-top: 20px;
     padding: 10px;
     text-align: center;
     background-color: rgb(242, 242, 242);
     border-radius: 6px;
     cursor: pointer;
 }

 .reset-button:hover {
     background-color: #e0e0e0;
     color: #04615c;
 }

 .footer {
     text-align: right;
     font-size: 12px;
     margin-top: 30px;
     color: #555;
 }

 .theme-toggle {
     display: flex;
     align-items: center;
     margin-top: 20px;
     justify-content: flex-end;
 }

 .toggle-switch {
     position: relative;
     display: inline-block;
     width: 50px;
     height: 24px;
     margin-left: 10px;
 }

 .toggle-switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     transition: 0.4s;
     border-radius: 24px;
 }

 .slider:before {
     position: absolute;
     content: "";
     height: 18px;
     width: 18px;
     left: 3px;
     bottom: 3px;
     background-color: white;
     transition: 0.4s;
     border-radius: 50%;
 }

 .toggle-switch input:checked+.slider {
     background-color: #04615c;
 }

 .toggle-switch input:checked+.slider:before {
     transform: translateX(26px);
 }

 [dir="rtl"] .tools {
     direction: rtl;
 }

 /* [dir="rtl"] .tool-card {
  text-align: right;
} */

 [dir="rtl"] .footer {
     text-align: left;
 }

 [dir="rtl"] .menu-header {
     font-family: 'Frutiger LT Arabic';
 }

 /* Navigation Playback Styles */
 .playback-controls {
     padding: 7% 5% 0% 5%;
     /* position: fixed; */
     bottom: 20px;
     left: 50%;
     /* transform: translateX(-50%); */
     background: white;
     border-radius: 12px;
     /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); */
     /* width: 400px; */
     z-index: 1000;
     transition: opacity 0.3s ease;
 }

 .playback-controls.hidden {
     display: none;
 }

 .playback-header {
     padding: 15px 20px;
     border-bottom: 1px solid #eee;
     display: none;
     justify-content: space-between;
     align-items: center;
 }

 .playback-title {
     font-size: 16px;
     font-weight: 600;
     color: #333;
 }

 .playback-close {
     background: none;
     border: none;
     font-size: 24px;
     color: #666;
     cursor: pointer;
     padding: 0;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .playback-close:hover {
     color: #333;
 }

 .playback-body {
     /* margin-top: 20px; */
     display: flex;
     flex-direction: column;
     /* gap: 15px; */
 }

 .playback-progress {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .playback-progress-bar {
     width: 100%;
     height: 10px;
     background: rgb(242, 242, 242);
     border-radius: 10px;
     overflow: hidden;
     position: relative;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .playback-progress-bar:hover {
     background: rgba(255, 255, 255, 0.2);
 }

 .playback-progress-fill {
     height: 100%;
     width: 35%;
     background: linear-gradient(90deg, #00b09b);
     border-radius: 10px;
     position: relative;
     transition: width 0.2s ease;
 }

 .playback-progress-fill::after {
     content: '';
     position: absolute;
     right: -8px;
     top: 50%;
     transform: translateY(-50%);
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: white;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

 .playback-time {
     display: flex;
     justify-content: space-between;
     color: #666;
     font-size: 0.8rem;
     font-weight: 500;
 }

 .playback-controls-row {
     display: flex;
     justify-content: center;
     align-items: center;
     /* gap: 25px; */
     flex-wrap: wrap;
 }

 .playback-btn {
     margin: 5px;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     border: none;
     /* background: linear-gradient(135deg, #8e2de2, #4a00e0); */
     background: #00b09b;
     ;
     color: white;
     font-size: 1.3rem;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.3s ease;
     /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
     position: relative;
     overflow: hidden;
 }

 .playback-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
 }

 .play-btn {
     width: 32px;
     height: 32px;
     font-size: 0.9rem;
     /* background: linear-gradient(135deg, #00b09b); */
     color: #2c3e50;
     background: rgb(242, 242, 242);
 }

 .stop-btn {
     /* background: linear-gradient(135deg, #ff416c, #ff4b2b); */
     color: #2c3e50;
     background: rgb(242, 242, 242);
     font-size: 0.9rem;
 }


 .play-btn:hover {

     background: linear-gradient(135deg, #00b09b);

     color: white;
 }

 .stop-btn:hover {
     background: linear-gradient(135deg, #ff4b2b);
     color: white;
 }

 .hidden {
     display: none;
 }

 .playback-speed {
     display: flex;
     align-items: center;
     /* gap: 10px; */
     background: rgb(242, 242, 242);
     padding: 3px 14px;
     border-radius: 50px;
     backdrop-filter: blur(5px);
     height: 32px;
     /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
     margin-left: 10px;
 }

 .playback-speed label {
     color: #666;
     font-weight: 500;
     font-size: 0.9rem;
 }

 #play-route-btn:hover {
     color: white;
     background: #06a7e0;
 }

 .speed-select {
     background: rgba(255, 255, 255, 0.15);
     border: 1px solid rgba(255, 255, 255, 1);
     color: #666;
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 1rem;
     cursor: pointer;
     outline: none;
     transition: all 0.3s ease;
     margin-left: 7px;
     font-size: 0.9rem;
     border-radius: 10px;
 }

 .speed-select:hover {
     background: rgba(255, 255, 255, 0.25);
 }

 .speed-select option {
     background: white;
     color: #666;
     border-radius: 10px;
 }

 .playback-floor-info {
     display: none;
     text-align: center;
     font-size: 14px;
     color: #666;
 }

 .current-floor {
     font-weight: 600;
     color: #007AFF;
 }

 /* Step highlighting for clean-step-item elements */
 .clean-step-item {
     transition: all 0.3s ease;
     position: relative;
 }

 .clean-step-item.current-step {
     /* background: rgba(0, 122, 255, 0.1) !important;
     border-left: 4px solid #00b09b !important;
     padding-left: 16px !important; */
 }

 .clean-step-item.current-step::before {
     background-color: #00b09b !important;
     width: 12px !important;
     height: 12px !important;
     left: 15px !important;
     animation: pulse 1.5s ease-in-out infinite;
 }

 .clean-step-item.completed-step {
     opacity: 0.7;
 }

 .clean-step-item.completed-step::before {
     background-color: #04615c !important;
     color: white;
 }

 .clean-step-item.completed-step .clean-step-icon {
     background-color: #04615c !important;
     color: white;
 }

 .clean-step-item.current-step .clean-step-icon {
     background-color: #00b09b !important;
     animation: iconPulse 1.5s ease-in-out infinite;
     color: white;
 }

 /* Step highlighting for instruction elements (fallback) */
 #instructions>li.instruction {
     transition: all 0.3s ease;
     position: relative;
 }

 #instructions>li.instruction.current-step {
     background: whithe !important;
     border-left: 0px solid #00b09b !important;
     padding-left: 16px; 
 }

 #instructions>li.instruction.completed-step {
     opacity: 0.7;
 }

 /* Pulse animations */
 @keyframes pulse {

     0%,
     100% {
         opacity: 1;
         transform: scale(1);
     }

     50% {
         opacity: 0.7;
         transform: scale(1.2);
     }
 }

 @keyframes iconPulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }
 }

 /* Mobile responsiveness */
 @media (max-width: 480px) {
     .playback-controls {
         width: 95%;
         max-width: 400px;
     }
 }

 .custom-elevator-marker {
     width: 80px;
     height: 40px;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     cursor: pointer;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 20px;
     /* Matches the rounded appearance of your image */
 }

 .custom-elevator-marker button {
    background: #ffffff;
    border: none;
    color: #04615c;
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px;
    width: 75%;
    border-radius: 30px !important;
    font-size: 19px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: inherit;
    box-shadow: 0px 2px 9px 4px #0003;
    transition: transform 0.3s ease;
 }

 /* .custom-elevator-marker:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
} */

 .custom-elevator-marker button:hover {
     background: rgb(233 233 233);
     transform: translateY(-5px);
     box-shadow: 0 7px 15px rgba(26, 42, 108, 0.2), inset 0 0 0 1px rgba(26, 42, 108, 0.1);
     background: rgba(255, 255, 255, 1);
 }

 /* Alternative sizes if needed */
 .custom-elevator-marker.small {
     width: 60px;
     height: 30px;
 }

 .custom-elevator-marker.large {
     width: 100px;
     height: 50px;
 }