/* ======== RESPONSIVE STYLES ======== */

/* Mobil (max 768px) */
@media (max-width: 768px) {
  .hero-inner {
    flex-direction: column;
    text-align: center;
  }

  .hero-cta {
    justify-content: center;
  }

  .grid.cards,
  .grid.faq,
  .form-row.two {
    grid-template-columns: 1fr;
  }
}

/* Tablet (769px – 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .cards,
  .features {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row.two {
    grid-template-columns: 1fr;
  }
}

/* Nagy kijelző (1200px felett) */
@media (min-width: 1200px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .features {
    grid-template-columns: repeat(4, 1fr);
  }
}





/* Menü gomb jobb felső sarokban */
.mobile-menu-toggle {
  display: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 1001;
}

/* Mobilmenü – alapállapotban rejtve */
.mobile-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 60px;
  right: 20px;
  background-color: var(--bg-alt);
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 1000;
}

.mobile-menu a {
  color: white;
  text-decoration: none;
  margin-bottom: 12px;
}

.mobile-menu a.btn {
  background: var(--brand-1);
  padding: 8px 12px;
  border-radius: var(--radius);
}

/* Mobilnézet aktiválása */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }
}

/* Asztali menü elrejtése mobilnézetben */
@media (max-width: 768px) {
  #menu {
    display: none;
  }
}

/* Napok beállítása box */
@media (max-width: 768px) {
  .admin-box {
    padding: 20px;
    width: 95%;
  }

  .availability-input {
    font-size: 14px;
    padding: 8px;
  }

@media (max-width: 768px) {
  .availability-submit {
    width: 100%;
    padding: 12px;
    font-size: 15px;
  }
}