/**
 * Matching Engine — экран поиска мастера и предложение очереди
 * Референс: flow 2.1 Поиск мастера
 */

.modal-overlay--matching {
  align-items: flex-end;
  justify-content: center;
  background: var(--Product-Theme-Light-bg-overlay-primary);
}

.modal-block--matching {
  width: 100%;
  max-width: 500px;
  padding-bottom: 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--Product-Theme-Light-bg-basic);
  border-radius: var(--Radius-Value-large-container) var(--Radius-Value-large-container) 0 0;
  box-shadow: 0 4px 24px var(--Product-Theme-Light-controls-select-shadow);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.modal-overlay--matching.modal-overlay--active .modal-block--matching,
.modal-overlay--matching.active .modal-block--matching {
  transform: translateY(0);
}

.modal-block--matching .header--timer .header__center {
  text-align: left;
}

.modal-block--matching .header__timer-title {
  text-align: left;
  margin-bottom: var(--Spacing-Value-spacing-20);
}

.matching-footer {
  padding-top: var(--Spacing-Value-spacing-12);
}

.matching-footer__wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--Spacing-Value-spacing-24);
  padding-left: 32px;
  padding-right: 32px;
}

.matching-footer__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.matching-footer__label {
  font-family: var(--Text-Styles-Value-font-family-master), sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--Product-Theme-Light-text-basic-primary);
  text-align: center;
  cursor: pointer;
}

.matching-footer__item:focus-within .matching-footer__label {
  color: var(--Product-Theme-Light-text-basic-secondary);
}

/* Кнопки 56 без текста, с иконкой, secondary */
.matching-footer .btn--icon-only {
  width: 56px;
  min-width: 56px;
  padding-left: 0;
  padding-right: 0;
}

/* Специфичность ≥ scoped .modal-overlay--matching .btn__icon (дефолт arrow-right). */
.modal-overlay--matching .matching-footer .btn--icon-close .btn__icon,
.modal-overlay--queue-waiting .matching-footer .btn--icon-close .btn__icon,
.matching-footer .btn--icon-close .btn__icon {
  mask: url('/masterclick/assets/icons/regular/x.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/x.svg') no-repeat center / contain;
}

.modal-overlay--matching .matching-footer .btn--icon-list-bullets .btn__icon,
.modal-overlay--queue-waiting .matching-footer .btn--icon-list-bullets .btn__icon,
.matching-footer .btn--icon-list-bullets .btn__icon {
  mask: url('/masterclick/assets/icons/regular/list-bullets.svg') no-repeat center / contain;
  -webkit-mask: url('/masterclick/assets/icons/regular/list-bullets.svg') no-repeat center / contain;
}

/* Окно очереди — выезжает снизу */
.modal-overlay--queue {
  align-items: flex-end;
  justify-content: center;
}

