/* =========================
   ФОРМА
========================= */

.car-booking-form{
display:flex;
align-items:center;
height:100px;

background:#fff;
border-radius:20px;
overflow:visible;

box-shadow:
0 8px 25px rgba(0,0,0,.06),
0 2px 8px rgba(0,0,0,.03);

position:relative;
z-index:5;
}

.booking-field{
flex:1;
height:100%;
padding:0 24px;

position:relative;

display:flex;
flex-direction:column;
justify-content:center;

min-width:0;
}



/* стрелка select */





.booking-inner{
display:flex;
flex-direction:column;

justify-content:center;

height:100%;
width:100%;

gap:2px;
}


/* =========================
   CF7 FIX
========================= */

.booking-field .wpcf7-form-control-wrap{
display:block!important;

margin:0!important;
padding:0!important;

line-height:1!important;

transform:translateY(-2px);
}



/* ВОТ ОНО - проблема была тут */

.car-booking-form p,
.car-booking-form .wpcf7-form p{
margin:0!important;
padding:0!important;
}

.car-booking-form br{
display:none;
}


/* =========================
   ЛИНИИ
========================= */

.booking-field:after{
content:'';
position:absolute;

right:0;
top:0;

width:1px;
height:100%;

background:#ececec;
}

.booking-field:last-of-type:after{
display:none;
}


/* =========================
   ЗАГОЛОВКИ
========================= */

.booking-field label{
font-size:11px;
font-weight:500;
color:#8d8d8d;

margin:0 0 2px!important;
padding:0;

line-height:1;
}


/* =========================
   ПОЛЯ
========================= */

.booking-field input,
.booking-field select{

border:none!important;
background:none!important;

padding:0!important;
margin:0!important;

font-size:15px!important;
font-weight:600!important;

line-height:1.2!important;

height:auto!important;

outline:none!important;
box-shadow:none!important;

appearance:none;
-webkit-appearance:none;

width:100%;
}

.booking-field input::placeholder{
font-size:16px;
font-weight:500;
color:#8b8b8b;
}

#rental-dates{
cursor:pointer;
}


/* премиум стрелка select */

.booking-field.has-select:before{
content:'';

position:absolute;

right:22px;

/* было 50% */
top:58%;

width:8px;
height:8px;

border-right:2px solid #777;
border-bottom:2px solid #777;

transform:translateY(-50%) rotate(45deg);

pointer-events:none;

transition:.2s;
}

/* =========================
   КНОПКА
========================= */

.booking-submit{
flex:0 0 260px;

height:100%;

padding:8px 16px;

display:flex;
align-items:center;
justify-content:center;

position:relative;
box-sizing:border-box;
}

/* CF7 */

.booking-submit p{
margin:0!important;
padding:0!important;

width:100%;
height:100%;

display:flex;
align-items:center;
justify-content:center;
}

.booking-submit .wpcf7-form-control-wrap{
width:100%;
display:block;
}

/* сама кнопка */

.booking-submit input,
.booking-submit button{

display:block;

width:100%!important;
height:56px;

border:none!important;
border-radius:100px!important;

background:#E11313!important;
color:#fff!important;

font-size:16px!important;
font-weight:600!important;

padding:0 24px!important;

box-sizing:border-box;

cursor:pointer;
transition:.25s;
}

.booking-submit input:hover,
.booking-submit button:hover{
transform:translateY(-1px);
}

/* =========================
   КАЛЕНДАРЬ
========================= */

.flatpickr-calendar{
border:none!important;
border-radius:24px!important;
padding:20px!important;
background:#fff!important;

width:360px!important;

box-shadow:
0 20px 60px rgba(0,0,0,.12)!important;
}

.flatpickr-months{
position:relative;
display:flex;
align-items:center;
justify-content:center;

height:52px;
margin-bottom:10px;
}

.flatpickr-current-month{
position:absolute!important;
left:50%!important;
top:50%!important;

transform:translate(-50%,-50%)!important;

display:flex!important;
align-items:center!important;
justify-content:center!important;

gap:8px;

padding:0!important;
margin:0!important;
width:auto!important;
}

.flatpickr-monthDropdown-months{
appearance:none!important;
-webkit-appearance:none!important;

background:none!important;
border:none!important;

padding:0!important;
margin:0!important;

font-size:16px!important;
font-weight:700!important;

color:#222!important;

outline:none!important;
box-shadow:none!important;
}

.flatpickr-current-month input.cur-year{
pointer-events:none!important;

background:none!important;
border:none!important;

padding:0!important;
margin:0!important;

width:52px!important;

font-size:16px!important;
font-weight:500!important;

color:#555!important;

outline:none!important;
box-shadow:none!important;
}

.flatpickr-current-month input.cur-year:hover,
.flatpickr-current-month input.cur-year:focus{
background:none!important;
outline:none!important;
box-shadow:none!important;
}

.numInputWrapper span,
.numInputWrapper .arrowUp,
.numInputWrapper .arrowDown{
display:none!important;
}

.flatpickr-current-month .numInputWrapper,
.flatpickr-current-month .numInputWrapper:hover{
background:transparent!important;
}

