/* =========================
   NAVBAR DROPDOWNS (FINAL)
   ========================= */

/* Navbar container */
.tm-nav{
  display: flex;
  gap: 18px;
  align-items: center;
}

/* Each dropdown wrapper */
.tm-dd{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Button */
.tm-dd__btn{
  background: transparent;
  border: 0;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  padding: 8px 10px;
}

/* Dropdown menu (hidden by default) */
.tm-dd__menu{
  position: absolute;
  top: 100%;              /* directly below the button */
  left: 0;
  margin-top: 8px;
  display: none;          /* JS toggles .open */
  flex-direction: row;
  gap: 12px;
  align-items: center;
  white-space: nowrap;    /* force one line */
  padding: 10px 14px;
  min-width: 160px;
  max-width: calc(100vw - 32px);
  overflow-x: auto;       /* horizontal scroll if needed */
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(6,24,64,.08);
  z-index: 1500;
}

/* Visible state */
.tm-dd__menu.open{
  display: flex;
}

/* Links inside dropdown */
.tm-dd__menu a{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  color: #0f172a;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

/* Hover effect */
.tm-dd__menu a:hover{
  background: rgba(30,91,255,0.08);
}

/* Optional: nicer scrollbar (desktop) */
.tm-dd__menu::-webkit-scrollbar{
  height: 6px;
}
.tm-dd__menu::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 6px;
}

/* Mobile tweaks */
@media (max-width: 640px){
  .tm-dd__menu{
    gap: 10px;
    padding: 8px 12px;
  }
  .tm-dd__menu a{
    font-size: 14px;
    padding: 8px 10px;
  }
}