/* External styles moved from index.php */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: #f4f5f6;
}

.login-wrap {
    max-width: 420px;
    width: 100%;
}

.gmx-card {
    background: #fff;
    border-radius: 14px;
    padding: 32px 36px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.gmx-logo {
    font-weight: 800;
    font-size: 40px;
    letter-spacing: -1px;
    text-align: center;
    position: relative;
    padding-bottom: 25px;
    padding-top: 56px; /* space for centered favicon */
}

.gmx-logo::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background-image: url('../img/favicon.ico');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.lead-title {
    text-align: center;
    margin-top: 14px;
    margin-bottom: 14px;
    color: #2f2f33;
}

.subtle {
    text-align: center;
    color: #6c6f73;
    font-size: 14px;
    margin-bottom: 18px
}

.form-control {
    border-radius: 8px;
    height: 44px;
}

.btn-primary-custom {
    background: #dce376;
    border: none;
    color: #656565;
    border-radius: 22px;
    height: 44px;
    width: 100%;
    box-shadow: none;
    font-weight: 600;
}

.btn-primary-custom:active,
.btn-primary-custom:focus {
    box-shadow: none;
}

.link-muted {
    display: block;
    text-align: center;
    background: #d7deea;
    color: #1760a8;
    border-radius: 22px;
    height: 44px;
    width: 100%;
    box-shadow: none;
    font-weight: 600;
}

.bottom-note {
    border-top: 1px solid #eee;
    margin-top: 22px;
    padding-top: 18px;
    text-align: center;
    color: #6c6f73;
}

/* Active state for the custom primary button when email is valid */
.btn-primary-custom.enabled {
    background: #ffd800;
    cursor: pointer;
}

.btn-primary-custom:disabled {
    cursor: not-allowed;
}

/* Back button: neutral look, turns red on hover */
.btn-back {
    color: #1760a8;
    border: none;
    border-radius: 22px;
    height: 44px;
    width: 100%;
    box-shadow: none;
    font-weight: 600;
    display: block;
}
.btn-back:hover, .btn-back:focus {
    background: #e6edf5;
    color:#1760a8;
    text-decoration: none;
}

/* Register button: same base as back button (can customize independently) */
.btn-register {
    color: #1760a8;
    border: none;
    border-radius: 22px;
    height: 44px;
    width: 100%;
    box-shadow: none;
    font-weight: 600;
    display: inline-block;
}
.btn-register:hover, .btn-register:focus {
    background: #e6edf5;
    color:#1760a8;
    text-decoration: none;
}

/* Form steps container and slide transition */
.form-steps {
    position: relative;
    overflow: hidden;
    min-height: 120px; /* reserve space to avoid layout jump */
}
.form-steps .step {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform .36s cubic-bezier(.2,.9,.2,1), opacity .28s ease;
}
.form-steps .step.step-password {
    transform: translateX(100%);
    opacity: 0;
}
.form-steps.show-step-2 .step.step-email {
    transform: translateX(-100%);
    opacity: 0;
}
.form-steps.show-step-2 .step.step-password {
    transform: translateX(0);
    opacity: 1;
}

.form-footer { margin-top: 10px; }

/* Password show/hide toggle (eye) */
.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6c6f73;
}
.password-toggle svg { width: 20px; height: 20px; }
.password-toggle .icon-hide { display: none; }
.password-toggle.visible { color: #1760a8; }
.password-toggle.visible .icon-hide { display: inline; }
.password-toggle.visible .icon-show { display: none; }

/* Styles for reset_password.php */
.reset-wrap { max-width: 520px; margin: 48px auto; }
.reset-wrap .gmx-card { padding: 28px 30px; border-radius: 12px; }
.reset-wrap .gmx-logo { font-size:36px; margin-bottom:16px }
.reset-wrap .lead-title { font-size:20px; margin-bottom:6px }
.reset-wrap .subtle { margin-bottom:18px }
.reset-wrap .form-group label { font-weight:600; color:#4a4f55; margin-bottom:6px; display:block }
.password-row { position:relative; }
.password-row .password-toggle { right:12px; }
.reset-wrap .form-control { padding-right:44px; }
.reset-wrap .btn-primary-custom { height:48px; border-radius:24px; font-size:16px }
.reset-wrap .alert { margin-bottom:14px }

/* small screens */
@media (max-width:480px) {
    .reset-wrap { margin:20px; }
    .gmx-card { padding:20px; }
}