/* ═══════════════════════════════════════════
   💖 NABEELA'S PINK PALACE THEME 💖
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --pink-50:  #fff0f6;
  --pink-100: #ffd6e7;
  --pink-200: #ffb3d1;
  --pink-300: #ff85b8;
  --pink-400: #ff5fa3;
  --pink-500: #ff3d8f;
  --pink-600: #e8006e;
  --pink-700: #c40060;
  --bg-dark:  #1a0d14;
  --bg-card:  #2a1020;
  --bg-panel: #220e18;
  --border:   #6b1a40;
  --text-main:#ffe4f0;
  --text-muted:#c990b0;
}

/* ── Base ── */
body, #root {
  font-family: 'Nunito', sans-serif !important;
  background: var(--bg-dark) !important;
  color: var(--text-main) !important;
}

/* Subtle sparkle background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,61,143,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255,95,163,.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ── Navbar ── */
.navbar, nav.navbar {
  background: linear-gradient(135deg, #2d0a1f 0%, #3d0d2a 50%, #2d0a1f 100%) !important;
  border-bottom: 2px solid var(--pink-500) !important;
  box-shadow: 0 2px 20px rgba(255,61,143,.35) !important;
}

.navbar-brand {
  color: var(--pink-300) !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
  text-shadow: 0 0 15px rgba(255,133,184,.6) !important;
}

.navbar .nav-link, .navbar .navbar-nav .nav-link {
  color: var(--pink-200) !important;
  font-weight: 600 !important;
  transition: color .2s, text-shadow .2s !important;
}

.navbar .nav-link:hover {
  color: var(--pink-400) !important;
  text-shadow: 0 0 8px rgba(255,95,163,.7) !important;
}

/* ── Sidebar / nav pills ── */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background: linear-gradient(135deg, var(--pink-500), var(--pink-600)) !important;
  box-shadow: 0 2px 10px rgba(255,61,143,.5) !important;
  border-radius: 20px !important;
}

/* ── Cards ── */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  transition: transform .2s, box-shadow .2s !important;
}

.card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(255,61,143,.3) !important;
}

.card-header {
  background: linear-gradient(135deg, #3a0d25, #2d0a1f) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 14px 14px 0 0 !important;
}

/* ── Scene / thumbnail cards ── */
.scene-card, .performer-card, .studio-card, .gallery-card, .tag-card {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  transition: transform .2s, box-shadow .2s !important;
}

.scene-card:hover, .performer-card:hover, .studio-card:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 8px 30px rgba(255,61,143,.4) !important;
  border-color: var(--pink-400) !important;
}

.scene-card .card-section, .card-section {
  background: linear-gradient(180deg, transparent 0%, rgba(45,10,31,.95) 100%) !important;
}

/* ── Buttons ── */
.btn-primary {
  background: linear-gradient(135deg, var(--pink-500), var(--pink-600)) !important;
  border: none !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 12px rgba(255,61,143,.4) !important;
  transition: transform .15s, box-shadow .15s !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--pink-400), var(--pink-500)) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 18px rgba(255,61,143,.6) !important;
}

.btn-secondary {
  background: rgba(255,61,143,.15) !important;
  border: 1px solid var(--pink-500) !important;
  color: var(--pink-300) !important;
  border-radius: 25px !important;
  font-weight: 600 !important;
}

.btn-secondary:hover {
  background: rgba(255,61,143,.3) !important;
  color: var(--pink-100) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
  border: none !important;
  border-radius: 25px !important;
}

/* ── Inputs ── */
input, select, textarea, .form-control {
  background: #1f0d18 !important;
  border: 1px solid var(--border) !important;
  color: var(--text-main) !important;
  border-radius: 10px !important;
}

input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--pink-400) !important;
  box-shadow: 0 0 0 3px rgba(255,61,143,.2) !important;
  outline: none !important;
}

/* ── Tables ── */
table, .table {
  background: var(--bg-card) !important;
}

