/* ============================================================
   AGAT‑UI TOUCHBAR — фирменная цветовая схема
============================================================ */

.agat-touchbar-wrapper {
  width: 100%;
  padding: clamp(0.4rem, 1vw, 0.8rem) 0;
  display: flex;
  justify-content: center;
}

/* Основной контейнер */
.agat-touchbar {
  display: flex;
  flex-wrap: wrap; /* два ряда */
  justify-content: center;
  gap: clamp(0.6rem, 1.4vw, 1.2rem);
  padding: clamp(0.6rem, 1.4vw, 1.2rem);

  background: rgba(255,255,255,0.55); /* фирменная поверхность */
  border-radius: clamp(0.6rem, 1.4vw, 1rem);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.10),
    0 4px 18px rgba(13,70,120,0.25); /* синий фирменный */
}

/* Элемент */
.agat-touch-item {
  padding: clamp(0.45rem, 1.2vw, 0.75rem) clamp(0.9rem, 2vw, 1.4rem);

  background: rgba(255,255,255,0.75);
  color: #1E1E1E;

  border-radius: clamp(0.45rem, 1.2vw, 0.75rem);
  border: 1px solid rgba(13,70,120,0.18); /* синий бордер */

  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  white-space: nowrap;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all .25s ease;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow:
    0 0 8px rgba(255,255,255,0.18),
    inset 0 0 8px rgba(0,0,0,0.18);
}

/* Hover — медный акцент */
.agat-touch-item:hover {
  background: #C45A1A; /* медь */
  color: #fff;
  border-color: #C45A1A;
  box-shadow: 0 0 14px rgba(196,90,26,0.55);
}

/* Active — фирменный медный */
.agat-touch-item.active {
  background: #C45A1A;
  color: #fff;
  border-color: #C45A1A;

  box-shadow:
    0 0 18px rgba(196,90,26,0.75),
    inset 0 0 10px rgba(255,255,255,0.25);
}