/* Мастер Клик — основные стили */
@import 'components/text-styles.css';
@import 'components/input.css';
@import 'components/main-window.css';
@import 'components/modal.css';
@import 'components/avatar.css';
@import 'components/profile.css';
@import 'components/toast.css';
@import 'components/select-buttons.css';
@import 'components/controls-base.css';
@import 'components/card-select.css';
@import 'components/menu-item.css';
@import 'components/divider.css';
@import 'components/address-card.css';
@import 'components/option-buttons.css';
@import 'components/option-card.css';
@import 'components/tabs.css';
@import 'components/review-card.css';
@import 'components/rating.css';
@import 'components/rating-stars.css';
@import 'components/service-page.css';
@import 'components/app-footer.css';
@import 'components/bottom-nav.css';
@import 'components/upgrade-banner.css';
@import 'components/pin.css';
@import 'components/header.css';
@import 'components/tooltip.css';
@import 'components/drum-picker.css';
@import 'components/level-card.css';
@import 'components/chips.css';
@import 'components/auth-modal.css';
@import 'components/matching-engine.css';
@import 'components/checkout-summary.css';
@import 'components/checkout-payment-status.css';
@import 'components/task-item.css';
@import 'components/execution.css';
@import 'components/gallery.css';
@import 'components/button-slide.css';
@import 'components/button-progressbar.css';
@import 'components/master-markers.css';
@import 'components/splash.css';
@import 'components/spinner.css';
@import 'components/order-feedback.css';
@import 'components/toggle.css';

/* Скрыть полосу прокрутки, скролл остаётся */
.scrollbar-hidden,
.main-window__body,
.main-window__level-cards,
.main-window__dop,
.orders-filter {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hidden::-webkit-scrollbar,
.main-window__body::-webkit-scrollbar,
.main-window__level-cards::-webkit-scrollbar,
.main-window__dop::-webkit-scrollbar,
.orders-filter::-webkit-scrollbar {
  display: none;
}

/* При перетаскивании скролла — курсор grabbing у контейнера и всех потомков (табы/чипы имеют cursor: pointer) */
.drag-scroll--active,
.drag-scroll--active * {
  cursor: grabbing !important;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --text-scale: 1;
  /* Масштаб шрифтов приложения: переопределяем токены размеров (настройка «Размер шрифта») */
  --Text-Styles-Value-font-size-10: calc(10px * var(--text-scale));
  --Text-Styles-Value-font-size-12: calc(12px * var(--text-scale));
  --Text-Styles-Value-font-size-14: calc(14px * var(--text-scale));
  --Text-Styles-Value-font-size-16: calc(16px * var(--text-scale));
  --Text-Styles-Value-font-size-18: calc(18px * var(--text-scale));
  --Text-Styles-Value-font-size-20: calc(20px * var(--text-scale));
  --Text-Styles-Value-font-size-24: calc(24px * var(--text-scale));
  --Text-Styles-Value-font-size-36: calc(36px * var(--text-scale));
  --Text-Styles-Value-font-size-56: calc(56px * var(--text-scale));
}
html {
  -webkit-tap-highlight-color: transparent;
  scrollbar-gutter: stable;
  font-size: calc(16px * var(--text-scale));
}
html.font-s { --text-scale: 0.875; }
html.font-m { --text-scale: 1; }
html.font-l { --text-scale: 1.125; }
html.font-xl { --text-scale: 1.25; }
html, body { height: 100%; width: 100%; overflow: hidden; font-family: var(--Text-Styles-Value-font-family-master), sans-serif; }
body { background: #f5f5f7; position: relative; -webkit-tap-highlight-color: transparent; }

/* Demo frame: header--warning с названием экрана (как у мастера) */
.demo-frame {
  padding: 0;
  background: var(--Product-Theme-Light-bg-basic);
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 500px;
  z-index: 9999;
  border-radius: 0;
}
body:has(#demo-frame) {
  padding-top: 56px;
}
.demo-frame .header--warning {
  cursor: default;
}

/* Глобальный фокус при Tab — цвет из токенов */
:focus-visible {
  outline: 2px solid var(--Product-Theme-Light-border-basic-focus);
  outline-offset: 2px;
}

#map-container {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--Product-Theme-Light-bg-basic); overflow: visible; z-index: 1;
}
#map {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%; min-height: 300px;
  background: var(--Product-Theme-Light-bg-basic);
}

/* Map overlay — обёртка для элементов на карте, gap: 0 */
.map-overlay {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none; display: flex; flex-direction: column; gap: 0; z-index: 1500;
}
.map-overlay > * { pointer-events: auto; }

