/* @group Contact Form
------------------------------------ */

/* Decoration
---------------- */
.contact-form {
    padding: 2rem;
    position: relative;
}
.contact-form .content-row {
    padding-block: 8rem 10rem;
}
.contact-form .squares-decoration {
    position: static;
}
.contact-form .squares-decoration .bp-icon {
    position: absolute;
    pointer-events: none;
}
.contact-form .squares-decoration .top {
    top: 1px;
}
.contact-form .squares-decoration .bottom {
    bottom: 1px;
}
.contact-form .squares-decoration .right {
    right: 1px;
}
.contact-form .squares-decoration .left {
    left: 1px;
}

/* Form
---------------- */
.contact-form .form-col .wpcf7 .bp-button {
    margin-top: 1.5rem;
    margin-left: auto;
}
.contact-form .form-col :is(.wpcf7, .thank-you-message) {
    transition: all .4s;
}
.contact-form .form-col .thank-you-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}
.contact-form .form-col:is(.showMessage) .thank-you-message {
    opacity: 1;
    pointer-events: all;
}
.contact-form .form-col:is(.showMessage) .wpcf7 {
    opacity: 0;
    pointer-events: none;
}

@media only screen
and (min-width : 961px) {
    /* Decoration
    ---------------- */
    .contact-form {
        padding: 0;
        border-top: 2px solid var(--khaki);
    }
    .contact-form .content-row {
        padding-block: 13.3rem;
        position: relative;
        border-left: none;
    }
    .contact-form .squares-decoration::before,
    .contact-form .squares-decoration::after {
        content: "";
        position: absolute;
        background-color: var(--khaki);
        width: 100%;
        height: 2px;
        left: 0;
    }
    .contact-form .squares-decoration::after {
        top: calc(4rem - 1px);
        max-width: calc(100% - 2px - 5.8%);
        left: calc(2px + 5.8%);
    }
    .contact-form .squares-decoration::before {
        bottom: 4rem;
        max-width: calc(100% - 2px - 5.8%);
        left: calc(2px + 5.8%);
    }
    .contact-form .squares-decoration .top {
        top: 0;
    }
    .contact-form .content-row::before,
    .contact-form .content-row::after {
        content: "";
        position: absolute;
        width: 4rem;
        height: 100%;
        top: 0;
        border-width: 0 2px 0 2px;
        border-style: solid;
        border-color: var(--khaki);
    }
    .contact-form .content-row::after {
        left: calc(2px + 5.8%);
    }
    .contact-form .content-row::before {
        right: calc(2.7% + 2px);
    }



    .contact-form .squares-decoration .bottom {
        bottom: -1px;
    }
    .contact-form .squares-decoration .right {
        right: calc(2.7% + 2px);
    }
    .contact-form .squares-decoration .left {
        left: calc(2px + 5.8%);
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    /* Decoration
    ---------------- */
    :is(.contact-form, #important) {
        width: 77.27%;
        margin: 0 auto;
        bottom: -2px;
        padding-bottom: calc(2rem + 1px);
    }
    .contact-form::before {
        content: '';
        position: absolute;
        top: 1px;
        left: calc(2rem + 1px);
        right: calc(2rem + 1px);
        height: 2px;
        background: var(--khaki);
    }
    .contact-form .content-row {
        border: 2px solid var(--khaki);
    }
    .contact-form .title-col p br {
        display: none;
    }
}

/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .contact-form .title-col :is(.bp-icon) {
	opacity: 0;
	--duration: 1s;
}
:where(#wrapper) .contact-form.animateActive .title-col :is(.bp-icon) {
	animation: fade var(--duration) forwards;
	animation-delay: var(--delay, 0);
}
:where(#wrapper) .contact-form.animateActive .title-col :is(.bp-icon) {
    --delay: 0.3s;
}

.wp-admin .contact-form .form-col .thank-you-message {
    position: static;
    opacity: 1;
    pointer-events: all;
    margin: 0 auto;
    transform: none;
}