.km-chatbot-root {
--km-surface: #ffffff;
--km-ink: #0e0e0e;
--km-muted: #676767;
--km-line: #bddbea;
--km-teal: #377395;
--km-teal-dark: #2f769a;
--km-green: #cff4a1;
--km-shadow: 0 12px 24px rgba(72, 72, 72, 0.13);
color: var(--km-ink);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.km-chatbot-root *,
.km-chatbot-root *::before,
.km-chatbot-root *::after {
box-sizing: border-box;
}
.km-chatbot-root button,
.km-chatbot-root input {
font: inherit;
}
.km-chatbot-root button {
cursor: pointer;
}
.km-chatbot-root .chat-launcher {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 9998;
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 172px;
min-height: 62px;
padding: 8px 16px 8px 8px;
color: var(--km-teal);
background: #fff;
border: 2px solid rgba(55, 115, 149, 0.72);
border-radius: 999px;
box-shadow: var(--km-shadow);
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.km-chatbot-root .chat-launcher:hover {
border-color: var(--km-teal);
transform: translateY(-2px);
}
.km-chatbot-root .chat-launcher[aria-expanded="true"] {
color: #fff;
background: var(--km-teal);
border-color: var(--km-teal);
}
.km-chatbot-root .chat-launcher img {
display: block;
flex: 0 0 46px;
width: 46px;
height: 46px;
object-fit: contain;
background: #fff;
border-radius: 50%;
}
.km-chatbot-root .chat-launcher span {
display: grid;
gap: 1px;
min-width: 0;
text-align: left;
line-height: 1.05;
}
.km-chatbot-root .chat-launcher b,
.km-chatbot-root .chat-launcher small {
display: block;
white-space: nowrap;
}
.km-chatbot-root .chat-launcher b {
font-size: 0.98rem;
font-weight: 800;
}
.km-chatbot-root .chat-launcher small {
color: #3d3d3d;
font-size: 0.8rem;
font-weight: 700;
}
.km-chatbot-root .chat-launcher[aria-expanded="true"] small {
color: rgba(255, 255, 255, 0.86);
}
.km-chatbot-root svg {
display: block;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.km-chatbot-root .chat-widget {
position: fixed;
right: 24px;
bottom: 98px;
z-index: 9999;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto auto;
width: min(410px, calc(100vw - 32px));
height: min(680px, calc(100vh - 124px));
overflow: hidden;
background: var(--km-surface);
border: 2px solid rgba(189, 219, 234, 0.9);
border-radius: 26px;
box-shadow: var(--km-shadow);
opacity: 0;
pointer-events: none;
transform: translateY(16px) scale(0.98);
transition: opacity 180ms ease, transform 180ms ease;
}
.km-chatbot-root .chat-widget.open {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.km-chatbot-root .chat-header {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 14px;
color: #fff;
background: var(--km-teal);
}
.km-chatbot-root .chat-header strong,
.km-chatbot-root .chat-header span {
display: block;
}
.km-chatbot-root .chat-header strong {
line-height: 1.1;
}
.km-chatbot-root .chat-header span {
margin-top: 3px;
color: rgba(255, 255, 255, 0.9);
font-size: 0.82rem;
font-weight: 700;
}
.km-chatbot-root .assistant-avatar {
position: relative;
display: block;
width: 40px;
height: 40px;
overflow: hidden;
background: #fff;
border-radius: 50%;
}
.km-chatbot-root .assistant-avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.km-chatbot-root .icon-button,
.km-chatbot-root .send-button {
display: grid;
place-items: center;
border: 0;
}
.km-chatbot-root .icon-button {
width: 38px;
height: 38px;
color: #fff;
background: rgba(255, 255, 255, 0.12);
border-radius: 8px;
}
.km-chatbot-root .icon-button svg,
.km-chatbot-root .send-button svg {
width: 20px;
height: 20px;
}
.km-chatbot-root .messages {
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: auto;
padding: 16px;
background:
linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
repeating-linear-gradient(45deg, rgba(55, 115, 149, 0.06) 0 1px, transparent 1px 16px);
}
.km-chatbot-root .message {
max-width: 86%;
padding: 11px 13px;
border-radius: 16px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.km-chatbot-root .message.bot {
align-self: flex-start;
background: #f2f8fa;
border: 1px solid rgba(55, 115, 149, 0.14);
}
.km-chatbot-root .message.user {
align-self: flex-end;
color: var(--km-ink);
background: var(--km-green);
}
.km-chatbot-root .message strong {
display: block;
margin-bottom: 5px;
}
.km-chatbot-root .message p {
margin: 8px 0 0;
}
.km-chatbot-root .message p:first-child {
margin-top: 0;
}
.km-chatbot-root .message ul {
margin: 8px 0 0;
padding-left: 18px;
}
.km-chatbot-root .message li + li {
margin-top: 5px;
}
.km-chatbot-root .answer-list {
display: grid;
gap: 8px;
margin: 10px 0 0;
padding: 0;
}
.km-chatbot-root .answer-list li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
padding: 8px;
list-style: none;
background: #fff;
border: 1px solid rgba(200, 221, 232, 0.8);
border-radius: 12px;
}
.km-chatbot-root .answer-list a,
.km-chatbot-root .chat-cta,
.km-chatbot-root .doctor-actions a,
.km-chatbot-root .answer-buttons button {
color: #fff;
background: var(--km-teal);
border-radius: 10px;
font-weight: 700;
text-decoration: none;
}
.km-chatbot-root .answer-list a {
padding: 7px 9px;
font-size: 0.82rem;
}
.km-chatbot-root .chat-cta {
display: inline-flex;
min-height: 42px;
align-items: center;
margin-top: 10px;
padding: 10px 14px;
}
.km-chatbot-root .answer-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.km-chatbot-root .answer-buttons button {
min-height: 38px;
padding: 9px 12px;
border: 0;
}
.km-chatbot-root .doctor-answer-list {
display: grid;
gap: 10px;
margin-top: 10px;
}
.km-chatbot-root .doctor-answer {
display: grid;
gap: 10px;
padding: 10px;
background: #fff;
border: 1px solid rgba(200, 221, 232, 0.8);
border-radius: 14px;
}
.km-chatbot-root .doctor-answer b,
.km-chatbot-root .doctor-answer span,
.km-chatbot-root .doctor-answer small {
display: block;
}
.km-chatbot-root .doctor-answer span {
margin-top: 3px;
color: var(--km-teal-dark);
font-weight: 700;
}
.km-chatbot-root .doctor-answer small {
margin-top: 5px;
color: var(--km-muted);
line-height: 1.35;
}
.km-chatbot-root .manipulation-line {
margin: 8px 0 0;
color: var(--km-muted);
line-height: 1.35;
}
.km-chatbot-root .manipulation-line a {
color: var(--km-teal);
font-weight: 700;
text-decoration: none;
}
.km-chatbot-root .manipulation-line a:hover {
text-decoration: underline;
}
.km-chatbot-root .doctor-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.km-chatbot-root .doctor-actions a {
min-height: 34px;
padding: 8px 10px;
font-size: 0.84rem;
}
.km-chatbot-root .doctor-actions a + a {
color: var(--km-teal);
background: #fff;
border: 1px solid var(--km-line);
}
.km-chatbot-root .quick-replies {
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
padding: 10px 12px;
background: var(--km-surface);
border-top: 1px solid var(--km-line);
}
.km-chatbot-root .quick-replies span {
flex: 0 0 auto;
color: var(--km-muted);
font-size: 0.78rem;
font-weight: 700;
white-space: nowrap;
}
.km-chatbot-root .quick-replies button {
flex: 0 0 auto;
min-height: 36px;
padding: 7px 10px;
color: var(--km-teal-dark);
background: #fff;
border: 1px solid rgba(55, 115, 149, 0.26);
border-radius: 10px;
}
.km-chatbot-root .chat-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
padding: 12px;
background: #fff;
border-top: 1px solid var(--km-line);
}
.km-chatbot-root .chat-form input {
width: 100%;
min-height: 46px;
padding: 10px 12px;
color: var(--km-ink);
background: #fff;
border: 1px solid var(--km-line);
border-radius: 8px;
}
.km-chatbot-root .send-button {
width: 46px;
height: 46px;
color: #fff;
background: var(--km-teal);
border-radius: 10px;
}
@media (max-width: 560px) {
.km-chatbot-root .chat-launcher {
right: 14px;
bottom: calc(156px + env(safe-area-inset-bottom, 0px));
min-width: 58px;
width: 58px;
min-height: 58px;
padding: 6px;
border-radius: 50%;
transition: width 160ms ease, min-width 160ms ease, transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.km-chatbot-root .chat-launcher img {
flex-basis: 44px;
width: 44px;
height: 44px;
}
.km-chatbot-root .chat-launcher span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.km-chatbot-root .chat-launcher.is-peeked {
width: 178px;
min-width: 178px;
padding: 6px 14px 6px 6px;
border-radius: 999px;
}
.km-chatbot-root .chat-launcher.is-peeked span {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
}
.km-chatbot-root .chat-widget {
right: 8px;
bottom: 16px;
width: calc(100vw - 16px);
height: min(640px, calc(100vh - 32px));
}
}
.km-doctors-audience-note {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 28px;
padding: 16px 18px;
border: 1px solid #bcddea;
border-radius: 12px;
color: #2f769a;
background: #edf8fa;
font-size: 16px;
line-height: 1.35;
}
.km-doctors-audience-note span {
color: #666;
}
.km-doctors-audience-note a {
margin-left: auto;
color: #2f769a;
font-weight: 700;
}
.km-services-audience-entry {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 24px;
margin: 0 0 28px;
padding: 22px 24px;
border: 1px solid #bcddea;
border-radius: 18px;
background: linear-gradient(110deg, #f5fbfd 0%, #eef7fa 55%, #f7f4ee 100%);
box-shadow: 0 8px 24px rgba(55, 115, 149, .09);
box-sizing: border-box;
}
.km-services-audience-entry__copy {
display: grid;
gap: 5px;
}
.km-services-audience-entry__copy strong {
color: #2f769a;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.15;
}
.km-services-audience-entry__copy span {
color: #666;
font-size: 14px;
line-height: 1.4;
}
.km-services-audience-entry__links {
display: flex;
flex: 0 0 auto;
gap: 10px;
}
.km-services-audience-entry__links a {
display: inline-flex;
min-height: 46px;
align-items: center;
justify-content: center;
gap: 9px;
padding: 11px 22px;
border: 1px solid #377f9f;
border-radius: 999px;
color: #2f769a;
background: #fff;
font-size: 15px;
font-weight: 800;
line-height: 1.2;
text-decoration: none;
}
.km-services-audience-entry__links .km-services-audience-entry__adult {
color: #fff;
background: #163d5b;
border-color: #163d5b;
}
.km-services-audience-entry__links a:hover,
.km-services-audience-entry__links a:focus-visible {
color: #fff;
background: #377f9f;
} .km-services-audience-entry ~ .services-filters.km-service-filters {
display: none !important;
}
.km-doctor-filters {
position: sticky;
top: 38px;
z-index: 20;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
margin: 0 0 28px;
padding: 14px 16px;
border: 1px solid #bcddea;
border-radius: 16px;
background: rgba(247, 252, 254, .97);
box-shadow: 0 8px 24px rgba(55, 115, 149, .12);
backdrop-filter: blur(8px);
}
.km-doctor-filters__row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.km-doctor-filters__row > span {
width: 70px;
color: #555;
font-size: 14px;
font-weight: 700;
}
.km-doctor-filters button {
min-height: 38px;
padding: 7px 14px;
border: 1px solid #7db6d1;
border-radius: 999px;
color: #2f769a;
background: #fff;
font: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.km-doctor-filters button.is-active {
border-color: #377f9f;
color: #fff;
background: #377f9f;
}
.km-doctor-filters__result {
display: none !important;
}
.services-filters.km-service-filters {
position: sticky;
top: 38px;
z-index: 20;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
width: 100%;
margin: 0 0 28px;
padding: 14px 16px;
border: 1px solid #bcddea;
border-radius: 16px;
background: rgba(247, 252, 254, .97);
box-shadow: 0 8px 24px rgba(55, 115, 149, .12);
backdrop-filter: blur(8px);
}
.km-service-filters__row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.km-service-filters__row > span {
width: 70px;
color: #555;
font-size: 14px;
font-weight: 700;
}
.km-service-filters button {
min-height: 38px;
padding: 7px 14px;
border: 1px solid #7db6d1;
border-radius: 999px;
color: #2f769a;
background: #fff;
font: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.km-service-filters button.is-active {
border-color: #377f9f;
color: #fff;
background: #377f9f;
}
.km-service-filters__result {
color: #666;
font-size: 14px;
font-weight: 600;
}
@media (max-width: 700px) {
.km-doctors-audience-note {
align-items: flex-start;
flex-direction: column;
gap: 7px;
}
.km-doctors-audience-note a {
margin-left: 0;
}
.km-services-audience-entry {
align-items: stretch;
flex-direction: column;
gap: 14px;
margin-bottom: 18px;
padding: 17px 15px;
border-radius: 14px;
}
.km-services-audience-entry__copy strong {
font-size: 22px;
}
.km-services-audience-entry__copy span {
font-size: 13px;
}
.km-services-audience-entry__links {
display: grid;
grid-template-columns: 1fr 1fr;
}
.km-services-audience-entry__links a {
min-width: 0;
min-height: 42px;
padding: 9px 12px;
font-size: 14px;
}
.km-doctor-filters {
top: 0;
display: block;
width: 100%;
margin-bottom: 20px;
padding: 10px 10px 8px;
border-radius: 14px;
overflow: hidden;
box-sizing: border-box;
}
.km-doctor-filters__row {
display: flex;
width: 100%;
align-items: center;
flex-wrap: nowrap;
gap: 8px;
padding: 2px 0 7px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.km-doctor-filters__row::-webkit-scrollbar {
display: none;
}
.km-doctor-filters__row > span {
flex: 0 0 auto;
width: auto;
padding: 0 2px;
font-size: 12px;
}
.km-doctor-filters button {
flex: 0 0 auto;
width: auto;
min-width: max-content;
min-height: 34px;
padding: 6px 11px;
font-size: 12px;
white-space: nowrap;
scroll-snap-align: start;
}
.km-doctor-filters__result {
padding: 3px 2px 1px;
font-size: 12px;
}
.services-filters.km-service-filters {
top: 0;
display: block;
width: 100%;
margin-bottom: 20px;
padding: 10px 10px 8px;
border-radius: 14px;
overflow: hidden;
box-sizing: border-box;
}
.km-service-filters__row {
display: flex;
width: 100%;
align-items: center;
flex-wrap: nowrap;
gap: 8px;
padding: 2px 0 7px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.km-service-filters__row::-webkit-scrollbar {
display: none;
}
.km-service-filters__row > span {
flex: 0 0 auto;
width: auto;
padding: 0 2px;
font-size: 12px;
}
.km-service-filters button {
flex: 0 0 auto;
width: auto;
min-width: max-content;
min-height: 34px;
padding: 6px 11px;
font-size: 12px;
white-space: nowrap;
scroll-snap-align: start;
}
.km-service-filters__result {
padding: 3px 2px 1px;
font-size: 12px;
}
} .km-branch-extra-services{margin:30px 0 42px;padding:30px;border:1px solid #dbe4e6;border-radius:26px;background:linear-gradient(145deg,#f8fbfc 0%,#f6f4ee 100%)}
.km-branch-extra-services__head{max-width:820px;margin:0 0 22px}.km-branch-extra-services__head>p{margin:0 0 7px;color:#bd8f3d;font-size:11px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.km-branch-extra-services__head h3{margin:0;color:#173f5c;font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,2.5vw,38px);font-weight:500;line-height:1.1}.km-branch-extra-services__head>span{display:block;margin-top:9px;color:#68747a;font-size:14px;line-height:1.55}
.km-branch-extra-services__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.km-branch-extra-service{display:grid;grid-template-columns:58px 1fr;grid-template-areas:"icon audience" "icon title" "icon description" "icon link";align-content:start;gap:5px 16px;min-height:185px;padding:22px;border:1px solid #d9e1e1;border-radius:20px;color:inherit;background:#fff;text-decoration:none!important;transition:.18s ease}.km-branch-extra-service:hover{transform:translateY(-2px);border-color:#9ab9c7;box-shadow:0 16px 34px rgba(23,63,92,.08)}.km-branch-extra-service__icon{grid-area:icon;display:grid;width:58px;height:58px;place-items:center;border-radius:18px;color:#173f5c;background:#eaf2f5}.km-branch-extra-service__icon svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.km-branch-extra-service__audience{grid-area:audience;color:#bd8f3d;font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.km-branch-extra-service strong{grid-area:title;color:#173f5c;font-family:Georgia,"Times New Roman",serif;font-size:22px;font-weight:500;line-height:1.13}.km-branch-extra-service__description{grid-area:description;color:#68747a;font-size:13px;line-height:1.52}.km-branch-extra-service__link{grid-area:link;margin-top:8px;color:#2f6f97;font-size:13px;font-weight:800}
@media(max-width:760px){.km-branch-extra-services{padding:22px 16px;border-radius:22px}.km-branch-extra-services__grid{grid-template-columns:1fr}.km-branch-extra-service{grid-template-columns:52px 1fr;padding:18px}.km-branch-extra-service__icon{width:52px;height:52px}} .km-branch-services-redesign{margin:18px 0 46px;padding:0}
.km-branch-services-redesign__intro{margin:0 0 28px;padding:30px;border:1px solid #dbe4e6;border-radius:26px;background:linear-gradient(145deg,#f8fbfc 0%,#f6f4ee 100%)}
.km-branch-services-redesign__intro>p{margin:0 0 7px;color:#bd8f3d;font-size:11px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
.km-branch-services-redesign__intro h2{margin:0;color:#173f5c;font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,3vw,46px);font-weight:500;line-height:1.08}
.km-branch-services-redesign__intro>span{display:block;max-width:900px;margin-top:10px;color:#68747a;font-size:15px;line-height:1.6}
.km-branch-service-group{margin-top:18px;padding:30px;border:1px solid #dbe4e6;border-radius:26px;background:linear-gradient(145deg,#f8fbfc 0%,#f6f4ee 100%)}
.km-branch-service-group:first-of-type{margin-top:0}
.km-branch-service-group .km-branch-extra-services__head h3{font-size:clamp(28px,2.5vw,38px)}
.km-branch-service-group .km-branch-extra-services__grid{margin-top:22px}
.km-branch-services-redesign + h2{margin-top:46px}
@media(max-width:760px){.km-branch-services-redesign__intro,.km-branch-service-group{padding:22px 16px;border-radius:22px}.km-branch-services-redesign__intro h2{font-size:34px}.km-branch-service-group{margin-top:14px}}