/* from DAB CA\clutch - Copy - Copy*/

.prompt {
  max-width: 400px;
  margin: 50px auto;
  padding: 25px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.3);
}

button {
  margin-top: 10px;
  display: block;
  padding: 10px;
  width: 100%;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  cursor: pointer;
}

form section {
  margin: 0 0 20px 0;
  position: relative; /* for password toggle positioning */
}

label {
  margin-top: 10px;
  margin-bottom: 1px;
  text-align:center;
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #000000;
}

input {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
}

p.help {
  text-align: center;
  font-weight: 400;
  color: #000000;
}

/* Hide the checkbox */
#toggleEmail {
  display: none;
}

#toggleBtn {
  background-color: #3a7fbb; /* default color */
  width: 100%;
  color: white; /* text color if needed */
  transition: background-color 0.2s, color 0.2s; /* smooth animation */
}

#card {
  background-color: #3a7fbb; /* new color on hover */
  color: #fff;
  text-align: center;
  font: 100;
}

#toggleBtn:hover {
  background-color: #245b85; /* new color on hover */
  color: #fff;
}

/* Smooth transition for hidden input */
.hidden-input {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s ease, opacity 0.6s;
}

/* Show input when checked */
#toggleEmail:checked ~ .hidden-input {
  max-height: 100px;
  opacity: 1;
}

/* Change button text depending on state */
#toggleEmail + label::after {
  content: "Switch to Sign up";
}

#toggleEmail:checked + label::after {
  content: "Switch to Log in";
}

/* Animation for heading sliding in/out from left */
.panel-caption {
  display: inline-block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.swipe-out {
  transform: translateX(-100%); /* move out to left */
  opacity: 0;
}

.swipe-in {
  transform: translateX(-100%); /* start offscreen left */
  opacity: 0;
}

.swipe-in-active {
  transform: translateX(0); /* slide into original position */
  opacity: 1;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Button text fade animations */
.fade-out {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Add smooth transition to the green button */
.btn-success {
  transition: background-color 0.4s;
}

/* Darker green for Sign in state */
.btn-signin {
  background-color: #6e50cf; /* slightly darker */
  transition: background-color 0.5s, color 0.2s; /* smooth animation */
}

.btn-signin:hover {
  background-color: #6045b6; /* slightly darker */
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}

.btn-login {
  background-color: #25884c; /* slightly darker */
  transition: background-color 0.5s, color 0.2s; /* smooth animation */
}

.btn-login:hover {
  background-color: #1e703f; /* slightly darker */
  color: #fff;
  transition: background-color 0.2s, color 0.2s;
}

/* Toggle button */
.toggle-btn {
  position: relative;
  padding: 10px 20px;
  font-size: 18px;
  border: none;
  cursor: pointer;
  background: #4a90e2;
  color: white;
  overflow: hidden;
}

.toggle-btn span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 5s ease;
  white-space: nowrap;
}
/* Common Modal Header styles */
.default-bootbox-err .modal-header,
.default-bootbox-suc .modal-header {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    position: relative;   /* Needed for close button */
    color: white;         /* Header text color */
    font-weight: bold;
}

/* Individual header colors */
.default-bootbox-err .modal-header {
    background-color: #f6b6b2; /* Red header background */
}

.default-bootbox-suc .modal-header {
    background-color: #4CAF50; /* Green header background */
}

/* Modal title */
.default-bootbox-err .modal-header .modal-title,
.default-bootbox-suc .modal-header .modal-title {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* Close button */
.default-bootbox-err .modal-header .close,
.default-bootbox-suc .modal-header .close {
    position: absolute;
    top: 10px;
    left: 225px; 
    z-index: 10;
}

/* Modal body */
.default-bootbox-err .modal-body,
.default-bootbox-suc .modal-body {
    text-align: center; /* Center the message text */
}