.sl-pagehead--tall { height: 240px; justify-content: flex-start; padding-top: 76px; } .sl-filterbar { display: flex; flex-direction: row; align-items: center; gap: 8px; height: 72px; margin-block-start: 40px; padding: 5px; padding-inline-start: 24px; background: #fff; border: 2px solid var(--sl-field-line, #949494); border-radius: 1000px; box-shadow: 0 8px 32px rgba(0, 0, 0, .04); direction: rtl; } .sl-filterbar__search { display: flex; flex-direction: row; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; color: var(--sl-muted, #828282); } .sl-filterbar__searchicon { flex: none; } .sl-filterbar__input { flex: 1 1 auto; width: 100%; min-width: 0; border: 0; background: transparent; color: var(--sl-ink, #040404); font: inherit; font-size: 14px; outline: none; } .sl-filterbar__input::placeholder { color: var(--sl-muted, #828282); } .sl-filterbar__rule { flex: none; width: 1px; height: 32px; background: var(--sl-line, #F3F3F3); } .sl-filterbar__submit { flex: none; height: 62px; padding: 0 40px; border: 0; border-radius: 100px; background: var(--sl-orange, #F97316); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; } .sl-filterbar__submit:hover { filter: brightness(1.06); } .sl-pick { position: relative; display: flex; flex-direction: row; align-items: center; gap: 8px; flex: none; width: 210px; min-width: 210px; height: 62px; padding-inline: 14px; border-radius: 100px; color: var(--sl-muted, #828282); } .sl-pick__icon { flex: none; } .sl-pick__select { flex: 1 1 auto; min-width: 0; max-width: 100%; border: 0; background: transparent; color: var(--sl-ink, #040404); font: inherit; font-size: 14px; outline: none; cursor: pointer; } .sl-pick.is-ready .sl-pick__select { display: none; } .sl-pick__btn { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; } .sl-pick__cur { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--sl-ink, #040404); font-weight: 600; } .sl-pick__caret { flex: none; transition: transform .18s ease; } .sl-pick.is-open .sl-pick__caret { transform: rotate(180deg); } .sl-pick.is-set { background: var(--sl-teal-soft, #E6F3F2); color: var(--sl-teal-600, #00796B); } .sl-pick.is-set .sl-pick__cur { color: var(--sl-teal-600, #00796B); font-weight: 700; } .sl-pick__panel { position: absolute; inset-inline-start: 0; top: calc(100% + 10px); z-index: 30; display: none; flex-direction: column; width: 320px; max-width: calc(100vw - 48px); max-height: 380px; background: #fff; border: 1px solid var(--sl-border, #EDEDED); border-radius: var(--sl-r-md, 16px); box-shadow: 0 12px 40px rgba(0, 0, 0, .1); overflow: hidden; text-align: start; } .sl-pick__panel--flip { inset-inline-start: auto; inset-inline-end: 0; } .sl-pick.is-open .sl-pick__panel { display: flex; } .sl-pick__find { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: none; padding: 12px 16px; border-block-end: 1px solid var(--sl-line, #F3F3F3); color: var(--sl-muted, #828282); } .sl-pick__find input::-webkit-search-cancel-button, .sl-pick__find input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; } .sl-pick__clear { flex: none; display: none; place-items: center; width: 20px; height: 20px; padding: 0; background: none; border: 0; border-radius: 100px; color: var(--sl-muted, #828282); cursor: pointer; } .sl-pick__clear:hover { background: var(--sl-bg-soft, #F9FAFC); color: var(--sl-ink, #040404); } .sl-pick__find.is-filled .sl-pick__clear { display: grid; } .sl-pick__find input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--sl-ink, #040404); font: inherit; font-size: 14px; outline: none; } .sl-pick__list { flex: 1 1 auto; padding: 8px; overflow-y: auto; overscroll-behavior: contain; } .sl-pick__group { padding: 10px 12px 4px; color: var(--sl-muted, #828282); font-size: 12px; font-weight: 700; } .sl-pick__opt { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--sl-ink, #040404); font: inherit; font-size: 15px; text-align: start; cursor: pointer; } .sl-pick__opt:hover, .sl-pick__opt.is-focus { background: var(--sl-bg-soft, #F9FAFC); } .sl-pick__opt.is-on { background: var(--sl-teal-soft, #E6F3F2); color: var(--sl-teal-600, #00796B); font-weight: 700; } .sl-pick__n { margin-inline-start: auto; color: var(--sl-muted, #828282); font-size: 12px; font-weight: 400; } .sl-pick__empty { padding: 20px; color: var(--sl-muted, #828282); font-size: 14px; text-align: center; } .sl-active { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 20px; direction: rtl; } .sl-active__label { color: var(--sl-muted, #828282); font-size: 14px; } .sl-tag { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; height: 36px; padding-inline: 14px; background: var(--sl-teal-soft, #E6F3F2); border: 1px solid var(--sl-teal-200, #B0DAD6); border-radius: 100px; color: var(--sl-teal-600, #00796B); font-size: 14px; font-weight: 600; text-decoration: none; } .sl-tag:hover { background: #fff; } .sl-tag__x { display: flex; opacity: .7; } .sl-tag:hover .sl-tag__x { opacity: 1; } .sl-active__clear { color: var(--sl-orange, #F97316); font-size: 14px; text-decoration: underline; } .sl-active + .sl-grid { margin-block-start: 32px; } .sl-noresult { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-block-start: 48px; padding: 40px 24px; background: var(--sl-bg-soft, #F9FAFC); border: 1px solid var(--sl-border, #EDEDED); border-radius: var(--sl-r-lg, 20px); text-align: center; } .sl-noresult__lead { margin: 0; font-size: 20px; font-weight: 700; line-height: 32px; } .sl-noresult__hint { margin: 0; color: var(--sl-muted, #828282); font-size: 15px; } .sl-noresult__links { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: 8px; } .sl-nearhead { margin: 48px 0 0; font-size: 20px; font-weight: 700; line-height: 32px; } .sl-nearhead b { color: var(--sl-teal, #00897B); } .sl-nearhead + .sl-grid { margin-block-start: 24px; } .sl-nearhead--first { margin-block-start: 8px; } .sl-searchgroup__more { margin: 20px 0 0; text-align: center; } .sl-grid { display: grid; gap: 24px; margin-block-start: 24px; direction: rtl; } .sl-grid--doctors, .sl-grid--clinics, .sl-grid--cities, .sl-grid--services { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sl-grid .sl-doc, .sl-grid .sl-clinic { width: auto; } .sl-empty { margin: 40px 0 64px; padding: 48px; border: 1px solid var(--sl-line, #F3F3F3); border-radius: 20px; background: var(--sl-soft, #F9FAFC); color: var(--sl-muted, #828282); text-align: center; } .sl-citytile { display: flex; flex-direction: column; gap: 8px; min-height: 154px; padding: 24px; border: 1px solid var(--sl-line, #F3F3F3); border-radius: 20px; background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s; } .sl-citytile:hover { border-color: var(--sl-teal, #00897B); box-shadow: 0 8px 24px rgba(0, 0, 0, .05); } .sl-citytile__name { color: var(--sl-ink, #040404); font-size: 18px; font-weight: 800; } .sl-citytile__services { color: var(--sl-muted, #828282); font-size: 13px; line-height: 22px; } .sl-citytile__count { margin-top: auto; color: var(--sl-teal, #00897B); font-size: 14px; font-weight: 700; } .sl-idcard { display: flex; flex-direction: row-reverse; align-items: center; gap: 28px; margin-block-start: 30px; padding: 32px; border: 1px solid var(--sl-line, #F3F3F3); border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); direction: rtl; text-align: right; } .sl-idcard__photo { flex: none; width: 160px; height: 160px; border: 1px solid var(--sl-line, #F3F3F3); border-radius: 24px; background: var(--sl-soft, #F9FAFC) center / cover no-repeat; } .sl-idcard__body { flex: 1; min-width: 0; } .sl-idcard__name { margin: 0; color: var(--sl-ink, #040404); font-size: 26px; font-weight: 800; line-height: 40px; } .sl-idcard__spec { margin: 0 0 14px; color: var(--sl-muted, #828282); font-size: 16px; line-height: 28px; } .sl-idcard__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .sl-tag { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 100px; background: var(--sl-teal-soft, #E6F3F2); color: var(--sl-teal, #00897B); font-size: 13px; font-weight: 600; } .sl-idcard__address { margin: 0; color: var(--sl-muted, #828282); font-size: 14px; line-height: 24px; } .sl-idcard__address a { color: inherit; } .sl-tel { color: inherit; text-decoration: none; } .sl-tel:hover, .sl-tel:focus-visible { color: var(--sl-teal, #00897B); } .sl-idcard__score { flex: none; width: 280px; text-align: center; } .sl-idcard__num { display: block; color: var(--sl-teal, #00897B); font-size: 34px; font-weight: 800; } .sl-idcard__stars { display: block; margin-bottom: 6px; color: var(--sl-star, #FFC107); font-size: 16px; } .sl-idcard__reviews { display: block; margin-bottom: 18px; color: var(--sl-muted, #828282); font-size: 13px; } .sl-idcard__cta { display: inline-flex; align-items: center; justify-content: center; width: 200px; height: 48px; border-radius: 100px; background: var(--sl-orange, #F97316); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; } .sl-idcard__cta { box-shadow: 0 6px 16px rgba(249, 115, 22, .25); transition: filter .18s ease, transform .18s ease; } .sl-idcard__cta:hover { filter: brightness(1.06); transform: translateY(-1px); } .sl-stats { display: flex; justify-content: center; gap: 0; margin-bottom: 18px; } .sl-stat { display: flex; flex-direction: column; gap: 2px; padding-inline: 12px; } .sl-stat small { white-space: nowrap; } .sl-stat + .sl-stat { border-inline-start: 1px solid var(--sl-line, #F3F3F3); } .sl-stat b { color: var(--sl-teal, #00897B); font-size: 24px; font-weight: 800; } .sl-stat small { color: var(--sl-muted, #828282); font-size: 12px; } .sl-split2 { display: grid; grid-template-columns: 888fr 408fr; gap: 24px; margin-block-start: 24px; align-items: start; direction: rtl; } .sl-panel { padding: 32px; border: 1px solid var(--sl-line, #F3F3F3); border-radius: 20px; background: #fff; direction: rtl; text-align: right; } .sl-panel__title { margin: 0 0 16px; color: var(--sl-ink, #040404); font-size: 20px; font-weight: 800; line-height: 32px; } .sl-panel__title + .sl-panel__title, .sl-panel__body + .sl-panel__title, .sl-geo + .sl-panel__title, .sl-pills + .sl-panel__title { margin-top: 28px; } .sl-panel__body { color: var(--sl-muted, #828282); font-size: 16px; line-height: 30px; } .sl-panel__body a { color: var(--sl-teal, #00897B); } .sl-panel__body p { margin: 0 0 16px; } .sl-panel__body p:last-child { margin-bottom: 0; } .sl-geo { direction: rtl; } .sl-geo__address { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; color: var(--sl-muted, #828282); font-size: 16px; line-height: 30px; } .sl-geo__address .sl-svg { flex: 0 0 auto; margin-block-start: 6px; color: var(--sl-teal, #00897B); } .sl-geo__frame { position: relative; overflow: hidden; height: 260px; border: 1px solid var(--sl-line, #F3F3F3); border-radius: 16px; background: #F7F7F7; } .sl-geo__map { display: block; width: 100%; height: 100%; border: 0; direction: ltr; } .sl-geo__links { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 14px; } .sl-geo__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--sl-line, #F3F3F3); border-radius: 12px; color: var(--sl-ink, #040404); font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color .2s, color .2s, background-color .2s; } .sl-geo__btn:hover, .sl-geo__btn:focus-visible { border-color: var(--sl-teal, #00897B); color: var(--sl-teal, #00897B); } .sl-geo__btn--main { border-color: var(--sl-teal, #00897B); background: var(--sl-teal, #00897B); color: #fff; } .sl-geo__btn--main:hover, .sl-geo__btn--main:focus-visible { background: var(--sl-teal-600, #00796B); border-color: var(--sl-teal-600, #00796B); color: #fff; } .sl-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .sl-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--sl-line, #F3F3F3); border-radius: 100px; background: var(--sl-soft, #F9FAFC); color: var(--sl-ink, #040404); font-size: 14px; text-decoration: none; } .sl-pill:hover { border-color: var(--sl-teal, #00897B); color: var(--sl-teal, #00897B); } .sl-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 20px; direction: rtl; } .sl-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; height: 64px; padding: 0 2px; border: 1px solid var(--sl-field-line, #f3f3f3); border-radius: 12px; background: #fff; direction: rtl; text-align: center; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } .sl-day:not(.is-off):hover { border-color: var(--sl-teal, #00897B); } .sl-day b, .sl-day small { white-space: nowrap; } .sl-day.is-off { background: var(--sl-bg, #FAFAFA); border-style: dashed; cursor: not-allowed; opacity: .55; } .sl-day.is-off b, .sl-day.is-off small { color: var(--sl-muted, #828282); } .sl-slot[hidden] { display: none; } .sl-slot.is-busy { background: var(--sl-bg, #FAFAFA); border-style: dashed; color: var(--sl-muted, #828282); cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; } .sl-slot.is-past { background: var(--sl-bg, #FAFAFA); border-style: dashed; color: var(--sl-muted, #828282); cursor: not-allowed; opacity: .55; text-decoration: none; } .sl-day b { color: var(--sl-ink, #040404); font-size: 11.5px; font-weight: 700; } .sl-day small { color: var(--sl-muted, #828282); font-size: 10.5px; } .sl-day.is-active { background: var(--sl-teal, #00897B); border-color: var(--sl-teal, #00897B); box-shadow: 0 4px 12px rgba(0, 137, 123, .3); } .sl-day.is-active b { color: #fff; } .sl-day.is-active small { color: rgba(255, 255, 255, .8); } .sl-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; } .sl-slots__none { grid-column: 1 / -1; margin: 0; } .sl-slot { display: flex; align-items: center; justify-content: center; height: 44px; border: 1px solid var(--sl-field-line, #f3f3f3); border-radius: 100px; background: #fff; color: var(--sl-muted, #828282); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .sl-slot:not(.is-busy):not(.is-past):hover { border-color: var(--sl-teal, #00897B); color: var(--sl-teal, #00897B); } .sl-slot.is-active { border: 2px solid var(--sl-teal, #00897B); background: #fff; color: var(--sl-teal, #00897B); font-weight: 700; } .sl-fee { margin: 0 0 16px; color: var(--sl-muted, #828282); font-size: 14px; } .sl-fee b { color: var(--sl-ink, #040404); } .sl-panel__cta { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 100px; background: var(--sl-teal, #00897B); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; } .sl-panel__cta:hover { filter: brightness(1.06); } .sl-panel__note { margin: 16px 0 0; color: var(--sl-muted, #828282); font-size: 13px; text-align: center; } .sl-panel__note a { color: var(--sl-teal, #00897B); } .sl-service { display: flex; flex-direction: column; gap: 10px; min-height: 200px; padding: 24px; border: 1px solid var(--sl-line, #F3F3F3); border-radius: 20px; background: #fff; } .sl-service__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--sl-teal-soft, #E6F3F2); color: var(--sl-teal, #00897B); } .sl-service__title { margin: 0; color: var(--sl-ink, #040404); font-size: 16px; font-weight: 800; } .sl-service__text { margin: 0; color: var(--sl-muted, #828282); font-size: 14px; line-height: 24px; } @media (max-width: 1100px) { .sl-grid--doctors, .sl-grid--clinics, .sl-grid--cities, .sl-grid--services { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sl-split2 { grid-template-columns: 1fr; } .sl-pick { width: 170px; min-width: 170px; } } @media (max-width: 780px) { .sl-filterbar { flex-wrap: wrap; height: auto; padding: 12px; border-radius: 24px; } .sl-filterbar__search { width: 100%; } .sl-filterbar__rule { display: none; } .sl-pick { flex: 1 1 45%; width: auto; min-width: 0; height: 48px; padding-inline: 12px; background: var(--sl-bg-soft, #F9FAFC); } .sl-pick__btn { width: 100%; } .sl-pick__panel { width: 300px; } .sl-filterbar__submit { order: 10; width: 100%; } .sl-idcard { flex-direction: column; align-items: stretch; } .sl-idcard__score { width: auto; } .sl-panel { padding: 24px; } } @media (max-width: 640px) { .sl-grid--doctors, .sl-grid--clinics, .sl-grid--cities, .sl-grid--services { grid-template-columns: minmax(0, 1fr); } .sl-grid > * { min-width: 0; } .sl-days { grid-template-columns: repeat(4, 1fr); gap: 8px; } .sl-day b { font-size: 13px; } .sl-day small { font-size: 12px; } } .sl-bookform { display: block; } .sl-days, .sl-slots { margin: 0 0 20px; padding: 0; border: 0; } .sl-day input, .sl-slot input, .sl-kindrow input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .sl-day, .sl-slot { cursor: pointer; } .sl-day:has(input:checked), .sl-day.is-active { background: var(--sl-teal, #00897B); border-color: var(--sl-teal, #00897B); box-shadow: 0 4px 12px rgba(0, 137, 123, .3); } .sl-day:has(input:checked) b, .sl-day.is-active b { color: #fff; } .sl-day:has(input:checked) small, .sl-day.is-active small { color: rgba(255, 255, 255, .8); } .sl-slot:has(input:checked), .sl-slot.is-active { background: #fff; border: 2px solid var(--sl-teal, #00897B); color: var(--sl-teal, #00897B); font-weight: 700; } .sl-day:has(input:focus-visible), .sl-slot:has(input:focus-visible) { outline: 2px solid var(--sl-teal-600, #00796B); outline-offset: 2px; } .sl-kindrow { display: flex; flex-direction: row; align-items: center; gap: 10px; margin-block-end: 16px; font-size: 14px; cursor: pointer; } .sl-kindrow::before { content: ""; flex: none; width: 20px; height: 20px; border: 1px solid var(--sl-field-line, #949494); border-radius: 6px; } .sl-kindrow:has(input:checked)::before { background: var(--sl-teal, #00897B) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--sl-teal, #00897B); } button.sl-panel__cta { width: 100%; border: 0; cursor: pointer; font: inherit; } .sl-formmsg { margin-block-end: 16px; padding: 12px 16px; border-radius: var(--sl-r-sm, 12px); font-size: 14px; line-height: 24px; } .sl-formmsg--green { background: #f0f9f6; color: #009966; } .sl-formmsg--orange { background: #fff1e6; color: var(--sl-orange, #F97316); } .sl-formmsg--red { background: #fff3f3; color: #f83636; } .sl-idcard__actions { display: flex; flex-direction: row; align-items: center; gap: 10px; } .sl-fav { display: flex; } .sl-fav__btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; background: #fff; border: 1px solid var(--sl-field-line, #949494); border-radius: 100px; color: var(--sl-muted, #828282); cursor: pointer; transition: color .18s ease, border-color .18s ease, background-color .18s ease; } .sl-fav__btn:hover { border-color: var(--sl-teal-200, #B0DAD6); color: var(--sl-teal, #00897B); } .sl-fav__btn.is-on { background: var(--sl-teal-soft, #E6F3F2); border-color: var(--sl-teal-200, #B0DAD6); color: var(--sl-teal, #00897B); } .sl-field--pick { display: flex; flex-direction: column; gap: 8px; margin-block-end: 20px; } .sl-field--pick .sl-field__label { color: var(--sl-ink, #040404); font-size: 14px; font-weight: 600; } .sl-field--pick select { width: 100%; height: 52px; padding: 0 20px; padding-inline-start: 40px; background: #fff; border: 2px solid var(--sl-field-line, #f3f3f3); border-radius: 1000px; color: var(--sl-ink, #040404); font: inherit; font-size: 14px; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23828282' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 16px center; background-size: 16px; } .sl-field--pick select:focus { border-color: var(--sl-teal, #00897B); background: #fff; } body.sl-modal-open { overflow: hidden; } .sl-bookmodal[hidden] { display: none; } .sl-bookmodal { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 24px; direction: rtl; } .sl-bookmodal__backdrop { position: absolute; inset: 0; background: rgba(4, 20, 18, .45); backdrop-filter: blur(2px); } .sl-bookmodal__card { position: relative; width: min(480px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 28px; background: #fff; border-radius: 24px; box-shadow: 0 24px 64px rgba(16, 24, 40, .25); text-align: center; animation: sl-bookmodal-in .22s ease; } @keyframes sl-bookmodal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .sl-bookmodal__x { position: absolute; top: 20px; inset-inline-start: 20px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: var(--sl-bg-soft, #F9FAFC); border: 0; border-radius: 50%; color: var(--sl-muted, #828282); cursor: pointer; transition: color .15s ease, background-color .15s ease; } .sl-bookmodal__x:hover { background: #eef1f4; color: var(--sl-ink, #040404); } .sl-bookmodal__title { margin: 0 0 10px; color: var(--sl-ink, #040404); font-size: 18px; font-weight: 800; line-height: 28px; } .sl-bookmodal__dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; } .sl-bookmodal__dots i { width: 7px; height: 7px; background: var(--sl-line, #E3E3E3); border-radius: 100px; transition: width .2s ease; } .sl-bookmodal__dots i.is-on { width: 22px; background: var(--sl-teal, #00897B); } .sl-bookmodal__sub { margin: 0 0 18px; color: var(--sl-muted, #828282); font-size: 14px; line-height: 24px; } .sl-bookmodal__who { display: flex; flex-direction: row; align-items: center; gap: 12px; margin-bottom: 18px; padding: 12px 16px; background: var(--sl-bg-soft, #F9FAFC); border: 1px solid var(--sl-line, #F3F3F3); border-radius: 16px; text-align: right; } .sl-bookmodal__photo { flex: none; width: 52px; height: 52px; background: var(--sl-teal-soft, #E6F3F2) center / cover no-repeat; border-radius: 50%; } .sl-bookmodal__whotext { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sl-bookmodal__whotext strong { color: var(--sl-ink, #040404); font-size: 15px; font-weight: 700; line-height: 24px; } .sl-bookmodal__whotext small { color: var(--sl-muted, #828282); font-size: 13px; line-height: 20px; } .sl-bookmodal__label { margin: 0 0 10px; color: var(--sl-muted, #828282); font-size: 13px; text-align: right; } .sl-bookmodal__opt { display: flex; flex-direction: row; align-items: center; gap: 14px; width: 100%; margin-bottom: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--sl-line, #F3F3F3); border-radius: 16px; cursor: pointer; font: inherit; text-align: right; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .sl-bookmodal__opt:hover { border-color: var(--sl-teal, #00897B); box-shadow: 0 6px 18px rgba(0, 137, 123, .12); transform: translateY(-1px); } .sl-bookmodal__opt:last-child { margin-bottom: 0; } .sl-bookmodal__opttext { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sl-bookmodal__opttext strong { color: var(--sl-ink, #040404); font-size: 15px; font-weight: 700; line-height: 24px; } .sl-bookmodal__opttext small { color: var(--sl-muted, #828282); font-size: 13px; line-height: 20px; } .sl-bookmodal__opticon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; background: var(--sl-teal-soft, #E6F3F2); border-radius: 50%; color: var(--sl-teal, #00897B); } .sl-bookmodal__optgo { flex: none; display: grid; place-items: center; color: var(--sl-muted, #828282); }