/* style_login.css - FINÁLNA VERZIA S POZADÍM HORY */

:root { --card-w: 1200px; }
*{box-sizing:border-box}

/* --- ZÁKLADNÉ ŠTÝLY --- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  overflow-y: scroll; 
}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  margin:0; padding:0; 
  /* ===== ZMENA: Pozadie je teraz obrázok hory ===== */
  background-color: #1a1a1a; /* Tmavá farba, ak by sa obrázok nenačítal */
  background-image: url('erebor_mountain.png');
  background-size: cover; /* Obrázok pokryje celú plochu */
  background-position: center center; /* Centrovanie obrázka */
  background-attachment: fixed; /* Pozadie sa pri rolovaní nehýbe */
}
/* Pôvodné pseudo-elementy pre pozadie boli odstránené */

/* Vertikálne centrovanie pre login/register */
body:not(.landing-page) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* NAVBAR */
.navbar{
  position:absolute;
  top:0;
  left: 0;
  right: 0;
  z-index:1000; 
  background: #000; /* Pevná čierna farba */
  border-bottom:1px solid #222;
}
.navwrap{ max-width:var(--card-w); margin:0 auto; display:flex; align-items:center; padding:10px 16px; gap: 16px; }
.brand img{ height:54px; width:auto; display:block; }
.spacer { flex-grow: 1; }

/* KARTA PRE FORMULÁR */
.card {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(5px);
  max-width: 500px;
  padding: 2.5em; 
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.card h2 {
  text-align: center; margin: 0 0 2em 0; padding: 1em; background-color: #000;
  color: #fff; font-weight: 800; text-transform: uppercase; border-radius: 8px;
}
.card label { font-weight: 600; margin-bottom: 0.5em; display: block; color: #333; }
.card input {
  display: block; width: 100%; padding: 0.8em; margin-bottom: 1.2em; border: 1px solid #ccc;
  border-radius: 8px; box-sizing: border-box; font-size: 1em;
}
.card input:focus { border-color: #000; outline: 2px solid #00000030; }
.card button {
  width: 100%; padding: 0.9em; border: none; background-color: #000; color: white;
  border-radius: 8px; cursor: pointer; font-size: 1em; font-weight: bold; transition: background-color 0.2s;
}
.card button:hover { background-color: #333; }
.card .switch-link { margin-top: 1.5em; text-align: center; font-size: 14px;}
.card .switch-link a, .card .switch-link a:visited { color: #000; text-decoration: none; font-weight: 600; }
.card .switch-link a:hover { text-decoration: underline; }

/* NAVIGÁCIA NA ÚVODNEJ STRÁNKE - tieto pravidlá zostávajú pre index.html */
.login-btn-nav {
  background-color: #fff; color: #000; padding: 8px 16px; border-radius: 8px;
  text-decoration: none; font-weight: 800; font-size: 14px; transition: background-color 0.2s, color 0.2s;
}
.login-btn-nav:hover { background-color: #eee; color: #000; }
.main-nav { display: flex; gap: 22px; margin-right: 24px; }
.main-nav a, .main-nav a:visited { color: #fff; text-decoration: none; font-weight: 800; font-size: 15px; white-space: nowrap; }
.main-nav a:hover { text-decoration: underline; }
.main-nav a.active-nav {
  text-decoration: none;
  color: #fff;
}

/* HAMBURGER MENU PRE ÚVODNÚ STRÁNKU */
.nav-items-container { display: flex; align-items: center; gap: 22px; }
.hamburger-toggle { display: none; opacity: 0; position: absolute; pointer-events: none; }
.hamburger-label { display: none; }

@media (max-width: 992px) {
    .nav-items-container {
        display: none; position: absolute; top: 100%; right: 0; background: #111;
        border-top: 1px solid #333; flex-direction: column; align-items: stretch;
        padding: 10px; box-shadow: 0 8px 16px rgba(0,0,0,0.3); width: 240px;
    }
    .hamburger-label {
        display: flex; flex-direction: column; width: 30px; height: 24px;
        cursor: pointer; justify-content: space-between;
    }
    .hamburger-label span {
        display: block; height: 3px; width: 100%; background: #fff;
        border-radius: 3px; transition: all 0.3s ease-in-out;
    }
    .hamburger-toggle:checked ~ .nav-items-container { display: flex; }
    .hamburger-toggle:checked ~ .hamburger-label span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
    .hamburger-toggle:checked ~ .hamburger-label span:nth-child(2) { opacity: 0; }
    .hamburger-toggle:checked ~ .hamburger-label span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }
    .nav-items-container .main-nav { flex-direction: column; align-items: flex-start; gap: 0; margin-right: 0; }
    .nav-items-container a { padding: 10px 15px; width: 100%; border-radius: 6px; }
    .nav-items-container a:hover { background: #222; text-decoration: none; }
    .nav-items-container .login-btn-nav {
        text-align: center; margin-top: 10px; border-top: 1px solid #333;
        padding-top: 15px; background: #333; color: #fff;
    }
    .nav-items-container .login-btn-nav:hover { background: #444; }
}