/* =====================================================
   Pine Meadow Mafia — Wizarr Theme v3
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Serif+Display:ital@0;1&display=swap');

/* ── Variables ── */
:root {
  --color-primary:       #c8a96e;
  --color-primary_hover: #d4b87a;
  --pmm-bg:      #0d0f14;
  --pmm-surface: #1a1d27;
  --pmm-card:    #252836;
  --pmm-card-h:  #2e3145;
  --pmm-text:    #f0ede6;
  --pmm-muted:   #b8b6b0;
  --pmm-faint:   #7a7878;
  --pmm-border:  rgba(255,255,255,0.10);
  --pmm-accent:  #c8a96e;
  --pmm-success: #4caf85;
  --pmm-danger:  #e05c5c;
}

/* ── Typography ── */
html, body {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'DM Serif Display', serif !important;
  font-weight: 400 !important;
}

/* ── Page backgrounds ── */
body,
.bg-gray-50,
.dark\:bg-gray-900,
.dark .bg-gray-900,
.min-h-screen,
.min-h-screen.overflow-x-hidden,
.wizard-container {
  background-color: var(--pmm-bg) !important;
}

/* ── Cards / surfaces ── */
.bg-white,
.dark\:bg-gray-800,
.dark .bg-gray-800,
.dark\:bg-gray-800\/40,
.rounded-xl,
.rounded-2xl {
  background-color: var(--pmm-card) !important;
}

.dark\:bg-gray-700,
.dark .bg-gray-700,
.dark\:bg-gray-700\/50 {
  background-color: var(--pmm-surface) !important;
}

/* ── Borders ── */
.dark\:border-gray-700,
.dark .border-gray-700,
.dark\:border-gray-600,
.dark .border-gray-600,
.border-gray-300,
.border-gray-200 {
  border-color: var(--pmm-border) !important;
}

/* ── Text ── */
.text-gray-900, .text-gray-800, .text-gray-700,
h1, h2, h3, h4, h5 {
  color: var(--pmm-text) !important;
}

.text-gray-600, .text-gray-500,
.dark\:text-gray-300, .dark\:text-gray-400 {
  color: var(--pmm-muted) !important;
}

.text-gray-400, .text-gray-300 {
  color: var(--pmm-faint) !important;
}

label {
  color: var(--pmm-muted) !important;
}

/* ── Inputs ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="username"],
input[type="search"],
select,
textarea,
#username,
#password {
  background-color: var(--pmm-surface) !important;
  color: var(--pmm-text) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: rgba(200,169,110,0.50) !important;
  box-shadow: 0 0 0 3px rgba(200,169,110,0.12) !important;
  outline: none !important;
}

input::placeholder {
  color: var(--pmm-faint) !important;
}

/* ── Primary / gold buttons ── */
.bg-primary,
.dark\:bg-primary,
button[type="submit"],
#newInviteBtn {
  background-color: var(--pmm-accent) !important;
  color: #0d0f14 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.bg-primary:hover,
button[type="submit"]:hover,
#newInviteBtn:hover {
  background-color: var(--color-primary_hover) !important;
}

/* ── Welcome page ── */
.bg-gradient-to-r.from-primary,
.rounded-full.bg-gradient-to-r {
  background: var(--pmm-accent) !important;
  background-image: none !important;
  color: #0d0f14 !important;
}

