/**
 * Robogó Bérlés — frontend stílus a mobil-minta alapján.
 * Képregény / akció-komiksz hangulat: fekete alap, piros–kék–fehér kontraszt,
 * "robbanás" sorszám-buborék, sebesség-vonalak, comic városi sziluett (CSS/SVG).
 *
 * Reszponzív slider: mobilon 1, tableten 2, számítógépen 3 robogó látszik.
 * A kártya magassága a képernyőhöz igazodik (dvh), hogy egy robogó minden
 * információja görgetés nélkül elférjen.
 */

:root {
	--robogo-fekete: #0a0a10;
	--robogo-sotet: #16161f;
	--robogo-piros: #e5232e;
	--robogo-kek: #1f6fe0;
	--robogo-vilagoskek: #37a6ff;
	--robogo-sarga: #ffd21f;
	--robogo-zold: #23c552;
	--robogo-feher: #ffffff;
	/* A kártya magassága: férjen el a képernyőn görgetés nélkül. */
	--robogo-kartya-mag: min(calc(100vh - 130px), 820px);
}

@supports (height: 100dvh) {
	:root {
		--robogo-kartya-mag: min(calc(100dvh - 130px), 820px);
	}
}

/* ===== Carousel — 1 / 2 / 3 kártya nézet ===== */

.robogo-carousel {
	--robogo-nezet: 1;
	--robogo-koz: 16px;
	position: relative;
	max-width: 420px;
	margin: 0 auto;
	padding: 0 4px;
}

/* Tablet: 2 robogó. */
@media (min-width: 768px) {
	.robogo-carousel {
		--robogo-nezet: 2;
		max-width: 830px;
	}
}

/* Számítógép: 3 robogó. */
@media (min-width: 1100px) {
	.robogo-carousel {
		--robogo-nezet: 3;
		max-width: 1250px;
	}
}

.robogo-carousel__ablak {
	overflow: hidden;
	padding: 6px 2px;
}

.robogo-carousel__sav {
	display: flex;
	gap: var(--robogo-koz);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.robogo-carousel__sav > .robogo-kartya {
	flex: 0 0 calc((100% - (var(--robogo-nezet) - 1) * var(--robogo-koz)) / var(--robogo-nezet));
	min-width: 0;
}

/* Léptető nyilak a minta szerint: nagy fehér chevron fekete kontúrral,
   mögötte piros "szilánk" robbanás-formák (inline SVG a shortcode-ban). */
.robogo-nyil {
	position: absolute;
	top: 44%;
	transform: translateY(-50%);
	z-index: 5;
	width: clamp(52px, 8vh, 70px);
	height: auto;
	padding: 0;
	/* !important: a témák gyakran színes hátteret/keretet tesznek a
	   button:hover/:focus elemekre — itt csak a nyíl-SVG látszhat. */
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.55));
	transition: transform 0.15s;
}

.robogo-nyil:hover,
.robogo-nyil:focus,
.robogo-nyil:focus-visible,
.robogo-nyil:active {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: 0;
}

.robogo-nyil svg {
	display: block;
	width: 100%;
	height: auto;
}

.robogo-nyil--jobb svg {
	transform: scaleX(-1);
}

.robogo-nyil:hover {
	transform: translateY(-50%) scale(1.1);
}

.robogo-nyil:disabled {
	opacity: 0.35;
	cursor: default;
	transform: translateY(-50%);
}

.robogo-nyil--bal { left: -6px; }
.robogo-nyil--jobb { right: -6px; }

@media (min-width: 768px) {
	.robogo-nyil--bal { left: -20px; }
	.robogo-nyil--jobb { right: -20px; }
}

/* Dot indikátorok: szürke pontok, az aktív piros (a minta szerint). */
.robogo-pontok {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 14px;
}

