/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

a {
	transition: .3s;
}

:root .bricks-button[class*="secondary"]:not(.outline):hover {
	background-color: var(--bricks-color-ozieso);
}

:root .bricks-button[class*="secondary"]:hover {
	border-color: var(--bricks-color-ozieso);
	color: #FFF;
}

.hero_h1_bigger {
	font-size: 64px;
}

.brxe-button {
	padding: 8px 24px;
}

.gold_color {
	color: #AF915E;
}

.dark_blue {
	color: #2C334D;
}

@media (max-width: 991px) {
	.hero_h1_bigger {
		font-size: 40px;
		display: block;
	}
}

@media (max-width: 767px) {
	.hero_h1_bigger {
		font-size: 32px;
		display: block;
	}
}



/* 2. kártya (KIEMELT) */
/* Alap állapot */
#brxe-yodtnc > .brxe-ntbozo:nth-child(1) {
  position: relative;                  /* kell a ::before-hoz */
  overflow: hidden;                    /* biztos ami biztos */
  background-color: rgba(255, 255, 255, 0.8);
}

/* A kép + kék átmenetes overlay külön rétegen, alapból láthatatlanul */
#brxe-yodtnc > .brxe-ntbozo:nth-child(1)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.65) 50%,
      rgba(255, 255, 255, 0.55) 100%
    ),
    url("../../../wp-content/uploads/2025/09/start_csomag.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;                          /* induljon kikapcsolva */
  transition: opacity .3s ease-in-out; /* csak áttetszőség animál */
  pointer-events: none;                /* ne takarja a kattintható elemeket */
  z-index: 0;
}

/* Tartalom legyen a fedőréteg felett */
#brxe-yodtnc > .brxe-ntbozo:nth-child(1) > * {
  position: relative;
  z-index: 1;
}

/* Hover: csak az overlay opacitása nő → finom ráúszás, nincs csúszás */
#brxe-yodtnc > .brxe-ntbozo:nth-child(1):hover::before {
  opacity: 1;
}


/* 2. kártya (KIEMELT) */
/* Alap állapot */
#brxe-yodtnc > .brxe-ntbozo:nth-child(2) {
  position: relative;                  /* kell a ::before-hoz */
  overflow: hidden;                    /* biztos ami biztos */
  background-color: rgba(44, 51, 77, 0.8);
  color: #fff;
}

/* A kép + kék átmenetes overlay külön rétegen, alapból láthatatlanul */
#brxe-yodtnc > .brxe-ntbozo:nth-child(2)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      90deg,
      rgba(44, 51, 77, 0.85) 0%,
      rgba(44, 51, 77, 0.65) 50%,
      rgba(44, 51, 77, 0.55) 100%
    ),
    url("../../../wp-content/uploads/2025/09/kiemelt_csomag-scaled.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;                          /* induljon kikapcsolva */
  transition: opacity .3s ease-in-out; /* csak áttetszőség animál */
  pointer-events: none;                /* ne takarja a kattintható elemeket */
  z-index: 0;
}

/* Tartalom legyen a fedőréteg felett */
#brxe-yodtnc > .brxe-ntbozo:nth-child(2) > * {
  position: relative;
  z-index: 1;
}

/* Hover: csak az overlay opacitása nő → finom ráúszás, nincs csúszás */
#brxe-yodtnc > .brxe-ntbozo:nth-child(2):hover::before {
  opacity: 1;
}


/* 3. kártya (EXKLUZÍV) */
/* Alap állapot */
#brxe-yodtnc > .brxe-ntbozo:nth-child(3) {
  position: relative;                  /* kell a ::before-hoz */
  overflow: hidden;                    /* biztos ami biztos */
  background-color: rgba(44, 51, 77, 1);
  color: #fff;
}

/* A kép + kék átmenetes overlay külön rétegen, alapból láthatatlanul */
#brxe-yodtnc > .brxe-ntbozo:nth-child(3)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      90deg,
      rgba(44, 51, 77, 0.85) 0%,
      rgba(44, 51, 77, 0.65) 50%,
      rgba(44, 51, 77, 0.55) 100%
    ),
    url("../../../wp-content/uploads/2025/09/exkluziv_csomag.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;                          /* induljon kikapcsolva */
  transition: opacity .3s ease-in-out; /* csak áttetszőség animál */
  pointer-events: none;                /* ne takarja a kattintható elemeket */
  z-index: 0;
}

/* Tartalom legyen a fedőréteg felett */
#brxe-yodtnc > .brxe-ntbozo:nth-child(3) > * {
  position: relative;
  z-index: 1;
}

/* Hover: csak az overlay opacitása nő → finom ráúszás, nincs csúszás */
#brxe-yodtnc > .brxe-ntbozo:nth-child(3):hover::before {
  opacity: 1;
}

