/* ============================================================
   HerHost Global Theme — Black & Gold
   /var/www/html/herhost.live/assets/css/theme.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Jost:wght@300;400;500&display=swap');

/* ── CSS Variables ── */
:root {
  --gold:         #c9a96e;
  --gold-light:   #e8d5a3;
  --gold-dark:    #8b6914;
  --gold-border:  rgba(201,169,110,0.2);
  --bg:           #0a0a0a;
  --surface:      #111111;
  --surface2:     #161616;
  --border:       rgba(201,169,110,0.12);
  --text:         #f0ebe3;
  --text-muted:   #6b6460;
  --error:        #e05c5c;
  --success:      #6dbf8a;

  /* Override pink variables used in existing pages */
  --pink:         #c9a96e;
  --pink-dark:    #8b6914;
  --pink-pale:    #1a1408;
  --pink-border:  rgba(201,169,110,0.2);
}

/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: #0a0a0a !important;
  color: #f0ebe3 !important;
  font-family: 'Jost', 'Inter', sans-serif !important;
}

/* ── Navigation ── */
nav {
  background: #0e0e0e !important;
  border-bottom: 1px solid rgba(201,169,110,0.2) !important;
}

.nav-logo {
  color: #f0ebe3 !important;
  font-family: 'Cormorant Garamond', 'Playfair Display', serif !important;
}