.robogo-pontok button {
	width: 14px;
	height: 14px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #4a4a52;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}

.robogo-pontok button.aktiv {
	background: var(--robogo-piros);
	transform: scale(1.15);
	box-shadow: 0 0 8px rgba(229, 35, 46, 0.7);
}

/* ===== Kártya ===== */

.robogo-kartya {
	/* border-box: a 3px keret is beleszámít a szélességbe — enélkül
	   tableten/desktopon kicsúszna az utolsó kártya a sávból. */
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	height: var(--robogo-kartya-mag);
	overflow: hidden;
	border-radius: 14px;
	border: 4px solid var(--robogo-feher);
	background: var(--robogo-fekete);
	color: var(--robogo-feher);
	font-family: "Arial Black", "Segoe UI", Arial, sans-serif;
	/* Tiszta fehér keret fekete kontúrral, mint a mintán — nincs piros
	   derengés, ami "átvérezne" a kártya mögé. */
	box-shadow:
		0 0 0 2px #000,
		6px 8px 18px rgba(0, 0, 0, 0.65);
}

/* Comic háttér a minta alapján — dedikált SVG grafika: mély kék
   robbanás-sugarak, piros festékfröccsenések (splatter), városi
   sziluett és halftone raszter egyben (assets/img/robogo-kartya-hatter.svg). */
.robogo-kartya__hatter {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Két rétegű háttér: elöl a webhely médiatárából származó háttérkép,
	   alatta a beépített SVG grafika — ha a kép nem érhető el, az látszik. */
	background:
		url(https://scooterrentx.com/wp-content/uploads/2026/07/42c857ae-7be3-4162-8753-ff9592c0e985.jpeg) center / cover no-repeat,
		#0d0d1c url(../img/robogo-kartya-hatter.svg) center / cover no-repeat;
}

/* A városi sziluett és a sugarak már a háttér-SVG részei. */
.robogo-kartya__varos,
.robogo-kartya__vonalak {
	display: none;
}

.robogo-kartya > *:not(.robogo-kartya__hatter) {
	position: relative;
	z-index: 1;
}

/* Fejléc: robbanás-sorszám balra, badge + név jobbra. */
.robogo-kartya__fejlec {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px 0;
	flex: 0 0 auto;
}

/* Robbanás-buborék: precíz inline SVG a sablonban (sokágú csillag fekete
   kontúrral, halftone raszterrel és kontúros piros számmal). */
.robogo-kartya__sorszam {
	display: block;
	flex: 0 0 auto;
	width: clamp(98px, 16.5vh, 136px);
	margin: -8px 0 0 -6px; /* kissé a sarok fölé lóg, mint a mintán */
	filter: drop-shadow(3px 4px 4px rgba(0, 0, 0, 0.6));
}

.robogo-kartya__sorszam svg {
	display: block;
	width: 100%;
	height: auto;
}

.robogo-kartya__fejlec-jobb {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	min-width: 0;
}

/* Státusz-badge: zöld keretes kapszula pöttyel (SZABAD) / sárga (FOGLALT). */
.robogo-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 20px;
	border: 3px solid;
	border-radius: 12px;
	background: rgba(5, 14, 8, 0.85);
	font-size: clamp(14px, 2vh, 18px);
	font-weight: 900;
	font-style: italic;
	letter-spacing: 1px;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}

.robogo-badge i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 8px currentColor;
}

.robogo-badge--szabad {
	color: var(--robogo-zold);
	border-color: var(--robogo-zold);
}

.robogo-badge--foglalt {
	color: var(--robogo-sarga);
	border-color: var(--robogo-sarga);
	background: rgba(20, 16, 4, 0.85);
}

/* Robogó neve: nagy, dőlt, fehér, fekete kontúrral — jobbra igazítva. */
.robogo-kartya__nev {
	margin: 0;
	font-size: clamp(23px, 3.5vh, 34px);
	line-height: 1.02;
	font-weight: 900;
	font-style: italic;
	letter-spacing: 0.5px;
	text-align: right;
	text-transform: uppercase;
	color: var(--robogo-feher);
	text-shadow:
		2px 2px 0 #000,
		-2px -2px 0 #000,
		2px -2px 0 #000,
		-2px 2px 0 #000,
		4px 5px 0 rgba(0, 0, 0, 0.55);
}

/* Bal oldali szlogen a minta szerint: dőlt, kontúros piros-kék sorok. */
.robogo-kartya > .robogo-kartya__szlogen {
	position: absolute;
	left: 12px;
	top: 51%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 2px;
	transform: rotate(-7deg);
	pointer-events: none;
}

.robogo-kartya__szlogen-sor {
	font-size: clamp(13px, 2vh, 18px);
	font-weight: 900;
	font-style: italic;
	letter-spacing: 0.5px;
	text-shadow:
		2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000,
		2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		3px 3px 0 rgba(0, 0, 0, 0.6);
}

