/* GE SHOP — «Отследить заказ». Только оформление: разметка, классы состояний
   (is-done / is-current), таймлайн статусов и анимация точек между шагами оставлены
   как были — механика страницы не менялась.
   Язык — как у сертификатов и юридических страниц: ч/б, крупные скругления, линейки. */

#ge-tracking {
  --gt-bg: #0b0b0b;
  --gt-ink: #f4f4f1;
  --gt-ink-2: rgba(244, 244, 241, 0.6);
  --gt-ink-3: rgba(244, 244, 241, 0.32);
  --gt-line: rgba(244, 244, 241, 0.14);
  --gt-surface: #131315;
  --gt-surface-2: rgba(244, 244, 241, 0.05);
  --gt-pad: clamp(18px, 5vw, 44px);
  --gt-head: "Akrobat", "Cyngle", Arial, sans-serif;
  --gt-body: "Cyngle", "Cygre", "Akrobat", Arial, sans-serif;

  display: block;
  min-height: 100vh;
  color: var(--gt-ink);
  background: var(--gt-bg);
  font-family: var(--gt-body);
  -webkit-font-smoothing: antialiased;
}

#ge-tracking *,
#ge-tracking *::before,
#ge-tracking *::after {
  box-sizing: border-box;
}

/* АТРИБУТ hidden ДОЛЖЕН ПРЯТАТЬ. Он задаёт display:none с самым слабым весом, и любое
   наше правило вроде «.getr-mine { display: grid }» его перебивает: узел помечен
   скрытым, а на экране стоит. Ровно так список заказов и остался висеть над открытым
   заказом. Одно правило на весь файл закрывает это раз и навсегда. */
#ge-tracking [hidden] {
  display: none !important;
}

/* ============================ ШАПКА ============================ */

#ge-tracking .getr-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 30px) var(--gt-pad);
}

#ge-tracking .getr-logo {
  display: inline-block;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

#ge-tracking .getr-logo:hover {
  opacity: 0.75;
}

#ge-tracking .getr-logo:active {
  transform: scale(0.96);
}

#ge-tracking .getr-logo img {
  width: clamp(104px, 15vw, 150px);
  height: auto;
  display: block;
}

#ge-tracking .getr-actions {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 22px);
}

#ge-tracking .getr-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

#ge-tracking .getr-action:hover {
  opacity: 0.72;
}

#ge-tracking .getr-action:active {
  transform: scale(0.9);
  opacity: 1;
}

/* Размеры иконок шапки заданы в global.js — единым правилом на все страницы. */

/* ============================ ЗАГОЛОВОК ============================ */

#ge-tracking .getr-wrap {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: clamp(30px, 6vw, 76px) var(--gt-pad) clamp(60px, 9vw, 110px);
}

#ge-tracking h1 {
  margin: 0 0 14px;
  font: 800 clamp(34px, 7.4vw, 76px) / 0.95 var(--gt-head);
  letter-spacing: -0.018em;
  text-transform: uppercase;
}

#ge-tracking .getr-lead {
  max-width: 48ch;
  margin: 0 0 clamp(24px, 4vw, 40px);
  color: var(--gt-ink-2);
  font-size: clamp(14px, 1.4vw, 16.5px);
  line-height: 1.55;
}

/* ============================ КАРТОЧКА ФОРМЫ ============================ */
/* Раньше карточка была светлой на тёмной странице и выбивалась. Теперь она в той же
   палитре, отделяется рамкой и мягкой тенью, а не сменой цвета. */

#ge-tracking .getr-card {
  padding: clamp(22px, 3.4vw, 36px);
  border: 1px solid var(--gt-line);
  border-radius: 28px;
  color: var(--gt-ink);
  background: var(--gt-surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

#ge-tracking form {
  display: grid;
  gap: 14px;
}

#ge-tracking label {
  display: block;
}

#ge-tracking label span {
  display: block;
  margin-bottom: 7px;
  color: var(--gt-ink-3);
  font: 750 10.5px/1 var(--gt-head);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#ge-tracking input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--gt-line);
  border-radius: 15px;
  outline: 0;
  color: var(--gt-ink);
  background: var(--gt-surface-2);
  font: 600 15.5px/1.3 var(--gt-body);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

#ge-tracking input::placeholder {
  color: rgba(244, 244, 241, 0.28);
}

