/* ── Alert Component ───────────────────────────────────── */

.xfact-alert {
    margin: 0 0 24px 0 !important;
    border-radius: var(--xfact-glass-radius, 12px) !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.wpcf7 form .wpcf7-response-output {
    margin: 0 !important;
    border-radius: var(--xfact-glass-radius, 12px) !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.xfact-alert p {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--xfact-semantic-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.xfact-alert.xfact-alert-success,
.wpcf7 form.sent .wpcf7-response-output {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    background-color: color-mix(
        in srgb,
        var(--xfact-semantic-success) 10%,
        transparent
    ) !important;
    border: 1px solid var(--xfact-semantic-success) !important;
    border-left: 4px solid var(--xfact-semantic-success) !important;
    color: var(--xfact-semantic-success) !important;
}

.xfact-alert.xfact-alert-success::before,
.wpcf7 form.sent .wpcf7-response-output::before {
    content: "";
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-color: var(--xfact-semantic-success);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.xfact-alert.xfact-alert-danger,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    background-color: color-mix(
        in srgb,
        var(--xfact-semantic-danger) 10%,
        transparent
    ) !important;
    border: 1px solid var(--xfact-semantic-danger) !important;
    border-left: 4px solid var(--xfact-semantic-danger) !important;
    color: var(--xfact-semantic-danger) !important;
}

.xfact-alert.xfact-alert-danger::before,
.wpcf7 form.failed .wpcf7-response-output::before,
.wpcf7 form.aborted .wpcf7-response-output::before,
.wpcf7 form.spam .wpcf7-response-output::before,
.wpcf7 form.invalid .wpcf7-response-output::before,
.wpcf7 form.unaccepted .wpcf7-response-output::before {
    content: "";
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-color: var(--xfact-semantic-danger);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.xfact-alert.xfact-alert-info {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    background-color: color-mix(
        in srgb,
        var(--xfact-semantic-primary) 10%,
        transparent
    ) !important;
    border: 1px solid var(--xfact-semantic-primary) !important;
    border-left: 4px solid var(--xfact-semantic-primary) !important;
    color: var(--xfact-semantic-primary) !important;
}

.xfact-alert.xfact-alert-info::before {
    content: "";
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-color: var(--xfact-semantic-primary);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.xfact-alert.xfact-alert-warning {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    background-color: color-mix(
        in srgb,
        var(--xfact-semantic-warning) 10%,
        transparent
    ) !important;
    border: 1px solid var(--xfact-semantic-warning) !important;
    border-left: 4px solid var(--xfact-semantic-warning) !important;
    color: var(--xfact-semantic-warning) !important;
}

.xfact-alert.xfact-alert-warning::before {
    content: "";
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-color: var(--xfact-semantic-warning);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}