.popup {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
z-index: 10999;
overflow-y: scroll;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
padding: 20px 10px;
}
.popup.open {
opacity: 1;
visibility: visible;
}
.popup__inner {
margin: auto;
position: relative;
}
.popup__close-btn {
width: 20px;
height: 20px;
position: absolute;
top: 15px;
right: 15px;
background: url(//rabbitshotel.ru/wp-content/themes/rabbits-hotel/assets/img/icons/close.svg) no-repeat center/contain;
}
.popup-message {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 420px;
padding: 32px 24px;
background-color: #fff;
border: 1px solid #e7eae7;
border-radius: 20px;
text-align: center;
}
.popup-message__title {
font-weight: 500;
font-size: 22px;
}
.popup-message__gray {
color: #9da6ad;
}
.appointment-popup__inner {
padding: 40px;
background-color: #e1fabf;
border-radius: 10px;
position: relative;
}
.appointment-popup__top {
display: flex;
align-items: flex-start;
gap: 65px;
padding-right: 60px;
margin-bottom: 45px;
color: #5e5a5a;
}
.appointment-popup__title {
font-size: 40px;
letter-spacing: 0.02em;
line-height: 115%;
flex-shrink: 0;
}
.appointment-popup__info {
max-width: 470px;
}
.appointment-popup__pic {
position: absolute;
bottom: 0;
right: 0;
width: 35%;
height: 75%;
}
.appointment-popup__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.appointment-popup__form-fields {
display: flex;
flex-wrap: wrap;
gap: 20px;
max-width: 540px;
position: relative;
}
.appointment-popup__form-fields .wpcf7-form {
position: initial;
}
.appointment-popup__form-fields .form-field {
width: calc(50% - 10px);
}
.appointment-popup__form-fields .form-field--msg {
width: 100%;
}
.appointment-popup__form-bottom .form-bottom {
display: flex;
flex-direction: row-reverse;
align-items: center;
gap: 20px;
}
.appointment-popup__form-bottom .form-bottom .submit-btn {
width: calc(50% - 10px);
}
.appointment-popup__form-bottom .form-bottom .form-checkbox {
width: calc(50% - 10px);
font-size: 12px;
} div.wpcf7-response-output,
span.wpcf7-not-valid-tip,
.screen-reader-response {
display: none !important;
}
.wpcf7-form.submitting,
.wpcf7-form.resetting {
animation: pulse 1.5s linear infinite alternate;
pointer-events: none;
}
.wpcf7-form {
position: relative;
}
.wpcf7-form::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-weight: 500;
visibility: hidden;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
font-size: 24px;
box-shadow: 0 0 24px -12px rgba(0, 0, 0, 0.35);
}
.wpcf7-form.sent,
.wpcf7-form.failed {
pointer-events: none;
}
.wpcf7-form.sent::after,
.wpcf7-form.failed::after {
visibility: visible;
}
.wpcf7-form.sent::after {
content: "Отправлено";
color: var(--color-black);
background: var(--color-green--lighter);
}
.wpcf7-form.failed::after {
content: "Произошла ошибка, попробуйте еще раз";
background: var(--color-orange);
}
.wpcf7-form .close-timer {
position: absolute;
z-index: 2;
padding: 6px;
width: 100%;
text-align: center;
color: var(--color-black);
top: 55%;
font-size: 24px;
font-family: var(--font-secondary);
font-weight: 500;
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0.5;
}
}
label.form-field {
cursor: pointer;
}
.form-field__inp {
padding: 20px;
border-radius: 10px;
font-size: 15px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
background-color: var(--color-white);
width: 100%;
border: 1px solid transparent;
transition: border 0.2s;
}
.form-field__inp-msg {
resize: none;
min-height: 120px;
border: 1px solid transparent;
transition: border 0.2s;
font-family: var(--font-primary);
}
.form-field__inp::placeholder,
.form-field__inp-msg::placeholder {
color: rgba(66, 66, 66, 0.6);
font-family: var(--font-primary);
}
.form-field__inp.required,
.form-field__inp-msg.required {
border-color: var(--color-red-60);
}
.form-field__inp.required::placeholder,
.form-field__inp-msg.required::placeholder {
color: var(--color-red);
}
.form-checkbox {
display: flex;
margin-top: 10px;
font-size: 14px;
gap: 10px;
width: 100%;
align-items: flex-start;
}
.form-checkbox:first-child {
margin-top: 0;
}
.form-checkbox input[type="checkbox"].required + .form-checkbox__text {
color: var(--color-red);
}
.simple-form {
padding: 40px;
background-color: #e1fabf;
border-radius: 10px;
max-width: 440px;
}
.simple-form__title {
color: #5d5a5a;
text-align: center;
margin-bottom: 20px;
text-transform: uppercase;
font-size: 25px;
font-weight: 400;
}
.simple-form form {
display: flex;
flex-flow: column;
}
.simple-form .form-field {
margin-bottom: 20px;
}
.simple-form .form-field:last-child {
margin-bottom: 40px;
}
.simple-form .submit-btn {
margin-top: 40px;
width: 100%;
}
.select {
position: relative;
height: 100%;
border: 1px solid transparent;
transition: border-color 0.2s;
border-radius: 10px;
}
.required + .select {
border-color: var(--color-red-60);
}
.required + .select .select__field::before {
color: #ffabab;
}
.select.open .select__list {
opacity: 1;
visibility: visible;
}
.select.open::after {
transform: rotate(180deg);
}
.select__field {
padding: 20px 40px 20px 20px;
border-radius: 10px;
font-size: 15px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
background-color: var(--color-white);
border: none;
width: 100%;
border: 1px solid transparent;
transition: border 0.2s;
height: 100%;
cursor: pointer;
}
.select__field:empty::before {
content: attr(data-placeholder);
color: rgba(66, 66, 66, 0.6);
}
.select::after {
content: "";
position: absolute;
width: 14px;
height: 8px;
background: url(//rabbitshotel.ru/wp-content/themes/rabbits-hotel/assets/img/icons/arrow-down.svg) no-repeat center/contain;
top: calc(50% - 4px);
right: 20px;
}
.select__list {
position: absolute;
top: 90%;
left: 0;
width: 100%;
background-color: var(--color-white);
border-radius: 0 0 10px 10px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
z-index: 99;
box-shadow: 0 10px 12px -10px rgba(0, 0, 0, 0.25);
}
.select__option {
padding: 20px;
font-size: 15px;
cursor: pointer;
transition: opacity 0.2s;
}
.select__option:hover {
opacity: 0.7;
background-color: rgba(0, 0, 0, 0.05);
}
.daterangepicker {
z-index: 99999 !important;
}
@media screen and (max-width: 900px) {
.appointment-popup__pic {
width: 25%;
height: 55%;
}
}
@media screen and (max-width: 768px) {
.popup-message {
padding: 24px 12px;
}
.appointment-popup__inner {
padding: 40px 20px;
}
.appointment-popup__top {
flex-flow: column;
gap: 20px;
padding-right: 0;
}
.appointment-popup__title {
font-size: 20px;
text-align: center;
width: 100%;
text-transform: uppercase;
font-weight: 400;
}
.appointment-popup__info {
font-size: 14px;
text-align: center;
}
.appointment-popup__form-fields .form-field {
width: 100%;
}
.appointment-popup__form-bottom .form-bottom {
flex-flow: column;
align-items: flex-start;
}
.appointment-popup__form-bottom .form-bottom .submit-btn,
.appointment-popup__form-bottom .form-bottom .form-checkbox {
width: 100%;
}
.appointment-popup__pic {
display: none;
}
}