.flatpickr-prev-month,
.flatpickr-next-month{
position:absolute!important;

top:50%!important;
transform:translateY(-50%)!important;

width:38px!important;
height:38px!important;

display:flex!important;
align-items:center;
justify-content:center;

border-radius:12px;
transition:.2s;
}

.flatpickr-prev-month{left:0!important;}
.flatpickr-next-month{right:0!important;}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover{
background:#f4f4f4;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg{
width:13px!important;
height:13px!important;
fill:#222!important;
}

span.flatpickr-weekday{
font-size:12px!important;
font-weight:600!important;
color:#8e8e8e!important;
}

.flatpickr-day{
width:34px!important;

height:34px!important;

line-height:34px!important;

border-radius:12px!important;

font-size:13px!important;
font-weight:500!important;

border:none!important;
margin:2px!important;
transition:.2s;
}

.flatpickr-day:hover{
background:#f3f5f7!important;
}

.flatpickr-day.today{
border:2px solid #dce0e5!important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
background:#E11313!important;
border-color:#E11313!important;
color:#fff!important;
}

.flatpickr-day.inRange{
background:#ffeaea!important;
border-color:#ffeaea!important;
color:#222!important;
box-shadow:none!important;
}

.flatpickr-calendar:before,
.flatpickr-calendar:after{
display:none!important;
}












/* =========================
   LOADER
========================= */

.booking-submit .wpcf7-spinner{
position:absolute!important;

left:50%!important;
top:50%!important;

width:28px!important;
height:28px!important;

margin:0!important;

translate:-50% -50%!important;

opacity:0;
visibility:hidden;

border:3px solid rgba(225,19,19,.2)!important;
border-top-color:#E11313!important;
border-radius:50%;

vertical-align:middle!important;

animation:bookingSpin .7s linear infinite;

z-index:20;
}

@keyframes bookingSpin{
from{
translate:-50% -50%;
rotate:0deg;
}
to{
translate:-50% -50%;
rotate:360deg;
}
}

.wpcf7 form.submitting .wpcf7-spinner{
opacity:1!important;
visibility:visible!important;
}

.wpcf7 form.submitting .booking-submit input{
opacity:.25;
pointer-events:none;
}




























/* =========================
   ПОЛНОСТЬЮ СКРЫТЬ CF7
========================= */

.car-booking-wrapper .wpcf7-response-output{
position:absolute!important;

opacity:0!important;
visibility:hidden!important;

height:0!important;
width:0!important;

overflow:hidden!important;

padding:0!important;
margin:0!important;

border:none!important;

pointer-events:none!important;
}

/* скрываем текст ошибок */

.car-booking-wrapper .wpcf7-not-valid-tip{
position:absolute!important;

opacity:0!important;
visibility:hidden!important;

height:0!important;
width:0!important;

overflow:hidden!important;

pointer-events:none!important;
}

.car-booking-wrapper .wpcf7{
margin:0!important;
padding:0!important;
}

.car-booking-wrapper .wpcf7 form{
margin:0!important;
padding:0!important;
}













/* =========================
   TOAST
========================= */

.booking-toast{

position:fixed;

right:30px;
top:30px;

background:#111;
color:#fff;

padding:16px 22px;

border-radius:14px;

font-size:14px;
font-weight:600;

box-shadow:
0 15px 40px rgba(0,0,0,.12);

z-index:99999;

opacity:0;

transform:
translateY(-20px);

transition:.3s;
}

.booking-toast.show{

opacity:1;

transform:
translateY(0);
}









/* =========================
   SUCCESS
========================= */

.booking-success{
display:flex!important;

align-items:center;
justify-content:center;

height:100px;

padding:20px 0;
box-sizing:border-box;
}

.booking-success-message{

text-align:center;

display:flex;
flex-direction:column;

align-items:center;

/* было 6px */
gap:10px;

animation:bookingFade .4s;
}

.booking-success-icon{

width:34px;
height:34px;

border-radius:50%;

background:#E11313;
color:#fff;

display:flex;
align-items:center;
justify-content:center;

font-size:18px;
font-weight:700;

margin-bottom:2px;
}

.booking-success-title{

font-size:16px;
font-weight:700;

color:#111;

line-height:1;
}

.booking-success-text{

font-size:13px;
color:#777;

line-height:1.2;
}

@keyframes bookingFade{

from{
opacity:0;
transform:translateY(10px);
}

to{
opacity:1;
transform:none;
}

}



















/* =========================
   MOBILE
========================= */

