/* =============================================================================
   Account Page — Combined Sign In / Register
   ============================================================================= */

.account-wrap {
    min-height:      calc(100vh - var(--header-height) - 80px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         2rem 1rem;
}

.account-card {
    width:         100%;
    max-width:     380px;
    background:    var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-md);
    border:        1px solid var(--color-border);
    overflow:      hidden;
}

.account-card__body {
    min-height: 420px;
}

/* ---------------------------------------------------------------------------
   Browser-style tab bar
   --------------------------------------------------------------------------- */
.account-tabs {
    display:          flex;
    background:       var(--color-surface-alt);
    border-bottom:    3px solid var(--color-border);
}

.account-tab {
    flex:            1;
    padding:         .85rem 1rem;
    text-align:      center;
    font-size:       .9rem;
    font-weight:     500;
    color:           var(--color-text-muted);
    text-decoration: none;
    border-bottom:   3px solid transparent;
    transition:      color .15s, border-color .15s, background .15s;
    /* Mimic a browser tab — inactive tabs sit slightly lower */
    margin-bottom:   -3px;
}

.account-tab:hover {
    color:           var(--color-text);
    background:      var(--color-accent);
    text-decoration: none;
}

.account-tab--active {
    color:           var(--color-primary);
    background:      var(--color-surface);
    border-bottom:   3px solid var(--color-accent);
    font-weight:     600;
}

/* ---------------------------------------------------------------------------
   Card body
   --------------------------------------------------------------------------- */
.account-card__body {
    padding: 1.75rem 1.75rem 1.5rem;
    display:        flex;
    flex-direction: column;
}

.account-card__footer-link {
    text-align:  left;
    font-size:   .6rem;
    color:       var(--color-text-muted);
}

.account-card__body form {
    display:        flex;
    flex-direction: column;
    flex:           1;
}

.account-card__body form .btn {
    margin-top:    auto;
    margin-bottom: 1.5rem; /* adjust this to set distance from bottom */
}

.input-reveal {
    position: relative;
    display:  flex;
    align-items: center;
}

.input-reveal .form-control {
    padding-right: 2.5rem;
    width: 100%;
}

.input-reveal__btn {
    position:   absolute;
    right:      .6rem;
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    0;
    color:      var(--color-text-muted);
    display:    flex;
    align-items: center;
}

.input-reveal__btn:hover {
    color: var(--color-text);
}

.input-reveal__eye {
    width:  18px;
    height: 18px;
}