@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@700;800;900&family=Montserrat:wght@700;800;900&family=Inter:wght@400;600;700&display=swap');

:root {
  --canvas-black: #000000;
  --box-cream: #12151E;
  --box-dark-graphite: #12151E;
  --brand-red: #FF3300;
  --brand-red-dark: #CC1100;
  --brand-red-glow: rgba(255, 51, 0, 0.45);
  --water-cyan: #00E5FF;
  --water-cyan-glow: rgba(0, 229, 255, 0.45);
  --text-black: #F8FAFC;
  --text-white: #FFFFFF;
  --text-charcoal: #CBD5E1;
  --surface-card: #12151E;
  --surface-border: #FF3300;
}

@layer base {
  html, body {
    margin: 0;
    padding: 0;
    background-color: var(--canvas-black) !important;
    color: #E2E8F0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    scroll-behavior: smooth;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #050505;
}
::-webkit-scrollbar-thumb {
  background: #1A202C;
  border-radius: 4px;
  border: 1px solid var(--surface-border);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-red);
}

/* Typography Headings (MATCHING HERO BRANDING TEXT STYLE) */
h1, h2, h3, h4, .font-headline {
  font-family: 'Cinzel Decorative', 'Cinzel', 'Montserrat', serif !important;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   3D BRIGHT WHITE HERO TITLE (ANIME HUB INDIA OFFICIAL)
   ========================================================================== */
.magma-stone-title {
  font-family: 'Cinzel', 'Montserrat', serif !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 60%, #E2E8F0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.9) !important;
  
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  
  /* Vibrant Pure White 3D Glow */
  text-shadow: 
    0 0 12px rgba(255, 255, 255, 0.9), 
    0 0 25px rgba(255, 255, 255, 0.7), 
    0 0 45px rgba(255, 255, 255, 0.5),
    2px 4px 10px rgba(0, 0, 0, 0.95) !important;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8)) !important;
  letter-spacing: 0.02em !important;
}

.magma-stone-title::selection {
  background: transparent !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.magma-stone-title::-moz-selection {
  background: transparent !important;
  color: #FFFFFF !important;
}

/* Specific text glow utilities */
.text-brand-white {
  color: #FFFFFF !important;
}
.glow-white {
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.85), 0 0 30px rgba(255, 255, 255, 0.6);
}

/* Specific text glow utilities */
.text-brand-red,
.text-brand-green {
  color: #FF3300 !important;
}
.text-sea-cyan,
.text-water-cyan {
  color: #00E5FF !important;
}
.glow-red,
.glow-green {
  text-shadow: 0 0 14px rgba(255, 51, 0, 0.75), 0 0 30px rgba(255, 46, 77, 0.5);
}
.glow-cyan {
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.85), 0 0 30px rgba(0, 229, 255, 0.5);
}

/* SLEEK CAPSULE TAGLINE BADGE */
.tagline-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  border-radius: 30px;
  background: #12151E !important;
  border: 1.5px solid #FF3300 !important;
  color: #00E5FF !important;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(255, 51, 0, 0.25), 0 0 10px rgba(0, 229, 255, 0.2);
  transition: all 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
}

.tagline-pill-badge:hover {
  border-color: #FF3300;
  box-shadow: 0 0 25px rgba(255, 51, 0, 0.5), 0 0 15px rgba(0, 229, 255, 0.4);
  transform: translateY(-1px);
}

/* ==========================================================================
   GLOBAL HERO BANNER BRANDING SYSTEM (OPTION A):
   1. OLED BLACK CANVAS (#000000)
   2. DARK GRAPHITE OBSIDIAN BOXES (#12151E)
   3. FLAMING MAGMA RED BORDERS & ACCENTS (#FF3300)
   4. ELECTRIC WATER CYAN TEXT & TITLES (#00E5FF) + CRISP WHITE (#FFFFFF)
   ========================================================================== */

/* All Cards, Panels, Modals & Containers */
.glass-card,
.cream-box,
.youtube-comment-card {
  background: #12151E !important;
  color: #F8FAFC !important;
  border: 1.5px solid #FF3300 !important;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.95), 0 0 15px rgba(255, 51, 0, 0.15);
}