.table th {
  background: #3a0d25 !important;
  color: var(--pink-300) !important;
  border-color: var(--border) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: .8rem !important;
  letter-spacing: .05em !important;
}

.table td {
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}

.table-hover tbody tr:hover td {
  background: rgba(255,61,143,.08) !important;
}

/* ── Badges / Tags ── */
.badge {
  border-radius: 20px !important;
  font-weight: 700 !important;
  font-size: .75rem !important;
}

.badge-secondary, .tag-item {
  background: rgba(255,61,143,.2) !important;
  color: var(--pink-200) !important;
  border: 1px solid rgba(255,61,143,.4) !important;
}

.tag-item:hover {
  background: rgba(255,61,143,.4) !important;
  color: var(--pink-100) !important;
}

/* ── Rating stars ── */
.star-rating .filled, .rating-star.filled {
  color: var(--pink-400) !important;
  text-shadow: 0 0 6px rgba(255,95,163,.8) !important;
}

/* ── Progress bars ── */
.progress-bar {
  background: linear-gradient(90deg, var(--pink-500), var(--pink-300)) !important;
}

.progress {
  background: rgba(255,61,143,.15) !important;
  border-radius: 10px !important;
}

/* ── Modals ── */
.modal-content {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
}

.modal-header {
  background: linear-gradient(135deg, #3a0d25, #2d0a1f) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 18px 18px 0 0 !important;
}

.modal-title {
  color: var(--pink-300) !important;
  font-weight: 800 !important;
}

/* ── Dropdown menus ── */
.dropdown-menu {
  background: #2d0a1f !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 25px rgba(0,0,0,.5) !important;
}

.dropdown-item {
  color: var(--text-main) !important;
  border-radius: 8px !important;
  margin: 2px 4px !important;
}

.dropdown-item:hover {
  background: rgba(255,61,143,.2) !important;
  color: var(--pink-200) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1a0d14; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--pink-500), var(--pink-700));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--pink-400); }

/* ── Performer card ── */
.performer-card .card-img-top {
  filter: saturate(1.1) !important;
}

/* ── Page titles ── */
h1, h2, h3, h4 {
  color: var(--pink-200) !important;
  font-weight: 800 !important;
}

h1 { text-shadow: 0 0 20px rgba(255,133,184,.3) !important; }

/* ── Links ── */
a { color: var(--pink-300) !important; }
a:hover { color: var(--pink-400) !important; text-decoration: none !important; }

/* ── Tabs ── */
.nav-tabs { border-bottom: 2px solid var(--border) !important; }

.nav-tabs .nav-link {
  color: var(--text-muted) !important;
  border-radius: 10px 10px 0 0 !important;
  font-weight: 600 !important;
}

.nav-tabs .nav-link.active {
  background: var(--bg-card) !important;
  color: var(--pink-300) !important;
  border-color: var(--border) var(--border) transparent !important;
}

/* ── Alert boxes ── */
.alert-success { background: rgba(255,61,143,.15) !important; border-color: var(--pink-500) !important; color: var(--pink-200) !important; }
.alert-info { background: rgba(255,133,184,.1) !important; border-color: var(--pink-300) !important; color: var(--pink-100) !important; }

/* ── Footer / bottom bar ── */
.footer, footer {
  background: #1a0d14 !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}

/* ── Loading spinner ── */
.loading-spinner, .spinner-border {
  color: var(--pink-400) !important;
}

/* ── Checkbox / toggle ── */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--pink-500) !important;
  border-color: var(--pink-500) !important;
}

/* ── Filter sidebar ── */
.filter-container, .query-parameters {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

/* ── Video player ── */
.video-js .vjs-control-bar {
  background: linear-gradient(0deg, rgba(45,10,31,.95), transparent) !important;
}

.video-js .vjs-play-progress, .video-js .vjs-volume-level {
  background: var(--pink-400) !important;
}