/* ================= MAP ================= */

 /* #map {
    height: 100vh;
    width: 100%;
    position: relative;
    background: #ddd;
} */


 /* ================= TOP BAR ================= */

 #menu {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 8px 12px 8px 50px;
    z-index: 50;
    background: linear-gradient(180deg,
          rgba(8, 17, 30, 0.94) 0%,
          rgba(8, 17, 30, 0.86) 100%) !important;
 }

 .heading1 {
    color: #fff;
    font-size: 20px;
    text-shadow: 2px 2px 4px #000;
 }


 /* ================= SIDEBAR ================= */

  .sidebar {
     position: absolute;
     top: 50%;
     right: 24px;
     transform: translateY(-50%);
     z-index: 100;
     transition: transform 0.35s ease, opacity 0.35s ease;
     opacity: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
  }

  .menu{
   margin-top: 20px;
  }

 .toolsFirst {
    background: linear-gradient(180deg, rgba(8, 17, 30, 0.94) 0%, rgba(8, 17, 30, 0.86) 100%) !important;
    border-radius: 30px;
    border: 1px solid rgba(15, 196, 180, 0.2);
    backdrop-filter: blur(12px);
    padding: 5px !important;
 }

 .toolsSecd,
 .toolsThird {
    background: linear-gradient(180deg, rgba(8, 17, 30, 0.94) 0%, rgba(8, 17, 30, 0.86) 100%) !important;
    border-radius: 30px;
    border: 1px solid rgba(15, 196, 180, 0.2);
    backdrop-filter: blur(12px);
    padding: 5px !important;
    padding-top: 0px !important;
 }


 /* Hide sidebar */

  .sidebar.hidden {
     transform: translateY(-50%) translateX(130%);
     opacity: 0;
  }


 /* ================= MENU ITEMS ================= */

 .menu ul {
    list-style: none;
    /* margin: 0px; */
    padding: 0px;
 }

 .menu li {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    align-items: center;
    /* change from stretch to center */
    margin-top: 10px;
    /* now it will work */
    cursor: pointer;
 }

 .menu a {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #29333c;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    transition: all .25s ease;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
 }

 .menu a i {
    font-size: 12px;
 }


 /* Toggle button */

 .toggle-btn {
    position: fixed;
    top: 15px;
    right: 10px;
    padding: 6px;
    background: rgba(41, 51, 60, 0.95);
    border: none;
    border-radius: 6px;
    color: #fff;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 37px;
    height: 37px;
 }

 .toggle-btn i {
    font-size: 18px;
    transition: transform .3s ease;
 }

 .toggle-btn.active i {
    transform: rotate(180deg);
 }

 .sidebar.hidden {
    transform: translateY(-50%) translateX(130%);
    opacity: 0;
 }


 /* Mobile: hide sidebar by default */

 @media (max-width: 767px) {
    .sidebar {
       opacity: 0;
    }

    .sidebar.show {
       /* transform: translateX(0); */
       opacity: 1;
       top: 60px;
    }

    .toggle-btn {
       display: flex !important;
    }
 }


 /* Desktop: sidebar always visible, toggle hidden */

 @media (min-width: 768px) {
    .sidebar {
       transform: translateY(-50%);
       opacity: 1;
    }

    .toggle-btn {
       display: none !important;
    }
 }


 /* Search Icon start */
 /* Map Search UI */
 .map-search-container {
    position: absolute;
    top: -45px;
    right: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 8px;
 }

 /* Search Button */
 .map-search-btn {
    width: 36px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid #12a2f3;
    background: #000000;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    /* box-shadow: 0 3px 8px rgb(0 0 0 / 25%); */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
 }

 .map-search-btn:hover {
    transform: scale(1.05);
 }

 /* Search Input */
 .map-search-input {
    width: 0;
    /* position: ab */
    right: 600px;
    opacity: 0;
    padding: 0;
    height: 42px;
    border-radius: 22px;
    border: 1px solid #ccc;
    outline: none;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
 }

 /* Active State */
 .map-search-container.active .map-search-input {
    width: 240px;
    opacity: 1;
    padding: 0 15px;
 }

 /* Input Wrapper */
 .map-search-input-wrapper {
    position: relative;

 }

 /* Clear Icon */
 .map-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #999;
    cursor: pointer;
    display: none;
    transition: color 0.2s ease;
 }

 .map-search-clear:hover {
    color: #e74c3c;
 }

 /* Show clear icon when active & has text */
 .map-search-container.active .map-search-clear {
    display: block;
 }

 /* Search Icon End */
 /* ===== Sidebar Hover Effect ===== */

 .menu a:hover {
    background: linear-gradient(135deg, #3e0582, #0982ce);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(18, 162, 243, .45);
    border-color: #6eeffd;
 }


 /* ===== Modern Sidebar Tooltip ===== */

 .tooltipBtn {
    position: relative;
 }

 .tooltipBtn::after {
    content: attr(data-tip);
    position: absolute;
    right: 42px;
    top: 50%;
    transform: translateY(-50%) scale(.85);
    background: linear-gradient(135deg, #141e30, #243b55);
    color: #fff;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: .25s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
 }

 /* arrow */
 .tooltipBtn::before {
    content: "";
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #243b55;
    opacity: 0;
    transition: .25s ease;
 }

 .tooltipBtn:hover::after,
 .tooltipBtn:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
 }

 /* active sidebar heighlight  */

 /* ACTIVE TOOL BUTTON (panel opened) */
 .menu a.activeTool {
    /* background: linear-gradient(135deg,#00bcd4,#023b41); */
    background: linear-gradient(135deg, #3e0582, #0982ce);

    color: #fff;
    transform: scale(1.1);
    /* box-shadow:0 0 4px rgba(0,229,255,.85); */
    border-color: #6eeffd;
 }


 /* ================= SECOND TOOL GROUP DESIGN ================= */


 /* individual buttons inside second group */
 .toolsSecd li a {
    background: #1ba1af;
    /* darker teal */
    /* border: 1px solid #bb36ec; */
    border-radius: 50%;
    color: #fff;
    transition: all 0.25s ease;
 }

 .toolsThird li a {
    background: #088945;
    /* darker teal */
    /* border: 1px solid #55e6a9; */
    border-radius: 50%;
    color: #fff;
    transition: all 0.25s ease;
 }

 /* icon inside second group */
 .toolsSecd li a i {
    font-size: 13px;
    transition: transform 0.25s ease;
 }

 .toolsSecd li a:hover i {
    transform: scale(1.2);
 }

 /*  base map */
 .toolsBasemap {
    background: linear-gradient(180deg, rgba(8, 17, 30, 0.94) 0%, rgba(8, 17, 30, 0.86) 100%) !important;
    border-radius: 30px;
    border: 1px solid rgba(15, 196, 180, 0.2);
    backdrop-filter: blur(12px);
    padding: 8px !important;
    margin-top: 8px;
 }

 .baseThumb {
    width: 38px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    margin-top: 10px;
    transition: .25s ease;
 }

 .baseThumb img {
    width: 26px;
    height: 29px;
    object-fit: cover;
    border-radius: 50%;
 }

 .baseThumb input {
    display: none;
 }

 /* hover glow */
 .baseThumb:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
 }

 /* ⭐ SELECTED HIGHLIGHT */
 .baseThumb:has(input:checked) {
    border: 2px solid #00e5ff;
    box-shadow: 0 0 12px rgba(0, 229, 255, .9);
    transform: scale(1.05);
 }

 .activeBase {
    border: 2px solid #00e5ff !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, .9);
 }

 .right-sidebar .ctrlBtn {
    width: 33px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
 }

 .right-sidebar .ctrlBtn i {
    font-size: 15px;
 }

 /* =====   Tooltip for Right Sidebar ===== */

 .tooltipBtn {
    position: relative;
 }

 /* Tooltip text */
 .tooltipBtn::after {
    content: attr(data-tip);
    position: absolute;
    right: 45px;
    /* ✅ move LEFT side */
    top: 50%;
    transform: translateY(-50%) translateX(5px);

    background: #000;
    color: #fff;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;

    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    z-index: 9999;
 }

 /* Arrow */
 .tooltipBtn::before {
    content: "";
    position: absolute;
    right: 38px;
    top: 50%;
    transform: translateY(-50%);

    border: 6px solid transparent;
    border-left-color: #000;
    /* arrow direction */

    opacity: 0;
    transition: all 0.25s ease;
 }

 /* Hover */
 .tooltipBtn:hover::after,
 .tooltipBtn:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
 }

 /* ===== DRONE BUTTON (USE SAME STYLE AS .menu a) ===== */

 .menuBtnCustom {
    width: 44px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0c0c0c;
    border-radius: 4px;
    border: 1px solid rgb(167 188 255);
    color: #fff;
    cursor: pointer;
    transition: all .25s ease;
 }