.cf-modal {
    --cf-ink: var(--wp--preset--color--contrast, #14140f);
    --cf-paper: var(--wp--preset--color--base, #ffffff);
    --cf-line: var(--wp--preset--color--accent, #e4e3dd);
    --cf-muted: var(--wp--preset--color--accent-2, #8b8b83);
    --cf-page-bg: #eeeeea;
    --cf-radius-lg: 20px;
    --cf-radius-md: 14px;
    --cf-radius-sm: 10px;
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cf-modal[hidden] {
    display: none;
}

.cf-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 13, 11, .6);
    animation: cf-modal-fade .18s ease both;
}

.cf-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 800px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--cf-paper);
    border-radius: var(--cf-radius-lg);
    padding: 36px 32px 32px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    animation: cf-modal-in .22s cubic-bezier(.16, 1, .3, 1) both;
}

.cf-modal .cf-title {
    padding-right: 36px;
}

.cf-modal .cf-caption {
    margin-bottom: 24px;
}

.cf-modal .cf-field {
    margin-bottom: 10px;
}

.cf-modal .cf-text.has-error {
    border-color: #c62828;
    box-shadow: 0 0 0 1px #c62828;
}

.cf-form__legal-consent {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--cf-line);
    color: var(--cf-muted);
    font-size: 12px;
    line-height: 1.5;
}

.cf-form__legal-consent-policy {
    margin: 0;
}

.cf-form__consent-option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    cursor: pointer;
}

.cf-form__consent-option input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--cf-ink);
}

.cf-form__consent-option span {
    color: var(--cf-ink);
}

.cf-form__legal-consent-policy {
    margin-top: 12px;
}

.cf-form__legal-consent-policy a {
    color: var(--cf-ink);
    text-decoration: underline;
}

.cf-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: none;
    background: var(--cf-page-bg);
    color: var(--cf-ink);
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s ease;
}

.cf-modal__close:hover {
    background: var(--cf-line);
}

.cf-modal__close svg {
    width: 13px;
    height: 13px;
}

.cf-modal .cf-form-grid {
    margin-top: 8px;
    grid-template-columns: 1fr 1fr 1fr;
}

.cf-modal__submit-row {
    margin-top: 28px;
}

.cf-modal__submit-row .wp-block-button__link {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
}

.cf-modal__submit-row .wp-block-button__link[aria-disabled="true"] {
    cursor: wait;
    opacity: .6;
    pointer-events: none;
}

.cf-submit__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: cf-submit-spin .7s linear infinite;
}

.cf-modal__submit-row .wp-block-button__link.is-loading .cf-submit__spinner {
    display: inline-block;
}

@keyframes cf-submit-spin {
    to { transform: rotate(360deg); }
}

@keyframes cf-modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cf-modal-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}