fieldset[data-astro-cid-lg3iizo2].ship-sub-field {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
fieldset[data-astro-cid-j3rrsubd].ship-sub-field {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
/* core\src\components\order\checkout\style\checkout.css */

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-group,
.carrier {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* fieldset по умолчанию имеет min-width: min-content, что ломает flex —
   .carrier выше уже сбрасывает border/margin/padding, здесь лишь добираем
   min-width. */
fieldset.carrier {
  min-width: 0;
}

/* [hidden] и класс .carrier имеют одинаковую специфичность (0,1,0), поэтому без
   этого явного правила display:flex у .carrier победил бы display:none
   от [hidden] — скрытое из JS через fieldset.hidden перестало бы скрываться. */
fieldset.carrier[hidden] {
  display: none;
}

.form-group legend {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

/* --- Сетки полей ----------------------------------------------------------- */

/* Число колонок задаётся переменной: <div class="fields" style="--cols: 3"> */
.fields {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: 0 24px;
}

/* --- Floating label field -------------------------------------------------- */

.field-float {
  position: relative;
  margin-bottom: 0;
}

.field-float input[type="text"],
.field-float input[type="tel"],
.field-float input[type="email"],
.field-float--textarea textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 0 4px;
  margin-top: 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-color-field);
  border-radius: 0;
  font-size: var(--size);
  color: var(--color);
  outline: none;
  transition: border-color 0.2s;
}

.field-float label {
  position: absolute;
  top: 25px;
  left: 0;
  font-size: inherit;
  color: var(--color-placeholder);
  pointer-events: none;
  transition:
    top 0.18s ease,
    font-size 0.18s ease,
    color 0.18s ease;
  white-space: nowrap;
}

.field-float input:focus + label,
.field-float input:not(:placeholder-shown) + label,
.field-float textarea:focus + label,
.field-float textarea:not(:placeholder-shown) + label {
  top: 0;
  font-size: var(--size-small);
  color: var(--color-subtle);
}

/* --- Ошибки полей ------------------------------------------------------- */

.field-float.has-error input,
.field-float.has-error textarea {
  border-bottom-color: var(--color-error);
}

.field-float.has-error label {
  color: var(--color-error);
}

.field-error-text {
  display: none;
  color: var(--color-error);
  font-size: var(--size-small);
  margin-top: 4px;
}

.field-float.has-error .field-error-text {
  display: block;
}

/* --- Radio группы ---------------------------------------------------------- */

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1rem 0;
}

.radio-group--sub {
  margin: 0 0 1rem;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-middle);
  cursor: pointer;
  color: var(--color);
  outline: 2px solid transparent;
  outline-offset: -1px;
  transition:
    border-color 0.15s,
    outline-color 0.15s,
    color 0.15s;
  user-select: none;
}

.radio-option:hover {
  border-color: var(--border-color-accent);
}

.radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-option:has(input:checked) {
  border-color: var(--border-color-accent);
  outline-color: var(--border-color-accent);
  color: var(--color);
}

.radio-option:has(input:focus-visible) {
  outline-color: var(--border-color-accent);
}

.checkout-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* Блокировка интерфейса при загрузке (отправка формы).
   Запросы автокомплита сюда не попадают: они показывают спиннер на
   .autocomplete-wrapper.loading (см. callCarrierApi). */
.is-loading {
  cursor: wait !important;
}

.is-loading * {
  pointer-events: none !important;
  opacity: 0.7;
  transition: opacity 0.2s;
}

@media (max-width: 768px) {
  .fields {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
/* core\src\components\order\checkout\carrier\smart\style\autocomplete.css */
/* Виджет автодополнения (город / отделение): поле + выпадающий список.
   Скрипты: search-list.ts, novaposhta/service.ts, delivery/service.ts. */

/* Контейнер для поля ввода и списка результатов */
.autocomplete-wrapper {
  position: relative;
  width: 100%;
}

/* Выпадающий список результатов */
.search-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-small);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  max-height: 250px;
  overflow-y: auto;
  display: none;
}

/* Элемент списка */
.search-item {
  padding: 12px 16px;
  cursor: pointer;
  font-size: var(--size-small);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
  line-height: 1.4;
}

.search-item:last-child {
  border-bottom: none;
}

.search-item:hover {
  background-color: var(--bg-color-surface);
  color: var(--btn-color-accent);
}

/* Скроллбар */
.search-list::-webkit-scrollbar {
  width: 6px;
}

.search-list::-webkit-scrollbar-track {
  background: var(--bg-color-surface);
  border-radius: var(--border-radius-small);
}

.search-list::-webkit-scrollbar-thumb {
  background: var(--border-color-field);
  border-radius: var(--border-radius-small);
}

.search-list::-webkit-scrollbar-thumb:hover {
  background: var(--color-placeholder);
}

/* Индикация загрузки */
.autocomplete-wrapper.loading::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-top-color: var(--border-color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* Запас прокрутки внизу формы: создаётся search-list.ts при первом фокусе в
   поле с выпадающим списком (только сенсорные устройства), чтобы поле можно
   было поднять к верху экрана, даже если под ним мало контента. */
.search-focus-spacer {
  display: none;
}

.search-focus-spacer.is-active {
  display: block;
  flex: 0 0 auto;
  height: 70vh;
}

@media (max-width: 768px) {
  /* Список остаётся position: absolute под полем, как на ПК. Раньше здесь
     было position: fixed — при нём унаследованный top: calc(100% + 4px)
     считался от высоты ЭКРАНА, и список рисовался за его нижним краем.
     Фактическую max-height на сенсорных устройствах выставляет
     search-list.ts (по visualViewport, с учётом клавиатуры). */
  .search-list {
    max-height: 300px;
  }

  /* Отступ сверху, когда search-list.ts поднимает поле к началу экрана. */
  .autocomplete-wrapper {
    scroll-margin-top: 16px;
  }

  .search-item {
    padding: 14px 18px;
    font-size: var(--size);
  }
}