@font-face {
  font-family: Inter;
  src: url("../fonts/Inter.0a77e23a8fdb.ttf");
  font-style: normal;
}

.main {
  width: min(100%, 600px);
  margin: 0 auto;
}

.index-page__compact-header,
.index-page__summary,
.specialist__summary {
  width: min(100%, 600px);
}

.index-page__compact-header {
  right: 50%;
  left: auto;
  transform: translateX(50%);
}

.index-page__summary,
.specialist__summary,
.specialist_day-selected .specialist__summary {
  width: min(100%, 600px);
}

.index-page__sheet {
  width: min(100%, 600px);
}

.index-page__chips {
  width: calc(100% + 32px);
}

.contacts__shell {
  min-height: 100dvh;
}

.contacts__content {
  padding-bottom: 88px;
}

.contacts__submit {
  position: fixed;
  right: 50%;
  bottom: 24px;
  z-index: 3;
  width: min(calc(100% - 32px), 568px);
  transform: translateX(50%);
}

.specialist__picker-time-sections {
  display: grid;
  gap: 26px;
}

.time-slots__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
}

.time-slots__item {
  min-width: 0;
  width: 100%;
}

.booking-summary {
  background-color: #fff;
  box-shadow: 0 0 64px 0 rgba(0, 0, 0, 0.32);
}

.button_primary {
  background-color: #148f2b;
}

.button_primary:hover,
.button_primary.button_active {
  background-color: #0c561a;
}

.chip {
  border-color: #4e5255;
}

.chip_selected,
.chip_selected:hover {
  background-color: #4e5255;
}

.checkbox__box {
  border-color: #4e5255;
}

.checkbox__input:checked + .checkbox__box-wrapper .checkbox__box,
.success__bonus-checkbox .checkbox__box {
  border-color: #4e5255;
  background-color: #4e5255;
}

.calendar-day_today {
  border-color: #4e5255;
}

.calendar-day_selected,
.calendar-day_selected:hover,
.calendar-day_selected:active,
.calendar-day_selected:focus,
.calendar-day_selected.calendar-day_hover,
.calendar-day_selected.calendar-day_disabled,
.calendar-day_selected.calendar-day_outside {
  color: #fff;
  border-color: #4e5255;
  background-color: #4e5255;
}

.contacts .widget-overlay {
  justify-items: center;
}

.contacts-select-sheet_phone {
  width: min(100%, 600px);
}

.input-field__control:focus,
.input-field__control:focus-visible,
.input-field:focus,
.input-field:focus-visible,
.input-field:focus-within,
.input-field__control-wrap:focus,
.input-field__control-wrap:focus-visible,
.input-field__control-wrap:focus-within,
.textarea-field__control:focus,
.textarea-field__control:focus-visible,
.button:focus-visible,
.chip:focus-visible,
.calendar-day:focus-visible,
.select-field__control:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 0;
}

.item-service_hidden,
.service-section_hidden,
.time-slots_hidden,
.booking-summary_hidden,
.bottom-sheet_hidden {
  display: none !important;
}

.item-service__meta {
  max-width: 100%;
}

.appointment-services__service-price,
.booking-summary__price,
.contacts__total-price,
.booking-edit-sheet__item-price {
  text-align: right;
}

.toast-region {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
}

.widget-error {
  padding: 12px 16px;
  border-radius: 12px;
  color: #ff3b38;
  background: rgba(255, 59, 56, 0.1);
}

.widget-empty {
  padding: 12px 16px;
  border-radius: 12px;
  color: rgba(31, 31, 31, 0.8);
  background: rgba(0, 0, 0, 0.04);
}

.calendar-day_outside {
  color: rgba(31, 31, 31, 0.32);
}

.calendar-day_selected,
.calendar-day_selected:hover,
.calendar-day_selected:active,
.calendar-day_selected:focus,
.calendar-day_selected.calendar-day_hover,
.calendar-day_selected.calendar-day_disabled,
.calendar-day_selected.calendar-day_outside {
  color: #fff;
  border-color: #4e5255;
  background-color: #4e5255;
}

@media (hover: none), (pointer: coarse) {
  .calendar-day:hover {
    background-color: transparent;
  }

  .calendar-day_selected,
  .calendar-day_selected:hover,
  .calendar-day_selected:active {
    color: #fff;
    border-color: #4e5255;
    background-color: #4e5255;
  }
}

.success__calendar-links {
  display: grid;
  gap: 8px;
}

.success__calendar-links[hidden] {
  display: none !important;
}

.map-link {
  display: block;
  width: fit-content;
  margin-top: 4px;
  color: #1a6be6;
  text-decoration: none;
}

.map-link:hover {
  color: #0f4fb3;
}

.info-page__contacts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-row__link {
  color: inherit;
  text-decoration: none;
}

.info-row__link:hover,
.social-links__link:hover {
  color: #0f4fb3;
}

.appointment-detail-page__tabs_single {
  grid-template-columns: 1fr;
}

.login-page__tabs {
  padding: 0 16px;
}

.login-page__tabs .item-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.account-form-error {
  font-size: 14px;
  line-height: 20px;
}

