/* ================================================================
   auth.css — FitMotif
   Styles for: register, login, forgot-password, reset-password
================================================================ */

/* ── AUTH PAGE WRAPPER ─────────────────────────────────────── */
.auth-page {
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 20px 64px;
    background: var(--fm-bg-soft);
}

/* ── AUTH CARD ─────────────────────────────────────────────── */
.auth-card {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-radius-lg);
    box-shadow: var(--fm-shadow-lg);
    overflow: hidden;
}

/* ── CARD HEADER ───────────────────────────────────────────── */
.auth-card__head {
    padding: 28px 32px 22px;
    border-bottom: 1px solid var(--fm-border);
    background: var(--fm-dark);
    text-align: center;
}
.auth-card__head-icon {
    width: 52px; height: 52px;
    background: var(--fm-green);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.auth-card__head-icon svg {
    width: 26px; height: 26px;
    stroke: #fff; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.auth-card__label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fm-green);
    margin-bottom: 6px;
}
.auth-card__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.01em;
    color: #fff;
    line-height: 1.1;
}
.auth-card__title em { font-style: normal; color: var(--fm-green); }
.auth-card__sub {
    margin-top: 8px;
    font-size: .86rem;
    color: rgba(255,255,255,.55);
    line-height: 1.6;
}

/* ── CARD BODY ─────────────────────────────────────────────── */
.auth-card__body { padding: 28px 32px 32px; }

/* ── SOCIAL BUTTONS ────────────────────────────────────────── */
.auth-social {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}
.auth-social-btn {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1.5px solid var(--fm-border);
    border-radius: 10px;
    background: #fff;
    font-family: 'Barlow', sans-serif;
    font-size: .9rem;
    font-weight: 600;
    color: var(--fm-dark);
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .2s;
    text-decoration: none;
}
.auth-social-btn:hover {
    border-color: var(--fm-subtle);
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.auth-social-btn svg,
.auth-social-btn img { width: 20px; height: 20px; flex-shrink: 0; }

/* ── DIVIDER ───────────────────────────────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--fm-subtle);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--fm-border);
}

/* ── FORM FIELDS ───────────────────────────────────────────── */
.auth-field { margin-bottom: 16px; }
.auth-label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    color: var(--fm-mid);
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 7px;
}
.auth-input-wrap { position: relative; }
.auth-input {
    width: 100%;
    height: 48px;
    padding: 0 48px 0 16px;
    border: 1.5px solid var(--fm-border);
    border-radius: 10px;
    font-family: 'Barlow', sans-serif;
    font-size: .95rem;
    font-weight: 500;
    color: var(--fm-dark);
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.auth-input::placeholder { color: #C0C8D0; }
.auth-input:focus {
    border-color: var(--fm-green);
    box-shadow: 0 0 0 3px rgba(57,211,83,.15);
}
.auth-input.error {
    border-color: #EF4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.auth-input.success {
    border-color: #22C55E;
    box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}
.auth-input-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fm-subtle);
    pointer-events: none;
    display: flex;
}
.auth-input-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* password toggle is clickable */
.auth-pw-toggle {
    pointer-events: all;
    cursor: pointer;
    transition: color .2s;
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
}
.auth-pw-toggle:hover { color: var(--fm-green); }

/* field error text */
.auth-field-error {
    display: none;
    margin-top: 6px;
    font-size: .76rem;
    color: #DC2626;
    font-weight: 500;
}
.auth-field-error.visible { display: block; }

/* ── PASSWORD STRENGTH ─────────────────────────────────────── */
.auth-pw-strength { margin-top: 10px; }
.auth-pw-bar {
    height: 4px;
    border-radius: 100px;
    background: var(--fm-border);
    overflow: hidden;
    margin-bottom: 8px;
}
.auth-pw-bar__fill {
    height: 100%;
    border-radius: 100px;
    width: 0%;
    transition: width .35s, background .35s;
    background: #EF4444;
}
.auth-pw-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 12px;
}
.auth-pw-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    color: var(--fm-subtle);
    transition: color .2s;
}
.auth-pw-check.met { color: #16A34A; }
.auth-pw-check__dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--fm-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color .2s, background .2s;
}
.auth-pw-check.met .auth-pw-check__dot {
    border-color: #22C55E;
    background: #22C55E;
}
.auth-pw-check__dot svg {
    width: 8px; height: 8px;
    stroke: #fff; fill: none;
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0;
    transition: opacity .2s;
}
.auth-pw-check.met .auth-pw-check__dot svg { opacity: 1; }
.auth-pw-check__label { line-height: 1.3; }