.glass-card h1, .glass-card h2, .glass-card h3, .glass-card h4, .glass-card h5, .glass-card h6,
.cream-box h1, .cream-box h2, .cream-box h3, .cream-box h4, .cream-box h5, .cream-box h6,
.youtube-comment-card h1, .youtube-comment-card h2, .youtube-comment-card h3, .youtube-comment-card h4,
.anime-card h1, .anime-card h2, .anime-card h3, .anime-card h4 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

.glass-card p, .glass-card span, .glass-card div, .glass-card label, .glass-card input, .glass-card textarea,
.cream-box p, .cream-box span, .cream-box div, .cream-box label, .cream-box input, .cream-box textarea,
.youtube-comment-card p, .youtube-comment-card span, .youtube-comment-card div,
.anime-card p, .anime-card span, .anime-card div {
  color: #E2E8F0 !important;
}

/* Interactive Buttons & Nav Fills */
.interactive-hover-btn,
.interactive-hover-fill,
.btn-lava-red,
.btn-lava-green,
.btn,
.cream-box-fill {
  background: #12151E !important;
  color: #00E5FF !important;
  border: 2px solid #FF3300 !important;
  box-shadow: 0 4px 14px rgba(255, 51, 0, 0.25);
  font-weight: 800 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-hover-btn *,
.interactive-hover-fill *,
.btn-lava-red *,
.btn-lava-green *,
.btn * {
  color: #00E5FF !important;
  font-weight: 800 !important;
}

.interactive-hover-btn:hover,
.interactive-hover-fill:hover,
.btn-lava-red:hover,
.btn-lava-green:hover,
.btn:hover {
  background: #FF3300 !important;
  color: #FFFFFF !important;
  border-color: #FF3300 !important;
  box-shadow: 0 0 20px rgba(255, 51, 0, 0.6) !important;
  transform: translateY(-2px);
}

.interactive-hover-btn:hover *,
.interactive-hover-fill:hover *,
.btn-lava-red:hover *,
.btn-lava-green:hover *,
.btn:hover * {
  color: #FFFFFF !important;
}

/* Search Bar & Category Dropdown Containers */
.search-container,
.search-pill-container {
  border-radius: 30px !important;
  background: #12151E !important;
  color: #FFFFFF !important;
  border: 2px solid #FF3300 !important;
  box-shadow: 0 4px 18px rgba(255, 51, 0, 0.3) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-container:hover,
.search-container:focus-within,
.search-pill-container:hover,
.search-pill-container:focus-within {
  background: #12151E !important;
  border-color: #FF3300 !important;
  box-shadow: 0 0 22px rgba(255, 51, 0, 0.55), 0 0 12px rgba(0, 229, 255, 0.3) !important;
  transform: translateY(-3px);
}

/* EXPLORE HEADER SEARCH BAR DOCKING & STYLES */
.header-search-bar {
  background: #12151E !important;
  border: 2px solid #FF3300 !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 15px rgba(255, 51, 0, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.header-search-bar:focus-within,
.header-search-bar:hover {
  border-color: #00E5FF !important;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.45), 0 0 10px rgba(255, 51, 0, 0.3) !important;
}

/* Scroll Docked Header Animation */
#header-search-container {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, max-width 0.35s ease;
}

#header-search-container.is-docked {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
  pointer-events: auto !important;
}

#header-search-container.is-hidden-top {
  opacity: 0 !important;
  transform: scale(0.92) translateY(-10px) !important;
  pointer-events: none !important;
}


/* Dropdowns & Category Select Pill */
.dropdown,
.category-select-pill {
  border-radius: 25px !important;
  background: #12151E !important;
  color: #00E5FF !important;
  border: 1.5px solid #FF3300 !important;
  font-weight: 800 !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease;
}

.dropdown:focus, .dropdown:hover,
.category-select-pill:focus, .category-select-pill:hover {
  background: #12151E !important;
  border-color: #FF3300 !important;
  box-shadow: 0 0 15px rgba(255, 51, 0, 0.45) !important;
}

.dropdown option,
.category-select-pill option {
  background-color: #12151E !important;
  color: #FFFFFF !important;
  font-weight: 700;
}

/* Input Box inside Search Container */
#hero-search-input {
  color: #FFFFFF !important;
  font-weight: 700;
}

#hero-search-input::placeholder {
  color: rgba(226, 232, 240, 0.7) !important;
}

