@layer components {
  /* Скляна картка швидкого запиту — точні параметри компонента Figma 12:105. */
  .quote {
    display: grid;
    gap: var(--sp-24);
    padding: var(--sp-24);
    background: var(--surface-glass-1);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: var(--r-16);
    box-shadow: inset 0 0 0 .5px var(--surface-separator);
  }

  .quote__field { display: grid; gap: var(--sp-8); }

  .quote__label {
    color: var(--label-primary);
    font-size: var(--fs-body-2);
    font-weight: 500;
    line-height: 18px;
  }

  /* --- Маршрут --- */
  .quote__route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-12);
  }

  .quote__dash {
    color: var(--label-quaternary);
    text-align: center;
  }

  .quote__select { position: relative; }

  .quote__select select {
    width: 100%;
    height: 48px;
    padding: 0 var(--sp-40) 0 var(--sp-16);
    appearance: none;
    background: var(--surface-glass-2);
    border: .5px solid var(--surface-separator);
    border-radius: var(--r-8);
    color: var(--label-primary);
    font-size: var(--fs-body-1);
    line-height: 1.375;
    cursor: pointer;
  }
  /* Випадайка малюється системою — її пункти мають бути читабельні. */
  .quote__select select option { background: var(--surface-secondary); color: var(--label-primary); }

  .quote__select select:has(option[value=""]:checked) { color: var(--label-quaternary); }

  .quote__caret {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--sp-12);
    translate: 0 -50%;
    color: var(--label-tertiary);
    pointer-events: none;
  }

  /* --- Спосіб перевезення: радіогрупа, стилізована під вкладки --- */
  .quote__modes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-8);
    height: 48px;
    padding: 2px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 .5px var(--surface-separator);
  }

  .quote__mode input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
  }

  .quote__mode-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    height: 44px;
    padding-inline: var(--sp-8);
    border-radius: var(--r-8);
    color: var(--label-secondary);
    font-size: var(--fs-body-2);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .quote__mode:hover .quote__mode-inner { color: var(--label-primary); }

  .quote__mode input:checked + .quote__mode-inner {
    background: var(--surface-glass-1);
    color: var(--accent-primary);
  }

  /* Фокус лишається видимим, хоч сам radio і прихований. */
  .quote__mode input:focus-visible + .quote__mode-inner {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
  }

  /* --- Вага й об'єм --- */
  .quote__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-16);
  }

  .quote__input {
    width: 100%;
    height: 48px;
    padding: 0 var(--sp-16);
    background: var(--surface-glass-2);
    border: .5px solid var(--surface-separator);
    border-radius: var(--r-8);
    color: var(--label-primary);
    font-size: var(--fs-body-1);
    line-height: 1.375;
  }
  .quote__input::placeholder {
    color: var(--label-quaternary);
    opacity: 1;
  }

  /* Стрілки в number-полях тут тільки заважають. */
  .quote__input::-webkit-outer-spin-button,
  .quote__input::-webkit-inner-spin-button { appearance: none; margin: 0; }
  .quote__input[type="number"] { -moz-appearance: textfield; }

  .quote__submit[aria-busy="true"] { opacity: .6; pointer-events: none; }

  .quote__error {
    margin: 0;
    color: var(--accent-secondary);
    font-size: var(--fs-body-2);
  }
  .quote__error[hidden] { display: none; }

  @media (max-width: 480px) {
    /* У мобільному макеті картка не перебудовується: внутрішня ширина 310px,
       маршрут і вага лишаються по дві колонки. */
    .quote { padding: var(--sp-24); }

    .quote__modes {
      display: flex;
      align-items: flex-start;
    }

    .quote__mode { flex: 0 0 44px; min-width: 0; }
    .quote__mode:has(input:checked) { flex: 1 1 auto; }

    .quote__mode-inner { padding-inline: var(--sp-12); }
    .quote__mode:not(:has(input:checked)) .quote__mode-inner > span { display: none; }
  }
}