/* ============================================
   🎨 Soft Blossom - Custom Styles
   ============================================ */

/* ---- Banner Cards ---- */
.banner-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.banner-card:hover {
  transform: translateY(-3px);
}

/* ---- Genre Tabs (Admin) ---- */
.genre-tab {
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #8C8C8C;
  background: white;
  border: 1px solid rgba(232, 160, 160, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}
.genre-tab:hover {
  background: #FFF0ED;
  color: #3D3D3D;
}
.genre-tab.active {
  background: #D4727A;
  color: white;
  border-color: #D4727A;
}

/* ---- Star Rating ---- */
.star-rating .star {
  transition: color 0.15s ease, transform 0.15s ease;
  user-select: none;
}
.star-rating .star:hover {
  transform: scale(1.2);
}
.star-rating .star.active {
  color: #E87A7A !important;
}

/* ---- Table Zebra Stripe ---- */
table tbody tr:nth-child(even) {
  background-color: #FFF8F6;
}
table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}
table tbody tr {
  transition: background-color 0.15s ease;
}
table tbody tr:hover {
  background-color: #FFF0ED !important;
}

/* ---- Stars Display (Public) ---- */
.star-display {
  letter-spacing: 2px;
  font-size: 0.875rem;
}
.star-on {
  color: #E87A7A;
}
.star-off {
  color: #E0D6D6;
}

/* ---- Loading Spinner ---- */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 0.8s linear infinite;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #FFF8F6;
}
::-webkit-scrollbar-thumb {
  background: #E0D6D6;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #E8A0A0;
}

/* ---- Action Buttons (Admin Table) ---- */
.btn-edit {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  color: #D4727A;
  background: white;
  border: 1px solid rgba(212, 114, 122, 0.3);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-edit:hover {
  background: #FFF0ED;
}
.btn-delete {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  color: #8C8C8C;
  background: white;
  border: 1px solid rgba(140, 140, 140, 0.3);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-delete:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

/* ---- Toast Notification ---- */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
  background: #D4727A;
  box-shadow: 0 4px 12px rgba(212, 114, 122, 0.3);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 9999;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  table th, table td {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.8125rem;
  }
}