/* ================================================================
   AUTHEN FORMS  — Shared styles for signin / signup / forgot
   ================================================================ */

/* ----- Wrapper ----- */
.af-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
}

/* ----- Card ----- */
.af-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
    padding: 2.5rem 2.5rem 2rem;
    width: 100%;
    max-width: 480px;
    animation: afFadeUp .4s ease;
}
.af-card--wide { max-width: 680px; }

@keyframes afFadeUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ----- Header ----- */
.af-header { text-align:center; margin-bottom:1.8rem; }
.af-logo    { width:60px; margin-bottom:.8rem; }
.af-title   { font-size:1.7rem; font-weight:700; color:#1a2e40; margin:0 0 .2rem; }
.af-subtitle{ color:#7a8fa6; font-size:.9rem; margin:0; }

/* ----- Alert ----- */
.af-alert {
    background:#fff0f0;
    border-left:4px solid #e74c3c;
    border-radius:8px;
    padding:.8rem 1rem;
    font-size:.88rem;
    color:#c0392b;
    margin-bottom:1.2rem;
}
.af-alert i { margin-right:.4rem; }
.af-alert-item { margin:.2rem 0; }

.af-alert--success {
    background:#f0fff4;
    border-left-color:#27ae60;
    color:#1e6b3a;
}

/* ----- Section title ----- */
.af-section-title {
    font-size:.75rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#9eafc2;
    margin-bottom:.6rem;
    display:flex;
    align-items:center;
    gap:.4rem;
}
.af-section-title.mt { margin-top:1.4rem; }

/* ----- Grid ----- */
.af-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.8rem 1.2rem;
}
.af-full { grid-column:1/-1; }

/* ----- Field ----- */
.af-field { display:flex; flex-direction:column; gap:.3rem; }

.af-label {
    font-size:.8rem;
    font-weight:600;
    color:#374151;
    letter-spacing:.02em;
}
.af-req      { color:#e74c3c; }
.af-optional { color:#9eafc2; font-weight:400; }

/* ----- Input wrap ----- */
.af-input-wrap {
    display:flex;
    align-items:center;
    border:1.5px solid #dce3ec;
    border-radius:10px;
    background:#f9fbfd;
    transition:border-color .2s, box-shadow .2s;
    overflow:hidden;
}
.af-input-wrap:focus-within {
    border-color:#2c5364;
    box-shadow:0 0 0 3px rgba(44,83,100,.12);
    background:#fff;
}
.af-input-wrap.has-error { border-color:#e74c3c; background:#fff8f8; }

.af-input-wrap > i:first-child {
    padding:0 .7rem;
    color:#9eafc2;
    font-size:.95rem;
    flex-shrink:0;
}

.af-input {
    border:none;
    outline:none;
    background:transparent;
    padding:.62rem .4rem .62rem 0;
    font-size:.9rem;
    color:#1a2e40;
    width:100%;
}
.af-input::placeholder { color:#b5c3d4; }

/* ----- Select ----- */
.af-select-wrap { position:relative; }
.af-select {
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    padding-right:2rem;
}
.af-chevron {
    position:absolute;
    right:.7rem;
    color:#9eafc2;
    pointer-events:none;
    font-size:.8rem;
}

/* ----- Eye toggle ----- */
.af-eye {
    background:none;
    border:none;
    padding:0 .7rem;
    color:#9eafc2;
    cursor:pointer;
    font-size:.95rem;
    flex-shrink:0;
    transition:color .15s;
}
.af-eye:hover { color:#2c5364; }

/* ----- Password strength ----- */
.af-strength-bar {
    display:flex;
    align-items:center;
    gap:.6rem;
    margin:.8rem 0 1.2rem;
    min-height:18px;
}
.af-strength-track {
    flex:1;
    height:5px;
    background:#e8edf3;
    border-radius:99px;
    overflow:hidden;
}
.af-strength-fill {
    height:100%;
    width:0%;
    border-radius:99px;
    transition:width .3s, background .3s;
}
.af-strength-label { font-size:.75rem; font-weight:600; min-width:60px; text-align:right; }

/* ----- Actions ----- */
.af-actions {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.9rem;
    margin-top:1.2rem;
}

.af-btn {
    width:100%;
    padding:.8rem;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#203a43,#2c5364);
    color:#fff;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    transition:transform .15s, box-shadow .15s;
    letter-spacing:.02em;
}
.af-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(44,83,100,.35); }
.af-btn:active { transform:translateY(0); }

.af-links {
    display:flex;
    justify-content:space-between;
    width:100%;
    font-size:.83rem;
    gap:.5rem;
    flex-wrap:wrap;
}

.af-link       { color:#7a8fa6; text-decoration:none; }
.af-link strong{ color:#2c5364; }
.af-link:hover strong { text-decoration:underline; }

.af-link--small { font-size:.8rem; color:#9eafc2; text-align:center; }
.af-link--small:hover { color:#2c5364; }

/* ----- Field-level error ----- */
.af-field-error {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: #c0392b;
    margin-top: .25rem;
    padding-left: .2rem;
}
.af-field-error i { font-size: .8rem; flex-shrink: 0; }

/* ----- Responsive ----- */
@media (max-width:580px) {
    .af-grid  { grid-template-columns:1fr; }
    .af-full  { grid-column:1; }
    .af-card  { padding:1.8rem 1.2rem; }
    .af-links { flex-direction:column; align-items:center; }
}