/* ================= ПРОМЕЖУТОЧНАЯ ОТМЕТКА (заглушка) =================
   Демо-версия без реальной интеграции: появляется сама через N секунд после
   входа на смену (как будто "сработала рандомно"), геолокация - имитация,
   см. app/checkin.js. Когда появится бэкенд/домен - заменить таймер-триггер
   на настоящее событие с сервера. */

.checkin-banner {
  position: relative;
  overflow: hidden;
  background: var(--color-orange);
  border-radius: 20px;
  margin: 0 0 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.checkin-banner--visible {
  opacity: 1;
  transform: translateY(0);
}

/* "Уходит в глубь" - тот же приём, что и у карточек заказов. */
.checkin-banner--gone {
  opacity: 0;
  transform: scale(0.85);
}

.checkin-banner__main,
.checkin-banner__geo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Та же специфичность у [hidden] и .checkin-banner__main{display:flex} -
   без явного override переключение шагов (main <-> geo) не срабатывает. */
.checkin-banner__main[hidden],
.checkin-banner__geo[hidden] {
  display: none;
}

/* ---- Кольцо-таймер ---- */

.checkin-ring {
  position: relative;
  width: 60px;
  height: 60px;
}

.checkin-ring svg {
  width: 100%;
  height: 100%;
}

.checkin-ring__track {
  stroke: rgba(0, 0, 0, 0.15);
  stroke-width: 5;
}

.checkin-ring__circle {
  stroke: #34C759;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 163;
  stroke-dashoffset: 0;
  /* rotate ставит начало кольца на 12 часов, scaleX зеркалит направление
     "стирания" дуги на противоположное - вместе дают именно убывание
     против часовой стрелки (без zеркала получилось бы по часовой). */
  transform: rotate(-90deg) scaleX(-1);
  transform-origin: 50% 50%;
}

/* Один плавный переход через 4 цветовых стопа вместо резкой смены цвета;
   длительность подставляется из JS (app/checkin.js), чтобы всегда совпадать
   с реальным временем на отметку. */
@keyframes checkin-ring-progress {
  0%   { stroke-dashoffset: 0; stroke: #34C759; }
  33%  { stroke: #FFC107; }
  66%  { stroke: #FF9800; }
  100% { stroke-dashoffset: 163; stroke: #E53935; }
}

.checkin-ring__time {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--color-black);
}

/* ---- Текст с предупреждением ---- */

.checkin-banner__text {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-black);
  margin: 0;
}

/* Картинка (SVG), а не эмодзи-глиф - одинаково выглядит на всех платформах
   и идёт прямо в потоке текста: при переносе строки на узком экране остаётся
   рядом со своей половиной текста, а не "отрывается" отдельным блоком. */
.checkin-icon {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  margin: 0 4px;
  color: var(--color-black);
  animation: checkin-buzz 3s ease-in-out infinite;
}

/* "Бзз - пауза - бзз - пауза - бзз" - три коротких дребезга с паузами между
   ними, как вибрация телефона, дальше цикл повторяется, пока баннер виден. */
@keyframes checkin-buzz {
  0%, 10%, 30%, 40%, 60%, 70%, 100% { transform: rotate(0deg); }
  2%  { transform: rotate(-10deg); }
  4%  { transform: rotate(10deg); }
  6%  { transform: rotate(-8deg); }
  8%  { transform: rotate(8deg); }
  32% { transform: rotate(-10deg); }
  34% { transform: rotate(10deg); }
  36% { transform: rotate(-8deg); }
  38% { transform: rotate(8deg); }
  62% { transform: rotate(-10deg); }
  64% { transform: rotate(10deg); }
  66% { transform: rotate(-8deg); }
  68% { transform: rotate(8deg); }
}

/* ---- Кнопка ---- */

.checkin-banner__btn {
  width: 100%;
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  border-radius: 14px;
  padding: 13px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease;
}

.checkin-banner__btn:active {
  transform: translateY(2px);
}