.robogo-kartya__szlogen-sor--piros { color: var(--robogo-piros); }
.robogo-kartya__szlogen-sor--kek { color: var(--robogo-vilagoskek); }

/* Kép: a rugalmas középső sáv — nagyobb fotó, ez kapja a felszabaduló helyet. */
.robogo-kartya__kep {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1 1 auto;
	min-height: 0;
	padding: 0 6px;
}

.robogo-kartya__kep img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.75));
}

/* Alsó sáv: specifikációk balra, árdoboz jobbra. */
.robogo-kartya__also {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 8px;
	padding: 0 10px 10px;
	flex: 0 0 auto;
}

/* --- Értékelősorok: szögletes, levágott sarkú sávok rublikákkal --- */

.robogo-ertekelesek {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(4px, 0.8vh, 8px);
	flex: 1 1 auto;
	min-width: 0;
}

/* Kétrétegű "keret": a külső réteg a szín, a belső a sötét kitöltés —
   így a levágott sarkú (nyolcszög) forma keretet kap. */
.robogo-ertekeles {
	--robogo-sor-szin: var(--robogo-kek);
	padding: 2px;
	background: var(--robogo-sor-szin);
	clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 30%, 100% 70%, calc(100% - 12px) 100%, 12px 100%, 0 70%, 0 30%);
	filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5));
}

.robogo-ertekeles--piros { --robogo-sor-szin: var(--robogo-piros); }
.robogo-ertekeles--kek { --robogo-sor-szin: var(--robogo-kek); }
.robogo-ertekeles--szurke { --robogo-sor-szin: #b8b8c6; }

.robogo-ertekeles__belso {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	background: #0a0a14;
	clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 30%, 100% 70%, calc(100% - 11px) 100%, 11px 100%, 0 70%, 0 30%);
	overflow: hidden;
}

.robogo-ertekeles__ikon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--robogo-feher);
}

.robogo-ertekeles__ikon svg {
	width: 100%;
	height: 100%;
}

.robogo-ertekeles__cimkek {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.15;
}

/* Fix, kicsi betűméret: a LÓERŐ / SEBESSÉG / FOGYASZTÁS felirat
   minden szélességnél teljes egészében kifér. */