#ge-tracking input:focus {
  border-color: rgba(244, 244, 241, 0.5);
  background: rgba(244, 244, 241, 0.08);
  box-shadow: 0 0 0 3px rgba(244, 244, 241, 0.07);
}

#ge-tracking button[type="submit"] {
  width: 100%;
  min-height: 54px;
  margin-top: 4px;
  border: 2px solid transparent;
  border-radius: 999px;
  color: #0b0b0b;
  background: var(--gt-ink);
  cursor: pointer;
  font: 750 14px/1 var(--gt-head);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

#ge-tracking button[type="submit"]:hover,
#ge-tracking button[type="submit"]:active {
  color: var(--gt-ink);
  background: #0b0b0b;
  border-color: var(--gt-ink);
}

#ge-tracking button[type="submit"]:disabled {
  opacity: 0.45;
  cursor: wait;
}

#ge-tracking .getr-status {
  min-height: 20px;
  margin-top: 14px;
  color: var(--gt-ink-2);
  font-size: 14px;
  line-height: 1.5;
}

/* ============================ РЕЗУЛЬТАТ ============================ */

#ge-tracking .getr-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

/* Отступ и линейка сверху нужны были, только пока ответ жил ПОД ФОРМОЙ в одной
   карточке и его надо было от неё отделить. Теперь подробности заказа — своя карточка,
   и форма на экране не стоит: линейка осталась висеть над заголовком ни от чего.
   Оставляем её ровно для того случая, ради которого она и была, — когда ответ идёт
   следом за чем-то ещё. */
#ge-tracking .getr-result-head:not(:first-child) {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--gt-line);
}

#ge-tracking .getr-result-head h2 {
  margin: 0;
  font: 800 clamp(19px, 2.4vw, 26px) / 1.05 var(--gt-head);
  text-transform: uppercase;
}

#ge-tracking .getr-meta {
  margin-top: 7px;
  color: var(--gt-ink-3);
  font-size: 13px;
}

#ge-tracking .getr-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  color: #0b0b0b;
  background: var(--gt-ink);
  font: 750 11.5px/1 var(--gt-head);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- Состав заказа ---- */

#ge-tracking .getr-items {
  margin-top: 22px;
  border-top: 1px solid var(--gt-line);
}

#ge-tracking .getr-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--gt-line);
  font-size: 14.5px;
}

#ge-tracking .getr-item-pic {
  grid-template-columns: 64px 1fr auto;
  align-items: center;
}

#ge-tracking .getr-item-img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(244, 244, 241, 0.06);
}

#ge-tracking .getr-item small {
  display: block;
  margin-top: 4px;
  color: var(--gt-ink-3);
}

/* ============================ ТАЙМЛАЙН СТАТУСОВ ============================ */
/* Механику не трогаем: те же .getr-step с is-done / is-current и тот же набор элементов.
   Переделано ОФОРМЛЕНИЕ:
   1) Панель СВЕТЛАЯ — на тёмной карточке она читается как отдельный, главный элемент,
      а пройденные шаги можно показать честной тёмной заливкой.
   2) Бегущие точки убраны: они шли на высоте иконок и налезали прямо на них. Вместо
      них — соединительная линия между шагами; пройденная часть закрашена, а движение
      осталось только на текущем отрезке, мягким бликом. */

#ge-tracking .getr-timeline {
  display: flex;
  align-items: flex-start;
  margin-top: 22px;
  padding: 26px 10px 20px;
  border: 0;
  border-radius: 22px;
  background: #f4f4f1;
  color: #0b0b0b;
}

#ge-tracking .getr-step {
  position: relative;
  flex: 1 1 0;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: rgba(10, 10, 11, 0.34);
}

/* Кружок-значок: непройденный — светлый, пройденный и текущий — тёмный. */
#ge-tracking .getr-step-dot {
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(10, 10, 11, 0.32);
  background: rgba(10, 10, 11, 0.07);
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#ge-tracking .getr-step-dot svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
  stroke: none;
}

#ge-tracking .getr-step.is-done,
#ge-tracking .getr-step.is-current {
  color: #0b0b0b;
}

/* Пройденный шаг — полупрозрачный, а не сплошной чёрный. Чёрные кружки читались как
   главное на странице, хотя пройденное — это уже история; важно то, где заказ сейчас.
   Прозрачность даёт три ступени яркости вместо двух: будущее (еле видно), пройденное
   (различимо) и текущее (сплошное чёрное). */
