/* THANK-YOU CARD after form submits (js/forms.js, inc/func-newsletter.php) */

.form-thanks {
    box-sizing: border-box;
    max-width: 40rem;
    padding: 2.5rem 2rem;
    /* rounded top-right + bottom-left, like the CTA boxes */
    border-radius: 0 3.125rem 0 3.125rem;
    background-color: var(--color-blue-50);
    color: var(--color-text);
    animation: form-thanks-in 0.5s ease-out both;
}

.form-thanks-icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 1.5rem;
    animation: form-thanks-pop 0.45s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.form-thanks-title {
    margin: 0 0 0.75rem;
}

.form-thanks-title span {
    color: var(--color-primary);
}

.form-thanks-text {
    margin: 0;
}

.form-thanks-text + .form-thanks-text {
    margin-top: 0.75rem;
}

.form-thanks-hint {
    margin: 1.5rem 0 0;
    font-size: var(--fs-small);
    opacity: 0.8;
}

.form-thanks-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

/* Ninja Forms renders the card inside its response box */
.nf-response-msg .form-thanks {
    margin-bottom: 2rem;
}

@keyframes form-thanks-in {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: none; }
}

@keyframes form-thanks-pop {
    from { opacity: 0; transform: scale(0.4); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .form-thanks,
    .form-thanks-icon {
        animation: none;
    }
}

@media screen and (min-width: 48rem) {
    .form-thanks {
        padding: 3rem;
    }
}

.newsletter .form-thanks {
    margin-bottom: 2rem;
}