/* ============================================================
   Rocketeers — Login / Register page (space-themed, on-brand)
   ============================================================ */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 45px 15px;
    position: relative;
    background: linear-gradient(135deg, rgba(6,33,59,0.94) 0%, rgba(10,88,153,0.86) 100%),
                url('/images/services-bg.jpg') center/cover no-repeat fixed;
}

/* subtle star-dust glow */
.auth-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.10) 0, transparent 35%),
                radial-gradient(circle at 85% 80%, rgba(13,116,201,0.25) 0, transparent 40%);
    pointer-events: none;
}

.auth-card {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 18px;
    padding: 30px 30px 26px;
    box-shadow: 0 24px 55px rgba(3,18,38,0.42);
    width: 100%;
    max-width: 370px;
    animation: authIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes authIn {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-logo {
    text-align: center;
    margin-bottom: 14px;
}
.auth-logo img {
    max-width: 100px;
    height: auto;
}

/* Step indicator — pills */
.auth-steps {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
    gap: 8px;
}
.step {
    width: 26px;
    height: 6px;
    border-radius: 6px;
    background: #dfe7ef;
    transition: all 0.3s ease;
}
.step.active,
.step.completed {
    background: linear-gradient(135deg, #0a5899, #0d74c9);
    width: 34px;
}

.auth-title {
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: #06213b;
    margin-bottom: 5px;
    letter-spacing: 0.2px;
}
.auth-subtitle {
    text-align: center;
    color: #7089a0;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}
.auth-subtitle strong { color: #0a5899; }

.form-group { margin-bottom: 14px; }

.form-label {
    font-weight: 600;
    color: #334b61;
    margin-bottom: 8px;
    display: block;
    font-size: 14px;
}

.form-control {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid #e2e9f1;
    border-radius: 12px;
    font-size: 15.5px;
    transition: all 0.25s ease;
    background: #f7f9fc;
    color: #06213b;
}
.form-control::placeholder { color: #9fb0c2; }
.form-control:focus {
    border-color: #0a5899;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(10,88,153,0.12);
}

#mobileLoginForm { overflow-x: hidden; }

.mobile-input-group {
    display: flex;
    align-items: center;
    border: 1.5px solid #e2e9f1;
    border-radius: 12px;
    background: #f7f9fc;
    transition: all 0.25s ease;
    overflow: hidden;
}
.mobile-input-group:focus-within {
    border-color: #0a5899;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(10,88,153,0.12);
}
.country-code {
    padding: 14px 12px 14px 18px;
    font-weight: 700;
    color: #0a5899;
    font-size: 15.5px;
    border-right: 1.5px solid #e2e9f1;
    margin-right: 4px;
}
.mobile-input {
    flex: 1;
    padding: 14px 18px 14px 6px;
    border: none;
    background: none;
    font-size: 15.5px;
    outline: none;
    color: #06213b;
}
.mobile-input::placeholder { color: #9fb0c2; }

/* OTP boxes */
.otp-input-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 22px 0;
}
.otp-input {
    width: 48px;
    height: 54px;
    text-align: center;
    border: 1.5px solid #e2e9f1;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 700;
    background: #f7f9fc;
    color: #06213b;
    transition: all 0.2s ease;
}
.otp-input:focus {
    border-color: #0a5899;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(10,88,153,0.12);
    transform: translateY(-2px);
}

/* Primary button */
.auth-btn {
    width: 100%;
    background: linear-gradient(135deg, #0a5899 0%, #0d74c9 100%);
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 8px;
    box-shadow: 0 8px 20px rgba(10,88,153,0.30);
    letter-spacing: 0.3px;
}
.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(10,88,153,0.42);
}
.auth-btn:active { transform: translateY(0); }
.auth-btn:disabled {
    background: #c3ccd6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.resend-otp { text-align: center; margin-top: 16px; }
.resend-link {
    color: #0a5899;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}
.resend-link:hover { text-decoration: underline; }
.timer { color: #7089a0; font-size: 14px; }

.auth-switch {
    text-align: center;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #eef2f6;
    color: #55677a;
    font-size: 14.5px;
}
.auth-switch-link {
    color: #0a5899;
    text-decoration: none;
    font-weight: 700;
}
.auth-switch-link:hover { text-decoration: underline; }

.error-message {
    color: #dc3545;
    font-size: 13.5px;
    margin-top: 6px;
    display: none;
}
.success-message {
    color: #0a5899;
    font-size: 14px;
    margin-top: 5px;
    text-align: center;
}

/* API error banner */
.api-error {
    color: #842029;
    font-size: 14px;
    margin-top: 16px;
    text-align: center;
    display: none;
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    padding: 11px 14px;
    border-radius: 10px;
}

/* API success banner */
.api-success {
    color: #0f5132;
    font-size: 14px;
    margin-top: 16px;
    text-align: center;
    display: none;
    background: #d1e7dd;
    border: 1px solid #badbcc;
    padding: 11px 14px;
    border-radius: 10px;
}

/* Flash status (e.g. after a password reset) */
.auth-status {
    color: #0f5132;
    font-size: 14px;
    text-align: center;
    margin-bottom: 18px;
    background: #d1e7dd;
    border: 1px solid #badbcc;
    padding: 11px 14px;
    border-radius: 10px;
}

/* "Forgot password?" row */
.auth-forgot {
    text-align: right;
    margin: -4px 0 16px;
}

/* Mobile */
@media (max-width: 768px) {
    .auth-container { padding: 40px 15px; background-attachment: scroll; }
    .auth-card { padding: 32px 24px 28px; }
    .auth-title { font-size: 22px; }
    .otp-input-group { gap: 8px; }
    .otp-input { width: 44px; height: 50px; font-size: 18px; }
}