/* POSTER CARDS 3D HOVER LIFT */
.card-3d-lift {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-3d-lift:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: #FF3300 !important;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.95), 
    0 0 20px rgba(255, 51, 0, 0.5);
}

/* Otaku Pass Dropdown Menu */
.otaku-dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: #12151E !important;
  border: 1.5px solid #FF3300 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95);
}

.otaku-dropdown-container:hover .otaku-dropdown-menu,
.otaku-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* OTP Box Inputs */
.otp-digit-input {
  width: 44px;
  height: 50px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  background-color: #12151E !important;
  border: 1.5px solid #FF3300 !important;
  color: #00E5FF !important;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.otp-digit-input:focus {
  border-color: #FF3300 !important;
  box-shadow: 0 0 15px rgba(255, 51, 0, 0.45) !important;
  outline: none;
}

.social-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF !important;
  transition: all 0.2s ease-in-out;
}

.social-icon-btn:hover {
  color: #FF3300 !important;
  transform: translateY(-2px);
}

.social-icon-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor !important;
}

/* Modal Animations */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

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

/* ==========================================================================
   AHI Community Poll Dark Theme Overrides
   ========================================================================== */
.ahi-community-poll .glass-card {
  background: transparent !important;
  border: 1.5px solid rgba(255, 46, 77, 0.35) !important;
}

.ahi-community-poll .glass-card h3 {
  color: #ffffff !important;
}

.ahi-community-poll .glass-card p,
.ahi-community-poll .glass-card p span {
  color: #a1a1aa !important;
}

.ahi-community-poll .glass-card span:not(.text-\[\#FF2E4D\]) {
  color: #ffffff !important;
}

.ahi-community-poll .glass-card span.text-gray-400 {
  color: #a1a1aa !important;
}

.ahi-community-poll .glass-card span.text-gray-500 {
  color: #888888 !important;
}

.ahi-community-poll .glass-card div:not(.text-\[\#FF2E4D\]) {
  color: #ffffff !important;
}

/* Button Overrides */
.ahi-community-poll button[data-option-id] {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.ahi-community-poll button[data-option-id]:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.ahi-community-poll button[data-option-id].border-\[\#FF2E4D\] {
  background: rgba(255, 46, 77, 0.25) !important;
  border-color: #FF2E4D !important;
}

.ahi-community-poll #share-poll-btn {
  background: transparent !important;
  border: 1px dashed rgba(255, 46, 77, 0.5) !important;
  color: #ffffff !important;
}

.ahi-community-poll #share-poll-btn:hover {
  background: rgba(255, 46, 77, 0.1) !important;
  border-color: #FF2E4D !important;
  color: #ffffff !important;
}

.ahi-community-poll #share-poll-btn span {
  color: #ffffff !important;
}

/* ==========================================================================
   4. VOICE INPUT (MICROPHONE) & EMOJI PICKER STYLES (#anime-talk)
   ========================================================================== */

/* Pulsating animation for active microphone recording */
@keyframes micPulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 51, 0, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 51, 0, 0);
    transform: scale(1.08);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 51, 0, 0);
    transform: scale(1);
  }
}

.mic-recording-active {
  background-color: #FF3300 !important;
  color: #FFFFFF !important;
  border-color: #CC1100 !important;
  animation: micPulseGlow 1.4s infinite ease-in-out !important;
}

/* Emoji Picker & Voice Language Popover Styling */
#emoji-picker-popover,
#voice-lang-popover {
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 51, 0, 0.3) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.emoji-btn-item {
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.15s ease;
}

.emoji-btn-item:hover {
  transform: scale(1.25);
  background-color: rgba(255, 51, 0, 0.12);
  border-radius: 8px;
}

.emoji-tab-active {
  color: #FF3300 !important;
  border-bottom: 2px solid #FF3300 !important;
  background-color: rgba(255, 51, 0, 0.08) !important;
}

.voice-lang-option {
  transition: all 0.15s ease;
}

.voice-lang-option:hover {
  background-color: rgba(255, 51, 0, 0.12) !important;
  border-color: #FF3300 !important;
}

.voice-lang-option.active-lang {
  background-color: #FF3300 !important;
  color: #FFFFFF !important;
  border-color: #CC1100 !important;
}