#ge-tracking .getr-step.is-done .getr-step-dot {
  color: rgba(10, 10, 11, 0.6);
  background: rgba(10, 10, 11, 0.14);
}

/* Текущий шаг — единственный сплошной кружок на всей ленте, с мягким ореолом: сразу
   видно, где заказ. Пройденное вокруг него полупрозрачное, поэтому взгляд идёт сюда. */
#ge-tracking .getr-step.is-current .getr-step-dot {
  color: #f4f4f1;
  background: #0b0b0b;
  box-shadow: 0 0 0 5px rgba(10, 10, 11, 0.12);
}

/* Волна от текущего кружка. Живёт в одном ритме с бликом на линии: та же длительность
   (1.9 s), то же ускорение и без задержки у обоих — оба элемента появляются в одном
   кадре отрисовки, поэтому волна расходится ровно тогда, когда блик уходит по линии.
   Рисуем ЗА кружком (z-index: -1), иначе полупрозрачная заливка легла бы на значок. */
#ge-tracking .getr-step.is-current .getr-step-dot::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5px;
  border-radius: 50%;
  background: rgba(10, 10, 11, 0.18);
  pointer-events: none;
  animation: getrPulse 1.9s ease-in-out infinite;
}

@keyframes getrPulse {
  0% { transform: scale(1); opacity: 0.6 }
  75% { transform: scale(1.6); opacity: 0 }
  100% { transform: scale(1.6); opacity: 0 }
}

#ge-tracking .getr-step-title {
  max-width: 104px;
  margin-top: 12px;
  padding: 0 2px;
  font: 800 11px/1.25 var(--gt-head);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---- Соединительная линия между шагами ---- */
/* Отступ от кружка больше его радиуса с запасом (22 + 8). Кружки стали полупрозрачными,
   и линия, заведённая под них, просвечивала бы прямо сквозь заливку — линия должна
   заканчиваться до края кружка, а не прятаться за ним. */
#ge-tracking .getr-dots {
  position: absolute;
  z-index: 1;
  top: 21px;
  left: calc(50% + 30px);
  width: calc(100% - 60px);
  height: 2px;
  border-radius: 2px;
  background: rgba(10, 10, 11, 0.14);
  overflow: hidden;
  pointer-events: none;
}

/* Точки больше не рисуем — элемент остался ради разметки, содержимое скрыто. */
#ge-tracking .getr-dots span {
  display: none;
}

#ge-tracking .getr-step.is-done .getr-dots {
  background: rgba(10, 10, 11, 0.3);
}

/* Единственное движение — блик, бегущий по отрезку от текущего шага к следующему. */
#ge-tracking .getr-step.is-current .getr-dots::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(10, 10, 11, 0.75), transparent);
  animation: getrFlow 1.9s ease-in-out infinite;
}

@keyframes getrFlow {
  0% { left: -40% }
  100% { left: 100% }
}

@media (prefers-reduced-motion: reduce) {
  #ge-tracking .getr-step.is-current .getr-dots::after {
    animation: none;
    left: 0;
    width: 100%;
    background: rgba(10, 10, 11, 0.4);
  }

  #ge-tracking .getr-step.is-current .getr-step-dot::after {
    animation: none;
    opacity: 0;
  }
}

/* ---- Отменённый заказ ---- */
/* Та же светлая панель, чтобы отменённый заказ не выпадал из общего вида. */

#ge-tracking .getr-cancelled {
  display: block;
  padding: 22px;
  border: 0;
  background: #f4f4f1;
  color: #0b0b0b;
}

#ge-tracking .getr-cancel-block {
  display: flex;
  align-items: center;
  gap: 16px;
}

#ge-tracking .getr-cancel-dot {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #f4f4f1;
  background: #0b0b0b;
}

#ge-tracking .getr-cancel-dot svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#ge-tracking .getr-cancel-title {
  color: #0b0b0b;
  font: 800 20px/1.05 var(--gt-head);
  text-transform: uppercase;
}

#ge-tracking .getr-cancel-text {
  margin-top: 5px;
  color: rgba(10, 10, 11, 0.62);
  font-size: 13px;
  line-height: 1.45;
}

/* ---- Трек-номер и комментарий ---- */