.robogo-ertekeles__cimkek strong {
	font-size: 10px;
	font-weight: 900;
	font-style: italic;
	letter-spacing: 0.3px;
	color: var(--robogo-feher);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.robogo-ertekeles__cimkek em {
	font-size: 8.5px;
	font-weight: 700;
	font-style: italic;
	color: var(--robogo-sor-szin);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.robogo-ertekeles--szurke .robogo-ertekeles__cimkek em {
	color: #d5d5e0;
}

.robogo-ertekeles__kockak {
	display: flex;
	gap: 2px;
	margin-left: 4px;
	flex: 0 0 auto;
}

.robogo-ertekeles__kockak i {
	width: 8px;
	height: 8px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 1px;
	background: #191922;
}

.robogo-ertekeles--piros .robogo-ertekeles__kockak i.tele {
	background: var(--robogo-piros);
	border-color: #ff7b82;
}

.robogo-ertekeles--kek .robogo-ertekeles__kockak i.tele {
	background: var(--robogo-kek);
	border-color: #7db8ff;
}

/* Fogyasztás: fehér kitöltött kockák, a sor fehér keretéhez illően. */
.robogo-ertekeles--szurke .robogo-ertekeles__kockak i.tele {
	background: var(--robogo-feher);
	border-color: #e6e6ee;
}

/* Specifikációk: sötét sávok kék kerettel, ikonokkal. */
.robogo-specek {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(5px, 0.9vh, 9px);
	min-width: 0;
}

.robogo-specek li {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: clamp(5px, 0.9vh, 8px) 12px;
	background: rgba(8, 8, 18, 0.88);
	border: 2px solid #bcd9ff;
	border-radius: 10px;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55), 0 0 12px rgba(55, 166, 255, 0.5);
	font-size: clamp(13px, 1.9vh, 17px);
	font-weight: 900;
	font-style: italic;
	white-space: nowrap;
}

.robogo-specek__ikon {
	display: inline-flex;
	flex: 0 0 auto;
	width: clamp(18px, 2.6vh, 24px);
	height: clamp(18px, 2.6vh, 24px);
	color: var(--robogo-feher);
}

.robogo-specek__ikon svg {
	width: 100%;
	height: 100%;
}

/* Árdoboz: piros keret, NAPI/HETI/HAVI sárga összegekkel, "brutto" felirattal. */
.robogo-arak {
	flex: 0 0 auto;
	min-width: clamp(112px, 31%, 144px);
	padding: clamp(8px, 1.3vh, 12px) 12px;
	background: rgba(12, 4, 6, 0.92);
	border: 3px solid var(--robogo-piros);
	border-radius: 10px;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}

.robogo-arak__sor {
	display: flex;
	flex-direction: column;
	padding: clamp(3px, 0.6vh, 5px) 0;
}

.robogo-arak__sor + .robogo-arak__sor {
	border-top: 2px dashed rgba(229, 35, 46, 0.6);
}

.robogo-arak__cimke {
	font-size: clamp(10px, 1.5vh, 13px);
	font-weight: 900;
	font-style: italic;
	color: var(--robogo-feher);
	letter-spacing: 0.5px;
}

.robogo-arak__osszeg {
	font-size: clamp(16px, 2.4vh, 22px);
	font-weight: 900;
	font-style: italic;
	color: var(--robogo-sarga);
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
	line-height: 1.1;
}

.robogo-arak__brutto {
	align-self: flex-end;
	font-size: clamp(8px, 1.1vh, 10px);
	font-weight: 700;
	font-style: italic;
	color: var(--robogo-feher);
	opacity: 0.9;
}

/* VÁLASZTOM gomb a minta szerint: átlátszó sáv, két oldalán nagy zöld
   hármas chevron-nyilakkal (SVG), közepén levágott sarkú, zöld keretes,
   foltos sötétzöld doboz fehér, fekete kontúros dőlt felirattal. */
.robogo-gomb-valasztom {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 0 0 auto;
	margin: 0 10px 12px;
	padding: 0;
	background: transparent !important;
	border: 0 !important;
	outline: 0;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	color: #fff !important;
	font-family: inherit;
	text-decoration: none !important;
	cursor: pointer;
}

.robogo-gomb-valasztom:hover,
.robogo-gomb-valasztom:focus,
.robogo-gomb-valasztom:focus-visible,
.robogo-gomb-valasztom:active {
	outline: 0;
	box-shadow: none !important;
	background: transparent !important;
	border: 0 !important;
}

/* Hármas chevron-nyilak (SVG) a doboz két oldalán. */
.robogo-gomb-valasztom__nyil {
	flex: 0 0 auto;
	width: clamp(34px, 5vh, 48px);
	filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5));
}

.robogo-gomb-valasztom__nyil svg {
	display: block;
	width: 100%;
	height: auto;
}

.robogo-gomb-valasztom__nyil--jobb {
	transform: scaleX(-1);
}

/* Levágott sarkú doboz kétrétegű kerettel: kívül élénkzöld, belül sötét.
   display:block kötelező — inline span-ként a clip-path nem renderelődik. */
.robogo-gomb-valasztom__doboz {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	box-sizing: border-box;
	min-width: 0;
	padding: 3px;
	background: #2fdd6a;
	clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 32%, 100% 68%, calc(100% - 14px) 100%, 14px 100%, 0 68%, 0 32%);
	filter: drop-shadow(0 0 2px #000) drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.55));
}

.robogo-gomb-valasztom__belso {
	display: block;
	padding: clamp(10px, 1.7vh, 15px) 12px;
	background:
		radial-gradient(circle at 18% 35%, rgba(0, 0, 0, 0.45) 0 3px, transparent 4px),
		radial-gradient(circle at 62% 72%, rgba(0, 0, 0, 0.4) 0 4px, transparent 5px),
		radial-gradient(circle at 85% 28%, rgba(0, 0, 0, 0.35) 0 2px, transparent 3px),
		radial-gradient(circle at 38% 60%, rgba(0, 0, 0, 0.35) 0 3px, transparent 4px),
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.16) 0 10px, transparent 10px 22px),
		linear-gradient(180deg, #15602f 0%, #0c3a1e 100%);
	clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 32%, 100% 68%, calc(100% - 13px) 100%, 13px 100%, 0 68%, 0 32%);
	font-size: clamp(17px, 2.6vh, 26px);
	font-weight: 900;
	font-style: italic;
	letter-spacing: 3px;
	text-align: center;
	color: #fff;
	/* Fekete kontúr rétegezett árnyékokkal — a felirat mindig fehér marad. */
	text-shadow:
		2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000,
		2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
		3px 4px 0 rgba(0, 0, 0, 0.6);
	transition: filter 0.15s;
}

