experience-crm-form {
    --crm-bg: var(--wp--preset--color--accent-5, #fbfaf3);
    --crm-text-color: var(--wp--preset--color--contrast, #111);
    --crm-border: var(--wp--preset--color--accent-6, #e0e0e0);
    --crm-input-bg: var(--wp--preset--color--base, #fff);
    --crm-btn-bg: var(--wp--preset--color--contrast, #111);
    --crm-btn-text: var(--wp--preset--color--base, #fff);
    --crm-focus: var(--wp--preset--color--contrast, #111);
    --crm-radius: 0.25rem;
    --crm-success: #2e7d32;
    --crm-error: #d32f2f;

    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40, 30px);
    max-width: 500px;
    padding: var(--wp--preset--spacing--40, 30px);
    background-color: var(--crm-bg);
    border-radius: var(--crm-radius);
    font-family: inherit;
    color: var(--crm-text-color);

    .fields {
        display: flex;
        flex-direction: column;
        gap: var(--wp--preset--spacing--30, 20px);
    }

    input[type="email"] {
        width: 100%;
        padding: var(--wp--preset--spacing--30, 20px);
        border: 1px solid var(--crm-border);
        border-radius: var(--crm-radius);
        font-size: inherit;
        font-family: inherit;
        color: var(--crm-text-color);
        background-color: var(--crm-input-bg);
        box-sizing: border-box;
        transition: border-color 0.2s ease;

        &:focus {
            outline: none;
            border-color: var(--crm-focus);
        }
    }

    .optin {
        display: flex;
        align-items: flex-start;
        gap: var(--wp--preset--spacing--20, 10px);
        cursor: pointer;
        line-height: 1.4;

        input[type="checkbox"] {
            margin-top: 3px;
            flex-shrink: 0;
            accent-color: var(--crm-btn-bg);
        }
    }

    button[type="submit"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--wp--preset--spacing--20, 10px);
        width: 100%;
        padding: 1rem 2.25rem;
        background-color: var(--crm-btn-bg);
        color: var(--crm-btn-text);
        border: none;
        border-radius: var(--crm-radius);
        font-family: inherit;
        font-weight: 700;
        cursor: pointer;
        transition: background-color 0.2s ease;

        &:hover {
            background-color: color-mix(in srgb, var(--crm-btn-bg) 85%, transparent);
        }

        &:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }
    }

    .spinner {
        display: none;
        width: 16px;
        height: 16px;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: experience-crm-spin 0.6s linear infinite;
    }

    &.loading .spinner {
        display: inline-block;
    }

    .message {
        line-height: 1.4;

        &:empty {
            display: none;
        }

        &.success {
            color: var(--crm-success);
            font-weight: 600;
        }

        &.error {
            color: var(--crm-error);
            font-weight: 600;
        }
    }

    @media (min-width: 481px) {
        padding: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px));

        button[type="submit"] {
            width: auto;
        }
    }
}

@keyframes experience-crm-spin {
    to {
        transform: rotate(360deg);
    }
}