/*
| WonGate — merchant / agent sign-in polish.
| Uses the same CSS variables as agent.css / wongate-auth-dark.css, so it
| follows the light and dark auth themes. Load after both.
*/
.auth-card.auth-portal .auth-head { margin-bottom: 1.25rem; }

/* Feature chips under the role badge */
.auth-portal-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    list-style: none;
    margin: .85rem 0 0;
    padding: 0;
}
.auth-portal-features li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .6rem;
    border: 1px solid var(--front-color-border, rgba(0, 0, 0, .1));
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--front-color-text-soft, #6b7280);
    background: var(--front-color-surface-soft, transparent);
    white-space: nowrap;
}
.auth-card.is-merchant .auth-portal-features i { color: var(--front-color-merchant, #16a34a); }
.auth-card.is-agent .auth-portal-features i { color: var(--front-color-agent, #4f46e5); }

/* Inputs */
.auth-card.auth-portal .form-control,
.auth-card.auth-portal .input-group-text { min-height: 46px; }
.auth-card.auth-portal .form-control { font-size: .95rem; }
.auth-card.auth-portal .input-group:focus-within .input-group-text,
.auth-card.auth-portal .input-group:focus-within .form-control { border-color: currentColor; }
.auth-card.is-merchant.auth-portal .input-group:focus-within { color: var(--front-color-merchant, #16a34a); }
.auth-card.is-agent.auth-portal .input-group:focus-within { color: var(--front-color-agent, #4f46e5); }
.auth-card.auth-portal .input-group:focus-within .form-control { color: var(--front-color-heading, inherit); box-shadow: none; }

/* Show/hide password control (now a real button) */
.auth-toggle-password {
    background: transparent;
    cursor: pointer;
    border-left: 0;
}
.auth-toggle-password:hover { color: var(--front-color-heading, inherit); }
.auth-toggle-password:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/* Submit button */
.auth-card.auth-portal .btn-submit-auth {
    width: 100%;
    min-height: 48px;
    font-weight: 700;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.auth-card.auth-portal .btn-submit-auth:disabled { opacity: .8; cursor: progress; }

/* Reassurance line */
.auth-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: 1rem 0 0;
    font-size: .74rem;
    color: var(--front-color-muted, #6b7280);
    text-align: center;
}

@media (max-width: 575.98px) {
    .auth-portal-features li { font-size: .68rem; padding: .25rem .5rem; }
}