/*
 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
*/

/**************************** Global ****************************/

:root {
    --header-height: 72px
}

* {
    margin: 0;
    padding: 0;
}

html:has(body #wpadminbar) {
    margin: 0 !important;
}

#brx-content .brxe-text a {
    color: var(--brand--700);
    transition: var(--transition);
    font-weight: 600;
}

#brx-content .brxe-text a:hover {
    color: var(--brand--800);
}

/**************************** Global ****************************/

/**************************** Button ****************************/

.submit-button-wrapper button,
.btn-primary {
    width: 100%;
    min-height: 44px;
    border-radius: 0.5rem;
    background: var(--brand--600);
    box-shadow: 0 0 0 1px rgba(10, 13, 18, 0.18) inset, 0 -2px 0 0 rgba(10, 13, 18, 0.05) inset, 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    font-size: var(--text-md);
    line-height: var(--text-md-lh);
    font-weight: 600;
    color: var(--white);
    transition: var(--transition);
    letter-spacing: 0;
    padding: 0.4rem 1.5rem;
    cursor: pointer;
}

.submit-button-wrapper {
    width: 100%;
}

.submit-button-wrapper button:hover,
.btn-primary:hover {
    background: var(--brand--700);
}

.submit-button-wrapper button:focus,
.btn-primary:focus {
    outline: 3px solid var(--brand--400);
}

/**************************** Button ****************************/

/**************************** Bricks and Html Form ****************************/

.brxe-form {
    gap: 1.5rem;
}

.brxe-form input,
.global-form select,
.global-form input {
    border: 1px solid var(--gray--300);
    font-size: var(--text-md);
    line-height: var(--text-md-lh);
    color: var(--primary) !important;
    min-height: 44px;
    border-radius: 0.5rem;
    font-weight: 400;
    outline: 2px solid transparent;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    padding: 9px 14px;
    outline-offset: -1px;
    transition: var(--transition);
}

.global-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M5 7.5L10 12.5L15 7.5' stroke='%23A4A7AE' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 14px) center;
    background-size: 20px;
    padding-right: 3rem;
}

.global-form input[type="email"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M1.66675 5.83325L8.47085 10.5961C9.02182 10.9818 9.29731 11.1746 9.59697 11.2493C9.86166 11.3153 10.1385 11.3153 10.4032 11.2493C10.7029 11.1746 10.9783 10.9818 11.5293 10.5961L18.3334 5.83325M5.66675 16.6666H14.3334C15.7335 16.6666 16.4336 16.6666 16.9684 16.3941C17.4388 16.1544 17.8212 15.772 18.0609 15.3016C18.3334 14.7668 18.3334 14.0667 18.3334 12.6666V7.33325C18.3334 5.93312 18.3334 5.23306 18.0609 4.69828C17.8212 4.22787 17.4388 3.84542 16.9684 3.60574C16.4336 3.33325 15.7335 3.33325 14.3334 3.33325H5.66675C4.26662 3.33325 3.56655 3.33325 3.03177 3.60574C2.56137 3.84542 2.17892 4.22787 1.93923 4.69828C1.66675 5.23306 1.66675 5.93312 1.66675 7.33325V12.6666C1.66675 14.0667 1.66675 14.7668 1.93923 15.3016C2.17892 15.772 2.56137 16.1544 3.03177 16.3941C3.56655 16.6666 4.26662 16.6666 5.66675 16.6666Z' stroke='%23A4A7AE' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 14px center;
    padding-left: 42px;
}

.global-form input::placeholder,
.brxe-form input::placeholder {
    opacity: 1 !important;
    color: var(--gray--500);
}

.global-form select:hover,
.global-form select:focus,
.global-form input:hover,
.global-form input:focus,
.brxe-form input:hover,
.brxe-form input:focus {
    outline-color: var(--brand--500);
}

.brxe-form .options-wrapper li {
    position: relative;
    line-height: 1;
}

.brxe-form .options-wrapper input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
}

.brxe-form .options-wrapper input[type="checkbox"]+label {
    color: var(--gray--700);
    position: relative;
    padding-left: 1.714em;
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.428;
    font-weight: 500;
    word-break: break-word;
}

.brxe-form .options-wrapper input[type="checkbox"]+label:before {
    position: absolute;
    content: '';
    width: 1.142em;
    height: 1.142em;
    border: 1px solid var(--gray--300);
    border-radius: 4px;
    top: 0.125em;
    left: 0;
    outline: 2px solid transparent !important;
    outline-offset: 2px;
    transition: var(--transition);
}

