/* ========================= */
/* Profile Container (Navbar) */
/* ========================= */

.profile_btn {
    position: relative;   /* Keeps dropdown positioned correctly */
    display: flex;        /* Aligns profile icon & dropdown */
    align-items: center;  /* Keeps profile icon centered */
    justify-content: center;
    margin-right: 2.5rem; /* Moves it away from cart icon */
    width: auto;
    height: auto;
}

.profile_btn i {
  font-size: 1.5rem;    /* pick whatever size you need */
  line-height: 1;     /* keeps it centered vertically */
}

/* ========================= */
/* Profile Dropdown (No Background) */
/* ========================= */
.profile-dropdown {
  position: absolute;
  top: 50px; /* Distance below profile icon */
  right: 0%; /* Center the dropdown under the icon */
  transform: translateX(-10%); /* Adjust positioning */
  z-index: 999;
  visibility: hidden; /* Initially hidden */
  opacity: 0;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* Show dropdown when hovering over the container */
.profile_btn:hover .profile-dropdown,
.profile-dropdown:hover {
  visibility: visible;
  opacity: 1;
}

/* ========================= */
/* My Profile Button (Simple Pink Button with White Text) */
/* ========================= */
.profile-dropdown a {
  display: block;
  background-color: white; /* Pink background */
  color: #F46471; /* White text */
  padding: 5px 25px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  border: none; /* Removes any potential border */
  transition: background 0.3s ease-in-out;
}

/* Hover Effect */
.profile-dropdown a:hover {
  background-color: #e04a5b; /* Slightly darker pink */
  color: white;
}

.logAlert-overlay {
  position: absolute;
  top: 100%;          /* sit just below the profile_btn */
  right: 0;           /* align to the right edge */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none; /* so clicks pass through except on the alert itself */
  z-index: 1000;
  border-color: white;
  border-width: 1rem;
  margin-top: .5rem;
  margin-right: .9rem;

}

.logAlert {
  pointer-events: auto; /* re-enable clicks on the alert */
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-size: 1.2rem;
  white-space: nowrap;
  animation: fadeAlert 5s ease forwards;
  border: 1px solid Black;  
  border-radius: 0.25rem;      
  padding: 0.5rem;
}

@keyframes fadeAlert {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}