@keyframes donation-heartbeat{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.22)}
  28%{transform:scale(1)}
  42%{transform:scale(1.14)}
  56%{transform:scale(1)}
}
@keyframes donation-heartglow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,111,89,.55))}
  14%{filter:drop-shadow(0 0 9px rgba(255,111,89,.5))}
  28%{filter:drop-shadow(0 0 0 rgba(255,111,89,.55))}
}

.donation-fab{
  position:fixed;
  right:16px;
  bottom:calc(var(--nav-h) + 12px);
  width:58px;height:58px;
  background:transparent;
  border:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  z-index:650
}
.donation-fab svg{
  animation:donation-heartbeat 2.2s ease-in-out infinite,donation-heartglow 2.2s ease-in-out infinite;
  transform-origin:center
}
.donation-fab--hidden{display:none}

/*
  En móvil, mientras el panel está abierto, esta capa invisible
  atrapa cualquier toque fuera del panel: no pasa nada (ni se cierra
  el panel, ni se activa lo que esté debajo). Solo la X cierra. En
  escritorio no existe (display:none fuera de este @media): ahí
  tocar afuera sí llega al contenido y cierra el panel.
*/
.donation-backdrop{display:none}
@media(max-width:1023.98px){
  .donation-backdrop.donation-backdrop--open{
    display:block;
    position:fixed;
    inset:0;
    z-index:649
  }
}

.donation-panel{
  position:fixed;
  right:16px;
  bottom:calc(var(--nav-h) + 12px);
  width:min(300px,calc(100vw - 32px));
  max-height:calc(100dvh - var(--nav-h) - 32px);
  overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 16px 36px rgba(20,55,51,.18);
  padding:14px;
  display:none;
  z-index:650
}
.donation-panel--open{display:block}

.donation-step{display:none}
.donation-step--active{display:block}

.donation-panel-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:8px
}
.donation-panel-top h3{margin:0;font-size:.95rem;color:var(--primary-dark)}
.donation-x{
  border:0;background:transparent;color:var(--muted);
  font-size:1.1rem;cursor:pointer;line-height:1;padding:2px
}
.donation-panel p{margin:0 0 12px;font-size:.74rem;color:var(--text);line-height:1.5}

.donation-primary{
  width:100%;border:0;background:var(--primary);color:#fff;
  padding:11px;border-radius:12px;font-size:.8rem;font-weight:700;cursor:pointer
}
.donation-primary:disabled{opacity:.6;cursor:default}

.donation-back{
  border:0;background:transparent;color:var(--muted);
  font-size:.72rem;cursor:pointer;padding:0;margin-bottom:6px
}

.donation-amounts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:10px
}
.donation-amt{
  border:1px solid var(--border);background:var(--surface-2);
  border-radius:10px;padding:9px 0;font-size:.78rem;font-weight:700;
  color:var(--text);cursor:pointer
}
.donation-amt--selected{
  border-color:var(--primary);background:var(--primary-soft);color:var(--primary-dark)
}

.donation-field,
.donation-mp-field{
  width:100%;border:1px solid var(--border);border-radius:10px;
  padding:9px;font-size:.78rem;margin-bottom:9px;box-sizing:border-box;
  font-family:inherit;background:var(--surface-2);color:var(--text)
}
.donation-mp-field{height:42px;padding:0 9px;overflow:visible}
.donation-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}

.donation-brands{display:flex;gap:6px;margin-bottom:9px}
.donation-brands span{
  font-size:.55rem;font-weight:800;padding:3px 7px;border-radius:5px;
  background:var(--surface-3);color:var(--muted)
}

.donation-lock-note{
  display:flex;gap:7px;align-items:center;font-size:.63rem;
  color:var(--muted);margin-bottom:10px
}
.donation-error{
  min-height:14px;margin:0 0 8px;color:#a5483c;font-size:.66rem
}

.sidebar-donate-heart{
  animation:donation-heartbeat 2.2s ease-in-out infinite,donation-heartglow 2.2s ease-in-out infinite;
  transform-origin:center
}

@media(min-width:1024px){
  html.is-desktop .donation-fab{
    display:none
  }

  html.is-desktop .donation-panel{
    right:auto;
    bottom:auto;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(340px,calc(100vw - 48px));
    max-height:calc(100dvh - 48px);
  }
}