/* --- Desktop: 2 oszlop + sticky bal hasáb --- */
@media (min-width: 1024px) {
  /* A section belső konténere legyen kétoszlopos grid */
  #brxe-iwdwkp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 3vw, 48px);
    align-items: start;
    overflow: visible !important; /* a sticky-hez fontos */
  }

  /* Bal oszlop (szöveg + gombok) legyen ragadós */
  #brxe-fargxj {
    position: sticky;
    position: -webkit-sticky;  /* Safari */
    top: clamp(16px, 6vh, 96px); /* fejléctől függően finomítható */
    align-self: start;
    height: fit-content;        /* grid-ben kell a stabil sticky-hez */
    z-index: 2;                 /* hogy a jobb oszlop ne takarja */
  }

  /* Jobb oszlop normálban scrollol */
  #brxe-cbeklz { 
    align-self: start;
  }

  /* Ha van WP admin bar, adjunk extra offsetet (finomítható) */
  body.admin-bar #brxe-fargxj { top: calc(16px + 48px); }
}

/* --- Mobilon/tablón egymás alatt, nincs sticky --- */
@media (max-width: 1023px) {
  #brxe-iwdwkp { display: block; }
  #brxe-fargxj { position: static; }
}


/* ===== Alap: pöttyök kikapcs minden érintett UL-nél ===== */
#brxe-wahxsy #brxe-wrebqo ul,
#brxe-wahxsy #brxe-kzdrpn ul,
#brxe-wahxsy #brxe-gynasd ul,
#brxe-wahxsy #brxe-vukntu ul,
#brxe-pqyrfl #brxe-avhuad ul,
#brxe-pqyrfl #brxe-vdjxzl ul,
#brxe-pqyrfl #brxe-ddjtat ul,
#brxe-pqyrfl #brxe-uuudoy ul,
#brxe-necboe #brxe-drcygj ul,
#brxe-necboe #brxe-xezwjo ul,
#brxe-necboe #brxe-xqnrci ul {
  list-style: none;
  margin: 0 0 1rem 0;
  padding: 0;
}

/* ===== Pipák a "tartalmaz" listákhoz (mindhárom szekció) ===== */
#brxe-wahxsy #brxe-wrebqo ul li,
#brxe-wahxsy #brxe-kzdrpn ul li,
#brxe-wahxsy #brxe-gynasd ul li,
#brxe-pqyrfl #brxe-avhuad ul li,
#brxe-pqyrfl #brxe-vdjxzl ul li,
#brxe-pqyrfl #brxe-ddjtat ul li,
#brxe-necboe #brxe-drcygj ul li,
#brxe-necboe #brxe-xezwjo ul li,
#brxe-necboe #brxe-xqnrci ul li {
  position: relative;
  padding-left: 1.6em;
  margin: 0.35em 0;
}

#brxe-wahxsy #brxe-wrebqo ul li::before,
#brxe-wahxsy #brxe-kzdrpn ul li::before,
#brxe-wahxsy #brxe-gynasd ul li::before,
#brxe-pqyrfl #brxe-avhuad ul li::before,
#brxe-pqyrfl #brxe-vdjxzl ul li::before,
#brxe-pqyrfl #brxe-ddjtat ul li::before,
#brxe-necboe #brxe-drcygj ul li::before,
#brxe-necboe #brxe-xezwjo ul li::before,
#brxe-necboe #brxe-xqnrci ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(0.15em);
  font-weight: 700;
  /* ha zöld pipát szeretnél: */
  /* color: #159947; */
}

/* ===== X jelek a "NEM tartalmaz" listákhoz ===== */
#brxe-wahxsy #brxe-vukntu ul li,
#brxe-pqyrfl #brxe-uuudoy ul li {
  position: relative;
  padding-left: 1.6em;
  margin: 0.35em 0;
}

#brxe-wahxsy #brxe-vukntu ul li::before,
#brxe-pqyrfl #brxe-uuudoy ul li::before {
  content: "✗";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(0.15em);
  font-weight: 700;
  /* ha piros X-et szeretnél: */
  /* color: #c62828; */
}

/* Alap: minden options-wrapper 1 oszlop */
#brxe-hhxoxs .options-wrapper {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ========== 1) Két oszlopos form + 16px gap ========== */
#brxe-hhxoxs {
  display: grid;
  grid-template-columns: 1fr;     /* mobilon 1 oszlop */
  gap: 16px;                      /* 16px függőleges + vízszintes */
}

/* Alapértelmezés: minden form-group teljes szélesség */
#brxe-hhxoxs .form-group {
  grid-column: 1 / -1;
}

