* {margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif;}

.kozepre {text-align: center;}

body {background: linear-gradient(135deg, #f5f7e8 0%, #d9e4c7 100%); color: #2f2f2f; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; overflow-x: hidden;}

/* Felső menü */
.top-nav {position: fixed; top: 0; width: 100%; background: #2e5e2e; padding: 15px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); z-index: 1000; display: flex; justify-content: space-between; align-items: center;}

.menu-icon {font-size: 24px; color: #f4e8c1; cursor: pointer; padding: 10px; transition: transform 0.3s;}
.menu-icon:hover {transform: rotate(90deg);}

.header-logo {display: flex; align-items: center; gap: 10px;}
.header-logo i {font-size: 30px; color: #ff9f1c;}
.header-logo span {font-size: 20px; font-weight: bold; color: #f4e8c1; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}

.nav-menu {position: fixed; top: 0; left: -300px; width: 300px; height: 100vh; background: linear-gradient(180deg, #2e5e2e 0%, #1a3c1a 100%); transition: left 0.5s ease; z-index: 999;
	box-shadow: 2px 0 10px rgba(0, 0, 0, 0.4); overflow-y: hidden; /* Alapértelmezésben nem görgethető */}
/* Ha a tartalom nagyobb, akkor görgethetővé válik */
@media (min-height: 100vh) {
    .nav-menu:has(> ul) {overflow-y: auto;}
	.bottom-nav {z-index: 0 !important;}
}
.nav-menu.active {left: 0;}
.nav-menu .close-icon {position: absolute; top: 15px; right: 15px; font-size: 24px; color: #f4e8c1; cursor: pointer; padding: 10px; transition: transform 0.3s;}
.nav-menu .close-icon:hover {transform: rotate(90deg); color: #ff9f1c;}

.nav-menu ul {list-style: none; padding: 60px 20px 20px; display: flex; flex-direction: column; gap: 15px;}
.nav-menu li {width: 100%;}

.nav-menu a {color: #f4e8c1; text-decoration: none; font-size: 18px; font-weight: bold; padding: 15px 20px; display: block; background: rgba(255, 159, 28, 0.1); border-radius: 8px;
	transition: background 0.3s, transform 0.2s, color 0.3s;}
.nav-menu a:hover {background: #ff9f1c; color: #fff; transform: translateX(10px);}

/* Tartalom */
.content {padding: 80px 20px 60px; text-align: center;}

.content h1 {font-size: 28px; color: #2e5e2e; margin-bottom: 20px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);}

.content p {font-size: 16px; line-height: 1.5; color: #4a4a4a; margin-bottom: 30px;}

.content .highlight {background: #ff9f1c; color: white; padding: 5px 10px; border-radius: 5px; display: inline-block; margin: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}

/* Start gomb */
.start-btn {width: 100px; height: 100px; background: #2e5e2e; color: #f4e8c1; border: none; border-radius: 50%; font-size: 20px; font-weight: bold; cursor: pointer; transition: background 0.3s;
	margin: 20px auto; display: block;}

.start-btn:hover {background: #1a3c1a;}

/* Stopper */
.stopwatch {font-size: 24px; font-weight: bold; color: #2e5e2e; margin: 20px auto; display: none;}

/* Stop gomb */
.stop-btn {width: 100px; height: 100px; background: #ff9f1c; color: #fff; border: none; border-radius: 50%; font-size: 20px; font-weight: bold; cursor: pointer; transition: background 0.3s;
	margin: 20px auto; display: none;}

.stop-btn:hover {background: #e68a00;}

/* Accordion */
.accordion {max-width: 600px; margin: 0 auto 20px;}
.accordion-item {background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); margin-bottom: 10px;}

.accordion-header {background: #2e5e2e; color: #f4e8c1; padding: 15px; font-size: 18px; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s;}
.accordion-header.leolvasva {background: #ffeb3b; color: #2f2f2f;}
.accordion-header:hover {background: #1a3c1a;}
.accordion-header.leolvasva:hover {background: #fdd835;}
.accordion-header::after {content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 20px;}
.accordion-header.active::after {content: '\f106';}

.accordion-content {display: none; padding: 15px; background: #f9f9f9; color: #4a4a4a; font-size: 16px; line-height: 1.6;}
.accordion-content p {margin-bottom: 10px;}
.accordion-content button {background: #ff9f1c; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; transition: background 0.3s;}
.accordion-content button:hover {background: #e68a00;}
.accordion-content.active {display: block;}

/* Alsó menü */
.bottom-nav {position: fixed; bottom: 0; width: 100%; background: #3d2c1e; padding: 10px 0; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); z-index: 1000;}
.bottom-nav ul {list-style: none; display: flex; justify-content: space-around; align-items: center;}

.bottom-nav a {color: #f4e8c1; text-decoration: none; font-size: 14px; font-weight: bold; display: flex; flex-direction: column; align-items: center; transition: color 0.3s, transform 0.2s;}
.bottom-nav a:hover {color: #ff9f1c; transform: scale(1.1);}
.bottom-nav i {font-size: 20px; margin-bottom: 5px;}

/* Modal stílusok (általános) */
.modal {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	z-index: 2000; width: 90%; max-width: 500px; max-height: 80vh; overflow-y: auto; text-align: left;
	ul {margin-left: 10px;}
}

.modal.active {display: block;}

.modal h2, .modal h3 {margin-bottom: 15px; color: #2e5e2e;}

.modal p {margin-bottom: 10px;}

.modal button {background: #ff9f1c; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; transition: background 0.3s; display: block; margin: 20px auto 0;}
.modal button:hover {background: #e68a00;}

.modal input {width: 100%; padding: 8px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px; font-size: 16px;}

.modal a {color: #ff9f1c; font-size: 18px; text-decoration: none; font-weight: bold; display: block; margin-top: 10px;}

.modal a:hover {text-decoration: underline;}

.modal-close {position: absolute; top: 10px; right: 10px; font-size: 24px; font-weight: bold; color: #333; cursor: pointer; border: none; background: none; padding: 0; line-height: 1;}
.modal-close:hover {color: #ff0000;}

/* Szerkesztő modal specifikus */
.edit-modal label {display: block; margin: 10px 0 5px; font-weight: bold;}
.edit-modal select {width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px;}

.edit-modal .close-edit-btn {position: absolute; top: 10px; right: 10px; background: #ff4d4d; color: #fff; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; transition: background 0.3s;}
.edit-modal .close-edit-btn:hover {background: #cc0000;}

.edit-buttons {display: flex; gap: 10px; margin-top: 20px;}

#add-bolya-btn {background: #2e5e2e; color: #f4e8c1; font-size: 20px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
#add-bolya-btn:hover {background: #1a3c1a;}

#delete-bolya-btn {background: #ff4d4d; color: #fff;}

#delete-bolya-btn:hover {background: #cc0000;}

/* QR szkenner specifikus */
#qr-scanner {text-align: center;}

#qr-video {width: 100%; max-width: 300px; border: 1px solid #ccc;}

#qr-canvas {display: none;}

#qr-result {margin-top: 10px; font-weight: bold; color: #2e5e2e;}

/* Térkép modal */
.map-modal {width: 90%; max-width: 600px; height: 80vh;}

#map {width: 100%; height: 84%;}

/* Profil modal */
.profile-modal label {display: block; margin: 10px 0 5px; font-weight: bold;}

/* Iránytű modal */
.compass-modal {text-align: center;}

.compass {width: 200px; height: 200px; margin: 20px auto; position: relative;}

.compass-circle {width: 100%; height: 100%; border-radius: 50%; border: 2px solid #2e5e2e; background: #f9f9f9;}

.compass-needle {position: absolute; top: 50%; left: 50%; width: 2px; height: 80px; background: #ff9f1c; transform-origin: bottom center; transition: transform 0.1s ease;}

#summary-content {
	p {margin: 10px;}
}


/* Reszponzív dizájn */
@media (max-width: 480px) {
	.nav-menu {width: 250px; left: -250px;}
	.nav-menu.active {left: 0;}
	.nav-menu a {font-size: 16px; padding: 12px 15px;}

	.header-logo span {font-size: 18px;}
	.header-logo i {font-size: 24px;}

	.content h1 {font-size: 24px;}
	.content p {font-size: 14px;}

	.accordion-header {font-size: 16px; padding: 12px;}
	.accordion-content {font-size: 14px; padding: 12px;}

	.bottom-nav a {font-size: 12px;}
	.bottom-nav i {font-size: 18px;}

	.start-btn,
	.stop-btn {width: 80px; height: 80px; font-size: 16px;}

	.stopwatch {font-size: 20px;}

	.modal,
	.map-modal,
	.compass-modal {width: 90%; padding: 15px;}

	.modal a,
	.modal input,
	.modal p {font-size: 14px;}

	.modal button {padding: 6px 12px;}

	.compass {width: 150px; height: 150px;}
	.compass-needle {height: 60px;}
}