.text-transparent.bg-clip-text {
  background-image: linear-gradient(to right, #f0ede6, #c8a96e, #d4b87a) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.from-gray-100 { --tw-gradient-from: var(--pmm-bg) !important; }
.via-primary\/10 { --tw-gradient-via: rgba(200,169,110,0.08) !important; }
.to-white { --tw-gradient-to: var(--pmm-bg) !important; }
.from-white\/90 { --tw-gradient-from: rgba(13,15,20,0.85) !important; }
.to-white\/95 { --tw-gradient-to: rgba(13,15,20,0.90) !important; }

.backdrop-blur-xl.rounded-2xl {
  background-color: #1e2030 !important;
  border-color: rgba(200,169,110,0.15) !important;
}

.backdrop-blur-xl h2 { color: var(--pmm-accent) !important; }
.backdrop-blur-xl p { color: var(--pmm-muted) !important; }

.bg-primary\/60 { background-color: rgba(200,169,110,0.30) !important; }
.bg-primary_hover { background-color: rgba(212,184,122,0.25) !important; }

.dark .dark\:from-white { --tw-gradient-from: var(--pmm-text) !important; }
.dark .dark\:via-primary\/80 { --tw-gradient-via: rgba(200,169,110,0.8) !important; }

/* ── Account creation form ── */
#invite-section input[type="text"],
#invite-section input[type="email"],
#invite-section input[type="password"] {
  background-color: var(--pmm-bg) !important;
  color: var(--pmm-text) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

#invite-section input[name="code"] {
  color: var(--pmm-muted) !important;
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0.75 !important;
  cursor: default !important;
}

/* ── Login page ── */
.text-2xl.font-semibold { color: var(--pmm-text) !important; }
.rounded-lg.shadow-sm {
  background-color: var(--pmm-card) !important;
  border-color: var(--pmm-border) !important;
}

/* ── Error / success states ── */
.text-red-600, .dark\:text-red-500, .dark\:text-red-400 { color: var(--pmm-danger) !important; }
.bg-red-50, .bg-red-100, .dark\:bg-red-900\/30 { background-color: rgba(224,92,92,0.10) !important; }
.text-green-600, .text-green-700 { color: var(--pmm-success) !important; }
.bg-green-50, .bg-green-100 { background-color: rgba(76,175,133,0.10) !important; }
span.bg-green-100 { background-color: rgba(76,175,133,0.15) !important; color: #4caf85 !important; }

/* ── Blue info boxes ── */
.dark\:bg-blue-900, .bg-blue-50 {
  background-color: rgba(107,140,255,0.08) !important;
  border-color: rgba(107,140,255,0.20) !important;
}
.dark\:text-blue-200, .dark\:text-blue-400 { color: #a3b4ff !important; }

/* ── Links ── */
a { color: var(--pmm-accent) !important; text-decoration: none !important; }
a:hover { color: var(--color-primary_hover) !important; }

/* ── Focus rings ── */
.focus\:ring-primary:focus { --tw-ring-color: rgba(200,169,110,0.30) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--pmm-bg); }
::-webkit-scrollbar-thumb { background: var(--pmm-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(200,169,110,0.25); }

/* ── Admin nav ── */
nav, header {
  background-color: var(--pmm-surface) !important;
  border-bottom: 0.5px solid var(--pmm-border) !important;
  box-shadow: none !important;
}

nav .text-gray-900, nav .text-white { color: var(--pmm-text) !important; }
.text-gray-300 { color: var(--pmm-muted) !important; }
.text-primary { color: var(--pmm-accent) !important; }

/* ── Admin settings tabs ── */
.tab-btn {
  color: var(--pmm-muted) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}
.tab-btn:hover {
  color: var(--pmm-text) !important;
  background-color: rgba(255,255,255,0.05) !important;
}
.tab-btn.bg-primary, .tab-btn.border-primary {
  background-color: rgba(200,169,110,0.15) !important;
  border-color: var(--pmm-accent) !important;
  color: var(--pmm-accent) !important;
}
.tab-btn.bg-primary svg, .tab-btn.border-primary svg {
  color: var(--pmm-accent) !important;
}

/* ── Admin badges ── */
span[class*="bg-pink"], span[class*="bg-purple"], span[class*="bg-fuchsia"] {
  background-color: rgba(200,169,110,0.15) !important;
  color: var(--pmm-accent) !important;
  border: 0.5px solid rgba(200,169,110,0.30) !important;
}

.bg-gray-100.rounded-full, [class*="bg-gray-100"] {
  background-color: rgba(200,169,110,0.15) !important;
  color: var(--pmm-accent) !important;
}

/* ── Dropdown ── */
select {
  background-color: #1e2030 !important;
  color: var(--pmm-text) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── Update banner ── */
.w-full.bg-primary {
  background-color: #1a1d27 !important;
  border-bottom: 0.5px solid rgba(200,169,110,0.30) !important;
}
.w-full.bg-primary a, .w-full.bg-primary span {
  color: var(--pmm-accent) !important;
}

/* ── Tables ── */
table { background-color: var(--pmm-card) !important; }
thead { background-color: var(--pmm-surface) !important; }
tr { border-color: var(--pmm-border) !important; }
tr:hover { background-color: var(--pmm-card-h) !important; }

/* ── Wizard content ── */
.wizard-content,
#wizard-content,
.prose,
.prose-slate,
[class*="prose"] {
  background-color: #0d0f14 !important;
  color: var(--pmm-text) !important;
}

#wizard-content {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.wizard-glass-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Wizard progress bar ── */
#progress-bar-mobile,
#progress-bar-desktop {
  background: linear-gradient(90deg, #8b6914 0%, #c8a96e 50%, #f0d080 100%) !important;
  box-shadow: 0 0 12px rgba(200,169,110,0.50) !important;
}

.bg-gray-200, .bg-gray-200\/50,
.dark\:bg-gray-700, .dark\:bg-gray-700\/50 {
  background-color: rgba(255,255,255,0.08) !important;
}

/* ── Wizard desktop nav buttons ── */
.btn-nav {
  background-color: rgba(200,169,110,0.15) !important;
  color: var(--pmm-accent) !important;
  border: 0.5px solid rgba(200,169,110,0.30) !important;
  border-radius: 50px !important;
  padding: 8px 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
.btn-nav:hover {
  background-color: rgba(200,169,110,0.25) !important;
  color: var(--color-primary_hover) !important;
}

#wizard-next-btn-desktop,
a#wizard-next-btn-desktop {
  background-color: var(--pmm-accent) !important;
  color: #0d0f14 !important;
  border: none !important;
  font-weight: 700 !important;
}
#wizard-next-btn-desktop:hover {
  background-color: var(--color-primary_hover) !important;
}

/* ── Wizard mobile nav buttons ── */
@media (max-width: 768px) {
  a.wizard-btn-mobile {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 50% !important;
  }
  a.wizard-btn-mobile.wizard-btn-next {
    background: var(--pmm-accent) !important;
    background-color: var(--pmm-accent) !important;
    color: #0d0f14 !important;
    border: none !important;
  }
  a.wizard-btn-mobile.wizard-btn-next svg,
  a.wizard-btn-mobile.wizard-btn-next path {
    stroke: #0d0f14 !important;
    color: #0d0f14 !important;
  }
  a.wizard-btn-mobile.wizard-btn-prev {
    background: rgba(200,169,110,0.15) !important;
    background-color: rgba(200,169,110,0.15) !important;
    color: var(--pmm-accent) !important;
    border: 0.5px solid rgba(200,169,110,0.30) !important;
  }
  a.wizard-btn-mobile.wizard-btn-prev svg,
  a.wizard-btn-mobile.wizard-btn-prev path {
    stroke: var(--pmm-accent) !important;
    color: var(--pmm-accent) !important;
  }
}

/* ── Video wrap ── */
.pmm-video-wrap {
  margin: 0 auto 1.5rem;
  border-radius: 12px;
  overflow: hidden;
  border: 0.5px solid rgba(200,169,110,0.20);
  max-width: 420px;
  background: transparent;
  position: relative;
  padding-top: 56.25%;
}
.pmm-video-wrap video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%) scale(1.15);
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Pin wizard content to top instead of vertical center */
#wizard-wrapper {
  justify-content: flex-start !important;
}