.robogo-gomb-valasztom:hover .robogo-gomb-valasztom__belso {
	filter: brightness(1.15);
}

/* Tablet/desktop nézetben (2-3 kártya) a kártya keskenyebb, ezért a
   gombfelirat fix, kisebb mérettel garantáltan kifér. */
@media (min-width: 768px) {
	.robogo-kartya .robogo-gomb-valasztom__belso {
		font-size: 16px;
		letter-spacing: 2px;
	}
}

/* ===== Single oldal — arculat: comic szalagok, halftone raszter,
   színes-csíkos info-kártyák fehér kerettel (a minta-képek szerint) ===== */

.robogo-single {
	position: relative;
	background:
		radial-gradient(ellipse 70% 40% at 12% 5%, rgba(229, 35, 46, 0.4), transparent 60%),
		radial-gradient(ellipse 70% 45% at 88% 18%, rgba(31, 111, 224, 0.35), transparent 60%),
		radial-gradient(ellipse 95% 55% at 50% 100%, rgba(120, 15, 22, 0.5), transparent 65%),
		#0e0e1c;
	color: var(--robogo-feher);
	padding: 28px 14px 60px;
	font-family: "Segoe UI", Arial, sans-serif;
}

/* Halftone (raszterpöttyös) comic textúra a teljes oldalon. */
.robogo-single::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px);
	background-size: 14px 14px;
	pointer-events: none;
}

.robogo-single__belso {
	position: relative;
	max-width: 860px;
	margin: 0 auto;
}

.robogo-single__fejlec {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.robogo-single__nev {
	margin: 0;
	font-family: "Arial Black", Arial, sans-serif;
	font-size: clamp(28px, 6vw, 46px);
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	color: var(--robogo-feher);
	text-shadow:
		3px 3px 0 var(--robogo-piros),
		-2px -2px 0 #000,
		2px -2px 0 #000,
		-2px 2px 0 #000,
		6px 7px 0 rgba(0, 0, 0, 0.5);
}

.robogo-single__hero {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	min-height: 260px;
	border: 3px solid var(--robogo-feher);
	border-radius: 20px;
	margin-bottom: 20px;
	box-shadow: 0 0 0 2px #000, 6px 8px 0 rgba(0, 0, 0, 0.45), 0 0 22px rgba(229, 35, 46, 0.5);
}

.robogo-single__kep {
	position: relative;
	z-index: 1;
	max-width: 70%;
	height: auto;
	filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.7));
}

/* --- Státusz-szekció a kép alatt --- */

.robogo-statusz {
	margin: -4px 0 24px;
	text-align: center;
}

/* Ferde comic szalag (mint a sárga "TÖBB, MINT EGY ROBOGÓBÉRLÉS!" sáv). */
.robogo-statusz__szalag {
	display: inline-block;
	padding: 12px 28px;
	border: 3px solid #000;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.6);
	transform: skewX(-8deg);
	font-family: "Arial Black", Arial, sans-serif;
	font-size: clamp(16px, 3.4vw, 24px);
	font-weight: 900;
	font-style: italic;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.robogo-statusz--elerheto .robogo-statusz__szalag {
	background: var(--robogo-zold);
	color: #fff;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

.robogo-statusz--foglalt .robogo-statusz__szalag {
	background: var(--robogo-sarga);
	color: #000;
}

/* Foglalt időszakok doboza: narancs csíkos kártya fehér kerettel. */
.robogo-statusz__doboz {
	margin-top: 18px;
	padding: 16px 18px;
	text-align: left;
	background:
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.07) 0 12px, transparent 12px 26px),
		linear-gradient(135deg, #b06a12 0%, #7a4508 100%);
	border: 3px solid var(--robogo-feher);
	border-radius: 16px;
	box-shadow: 0 0 0 2px #000, 6px 8px 0 rgba(0, 0, 0, 0.45);
}

.robogo-statusz__doboz h2 {
	margin: 0 0 10px;
	font-family: "Arial Black", Arial, sans-serif;
	font-size: 19px;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--robogo-feher);
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}

