/* Shared Layout Styles (Matching Login Page) */
body.page-template-template-forgot-password {
    background-color: var(--color-white);
    overflow-x: hidden;
    font-family: 'Outfit', sans-serif; /* Ensuring consistent font */
}

/* Left Side Background */
.login-bg-section {
    background: radial-gradient(circle at center, var(--color-bg-gradient-start) 0%, var(--color-bg-gradient-end) 100%);
    position: relative;
    overflow: hidden;
}

.pegasus-side-container {
    /* Placeholder for pattern if needed */
    background-size: cover;
}
.forgot-password-form-wrapper{
max-width: 550px;
}
.forget-password-form-container{
    min-height: 100vh;
}
.bg-img-container {
    background-image: url('../images/pegasus-side.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 100vh;
    height: 100%;
    width: 100%;
}


.login-decoration-img {
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

/* Typography */
.welcome-title {
    font-family: var(--font-primary, "Open Sans", sans-serif);
    font-size: 26px;
    font-weight: 600;
    color: var(--color-black);
    @media screen and (min-width:768px) {
        font-size: 36px;
        font-weight: normal;

    }
}

.welcome-subtitle {
    font-size: 0.9rem;
    font-family: var(--font-primary, "Open Sans", sans-serif);
}

/* Form Inputs & Groups */
.input-group-text {
    background-color: transparent;
}

.form-control:focus {
    box-shadow: none;
}



/* Floating Labels Overrides */
@media (min-width: 991.98px) {
    .terms-and-conditions-mobile {
        display: none;
    }
}
@media screen and (max-width: 991.98px) {
    .login-container {
         background: transparent linear-gradient(1deg, var(--color-light-blue)  28%, rgba(255, 255, 255, 0) 46%) 0% 0% no-repeat padding-box; 
        /* background: transparent linear-gradient(1deg, var(--color-bg-gradient-start)  28%, rgba(255, 255, 255, 0) 46%) 0% 0% no-repeat padding-box; */
        padding: 0 15px !important;
    }
    .terms-and-conditions-mobile {
        display: block;
        margin: 50px 30px;
    }

    .terms-and-conditions-mobile p {
        font-size: 14px;
        max-width:330px;
        margin: auto;
    }
  }
.form-floating > label {
    font-size: 14px;
    color: var(--color-text-muted) !important;
    font-weight: 700;
}
.forgot-password-form-wrapper {
    max-width: 550px;
    /* background: var(--color-white); */
    border-radius: 0 0 30px 30px;
}

.form-floating > .form-control {/* Border handled by input-group */
    height: 3.5rem;
    box-shadow: none !important;
}

.PLG-form-control {
    letter-spacing: 0px;
    color: var(--color-grey);
    box-shadow: none;
}


.fogot-password-text a {
    color: var(--color-dark-blue) !important;
    opacity: unset !important;
}


/* Buttons */
.btn-theme-gold {
    background-color: var(--color-gold);
    color: var(--color-white);
    border: none;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    height: 60px;
    font-size: 16px;
}

.btn-theme-gold:hover {
    background-color: var(--color-gold-dark);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--color-gold-alpha-30);
}

/* Links */
.text-theme-gold {
    color: var(--color-gold);
}

.text-theme-gold:hover {
    color: var(--color-gold-dark); /* TODO: Add variable for dark gold */
}

/* Lock Icon Specific Styles */
.lock-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.forgot-password-lock-icon {
    max-width: 150px;
}

.forgot-password-lock-icon-wrapper {
    transform: translateY(0);
}

@media (max-width: 991px) {
    .forgot-password-lock-icon-wrapper {
        transform: translateY(-18px);
    }
}

.mp-logo-compact {
    max-height: 40px;
}

.spacer-24 {
    width: 24px;
}

.lock-svg {
    width: 100%;
    height: auto;
    max-height: 100px;
}
