:root {  
    --parallax-1-shadow-color: 0deg 0% 5%;
    
    --parallax-1-shadow-elevation-low:
    0px 1px 0.8px hsl(var(--parallax-1-shadow-color) / 1),
    0px 1.5px 1.1px -2.5px hsl(var(--parallax-1-shadow-color) / 0.69),
    -0.1px 5px 3.8px -5px hsl(var(--parallax-1-shadow-color) / 0.35);
    
    --parallax-1-shadow-elevation-medium:
    0px 1px 0.8px hsl(var(--parallax-1-shadow-color) / 0.88),
    0px 1.4px 1px -1.2px hsl(var(--parallax-1-shadow-color) / 0.7),
    0px 4px 3px -2.5px hsl(var(--parallax-1-shadow-color) / 0.52),
    -0.1px 11.1px 8.3px -3.7px hsl(var(--parallax-1-shadow-color) / 0.35),
    -0.3px 25px 18.8px -5px hsl(var(--parallax-1-shadow-color) / 0.17);
    
    --parallax-1-shadow-elevation-high:
    0px 1px 0.8px hsl(var(--parallax-1-shadow-color) / 0.81),
    0px 1.2px 0.9px -0.6px hsl(var(--parallax-1-shadow-color) / 0.73),
    0px 2.6px 2px -1.1px hsl(var(--parallax-1-shadow-color) / 0.65),
    -0.1px 6.5px 4.9px -1.7px hsl(var(--parallax-1-shadow-color) / 0.57),
    -0.2px 14.1px 10.6px -2.2px hsl(var(--parallax-1-shadow-color) / 0.49),
    -0.3px 26.5px 19.9px -2.8px hsl(var(--parallax-1-shadow-color) / 0.41),
    -0.5px 45.1px 33.8px -3.3px hsl(var(--parallax-1-shadow-color) / 0.33),
    -0.8px 71.1px 53.3px -3.9px hsl(var(--parallax-1-shadow-color) / 0.24),
    -1.1px 105.6px 79.2px -4.4px hsl(var(--parallax-1-shadow-color) / 0.16),
    -1.6px 150px 112.5px -5px hsl(var(--parallax-1-shadow-color) / 0.08);
}

.button-order-service {
    padding: 20px 28px;
    display: inline-block;
    position: fixed;
    inset-block-end: -100px;
    inset-inline-end: 2%;
    z-index: 5;
    font-size: 1.2em;
    font-weight: 700;
    background-color: var(--accent-color);
    color: #eee;
    border: 2px solid #eee;
    box-shadow: var(--parallax-1-shadow-elevation-medium);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s linear, box-shadow 0.2s linear, color 0.2s linear, inset-block-end 0.3s linear, transform 0.3s linear;
}

.button-order-service:hover {
    background-color: #3300cc;
    transform: scale(1.04);
    box-shadow: var(--parallax-1-shadow-elevation-high);
}


/* full screen service order */
/* The overlay effect with black background */
.overlay-service-order {
    transform: translateX(100%);
	display: grid;
	grid-template-areas:
	"overlay-content-uslugi form-uslugi-img";
	grid-template-rows: 100%;
	grid-template-columns: 50% 50%;
	gap: 0;
	justify-items: stretch;
	align-items: stretch;
	justify-content: space-between;
	align-content: space-evenly;
}

.overlay-content-uslugi {
    grid-area: overlay-content-uslugi;
    text-align: left;
    top: 0;
    margin: 0;
    width: 100%;
    overflow-y: auto;
}

@media only screen and (max-width: 960px) {
    .overlay-service-order {
        grid-template-areas:
        "overlay-content-uslugi";
        grid-template-rows: 100%;
        grid-template-columns: 100%;
    }

    .form-uslugi-img {
        display: none!important;
    }
}

@keyframes animatedBackground {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 0 10000%;
    }
}

.form-uslugi-img {
    display: grid;
    grid-area: form-uslugi-img;
    background: url(../img/tiku-pattern-violet.webp);
    background-position: 0px 0px;
    animation: animatedBackground 700s linear infinite alternate;
}

@keyframes animatedLogo {
    from {
        transform: scale(4);
    }
    to {
        transform: scale(8);
    }
}

.form-uslugi-img svg {
    margin: auto;
    fill: #fff;
    transform: scale(4);
    animation: animatedLogo 40s linear infinite alternate;
}



@media only screen and (max-width: 960px) {
    .button-order-service {
        width: 92%;
        inset-block-end: -100px;
        inset-inline-end: 4%;
        inset-inline-start: 4%;
    }
}

.order-service-button-hide {
    inset-block-end: -100px;
}

.order-service-button-show {
    inset-block-end: 4%;
}

/* Uslugi form */

.overlay-service-order {
    color: #fff;
    overflow: auto;
}

.overlay-service-order h2 {
    font-size: 2.4em;
}

.overlay-service-order .wpcf7-text, 
.overlay-service-order .wpcf7-textarea {
	background: #666;
	color: #eee;
	outline: 2px solid #111;
}

.overlay-service-order .wpcf7-text:hover, 
.overlay-service-order .wpcf7-textarea:hover
{
	outline: 2px solid var(--accent-color-alt);
}

.overlay-service-order .wpcf7-text:focus,  
.overlay-service-order .wpcf7-text:focus:hover,
.overlay-service-order .wpcf7-textarea:focus,  
.overlay-service-order .wpcf7-textarea:focus:hover
{
	outline: 2px solid var(--accent-color);
}

.overlay-service-order .mailpoet_form_paragraph a {
	color: #999!important;
	border-bottom: 1px solid #666!important;
}

.overlay-service-order .mailpoet_checkbox,
.overlay-service-order .mailpoet_checkbox::after
{
	background: #666;
	outline: 2px solid #111;
    color: #eee;
}

.uslugi-form {
    margin: 0 auto;
    max-width: 640px;
}

.uslugi-form .js {
    padding: 40px 20px;
    width: 100%;
    background: none;
    border-radius: 0;
}

/* Скрыть оригинальные чекбоксы внутри обертки */
.usligi-checkboxes input[type="checkbox"] {
    display: none;
}

/* Стилизация лейблов как кнопок внутри обертки */
.usligi-checkboxes label {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 8px 12px 0;
    background-color: #333;
    border: 2px solid var(--accent-color-alt);
    border-radius: 20px;
    cursor: pointer;
    color: #fff;
    font-size: 0.8em;
    transition: border 0.2s ease-out, background-color 0.2s ease-out;
}

.usligi-checkboxes label:hover {
    border: 2px solid var(--accent-color);
}

/* Стилизация выбранных кнопок внутри обертки через JS */
.usligi-checkboxes .checked {
    background-color: var(--accent-color);
    border: 2px solid var(--accent-color);
}



.custom-file-upload {
    display: inline-block;
    position: relative;
    overflow: hidden;
    padding: 8px 20px;
    background-color: #222;
    border: 1px dashed var(--accent-color-alt);
    border-radius: 4px;
    cursor: pointer;
    color: var(--accent-color-alt);
    transition: background-color 0.2s ease-out;
    box-shadow: var(--parallax-1-shadow-elevation-medium);
}

.custom-file-upload:hover {
    background-color: #111;
}

.uslugi-file {
    display: none!important;
}

.file-info {
    margin-bottom: 40px;
    font-size: 0.8em;
    color: #808080;
}

/* Uslugi form */