/* ==========================================================================
   Modern Nbit Feed Akışı - Design System & Custom Styles
   White Rabbit Theme & Rabbit Hole Integration
   ========================================================================== */

/* Color Presets & Theme Variables */
:root {
  --nbit-primary: #6366f1;
  --nbit-primary-hover: #4f46e5;
  --nbit-primary-light: rgba(99, 102, 241, 0.12);
  --nbit-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  --nbit-card-bg: #ffffff;
  --nbit-card-border: rgba(226, 232, 240, 0.8);
  --nbit-card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  --nbit-radius: 16px;
  --nbit-blur: 16px;
}

/* Color Accent Presets */
html[data-nbit-accent="indigo"] {
  --nbit-primary: #6366f1;
  --nbit-primary-hover: #4f46e5;
  --nbit-primary-light: rgba(99, 102, 241, 0.12);
  --nbit-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

html[data-nbit-accent="emerald"] {
  --nbit-primary: #10b981;
  --nbit-primary-hover: #059669;
  --nbit-primary-light: rgba(16, 185, 129, 0.12);
  --nbit-gradient: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
}

html[data-nbit-accent="sunset"] {
  --nbit-primary: #f97316;
  --nbit-primary-hover: #ea580c;
  --nbit-primary-light: rgba(249, 115, 22, 0.12);
  --nbit-gradient: linear-gradient(135deg, #f97316 0%, #f43f5e 100%);
}

html[data-nbit-accent="cyber"] {
  --nbit-primary: #06b6d4;
  --nbit-primary-hover: #0891b2;
  --nbit-primary-light: rgba(6, 182, 212, 0.12);
  --nbit-gradient: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
}

html[data-nbit-accent="rose"] {
  --nbit-primary: #f43f5e;
  --nbit-primary-hover: #e11d48;
  --nbit-primary-light: rgba(244, 63, 94, 0.12);
  --nbit-gradient: linear-gradient(135deg, #f43f5e 0%, #d946ef 100%);
}

html[data-nbit-accent="amber"] {
  --nbit-primary: #f59e0b;
  --nbit-primary-hover: #d97706;
  --nbit-primary-light: rgba(245, 158, 11, 0.12);
  --nbit-gradient: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

html[data-nbit-accent="classic"] {
  --nbit-primary: #3b82f6;
  --nbit-primary-hover: #2563eb;
  --nbit-primary-light: rgba(59, 130, 246, 0.12);
  --nbit-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

/* Dark Mode Variables Adjustment */
html.dark, body.dark {
  --nbit-card-bg: #1e293b;
  --nbit-card-border: rgba(255, 255, 255, 0.08);
  --nbit-card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

/* Main Feed Card Modern Wrapper */
article.main-content.nbit-feed-card {
  position: relative;
  background-color: var(--nbit-card-bg);
  border-radius: var(--nbit-radius) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
  border: 1px solid var(--nbit-card-border);
  box-shadow: var(--nbit-card-shadow);
  overflow: hidden;
}

/* Card Styles */
article.main-content.nbit-card-glassmorphism {
  backdrop-filter: blur(var(--nbit-blur, 16px));
  -webkit-backdrop-filter: blur(var(--nbit-blur, 16px));
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.06);
}

html.dark article.main-content.nbit-card-glassmorphism {
  background: rgba(30, 41, 59, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

article.main-content.nbit-card-flat {
  box-shadow: none !important;
  border: 1px solid var(--nbit-card-border);
}

article.main-content.nbit-card-floating {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03) !important;
  border: 1px solid transparent;
}

article.main-content.nbit-card-minimal {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--nbit-card-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

article.main-content.nbit-card-neon_glow {
  border: 1px solid var(--nbit-primary);
  box-shadow: 0 0 15px var(--nbit-primary-light);
}

/* Glass Blur Levels */
.nbit-blur-soft { --nbit-blur: 8px; }
.nbit-blur-medium { --nbit-blur: 16px; }
.nbit-blur-heavy { --nbit-blur: 24px; }

/* Card Glow Styles */
article.main-content.nbit-glow-accent {
  box-shadow: 0 10px 25px -5px var(--nbit-primary-light), 0 4px 10px -2px rgba(0,0,0,0.04) !important;
}

article.main-content.nbit-glow-neon {
  border-color: var(--nbit-primary) !important;
  box-shadow: 0 0 20px -2px var(--nbit-primary-light) !important;
}

/* Hover Animations */
article.main-content.nbit-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -8px var(--nbit-primary-light), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
  border-color: var(--nbit-primary);
}

article.main-content.nbit-hover-glow_pulse:hover {
  box-shadow: 0 0 25px 2px var(--nbit-primary-light) !important;
  border-color: var(--nbit-primary) !important;
}

article.main-content.nbit-hover-scale_subtle:hover {
  transform: scale(1.01);
}

/* Avatar Styles */
article.main-content.nbit-avatar-squircle img.user-profile-picture,
article.main-content.nbit-avatar-squircle .post-header-data img {
  border-radius: 12px !important;
}

article.main-content.nbit-avatar-ring img.user-profile-picture,
article.main-content.nbit-avatar-ring .post-header-data img {
  border-radius: 9999px !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--nbit-primary) !important;
}

/* Typography Scales */
.nbit-typo-large .post-content-inner {
  font-size: 1.0625rem !important;
  line-height: 1.7 !important;
}

.nbit-typo-compact_font .post-content-inner {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* Density Controls */
.nbit-density-compact article.main-content.nbit-feed-card {
  padding-top: 0.75rem !important;
  padding-bottom: 0.5rem !important;
}

.nbit-density-compact .post-content {
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
}

.nbit-density-spacious article.main-content.nbit-feed-card {
  padding-top: 1.5rem !important;
  padding-bottom: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

/* Post Content & Typography */
article.main-content.nbit-feed-card .post-content-inner {
  color: #334155;
  font-size: 0.975rem;
  line-height: 1.6;
}

html.dark article.main-content.nbit-feed-card .post-content-inner {
  color: #cbd5e1;
}

/* Post Type Accent Badges */
.nbit-post-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.725rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--nbit-primary-light);
  color: var(--nbit-primary);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.nbit-post-type-badge.badge-quote {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.3);
}

.nbit-post-type-badge.badge-poll {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
  border-color: rgba(139, 92, 246, 0.3);
}

.nbit-post-type-badge.badge-versus {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Voting & Reaction Bar Styles */
.nbit-voting-pills .post-voting-container,
.nbit-voting-pills .voting-action-btn {
  border-radius: 9999px !important;
}

.nbit-voting-floating_glass .post-voting-container {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.nbit-voting-pills .reaction-button,
.nbit-voting-pills .action-pill {
  background-color: rgba(241, 245, 249, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.2s ease;
}

.nbit-voting-pills .reaction-button:hover,
.nbit-voting-pills .action-pill:hover {
  background-color: var(--nbit-primary-light);
  border-color: var(--nbit-primary);
  color: var(--nbit-primary);
  transform: scale(1.04);
}

/* Reaction Animations */
.nbit-reaction-pop .reaction-button:active,
.nbit-reaction-pop .voting-action-btn:active {
  transform: scale(1.25) rotate(-5deg);
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nbit-reaction-pulse .reaction-button:hover {
  animation: nbitPulse 1s infinite;
}

@keyframes nbitPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Media Max Heights & Border Radius */
.nbit-media-max-400 .post-media img,
.nbit-media-max-400 .post-media video {
  max-height: 400px !important;
  object-fit: cover !important;
  width: 100% !important;
}

.nbit-media-max-500 .post-media img,
.nbit-media-max-500 .post-media video {
  max-height: 500px !important;
  object-fit: cover !important;
  width: 100% !important;
}

.nbit-media-max-600 .post-media img,
.nbit-media-max-600 .post-media video {
  max-height: 600px !important;
  object-fit: cover !important;
  width: 100% !important;
}

.nbit-media-radius-match .post-media img,
.nbit-media-radius-match .post-media video {
  border-radius: calc(var(--nbit-radius) - 4px) !important;
}

.nbit-media-radius-full .post-media img,
.nbit-media-radius-full .post-media video {
  border-radius: 24px !important;
}

.nbit-media-radius-square .post-media img,
.nbit-media-radius-square .post-media video {
  border-radius: 0 !important;
}

/* Media Hover Effects */
article.main-content.nbit-media-hover-zoom_in .post-media img,
article.main-content.nbit-media-hover-zoom_in .post-media video {
  transition: transform 0.35s ease;
}
article.main-content.nbit-media-hover-zoom_in:hover .post-media img,
article.main-content.nbit-media-hover-zoom_in:hover .post-media video {
  transform: scale(1.03);
}

article.main-content.nbit-media-hover-brightness .post-media img,
article.main-content.nbit-media-hover-brightness .post-media video {
  transition: filter 0.3s ease;
}
article.main-content.nbit-media-hover-brightness:hover .post-media img,
article.main-content.nbit-media-hover-brightness:hover .post-media video {
  filter: brightness(1.08);
}

/* Comments Style */
article.main-content.nbit-comments-modern_cards .single-comment-item {
  background: rgba(248, 250, 252, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  margin-bottom: 0.75rem;
  padding: 0.75rem;
}
html.dark article.main-content.nbit-comments-modern_cards .single-comment-item {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}