.robogo-statusz__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.robogo-statusz__lista li {
	padding: 9px 2px;
	font-weight: 900;
	font-style: italic;
	font-size: 16px;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.robogo-statusz__lista li + li {
	border-top: 2px dashed rgba(255, 255, 255, 0.5);
}

.robogo-statusz__megjegyzes {
	margin: 12px 0 0;
	font-weight: 600;
	font-style: italic;
	color: rgba(255, 255, 255, 0.95);
}

/* --- Info-kártyák (specifikáció / árazás) --- */

.robogo-single__racs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 22px;
}

.robogo-single__doboz {
	box-sizing: border-box;
	padding: 18px;
	background:
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 0 12px, transparent 12px 26px),
		linear-gradient(135deg, #1c56b8 0%, #0c2a63 100%);
	border: 3px solid var(--robogo-feher);
	border-radius: 16px;
	box-shadow: 0 0 0 2px #000, 6px 8px 0 rgba(0, 0, 0, 0.45);
}

.robogo-single__doboz h2 {
	margin: 0 0 12px;
	font-family: "Arial Black", Arial, sans-serif;
	font-size: 19px;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--robogo-feher);
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}

/* Árazás kártya: piros-bordó változat sárga összegekkel. */
.robogo-arak--nagy {
	min-width: 0;
	padding: 18px;
	background:
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 0 12px, transparent 12px 26px),
		linear-gradient(135deg, #a5121f 0%, #520811 100%);
	border: 3px solid var(--robogo-feher);
	border-radius: 16px;
	box-shadow: 0 0 0 2px #000, 6px 8px 0 rgba(0, 0, 0, 0.45);
}

.robogo-arak--nagy .robogo-arak__sor + .robogo-arak__sor {
	border-top: 2px dashed rgba(255, 255, 255, 0.45);
}

/* Az aloldalon az árak maradjanak nagyok (a kártyán kicsinyítettük). */
.robogo-arak--nagy .robogo-arak__cimke {
	font-size: 14px;
}

.robogo-arak--nagy .robogo-arak__osszeg {
	font-size: clamp(20px, 3vw, 26px);
}

.robogo-specek--nagy li {
	display: flex;
	justify-content: space-between;
	white-space: normal;
	font-style: normal;
	background: rgba(8, 8, 18, 0.55);
}

.robogo-specek__cimke {
	color: rgba(255, 255, 255, 0.8);
	font-weight: 600;
}

/* Leírás: sötét panel fehér kerettel, hogy illeszkedjen a kártyákhoz. */
.robogo-single__leiras {
	box-sizing: border-box;
	margin-bottom: 28px;
	padding: 18px;
	background: rgba(10, 10, 24, 0.7);
	border: 3px solid var(--robogo-feher);
	border-radius: 16px;
	box-shadow: 0 0 0 2px #000, 6px 8px 0 rgba(0, 0, 0, 0.45);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92);
}

/* ===== Űrlap ===== */

.robogo-urlap-doboz {
	box-sizing: border-box;
	padding: 20px 16px;
	background: #10101f;
	border: 3px solid var(--robogo-feher);
	border-radius: 16px;
	box-shadow: 0 0 0 2px #000, 6px 8px 0 rgba(0, 0, 0, 0.45), 0 0 18px rgba(229, 35, 46, 0.4);
	color: var(--robogo-feher);
}

.robogo-urlap-doboz__cim {
	margin: 0 0 16px;
	font-family: "Arial Black", Arial, sans-serif;
	font-size: 22px;
	font-weight: 900;
	font-style: italic;
	letter-spacing: 1px;
	color: var(--robogo-feher);
	text-shadow: 2px 2px 0 var(--robogo-piros);
}

.robogo-uzenet {
	padding: 12px 14px;
	margin-bottom: 14px;
	border-radius: 8px;
	font-weight: 700;
}

.robogo-uzenet--siker {
	background: #0f2c18;
	border: 2px solid var(--robogo-zold);
	color: #7be3a4;
}

.robogo-uzenet--hiba {
	background: #2e0d0f;
	border: 2px solid var(--robogo-piros);
	color: #ff9aa0;
}

.robogo-mezo {
	margin: 0 0 14px;
}

.robogo-mezo label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	color: rgba(255, 255, 255, 0.85);
}