#ge-tracking .getr-trackinfo {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 15px 16px;
  border: 1px solid var(--gt-line);
  border-radius: 16px;
  background: var(--gt-surface-2);
}

#ge-tracking .getr-trackrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

#ge-tracking .getr-trackrow span {
  color: var(--gt-ink-3);
  font: 750 11px/1 var(--gt-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ПУНКТ ВЫДАЧИ — В СТОЛБИК, А НЕ В СТРОКУ. Адрес длинный («Россия, Пермский край,
   г Пермь, ПВЗ Почта России»), и в одной строке с подписью он на телефоне съезжал бы
   в две-три строки, прижатый к правому краю, — читать такое неудобно.
   Подпись сверху, адрес под ней во всю ширину. */
#ge-tracking .getr-pvz {
  display: block;
}

#ge-tracking .getr-pvz span {
  display: block;
  margin-bottom: 5px;
}

#ge-tracking .getr-pvz b {
  display: block;
  font-weight: 700;
  line-height: 1.4;
  /* Длинный адрес должен переноситься по словам, а не распирать карточку. */
  overflow-wrap: anywhere;
}

#ge-tracking .getr-pvz i {
  display: block;
  margin-top: 4px;
  color: var(--gt-ink-3);
  font-size: 12.5px;
  font-style: normal;
}

#ge-tracking .getr-trackrow b {
  font: 800 16px/1 var(--gt-head);
  letter-spacing: 0.04em;
}

#ge-tracking .getr-trackrow a {
  color: var(--gt-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#ge-tracking .getr-trackcomment {
  display: block;
  color: var(--gt-ink-2);
  line-height: 1.5;
}

/* ============================ АДАПТИВ ============================ */

@media (max-width: 650px) {
  #ge-tracking .getr-card {
    border-radius: 24px;
  }

  #ge-tracking .getr-result-head {
    flex-direction: column;
    gap: 12px;
  }

  #ge-tracking .getr-timeline {
    padding: 22px 4px 16px;
  }

  #ge-tracking .getr-step {
    min-width: 54px;
  }

  #ge-tracking .getr-step-dot {
    width: 36px;
    height: 36px;
  }

  #ge-tracking .getr-step-dot svg {
    width: 18px;
    height: 18px;
  }

  #ge-tracking .getr-step.is-current .getr-step-dot {
    box-shadow: 0 0 0 4px rgba(10, 10, 11, 0.12);
  }

  #ge-tracking .getr-step-title {
    margin-top: 9px;
    font-size: 9px;
  }

  /* Линия — по центру кружка и с тем же зазором от его края (18 + 6). */
  #ge-tracking .getr-dots {
    top: 17px;
    left: calc(50% + 24px);
    width: calc(100% - 48px);
  }
}

/* ==========================================================================
   БЕЛАЯ КАРТОЧКА ФОРМЫ (без рамки и без просвечивания)
   ==========================================================================
   Было: тёмная панель #131315 со светлой рамкой по контуру и тяжёлой тенью, а
   поля внутри — полупрозрачные (rgba(244,244,241,.05)). Отсюда обе жалобы:
   «осветлённая рамка вокруг окна» и «окно будто просвечивает, цвет тёмно-синий».
   Полупрозрачная поверхность на тёмном фоне действительно уходит в синеву, а
   рамка-обводка по всему периметру ничего не разделяет — она просто очерчивает.

   Стало: карточка белая, сплошная, без рамки и без тени. Светлая панель таймлайна
   (#f4f4f1) остаётся — на белом она читается как чуть тёплая вставка, ровно тот
   вид, который понравился.

   Всё внутри карточки нарисовано через переменные --gt-*, поэтому достаточно
   переопределить их НА САМОЙ КАРТОЧКЕ — и весь её текст, линейки и поверхности
   переворачиваются заодно. Ниже по одному правилу на каждое место, где цвет был
   задан числом мимо переменных. */

#ge-tracking .getr-card {
  --gt-ink: #0b0b0b;
  --gt-ink-2: rgba(9, 10, 12, 0.66);
  --gt-ink-3: rgba(9, 10, 12, 0.56);
  --gt-line: rgba(9, 10, 12, 0.14);
  --gt-surface: #ffffff;
  --gt-surface-2: #f4f4f1;

  border: 0;
  border-radius: 26px;
  color: #0b0b0b;
  background: #ffffff;
  box-shadow: none;
}