.modal-block--queue {
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.modal-overlay--queue.modal-overlay--active .modal-block--queue,
.modal-overlay--queue.active .modal-block--queue {
  transform: translateY(0);
}

/* Окно «Поиск будет дольше обычного» — крестик вне основного окна сверху (как address-modal) */
.modal-block--queue .queue-offer-header {
  flex-shrink: 0;
  min-height: 72px;
  background: transparent;
  border-bottom: none;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}

.modal-block--queue .queue-offer-header .header__left,
.modal-block--queue .queue-offer-header .header__center {
  display: none;
}

.modal-block--queue .queue-offer-header .header__right {
  margin-left: auto;
}

.queue-offer__card {
  width: 100%;
  background: var(--Product-Theme-Light-bg-basic);
  border-radius: var(--Radius-Value-large-container) var(--Radius-Value-large-container) 0 0;
  box-shadow: 0 4px 24px var(--Product-Theme-Light-controls-select-shadow);
}

#queue-offer-overlay .queue-offer__card .header--texts .header__center {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

.queue-offer__body {
  padding: var(--Spacing-Value-spacing-16) var(--Spacing-Value-spacing-16) var(--Spacing-Value-spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Value-spacing-16);
  background: var(--Product-Theme-Light-bg-basic);
  border-radius: 0;
}

.queue-offer__item {
  display: flex;
  align-items: flex-start;
  gap: var(--Spacing-Value-spacing-12);
}

.queue-offer__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: var(--Product-Theme-Light-vector-basic-primary);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.queue-offer__icon--list {
  mask-image: url('/masterclick/assets/icons/fill/stack-overflow-logo-fill.svg');
  -webkit-mask-image: url('/masterclick/assets/icons/fill/stack-overflow-logo-fill.svg');
}

.queue-offer__icon--clipboard {
  mask-image: url('/masterclick/assets/icons/regular/clipboard-text.svg');
  -webkit-mask-image: url('/masterclick/assets/icons/regular/clipboard-text.svg');
}

.queue-offer__icon--clock {
  mask-image: url('/masterclick/assets/icons/fill/clock-user-fill.svg');
  -webkit-mask-image: url('/masterclick/assets/icons/fill/clock-user-fill.svg');
}

.queue-offer__icon--lightning {
  mask-image: url('/masterclick/assets/icons/fill/clock-fill.svg');
  -webkit-mask-image: url('/masterclick/assets/icons/fill/clock-fill.svg');
}

.queue-offer__text {
  color: var(--Product-Theme-Light-text-basic-primary);
  margin: 0;
}

.queue-offer__footer {
  padding: var(--Spacing-Value-spacing-8) var(--Spacing-Value-spacing-16) var(--Spacing-Value-spacing-16);
  background: var(--Product-Theme-Light-bg-basic);
  border-radius: 0 0 var(--Radius-Value-large-container) var(--Radius-Value-large-container);
}

/* Окно «Ждём свободного мастера» — стояние в очереди */
.modal-overlay--queue-waiting {
  align-items: flex-end;
  justify-content: center;
  background: var(--Product-Theme-Light-bg-overlay-primary);
}

.modal-block--queue-waiting {
  width: 100%;
  max-width: 500px;
  padding-bottom: 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--Product-Theme-Light-bg-basic);
  border-radius: var(--Radius-Value-large-container) var(--Radius-Value-large-container) 0 0;
  box-shadow: 0 4px 24px var(--Product-Theme-Light-controls-select-shadow);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.modal-overlay--queue-waiting.modal-overlay--active .modal-block--queue-waiting,
.modal-overlay--queue-waiting.active .modal-block--queue-waiting {
  transform: translateY(0);
}

.modal-block--queue-waiting .header--timer .header__center {
  text-align: left;
}

.modal-block--queue-waiting .header__timer-title {
  text-align: left;
  margin-bottom: var(--Spacing-Value-spacing-20);
}

.queue-waiting__body {
  padding: var(--Spacing-Value-spacing-16) var(--Spacing-Value-spacing-20) var(--Spacing-Value-spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Value-spacing-16);
}

/* Окно «Мастер назначен» — карта видна и доступна для управления, виден маркер мастера */
.modal-overlay--master-assigned {
  align-items: flex-end;
  justify-content: center;
  background: transparent;
  pointer-events: none;
}

.modal-overlay--master-assigned .modal-block--master-assigned {
  pointer-events: auto;
  touch-action: manipulation; /* блокировать передачу touch карте — исключить «моргание» при тапе по Детали */
}

.modal-block--master-assigned {
  width: 100%;
  max-width: 500px;
  padding-bottom: 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--Product-Theme-Light-bg-basic);
  border-radius: var(--Radius-Value-large-container) var(--Radius-Value-large-container) 0 0;
  box-shadow: 0 4px 24px var(--Product-Theme-Light-controls-select-shadow);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.modal-overlay--master-assigned.modal-overlay--active .modal-block--master-assigned,
.modal-overlay--master-assigned.active .modal-block--master-assigned {
  transform: translateY(0);
}

.modal-block--master-assigned .header--texts {
  padding: var(--Spacing-Value-spacing-20) var(--Spacing-Value-spacing-16);
}

.modal-block--master-assigned .header--texts .header__center {
  align-items: flex-start;
  text-align: left;
}

/* Окно «Мастер в пути» — мастер начал движение к адресу; карта видна и доступна для управления */
.modal-overlay--master-en-route {
  align-items: flex-end;
  justify-content: center;
  background: transparent;
  pointer-events: none;
}

.modal-overlay--master-en-route .modal-block--master-en-route {
  pointer-events: auto;
}

.modal-block--master-en-route {
  width: 100%;
  max-width: 500px;
  padding-bottom: 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--Product-Theme-Light-bg-basic);
  border-radius: var(--Radius-Value-large-container) var(--Radius-Value-large-container) 0 0;
  box-shadow: 0 4px 24px var(--Product-Theme-Light-controls-select-shadow);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.modal-overlay--master-en-route.modal-overlay--active .modal-block--master-en-route,
.modal-overlay--master-en-route.active .modal-block--master-en-route {
  transform: translateY(0);
}

.modal-block--master-en-route .header--texts {
  padding: var(--Spacing-Value-spacing-20) var(--Spacing-Value-spacing-16);
}

.modal-block--master-en-route .header--texts .header__center {
  align-items: flex-start;
  text-align: left;
}

/* Окно «Мастер подъезжает» — мастер в радиусе ~300 м; карта видна и доступна для управления */
.modal-overlay--master-approaching {
  align-items: flex-end;
  justify-content: center;
  background: transparent;
  pointer-events: none;
}

.modal-overlay--master-approaching .modal-block--master-approaching {
  pointer-events: auto;
}

.modal-block--master-approaching {
  width: 100%;
  max-width: 500px;
  padding-bottom: 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--Product-Theme-Light-bg-basic);
  border-radius: var(--Radius-Value-large-container) var(--Radius-Value-large-container) 0 0;
  box-shadow: 0 4px 24px var(--Product-Theme-Light-controls-select-shadow);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.modal-overlay--master-approaching.modal-overlay--active .modal-block--master-approaching,
.modal-overlay--master-approaching.active .modal-block--master-approaching {
  transform: translateY(0);
}

.modal-block--master-approaching .header--texts {
  padding: var(--Spacing-Value-spacing-20) var(--Spacing-Value-spacing-16);
}

.modal-block--master-approaching .header--texts .header__center {
  align-items: flex-start;
  text-align: left;
}

.master-approaching-clarify-link {
  display: inline-block;
  margin-top: var(--Spacing-Value-spacing-8, 8px);
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--Text-Styles-Value-font-size-14, 14px);
  font-weight: 400;
  line-height: var(--Text-Styles-Value-line-height-20, 20px);
  color: var(--Product-Theme-Light-controls-accent-initial);
  text-decoration: underline;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.master-approaching-clarify-link:hover {
  color: var(--Product-Theme-Light-controls-accent-hover);
}

/* Маркер назначения на карте (экран «Мастер в пути») — красный круг с белой точкой, ножка, привязан к точке дома */
.destination-pin-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.destination-pin-marker__head {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--Product-Theme-Light-vector-color-critical-initial, #DE3531);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  position: relative;
}
.destination-pin-marker__head::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: var(--Product-Theme-Light-text-basic-primary-on-color);
  border-radius: 50%;
}
.destination-pin-marker__stick {
  width: 4px;
  height: 24px;
  background: var(--Product-Theme-Light-text-basic-primary, #0F1114);
  margin-top: -2px;
}
.destination-pin-marker__shadow {
  width: 15px;
  height: 2px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  margin-top: -1px;
  filter: blur(2px);
}

/* Окно «Мастер у двери» — как у master-assigned / master-en-route / master-approaching */
.modal-overlay--master-at-door {
  align-items: flex-end;
  justify-content: center;
  background: transparent;
}

.modal-block--master-at-door {
  width: 100%;
  max-width: 500px;
  padding-bottom: 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--Product-Theme-Light-bg-basic);
  border-radius: var(--Radius-Value-large-container) var(--Radius-Value-large-container) 0 0;
  box-shadow: 0 4px 24px var(--Product-Theme-Light-controls-select-shadow);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.modal-overlay--master-at-door.modal-overlay--active .modal-block--master-at-door,
.modal-overlay--master-at-door.active .modal-block--master-at-door {
  transform: translateY(0);
}

.modal-block--master-at-door .master-at-door__header {
  width: 100%;
  min-height: 72px;
  padding: var(--Spacing-Value-spacing-20) var(--Spacing-Value-spacing-16);
  justify-content: space-between;
  align-items: center;
}

.modal-block--master-at-door .master-at-door__header .header__center {
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  text-align: left;
}

.modal-block--master-at-door .header__timer-title {
  flex: 1 1 0;
  color: var(--Product-Theme-Light-text-basic-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
}

.modal-block--master-at-door .timer {
  width: 100%;
  min-width: 0;
  gap: 6px;
}

.modal-block--master-at-door .timer .timer__bar-fill,
.modal-block--master-at-door .timer .timer__dot {
  transition: width 1s linear, left 1s linear;
}

.modal-block--master-at-door .header__timer-body {
  align-self: stretch;
  margin-top: 0;
  color: var(--Product-Theme-Light-text-basic-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.master-at-door__body {
  padding: 0 var(--Spacing-Value-spacing-16) var(--Spacing-Value-spacing-12);
  flex-direction: column;
  gap: var(--Spacing-Value-spacing-6);
  display: flex;
}

.master-at-door__footer {
  width: 100%;
  padding: var(--Spacing-Value-spacing-12) var(--Spacing-Value-spacing-16) 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--Spacing-Value-spacing-10);
  box-sizing: border-box;
}

.master-at-door__footer .master-at-door__submit {
  width: 100%;
  min-width: 0;
  height: 56px;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
}

.master-at-door__sub {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Value-spacing-8, 8px);
}

/* Скрывать блок первого уровня при показе второго (логика чата: один уровень за раз) */
#master-at-door-options[hidden] {
  display: none !important;
}

.master-at-door__sub[hidden] {
  display: none;
}

.master-at-door__neighbors-wrap .input-wrapper {
  min-width: 0;
}

.master-at-door-cancel-confirm-content {
  padding: var(--Spacing-Value-spacing-20);
}

.master-at-door-cancel-confirm-text {
  margin: 0 0 var(--Spacing-Value-spacing-20);
  font-size: var(--Text-Styles-Value-font-size-16);
  line-height: var(--Text-Styles-Value-line-height-24);
  color: var(--Product-Theme-Light-text-basic-primary);
}

.master-at-door-cancel-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Value-spacing-10);
}

.master-at-door-cancel-confirm-actions .btn {
  width: 100%;
}

#master-at-door-cancel-confirm-overlay .modal .header--texts .header__center {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

/* Модалка «Детали заказа» — прозрачный header, menu-item как у мастера До приезда */
.modal--order-details {
  display: flex;
  flex-direction: column;
  background: transparent;
}

.modal--order-details .header--transparent {
  background: transparent;
  flex-shrink: 0;
}

.modal--order-details .order-details-content {
  background: var(--Product-Theme-Light-bg-basic);
  border-radius: var(--Radius-Value-large-container) var(--Radius-Value-large-container) 0 0;
  padding: var(--Spacing-Value-spacing-16) var(--Spacing-Value-spacing-20);
}

.order-details__title {
  margin: 0 0 var(--Spacing-Value-spacing-16);
  color: var(--Product-Theme-Light-text-basic-primary);
}

.order-details__menu-item {
  min-height: 56px;
}