/* To show a floating reminder to create profile */
.tooltip-box {
    display: block;
    position: absolute;
    top: 40px; /* Adjust based on position */
    left: -150px;
    background: #333;
    color: #fff;
    padding: 0.7em;
    border-radius: 8px;
    font-size: 0.85em;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 2px solid #ff9f1c; /* ✅ Gold border */
    outline: 2px solid rgba(255, 215, 0, 0.3); /* Optional subtle glow */
}

/* Arrow pointing up */
.tooltip-box::before {
    content: "";
    position: absolute;
    top: -14px; /* Position above tooltip */
    left: 185px; /* Adjust to point at Profile link */
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #333 transparent; /* Pointing down */
}

/* Optional: add a glowing effect */
.tooltip-box.glow {
    box-shadow: 0 0 8px #ff9f1c, 0 0 4px rgba(255, 215, 0, 0.6);
}

@keyframes wiggle {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(-3deg); }
    30% { transform: rotate(3deg); }
    45% { transform: rotate(-3deg); }
    60% { transform: rotate(3deg); }
    75% { transform: rotate(-2deg); }
    90% { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}
.tooltip-box.wiggle {
    animation: wiggle 0.6s ease-in-out;
}

.tooltip-dismiss {
    display: block;
    text-align: right;       /* Aligns the link to the right */
    margin-top: 0.5em;
    font-size: 0.8em;
    color: #ff9f1c; /* Matches your border */
    text-decoration: underline;
    cursor: pointer;
}
.tooltip-dismiss:hover {
    color: #ffd700;
}

/* Mobile: Tooltip on the RIGHT of the link */
@media (max-width: 768px) {
    .tooltip-box {
        top: 0; /* aligned with link vertically */
        left: 110%; /* move to right side */
    }

    /* Arrow pointing LEFT (mobile) */
    .tooltip-box::before {
        top: 15%;
        left: -16px; /* shift arrow to left side */
        transform: translateY(-50%);
        border-width: 8px;
        border-style: solid;
        border-color: transparent #333 transparent transparent;
    }
}