/* Поля: сплошная бумага с тонкой тёмной линейкой вместо просвечивающей заливки. */
#ge-tracking .getr-card input {
  border-color: rgba(9, 10, 12, 0.16);
  background: #f4f4f1;
}

#ge-tracking .getr-card input::placeholder {
  color: rgba(9, 10, 12, 0.38);
}

#ge-tracking .getr-card input:focus {
  border-color: rgba(9, 10, 12, 0.55);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(9, 10, 12, 0.06);
}

/* Кнопка и бейдж статуса ставили цвет числом: на белой карточке вышло бы
   тёмное по тёмному. Задаём фон и цвет ВМЕСТЕ — по одному их менять нельзя. */
#ge-tracking .getr-card button[type="submit"] {
  color: #f4f4f1;
  background: #0b0b0b;
  border-color: #0b0b0b;
}

#ge-tracking .getr-card button[type="submit"]:hover,
#ge-tracking .getr-card button[type="submit"]:active {
  color: #0b0b0b;
  background: #ffffff;
  border-color: #0b0b0b;
}

#ge-tracking .getr-card .getr-badge {
  color: #f4f4f1;
  background: #0b0b0b;
}

/* Непройденные шаги приглушены намеренно — так видно, докуда дошёл заказ. Но .34
   на бумаге давало 2.25 при норме 4.5: подпись читалась с трудом. Приглушение
   оставляем, плотность поднимаем — разница с пройденными шагами всё равно явная. */
#ge-tracking .getr-step {
  color: rgba(10, 10, 11, 0.62);
}

#ge-tracking .getr-card .getr-trackrow span {
  color: rgba(9, 10, 12, 0.66);
}

/* ===== ПУТЬ ПОСЫЛКИ =====
   Лента событий, которые пишет магазин: «на границе», «прошёл таможню», «в Москве».
   Точки заливные, как в почтовом отслеживании. Страница тёмная, поэтому «чёрная
   точка на белом» здесь читается наоборот: светлый кружок с тёмной сердцевиной —
   на этом фоне это та же самая фигура, только не сливается с фоном. */
#ge-tracking .getr-journey {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--gt-line);
}
#ge-tracking .getr-journey-title {
  margin-bottom: 16px;
  font: 800 11px/1 var(--gt-head);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gt-ink-3);
}
#ge-tracking .getr-journey-step {
  position: relative;
  padding: 0 0 22px 30px;
  opacity: 0;
  transform: translateY(6px);
  animation: getr-journey-in 0.42s cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}
/* Линия между точками. У последней записи её нет — дорога на ней и заканчивается. */
/* Линия между точками. Была градиентом, уходящим в rgba(244,244,241,.04) — почти
   белый. На тёмной странице это «растворение в фоне», а карточка результата белая:
   там цепочка рвалась на отдельные точки и переставала быть цепочкой. Красим одним
   цветом линейки — он и так свой у каждой из двух поверхностей. */
#ge-tracking .getr-journey-step::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 15px;
  bottom: -4px;
  width: 2px;
  border-radius: 2px;
  background: var(--gt-line);
}
#ge-tracking .getr-journey-step:last-child::before { display: none; }
/* Пройденные отметки — полые кружки в цвет линии: дорога позади, смотреть там уже
   не на что. Текущая отметка ниже заливается лаймом. */
#ge-tracking .getr-journey-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gt-surface);
  box-shadow: inset 0 0 0 2.5px var(--gt-line);
}
/* Свежее событие — живое: точка заливная и мягко пульсирует, чтобы взгляд цеплялся
   именно за «где посылка сейчас». Волну красим currentColor, а не фиксированным
   цветом: карточка результата светлая, а сама страница тёмная — с жёстким цветом
   волна была бы видна ровно в одном из двух мест. */
/* ГДЕ ПОСЫЛКА СЕЙЧАС. Единственная залитая точка в цепочке — взгляд попадает сразу на
   неё, а не пересчитывает отметки сверху вниз. Цвет берём у самой карточки
   (currentColor), а не жёстким числом: карточка результата светлая, страница тёмная, и
   точка обязана быть видна в обоих местах. Жёлтого в магазине больше нет. */
