:root {
	--sotetkek: #003049;
	--vilagoskek:#669bbc;
	--sotetvoros:#c1121f;
	--barionkek:#4F9eD3;
	--halvanykek:#f1faee;
	--sarga:#f3da5e;
	--lila:#3c096c;
	--bs-border-radius-lg:40px;
	--bs-border-radius-sm:20px;
	--bs-border-radius:20px;
}

.smallbutton2 {
	text-align: center;
	font-size:8px;
}

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

.price {
	padding:4px;
	text-align: center;
	font-size:2em;
}
.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-halvanykek {
	background-color: var(--halvanykek) !important;
	border-color: var(--halvanykek) !important;
}
.bg-kek {
	background-color: var(--vilagoskek) !important;
	border-color: var(--vilagoskek) !important;
}

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

.bg-lila {
	background-color: var(--lila) !important;
	border-color: var(--lila) !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:0 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 */
}

.cardcategories {
	min-height:35px !important;
	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;  
}
.cardcategory{
	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: 100%;                  /* fix/mini szélesség a szép kattanáshoz */
	  flex: 0 0 auto;  
	text-align:center;
}

.category-container {
  position: relative;       /* hogy a dropdown ehhez igazodjon */
  z-index: 10;              /* hogy a többi fölött legyen */
}

/* a kiválasztott kategória mindig látszik */
.category-selected {
  background: white;
  cursor: pointer;
}

/* a lenyíló lista */
.category-dropdown {
  position: absolute;       /* nem tolja le a többi elemet */
  top: 100%;                /* közvetlenül a selected alatt */
  left: 0;
  right: 0;
  display: none;            /* alapból rejtve */
}

.category {
  cursor: pointer;
}

.category:hover {
}
.rating-wrapper {
  align-self: center;
  
  display: inline-flex;
  direction: rtl !important;
  margin-left: auto;
  text-align: center;

  label {
	color: #E1E6F6;
	cursor: pointer;
	display: inline-flex;
	font-size: 2rem;
	padding: 1rem .6rem;
	transition: color 0.5s;
  }
  
   svg {
	 -webkit-text-fill-color: transparent;
	 -webkit-filter: drop-shadow (2px 1px 3px rgba(150, 151, 154, 1));
	 filter:drop-shadow(2px 1px 3px rgba(150, 151, 154, 1));
  }

  input {
	height: 100%;
	width: 100%;
  }
  
  input {
	display: none;
  }

  label:hover,
  label:hover ~ label,
  input:checked ~ label  {
	color: var(--sarga);
  }

  label:hover,
  label:hover ~ label,
  input:checked ~ label  {
	color: var(--sarga);
  }
}


/* Fix tetején csúszó tálca */
.top-tray {
  position: fixed;
  top: 0; left: 0; right: 0;
  background-color: var(--vilagoskek);
  border-bottom: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 1030;
}
/* Felső „fogantyú” középen, csak zárt állapotban */
#trayHandle {
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex; justify-content: center;
  z-index: 1031;
  background-color: var(--vilagoskek);
  color:var(--sotetkek);
}
.tray-toggle {
  background: none; border: none; color: #fff;
}
.tray-toggle:hover { color: #fff; }
.tray-toggle i { transition: transform .25s; }
.tray-toggle[aria-expanded="true"] i { transform: rotate(180deg); }