/* Alap container beállítások */
body {
    margin: 0;
    font-family: "Times New Roman", serif;
    background-color: #000;
    color: #fff;
}

.container {
    max-width: 1200px; /* nagyobb a gridnek */
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* vízszintes közép */
}

/* Cím */
.title {
    font-size: 2em;
    text-align: center;
    margin-bottom: 20px;
}

/* Form csoportok */
.form-group {
    margin-bottom: 15px;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #000;
  color: #fff;
  font-family: Arial, sans-serif;
  margin: auto;
  padding: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== CÍM ===== */
.title {
  font-size: 52px;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(90deg, #d4af37, #b97cff, #4aa3ff, #d4af37);
  background-size: 300%;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 6s linear infinite;
}

@keyframes gradientMove {
  0% { background-position: 0%; }
  100% { background-position: 300%; }
}

/* ===== ELVÁLASZTÓ ===== */
.divider {
  width: 60%;
  height: 2px;
  margin: 25px auto 50px;
  background: linear-gradient(to right, transparent, white, transparent);
}

/* ===== FŐ KATEGÓRIA ===== */
.category {
  width: 100%;
  max-width: 1200px;
  padding: 20px;
  background-color: #111;
  border: 1px solid #555;
  border-radius: 10px;
}

/* ===== RÁCS ===== */
.subcategories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
    justify-content: center; /* hozzáadva: vízszintesen középre */
}
/* ===== DOBOZ ===== */
.subcategory {
    background-color: #222;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #555;
    width: 100%;
    max-width: 300px;       /* opcionális, hogy ne legyen túl széles */
    
    display: flex;
    flex-direction: column;  /* egymás alá */
    align-items: center;     /* középre */
}

/* ===== ALCÍM ===== */
.subcategory strong {
  display: block;
  margin-bottom: 15px;
  font-size: 1.3em;
  text-align: center;      /* biztosítja, hogy a cím középen legyen */
}

/* ===== BUBORÉKOK ===== */
.subcategory label {
    display: block;          /* biztos, hogy minden label új sorban van */
    width: 100%;             /* a szülő szélességéhez igazodik */
    max-width: 250px;        /* opcionális fix szélesség */
    padding: 14px;
    margin: 8px 0;           /* függőleges távolság */
    font-size: 1.1em;
    text-align: center;
    background-color: #333;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    float: none;             /* float teljesen eltávolítva */
}

/* kiválasztva */
label.selected {
  color: white;
  background: linear-gradient(270deg, #d4af37, #b97cff, #4aa3ff, #d4af37);
  background-size: 600%;
  animation: gradientMove 5s linear infinite;
}

/* rádió eltüntetése */
input[type="radio"] {
  display: none;
}

/* ===== GOMB ===== */
.vote-button {
  display: inline-block;
  padding: 16px 50px;
  font-size: 1.3em;
  font-weight: bold;
  text-decoration: none;
  color: white;
  border-radius: 30px;
  background: linear-gradient(90deg, #d4af37, #b97cff, #4aa3ff);
  background-size: 200%;
  transition: transform 0.3s, box-shadow 0.3s;
}

.vote-button.disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* ===== MOBIL FINOMHANGOLÁS ===== */
@media (max-width: 600px) {
  .title {
    font-size: 28px;
  }

  .divider {
    width: 90%;
  }

  .subcategory strong {
    font-size: 1.1em;
  }

  .subcategory label {
    font-size: 1em;
    padding: 12px;
  }
}