#ge-tracking .getr-journey-step.is-last .getr-journey-dot {
  background: currentColor;
  box-shadow: inset 0 0 0 2.5px var(--gt-surface), 0 0 0 4px rgba(127, 127, 127, 0.22);
}
#ge-tracking .getr-journey-step.is-last .getr-journey-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: getr-journey-pulse 2.1s ease-out infinite;
}
#ge-tracking .getr-journey-step.is-last .getr-journey-name {
  color: var(--gt-ink);
  font-size: 16px;
}
#ge-tracking .getr-journey-name {
  font: 700 14.5px/1.35 var(--gt-body);
  color: var(--gt-ink-2);
}
/* Место под названием: «Китай», «Москва, лог. центр», «СЦ». Мельче и тоньше самого
   события — это уточнение, а не отдельная новость, и оно не должно спорить с ним. */
#ge-tracking .getr-journey-note {
  margin-top: 2px;
  font: 400 12px/1.4 var(--gt-body);
  letter-spacing: 0.01em;
  color: var(--gt-ink-3);
}
#ge-tracking .getr-journey-when {
  margin-top: 4px;
  font: 600 11.5px/1.3 var(--gt-body);
  letter-spacing: 0.02em;
  color: var(--gt-ink-3);
}
@keyframes getr-journey-in { to { opacity: 1; transform: none; } }
@keyframes getr-journey-pulse {
  0% { opacity: 0.35; transform: scale(1); }
  70% { opacity: 0; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
  #ge-tracking .getr-journey-step { animation: none; opacity: 1; transform: none; }
  #ge-tracking .getr-journey-step.is-last .getr-journey-dot::after { animation: none; opacity: 0; }
}

/* ==========================================================================
   СВОИ ЗАКАЗЫ, ШТРИХ-КОД ВЫДАЧИ И ОКНО С КРУПНЫМ КОДОМ
   ==========================================================================
   Владелец: «сделай, чтобы пользователь если вошел в аккаунт, то чтобы у него на
   страницу отследить заказ сразу появлялся список заказов его такое по белым карточкам
   на всю ширину, где фото, сумма номер заказа и тд».
   Карточки белые на чёрном поле — тот же приём, что и в каталоге: человек уже знает
   этот язык, и список читается как продолжение магазина, а не как чужой экран. */

#ge-tracking .getr-mine {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

#ge-tracking .getr-mine-list {
  display: grid;
  gap: 12px;
  transition: opacity 0.18s ease;
}

#ge-tracking .getr-mine-list.is-busy {
  opacity: 0.5;
  pointer-events: none;
}

/* ---- Карточка заказа ---- */

#ge-tracking .getr-ocard {
  /* Одно число на всю карточку: и колонка сетки, и сам снимок берут его отсюда.
     Держать эти два размера порознь — верный способ однажды развести их. */
  --getr-фото: clamp(52px, 12vw, 62px);
  display: grid;
  /* Фото — колонка фиксированной ширины, текст забирает остальное, значок и стрелка
     прижаты вправо. minmax(0,1fr) обязателен: без него длинное название товара
     распирает сетку и на телефоне появляется горизонтальная прокрутка. */
  /* КОЛОНКА ФОТО — ФИКСИРОВАННОЙ ШИРИНЫ, А НЕ «ПО СОДЕРЖИМОМУ».
     Здесь стояло auto, и ширина зависела от числа снимков: одна фотография давала 58
     точек, три стопкой — почти полтораста. Текст в каждой карточке начинался на своём
     месте, и список читался как рассыпанный — ровно то, на что жаловался владелец.
     Ширина теперь одна на все карточки, сколько бы вещей ни было в заказе. */
  grid-template-columns: var(--getr-фото) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(12px, 2.4vw, 18px);
  width: 100%;
  padding: clamp(12px, 2.4vw, 16px);
  border: 0;
  border-radius: 22px;
  color: #0b0b0b;
  background: #f4f4f1;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.16s ease, box-shadow 0.18s ease;
}

@media (hover: hover) {
  #ge-tracking .getr-ocard:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
  }
}

#ge-tracking .getr-ocard:active {
  transform: scale(0.992);
}

#ge-tracking .getr-ocard:focus-visible {
  outline: 2px solid var(--gt-ink);
  outline-offset: 3px;
}

