/* ========== MODERNIZED FORGOT PASSWORD PAGE CSS ========== */

/* Reset & base */
body, h1, h2, h3, h4, h5, h6, p, div, span, a, input, form {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Calibri", "Segoe UI", sans-serif;
}
body {
  background-color: #232C64; /*232C64 *8FADDA Background color */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
  position: relative;
}

body::before, body::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: 0.2;
  filter: blur(70px);
  z-index: 0;
}

body::before {
  width: 280px;
  height: 280px;
  background-color: #e0f2fe;
  top: 15%;
  left: 8%;
  animation: floatFade 8s ease-in-out infinite alternate;
}

body::after {
  width: 230px;
  height: 230px;
  background-color: #90cdf4;
  bottom: 12%;
  right: 15%;
  animation: floatFade 8s ease-in-out infinite alternate;
}

/* Container */
.ping-container {
  max-width: 480px;
  margin: 60px auto;
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* Change password heading  */
.ping-header {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  color: #232c64;
  margin-bottom: 30px;
  
}

/*----------------------------------- */
.ping-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}

.ping-steps .step {
  flex: 1;
  text-align: center;
  color: #232C64;
}

.ping-steps .step span { /* Style for the circle element */
  display: block;
  width: 24px; /* Adjust size as needed */
  height: 24px;
  border-radius: 50%; /* Makes it a circle */
  background-color: transparent; /* Initially transparent */
  border: 2px solid #232C64; /* Circle border color */
  margin: 0 auto 5px; /* Center horizontally, space below */
}

.ping-steps .step label {
  display: block;
  font-size: 16px;
  margin-top: 5px;
}

.ping-steps .step.active span { /* Style for the active circle */
  background-color: #232C64; /* Solid background color for active */
  color: white; /* Optional: If you have text inside the circle */
  border: 2px solid #232C64;
}

.ping-steps .step.active {
  font-weight: 600;
}
/* ------------------------------------------- */



/* Form input */
.ping-input-label {
  font-size: 13px;
  font-weight: 500;
  color: #1e3c72;
  margin-bottom: 6px;
}
.ping-input-container {
  margin-bottom: 20px;
}

/* Form input border */
.ping-input-container input {
  width: 100%;
  padding: 12px 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

/* Form input border active */
.ping-input-container input:focus {
  border-color: #232C64;
  outline: none;
}

/* Form input username and PASSWORD active */

.ping-input-label {
position: relative;
display: inline-block;
margin: 0 12px 10px 0;
font-size: 16px;
font-weight: bold;
text-transform: none;
color: #232c64;
font-family: Calibri, "sans-serif";
line-height: 0.5;
cursor: default;
padding: 2px 2px;
border-radius: 0px;
}


/* Error & info messages */
.ping-messages {
  margin-bottom: 30px;
  color: #56AEE1;
  font-size: 18px;
}
.ping-error {
  background: #ffe5e5;
  border-left: 4px solid #ff4c4c;
  color: #a00;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
}

/* Buttons */
.ping-buttons {
  margin-top: 20px;
  text-align: center;
}
.ping-button {
  background-color: #232C64; /* 56AEE1 and 232C64 Changed to red */
  color: #ffffff; /* Keeping the later color white */
  border: none;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  display: inline-block; /* Keeping this as it affects display behavior */
  text-align: center;
  transition: background-color 0.3s ease, color 0.2s ease; /* Combined and kept both transitions */
  padding: 10px 30px; /* Keeping the later, more specific padding */
  border-radius: 50px; /* More pill-like and keeping the later value */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  max-width: 500px;
  width: 100%;
  z-index: 2;
  position: relative;
  font-size: 18px; /* Keeping the later font size */
  letter-spacing: 0px;
  /* Centering properties */
  display: block; /* Overrides the inline-block above for centering */
  margin: 12px auto; /* Centers the block horizontally */
  width: fit-content; /* Adjusts width to content, allowing margin auto to work */
}

.ping-button:hover {
  background-color: #1e3c72;
}

/* Link buttons */
.ping-input-link {
  margin-top: 20px;
  font-size: 14px;
  text-align: center;
}

.ping-input-link a {
  color: #2a5298;
  margin: 0 10px;
  text-decoration: none;
  font-weight: bold; /* Added this line to make the text bold */
  font-size: 14px
}
.ping-input-link a:hover {
  text-decoration: underline;
}
.divider {
  color: #ccc;
}

/* Footer */
.ping-footer-container {
  /*margin-top: 30px;
  text-align: center;
  font-size: 12px;
  color: red;*/
  
    background-color: #F0F8FF; /* Example: Alice Blue background */
    padding: 10px 20px; /* Add some space around the text */
    border-radius: 10px; /* Slightly rounded corners */
    display: inline-block; /* Makes the background fit the content */
	color: red; /* Example: Dark Blue text */
    font-family: Calibri, sans-serif;
    font-size: 14px;
    font-weight: bold;
	text-align: center;
    margin-top: 25px;
	
}
/* Footer logo */
.ping-footer-logo {
  display: block;
  margin: 50px auto 0;
  width: 300px;
  height: auto;
}

/* Optional subtle card-like input background */
.ping-input-container input {
  background-color: #f9f9ff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}


.password-section {
            display: flex;
            gap: 40px;
            align-items: flex-start;
        }

        .password-inputs {
            flex: 1;
        }

        .password-policy-box {
            width: 280px;
            background: #f7f9fc;
            padding: 15px;
            border-radius: 6px;
            border: 1px solid #ddd;
        }

        .policy-rule {
            color: red;
            margin-bottom: 8px;
            font-size: 14px;
            transition: color 0.3s ease;
        }

        .policy-rule.valid {
            color: green;
        }
		.policy-info {
			color: #8B4513;
			margin-top: 12px;
			padding-top: 10px;
			border-top: 1px solid #ddd; /* subtle divider */
			font-size: 14px;
		}
        @media (max-width: 768px) {
            .password-section {
                flex-direction: column;
            }

            .password-policy-box {
                width: 100%;
            }
        }
		
.password-strength {
    width: 100%;
    height: 6px;
    background: #eee;
    border-radius: 5px;
    margin-top: 10px;
}

.strength-bar {
    height: 100%;
    width: 0%;
    border-radius: 5px;
    transition: 0.3s;
}

/* Strength colors */
.strength-weak { background: #e74c3c; width: 33%; }
.strength-medium { background: #f39c12; width: 66%; }
.strength-strong { background: #27ae60; width: 100%; }

.match-message {
    margin-top: 8px;
    font-size: 13px;
}

.match-ok {
    color: green;
}

.match-fail {
    color: red;
}

/* Eye button improvement */
.password-show-button {
    cursor: pointer;
    margin-left: -30px;
    font-size: 16px;
}		
		
.ping-containerForgetPass {
  max-width: 880px;
  margin: 60px auto;
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper input {
    width: 100%;
    padding-right: 40px; /* space for eye */
}

/* Eye button inside input */
.eye-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.6;
}

.eye-btn:hover {
    opacity: 1;
}