.robogo-mezo input[type="text"],
.robogo-mezo input[type="tel"],
.robogo-mezo input[type="email"],
.robogo-mezo textarea {
	width: 100%;
	padding: 11px 12px;
	background: var(--robogo-fekete);
	border: 2px solid var(--robogo-kek);
	border-radius: 8px;
	color: var(--robogo-feher);
	font-size: 15px;
	box-sizing: border-box;
}

.robogo-mezo input:focus,
.robogo-mezo textarea:focus {
	outline: none;
	border-color: var(--robogo-vilagoskek);
	box-shadow: 0 0 0 3px rgba(55, 166, 255, 0.25);
}

.robogo-mezo input.robogo-hibas {
	border-color: var(--robogo-piros);
}

.robogo-mezo--checkbox label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 600;
	cursor: pointer;
}

.robogo-mezo--checkbox input {
	margin-top: 3px;
	accent-color: var(--robogo-zold);
}

.robogo-mezo--datumok {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	position: relative;
}

.robogo-mezo--datumok input {
	cursor: pointer;
}

.robogo-mezo-hiba {
	display: block;
	grid-column: 1 / -1;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 700;
	color: #ff9aa0;
}

.robogo-mezo-hiba[hidden] {
	display: none;
}

/* Honeypot — látogató elől elrejtve. */
.robogo-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Küldés gomb: a böngésző/téma alap gombstílusai (háttér, keret,
   fókusz-gyűrű) lenullázva — így nem jelenhet meg idegen színű keret.
   Flex konténer, hogy a belső zöld doboz teljes szélességben kitöltse. */
.robogo-urlap .robogo-gomb-valasztom--kuldes {
	display: flex;
	width: 100%;
	margin: 10px 0 0;
	padding: 0;
	box-sizing: border-box;
	background: transparent !important;
	border: 0 !important;
	outline: 0;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

.robogo-urlap .robogo-gomb-valasztom--kuldes:hover,
.robogo-urlap .robogo-gomb-valasztom--kuldes:focus,
.robogo-urlap .robogo-gomb-valasztom--kuldes:active {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: 0;
}

/* Egysoros, garantáltan fehér felirat — nem törik két sorba mobilon sem. */
.robogo-gomb-valasztom--kuldes .robogo-gomb-valasztom__belso {
	font-size: clamp(11px, 3.1vw, 19px);
	letter-spacing: 1px;
	line-height: 1.3;
	white-space: nowrap;
	padding: 12px 14px;
}

/* ===== Naptár (beépített datepicker) ===== */

.robogo-naptar {
	grid-column: 1 / -1;
	background: var(--robogo-fekete);
	border: 2px solid var(--robogo-kek);
	border-radius: 10px;
	padding: 12px;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}

.robogo-naptar__fejlec {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	font-weight: 900;
	text-transform: capitalize;
}

.robogo-naptar__fejlec button {
	width: 32px;
	height: 32px;
	border: 2px solid var(--robogo-kek);
	border-radius: 6px;
	background: var(--robogo-sotet);
	color: var(--robogo-feher);
	font-size: 14px;
	cursor: pointer;
}

.robogo-naptar__racs {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
}

.robogo-naptar__nap-nev {
	padding: 4px 0;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--robogo-vilagoskek);
}

.robogo-naptar__nap {
	padding: 8px 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: var(--robogo-sotet);
	color: var(--robogo-feher);
	font-size: 13px;
	text-align: center;
	cursor: pointer;
}

.robogo-naptar__nap:hover:not(:disabled) {
	border-color: var(--robogo-vilagoskek);
}

.robogo-naptar__nap:disabled {
	background: #241318;
	color: #6b3a41;
	text-decoration: line-through;
	cursor: not-allowed;
}

.robogo-naptar__nap.kivalasztott {
	background: var(--robogo-zold);
	font-weight: 900;
}

.robogo-naptar__nap.tartomanyban {
	background: rgba(35, 197, 82, 0.35);
}

.robogo-naptar__ures {
	background: transparent;
}

/* ===== Finomítások kis képernyőre ===== */

@media (min-width: 640px) {
	.robogo-single__racs {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 360px) {
	.robogo-mezo--datumok {
		grid-template-columns: 1fr;
	}
}

/* Alacsony képernyőn (fekvő telefon) engedjük magasabbra nőni a kártyát. */
@media (max-height: 560px) {
	:root {
		--robogo-kartya-mag: 560px;
	}
}