/* Подбор — адаптация телефон/планшет (v6). Только переопределения; база в selector-v5.css. */

/* Ручка шторки: на десктопе скрыта, на телефоне видна. */
.selector-handle { display: none; }

/* ============ ТЕЛЕФОН (< 768px): нижняя шторка ============ */
@media (max-width: 767px) {
  @keyframes selector-sheet-in {
    from { opacity: .4; transform: translateY(56px); }
    to { opacity: 1; transform: translateY(0); }
  }

  #selectorLayer.dialog-layer {
    padding: 0;
    place-items: end stretch;
    overflow: hidden;
  }

  #selectorLayer .dialog--selector {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 44px);
    height: calc(100dvh - 44px);
    max-height: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-top: 1px solid rgba(221, 168, 141, .45);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 60px rgba(0, 0, 0, .45);
    transition: transform var(--motion-normal) cubic-bezier(.2, .8, .2, 1);
  }

  #selectorLayer .dialog--selector.dialog--sheet-opening {
    animation: selector-sheet-in var(--motion-normal) cubic-bezier(.2, .8, .2, 1);
  }

  #selectorLayer .dialog--selector.is-sheet-dragging { transition: none; }

  /* Ручка шторки */
  #selectorLayer .selector-handle {
    display: grid;
    flex: 0 0 auto;
    height: 26px;
    padding-top: 4px;
    place-items: start center;
    background: var(--ink);
    cursor: grab;
    touch-action: none;
  }

  #selectorLayer .selector-handle__bar {
    width: 42px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 253, 250, .38);
  }

  /* Шапка */
  #selectorLayer .dialog-header {
    flex: 0 0 auto;
    height: 56px;
    padding: 0 10px 0 18px;
  }

  /* Тело: горизонтальный прогресс + прокручиваемый контент */
  #selectorLayer .selector-body {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  #selectorLayer .step-rail {
    display: block;
    flex: 0 0 auto;
    padding: 9px 14px 10px;
    background: var(--ink-soft);
    color: var(--white);
  }

  #selectorLayer .step-rail ol { display: flex; gap: 6px; }
  #selectorLayer .step-rail ol::before { content: none; }

  #selectorLayer .step-rail li {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
  }

  #selectorLayer .step-rail .step-index {
    position: static;
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  #selectorLayer .step-rail .step-index .ui-icon { width: 10px; height: 10px; }

  #selectorLayer .step-rail strong {
    max-width: 100%;
    padding-top: 0;
    overflow: hidden;
    font-family: var(--ui);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  #selectorLayer .step-rail small { display: none; }

  @media (max-width: 359px) {
    #selectorLayer .step-rail ol { gap: 3px; }
    #selectorLayer .step-rail strong {
      font-size: 7px;
      letter-spacing: .015em;
    }
  }

  #selectorLayer .selector-main {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  #selectorLayer .step-content {
    min-height: 0;
    padding: 18px 16px 22px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #selectorLayer .step-content h2 { font-size: 22px; }
  #selectorLayer .step-content > p { font-size: 10px; }

  /* Липкий футер у нижнего края шторки */
  #selectorLayer .selector-footer {
    position: static;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  #selectorLayer .selector-footer .dialog-button--primary { flex: 1 1 auto; }
  #selectorLayer .selector-footer__hint { display: none; }
  #selectorLayer .dialog-button { min-height: 48px; font-size: 11px; }

  /* Карточки услуг во всю ширину */
  #selectorLayer .service-catalog,
  #selectorLayer .service-group--wide .service-group__items { grid-template-columns: 1fr; }
  #selectorLayer .service-group__items { gap: 8px; }

  #selectorLayer .service-choice {
    width: 100%;
    min-height: 62px;
    padding: 10px 12px;
  }

  #selectorLayer .service-choice strong { font-size: 13px; }
  #selectorLayer .service-choice small { font-size: 8px; }

  /* Анкета */
  #selectorLayer .detail-option { min-height: 52px; font-size: 11px; }

  #selectorLayer .detail-counter {
    width: 100%;
    max-width: 230px;
    height: 56px;
    grid-template-columns: 56px 1fr 56px;
  }

  #selectorLayer .detail-counter button { min-width: 48px; min-height: 48px; }
  #selectorLayer .brand-field input { font-size: 11px; }

  /* Дата и фирменный календарь */
  #selectorLayer .date-tile { min-height: 64px; }
  #selectorLayer .brand-calendar { padding: 12px 10px 10px; }
  #selectorLayer .calendar-day { height: 40px; font-size: 11px; }

  /* Связь */
  #selectorLayer .language-strip button { height: 44px; }

  /* Проверка */
  #selectorLayer .message-box { font-size: 9px; }

  /* Готово */
  #selectorLayer .ready-state h2 { font-size: 26px; }
  #selectorLayer .ready-state p { font-size: 11px; }
  #selectorLayer .ready-actions { display: grid; width: 100%; gap: 8px; }
  #selectorLayer .ready-actions .dialog-button { width: 100%; min-height: 52px; }

  /* Полировка строк главного блока под палец (высота и фон не меняются) */
  .action-row { -webkit-tap-highlight-color: transparent; }
  .action-row:active { background: rgba(196, 137, 110, .1); }
}

/* ============ ПЛАНШЕТ (768–1199px): центрированное окно ============ */
@media (min-width: 768px) and (max-width: 1199px) {
  #selectorLayer.dialog-layer {
    padding: 24px;
    place-items: center;
    overflow: hidden;
  }

  #selectorLayer .dialog--selector {
    width: min(780px, calc(100vw - 48px));
    height: min(760px, calc(100vh - 48px));
    height: min(760px, calc(100dvh - 48px));
    max-height: none;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-soft);
  }

  #selectorLayer .dialog-header { flex: 0 0 auto; }

  #selectorLayer .selector-body {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
  }

  #selectorLayer .step-rail { display: block; }

  #selectorLayer .selector-main {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  #selectorLayer .step-content {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #selectorLayer .selector-footer { position: static; }
  #selectorLayer .detail-counter button { min-width: 48px; min-height: 48px; }
}