.input[type="password"] {
    padding-right: 40px; /* Add space for the icon */
    width: 100%;
    box-sizing: border-box;
}

#togglePassword {
    position: absolute; /* Position the icon relative to its parent container */
    right: 10px; /* Adjust as needed */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for exact vertical centering */
    cursor: pointer; /* Change cursor to a pointer when hovering */
    color: #333;
}

/********************/
/*    FONT SIZE     */
/********************/

html {
  font-size: 80%; /* Scales everything down from its original size */
}

/********************/
/*  FIXED MENU BAR  */
/********************/

@media screen and (max-width: 1023px) {
    .navbar-menu.is-active {
        display: flex !important;      /* Forces items to stay inline next to each other */
        flex-direction: row !important;
        box-shadow: none !important;   /* Removes the ugly mobile dropdown box shadow */
        background-color: transparent; /* Prevents an unwanted solid white background block */
    }
    .navbar-end {
        display: flex !important;      /* Keeps the navigation link elements tracking side-by-side */
        flex-direction: row !important;
        justify-content: right;
        width: 100%;
    }
    .navbar-item {
        padding: 0.5rem 0.75rem;       /* Reduces padding slightly so links fit on compact phone screens */
    }
}


/********************/
/*   TOOLTIP ICON   */
/********************/

/* Style the small "i" bubble */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 11px;
    font-weight: bold;
    font-family: sans-serif;
    color: white;
    background-color: #3273dc;
    border-radius: 50%;
    cursor: pointer;
}

/* CHANGED: Swapped left centering for a left-aligned offset */
.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 140%;             /* Forces it directly above the icon */
    left: -10px;              /* Starts just slightly left of the icon, expanding to the right */
    transform: translateY(5px); 
    background-color: #363636;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1.4;
    width: 280px;             
    white-space: normal;      
    z-index: 100;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* CHANGED: Moved arrow from center to line up with the left icon position */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;                
    left: 18px;               /* Aligns arrow directly over the "i" circle center */
    border-width: 6px;
    border-style: solid;
    border-color: #363636 transparent transparent transparent;
}

/* CHANGED: Hover interaction matches the cleaner transform rule */
.info-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}