/* Custom Styles for 1tym */

:root {
  --primary: #F02D5E;
  --primary-dark: #C4174A;
  --primary-light: #FF6B8A;
  --dark: #111111;
  --dark-secondary: #1E1E1E;
  --card-bg: #1A1A1A;
  --border-color: #2A2A2A;
  --text-muted: #999999;
}

/* Custom Thin Pink Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #111111;
}
::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

/* Base custom classes to match brand */
.bg-brand-primary {
  background-color: var(--primary);
}
.text-brand-primary {
  color: var(--primary);
}
.border-brand-primary {
  border-color: var(--primary);
}
.hover-bg-brand-primary:hover {
  background-color: var(--primary-dark);
}
.focus-ring-brand:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(240, 45, 94, 0.3);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(240, 45, 94, 0.4); }
  50% { box-shadow: 0 0 20px rgba(240, 45, 94, 0.8); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.4s ease-out forwards;
}

/* Card hover lift & glow */
.celebrity-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--border-color);
  background-color: var(--card-bg);
}

.celebrity-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary);
  box-shadow: 0 10px 25px -5px rgba(240, 45, 94, 0.3);
}

/* Glassmorphism utility */
.glassmorphism {
  background: rgba(26, 26, 26, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Video Player Thumbnail Overlay */
.video-overlay-play {
  transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.4);
}
.video-card:hover .video-overlay-play {
  background: rgba(240, 45, 94, 0.3);
}

/* Active sidebar classes */
.sidebar-link-active {
  background-color: var(--primary);
  color: #FFFFFF !important;
}

/* Loading skeletal animation */
.skeleton {
  background: linear-gradient(90deg, #FAFAFA 25%, #E5E7EB 50%, #FAFAFA 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ==========================================================================
   PREMIUM LIGHT MODE (WHITE THEME) DYNAMIC OVERRIDES
   ========================================================================== */

/* Dynamic theme variables */
:root {
  --bg-main: #FAF9F6;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F1F3F5;
  --bg-sidebar: #FFFFFF;
  --border-color: #E2E8F0;
  --text-main: #111111;
  --text-secondary: #4A5568;
  --text-muted: #718096;
}

.dark, :root.dark {
  --bg-main: #111111;
  --bg-card: #1A1A1A;
  --bg-card-hover: #222222;
  --bg-sidebar: #1E1E1E;
  --border-color: #2A2A2A;
  --text-main: #FFFFFF;
  --text-secondary: #D1D5DB;
  --text-muted: #999999;
}

/* Light mode overrides when html does not contain the .dark class */
html:not(.dark),
html:not(.dark) body,
html:not(.dark) .bg-\[\#111111\],
html:not(.dark) .bg-\[\#111\],
html:not(.dark) .bg-\[\#121212\],
html:not(.dark) .bg-\[\#050505\],
html:not(.dark) .bg-\[\#0a0a0a\],
html:not(.dark) .bg-\[\#0d0d0d\],
html:not(.dark) .bg-brandDark {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}

/* Header, top bar and card containers */
html:not(.dark) header,
html:not(.dark) .bg-\[\#1A1A1A\],
html:not(.dark) .bg-\[\#1E1E1E\],
html:not(.dark) .bg-\[\#1C1C1C\],
html:not(.dark) .bg-\[\#181818\],
html:not(.dark) .bg-\[\#141414\],
html:not(.dark) .bg-\[\#151515\],
html:not(.dark) .bg-\[\#090909\],
html:not(.dark) .bg-\[\#0D0D0D\]\/95,
html:not(.dark) .bg-brandDarkSecondary,
html:not(.dark) .bg-white\/5,
html:not(.dark) .bg-white\/10 {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* Sidebar Specific overrides */
html:not(.dark) aside, 
html:not(.dark) .sidebar-fan, 
html:not(.dark) .sidebar-celebrity, 
html:not(.dark) .sidebar-admin {
  background-color: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border-color) !important;
}

/* Forms & text fields (excluding inputs of type submit, button) */
html:not(.dark) select,
html:not(.dark) textarea,
html:not(.dark) input[type="text"],
html:not(.dark) input[type="number"],
html:not(.dark) input[type="email"],
html:not(.dark) input[type="password"],
html:not(.dark) input[type="tel"],
html:not(.dark) input[type="date"],
html:not(.dark) input:not([type]) {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Ensure white text inside primary buttons and badges is preserved */
html:not(.dark) .bg-\[\#F02D5E\], 
html:not(.dark) .bg-brand-primary,
html:not(.dark) .bg-brandPink,
html:not(.dark) button.bg-\[\#F02D5E\], 
html:not(.dark) a.bg-\[\#F02D5E\],
html:not(.dark) button.bg-brandPink,
html:not(.dark) a.bg-brandPink,
html:not(.dark) .sidebar-link-active,
html:not(.dark) .price-tag,
html:not(.dark) .badge-verified,
html:not(.dark) .flash-message,
html:not(.dark) .bg-gradient-to-tr.from-\[\#F02D5E\] {
  background-color: var(--primary) !important;
  color: #FFFFFF !important;
}

/* Ensure nested texts inside primary elements stay white */
html:not(.dark) .bg-\[\#F02D5E\] *,
html:not(.dark) button.bg-\[\#F02D5E\] *,
html:not(.dark) a.bg-\[\#F02D5E\] *,
html:not(.dark) .bg-brandPink *,
html:not(.dark) .sidebar-link-active *,
html:not(.dark) .price-tag *,
html:not(.dark) .badge-verified *,
html:not(.dark) .flash-message *,
html:not(.dark) .bg-gradient-to-tr.from-\[\#F02D5E\] * {
  color: #FFFFFF !important;
}

/* General Text Conversions to ensure readability */
html:not(.dark) .text-white,
html:not(.dark) .text-gray-100,
html:not(.dark) .text-gray-200,
html:not(.dark) .text-gray-300,
html:not(.dark) h1.text-white,
html:not(.dark) h2.text-white,
html:not(.dark) h3.text-white,
html:not(.dark) h4.text-white,
html:not(.dark) p.text-white,
html:not(.dark) span.text-white,
html:not(.dark) strong.text-white {
  color: var(--text-main) !important;
}

html:not(.dark) .text-gray-400,
html:not(.dark) .text-gray-500 {
  color: var(--text-secondary) !important;
}

html:not(.dark) .text-gray-600,
html:not(.dark) .text-gray-700 {
  color: var(--text-muted) !important;
}

/* Star ratings color correction for high contrast */
html:not(.dark) .text-amber-400,
html:not(.dark) .stars-display {
  color: #D97706 !important; /* Premium dark amber/gold for star readability */
}

/* Borders */
html:not(.dark) .border-\[\#2A2A2A\],
html:not(.dark) .border-\[\#222\],
html:not(.dark) .border-\[\#333\],
html:not(.dark) .border-white\/5,
html:not(.dark) .border-white\/8,
html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/20,
html:not(.dark) div.border-b {
  border-color: var(--border-color) !important;
}

/* Table light overrides */
html:not(.dark) table {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
html:not(.dark) tr,
html:not(.dark) td,
html:not(.dark) th {
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* Sidebar hover list styles */
html:not(.dark) .hover\:bg-\[\#2A2A2A\]:hover {
  background-color: var(--bg-card-hover) !important;
}

/* Accordion FAQs overrides */
html:not(.dark) .accordion-header {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
html:not(.dark) .accordion-body {
  background-color: var(--bg-main) !important;
}

/* Keep main landing page navbar transparent on top of the hero overlay */
html:not(.dark) #navbar.bg-transparent {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}
html:not(.dark) #navbar.bg-transparent a,
html:not(.dark) #navbar.bg-transparent span,
html:not(.dark) #navbar.bg-transparent button:not(.bg-brandPink):not(.bg-brandPinkDark) {
  color: #FFFFFF !important;
}

/* Navbar & Dropdown overrides for light mode */
html:not(.dark) #navbar,
html:not(.dark) .bg-\[\#0D0D0D\]\/95,
html:not(.dark) .bg-\[\#181818\]\/95,
html:not(.dark) .bg-\[\#0F0F0F\]\/97,
html:not(.dark) #mobile-nav-menu {
  background-color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-color: var(--border-color) !important;
}

/* User pill dropdown trigger and icons inside nav */
html:not(.dark) #navbar button,
html:not(.dark) #navbar a:not(.bg-brandPink):not(.bg-brandPinkDark):not(.bg-\[\#F02D5E\]),
html:not(.dark) #navbar i:not(.text-brandPink):not(.text-\[\#F02D5E\]) {
  color: var(--text-main) !important;
}

/* Fix text hover colors in mobile drawer nav */
html:not(.dark) #mobile-nav-menu a,
html:not(.dark) #mobile-nav-menu span,
html:not(.dark) #mobile-nav-menu i:not(.text-[#F02D5E]) {
  color: var(--text-main) !important;
}

/* Hover conversions inside navbar dropdowns */
html:not(.dark) .hover\:bg-\[\#F02D5E\]\/10:hover {
  background-color: var(--bg-card-hover) !important;
}

/* Chat components overrides */
html:not(.dark) .conversation-item:hover,
html:not(.dark) .conversation-item.active {
  background-color: var(--bg-card-hover) !important;
}
html:not(.dark) .msg-bubble-received {
  background-color: var(--bg-card-hover) !important;
  color: var(--text-main) !important;
}
html:not(.dark) .msg-bubble-sent {
  background-color: var(--primary) !important;
  color: #FFFFFF !important;
}
html:not(.dark) .msg-bubble-sent * {
  color: #FFFFFF !important;
}

/* Structural section/container bg-black overrides */
html:not(.dark) section.bg-black,
html:not(.dark) div.bg-black {
  background-color: var(--bg-main) !important;
}

/* Hover conversions for links & group hovers in light mode */
html:not(.dark) .hover\:text-white:hover {
  color: var(--primary) !important;
}
html:not(.dark) .group:hover .group-hover\:text-white,
html:not(.dark) .group-hover\:text-white:hover {
  color: var(--primary) !important;
}

/* Mobile bottom navigation capsule overrides for light mode */
html:not(.dark) .fixed.bottom-5 {
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* Nav links and text inside mobile bottom navigation capsule */
html:not(.dark) .fixed.bottom-5 a:not(.bg-brandPink):not(.bg-\[\#F02D5E\]),
html:not(.dark) .fixed.bottom-5 span:not(.bg-brandPink):not(.bg-\[\#F02D5E\]),
html:not(.dark) .fixed.bottom-5 i:not(.bg-brandPink):not(.bg-\[\#F02D5E\]) {
  color: var(--text-main) !important;
}

/* Unselected nav links (originally text-gray-500) */
html:not(.dark) .fixed.bottom-5 a.text-gray-500 i,
html:not(.dark) .fixed.bottom-5 a.text-gray-500 span {
  color: var(--text-muted) !important;
}

/* Active links dot indicator and active icons */
html:not(.dark) .fixed.bottom-5 a.text-white i,
html:not(.dark) .fixed.bottom-5 a.text-white span {
  color: var(--primary) !important;
}