@media(max-width:1200px){

.car-booking-form{

height:auto;

flex-direction:column;

padding:10px;

gap:0;

border-radius:20px;

overflow:hidden;
}

.booking-field{

width:100%;
height:auto;

padding:5px 5px;
}

/* фикс iPhone zoom */

.booking-field input,

.booking-field select{

border:none!important;

background:none!important;

padding:0!important;

margin:0!important;

font-size:16px!important;

font-weight:600!important;

line-height:1.2!important;

height:auto!important;

outline:none!important;

box-shadow:none!important;

appearance:none;

-webkit-appearance:none;

width:100%;

}


/* горизонтальные линии */

.booking-field:after{

content:'';

position:absolute;

left:-16px;
bottom:0;

top:auto!important;
right:auto!important;

width:calc(100% + 32px);

height:1px!important;

background:#ececec;

transform:none!important;
}

.booking-submit:before{
display:none!important;
}

.booking-field:last-of-type:after{
display:none;
}


/* кнопка */

.booking-submit{

flex:unset;

width:100%;

height:auto;

padding:18px 0 12px;
}


/* календарь */

.flatpickr-calendar{

width:100%!important;

max-width:330px!important;
}




/* MOBILE FINAL LEFT FIX */

.booking-inner{
padding-left:0!important;
}

.booking-field.has-icon{
padding-left:0!important;
}

.booking-field.has-icon .booking-inner{
transform:translateX(-15px);
}

.booking-field.icon-location,
.booking-field.icon-date,
.booking-field.icon-car,
.booking-field.icon-user,
.booking-field.icon-dollar,
.booking-field.icon-phone{
background-position:10px 66%!important;
}



}





















/* =========================
   ICONS
========================= */

.booking-field.has-icon{
padding-left:24px!important;
}

/* двигаем только поле */

.booking-field.has-icon .wpcf7-form-control-wrap{
padding-left:32px!important;
}

/* общее */

.booking-field.icon-location,
.booking-field.icon-date,
.booking-field.icon-car,
.booking-field.icon-user,
.booking-field.icon-dollar,
.booking-field.icon-phone{

background-repeat:no-repeat;
background-size:18px;

/* КЛЮЧ */
background-position:24px 63%;
}


/* Місце видачі */

.booking-field.icon-location{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23E11313' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5.5z'/%3E%3C/svg%3E");
}


/* Дата */

.booking-field.icon-date{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23E11313' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 00-2 2v13a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zm0 15H5V9h14z'/%3E%3C/svg%3E");
}


/* Класс авто */

.booking-field.icon-car{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23E11313' viewBox='0 0 24 24'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.53 5H6.47c-.63 0-1.19.42-1.39 1.01L3 12v8h2v-2h14v2h2v-8l-2.08-5.99zM6.85 7h10.29l1.04 3H5.81L6.85 7zm.65 8A1.5 1.5 0 119 16.5 1.5 1.5 0 017.5 15zm9 0a1.5 1.5 0 111.5 1.5A1.5 1.5 0 0116.5 15z'/%3E%3C/svg%3E");
}


/* Имя */

.booking-field.icon-user{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23E11313' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.42 0-8 1.79-8 4v2h16v-2c0-2.21-3.58-4-8-4z'/%3E%3C/svg%3E");
}


/* Телефон */

.booking-field.icon-phone{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23E11313' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.054 15.054 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1C10.3 21 3 13.7 3 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01z'/%3E%3C/svg%3E");
}


/* Ціна / Бюджет */

.booking-field.icon-dollar{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23E11313' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v2.07c2.83.48 5 2.44 5 5.18h-2c0-1.72-1.79-3.12-4-3.12s-4 1.4-4 3.12c0 1.5 1.18 2.42 4.47 3.15C16.14 13.1 18 14.5 18 17c0 2.74-2.17 4.7-5 5.18V24h-2v-1.82C8.17 21.7 6 19.74 6 17h2c0 1.72 1.79 3.12 4 3.12s4-1.4 4-3.12c0-1.5-1.18-2.42-4.47-3.15C7.86 12.9 6 11.5 6 9c0-2.74 2.17-4.7 5-5.18V2z'/%3E%3C/svg%3E");
}


/* Повідомлення */

.booking-field.icon-message{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23E11313' viewBox='0 0 24 24'%3E%3Cpath d='M20 6H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2zm0 2l-8 5-8-5h16z'/%3E%3C/svg%3E");

background-repeat:no-repeat!important;
background-size:18px!important;
background-position:24px 63%!important;
}









/* =========================
   VALIDATION
========================= */

/* только поле */

.booking-field .wpcf7-not-valid{

color:#E11313!important;

border-bottom:2px solid #E11313!important;

background:transparent!important;
}

/* подсветка placeholder */

.booking-field .wpcf7-not-valid::placeholder{
color:#E11313!important;
opacity:.7;
}

/* лёгкая анимация */

.booking-field:has(.wpcf7-not-valid){

animation:bookingError .3s;
}

@keyframes bookingError{

0%{
transform:translateX(0);
}

25%{
transform:translateX(-3px);
}

50%{
transform:translateX(3px);
}

75%{
transform:translateX(-2px);
}

100%{
transform:none;
}

}









/* =========================
   CALENDAR ANIMATION
========================= */

.flatpickr-calendar{

animation:bookingCalendarIn .22s ease;

transform-origin:top center;
}

@keyframes bookingCalendarIn{

0%{

opacity:0;

transform:
translateY(10px)
scale(.96);

}

100%{

opacity:1;

transform:
translateY(0)
scale(1);

}

}


@media(max-width:1200px){

.booking-field.icon-message{
background-position:10px 66%!important;
}

}