:root {
	--szin_zold: #2e5e2e;
	--szin_bodycolor: #2f2f2f;
	--szin_barna: #3d2c1e;
	--szin_narancs: #ff9f1c;
	--szin_hatter: #f4e8c1;
	--szin_piros: red;
}

.kozepre {text-align: center;}

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

body {background: linear-gradient(135deg, #f5f7e8 0%, #d9e4c7 100%); color: var(--szin_bodycolor); 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: var(--szin_zold); 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 svg {height: 24px; fill: var(--szin_hatter); cursor: pointer; transition: transform 0.3s;}
.menu-icon:hover {transform: rotate(90deg);}

.header-logo {display: flex; align-items: center; gap: 10px;}
.header-logo svg {height: 2rem; fill: var(--szin_narancs);}
.header-logo span {font-size: 18px; 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, var(--szin_zold) 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 svg {position: absolute; top: 15px; right: 15px; height: 24px; fill: var(--szin_hatter); cursor: pointer; transition: transform 0.3s;}
.nav-menu .close-icon svg:hover {transform: rotate(90deg); fill: var(--szin_narancs);}

.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: var(--szin_narancs); color: #fff; transform: translateX(10px);}

.install {display:none; width: 100%; padding:15px 20px; background:#4CAF50; color: #d9e4c7; border:none; border-radius: 5px; cursor:pointer; font-size: 18px;}

/* Tartalom */
.content {padding: 80px 10px 60px; text-align: center;}
.content h1 {font-size: 28px; color: var(--szin_zold); 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: var(--szin_narancs); 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: var(--szin_zold); color: #f4e8c1; border-radius: 50%; font-size: 20px; font-weight: bold; cursor: pointer; transition: background 0.3s; margin: 20px auto;
	display: block; border: none;}
.start-btn:hover {background: #1a3c1a;}

/* Stopper */
.stopwatch {font-size: 24px; font-weight: bold; color: var(--szin_zold); margin: 20px auto; display: none;}

/* Stop gomb */
.stop-btn {width: 100px; height: 100px; background: var(--szin_narancs); 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 10px;}
.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: var(--szin_zold); 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: var(--szin_bodycolor);}
.accordion-header:hover {background: #1a3c1a;}
.accordion-header.leolvasva:hover {background: #fdd835;}
.accordion-header::after {content: '';
	display: inline-block; width: 20px; height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23f4e8c1' d='M137.4 406.6l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7l105.4-105.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-128 128c-12.5 12.5-32.8 12.5-45.3 0z'/%3E%3C/svg%3E");
	background-size: contain; background-repeat: no-repeat; vertical-align: middle;
}
.accordion-header.active::after {content: '';
	display: inline-block; width: 20px; height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23f4e8c1' d='M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z'/%3E%3C/svg%3E");
	background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle;
}

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

/* Alsó menü */
.bottom-nav {position: fixed; bottom: 0; width: 100%; background: var(--szin_barna); 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: var(--szin_narancs); transform: scale(1.1); fill: var(--szin_narancs);
	svg {fill: var(--szin_narancs)}
}
.bottom-nav svg {fill: var(--szin_hatter); height: 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: 10px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	z-index: 2000; width: 94%; max-height: 80vh; overflow-y: auto; text-align: left;
	ul {margin-left: 10px;}
}

.modal.active {display: block;}
.modal h2, .modal h3 {margin-bottom: 10px; color: var(--szin_zold);}

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

.modal button {background: var(--szin_narancs); padding: 8px 12px; border-radius: 4px; cursor: pointer; transition: background 0.3s; display: block; margin: 10px auto 0; font-weight:900; font-size: 1rem;}
.modal button:hover {background: #e68a00;}

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

.modal a {color: var(--szin_narancs); 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 */
.edit-modal label {display: block; font-weight: bold;}
.edit-modal select {width: 100%; padding: 5px; margin-bottom: 5px; 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;}

#add-bolya-btn {background: var(--szin_zold); 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 */
#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: var(--szin_zold);}

/* 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-container {position: relative; width: 270px; height: 270px; margin: 0 auto;}
.compass {width: 270px; height: 270px; background-color: #F3F3F3; border-radius: 100%; background-image: -webkit-linear-gradient(top, #F7F7F7, #ECECEC); position: absolute; top: 0; left: 0;}

.compass-inner {width: 229.5px; height: 229.5px; background-color: #3D3D3D; border-radius: 100%; position: relative; left: 20.25px; top: 20.25px; border: 2px solid #C5C5C5;}

.main-arrow {height: 100%; width: 20.25px; left: 104.625px; position: relative; padding-top: 3.375px; box-sizing:border-box; transition: transform 0.5s ease;}
.arrow-up {width: 0; height: 0; border-left: 10.125px solid transparent; border-right: 10.125px solid transparent; border-bottom: 111.375px solid #F3F3F3; /* Fehér nyíl */ position: relative;}
.arrow-down {-webkit-transform: rotate(180deg); width: 0; transform: rotate(180deg); -ms-transform: rotate(180deg); height: 0; border-left: 10.125px solid transparent; border-right: 10.125px solid transparent;
	border-bottom: 111.375px solid #EF5052; /* Piros nyíl */ position: relative;
}
#direction-arc {position: absolute; top: 0; left: 0;}

/* S.O.S. modal */
#sos-modal svg {height: 40px; fill: red;}

/* Túra kiértékelés */
#summary-content {
	p {margin: 10px;}
}
.kiertekeles-item {border-bottom: 1px solid #ccc; padding: 10px 0;}

/* 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 svg {height: 1.2rem;}
	.header-logo span {font-size: 16px;}

	.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 {padding: 15px;}

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

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