.account-appointment-card {
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.account-appointment-card:hover {
  border-color: rgba(0, 0, 0, 0.32);
  background-color: rgba(0, 0, 0, 0.02);
}

.account-appointment-card .button {
  pointer-events: none;
}

.appointments__shell {
  min-height: 100dvh;
}

.account-page__shell {
  min-height: 100dvh;
  background-color: #f7f7f7;
}

.account-page__user {
  padding: 16px 16px 24px;
}

.account-page__content {
  gap: 16px;
  margin-top: 16px;
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

.account-page .login-page__card {
  gap: 0;
  padding: 16px;
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0;
  border: 0;
  color: #1f1f1f;
  font: inherit;
  text-align: left;
  text-decoration: none;
  background-color: transparent;
}

.account-menu-item_danger {
  color: #ff3b38;
}

.account-menu-item_disabled {
  opacity: 1;
  cursor: default;
}

.account-menu-item__icon,
.account-menu-item__arrow {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.account-menu-item__icon-svg,
.account-menu-item__arrow {
  width: 24px;
  height: 24px;
}

.account-menu-item__label {
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-item__badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  color: #148f2b;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  background-color: rgba(20, 143, 43, 0.16);
}

.account-menu-item__arrow {
  color: rgba(31, 31, 31, 0.8);
}

.account-page__footer {
  height: 0;
  padding: 0;
}

.chat-page {
  --chat-composer-height: 80px;
  --chat-viewport-bottom-offset: 0px;
}

.chat-page__shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
  background-color: #f7f7f7;
}

.chat-page__topbar {
  padding: 8px 8px 8px 0;
}

.chat-page__messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 16px 16px calc(var(--chat-composer-height) + var(--chat-viewport-bottom-offset) + 24px);
  overflow-y: auto;
}

.chat-page__date {
  align-self: center;
  color: rgba(31, 31, 31, 0.8);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.25px;
}

.chat-page__message-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-page__message-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 4px;
}

.chat-page__message-row_own {
  justify-content: flex-end;
}

.chat-page__message {
  position: relative;
  max-width: 84%;
  padding: 12px 16px;
  border-radius: 0 16px 16px;
  color: #1f1f1f;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  background-color: #fff;
}

.chat-page__message_own {
  border-radius: 16px 0 16px 16px;
  background-color: rgba(20, 143, 43, 0.16);
}

.chat-page__message-corner {
  position: absolute;
  top: 0;
  left: -8px;
  display: block;
  width: 8px;
  height: 10px;
  color: #fff;
  transform: scaleX(-1);
}

.chat-page__message_own .chat-page__message-corner {
  right: -8px;
  left: auto;
  color: rgba(20, 143, 43, 0.16);
  transform: none;
}

.chat-page__message-meta {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 4px;
  color: rgba(31, 31, 31, 0.8);
}

.chat-page__message-time {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.25px;
}

.chat-page__message-status {
  display: inline-flex;
  align-items: center;
}

.chat-page__message-status_sent {
  color: rgba(31, 31, 31, 0.48);
}

.chat-page__message-status_read {
  color: #148f2b;
}

.chat-page__message-status-icon {
  display: block;
  width: 16px;
  height: 16px;
}

.chat-page__composer {
  position: fixed;
  right: auto;
  bottom: 0;
  left: 50%;
  z-index: 7;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  width: min(100%, 600px);
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  background-color: #fff;
  transform: translate(-50%, calc(var(--chat-viewport-bottom-offset) * -1));
}

.chat-page__input .textarea-field__control-wrap {
  min-height: 44px;
  border-color: #4e5255;
}

.chat-page__input:focus-within .textarea-field__control-wrap {
  border-color: #4e5255;
  box-shadow: inset 0 0 0 1px #4e5255;
}

.chat-page__input .textarea-field__control {
  min-height: 42px;
  max-height: 116px;
  overflow-y: hidden;
}

.chat-page__send {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 16px;
}

.chat-page__empty {
  display: grid;
  flex: 1;
  place-items: center;
  min-height: 160px;
  color: rgba(31, 31, 31, 0.48);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.chat-page__error {
  align-self: center;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  color: #b42318;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  background-color: rgba(255, 59, 56, 0.12);
}

.chat-page__message-status_failed {
  color: #ff3b38;
  font-size: 12px;
  font-weight: 700;
}

.chat-push-prompt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(31, 31, 31, 0.8);
  font-size: 12px;
  line-height: 16px;
  background-color: #fff;
}

.chat-push-prompt__button {
  padding: 4px 0;
  border: 0;
  color: #148f2b;
  font: inherit;
  font-weight: 600;
  background: transparent;
  cursor: pointer;
}

.chat-page__send:disabled {
  opacity: 0.45;
}

.button_fixed {
  position: fixed;
  right: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 3;
  width: min(calc(100% - 32px), 568px);
  transform: translateX(50%);
}

.appointments__footer {
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

.appointments__button {
  position: fixed;
  right: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 3;
  width: min(calc(100% - 32px), 568px);
  transform: translateX(50%);
}

.logout-sheet__actions form {
  display: grid;
}

.button_link {
  background-color: #1a6be6;
}

.button_link:hover,
.button_link.button_active {
  background-color: #0f4fb3;
}

.success__bonus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, 40%);
  gap: 16px;
  align-items: center;
  width: 100%;
  margin-top: 8px;
  padding: 0;
  border: 0;
  color: #1f1f1f;
  text-align: left;
  background-color: transparent;
  cursor: pointer;
}

.success__bonus:hover .success__bonus-button {
  background-color: #0f4fb3;
}

.success__bonus-checkbox {
  cursor: inherit;
  pointer-events: none;
}

.success__bonus-checkbox .checkbox__box {
  border-color: #041d09;
  background-color: #041d09;
}

.success__bonus-checkbox .checkbox__icon {
  opacity: 1;
}

.item-service__checkbox {
  width: 100%;
  padding: 0;
  border: 0;
  background-color: transparent;
  text-align: left;
}

.powered-by__logo {
  width: 79px;
  height: 18px;
}

@media (max-width: 374px) {
  .booking-summary__details {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .booking-summary__edit {
    grid-column: 2;
  }

  .appointment-services__service,
  .appointment-details__total,
  .contacts__total {
    gap: 8px;
  }
}
.item-service__image-wrapper {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: #f7f7f7;
}

.item-service__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}