.km-online-booking {
box-sizing: border-box;
width: min(1280px, calc(100% - 32px));
margin: 0 auto 64px;
color: #222;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.km-online-booking *,
.km-online-booking *::before,
.km-online-booking *::after {
box-sizing: border-box;
}
.km-online-booking button,
.km-online-booking input,
.km-online-booking textarea {
font: inherit;
}
.km-online-booking__hero {
display: grid;
gap: 12px;
margin: 42px 0 22px;
}
.km-online-booking__eyebrow {
margin: 0;
color: #377395;
font-weight: 800;
}
.km-online-booking__hero h1 {
margin: 0;
color: #222;
font-size: 42px;
line-height: 1.08;
}
.km-online-booking__hero p:not(.km-online-booking__eyebrow) {
max-width: 760px;
margin: 0;
color: #686868;
font-size: 18px;
line-height: 1.45;
}
.km-online-booking__app {
padding: 26px;
background: #f1f9fc;
border: 2px solid #bfddeb;
border-radius: 8px;
}
.km-online-booking__steps {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 22px;
}
.km-online-booking__steps span {
display: inline-grid;
min-height: 36px;
align-items: center;
padding: 7px 12px;
color: #377395;
background: #fff;
border: 1px solid #84b9d5;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
}
.km-online-booking__steps span.is-active {
color: #fff;
background: #377395;
border-color: #377395;
}
.km-online-booking__status,
.km-online-booking__empty,
.km-online-booking__doctor-role,
.km-online-booking__doctor-note,
.km-online-booking__message,
.km-online-booking__consent {
margin: 0;
color: #686868;
line-height: 1.45;
}
.km-online-booking__status {
margin-bottom: 16px;
font-weight: 800;
}
.km-online-booking__status[data-state="error"],
.km-online-booking__message[data-state="error"] {
color: #b23b32;
}
.km-online-booking__message[data-state="success"] {
color: #2f769a;
font-weight: 800;
}
.km-online-booking__panel h2 {
margin: 0 0 16px;
color: #377395;
font-size: 30px;
line-height: 1.12;
}
.km-online-booking__back {
min-height: 36px;
margin: 0 0 14px;
padding: 7px 12px;
color: #377395;
background: #fff;
border: 1px solid #84b9d5;
border-radius: 8px;
cursor: pointer;
font-weight: 800;
}
.km-online-booking__branch-list,
.km-online-booking__specialty-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.km-online-booking__branch,
.km-online-booking__specialty {
display: grid;
gap: 5px;
min-height: 92px;
align-content: center;
padding: 16px;
text-align: left;
color: #222;
background: #fff;
border: 1px solid #cde2ed;
border-radius: 8px;
cursor: pointer;
}
.km-online-booking__branch:hover,
.km-online-booking__branch:focus-visible,
.km-online-booking__specialty:hover,
.km-online-booking__specialty:focus-visible,
.km-online-booking__doctor:hover {
border-color: #84b9d5;
outline: 0;
box-shadow: 0 8px 20px rgba(55, 115, 149, .12);
}
.km-online-booking__branch strong,
.km-online-booking__specialty strong {
color: #377395;
font-size: 20px;
line-height: 1.15;
}
.km-online-booking__branch span,
.km-online-booking__specialty span {
color: #686868;
}
.km-online-booking__doctor-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
gap: 14px;
}
.km-online-booking__schedule-summary {
grid-column: 1 / -1;
margin: 0;
padding: 14px 16px;
color: #686868;
background: #fff;
border: 1px solid #cde2ed;
border-radius: 8px;
line-height: 1.45;
}
.km-online-booking__doctor {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: 14px;
min-height: 178px;
padding: 14px;
background: #fff;
border: 1px solid #cde2ed;
border-radius: 8px;
}
.km-online-booking__doctor--schedule {
grid-template-columns: 116px minmax(0, 1fr);
min-height: 178px;
cursor: pointer;
transition: border-color .18s ease, box-shadow .18s ease;
}
.km-online-booking__doctor--schedule.is-open {
border-color: #84b9d5;
box-shadow: 0 8px 22px rgba(55, 115, 149, .12);
}
.km-online-booking__photo {
display: block;
width: 92px;
height: 116px;
object-fit: cover;
object-position: top center;
background: #e8f4f9;
border-radius: 8px;
}
.km-online-booking__doctor--schedule .km-online-booking__photo {
width: 116px;
height: 148px;
}
.km-online-booking__doctor h3 {
margin: 0;
color: #222;
font-size: 21px;
line-height: 1.18;
}
.km-online-booking__doctor-role {
margin-top: 5px;
font-weight: 800;
}
.km-online-booking__doctor-note {
margin-top: 6px;
font-size: 14px;
}
.km-online-booking__doctor-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.km-online-booking__schedule-toggle {
display: grid;
gap: 3px;
width: 100%;
min-height: 46px;
margin-top: 12px;
padding: 9px 12px;
color: #377395;
text-align: left;
background: #fff;
border: 1px solid #84b9d5;
border-radius: 8px;
cursor: pointer;
font: inherit;
}
.km-online-booking__schedule-toggle strong {
font-weight: 800;
}
.km-online-booking__schedule-toggle span {
color: #686868;
font-size: 14px;
}
.km-online-booking__doctor-schedule {
display: grid;
gap: 10px;
margin-top: 14px;
}
.km-online-booking__doctor-schedule[hidden] {
display: none;
}
.km-online-booking__doctor-day {
padding: 12px;
background: #f8fcfe;
border: 1px solid #cde2ed;
border-radius: 8px;
}
.km-online-booking__doctor-day h4 {
margin: 0 0 10px;
color: #222;
font-size: 17px;
line-height: 1.2;
}
.km-online-booking__doctor-empty {
margin: 0;
padding: 12px;
color: #686868;
background: #f8fcfe;
border: 1px solid #cde2ed;
border-radius: 8px;
}
.km-online-booking__choose,
.km-online-booking__profile,
.km-online-booking__submit {
display: inline-grid;
min-height: 40px;
align-items: center;
justify-items: center;
padding: 9px 13px;
border-radius: 8px;
cursor: pointer;
font-weight: 800;
text-decoration: none;
}
.km-online-booking__choose {
color: #fff;
background: #377395;
border: 1px solid #377395;
}
.km-online-booking__profile {
color: #377395;
background: #fff;
border: 1px solid #84b9d5;
}
.km-online-booking__day {
padding: 16px;
background: #fff;
border: 1px solid #cde2ed;
border-radius: 8px;
}
.km-online-booking__day + .km-online-booking__day {
margin-top: 12px;
}
.km-online-booking__day h3 {
margin: 0 0 12px;
color: #222;
font-size: 20px;
}
.km-online-booking__slots {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.km-online-booking__slot {
min-height: 42px;
padding: 9px 12px;
color: #2f769a;
background: #cff4a1;
border: 0;
border-radius: 6px;
cursor: pointer;
font-weight: 800;
}
.km-online-booking__slot:hover,
.km-online-booking__slot:focus-visible {
color: #fff;
background: #6fb53b;
outline: 0;
}
.km-online-booking__selection {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.km-online-booking__selection-item {
display: grid;
gap: 3px;
padding: 12px;
background: #fff;
border: 1px solid #cde2ed;
border-radius: 8px;
}
.km-online-booking__selection-item span {
color: #686868;
font-size: 13px;
}
.km-online-booking__selection-item strong {
color: #222;
}
.km-online-booking__form {
display: grid;
gap: 10px;
max-width: 680px;
}
.km-online-booking__input {
width: 100%;
min-height: 46px;
padding: 11px 13px;
color: #222;
background: #fff;
border: 1px solid #bfddeb;
border-radius: 8px;
}
.km-online-booking__textarea {
resize: vertical;
}
.km-online-booking__trap {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
.km-online-booking__submit {
width: fit-content;
min-width: 180px;
color: #fff;
background: #ffc400;
border: 1px solid #ffc400;
box-shadow: 0 8px 16px rgba(255, 196, 0, .2);
}
.km-online-booking__submit:disabled {
cursor: wait;
opacity: .7;
}
.km-online-booking__consent {
font-size: 12px;
}
.km-online-booking__empty {
padding: 16px;
background: #fff;
border: 1px solid #cde2ed;
border-radius: 8px;
}
@media (max-width: 760px) {
.km-online-booking {
width: calc(100% - 24px);
margin-bottom: 42px;
}
.km-online-booking__hero {
margin-top: 26px;
}
.km-online-booking__hero h1 {
font-size: 32px;
}
.km-online-booking__app {
padding: 18px 14px;
}
.km-online-booking__panel h2 {
font-size: 25px;
}
.km-online-booking__branch-list,
.km-online-booking__specialty-list,
.km-online-booking__doctor-list {
grid-template-columns: 1fr;
}
.km-online-booking__doctor {
grid-template-columns: 76px minmax(0, 1fr);
}
.km-online-booking__doctor--schedule {
grid-template-columns: 82px minmax(0, 1fr);
}
.km-online-booking__photo {
width: 76px;
height: 96px;
}
.km-online-booking__doctor--schedule .km-online-booking__photo {
width: 82px;
height: 104px;
}
} .km-online-booking {
width: min(1120px, calc(100% - 32px));
margin-bottom: 52px;
}
.km-online-booking__hero {
gap: 7px;
margin: 30px 0 18px;
}
.km-online-booking__eyebrow {
font-size: 13px;
letter-spacing: .03em;
}
.km-online-booking__hero h1 {
color: #26343b;
font-size: clamp(34px, 4vw, 40px);
font-weight: 700;
line-height: 1.12;
}
.km-online-booking__hero p:not(.km-online-booking__eyebrow) {
max-width: 700px;
color: #626a6e;
font-size: 16px;
line-height: 1.5;
}
.km-online-booking__app {
padding: 24px;
background: rgba(242, 248, 250, .78);
border: 1px solid #c9e0eb;
border-radius: 20px;
box-shadow: 0 12px 30px rgba(55, 115, 149, .06);
}
.km-online-booking__steps {
gap: 7px;
margin-bottom: 20px;
}
.km-online-booking__steps span {
min-height: 32px;
padding: 6px 11px;
border-color: #aacddb;
font-size: 13px;
font-weight: 750;
}
.km-online-booking__steps span.is-active {
background: #4d819d;
border-color: #4d819d;
}
.km-online-booking__panel h2 {
margin-bottom: 14px;
color: #377395;
font-size: 27px;
font-weight: 700;
}
.km-online-booking__branch,
.km-online-booking__specialty {
min-height: 0;
padding: 17px 18px;
border-color: #d2e4eb;
border-radius: 14px;
box-shadow: none;
}
.km-online-booking__branch strong,
.km-online-booking__specialty strong {
font-size: 18px;
}
.km-online-booking__doctor,
.km-online-booking__day,
.km-online-booking__schedule-summary,
.km-online-booking__doctor-day,
.km-online-booking__selection-item,
.km-online-booking__empty {
border-radius: 14px;
}
@media (max-width: 760px) {
.km-online-booking {
width: calc(100% - 20px);
margin-bottom: 34px;
}
.km-online-booking__hero {
margin: 20px 2px 15px;
}
.km-online-booking__hero h1 {
font-size: 29px;
}
.km-online-booking__hero p:not(.km-online-booking__eyebrow) {
font-size: 15px;
}
.km-online-booking__app {
padding: 16px 12px;
border-radius: 16px;
}
.km-online-booking__steps {
gap: 6px;
margin-bottom: 17px;
}
.km-online-booking__steps span {
min-height: 30px;
padding: 5px 9px;
font-size: 12px;
}
.km-online-booking__panel h2 {
font-size: 23px;
}
.km-online-booking__branch,
.km-online-booking__specialty {
padding: 15px;
}
}