.auth-section {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0d6efd;
      font-family: "Poppins", sans-serif;
      padding: 15px;
    }
   
    
     .container-custom {
        position: relative;
        width: 100%;
        max-width: 1000px;
        background: #fff;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        perspective: 2700px;
        border-radius: 0.5rem;
        overflow: hidden;
        margin-top: 100px;
        margin-bottom: 100px;
      }

      /* Flip cover */
      .cover {
        position: absolute;
        top: 0;
        left: 50%;
        height: 100%;
        width: 50%;
        z-index: 98;
        transition: all 1s ease;
        transform-origin: left;
        transform-style: preserve-3d;
        backface-visibility: hidden;
      }
      #flip {
        display: none;
      }
      #flip:checked ~ .cover {
        transform: rotateY(-180deg);
      }
      #flip:checked ~ .forms .login-form {
        pointer-events: none;
      }
      .cover .front,
      .cover .back {
        position: absolute;
        inset: 0;
      }
      .cover .back {
        transform: rotateY(180deg);
      }
      .cover img {
        position: absolute;
        height: 100%;
        width: 100%;
        object-fit: cover;
        z-index: 10;
      }
      .cover .text {
        position: absolute;
        inset: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
      }
      .cover .text::before {
        content: "";
        position: absolute;
        inset: 0;
        background: #0d6efd;
        opacity: 0.5;
        z-index: -1;
      }
      .cover .text span {
        font-size: 1.2rem;
        font-weight: 500;
        color: #fff;
      }
      .cover .text .text-1 {
        font-size: 1.6rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
      }

      /* Forms */
      .forms {
        background: #fff;
        width: 100%;
        padding: 2rem;
      }
      .form-content {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
      }
      .form-content .login-form,
      .form-content .signup-form {
        flex: 1 1 300px;
        min-width: 280px;
      }
      .title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 1rem;
        position: relative;
      }
      .title::before {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        height: 3px;
        width: 25px;
        background: #0d6efd;
      }
      .signup-form .title::before {
        width: 20px;
      }
      /* Fix for select fields inside input-box */
      .input-box select {
        width: 100%;
        padding: 10px 40px 10px 35px; /* leave space for icon on left and arrow on right */
        border: 1px solid #ccc;
        border-radius: 6px;
        appearance: none; /* hides default browser arrow */
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: #fff;
        font-size: 15px;
      }

      /* Scoped only for the region select field */
      #regionField i.fa-map-marker-alt {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #0d6efd;
        pointer-events: none;
      }

      /* Restrict the extra padding and select styling only to the region field */
      #regionField select {
        width: 100%;
        padding: 10px 40px 10px 35px;
        border: 1px solid #ccc;
        border-radius: 6px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: #fff;
        font-size: 15px;
      }
      

      /* Add a custom arrow on the right side */
      .input-box select::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #666;
      }

      /* Make sure the container is positioned relative */
      .input-box {
        position: relative;
        margin-bottom: 15px;
      }
      .input-box i {
        top: 50%;
        transform: translateY(-50%);
      }
      .input-box {
        position: relative;
        margin-bottom: 1rem;
      }
      .input-box i {
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        color: #0d6efd;
      }
      .input-box input {
        padding-left: 2.5rem;
      }
      .btn-custom {
        background: #0d6efd;
        color: #fff;
      }
      .btn-custom:hover {
        background: #0d6efd;
      }
      label {
        color: #0d6efd;
        cursor: pointer;
      }
      label:hover {
        text-decoration: underline;
      }

      /* Responsive */
      @media (max-width: 768px) {
        .cover {
          display: none;
        }
        .form-content {
          flex-direction: column;
        }
        .signup-form {
          display: none;
        }
        #flip:checked ~ .forms .signup-form {
          display: block;
        }
        #flip:checked ~ .forms .login-form {
          display: none;
        }
      }

      .title { font-size:1.5rem; font-weight:600; color:#333; margin-bottom:1rem; position:relative; }
      .input-box { position:relative; margin-bottom:1rem; }
      .input-box i { position:absolute; top:50%; left:10px; transform:translateY(-50%); color:#0d6efd; }
      .input-box .form-control { padding-left:2.5rem; }
      .btn-custom { background:#0d6efd; color:#fff; }
       .toggle-wrapper {
  display: inline-block;
  position: relative;
}
.toggle {
  display: flex;
  position: relative;
  width: 200px;
  height: 45px;
  background: #f0f0f0;
  border-radius: 30px;
  cursor: pointer;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  font-weight: 500;
}
.toggle .option {
  z-index: 2;
  flex: 1;
  text-align: center;
  transition: color 0.3s;
}
.toggle .member {
  color: #fff;}

.toggle .visitor {
  color: #333;
}

.toggle .slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 95px;
  height: 39px;
  background: #0d6efd;
  border-radius: 30px;
  transition: all 0.3s ease;
  z-index: 1;
}

.toggle-wrapper input {
  display: none;
}

/* When toggled to visitor */
.toggle-wrapper input:not(:checked) ~ .toggle .slider {
  transform: translateX(100%);
}
.toggle-wrapper input:not(:checked) ~ .toggle .visitor {
  color: #fff;
}
.toggle-wrapper input:not(:checked) ~ .toggle .member {
  color: #333;
}

      .text-muted-inline { color: #6c757d; font-size: 0.95rem; }
      .errorlist { color: #b00020; margin-bottom: .5rem; list-style: none; padding-left: 0; }