/* Header на карте — 4. Menu (сверху слева), прозрачный фон */
.map-overlay--header {
  flex-direction: row; justify-content: flex-start; align-items: flex-start; padding: 0; gap: 0;
}
.header-menu-wrap {
  width: 100%;
}
@media (min-width: 768px) {
  .header-menu-wrap {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}
.map-overlay--header .header--menu {
  min-height: 72px; flex-shrink: 0;
  background: transparent;
}

/* main-window-wrap — ширина и центрирование как у app-footer и modal-block (max-width 500px, по центру) */
.main-window-wrap {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2000;
  width: 100%;
  max-width: 500px;
  transform: translateX(-50%);
  transition: padding-bottom 0.2s ease;
  overflow-x: visible;
  pointer-events: none;
}
.main-window-block {
  display: flex; flex-direction: column; gap: 0; align-items: stretch;
  max-height: 100vh;
  transform: translateY(0);
  transition: transform 0.3s ease;
  overflow-x: visible;
  pointer-events: none;
}
.main-window-block.main-window-block--collapsed {
  transform: translateY(calc(100% - 156px));
}
.main-window-block .header--geo-tooltip {
  min-height: 72px; flex-shrink: 0;
  background: transparent;
  pointer-events: none;
}
.main-window-block .header--geo-tooltip .header__left,
.main-window-block .header--geo-tooltip .header__right {
  pointer-events: auto;
}
.main-window-block #main-window.main-window {
  pointer-events: auto;
}
.map-overlay--address {
  align-items: center; justify-content: flex-start; padding-top: 56px; padding-left: 16px; padding-right: 16px;
}
.map-overlay--address .address-card { cursor: pointer; max-width: calc(100% - 32px); }

/* Layout: main-window в main-window-block; flex: 1 + min-height: 0 */
#main-window.main-window {
  position: relative; width: 100%;
  flex: 1;
  min-height: 0;
  max-height: min(500px, calc(100vh - 120px));
}

/* AddressCard на карте — компонент AddressCard */