.brxe-form .options-wrapper input[type="checkbox"]+label::after {
    position: absolute;
    content: '';
    width: 0.85em;
    height: 0.85em;
    opacity: 0;
    visibility: hidden;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%20fill='none'%3E%3Cpath%20d='M11.6666%203.5L5.24992%209.91667L2.33325%207'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 0.3em;
    left: 0.15em;
}

.brxe-form .options-wrapper input[type="checkbox"]:checked+label::before {
    background: var(--brand--600);
    border-color: var(--brand--600);
}

.brxe-form .options-wrapper input[type="checkbox"]:checked+label::after {
    opacity: 1;
    visibility: visible;
}

.brxe-form .options-wrapper input[type="checkbox"]:focus+label:before,
.brxe-form .options-wrapper input[type="checkbox"]+label:hover:before {
    outline-color: var(--brand--500) !important;
}

.brxe-form .form-group:has(ul.options-wrapper) {
    flex-grow: 1;
    width: 10%;
}

.brxe-form .form-group:has(.brxe-text) {
    width: fit-content;
    white-space: nowrap;
}

.brxe-form .form-group .brxe-text {
    font-size: var(--text-sm);
    line-height: 1.428;
}

.global-form label,
.brxe-form .form-group:not(:has(.options-wrapper)) label {
    font-size: var(--text-sm);
    line-height: 1.428;
    letter-spacing: 0;
    text-transform: unset;
    margin-bottom: 6px;
    color: var(--gray--700);
    font-weight: 500;
}

.global-form label:has(+input[required])::after,
.global-form label:has(+select[required])::after,
.global-form label:has(+textarea[required])::after,
.brxe-form label:has(+select[required])::after,
.brxe-form label:has(+input[required])::after,
.brxe-form label:has(+textarea[required])::after {
    content: "*";
    padding: 0 2px;
    position: relative;
    top: 0;
    color: var(--brand--600);
}

.global-form__intro {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--gray--200);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

form.global-form {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.form-divider {
    height: 1px;
    background: var(--gray--200);
    width: 100%;
}

.global-form__intro-title {
    font-size: var(--text-lg);
    line-height: var(--text-lg-lh);
}

.global-form__intro-content {
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
}

.global-form__inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.global-form__group.submit-button-wrapper {
    border-top: 1px solid var(--gray--200);
    padding-top: 1rem;
    display: flex;
}

button.global-form__submit {
    width: auto;
    margin-left: auto;
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding-inline: 14px;
    min-width: 129px;
    justify-content: center;
}

.global-form__submit span.loading {
    display: none;
}

.global-form__submit.sending span.loading {
    display: flex;
}

.global-form__submit span.loading svg {
    height: 1.1em;
    width: auto;
    animation: load8 1s linear infinite;
}

.global-form__submit.sending span {
    opacity: 0.5;
}

.global-form__submit.sending {
    cursor: default;
    pointer-events: none;
}

.message.success {
    padding: 1rem;
    border-radius: 6px;
}

/**************************** Bricks and Html Form ****************************/

/**************************** Test ****************************/

.home-video__item video {
    aspect-ratio: 432/768;
    object-fit: cover;
    height: 100svh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.home-video {
    overflow: auto;
    height: 100svh;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    position: relative;
}

video {
    vertical-align: middle;
}

.home-video__item {
    width: fit-content;
    position: relative;
    margin: auto;
}

.home-video__sound {
    position: absolute;
    z-index: 3;
    bottom: 22px;
    right: 17px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.5;
}

.home-video__sound>div {
    display: flex;
    flex-direction: column;
    color: #fff;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(10, 13, 18, 0.10), 0 1px 2px rgba(10, 13, 18, 0.10);
}

.home-video__sound span.icon {
    display: flex;
    margin-bottom: -3px;
    filter: drop-shadow(0 1px 2px rgba(10, 13, 18, 0.10)) drop-shadow(0 1px 3px rgba(10, 13, 18, 0.10));
}

body .home-video__sound-on {
    display: none;
}

.home-video__sound-on.active {
    display: flex;
}

.home-video__sound-on.active+div {
    display: none;
}

.progressBar {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    appearance: none;
    -webkit-appearance: none;
    height: 5px;
}

.progressBar::-webkit-progress-bar {
    background: transparent;
}

.progressBar::-webkit-progress-value {
    background: #9E77ED;
}

/**************************** Test ****************************/