body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: url('../img/loginpage.jpg') no-repeat center center fixed;
  background-size: cover;
}

.how-to-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1050; /* Ensure it stays above other elements */
}

.form-signin {
  width: 100%;
  max-width: 400px;
  padding: 30px;
  margin: auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.input-wrapper {
    position: relative;
}

/* Eye icon — no background */
.toggle-eye {
    position: absolute;
    right: 45px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d;
    font-size: 0.95rem;
}

.toggle-eye:hover {
    color: #343a40;
}

/* Lock icon — WITH background */
.input-lock {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    background: #f1f3f5;      /* light modern grey */
    padding: 12px;      
    border-radius: 2px;
    color: #42474dff;
    font-size: 0.9rem;
    border: 1px solid #dee2e6;
}

.input-wrapper input {
    padding-right: 75px;      /* space for both */
}
/* Modal animation */
.custom-modal .modal-dialog {
  transform: scale(1);
  transition: transform 1s ease, opacity 1s ease;
}

.custom-modal.show .modal-dialog {
  transform: scale(1);
}

/* Modal content style */
.animated-modal {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* Carousel fade transition */
.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.carousel-fade .carousel-item.active {
  opacity: 1;
}

/* Limit modal/carousel to screen */
.modal-dialog {
  max-width: 60vw;
  margin: 1.75rem auto;
}

.carousel-inner {
  max-height: 80vh; /* key constraint */
}

/* Image scales inside */
.carousel-img {
  width: 100%;
  height: 80vh;
  object-fit: contain; /* no crop */
  display: block;
}

/* Arrow styling */
.custom-arrow {
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.7));
  transform: scale(1.2);
}

/* Header typography */
.modal-title {
  letter-spacing: 1px;
}