/* ОДНА ФОТОГРАФИЯ, А НЕ СТОПКА.
   Стопка из трёх снимков внахлёст задумывалась, чтобы показать: вещей в заказе
   несколько. Показывала она другое — что ширина карточки гуляет. Вторая и третья
   фотографии к тому же наполовину закрыты первой и не читаются: разглядеть по ним
   ничего нельзя, а место и ровность строки они съедают.
   Сколько вещей в заказе, говорит счётчик в углу снимка — коротко и не двигая ничего. */
#ge-tracking .getr-ocard-pics {
  position: relative;
  width: var(--getr-фото);
  height: var(--getr-фото);
  flex: 0 0 auto;
}

#ge-tracking .getr-ocard-pics img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: contain;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.08);
}

/* Вторая и дальше не показываются вовсе: их место занимает счётчик. */
#ge-tracking .getr-ocard-pics img + img {
  display: none;
}

/* Счётчик вещей — кружок в нижнем правом углу снимка. Он ничего не сдвигает: лежит
   поверх, поэтому ширина колонки от него не меняется. */
#ge-tracking .getr-ocard-more {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  color: #f4f4f1;
  background: #0b0b0b;
  box-shadow: 0 0 0 2px #f4f4f1;
  font: 750 11px/1 var(--gt-head);
}

#ge-tracking .getr-ocard-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#ge-tracking .getr-ocard-num {
  font: 800 clamp(15px, 3.4vw, 18px) / 1.1 var(--gt-head);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  /* Номер заказа не переносим по буквам: он должен читаться как одно целое. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ge-tracking .getr-ocard-meta {
  color: rgba(10, 10, 11, 0.55);
  font-size: clamp(12px, 2.8vw, 13.5px);
}

/* ОБЫЧНЫЙ СТАТУС — ТИХИЙ, А НЕ ЧЁРНЫЙ.
   Сплошная чёрная пилюля была самым тяжёлым пятном карточки — тяжелее лаймовой «Готов
   к выдаче», которая единственная требует действия. Выходило наоборот: заказ, с которым
   делать нечего («В пути»), кричал громче того, за которым надо идти.
   Обычный статус теперь очерчен, а не залит. Лайм остаётся один на весь список и сразу
   виден. */
#ge-tracking .getr-ocard-status {
  justify-self: start;
  margin-top: 2px;
  padding: 5px 10px;
  border-radius: 999px;
  color: rgba(10, 10, 11, 0.72);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(10, 10, 11, 0.18);
  font: 750 10.5px/1 var(--gt-head);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* Подпись статуса бывает длинной («Готовится к отправке»). На узком экране она должна
     переноситься внутри пилюли, а не выпирать за карточку. */
  max-width: 100%;
  white-space: normal;
}

/* Три состояния, которые стоит различать взглядом. Остальные — обычные чёрные пилюли:
   раскрашивать каждый шаг значит не выделить ни одного. */
#ge-tracking .getr-ocard-status.is-ready {
  color: #ffffff;
  background: #0b0b0b;
  box-shadow: none;
}

#ge-tracking .getr-ocard-status.is-done {
  color: rgba(10, 10, 11, 0.55);
  background: rgba(10, 10, 11, 0.07);
  box-shadow: none;
}

#ge-tracking .getr-ocard-status.is-bad {
  color: #f4f4f1;
  background: #8a1f1f;
  box-shadow: none;
}

/* ЗНАЧОК КОДА — НЕ ВТОРОЕ ЛАЙМОВОЕ ПЯТНО.
   Он был залит тем же лаймом, что и пилюля «Готов к выдаче», и появлялся у той же
   карточки. Два одинаковых ярких пятна в одной строке спорят за внимание и делят его
   пополам: глаз не понимает, что тут главное.
   Лайм оставляем пилюле — она говорит словами. Значок рядом остаётся тёмным: он про
   то же самое, и повторять цветом уже сказанное незачем. */
#ge-tracking .getr-ocard-bc {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #f4f4f1;
  background: #0b0b0b;
}

#ge-tracking .getr-ocard-bc svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

#ge-tracking .getr-ocard-go {
  display: grid;
  place-items: center;
  width: 26px;
  color: rgba(10, 10, 11, 0.35);
}

#ge-tracking .getr-ocard-go svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* На узком экране значок и стрелка съедают место у текста. Стрелку убираем: карточка и
   так нажимается целиком, а стрелка — украшение. */
