/* Tab bar */

.tab {
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tab:hover {
  color: #374151;
}

.tab.tab-active {
  background: white;
  color: #111827;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Memberships home */

.membership-card {
  background: white;
  border: 1.5px solid #e8e0d8;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.membership-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
}

.add-platform-card {
  border: 1.5px dashed #7a5030;
  border-radius: 16px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.add-platform-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}

.add-platform-card a {
  color: #7a5030;
}

.add-platform-card a:hover {
  opacity: 0.7;
}

/* Feeling slider */

@keyframes label-dismiss {
  0%   { opacity: 1;   transform: translate(-50%, 0px)   scale(1);    }
  18%  { opacity: 1;   transform: translate(-50%, -3px)  scale(1.45); }
  100% { opacity: 0;   transform: translate(-50%, -20px) scale(0.9);  }
}

@keyframes spark-fly {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}

@keyframes feeling-saved {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}

.memberships-slider {
  --fill-pct: 50%;
  --fill-color: rgb(251, 191, 36);
  --glow-color: rgba(251, 191, 36, 0.3);
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(
    to right,
    var(--fill-color) var(--fill-pct),
    #e8e0d8 var(--fill-pct)
  );
  outline: none;
  cursor: pointer;
  display: block;
}

.memberships-slider.feeling-saved {
  animation: feeling-saved 0.45s ease-out;
}

.memberships-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  border: 2px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  cursor: grab;
  transition: box-shadow 0.2s ease;
}

.memberships-slider:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px var(--glow-color), 0 1px 4px rgba(0, 0, 0, 0.12);
}

.memberships-slider:active::-webkit-slider-thumb {
  cursor: grabbing;
}

.memberships-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  border: 2px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  cursor: grab;
  transition: box-shadow 0.2s ease;
}

.memberships-slider:hover::-moz-range-thumb {
  box-shadow: 0 0 0 6px var(--glow-color), 0 1px 4px rgba(0, 0, 0, 0.12);
}