/* --- Támogatás MENÜPONT Stílus --- */

/* Alap kinézet (Asztali nézetben) */
.franko-menu-btn {
	background: linear-gradient(45deg, #ff416c, #ff4b2b);
	color: #fff !important;
	/* Felülírjuk a menüszínt */
	padding: 8px 20px !important;
	/* Hogy gomb alakja legyen */
	border-radius: 6px;
	margin-left: 10px;
	/* Kis távolság a többi menüponttól */
	box-shadow: 0 4px 10px rgba(255, 75, 43, 0.3);
	transition: all 0.3s ease;
	display: inline-flex !important;
	/* Hogy az ikon és szöveg egy sorban legyen */
	align-items: center;
	gap: 8px;
	/* Távolság az ikon és szöveg között */
}

/* Hover effekt a menüpontra */
.franko-menu-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(255, 75, 43, 0.5);
	background: linear-gradient(45deg, #ff4b2b, #ff416c);
	color: #fff !important;
}

/* Az ikon animálása (Dobogás) - Ugyanaz, mint a gombnál */
.franko-menu-btn i,
.franko-menu-btn .fa-heart {
	animation: heartbeat 1.5s infinite;
}

/* --- MOBIL NÉZET KORREKCIÓ --- */
/* Mobilon ne legyen "gomb" kinézete, mert furán mutatna a listában */
@media (max-width: 991px) {
	.franko-menu-btn {
		background: none;
		/* Nincs háttér */
		box-shadow: none;
		/* Nincs árnyék */
		color: #ff416c !important;
		/* De a színe legyen pirosas! */
		padding: 10px 0 !important;
		margin: 0;
		border-radius: 0;
	}

	/* Mobilon is dobogjon a szív? Igen! */
	.franko-menu-btn i {
		color: #ff416c;
	}
}


/* --- Futóverseny Gomb Stílus (Zöld) --- */
.running-menu-btn {
	background: linear-gradient(45deg, #11998e, #38ef7d);
	/* Zöld átmenet */
	color: #fff !important;
	padding: 8px 20px !important;
	border-radius: 6px;
	margin-left: 10px;
	/* Ha azt akarod, hogy a szöveg ne csússzon el a mozgástól, fix szélesség is adható, de nem kötelező */
	overflow: hidden;
}

/* --- Az animáció (Hover nélkül, alapból fut) --- */
.running-menu-btn i,
.running-menu-btn .fa-running {
	display: inline-block;
	/* 3 másodperces ciklus: futás + pihenés */
	animation: run-loop 3s ease-in-out infinite;
}

/* A ciklus definíciója */
@keyframes run-loop {
	0% {
		transform: translateX(0);
		opacity: 1;
	}

	/* 1. fázis: Kifut jobbra (gyorsan) */
	10% {
		transform: translateX(20px);
		opacity: 0;
	}

	/* 2. fázis: Láthatatlanul visszaugrik balra */
	11% {
		transform: translateX(-20px);
		opacity: 0;
	}

	/* 3. fázis: Befut a helyére balról */
	20% {
		transform: translateX(0);
		opacity: 1;
	}

	/* 4. fázis: PIHENÉS (80%-ig nem mozdul, így olvasható marad) */
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Mobilon korrekció */
@media (max-width: 991px) {
	.running-menu-btn {
		background: none;
		color: #11998e !important;
		/* Zöld szöveg */
		padding: 10px 0 !important;
		margin: 0;
	}
}

/* --- ÁLTALÁNOS MENÜ GOMB STÍLUS (Diszkrét) --- */
.basic-menu-btn {
	/* Szolid, elegáns megjelenés */
	background-color: transparent;
	/* Nincs háttérszín alapból */
	color: #333 !important;
	/* Sötét szöveg (vagy #fff ha sötét a fejléc) */
	border: 1px solid #ddd;
	/* Halvány keret */

	/* A formai egységhez (ez egyezzen a többivel!) */
	border-radius: 6px;
	padding: 8px 15px !important;
	margin-left: 5px;

	transition: all 0.3s ease;
}

/* Hover effektus (Ha ráviszik az egeret) */
.basic-menu-btn:hover,
.basic-menu-btn.active {
	/* Aktív állapotban is */
	background-color: #f8f9fa;
	/* Halvány szürke háttér */
	border-color: #ccc;
	/* Sötétebb keret */
	color: #000 !important;
	transform: translateY(-1px);
	/* Pici mozgás */
}

/* Mobilon tisztítás */
@media (max-width: 991px) {
	.basic-menu-btn {
		border: none;
		padding: 10px 0 !important;
		margin: 0;
		background: none !important;
	}
}