/* FLASH MESSAGE - flash.css */

/* Container for flash messages: hidden by default */
.flash-message-container {
    width: 100%;
    background-color: transparent; 	/* Ensure no default background color */
    margin: 0 auto; 				/* Remove any margin */
    padding: 0; 					/* Remove padding to match height */
    box-sizing: border-box; 		/* Ensure padding doesn't affect height */
 	position: fixed;
	top: 2.5rem;
    left: 0;
    z-index: 1050; /* Make sure it's higher than your navbar's z-index */
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    background-color: transparent;
    pointer-events: none;
}

/* Show when there are messages */
.flash-message-container.active {
    display: block;
	transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Inner wrapper: stack alert bars vertically */
.flash-message-content {
	display: flex;
	flex-direction: column;   		/* stack children vertically */
}

/* Each individual flash alert */
.flash-alert {
	height: 7.7rem;           /* fixed height */
    line-height: 2.2rem;      /* vertical centering */
    margin: 0;                /* no extra margins */
    padding: 0 1rem;          /* horizontal padding */
    overflow: hidden;         /* crop overflow */
    white-space: nowrap;      /* keep one line */
    text-overflow: ellipsis;  /* “…” if too long */
    font-size:clamp(1rem, 1.1vw, 1.2rem); 
	text-align: center;
    font-weight: 300;
    font-family: Rubik-Light, sans-serif;
   	display: flex;             /* enable flexbox */
    align-items: center;       /* vertical alignment */
    justify-content: center;   /* horizontal centering */
}

/* Add a white separator line between stacked messages */
.flash-alert + .flash-alert {
    border-top: 0.1rem solid var(--whitecolor);
}

/* Success messages */
.flash-alert.alert-success {
    background-color: var(--vlightgreencolor); 
    color: var(--darkgreycolor); 
}

/* Error messages */
.flash-alert.alert-danger {
    background-color: var(--vlightredcolor); 
    color: var(--darkgreycolor); 
}

/* Info messages */
.flash-alert.alert-info {
    background-color: var(--vlightbluecolor); 
    color: var(--darkgreycolor); 
}

/* Warning messages */
.flash-alert.alert-warning {
    background-color: var(--vlightambercolor); 
    color: var(--darkgreycolor); 
}