/* =========================================================
   Контейнер за бутоните
   ========================================================= */
.cbg-toggles {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

/* =========================================================
   Базов стил на бутоните (НЕ ПИПАМЕ ЦВЕТОВЕ)
   ========================================================= */
.cbg-btn {
  cursor: pointer;
  border: 1px solid #7f007f;
  background: #ffffff;
  color: #7f007f;
  padding: .6rem 1rem;
  border-radius: .25rem;
  transition: transform .15s ease, box-shadow .15s ease;
}

.cbg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(127, 0, 127, 0.15);
}

.cbg-btn.active {
  background: #7f007f;
  color: #fff;
}

/* =========================================================
   Контейнерите на формите
   ========================================================= */
.cbg-content {
  will-change: transform;
}

/* =========================================================
   WOBBLE анимация – същата „укротена“ версия
   ========================================================= */
@keyframes cbg-wobble {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-8%) rotate(-2deg); }
  30%  { transform: translateX(6%)  rotate(1.5deg); }
  45%  { transform: translateX(-4%) rotate(-1deg); }
  60%  { transform: translateX(3%)  rotate(0.8deg); }
  75%  { transform: translateX(-1.5%) rotate(-0.5deg); }
  100% { transform: translateX(0); }
}

/* =========================================================
   При отваряне на контейнера (JS добавя класа)
   ========================================================= */
.cbg-wobble {
  animation: cbg-wobble 0.65s ease-in-out both;
}

/* =========================================================
   Еднократно wobble при първоначално зареждане
   ========================================================= */
.cbg-wobble-onload {
  animation: cbg-wobble 0.45s ease-in-out both;
}

/* =========================================================
   Prefers-reduced-motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .cbg-wobble,
  .cbg-wobble-onload {
    animation: none !important;
  }

  .cbg-btn {
    transition: none;
  }
}

/* =========================================================
   Checkout – форсиране на motion (body клас от PHP)
   ========================================================= */
body.cbg-force-motion .cbg-wobble {
  animation: cbg-wobble 0.65s ease-in-out both !important;
}

body.cbg-force-motion .cbg-wobble-onload {
  animation: cbg-wobble 0.45s ease-in-out both !important;
}