/* ═══════════════════════════════════════════════════════════
   COROS VOICE — Design System v3 · Complete Theme
   Fonts: DINCOROS (display) + Outfit (body) + DM Mono (data)
   Strategy: Override Fider CSS variables + custom styling
   ═══════════════════════════════════════════════════════════ */

/* ── Font Faces ───────────────────────────────────────── */
@font-face {
  font-family: 'DINCOROS';
  src: url('https://voice.infinitusdigitalllc.com/static/fonts/dincoros/DINCOROS-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DINCOROS';
  src: url('https://voice.infinitusdigitalllc.com/static/fonts/dincoros/DINCOROS-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DINCOROS';
  src: url('https://voice.infinitusdigitalllc.com/static/fonts/dincoros/DINCOROS-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════
   VARIABLE OVERRIDES — Force COROS dark on BOTH themes
   This is the key: Fider's entire UI reads from these vars.
   Override once, everything follows.
   ═══════════════════════════════════════════════════════════ */
body[data-theme=light],
body[data-theme=dark],
body {
  /* Grays — surface hierarchy */
  --colors-gray-50:  #090B11 !important;  /* deepest bg */
  --colors-gray-100: #0B0D14 !important;  /* body bg */
  --colors-gray-200: #151821 !important;  /* subtle borders */
  --colors-gray-300: #1E2230 !important;  /* borders */
  --colors-gray-400: #2A2E42 !important;  /* muted borders */
  --colors-gray-500: #4A4E62 !important;  /* disabled text */
  --colors-gray-600: #6B6F84 !important;  /* placeholder */
  --colors-gray-700: #8A8EA2 !important;  /* secondary text */
  --colors-gray-800: #C0C3D4 !important;  /* body text */
  --colors-gray-900: #F0F0F4 !important;  /* primary text */

  /* Surfaces */
  --colors-white: #12151E !important;     /* card backgrounds */
  --colors-black: #E8E9F0 !important;     /* primary text */

  /* Primary — COROS orange */
  --colors-primary-light: #FF6B3D !important;
  --colors-primary-base: #E8491D !important;
  --colors-primary-dark: #C73A12 !important;
  --primary-color-light: #FF6B3D !important;
  --primary-color: #E8491D !important;
  --primary-color-dark: #C73A12 !important;

  /* Green — keep functional */
  --colors-green-50: #0A2A1A !important;
  --colors-green-600: #22C55E !important;
  --colors-green-800: #86EFAC !important;

  /* Red — keep functional */
  --colors-red-50: #2A0A0A !important;
  --colors-red-500: #EF4444 !important;
  --colors-red-600: #DC2626 !important;

  /* Blue — shift to teal accent */
  --colors-blue-50: #0A1A2A !important;
  --colors-blue-100: #0F2030 !important;
  --colors-blue-600: #2DD4BF !important;
  --colors-blue-700: #5EEADB !important;
}

/* ── Keyframes ────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,73,29,0.15); }
  50% { box-shadow: 0 0 0 6px rgba(232,73,29,0); }
}

/* ═══════════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

body {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Atmosphere grid — behind everything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(232,73,29,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,73,29,0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Aurora glow — behind everything */
body::after {
  content: '';
  position: fixed;
  top: -200px;
  right: -150px;
  width: 700px;
  height: 700px;
  background: radial-gradient(ellipse, rgba(232,73,29,0.05) 0%, rgba(45,212,191,0.02) 40%, transparent 70%);
  pointer-events: none !important;
  z-index: -1 !important;
}

::selection {
  background: rgba(232,73,29,0.25) !important;
  color: #fff !important;
}

/* ── Links — only content area, not nav/dropdown icons ── */
.container a,
.box a,
.c-list-item a,
.c-comment a,
.c-markdown-text a,
.c-footer a {
  color: #E8491D !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.container a:hover,
.box a:hover,
.c-list-item a:hover,
.c-comment a:hover {
  color: #FF6B3D !important;
}

/* General link cleanup (non-aggressive) */
a {
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY — DINCOROS display / Outfit body
   ═══════════════════════════════════════════════════════════ */
h1, h2, h3 {
  font-family: 'DINCOROS', sans-serif !important;
  letter-spacing: 0.02em !important;
}
h1 { font-weight: 900 !important; font-size: 30px !important; }
h2 { font-weight: 700 !important; font-size: 24px !important; }
h3 { font-weight: 700 !important; font-size: 20px !important; }

h4, h5, h6 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
}

p, li, span, div {
  font-family: 'Outfit', sans-serif !important;
}

/* Fider text utility classes */
.text-large {
  font-family: 'DINCOROS', sans-serif !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  letter-spacing: 0.02em !important;
}

.text-header {
  font-family: 'DINCOROS', sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
}

.text-title {
  font-family: 'DINCOROS', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

.text-subtitle {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════ */
.c-menu {
  background: rgba(11,13,20,0.9) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(232,73,29,0.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) !important;
  z-index: 9999 !important;
  position: relative !important;
}

.c-menu a,
.c-menu span {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: color 0.2s ease !important;
}

/* Site title — DINCOROS display */
.c-menu .text-title,
.c-menu a.text-title {
  font-family: 'DINCOROS', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #F0F0F4 !important;
}

/* Nav avatar */
.c-menu .c-avatar {
  border-radius: 8px !important;
  border: 2px solid rgba(232,73,29,0.25) !important;
}

/* Nav logo — strip any background */
.c-menu img,
.c-menu .c-logo img {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   DROPDOWN MENUS — z-index fix
   Fider uses: .c-dropdown (wrapper), .c-dropdown__handle
   (trigger), .c-dropdown__list (popup), .dropdown-menu (alt)
   ═══════════════════════════════════════════════════════════ */

/* Wrapper — must NOT clip overflow */
.c-dropdown {
  overflow: visible !important;
}

/* The actual popup list */
.c-dropdown__list,
.dropdown-menu {
  z-index: 99999 !important;
  background: #151821 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
  padding: 6px !important;
}

/* Dropdown items */
.c-dropdown__listitem,
.dropdown-menu button {
  border-radius: 8px !important;
  padding: 8px 14px !important;
  color: #A0A4B8 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.c-dropdown__listitem:hover,
.dropdown-menu button:hover {
  color: #F0F0F4 !important;
  background: rgba(232,73,29,0.06) !important;
}

/* Dropdown divider */
.c-dropdown__divider {
  background-color: rgba(255,255,255,0.04) !important;
}

/* Notification dropdown */
.c-notification-indicator {
  cursor: pointer !important;
}

.c-notifications-container {
  background: #151821 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
  z-index: 99999 !important;
}

/* ═══════════════════════════════════════════════════════════
   BOX (Fider's main card component)
   ═══════════════════════════════════════════════════════════ */
.box {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
}

/* ═══════════════════════════════════════════════════════════
   WELCOME HERO CARD
   ═══════════════════════════════════════════════════════════ */
.p-home__welcome-col .box {
  background: linear-gradient(135deg, #14171F 0%, #1A1E2C 100%) !important;
  border: 1px solid rgba(232,73,29,0.1) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
  animation: fadeUp 0.5s cubic-bezier(0.16,1,0.3,1) both !important;
}

/* ═══════════════════════════════════════════════════════════
   INPUTS & TEXTAREAS
   ═══════════════════════════════════════════════════════════ */
.c-input,
.c-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.c-input:focus,
.c-textarea:focus,
input:focus,
textarea:focus {
  border-color: rgba(232,73,29,0.5) !important;
  box-shadow: 0 0 0 3px rgba(232,73,29,0.08), 0 0 20px rgba(232,73,29,0.05) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.c-button {
  font-family: 'DINCOROS', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: 10px !important;
  padding: 10px 22px !important;
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
  cursor: pointer !important;
}

/* Primary */
.c-button--primary {
  background: linear-gradient(135deg, #E8491D 0%, #FF6B3D 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(232,73,29,0.2) !important;
}
.c-button--primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(232,73,29,0.3) !important;
}
.c-button--primary:active {
  transform: scale(0.97) !important;
}

/* Secondary */
.c-button--secondary {
  border-radius: 10px !important;
}
.c-button--secondary:hover {
  background: rgba(232,73,29,0.06) !important;
  border-color: rgba(232,73,29,0.2) !important;
}

/* Danger */
.c-button--danger {
  background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%) !important;
  color: #fff !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════════
   POST LIST ITEMS
   ═══════════════════════════════════════════════════════════ */
.c-list-item {
  border-radius: 14px !important;
  padding: 20px 24px !important;
  margin-bottom: 10px !important;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.25s ease !important;
  animation: fadeUp 0.4s cubic-bezier(0.16,1,0.3,1) both !important;
}

.c-list-item:nth-child(2) { animation-delay: 0.05s !important; }
.c-list-item:nth-child(3) { animation-delay: 0.1s !important; }
.c-list-item:nth-child(4) { animation-delay: 0.15s !important; }
.c-list-item:nth-child(5) { animation-delay: 0.2s !important; }

.c-list-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4) !important;
  border-color: rgba(232,73,29,0.12) !important;
}

/* Post titles — DINCOROS */
.c-list-item .text-title,
.c-list-item .text-title a {
  font-family: 'DINCOROS', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  transition: color 0.2s ease !important;
}

.c-list-item .text-title a:hover {
  color: #FF6B3D !important;
}

/* ═══════════════════════════════════════════════════════════
   VOTE / SUPPORT COUNTER
   ═══════════════════════════════════════════════════════════ */
.c-support-counter button {
  border-radius: 10px !important;
  font-family: 'DM Mono', monospace !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
  min-width: 48px !important;
}

.c-support-counter button:hover {
  border-color: rgba(232,73,29,0.3) !important;
  color: #E8491D !important;
  transform: translateY(-1px) !important;
}

.c-support-counter button.c-support-counter--voted {
  background: rgba(232,73,29,0.08) !important;
  border-color: rgba(232,73,29,0.25) !important;
  color: #E8491D !important;
  animation: pulseGlow 2s ease infinite !important;
}

/* ═══════════════════════════════════════════════════════════
   TAGS & BADGES
   ═══════════════════════════════════════════════════════════ */
.c-tag {
  background: rgba(232,73,29,0.06) !important;
  color: #E8491D !important;
  border: 1px solid rgba(232,73,29,0.1) !important;
  border-radius: 6px !important;
  font-family: 'DINCOROS', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 3px 10px !important;
}

.c-badge {
  border-radius: 6px !important;
  font-family: 'DINCOROS', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ═══════════════════════════════════════════════════════════
   USER ELEMENTS
   ═══════════════════════════════════════════════════════════ */
.c-avatar {
  border-radius: 8px !important;
}

.c-avatar--staff {
  border-color: #E8491D !important;
}

/* ═══════════════════════════════════════════════════════════
   POST DETAIL PAGE
   ═══════════════════════════════════════════════════════════ */
.text-large {
  font-family: 'DINCOROS', sans-serif !important;
  font-weight: 900 !important;
  font-size: 30px !important;
}

/* ═══════════════════════════════════════════════════════════
   COMMENTS / DISCUSSION
   ═══════════════════════════════════════════════════════════ */
.c-comment {
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
  padding: 18px 0 !important;
}

.c-markdown-text {
  font-family: 'Outfit', sans-serif !important;
  line-height: 1.7 !important;
  font-size: 15px !important;
}

/* Rich text editor */
.c-comment-input {
  border-radius: 12px !important;
}

/* ═══════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════ */
.c-modal-window {
  background: #151821 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6) !important;
}

.c-modal-dimmer {
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(4px) !important;
}

/* ═══════════════════════════════════════════════════════════
   ADMIN / SETTINGS
   ═══════════════════════════════════════════════════════════ */
label {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ═══════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════ */
.c-tab-nav a {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}

.c-tab-nav a.active {
  color: #E8491D !important;
  border-bottom-color: #E8491D !important;
}

/* ═══════════════════════════════════════════════════════════
   TOGGLE
   ═══════════════════════════════════════════════════════════ */
.c-toggle input:checked + label {
  background: #E8491D !important;
}

/* ═══════════════════════════════════════════════════════════
   SELECT
   ═══════════════════════════════════════════════════════════ */
select {
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.c-footer {
  opacity: 0.25 !important;
  font-size: 12px !important;
  transition: opacity 0.3s ease !important;
}
.c-footer:hover {
  opacity: 0.5 !important;
}

/* ═══════════════════════════════════════════════════════════
   MISC
   ═══════════════════════════════════════════════════════════ */
hr {
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
}

.container {
  max-width: 1080px !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2A2E42; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3A3F58; }

/* Powered by Fider */
a[href*="fider.io"] {
  color: #2A2E42 !important;
}

/* ═══════════════════════════════════════════════════════════
   FILTER / SORT BUTTONS (use Fider's .hover class)
   ═══════════════════════════════════════════════════════════ */
.hover:hover {
  background-color: rgba(232,73,29,0.04) !important;
}

/* ═══════════════════════════════════════════════════════════
   TOOLTIP
   ═══════════════════════════════════════════════════════════ */
[data-tooltip]::before {
  background-color: #1B1E2B !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  font-family: 'Outfit', sans-serif !important;
}