/* 404 & Thank You Pages */
.error-page,
.thank-you-page {
    padding: var(--space-4xl) 0 var(--space-5xl);
    background-color: var(--color-white);
}

.error-page__inner,
.thank-you-page__inner {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--section-px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xl);
}

/* 404 */
.error-page__code {
    font-size: 120px;
    font-weight: var(--fw-bold);
    color: var(--color-blue);
    line-height: 1;
    opacity: 0.15;
}

.error-page__message {
    font-size: var(--fs-md);
    color: var(--color-gray-text);
    line-height: 1.7;
    max-width: 450px;
}

.error-page__actions {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
}

/* Thank You */
.thank-you-page__icon {
    margin-bottom: var(--space-sm);
}

.thank-you-page__headline {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    color: var(--color-blue);
}

.thank-you-page__body {
    font-size: var(--fs-md);
    color: var(--color-gray-text);
    line-height: 1.7;
    max-width: 480px;
}

.thank-you-page__actions {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
}

@media (max-width: 1023px) {
    .error-page__code {
        font-size: 80px;
    }

    .error-page__actions,
    .thank-you-page__actions {
        flex-direction: column;
        width: 100%;
    }

    .error-page__actions .btn-primary,
    .error-page__actions .btn-outline-blue,
    .thank-you-page__actions .btn-primary,
    .thank-you-page__actions .btn-outline-blue {
        width: 100%;
        justify-content: center;
    }
}