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

:root {
    --color-100: #ffffff;
    --color-200: #F2F2F3 ;
    --color-300: #D7D7DB ;
    --color-400: #A1A1AA ;
    --color-500: #6D6D78 ;
    --color-600: #3D3D43 ;
    --color-700: #242428 ;
    --color-800: #0C0C0D ;
    --color-900: #000000 ;

    --color-primary: #0606E0;
    --color-primary-light: #2121FF;
    --color-primary-dark: #020294;
    --color-second: #4685A9;   
    --color-second-light: #5A99BD;
    --color-second-dark: #327195;
    --color-accent: #48A946;

    --radius-xs: 4px;
    --radius-s: 8px;
    --radius-m: 16px;
    --radius-l: 24px;

    --space-s: 8px;
    --space-m: 16px;
    --space-l: 24px;

    --border-s: 1px solid (var(--color-primary));

    --shadow:
        0px 1px 4px rgba(0, 0, 0, 0.2),
        0px 2px 10px rgba(0, 0, 0, 0.3),
        0px 6px 24px rgba(0, 0, 0, 0.4),
        0px 20px 80px rgba(0, 0, 0, 0.7    );
}

.shadow {
    box-shadow: var(--shadow);
} 

.brxe-form .form-group input:focus {
    outline: solid 2px var(--color-primary-light);
}

.brxe-button {
    cursor: pointer;
}

.brx-popup {
    backdrop-filter: blur(3px);
}

button[type="submit"] {
    min-height: 54px;
}

.message.success {
    border: 3px solid var(--color-primary-light);
    border-radius: var(--br-s);
    color: var(--color-primary-light);
    background-color: var(--color-100);
    box-shadow: 0 0 10px 0px var(--color-100);
}

a:has(svg) {
    line-height: 0;
}

.white-space {
	white-space: nowrap;
}

.sub {
	font-size: 70%;
}

.sup {
	font-size: 70%;
}

.underline {
	display: inline-block;	
}
.underline:after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: var(--color-600);
    transition: width .3s ease-in-out;
}

.underline:hover:after {
	width: 0;
}

.step-block:hover .step-block-image {
    width: 240px;
    height: 240px;
}

.card:hover .card__img {
    width: 240px;
    height: 240px;
}