.km-service-nearest,
.km-service-nearest *,
.km-service-nearest *::before,
.km-service-nearest *::after {
box-sizing: border-box;
}
.km-service-nearest {
width: 100%;
margin: 24px 0 36px;
padding: clamp(22px, 3vw, 34px);
color: #17313d;
background: linear-gradient(135deg, #edf8fb 0%, #f8fcfd 100%);
border: 1px solid #c9e3eb;
border-radius: 24px;
box-shadow: 0 14px 34px rgba(35, 91, 115, .08);
}
.km-service-nearest button,
.km-service-nearest input,
.km-service-nearest textarea {
font: inherit;
}
.km-service-nearest__head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 20px;
align-items: start;
margin-bottom: 22px;
}
.km-service-nearest__head > div > span,
.km-service-nearest__branch-head > span {
display: block;
margin-bottom: 6px;
color: #377395;
font-size: 13px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.km-service-nearest__head h2 {
margin: 0;
color: #17313d;
font-size: clamp(25px, 3vw, 34px);
line-height: 1.12;
}
.km-service-nearest__head p {
max-width: 760px;
margin: 9px 0 0;
color: #5d7078;
font-size: 16px;
line-height: 1.5;
}
.km-service-nearest__head small {
padding: 8px 11px;
color: #39738f;
background: #fff;
border: 1px solid #c9e3eb;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.km-service-nearest__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.km-service-nearest__branch {
display: flex;
min-width: 0;
flex-direction: column;
padding: 20px;
background: #fff;
border: 1px solid #c9e3eb;
border-radius: 18px;
}
.km-service-nearest__branch:only-child {
grid-column: 1 / -1;
}
.km-service-nearest__branch-head h3 {
margin: 0;
color: #17313d;
font-size: 23px;
line-height: 1.2;
}
.km-service-nearest__branch-head p,
.km-service-nearest__status,
.km-service-nearest__note,
.km-service-nearest__booking-summary,
.km-service-nearest__message {
margin: 0;
color: #65777e;
line-height: 1.45;
}
.km-service-nearest__branch-head p {
margin-top: 5px;
font-size: 14px;
}
.km-service-nearest__status {
margin-top: 16px;
font-weight: 700;
}
.km-service-nearest__status[data-state="error"] {
color: #a34747;
}
.km-service-nearest__slots {
display: grid;
gap: 9px;
margin-top: 12px;
}
.km-service-nearest__slot {
display: grid;
width: 100%;
gap: 3px;
padding: 12px 14px;
color: #17313d;
text-align: left;
background: #f4fafc;
border: 1px solid #b9dae6;
border-radius: 12px;
cursor: pointer;
transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.km-service-nearest__slot:hover,
.km-service-nearest__slot:focus-visible,
.km-service-nearest__slot[aria-pressed="true"] {
background: #e5f4f9;
border-color: #377395;
outline: none;
transform: translateY(-1px);
}
.km-service-nearest__slot strong {
font-size: 17px;
}
.km-service-nearest__slot span {
overflow: hidden;
color: #65777e;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
}
.km-service-nearest__all {
align-self: flex-start;
margin-top: auto;
padding-top: 16px;
color: #377395;
font-weight: 800;
text-decoration: none;
}
.km-service-nearest__all:hover,
.km-service-nearest__all:focus-visible {
text-decoration: underline;
}
.km-service-nearest__booking {
margin-top: 18px;
padding: 20px;
background: #fff;
border: 2px solid #7fb5cc;
border-radius: 18px;
}
.km-service-nearest__booking-title {
margin: 0;
color: #17313d;
font-size: 22px;
}
.km-service-nearest__booking-summary {
margin-top: 6px;
font-weight: 700;
}
.km-service-nearest__form {
margin-top: 16px;
}
.km-service-nearest__fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.km-service-nearest__input {
width: 100%;
min-height: 48px;
padding: 11px 13px;
color: #17313d;
background: #fff;
border: 1px solid #a9cad8;
border-radius: 10px;
}
.km-service-nearest__input:focus {
border-color: #377395;
box-shadow: 0 0 0 3px rgba(55, 115, 149, .12);
outline: none;
}
.km-service-nearest__textarea {
min-height: 72px;
grid-column: 1 / -1;
resize: vertical;
}
.km-service-nearest__trap {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
.km-service-nearest__consent {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 9px;
align-items: start;
margin-top: 12px;
color: #65777e;
font-size: 13px;
line-height: 1.45;
}
.km-service-nearest__consent input {
width: 18px;
height: 18px;
margin: 1px 0 0;
}
.km-service-nearest__consent a {
color: #377395;
}
.km-service-nearest__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.km-service-nearest__submit,
.km-service-nearest__cancel {
min-height: 46px;
padding: 10px 18px;
border-radius: 10px;
cursor: pointer;
font-weight: 800;
}
.km-service-nearest__submit {
color: #fff;
background: #377395;
border: 1px solid #377395;
}
.km-service-nearest__submit:disabled {
cursor: wait;
opacity: .65;
}
.km-service-nearest__cancel {
color: #377395;
background: #fff;
border: 1px solid #9fc5d6;
}
.km-service-nearest__message {
margin-top: 12px;
font-weight: 700;
}
.km-service-nearest__message[data-state="success"] {
color: #27714d;
}
.km-service-nearest__message[data-state="error"] {
color: #a34747;
}
.km-service-nearest__note {
margin-top: 14px;
font-size: 12px;
} .km-service-nearest--adults {
color: #293b43;
background: linear-gradient(135deg, #fcf7ee 0%, #f7eddd 100%);
border-color: #dfc28b;
box-shadow: 0 14px 34px rgba(130, 91, 37, .09);
}
.km-service-nearest--adults .km-service-nearest__head > div > span,
.km-service-nearest--adults .km-service-nearest__branch-head > span,
.km-service-nearest--adults .km-service-nearest__all,
.km-service-nearest--adults .km-service-nearest__consent a {
color: #a9772d;
}
.km-service-nearest--adults .km-service-nearest__head h2,
.km-service-nearest--adults .km-service-nearest__branch-head h3,
.km-service-nearest--adults .km-service-nearest__slot,
.km-service-nearest--adults .km-service-nearest__booking-title,
.km-service-nearest--adults .km-service-nearest__input {
color: #293b43;
}
.km-service-nearest--adults .km-service-nearest__head p,
.km-service-nearest--adults .km-service-nearest__branch-head p,
.km-service-nearest--adults .km-service-nearest__status,
.km-service-nearest--adults .km-service-nearest__note,
.km-service-nearest--adults .km-service-nearest__slot span,
.km-service-nearest--adults .km-service-nearest__consent {
color: #7a756a;
}
.km-service-nearest--adults .km-service-nearest__head small,
.km-service-nearest--adults .km-service-nearest__branch {
border-color: #e2c99d;
}
.km-service-nearest--adults .km-service-nearest__head small,
.km-service-nearest--adults .km-service-nearest__branch,
.km-service-nearest--adults .km-service-nearest__booking,
.km-service-nearest--adults .km-service-nearest__input {
background: #fffdf9;
}
.km-service-nearest--adults .km-service-nearest__head small {
color: #9a7130;
}
.km-service-nearest--adults .km-service-nearest__slot {
background: #fdf8f0;
border-color: #e2c99d;
}
.km-service-nearest--adults .km-service-nearest__slot:hover,
.km-service-nearest--adults .km-service-nearest__slot:focus-visible,
.km-service-nearest--adults .km-service-nearest__slot[aria-pressed="true"] {
background: #f6e8ce;
border-color: #b78942;
}
.km-service-nearest--adults .km-service-nearest__booking {
border-color: #c69a51;
}
.km-service-nearest--adults .km-service-nearest__input {
border-color: #d8bd8d;
}
.km-service-nearest--adults .km-service-nearest__input:focus {
border-color: #a9772d;
box-shadow: 0 0 0 3px rgba(169, 119, 45, .14);
}
.km-service-nearest--adults .km-service-nearest__submit {
background: #a9772d;
border-color: #a9772d;
}
.km-service-nearest--adults .km-service-nearest__submit:hover,
.km-service-nearest--adults .km-service-nearest__submit:focus-visible {
background: #875d1d;
border-color: #875d1d;
}
@media (max-width: 720px) {
.km-service-nearest {
padding: 20px 16px;
border-radius: 18px;
}
.km-service-nearest__head,
.km-service-nearest__grid,
.km-service-nearest__fields {
grid-template-columns: 1fr;
}
.km-service-nearest__head small {
justify-self: start;
white-space: normal;
}
.km-service-nearest__textarea {
grid-column: auto;
}
.km-service-nearest__actions > * {
width: 100%;
}
}