/* P2P utilities — uses theme tokens from theme.css / default.css */

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20%);
  }
}

.animate-bounce {
  animation: bounce 0.6s infinite;
}

.delay-150 {
  animation-delay: 150ms;
}

.delay-300 {
  animation-delay: 300ms;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--rarebl-surface, #f1f1f1);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--rarebl-brand, #a2162d);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--rarebl-brand-hover, #821022);
}

.modal-backdrop {
  backdrop-filter: blur(4px);
}

@media (max-width: 640px) {
  .form-input-mobile {
    font-size: 16px;
  }

  .modal-content-mobile {
    margin: 1rem;
    border-radius: 4px;
  }
}

.modal-enter {
  opacity: 0;
  transform: scale(0.95);
}

.modal-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}

@keyframes slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

.p2p-filter-header {
  position: relative;
  z-index: 30;
}

.p2p-quick-filters {
  position: relative;
  z-index: 0;
}

/* Range slider — ads create form (fill on wrapper, not on input) */
.p2p-range-wrap {
  --range-fill: 0%;
  height: 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(
    to right,
    var(--p2p-brand, var(--rarebl-brand)) 0%,
    var(--p2p-brand, var(--rarebl-brand)) var(--range-fill),
    #e5e7eb var(--range-fill),
    #e5e7eb 100%
  );
}

.p2p-range-wrap .p2p-range-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.5rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  accent-color: var(--p2p-brand, var(--rarebl-brand));
}

.p2p-range-wrap .p2p-range-input::-webkit-slider-runnable-track {
  height: 0.5rem;
  background: transparent;
}

.p2p-range-wrap .p2p-range-input::-moz-range-track {
  height: 0.5rem;
  background: transparent;
}

.p2p-range-wrap .p2p-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--p2p-brand, var(--rarebl-brand));
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.p2p-range-wrap .p2p-range-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--p2p-brand, var(--rarebl-brand));
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.p2p-range-wrap .p2p-range-input::-webkit-slider-thumb:hover {
  filter: brightness(0.85);
  transform: scale(1.1);
}

.p2p-range-wrap .p2p-range-input::-moz-range-thumb:hover {
  filter: brightness(0.85);
  transform: scale(1.1);
}

/* Legacy alias */
.p2p-range-input {
  accent-color: var(--p2p-brand, var(--rarebl-brand));
}

.p2p-range-input::-webkit-slider-thumb {
  background: var(--p2p-brand, var(--rarebl-brand));
}

.p2p-range-input::-moz-range-thumb {
  background: var(--p2p-brand, var(--rarebl-brand));
}