@import "tailwindcss";

@theme {
  --color-accent: #f97316;
}

/* Globális Téma Beállítások */
:root {
  --bg-primary: #fcfcfc;
  --bg-secondary: #f4f4f5;
  --bg-card: #ffffff;
  --text-primary: #09090b;
  --text-secondary: #71717a;
  --border-color: #e4e4e7;
  --glow-color: rgba(249, 115, 22, 0.15);
}

body[data-theme="dark"] {
  --bg-primary: #0a1428;
  --bg-secondary: #0f1d36;
  --bg-card: #142244;
  --text-primary: #e5e7eb;
  --text-secondary: #9ca3af;
  --border-color: rgba(59, 130, 246, 0.12);
  --glow-color: rgba(249, 115, 22, 0.45);
  color-scheme: dark;
}

/* CSS változók érvényesítése a testen + Immersive ambient radial glow top down */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body[data-theme="dark"] {
  background-image: radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.04) 0%, #0a1428 75%);
  background-attachment: fixed;
}

/* Glassmorphic Cards under Dark Mode - Overrides Tailwind background colors dynamically */
body[data-theme="dark"] .bg-white,
body[data-theme="dark"] .bg-zinc-900,
body[data-theme="dark"] .bg-zinc-950,
body[data-theme="dark"] .bg-gray-100 {
  background-color: rgba(10, 18, 36, 0.65) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-color: rgba(59, 130, 246, 0.12) !important;
}

/* Dynamic Hover border color glow in Dark Mode */
body[data-theme="dark"] .group:hover,
body[data-theme="dark"] .hover\:border-orange-500:hover {
  border-color: rgba(249, 115, 22, 0.5) !important;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.06) !important;
}

/* AI Highlighted Special Card */
body[data-theme="dark"] #movie-ai,
body[data-theme="dark"] .bg-gray-100.border-gray-150 {
  border-color: rgba(249, 115, 22, 0.28) !important;
  background-color: rgba(8, 8, 8, 0.75) !important;
  box-shadow: 0 0 25px rgba(249, 115, 22, 0.05) !important;
}

/* Poster Card styles */
body[data-theme="dark"] #hero-poster,
body[data-theme="dark"] .aspect-\[2\/3\] img,
body[data-theme="dark"] img.w-16.h-24 {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 40px -15px rgba(249, 115, 22, 0.18) !important;
}

/* Custom Letter spacing & Caps rules representing the UI */
.nav-link {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.77rem !important;
}

/* Brand header text design sync */
#logo-link span {
  font-weight: 900 !important;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

/* Finom kártya beúszás animáció */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.movie-card-anim {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Élménykategória aktív stílusa */
.category-pill.active {
  background-color: #f97316 !important;
  color: #ffffff !important;
  border-color: #ea580c !important;
  box-shadow: 0 0 16px var(--glow-color);
}

/* Sötét gombok / akciógombok neon izzása */
body[data-theme="dark"] #copy-prompt-btn,
body[data-theme="dark"] #reset-filters-btn {
  background-color: rgba(249, 115, 22, 0.08) !important;
  color: #f97316 !important;
  border-color: rgba(249, 115, 22, 0.25) !important;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.05);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-theme="dark"] #copy-prompt-btn:hover,
body[data-theme="dark"] #reset-filters-btn:hover {
  background-color: #f97316 !important;
  color: #000000 !important;
  border-color: #f97316 !important;
  box-shadow: 0 0 18px rgba(249, 115, 22, 0.3);
}

/* Egyéni Csúszka (Range Slider) stílus */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: #e4e4e7;
  height: 4px;
  border-radius: 9999px;
  outline: none;
  transition: background 0.2s;
}

body[data-theme="dark"] input[type="range"] {
  background: rgba(255, 255, 255, 0.08); /* Nagyon vékony, áttetsző csúszka háttér */
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f97316;
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease;
}

body[data-theme="dark"] input[type="range"]::-webkit-slider-thumb {
  border-color: #0a1428;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.65);
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.3);
  background: #ea580c;
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.95);
}

input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #f97316;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-theme="dark"] input[type="range"]::-moz-range-thumb {
  border-color: #050505;
}

input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.3);
}

/* Beágyazott videó (16:9 arány megtartás) */
.video-ratio-16-9 {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
}

.video-ratio-16-9 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* AI Prompt kóddoboz stílusa */
.prompt-code-editor {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  position: relative;
  background-color: rgba(2, 2, 2, 0.8) !important;
  border: 1px solid rgba(249, 115, 22, 0.2) !important;
  color: #f97316 !important;
  text-shadow: 0 0 10px rgba(249, 115, 22, 0.15);
}

/* Scrollbarok testreszabása az extra luxus és sötét hatás érdekében */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(10, 20, 40, 0.3);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(249, 115, 22, 0.5);
}

/* Radar diagram ragyogása sötét módban */
body[data-theme="dark"] canvas {
  filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.18));
}

/* DNS Csúszkák struktúrális osztályai */
.dns-slider {
  display: flex;
  flex-direction: column;
}

.dns-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dns-slider-input {
  width: 100%;
}

.dns-slider-value {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  color: #f97316;
}

/* Hero szöveg konténer */
.hero-tagline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Részletes nézet szekció kártya */
.detail-section {
  /* Alapértelmezett üres osztály - CSS testreszabáshoz */
}