@media (max-width: 420px) {
  #ge-tracking .getr-ocard {
    /* Фиксированная колонка фото и здесь: ради ровности она и заводилась, а «auto»
       вернуло бы разнобой ровно там, где он заметнее всего — на телефоне. */
    grid-template-columns: var(--getr-фото) minmax(0, 1fr) auto;
  }
  #ge-tracking .getr-ocard-go {
    display: none;
  }
}

/* ---- Кнопка «другой заказ» и возврат ---- */

/* «ПРОВЕРИТЬ ДРУГОЙ ЗАКАЗ» И «ВСЕ ЗАКАЗЫ» — ЗАПАСНОЙ ХОД, А НЕ ПРИЗЫВ.
   Обе строки были набраны прописными вразрядку и стояли впритык к последней карточке.
   Прописные вразрядку — приём для заголовков: он делает строку заметной, а эта строка
   нужна меньшинству. Человек, вошедший в профиль, свои заказы уже видит; «другой заказ
   по номеру» ему понадобится редко.
   Обычные строчные, ниже вес, и воздух сверху, чтобы строка не липла к списку. */
#ge-tracking .getr-other,
#ge-tracking .getr-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin-top: 6px;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid var(--gt-ink-3);
  color: var(--gt-ink-2);
  background: none;
  cursor: pointer;
  font: 600 13.5px/1.3 var(--gt-body, var(--gt-head));
  letter-spacing: 0;
  text-transform: none;
  transition: color 0.16s ease, border-color 0.16s ease;
}

#ge-tracking .getr-other:hover,
#ge-tracking .getr-back:hover {
  color: var(--gt-ink);
  border-bottom-color: var(--gt-ink);
}

#ge-tracking .getr-back {
  margin-bottom: 16px;
}

#ge-tracking .getr-back svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ШТРИХ-КОД И ЕГО ОКНО ЗДЕСЬ БОЛЬШЕ НЕ ОФОРМЛЯЮТСЯ. Они переехали в barcode-draw.js —
   вместе с разметкой и поведением. Тот же блок нужен в личном кабинете, а компонент,
   который надо доукрашивать снаружи на каждой странице, — это два места вместо одного.
   Цвета там нейтральные (полупрозрачный серый), поэтому плашка одинаково садится и в
   белую карточку отсюда, и в тёмную карточку кабинета. */

/* ==========================================================================
   КАРТА ПУТИ ПОСЫЛКИ
   ==========================================================================
   Владелец: «путь не видно заказа у клиентов на странице отследить заказ».

   Вся геометрия карты была написана и ни разу не вызвана: проекция, укладка в кадр,
   дуга, доля пройденного — пятьдесят строк живого кода, к которым никто не обращался,
   и ни одного правила вида. Сервер маршрут отдаёт, CRM его сохраняет, проверки видят,
   как он доезжает, — а на экране не было ничего.

   Оформление держим в том же языке, что и вся страница: тёмное поле, светлая линия,
   лаймовая точка там, где посылка сейчас. Плиток настоящей карты здесь нет и не будет —
   это чужой сервис, ключ и лишняя точка отказа, а вопрос у человека один: «где она».
   ========================================================================== */

/* ==========================================================================
   КНОПКИ — ОДНА ФОРМА С КАБИНЕТОМ
   ==========================================================================
   Владелец: «сделай углы также скруглёнными, но кнопки квадрат, а не круг… и не делай
   у них контур… и сделай это везде». Страница отслеживания — часть того же магазина,
   и кнопка на ней должна выглядеть так же, как в кабинете: прямоугольник со
   скруглением 16, без рамки, а под курсором — оттенок и лёгкий подъём вместо подмены
   чёрного на белое.
   Метки статуса («Готов к выдаче») это правило не трогает: они не кнопки, и капсула у
   них уместна — так их и отличают от действий.
   ========================================================================== */
#ge-tracking button[type="submit"],
#ge-tracking .getr-submit {
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

@media (hover: hover) {
  #ge-tracking button[type="submit"]:hover,
  #ge-tracking .getr-submit:hover {
    background: #d9dbdf !important;
    transform: translateY(-1px) !important;
  }
}

#ge-tracking button[type="submit"]:active,
#ge-tracking .getr-submit:active {
  transform: translateY(0) scale(0.985) !important;
}