/* ==========================================================================
   GLOBAL.CSS
   Základní nastavení, proměnné a globální komponenty napříč celým webem.
   ========================================================================== */

/* --- 1. PROMĚNNÉ (Design Tokens) --- */  
:root {
  /* --- ZNAČKA (Brand) --- */
  --netflix-red: rgb(214, 28, 28);
  --netflix-red-rgb: 214, 28, 28; /* Pro použití v rgba() */
  --netflix-red-hover: rgb(190, 20, 20);

  /* --- POZADÍ A POVRCHY (Backgrounds & Surfaces) --- */
  --bg-black: #000000; /* Úplně černé pozadí webu/patičky */
  --bg-black-rgb: 0, 0, 0; /* Pro použití v rgba() */
  --bg-dark: #141414; /* Netflix tmavé pozadí (pro případné sekce) */
  --surface-dark: #222222; /* Karty filmů, pozadí položek v roletce */
  --surface-medium: #333333; /* Pozadí inputů a roletky (select) */
  --surface-light: #444444; /* Aktivní stav inputů (focus) */

  /* Průhledná pozadí (Overlays) */
  --overlay-dark: rgba(0, 0, 0, 0.75); /* Pozadí registračního formuláře */

  /* --- TEXTY (Typography) --- */
  --text-primary: #ffffff; /* Hlavní nadpisy a texty */
  --text-secondary: #e5e5e5; /* Popisky polí (labely) */
  --text-help: #bbbbbb; /* Doplňující texty a nápovědy */
  --text-muted: #737373; /* Nejméně výrazný text (např. patička) */

  /* --- RÁMEČKY (Borders) --- */
  --border-color: #555555; /* Standardní rámeček inputů a roletky */

  /* --- STAVOVÉ BARVY (Status/Validation) --- */
  --color-success: #46d369; /* Zelená pro úspěch */
  --bg-success-light: rgba(70, 211, 105, 0.1); /* Zelené průhledné pozadí */
  --bg-error-light: rgba(
    214,
    28,
    28,
    0.1
  ); /* Červené průhledné pozadí pro chybu */
}

/* --- 2. ZÁKLADNÍ NASTAVENÍ (Base) --- */
body {
  background-color: var(--bg-black);
  color: var(--text-primary);
  font-family: Arial, sans-serif;
  min-height: 100vh; /* Zajistí, že pozadí je přes celou obrazovku */
  display: flex;
  flex-direction: column;
}

main {
  padding: 0px;
  flex-grow: 1;
}

/* --- 3. GLOBÁLNÍ KOMPONENTY (Components) --- */
.btn-netflix {
  background-color: var(--netflix-red);
  color: var(--text-primary);
  padding: 8px 16px;
  border: none;
  border-radius: 20px; /* Sjednocené zaoblení */
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.3s ease,
    transform 0.2s ease;
}

.btn-netflix:hover {
  background-color: var(--netflix-red-hover);
  color: var(--text-primary);
  transform: scale(1.05); /* Jemné zvětšení pro interaktivitu */
}

.btn-netflix:active {
  transform: scale(0.98);
}

.scroll-up-btn {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.2s ease;
}

/* Třída, kterou přidáme přes JavaScript pro zobrazení */
.scroll-up-btn.visible {
  opacity: 1;
  visibility: visible;
}

.scroll-up-btn:hover {
  transform: scale(1.1); /* Efekt zvětšení při najetí myší */
}

/* --- 4. MEDIA QUERIES --- */
/* ==========================================================================
   TABLET (min-width: 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .btn-netflix {
    font-size: 1.2rem;
    padding: 10px 20px;
  }
  .scroll-up-btn {
    width: 50px;
    height: 50px;
  }
}