/* ── CHECKBOX ──────────────────────────────────────────────── */
.auth-checkbox-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0;
    cursor: pointer;
}
.auth-checkbox-wrap input[type="checkbox"] { display: none; }
.auth-checkbox {
    width: 20px; height: 20px;
    border: 1.5px solid var(--fm-border);
    border-radius: 6px;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s, background .2s;
    background: #fff;
}
.auth-checkbox-wrap input[type="checkbox"]:checked + .auth-checkbox {
    border-color: var(--fm-green);
    background: var(--fm-green);
}
.auth-checkbox svg {
    width: 11px; height: 11px;
    stroke: #fff; fill: none;
    stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0;
    transition: opacity .2s;
}
.auth-checkbox-wrap input[type="checkbox"]:checked + .auth-checkbox svg { opacity: 1; }
.auth-checkbox-label {
    font-size: .85rem;
    color: var(--fm-mid);
    line-height: 1.55;
    user-select: none;
}
.auth-checkbox-label a { color: #1D4ED8; text-decoration: underline; }
.auth-checkbox-label a:hover { color: #1E40AF; }

/* ── HONEYPOT — visually hidden ────────────────────────────── */
.auth-hp { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; tabindex: -1; }

/* ── RECAPTCHA WRAPPER ─────────────────────────────────────── */
.auth-recaptcha { margin: 16px 0; display: flex; justify-content: center; }
.auth-recaptcha.hidden { display: none; }

/* ── SUBMIT BUTTON ─────────────────────────────────────────── */
.auth-btn {
    width: 100%;
    height: 52px;
    background: var(--fm-green);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 16px rgba(57,211,83,.3);
    margin-top: 8px;
}
.auth-btn:hover {
    background: var(--fm-accent-dk);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(57,211,83,.4);
}
.auth-btn:active { transform: translateY(0); }
.auth-btn:disabled {
    background: var(--fm-border);
    color: var(--fm-subtle);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.auth-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* spinner inside button */
.auth-btn__spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spin .7s linear infinite;
    display: none;
}
.auth-btn.loading .auth-btn__spinner { display: block; }
.auth-btn.loading .auth-btn__text { display: none; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* ── FLASH MESSAGES ────────────────────────────────────────── */
.auth-alert {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: .87rem;
    line-height: 1.6;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 500;
}
.auth-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth-alert--error   { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.auth-alert--error svg { stroke: #DC2626; }
.auth-alert--success { background: #F0FDF4; border: 1px solid #BBF7D0; color: #166534; }
.auth-alert--success svg { stroke: #16A34A; }
.auth-alert--info    { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E40AF; }
.auth-alert--info svg { stroke: #2563EB; }

/* ── FOOTER LINKS ──────────────────────────────────────────── */
.auth-footer-link {
    margin-top: 22px;
    text-align: center;
    font-size: .86rem;
    color: var(--fm-subtle);
}
.auth-footer-link a { color: #1D4ED8; font-weight: 600; text-decoration: none; }
.auth-footer-link a:hover { text-decoration: underline; }

/* ── FORGOT LINK ───────────────────────────────────────────── */
.auth-forgot {
    text-align: right;
    margin-top: -8px;
    margin-bottom: 16px;
    font-size: .8rem;
}
.auth-forgot a { color: #1D4ED8; font-weight: 500; text-decoration: none; }
.auth-forgot a:hover { text-decoration: underline; }

/* ── RATE-LIMIT NOTICE ─────────────────────────────────────── */
.auth-throttle-notice {
    text-align: center;
    font-size: .82rem;
    color: var(--fm-subtle);
    margin-top: 10px;
    display: none;
}
.auth-throttle-notice.visible { display: block; }
#auth-countdown { font-weight: 700; color: #DC2626; }

/* ── SUCCESS STATE ─────────────────────────────────────────── */
.auth-success-state {
    text-align: center;
    padding: 16px 0 8px;
    display: none;
}
.auth-success-state.visible { display: block; }
.auth-success-icon {
    width: 64px; height: 64px;
    background: #F0FDF4;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 2px solid #BBF7D0;
}
.auth-success-icon svg { width: 32px; height: 32px; stroke: #16A34A; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.auth-success-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--fm-dark);
    margin-bottom: 8px;
}
.auth-success-msg {
    font-size: .9rem;
    color: var(--fm-subtle);
    line-height: 1.65;
    max-width: 340px;
    margin: 0 auto;
}

/* ── PASSWORD RESET STEPS ──────────────────────────────────── */
.auth-steps {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    position: relative;
}
.auth-steps::before {
    content: '';
    position: absolute;
    top: 16px;
    left: calc(16px + (100% / 3 - 32px) / 2 + 32px / 2);
    right: calc(16px + (100% / 3 - 32px) / 2 + 32px / 2);
    height: 2px;
    background: var(--fm-border);
    z-index: 0;
}
.auth-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}
.auth-step__dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid var(--fm-border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .8rem;
    font-weight: 800;
    color: var(--fm-subtle);
    transition: border-color .3s, background .3s, color .3s;
}
.auth-step.active .auth-step__dot  { border-color: var(--fm-green); background: var(--fm-green); color: #fff; }
.auth-step.done  .auth-step__dot   { border-color: #22C55E; background: #22C55E; color: #fff; }
.auth-step__label {
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fm-subtle);
    transition: color .3s;
}
.auth-step.active .auth-step__label { color: var(--fm-dark); }
.auth-step.done  .auth-step__label  { color: #16A34A; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 540px) {
    .auth-page { padding: 24px 16px 48px; }
    .auth-card__head { padding: 22px 20px 18px; }
    .auth-card__body { padding: 22px 20px 28px; }
    .auth-card__title { font-size: 1.6rem; }
    .auth-pw-checks { grid-template-columns: 1fr; }
}