/*
|--------------------------------------------------------------------------
| Royal Servicess LLC
| Account Recovery
|--------------------------------------------------------------------------
*/

.recovery-heading {
    max-width: 720px;
    margin: 0 auto 26px;

    text-align: center;
}

.recovery-heading h1 {
    margin:
        5px 0
        8px;
}

.recovery-heading p {
    margin: 0 auto;

    max-width: 640px;

    color: var(--silver-400);

    line-height: 1.6;
}

.recovery-methods {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 22px;

    max-width: 960px;
    margin: 0 auto;
}

.recovery-copy {
    margin:
        0 0
        20px;

    color: var(--silver-400);

    font-size: 0.8rem;
    line-height: 1.6;
}

.recovery-error {
    max-width: 960px;
    margin:
        0 auto
        20px;

    border:
        1px solid rgba(218, 115, 115, 0.24);

    border-radius: 14px;

    padding: 14px 16px;

    background:
        rgba(109, 32, 32, 0.12);

    color: var(--silver-200);
}

.recovery-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    max-width: 960px;
    margin: 20px auto 0;

    align-items: center;
    justify-content: center;

    color: var(--silver-500);

    font-size: 0.78rem;
}

.recovery-divider {
    display: flex;

    margin: 20px 0;

    align-items: center;
    gap: 12px;

    color: var(--silver-500);

    font-size: 0.72rem;
    text-transform: uppercase;
}

.recovery-divider::before,
.recovery-divider::after {
    content: "";

    flex: 1;

    height: 1px;

    background:
        rgba(192, 192, 192, 0.12);
}

.recovery-full-button {
    width: 100%;
    justify-content: center;
}

.recovery-back {
    margin-top: 20px;

    text-align: center;
}

.recovery-password-card {
    max-width: 620px;
    margin-inline: auto;
}

@media (max-width: 760px) {
    .recovery-methods {
        grid-template-columns: 1fr;
    }
}