/* Address form — по дизайну 1.1.1 две строки с иконками */
.address-form { display: flex; flex-direction: column; gap: 0; }
.address-form__row {
  display: flex;
  align-items: stretch;
}
.address-form__row .menu-item {
  flex: 1;
  min-width: 0;
}
.address-form__row .menu-item__text-primary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.address-form__row--address .address-form__text--label,
.address-form__row--service .address-form__text--label,
.address-form__row--address .menu-item__text-primary.placeholder {
  color: var(--Product-Theme-Light-text-basic-primary);
}
.address-form__field::selection {
  background: transparent;
}
.address-form__field::-moz-selection {
  background: transparent;
}
.address-form__field:focus,
.address-form__field:focus-visible {
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}
.address-form__field--input {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}
.address-form__field--input::placeholder { color: var(--Product-Theme-Light-text-basic-secondary); }
.address-form__text--label { color: var(--Product-Theme-Light-text-basic-primary); }
.address-form__btn {
  padding: 8px 16px; border: none; border-radius: 8px;
  background: var(--Product-Theme-Light-controls-secondary-initial, rgba(15,17,20,0.05));
  font-size: 14px; font-weight: 500; color: #333; cursor: pointer;
  font-family: inherit; flex-shrink: 0;
}
.address-form__btn:hover { background: rgba(15,17,20,0.08); }
.address-form__divider {
  flex-shrink: 0;
  padding-top: 4px;
  padding-bottom: 4px;
}
.address-form__divider .divider__line {
  border-top-color: var(--Product-Theme-Light-border-basic-secondary, #0f11141a);
}
.address-input-form {
  min-width: 0;
}
.address-input-form .input-wrapper {
  min-width: 0;
}
.address-suggestions { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.address-suggestions-list { display: flex; flex-direction: column; gap: 4px; }
.input-wrapper--service { margin-top: 8px; }
.address-suggestions .menu-item {
  position: static; transform: none; max-width: none; box-shadow: none;
  border-radius: 12px; min-height: 56px; justify-content: flex-start;
}
.address-suggestions-list .menu-item { justify-content: flex-start; }
.address-suggestions .address-suggestions-divider,
.address-suggestions-list .divider {
  flex-shrink: 0;
  min-height: 9px;
}
.address-suggestions-saved { display: flex; flex-direction: column; gap: 0; }
.address-suggestions-saved .divider {
  flex-shrink: 0;
  min-height: 9px;
}
.address-suggestions-saved .divider .divider__line {
  border-top-color: var(--Product-Theme-Light-border-basic-secondary, #0f11141a);
  min-height: 1px;
  flex-shrink: 0;
}
.address-suggestions .address-suggestions-divider { display: none; }
.address-suggestions:has(.address-suggestions-saved > *) .address-suggestions-divider,
.address-suggestions:has(.suggestion-item) .address-suggestions-divider { display: flex; }
.address-suggestions .divider .divider__line,
.address-suggestions-list .divider .divider__line {
  border-top-color: var(--Product-Theme-Light-border-basic-secondary, #0f11141a);
  min-height: 1px;
  flex-shrink: 0;
}
.address-suggestions-list .suggestion-item__text mark {
  background: none;
  font-weight: 700;
  color: var(--Product-Theme-Light-text-color-success, #138058);
}

.service-catalog {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.service-catalog-drill-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--Product-Theme-Light-border-basic-secondary, rgba(15, 17, 20, 0.12));
}
.service-catalog-drill-title {
  flex: 1;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--Product-Theme-Light-text-basic-primary);
}
.service-catalog .menu-item {
  position: static;
  transform: none;
  max-width: none;
  box-shadow: none;
  border-radius: 12px;
  min-height: 56px;
  justify-content: flex-start;
}
.service-catalog .menu-item__text-primary { font-size: var(--Text-Styles-Value-font-size-16); }
.service-catalog .menu-item__text-secondary { font-size: var(--Text-Styles-Value-font-size-14); }
.service-catalog .menu-item__icon-right {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: var(--Product-Theme-Light-text-basic-secondary);
  mask: url('/masterclick/assets/icons/regular/caret-right.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/caret-right.svg') no-repeat center / contain;
}
.service-catalog .catalog-item__text mark {
  background: none;
  font-weight: 700;
  color: var(--Product-Theme-Light-text-color-success, #138058);
}
.service-catalog__group-title {
  color: var(--Product-Theme-Light-text-basic-secondary);
  padding: var(--Spacing-Value-spacing-8) 0 var(--Spacing-Value-spacing-4);
  margin-top: var(--Spacing-Value-spacing-4);
}
.service-catalog__group-title:first-child { margin-top: 0; padding-top: 0; }
.catalog-item--service .menu-item__content--full { flex: 1; min-width: 0; }
.catalog-item__extras {
  flex-shrink: 0;
  font-size: var(--Text-Styles-Value-font-size-14);
  font-weight: 500;
  color: var(--Product-Theme-Light-text-basic-secondary);
}
.catalog-item--disabled {
  opacity: 0.6;
  pointer-events: none;
}
.catalog-item--disabled[type="button"] {
  cursor: not-allowed;
}
.service-catalog .catalog-item--disabled {
  pointer-events: auto;
  cursor: not-allowed;
}

.service-catalog__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--Spacing-Value-spacing-24, 24px);
  color: var(--Product-Theme-Light-text-basic-secondary);
}
.service-catalog__loading[hidden] {
  display: none;
}
.service-catalog__spinner {
  flex-shrink: 0;
}

/* Region unsupported — Header Texts + btn 56 (main-window__body уже даёт 16px по бокам) */
.main-window__body--region-unsupported {
  min-height: 0;
  max-height: none;
}
.region-unsupported {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--Spacing-Value-spacing-24, 24px);
  padding: var(--Spacing-Value-spacing-24, 24px) 0;
}
.region-unsupported .header--texts { background: none; padding: 0; }
.region-unsupported .btn { width: 100%; }
.region-unsupported .header__center { gap: 0; }

/* Header Menu + Geo — иконки из icon-button.css */

/* menu-item в address-suggestions — переопределение (основные стили в menu-item.css) */

.maplibregl-ctrl-top-right { top: 80px !important; }
@media (max-width: 767px) {
  .maplibregl-ctrl-group { display: none !important; }
}

/* Toast — над нижней панелью по дизайну 1.1.1 */

/* Modal, Toast, SelectButtons — в components/ */
.form-group { margin-bottom: 20px; }

/* Модалка деталей адреса — menuinput (Город, улица и дом), select-buttons с иконками */
.address-modal-menu-input {
  cursor: default;
  pointer-events: none;
  margin-bottom: var(--Spacing-Value-spacing-16, 16px);
}
.address-modal-menu-input .menu-item__text-primary {
  font-size: var(--Text-Styles-Value-font-size-16, 16px);
  line-height: var(--Text-Styles-Value-line-height-20, 20px);
}
.address-details-modal-content .select-buttons--address {
  margin-bottom: var(--Spacing-Value-spacing-16, 16px);
}

.address-details-modal-content .select-buttons--address .select-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.address-details-modal-content .address-details-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--Spacing-Value-spacing-12, 12px);
  margin-bottom: var(--Spacing-Value-spacing-20, 20px);
}

