:root {
	--sotetkek: #003049;
	--vilagoskek:#669bbc;
	--sotetvoros:#c1121f;
	--barionkek:#4F9eD3;
	--sarga:#ffb703;
	--bs-border-radius :0;
	--bs-border-radius-sm :0;
	--bs-border-radius-lg :0;
}

.hoveringdiv {
  position: relative;      /* a gyermek overlay ehhez igazodik */
  display: inline-block;   /* hogy csak a doboz méretét vegye fel */
}


.overlay {
	z-index: 1000;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  font-size:2em;
  height: 100%;
  background: rgba(102,155,188,0.7);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;             /* alapból láthatatlan */
  transition: opacity 0.3s ease;
}

.hoveringdiv:hover .overlay {
  opacity: 1;             /* hoverkor láthatóvá válik */
}

body {
	font-family: 'Rubik', serif !important;
	background-color: #f5ebe0;
	background-color: #fff;
}

a {
	color:var(--sotetkek);
}
.text-kek {
	color: var(--vilagoskek) !important;
}

.text-sek {
	color: var(--sotetkek) !important;
}

.text-sarga {
	color: var(--sarga) !important;
}

.paklycard {
	
}

.hasPakly {
	
}

.text-skek {
	color:var(--sotetkek) !important;
}

.text-voros {
	color:var(--sotetvoros) !important;
}

.smallbutton {
	--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;
}
.bg-barionkek {
	background-color: var(--barionkek) !important;
	border-color: var(--barionkek) !important;
}
.bg-kek {
	background-color: var(--vilagoskek) !important;
	border-color: var(--vilagoskek) !important;
}
.bg-voros {
	background-color: var(--sotetvoros) !important;
	border-color: var(--sotetvoros) !important;
}

.nav-pills .nav-link.active {
	background-color: var(--vilagoskek) !important;
	color: var(--sotetkek) !important;
}

.bg-skek {
	background-color: var(--sotetkek) !important;
	border-color: var(--sotetkek) !important;
}

.nav-item a, .nav-item a:hover {
	color:#000;
}

.nav-link.active {
	background-color:#000 !important;
	color:#fff !important;
}

#paklyPlayground {
  position: fixed; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 90%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding:0.4em;
  background-color: rgba(245,235,224,1); /* Black background with opacity */
  z-index: 1; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

.playcard {
	font-family: 'Montserrat', serif !important;
	font-size:1.5em;
	background-color: #fff;
	border:3px #d79c5b solid;
	margin:10px 0 !important;
	overflow-wrap: break-word;
	word-break: normal;
	transition: transform 0.3s ease;
	will-change: transform;
	touch-action: pan-y;
	
}

.answer {
  display: flex;
  justify-content: center;
  color: #d79c5b;
  cursor: pointer;
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  align-items: end;

}

.regfield {
	display: none;
}

/* Zöld sarok-háromszög + fehér pipa a jobb felső sarokban */
.corner-check{
  /* testre szabhatod: */
  --corner: 56px;                            /* a háromszög „befoglaló” mérete */
  --corner-color: var(--bs-success, #198754);/* zöld (Bootstrap 5: --bs-success) */
  
  position: relative;
  display: inline-block;
  line-height: 0;          /* képkörüli apró rések ellen */
  border-radius: inherit;  /* vegye át a wrapper a kerekítést */
  overflow: hidden;        /* vágja a sarkot, ha kerekített */
}

.corner-check > img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;  /* a kép is kövesse a kerekítést */
}

/* Zöld háromszög */
.corner-check::before{
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: var(--corner);
  height: var(--corner);
  background: var(--corner-color);
  /* háromszög kivágása */
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  z-index: 1;
  pointer-events: none;    /* ne takarja a klikket a képen/linken */
}

/* Fehér pipa (Font Awesome) */
.corner-check::after{
  content: "";
  position: absolute;
  top:   calc(var(--corner) * 0.12);
  right: calc(var(--corner) * 0.15);
  width:  calc(var(--corner) * 0.36);
  height: calc(var(--corner) * 0.36);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* fehér pipa stroke-kal */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  z-index: 2;
  pointer-events: none;
}

/* Gyors méretválasztók (opcionális) */
.corner-check.corner-check-sm{ --corner: 40px; }
.corner-check.corner-check-lg{ --corner: 72px; }

/* Zöld sarok-háromszög + fehér pipa a jobb felső sarokban */
.corner-new{
  /* testre szabhatod: */
  --corner: 56px;                            /* a háromszög „befoglaló” mérete */
  --corner-color: var(--bs-danger, #c02b0b);/* zöld (Bootstrap 5: --bs-success) */
  
  position: relative;
  display: inline-block;
  line-height: 0;          /* képkörüli apró rések ellen */
  border-radius: inherit;  /* vegye át a wrapper a kerekítést */
  overflow: hidden;        /* vágja a sarkot, ha kerekített */
}

.corner-new > img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;  /* a kép is kövesse a kerekítést */
}

/* Zöld háromszög */
.corner-new::before{
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: var(--corner);
  height: var(--corner);
  background: var(--corner-color);
  /* háromszög kivágása */
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  z-index: 1;
  pointer-events: none;    /* ne takarja a klikket a képen/linken */
}

/* Fehér pipa (Font Awesome) */
.corner-new::after{
  content: "ÚJ";
  position: absolute;
  top:   calc(var(--corner) * 0.30);
  right: calc(var(--corner) * 0.15);
  /* fehér pipa stroke-kal */
  color:#fff;
  z-index: 2;
  pointer-events: none;
}

/* Gyors méretválasztók (opcionális) */
.corner-new.corner-new-sm{ --corner: 40px; }
.corner-new.corner-new-lg{ --corner: 72px; }

/* Konténer: vízszintes görgetés + snap */
.horizontal-snap {
  scroll-snap-type: x mandatory;     /* kötelezően kattanjon elemre */
  -webkit-overflow-scrolling: touch; /* iOS lendület */
  scroll-padding-right: 1rem;         /* ha van belső padding, ezt vedd figyelembe */
  padding: 0 0 0 0;         /* opcionális belső margó */
  white-space: nowrap;               /* ne tördeljen sorba (ha nem flexet használnál) */
}

/* Elemenkénti igazítás */
.snap-card {
  scroll-snap-align: start;          /* az elem elejére igazít */
  scroll-snap-stop: always;          /* lassú görgetésnél is álljon meg (támogatott böngészőkben) */
  min-width: 170px;                  /* fix/mini szélesség a szép kattanáshoz */
  flex: 0 0 auto;                    /* ne törjön, ne nyúljon */
}

/* Scrollbar elrejtése */
.no-scrollbar {
  -ms-overflow-style: none;          /* IE/Edge régi */
  scrollbar-width: none;             /* Firefox */
}
.no-scrollbar::-webkit-scrollbar {
  display: none;                     /* Chrome/Safari/Edge */
}