/* =====================================================================
   Копилка проекта — стили для бокового блока
   ===================================================================== */

.piggy-sidebar-block {
  padding: 10px 8px !important;
  margin-top: 10px;
  text-align: center;
  position: relative;
  background: linear-gradient(180deg, #f5f9fd 0%, #e6f0f9 100%) !important;
  border: 1px solid #b9cfe5 !important;
  border-radius: 8px;
  overflow: hidden;
}
.piggy-title {
  font-size: 12px; font-weight: bold; color: #2f5680;
  margin-bottom: 4px; letter-spacing: .3px;
}
.piggy-visual { position: relative; height: 88px; display: flex; align-items: center; justify-content: center; }
.piggy-svg { width: 130px; height: 100px; filter: drop-shadow(0 2px 3px rgba(58,95,136,.22)); }

/* Падающая монетка при пополнении */
.piggy-coin {
  position: absolute; top: -2px;
  left: 50%; margin-left: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff4b0 0%, #ffd54f 45%, #f9a825 100%);
  box-shadow: 0 0 4px rgba(249,168,37,.7), inset 0 -2px 0 rgba(120,60,0,.3);
  opacity: 0; pointer-events: none; z-index: 2;
}
.piggy-coin.piggy-fly { animation: piggyDrop .95s cubic-bezier(.55,.06,.68,.19) forwards; }
@keyframes piggyDrop {
  0%   { transform: translateY(-8px)  rotate(0deg);   opacity: 0; }
  15%  { opacity: 1; }
  70%  { transform: translateY(34px)  rotate(360deg); opacity: 1; }
  100% { transform: translateY(42px)  rotate(540deg); opacity: 0; }
}

/* «Взрыв» с суммой кэшбэка */
.piggy-burst {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.4);
  background: linear-gradient(135deg, #fff176 0%, #ffb300 100%);
  color: #5a2b00;
  font-weight: bold; font-size: 14px;
  padding: 5px 10px; border-radius: 14px;
  box-shadow: 0 3px 8px rgba(255,160,0,.45), 0 0 0 2px #fff;
  white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 3;
  display: flex; align-items: center; gap: 4px;
}
.piggy-burst-emoji { font-size: 14px; }
.piggy-burst.piggy-burst-show { animation: piggyBurst 7s ease-out forwards; }
@keyframes piggyBurst {
  0%   { transform: translate(-50%, 30%)  scale(.3);    opacity: 0; }
  10%  { transform: translate(-50%, -50%) scale(1.15);  opacity: 1; }
  20%  { transform: translate(-50%, -50%) scale(1);     opacity: 1; }
  85%  { transform: translate(-50%, -50%) scale(1);     opacity: 1; }
  100% { transform: translate(-50%, -90%) scale(.85);   opacity: 0; }
}

/* Плашка с накопленным бонусом за день */
.piggy-bonus-line {
  font-size: 11px; color: #4e342e;
  background: linear-gradient(180deg, #fff8e1, #ffe082);
  border: 1px solid #ffca28; border-radius: 4px;
  padding: 3px 5px; margin: 0 0 6px;
  line-height: 1.25;
}
.piggy-bonus-line b { color: #b45309; }
.piggy-bonus-ico { margin-right: 2px; }
.piggy-bonus-line.piggy-bonus-pop { animation: piggyBonusPop .7s ease-out; }
@keyframes piggyBonusPop {
  0%   { transform: scale(.85);  box-shadow: 0 0 0 0 rgba(255,193,7,.7); }
  60%  { transform: scale(1.06); box-shadow: 0 0 10px 3px rgba(255,193,7,.55); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,193,7,0); }
}

/* Бегущая строка с последними пожертвованиями */
.piggy-marquee {
  position: relative;
  overflow: hidden;
  margin: 0 0 8px;
  padding: 3px 0;
  border-top: 1px dashed #b9cfe5;
  border-bottom: 1px dashed #b9cfe5;
  font-size: 11px;
  color: #2f4d6e;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
}
.piggy-marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: piggyMarquee 28s linear infinite;
  will-change: transform;
}
.piggy-marquee:hover .piggy-marquee-track { animation-play-state: paused; }
.piggy-mq-item { display: inline-block; padding: 0 2px; }
.piggy-mq-user { color: #2f5680; font-weight: bold; }
.piggy-mq-item b { color: #21384f; }
.piggy-mq-sep { display: inline-block; padding: 0 8px; color: #a9c5e0; }
@keyframes piggyMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Свечение блока при удачном кэшбэке */
.piggy-sidebar-block.piggy-glow { animation: piggyGlow 2.4s ease-in-out; }
@keyframes piggyGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,0); }
  20%, 60% { box-shadow: 0 0 14px 4px rgba(255,193,7,.65); }
}

/* Текстовые элементы */
.piggy-total-line { font-size: 12px; color: #2f4d6e; margin: 2px 0 6px; }
.piggy-total-line b { color: #2f5680; }
.piggy-hint {
  font-size: 10.5px; color: #5a738f; line-height: 1.3;
  margin: 0 0 8px; padding: 0 2px;
}

/* Ввод суммы */
.piggy-row {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-bottom: 5px;
}
.piggy-row input {
  width: 90px; height: 26px; padding: 0 6px;
  border: 1px solid #a9c5e0; border-radius: 4px;
  background: #fff; font-size: 13px; text-align: right;
  outline: none;
}
.piggy-row input:focus { border-color: #2f5680; }
.piggy-cur { font-size: 13px; color: #2f5680; font-weight: bold; }

/* Быстрые суммы */
.piggy-quick { display: flex; justify-content: center; gap: 3px; margin-bottom: 6px; flex-wrap: wrap; }
.piggy-qbtn {
  flex: 1 1 auto; min-width: 30px;
  border: 1px solid #a9c5e0; background: #fff; color: #2f5680;
  border-radius: 4px; padding: 2px 0; font-size: 11px; cursor: pointer;
  transition: background .15s;
}
.piggy-qbtn:hover { background: #e8f1f9; }

/* Выбор счёта */
.piggy-src {
  font-size: 10.5px; color: #2f4d6e; margin-bottom: 6px;
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.piggy-src label { cursor: pointer; user-select: none; }
.piggy-src input[type=radio] { vertical-align: middle; margin: 0 2px 0 0; accent-color: #2f5680; }

/* Кнопка пожертвования */
.piggy-donate-btn {
  width: 100%; height: 30px; border: 0; border-radius: 5px;
  background: linear-gradient(180deg, #7aa0c8, #2f5680);
  color: #fff; font-size: 12px; font-weight: bold; cursor: pointer;
  letter-spacing: .3px;
  box-shadow: 0 2px 4px rgba(58,95,136,.32);
  transition: filter .15s, transform .05s;
}
.piggy-donate-btn:hover { filter: brightness(1.07); }
.piggy-donate-btn:active { transform: translateY(1px); }
.piggy-donate-btn.piggy-loading { opacity: .7; cursor: wait; }
.piggy-donate-btn[disabled] { cursor: wait; }