/* Styles for the navbar when it has the 'scrolled' class applied.
   This is typically used to change the appearance of the navbar when the user scrolls down. */
.navbar.scrolled {
  background-color: white; /* Changes the background to white. */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Adds a subtle shadow for depth. */
}

/* Default styles for navigation links. */
.nav-link {
  color: #5a5a5a; /* Sets the text color to a medium gray. */
}

/* Hover effect for navigation links to improve interactivity. */
.nav-link:hover {
  color: black; /* Changes the text color to black when hovered. */
}

/* Custom styles for the navbar. */
.navbar-custom {
  border-radius: 0; /* Removes rounded corners. */
  margin-bottom: 0; /* Removes bottom margin. */
  padding: 11px 0; /* Adds vertical padding. */
  transition: all 0.5s ease-in-out; /* Smooth transition for any changes. */
  width: 100%; /* Ensures the navbar spans the full width. */
  z-index: 999; /* Ensures the navbar stays on top of other elements. */
}

/* Container for toggle elements, ensuring proper alignment and spacing. */
.toggle-container {
  max-width: 1000px; /* Limits the container's width. */
  text-align: center; /* Centers the content inside. */
  padding: 0 10px; /* Adds horizontal padding. */
  margin: 0 auto; /* Centers the container horizontally. */
}

/* Wrapper for the switch toggle, styled as a pill-shaped container. */
.switch-wrapper {
  position: relative; /* Allows positioning of child elements. */
  display: inline-flex; /* Aligns child elements horizontally. */
  padding: 4px; /* Adds padding inside the wrapper. */
  border: 1px solid lightgrey; /* Adds a light gray border. */
  margin-bottom: 40px; /* Adds spacing below the wrapper. */
  border-radius: 30px; /* Rounds the corners to create a pill shape. */
  background: white; /* Sets the background color to white. */
}

/* Hides the radio buttons visually but keeps them accessible for functionality. */
.switch-wrapper [type="radio"] {
  position: absolute; /* Removes the radio button from the normal flow. */
  left: -9999px; /* Moves it far off-screen. */
}

/* Styles for the label of the selected radio button. */
.switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"],
.switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"] {
  color: white; /* Changes the text color to white for the selected option. */
}

/* Prevents hover background changes for the selected label. */
.switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"]:hover,
.switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"]:hover {
  background: transparent; /* Removes the hover background for the selected label. */
}

/* Ensures the highlighter stays in place when 'monthly' is selected. */
.switch-wrapper
  [type="radio"]:checked#monthly
  + label[for="yearly"]
  ~ .highlighter {
  transform: none; /* No movement for the highlighter. */
}

/* Moves the highlighter to the right when 'yearly' is selected. */
.switch-wrapper
  [type="radio"]:checked#yearly
  + label[for="monthly"]
  ~ .highlighter {
  transform: translateX(100%); /* Shifts the highlighter to the right. */
}

/* Styles for the labels inside the switch toggle. */
.switch-wrapper label {
  font-size: 16px; /* Sets the font size. */
  z-index: 1; /* Ensures labels appear above the highlighter. */
  min-width: 100px; /* Ensures labels have a minimum width. */
  line-height: 32px; /* Centers text vertically. */
  cursor: pointer; /* Changes the cursor to a pointer for interactivity. */
  border-radius: 30px; /* Matches the pill shape of the wrapper. */
  transition: color 0.25s ease-in-out; /* Smooth transition for color changes. */
}

/* Adds a hover effect for labels to improve interactivity. */
.switch-wrapper label:hover {
  background: whitesmoke; /* Changes the background to a light gray when hovered. */
}

/* Highlighter element that visually indicates the selected option. */
.switch-wrapper .highlighter {
  position: absolute; /* Positions it relative to the wrapper. */
  top: 4px; /* Adds spacing from the top. */
  left: 4px; /* Adds spacing from the left. */
  width: calc(50% - 4px); /* Ensures it spans half the width of the wrapper. */
  height: calc(
    100% - 8px
  ); /* Matches the height of the wrapper with padding. */
  border-radius: 30px; /* Matches the pill shape of the wrapper. */
  background: #2a9d8f; /* Sets the highlighter color to a greenish shade. */
  transition: transform 0.25s ease-in-out; /* Smooth transition for movement. */
}


/* Animazione di slide-in da sinistra (per desktop) */
@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Animazione di slide-up dal basso (per mobile) */
@keyframes slideUpFromBottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Animazione di fade-in per il footer */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Colonna sinistra desktop */
.login-size {
  flex: 0 0 30%;
  max-width: 30%;
}

/* Gestione overflow per le animazioni */
.login-section {
  overflow-x: hidden;
}

/* Nasconde overflow per permettere l'animazione del pannello bianco */
@media (min-width: 992px) {
  /* Animazione desktop per il pannello bianco */
  .login-size {
    position: absolute;
    left: 0;
    top: 0;
    width: 39.4%;
    max-width: 39.4%;
    height: 100%;
    z-index: 10;
    animation: slideInFromLeft 0.5s ease-out forwards;
  }
  
  /* L'immagine occupa inizialmente tutto lo spazio */
  .background-image-section {
    width: 100%;
  }
}

/* Comportamento desktop per l'immagine */
.background-image-section {
  flex-grow: 1;
}

/* Animazione per il footer su desktop */
@media (min-width: 992px) {
  .mobile-hide-footer {
    position: relative;
    padding-left: 40%;
    z-index: 20;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
  }
}

/* Stili per mobile: angoli smussati e footer nascosto */
@media (max-width: 991.98px) {
  .login-size {
    flex: 0 0 auto;
    max-width: 100%;
    position: relative;
    z-index: 2;
    min-height: 50vh;
    animation: slideUpFromBottom 0.6s ease-out;
  }
  
  /* L'immagine di sfondo copre tutto lo schermo su mobile */
  .background-image-section {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  
  /* Angoli smussati per il pannello bianco */
  div.login-size.mobile-rounded {
    border-top-left-radius: 50px !important;
    border-top-right-radius: 50px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    overflow: hidden !important;
  }
  
  /* Nascondi il footer su mobile */
  .mobile-hide-footer {
    display: none !important;
  }
}

/* === LOGIN PAGE LOADING & ANIMATION FIX === */

/* Effetto fade-in per l'immagine di sfondo */
.background-image-section {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Mostra l'immagine solo dopo il caricamento */
body.image-loaded .background-image-section {
  opacity: 1;
}

/* Disattiva animazione iniziale del pannello bianco */
.login-size {
  animation: none;
  opacity: 0;
}

/* Evita comparsa anticipata del footer */
body:not(.image-loaded) .mobile-hide-footer {
  opacity: 0 !important;
  transition: opacity 0.3s ease-in-out;
}

/* === DIFFERENZIAZIONE ANIMAZIONI === */

/* DESKTOP: slide da sinistra */
@media (min-width: 992px) {
  .login-size.animate {
    opacity: 1;
    animation: slideInFromLeft 0.5s ease-out forwards;
  }
}

/* MOBILE: slide dal basso */
@media (max-width: 991.98px) {
  .login-size.animate {
    opacity: 1;
    animation: slideUpFromBottom 0.6s ease-out forwards;
  }
}