.address-details-modal-content .address-details-fields .input-wrapper {
  min-width: 0;
}

.address-details-modal-content {
  min-width: 0;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.address-details-modal-content .save-button,
.clarify-address-content .save-button {
  width: 100%;
  margin-top: 0;
}
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--Product-Theme-Light-text-basic-primary); margin-bottom: 8px; }
.form-label-wrap:focus-within .form-label { color: var(--Product-Theme-Light-text-basic-secondary); }
.readonly-field {
  background: var(--Product-Theme-Light-bg-page-primary); border-radius: var(--Radius-Value-small-container);
  padding: 12px 16px; font-size: 16px; color: var(--Product-Theme-Light-text-basic-primary);
  margin-bottom: 16px; font-family: var(--Text-Styles-Value-font-family-master), sans-serif;
}
.input-field {
  width: 100%; padding: 12px 16px; border: 1px solid #e0e0e0; border-radius: 8px;
  font-size: 16px; color: #1d1d1f; background: white;
}
.input-field:focus { outline: none; border-color: #007aff; }
.close-button {
  position: absolute; top: 20px; right: 20px; width: 24px; height: 24px;
  background: none; border: none; font-size: 24px; color: #666; cursor: pointer; z-index: 3001;
}

.service-modal .modal-content { max-height: 60vh; overflow-y: auto; }
.service-category { margin-bottom: 24px; }
.category-title {
  font-size: 18px; font-weight: 600; color: #1d1d1f;
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0;
}
.service-item {
  padding: 16px; border: 1px solid #e0e0e0; border-radius: 12px; margin-bottom: 12px;
  cursor: pointer; transition: all 0.2s; display: flex; justify-content: space-between; align-items: center;
}
.service-item:hover { border-color: #007aff; background: #f5f5f7; }
.service-item.selected { border-color: #007aff; background: #e8f0fe; }
.service-name { font-size: 16px; font-weight: 500; color: #1d1d1f; margin-bottom: 4px; }
.service-price { font-size: 14px; color: #007aff; font-weight: 600; }
.service-options { background: #f5f5f7; border-radius: 8px; padding: 16px; margin-top: 12px; display: none; }
.service-options.active { display: block; }
.option-group { margin-bottom: 16px; }
.option-title { font-size: 14px; font-weight: 500; color: #666; margin-bottom: 8px; }
.option-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.option-button {
  padding: 8px 16px; border: 1px solid #e0e0e0; border-radius: 8px;
  background: white; font-size: 14px; color: #666; cursor: pointer; transition: all 0.2s;
}
.option-button.active { background: #007aff; color: white; border-color: #007aff; }

@media (min-width: 768px) {
  .modal { border-radius: 20px; max-height: 80vh; margin: 20px; }
}

/* Баннер «Заказы недоступны» — header header--warning */
#client-blocked-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
}
body.client-blocked-banner-visible {
  padding-top: var(--header-warning-height);
}
body.client-blocked-banner-visible #map-container {
  top: var(--header-warning-height);
}
body.client-blocked-banner-visible #client-blocked-banner {
  display: flex;
}

/* Экран «Вам недоступны заказы» — как у мастера: полноэкранный, белый фон, кнопка назад */
.client-blocked-overlay.modal-overlay--active .client-blocked-screen,
.client-blocked-overlay.active .client-blocked-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--Product-Theme-Light-bg-basic);
  overflow: hidden;
}

@media (min-width: 768px) {
  .client-blocked-overlay.modal-overlay--active .client-blocked-screen,
  .client-blocked-overlay.active .client-blocked-screen {
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 0 100vmax var(--Product-Theme-Light-bg-overlay-primary);
  }
}

.client-blocked-screen__header {
  flex-shrink: 0;
}

.client-blocked__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}

.client-blocked__body .info-doc-modal-content.auth-modal-content {
  padding: 0;
}

.client-blocked__body .info-doc-modal-title-inner {
  font-size: var(--Text-Styles-Value-font-size-36);
  font-weight: 700;
  line-height: var(--Text-Styles-Value-line-height-36);
}