/* animation for login and register buttons to fade in after 4 seconds */
.fade-in {
  opacity: 0;                /* element initially invisible */
  animation: fadeIn 2s forwards;  /* animation duration 2 seconds */
  animation-delay: 4s;       /* animation starts after 4 seconds */
}

/* Keyframes define how animation happens */
@keyframes fadeIn {

  /* starting state */
  from { opacity: 0; }

  /* ending state */
  to   { opacity: 1; }

}

/* --------------------------------------------------------
   Language Switcher Styling
   Small floating language selector on top right
---------------------------------------------------------*/

#lang-switcher {

  position: fixed;           /* fixed position so it stays visible */
  top: 16px;                 /* distance from top */
  right: 16px;               /* distance from right */

  z-index: 9999;             /* ensures it stays above all elements */

  display: flex;             /* arrange items horizontally */
  align-items: center;       /* vertical alignment */
  gap: 8px;                  /* space between items */

  background: rgba(0,0,0,0.55); /* semi-transparent background */
  backdrop-filter: blur(6px);   /* glass effect */

  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;

  padding: 6px 12px;         /* internal spacing */

}

/* label styling for "Language" text */

#lang-switcher label {

  color: #facc15;            /* yellow color */
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;       /* prevents text wrapping */

}

/* language dropdown styling */

#lang-select {

  background: transparent;
  color: #fff;
  border: none;
  outline: none;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;           /* pointer cursor when hovering */

}

/* dropdown options background color */

#lang-select option {

  background: #1e3a5f;
  color: #fff;

}