/* Tablet/desktop: 2 oszlopos elrendezés */
@media (min-width: 768px) {
  #brxe-hhxoxs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Az első négy mező legyen „fél szélesség” (1 oszlopot foglal) */
  #brxe-hhxoxs .form-group:nth-child(1),
  #brxe-hhxoxs .form-group:nth-child(2),
  #brxe-hhxoxs .form-group:nth-child(3),
  #brxe-hhxoxs .form-group:nth-child(4) {
    grid-column: auto;          /* 1 oszlopot ér */
    width: auto !important;     /* felülírja a korábbi 50% szélt */
  }
}

/* ========== 2) Kiegészítő checkboxok: 2 oszlop desktopon ========== */
#brxe-hhxoxs .options-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;   /* mobilon 1 oszlop */
  row-gap: 12px;
  column-gap: 16px;
}


@media (min-width: 768px) {
  /* 2 oszlop ott, ahol van .label (azaz a kiegészítők csoport) */
  #brxe-hhxoxs .form-group:has(>.label) > .options-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 1 oszlop ott, ahol NINCS label (adatkezelési) */
  #brxe-hhxoxs .form-group:not(:has(>.label)) > .options-wrapper {
    grid-template-columns: 1fr !important;
  }
}

#brxe-hhxoxs .options-wrapper li {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 768px) {
  #brxe-hhxoxs .form-group.half {
    grid-column: auto;
    width: auto !important;
  }
}

/* ===== Checkbox layout (li + label) ===== */
#brxe-hhxoxs .options-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
}
#brxe-hhxoxs .options-wrapper li {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}
#brxe-hhxoxs .options-wrapper label {
  cursor: pointer;
}

/* ===== Nagyobb, egyedi checkbox ===== */
#brxe-hhxoxs .options-wrapper input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  /*height: 22px;*/
  margin: 0;                     /* reset */
  border-radius: 4px;
  /*border: 1.5px solid rgba(255,255,255,0.35);*/
  background: #f5f5f5;           /* 2) nincs bepipálva: világosszürke háttér */
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Hover/focus finomítás (sötét hátteren is látszódjon) */
#brxe-hhxoxs .options-wrapper input[type="checkbox"]:hover {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08) inset;
}
#brxe-hhxoxs .options-wrapper input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--bricks-color-bkgnvt);   /* arany/branded */
  outline-offset: 2px;
}

/* 3) Bepipálva: fehér háttér + ✓ pipa */
#brxe-hhxoxs .options-wrapper input[type="checkbox"]:checked {
  background: #ffffff;
  border-color: var(--bricks-color-bkgnvt);        /* finom brand-csíkozás */
}
#brxe-hhxoxs .options-wrapper input[type="checkbox"]::after {
  content: "✓";
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: var(--bricks-color-ozieso);               /* sötétkék pipa */
  transform: scale(0);
  transition: transform .15s ease;
}
#brxe-hhxoxs .options-wrapper input[type="checkbox"]:checked::after {
  transform: scale(1);
}

/* (opcionális) kicsit nagyobbak mobilon is jól mutatnak */
@media (max-width: 480px) {
  #brxe-hhxoxs .options-wrapper input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }
  #brxe-hhxoxs .options-wrapper input[type="checkbox"]::after {
    font-size: 15px;
  }
}

#brxe-hhxoxs .label {
	margin-bottom: 16px;
}

:where(.brxe-form) .label, :where(.brxe-form) label {
	margin-bottom: 8px;
}

#brxe-hhxoxs .options-wrapper label {
	margin-bottom: 0px;	
}

form button.bricks-button {
	max-width: fit-content;
	padding: 8px 24px;
	transition: .3s;
}





/* Mobil */
@media (max-width: 767px){

  /* Szülők: közös stacking context + sticky-nek éljen a világ */
  #brxe-wpcwqs,
  #brxe-iwdwkp{
    position: relative;
    isolation: isolate;
    overflow: visible;
  }

  /* STICKY CÍM – ne promózzuk GPU-ra! maradjon alacsonyabb z-indexen */
  #brxe-fargxj{
    position: sticky;
    top: 24px;
    z-index: 1;                   /* alacsonyabb */
    transform: none !important;   /* << fontos iOS-on */
    will-change: auto;
    background: var(--bricks-body-bg, #fff);
    padding-bottom: 120px;
  }

  /* ALATTA LÉVŐ BLOKK – ezt hozzuk a sticky ELÉ (felé) */
  #brxe-cbeklz,
  #brxe-armzxx {
    position: relative;
    z-index: 2;                   /* magasabb */
    /* Safari fix: a GÖRGETŐ tartalmat promózzuk, nem a sticky-t */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    contain: paint;               /* extra stacking context iOS-hoz */
    display: flex;                /* hogy a flex-direction érvényesüljön */
    flex-direction: column-reverse;
    padding: 24px 0;
    background-color: var(--bricks-color-ersdln);
  }
}