.nav-logo span { color: #c9a96e !important; }

.nav-btn, .nav-btn:visited {
  background: linear-gradient(135deg, #8b6914, #c9a96e) !important;
  color: #0a0a0a !important;
  border: none !important;
  border-radius: 3px !important;
}

.nav-btn:hover {
  opacity: 0.88 !important;
  background: linear-gradient(135deg, #8b6914, #c9a96e) !important;
}

/* ── Cards / Panels ── */
.card, .wrap .card {
  background: #111111 !important;
  border: 1px solid rgba(201,169,110,0.15) !important;
  border-radius: 6px !important;
}

/* ── Forms ── */
.form-group input,
.form-group textarea,
.form-group select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(201,169,110,0.15) !important;
  border-radius: 3px !important;
  color: #f0ebe3 !important;
  font-family: 'Jost', 'Inter', sans-serif !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #8b6914 !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder { color: #6b6460 !important; }

/* ── Labels ── */
.form-group label, label {
  color: #6b6460 !important;
}

/* ── Buttons ── */
.submit-btn,
button[type="submit"],
.btn-primary {
  background: linear-gradient(135deg, #8b6914, #c9a96e) !important;
  color: #0a0a0a !important;
  border: none !important;
  border-radius: 3px !important;
  font-family: 'Jost', 'Inter', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  cursor: pointer !important;
}

.submit-btn:hover,
button[type="submit"]:hover {
  opacity: 0.88 !important;
}

/* ── Links ── */
a { color: #c9a96e !important; }
a:hover { color: #e8d5a3 !important; }

.links a,
.links a:visited { color: #c9a96e !important; }

/* ── Page titles / headings ── */
h1, h2, h3, h4, h5, h6,
.page-title,
.logo {
  color: #f0ebe3 !important;
  font-family: 'Cormorant Garamond', 'Playfair Display', serif !important;
}

.logo span { color: #c9a96e !important; }

.page-sub, .muted, .text-muted { color: #6b6460 !important; }

/* ── Error / Success messages ── */
.msg-error, .alert-error {
  background: rgba(224,92,92,0.08) !important;
  border: 1px solid rgba(224,92,92,0.3) !important;
  color: #e88 !important;
  border-radius: 4px !important;
}

.msg-success, .alert-success {
  background: rgba(109,191,138,0.08) !important;
  border: 1px solid rgba(109,191,138,0.3) !important;
  color: #6dbf8a !important;
  border-radius: 4px !important;
}

/* ── Tables ── */
table { border-collapse: collapse; width: 100%; }
th {
  background: #161616 !important;
  color: #6b6460 !important;
  border-bottom: 1px solid rgba(201,169,110,0.12) !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
td {
  border-bottom: 1px solid rgba(201,169,110,0.06) !important;
  color: #f0ebe3 !important;
}
tr:hover td { background: rgba(201,169,110,0.03) !important; }

/* ── Sidebar (dashboard pages) ── */
.sidebar, aside {
  background: #0e0e0e !important;
  border-right: 1px solid rgba(201,169,110,0.12) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: rgba(201,169,110,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,169,110,0.4); }

/* ── Pink overrides — catch any remaining pink elements ── */
[style*="background:#fdf5f9"],
[style*="background: #fdf5f9"] { background: #0a0a0a !important; }

[style*="color:#e91e8c"],
[style*="color: #e91e8c"] { color: #c9a96e !important; }

[style*="background:#e91e8c"],
[style*="background: #e91e8c"] { background: linear-gradient(135deg, #8b6914, #c9a96e) !important; }

/* ── Body background override ── */
body[style*="background"] { background: #0a0a0a !important; }

/* ── Password toggle button ── */
.pw-toggle { filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg) !important; opacity: 0.6 !important; }
.pw-toggle:hover { opacity: 1 !important; }

/* ── Checkboxes ── */
input[type="checkbox"] { accent-color: #c9a96e !important; }

/* ── Select dropdowns ── */
select option { background: #111111 !important; color: #f0ebe3 !important; }

/* ── Dividers ── */
hr { border-color: rgba(201,169,110,0.12) !important; }

/* ── Profile / content cards ── */
.profile-card, .post-card, .gallery-card, .content-card {
  background: #111111 !important;
  border: 1px solid rgba(201,169,110,0.12) !important;
}

/* ── Badges / pills ── */
.badge, .pill, .tag {
  background: rgba(201,169,110,0.1) !important;
  color: #c9a96e !important;
  border: 1px solid rgba(201,169,110,0.2) !important;
}

/* ── Footer ── */
footer {
  background: #0e0e0e !important;
  border-top: 1px solid rgba(201,169,110,0.12) !important;
  color: #6b6460 !important;
}

/* ============================================================
   Browse page + global pink element overrides
   ============================================================ */

/* ── Creator cards ── */
.creator-card {
  background: #111111 !important;
  border: 1px solid rgba(201,169,110,0.15) !important;
  color: #f0ebe3 !important;
}

.creator-card:hover {
  border-color: rgba(201,169,110,0.4) !important;
  box-shadow: 0 8px 24px rgba(201,169,110,0.08) !important;
  transform: translateY(-3px) !important;
}

.creator-card.elite {
  border-color: var(--gold-dark) !important;
  box-shadow: 0 2px 12px rgba(201,169,110,0.12) !important;
}

/* ── Card avatar (the big colored block) ── */
.card-avatar {
  background: linear-gradient(135deg, #1a1408, #2a1f0a) !important;
  color: #c9a96e !important;
}

/* ── Tier badges ── */
.tier-elite { background: linear-gradient(135deg, #8b6914, #c9a96e) !important; color: #0a0a0a !important; }
.tier-pro   { background: rgba(201,169,110,0.15) !important; color: #c9a96e !important; border: 1px solid rgba(201,169,110,0.3) !important; }

/* ── Verified badge ── */
.verified-badge {
  background: rgba(201,169,110,0.1) !important;
  color: #c9a96e !important;
  border: 1px solid rgba(201,169,110,0.3) !important;
}

/* ── Online badge ── */
.online-badge { background: #2ecc71 !important; color: #0a0a0a !important; }

/* ── Search card ── */
.search-card {
  background: #111111 !important;
  border: 1px solid rgba(201,169,110,0.15) !important;
  border-radius: 8px !important;
}

/* ── Search input ── */
.search-input {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(201,169,110,0.15) !important;
  color: #f0ebe3 !important;
  border-radius: 3px !important;
}

.search-input:focus { border-color: #8b6914 !important; }
.search-input::placeholder { color: #6b6460 !important; }

/* ── Search button ── */
.search-btn {
  background: linear-gradient(135deg, #8b6914, #c9a96e) !important;
  color: #0a0a0a !important;
  border: none !important;
  border-radius: 3px !important;
}

/* ── Filter selects ── */
.filter-select {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(201,169,110,0.15) !important;
  color: #f0ebe3 !important;
  border-radius: 3px !important;
}

/* ── Buttons ── */
.btn {
  background: linear-gradient(135deg, #8b6914, #c9a96e) !important;
  color: #0a0a0a !important;
  border: none !important;
  border-radius: 3px !important;
}

.btn:hover { opacity: 0.88 !important; }

.btn-outline {
  background: transparent !important;
  border: 1px solid #8b6914 !important;
  color: #c9a96e !important;
}

.btn-outline:hover { background: rgba(201,169,110,0.08) !important; }

.btn-white {
  background: rgba(201,169,110,0.1) !important;
  color: #c9a96e !important;
  border: 1px solid rgba(201,169,110,0.3) !important;
}

.btn-white:hover { background: rgba(201,169,110,0.2) !important; }

/* ── Card action button ── */
.card-btn {
  background: linear-gradient(135deg, #8b6914, #c9a96e) !important;
  color: #0a0a0a !important;
  border-radius: 3px !important;
}

.card-btn:hover { opacity: 0.88 !important; }

/* ── Category tags ── */
.cat-tag {
  background: rgba(201,169,110,0.08) !important;
  color: #c9a96e !important;
  border: 1px solid rgba(201,169,110,0.2) !important;
}

/* ── Advanced / upgrade badges ── */
.advanced-badge {
  background: rgba(201,169,110,0.08) !important;
  border: 1px solid rgba(201,169,110,0.2) !important;
  color: #c9a96e !important;
}

/* ── Upgrade banner ── */
.upgrade-banner {
  background: linear-gradient(135deg, #1a1408, #2a1f0a) !important;
  border: 1px solid rgba(201,169,110,0.2) !important;
  color: #f0ebe3 !important;
  border-radius: 6px !important;
}

/* ── Pagination ── */
.page-btn {
  background: #111111 !important;
  border: 1px solid rgba(201,169,110,0.15) !important;
  color: #f0ebe3 !important;
  border-radius: 3px !important;
}

.page-btn:hover, .page-btn.active {
  background: linear-gradient(135deg, #8b6914, #c9a96e) !important;
  color: #0a0a0a !important;
  border-color: var(--gold-dark) !important;
}

/* ── Featured label ── */
.featured-label { color: #c9a96e !important; }

/* ── Heading span (pink accent text) ── */
h1 span, h2 span, h3 span { color: #c9a96e !important; }

/* ── Nav actions ── */
.nav-actions a { color: #6b6460 !important; }
.nav-actions a:hover { color: #c9a96e !important; }

/* ── Upgrade note links ── */
.upgrade-note a { color: #c9a96e !important; }

/* ── Profile page elements ── */
.profile-header { background: #111111 !important; }
.cover-photo-placeholder { background: linear-gradient(135deg, #1a1408, #2a1f0a) !important; }
.avatar-placeholder { background: rgba(201,169,110,0.1) !important; color: #c9a96e !important; }

/* ── Messages page ── */
.message-item { background: #111111 !important; border-color: rgba(201,169,110,0.12) !important; }
.message-item:hover { background: #161616 !important; border-color: rgba(201,169,110,0.25) !important; }
.message-bubble.sent { background: rgba(201,169,110,0.12) !important; color: #f0ebe3 !important; }
.message-bubble.received { background: #161616 !important; color: #f0ebe3 !important; }

/* ── Dashboard stats ── */
.stat-card { background: #111111 !important; border: 1px solid rgba(201,169,110,0.12) !important; }
.stat-value { color: #c9a96e !important; }

/* ── Any remaining white backgrounds ── */
.wrap, .container, .main-content, main {
  background: transparent !important;
}

/* ── Input autofill override (Chrome) ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #111111 inset !important;
  -webkit-text-fill-color: #f0ebe3 !important;
  border-color: rgba(201,169,110,0.15) !important;
}