/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

body [data-elmm-balloon][data-balloon-pos='top']::before,
[data-elmm-balloon][data-balloon]:not([data-balloon-pos])::before {
    border-top-color: var(--bg-surface);
}
body [data-elmm-balloon][data-balloon]::after {
    background: var(--bg-surface);
    font-size: var(--text-xs);
    width: 20rem;
    padding-block: var(--space-xs);
    padding-inline: var(--space-xs);
    border-radius: var(--radius-m);
    color: var(--text-body);
    font-style: normal;
    text-wrap: pretty;
}
p {
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6{
    span {
        color: var(--primary);
    }
}
.bg-noise__dark {
    background-color: var(--dark-noise);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIj4KICA8ZmlsdGVyIGlkPSJub2lzZSIgeD0iMCIgeT0iMCI+CiAgICA8ZmVUdXJidWxlbmNlCiAgICAgIHR5cGU9ImZyYWN0YWxOb2lzZSIKICAgICAgYmFzZUZyZXF1ZW5jeT0iMC4zNSIKICAgICAgbnVtT2N0YXZlcz0iMyIKICAgICAgc3RpdGNoVGlsZXM9InN0aXRjaCIKICAgIC8+CiAgICA8ZmVCbGVuZCBtb2RlPSJzY3JlZW4iIC8+CiAgPC9maWx0ZXI+CiAgPHJlY3Qgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIGZpbHRlcj0idXJsKCNub2lzZSkiIG9wYWNpdHk9IjAuNyIgLz4KPC9zdmc+');
        mix-blend-mode: soft-light;
    }
}

.icon-star {
    .icon {
        width: var(--space-l);
        height: auto;
    }
}

.accent-blur {
    /* Before */
    --before-display: flex;
    --before-opacity: 0.125;
    --before-inset: 0 auto auto 1em;
    --before-width: 30rem;
    --before-rotate: 45deg;
    --before-blur: 75px;
    --before-color: var(--primary);
    /* After */
    --after-display: flex;
    --after-opacity: 0.125;
    --after-inset: auto 1em 0 auto;
    --after-width: 30rem;
    --after-rotate: 25deg;
    --after-blur: 45px;
    --after-color: var(--primary-d-6);
    /* Parent */
    --overflow: visible;
    isolation: isolate;
    overflow: var(--overflow);
    position: relative;

    &::before {
        opacity: var(--before-opacity);
        content: '';
        display: var(--before-display);
        width: var(--before-width);
        aspect-ratio: 1/1;
        background-color: var(--before-color);
        position: absolute;
        inset: var(--before-inset);
        z-index: -1;
        filter: blur(var(--before-blur));
        transform: rotate(var(--before-rotate));
    }
    &::after {
        opacity: var(--after-opacity);
        content: '';
        display: var(--after-display);
        width: var(--after-width);
        aspect-ratio: 1/1;
        background-color: var(--after-color);
        position: absolute;
        inset: var(--after-inset);
        z-index: -1;
        filter: blur(var(--after-blur));
        transform: rotate(var(--after-rotate));
    }
}

@media (max-width: 480px) {
    .accent-blur {
        &::before {
            width: calc(var(--before-width) - 5rem);
        }
        &::after {
            width: calc(var(--after-width) - 5rem);
        }
    }
}

.wsf-form .wsf-grid {
    margin-left: auto !important;
    margin-right: auto !important;
}
.form-section__wrapper {
    border: 1px solid var(--primary) !important;
    border-radius: var(--radius-m) !important;
    background-color: var(--dark) !important;
    padding-inline: var(--space-s) !important;
    padding-block: var(--space-s) !important;
}

.wsf-form input[type='radio'].wsf-field.wsf-button + label.wsf-label {
    border-color: var(--border-primary) !important;
    text-align: start !important;
}
.wsf-form input[type='radio'].wsf-field.wsf-button:checked + label.wsf-label {
    border-color: var(--primary) !important;
}
.progress-label > label {
    background-color: var(--wsf-field-help-color-background) !important;
    color: var(--dark-l-5) !important;
    display: block !important;
    font-family: var(--wsf-field-help-font-family) !important;
    font-size: var(--wsf-field-help-font-size) !important;
    font-style: var(--wsf-field-help-font-style) !important;
    font-weight: var(--wsf-field-help-font-weight) !important;
    letter-spacing: var(--wsf-field-help-letter-spacing) !important;
    line-height: var(--wsf-field-help-line-height) !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: var(--wsf-field-help-gap) !important;
    padding: 0 !important;
    -webkit-text-decoration: var(--wsf-field-help-text-decoration) !important;
    text-decoration: var(--wsf-field-help-text-decoration) !important;
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    text-transform: var(--wsf-field-help-text-transform) !important;
}
.next-btn::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 6px; /* Space between text and icon */
    vertical-align: middle; /* Keeps the icon aligned with text baseline */
    background-color: currentColor;
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+Cgk8cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik00IDExdjJoMTJsLTUuNSA1LjVsMS40MiAxLjQyTDE5Ljg0IDEybC03LjkyLTcuOTJMMTAuNSA1LjVMMTYgMTF6IiAvPgo8L3N2Zz4K');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+Cgk8cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik00IDExdjJoMTJsLTUuNSA1LjVsMS40MiAxLjQyTDE5Ljg0IDEybC03LjkyLTcuOTJMMTAuNSA1LjVMMTYgMTF6IiAvPgo8L3N2Zz4K');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.pre-btn {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--bg-body) !important;
    &::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 6px; /* Space between text and icon */
        vertical-align: middle; /* Keeps the icon aligned with text baseline */
        background-color: currentColor;
        -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+Cgk8cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yMCAxMXYySDhsNS41IDUuNWwtMS40MiAxLjQyTDQuMTYgMTJsNy45Mi03LjkyTDEzLjUgNS41TDggMTF6IiAvPgo8L3N2Zz4K');
        mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+Cgk8cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yMCAxMXYySDhsNS41IDUuNWwtMS40MiAxLjQyTDQuMTYgMTJsNy45Mi03LjkyTDEzLjUgNS41TDggMTF6IiAvPgo8L3N2Zz4K');
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
}

.footer-4__icon:hover {
    color: var(--bg-light) !important;
    fill: var(--bg-light) !important;
    background-color: tranparent !important;
}