/* 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. */
}

/* Utility class to hide elements. */
.hide {
  display: none; /* Completely hides the element. */
}