/* Ragyogásprofil teszt — a landing oldal design nyelvét folytatja (arany/barna/krém). */

.quiz-body {
  --font-serif: var(--serif);
  --font-sans: var(--sans);
  --font-script: var(--script);
  --gold-1: var(--gold);
  --gold-2: #e1be63;
  --gold-3: var(--gold-light);
  --brown: var(--ink);
  background: radial-gradient(1200px 800px at 100% -10%, #fdf1de 0%, var(--cream) 55%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.quiz-header {
  padding: 1.4rem clamp(16px, 4vw, 48px) 0;
}

.quiz-logo {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--brown);
  text-decoration: none;
  letter-spacing: .02em;
}

.quiz-shell {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}

.quiz-card {
  width: 100%;
  max-width: 720px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(160, 110, 60, .14);
  padding: clamp(24px, 4vw, 48px);
}

/* Progress */
.quiz-progress { margin-bottom: 1.6rem; }
.quiz-progress__track {
  height: 6px;
  border-radius: 999px;
  background: #f1e6d2;
  overflow: hidden;
}
.quiz-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2));
  border-radius: 999px;
  transition: width .35s ease;
}
.quiz-progress__label {
  display: block;
  margin-top: .5rem;
  font-size: .8rem;
  color: #8a7256;
  letter-spacing: .03em;
}

/* Question */
.quiz-question__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.3;
  margin-bottom: .5rem;
}
.quiz-question__note {
  color: #8a7256;
  font-size: .92rem;
  margin-bottom: 1.2rem;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin: 1.2rem 0 1.8rem;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  text-align: left;
  padding: .85rem 1.1rem;
  border: 1.5px solid #eee0c8;
  border-radius: 14px;
  background: #fffdf9;
  font-family: var(--font-sans);
  font-size: .98rem;
  color: var(--brown);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
}
.quiz-option:hover { border-color: var(--gold-2); background: #fffaf0; }
.quiz-option:focus-visible { outline: 3px solid var(--gold-1); outline-offset: 2px; }
.quiz-option.is-selected {
  border-color: var(--gold-1);
  background: linear-gradient(90deg, #fff8ea, #fffdf9);
}
.quiz-option.is-selected .quiz-option__mark {
  background: linear-gradient(180deg, var(--gold-3), var(--gold-2));
  border-color: var(--gold-1);
}
.quiz-option.is-selected .quiz-option__mark::after { opacity: 1; }

.quiz-option__mark {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid #d9c79a;
  background: #fff;
  position: relative;
}
.quiz-option__mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--brown);
  opacity: 0;
  transition: opacity .15s;
}
.quiz-option__label { flex: 1; }

/* Nav */
.quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.quiz-nav--result { justify-content: center; margin-top: 2rem; }

.quiz-btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .95rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.quiz-btn--primary {
  color: var(--brown);
  background: linear-gradient(180deg, var(--gold-3), var(--gold-2) 55%, #d9b25c);
  box-shadow: 0 8px 22px rgba(185, 138, 46, .4);
}
.quiz-btn--primary:hover:not(:disabled) { transform: translateY(-1px); }
.quiz-btn--primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.quiz-btn--ghost {
  color: #8a7256;
  background: transparent;
  border: 1.5px solid #e6d7b8;
}
.quiz-btn--ghost:hover:not(:disabled) { background: #fbf3e2; }
.quiz-btn--ghost:disabled { opacity: .35; cursor: not-allowed; }

/* Result */
.quiz-result__eyebrow {
  font-weight: 600;
  color: var(--gold-1);
  letter-spacing: .04em;
  margin-bottom: .3rem;
}
.quiz-result__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.quiz-result__headline {
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: var(--gold-1);
  margin: .2rem 0 1.4rem;
}

.quiz-bars {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-bottom: 2rem;
  padding: 1.2rem;
  background: #fbf6ea;
  border-radius: 16px;
}
.quiz-bar__label {
  display: block;
  font-size: .82rem;
  color: #6b5544;
  margin-bottom: .25rem;
}
.quiz-bar__track {
  height: 8px;
  border-radius: 999px;
  background: #eee0c8;
  overflow: hidden;
}
.quiz-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: #d9c79a;
}
.quiz-bar.is-dominant .quiz-bar__fill {
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2));
}
.quiz-bar.is-dominant .quiz-bar__label { color: var(--brown); font-weight: 600; }

.quiz-section { margin-top: 2.2rem; }
.quiz-section__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #f1e6d2;
}
.quiz-section__lead { color: #6b5544; font-size: .95rem; margin-bottom: .8rem; }

/* Termékkártyák – teljes termékleírással */
.pcards { display: grid; gap: 1.4rem; margin-bottom: 1rem; }

.pcard {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.35fr;
  background: #fff;
  border: 1px solid #efe3cc;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(120, 87, 44, .10);
}
.pcard__media {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(18px, 2.4vw, 30px);
  min-height: 300px;
  background:
    radial-gradient(ellipse at 50% 38%, #ffffff 0%, #fbf4e8 58%, #f3e6d1 100%);
}
.pcard__stage {
  position: sticky;
  top: 90px;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 26px;
}
.pcard__stage::after {
  content: "";
  position: absolute;
  left: 14%; right: 14%; bottom: 8px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(90, 60, 25, .26), transparent 72%);
  filter: blur(3px);
}
.pcard__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(90, 60, 25, .14));
}
.pcard__badge {
  position: absolute;
  z-index: 2;
  top: 14px; left: 14px;
  padding: 5px 11px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--brown);
  background: rgba(255, 255, 255, .88);
  border: 1px solid #e6d3a8;
  border-radius: 999px;
}

.pcard__body { padding: clamp(20px, 3vw, 34px); }
.pcard__cat {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-1);
  margin-bottom: .35rem;
}
.pcard__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  color: var(--brown);
  margin-bottom: .3rem;
}
.pcard__tagline {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  color: #7a5c33;
  margin-bottom: .9rem;
}
.pcard__pick {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  padding: .45rem .9rem;
  margin-bottom: .9rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--brown);
  background: linear-gradient(90deg, #f7e1dc, #fbeeea);
  border-radius: 999px;
}
.pcard__pick span {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a6420;
}
.pcard__pick--soft { margin: .9rem 0 0; font-weight: 500; }
.pcard__lead {
  font-size: .95rem;
  line-height: 1.65;
  color: #3b2a1c;
  margin-bottom: 1rem;
}
.pcard__points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem .9rem;
  margin: 0 0 1rem;
  padding: 0;
}
.pcard__points li {
  position: relative;
  padding: .1rem 0 .1rem 1.25rem;
  font-size: .86rem;
  line-height: 1.5;
  color: #5c4631;
}
.pcard__points li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-3), var(--gold-1));
}
.pcard__points strong {
  display: block;
  font-weight: 600;
  color: var(--brown);
}
.pcard__points span { display: block; }

.pcard__more {
  margin: .2rem 0 1rem;
  border-top: 1px solid #f1e6d2;
  border-bottom: 1px solid #f1e6d2;
}
.pcard__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0;
  cursor: pointer;
  list-style: none;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--gold-1);
}
.pcard__more summary::-webkit-details-marker { display: none; }
.pcard__more summary::after {
  content: "+";
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
  transition: transform .25s;
}
.pcard__more[open] summary::after { content: "–"; }
.pcard__more-body { padding: 0 0 1rem; }
.pcard__more-body p {
  font-size: .88rem;
  line-height: 1.65;
  color: #5c4631;
  margin-bottom: .8rem;
}
.pcard__more-body h5,
.pcard__steps h5 {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-1);
  margin: .4rem 0 .5rem;
}
.pcard__steps ol { margin: 0 0 .8rem; padding-left: 1.2rem; }
.pcard__steps li { font-size: .88rem; line-height: 1.6; color: #5c4631; }
.pcard__note { font-size: .78rem !important; color: #8a7256 !important; font-style: italic; }
.pcard__summary {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.4;
  font-weight: 600;
  color: #421c20;
  padding-left: .9rem;
  border-left: 2px solid var(--gold-2);
}

.quiz-card--result { max-width: 1060px; }

@media (max-width: 760px) {
  .pcard { grid-template-columns: 1fr; }
  .pcard__media { min-height: 240px; }
  .pcard__media img { max-height: 260px; }
  .pcard__points { grid-template-columns: 1fr; }
}

.quiz-disclaimer {
  font-size: .78rem;
  color: #a2896a;
  line-height: 1.6;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #f1e6d2;
}

@media (max-width: 560px) {
  .quiz-card { border-radius: 18px; }
  .quiz-nav { flex-direction: column-reverse; }
  .quiz-nav .quiz-btn { width: 100%; text-align: center; }
}

/* Laza, fiatalos kérdésnézet */
.quiz-body { --rose: #c1566a; background: #fdeee9; }
.quiz-header { text-align: center; padding-top: 1.1rem; }
.quiz-logo { font-family: var(--font-sans); font-weight: 700; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }
.quiz-card:not(.quiz-card--result) { max-width: 640px; padding: 0; border-radius: 36px; overflow: hidden; box-shadow: 0 24px 60px rgba(193, 86, 106, .18); }
.q-photo { height: clamp(170px, 30vw, 240px); background-size: cover; background-position: center 30%; }
.q-body { padding: clamp(20px, 4vw, 36px); }
.q-meta { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); margin-bottom: .35rem; }
.quiz-card:not(.quiz-card--result) .quiz-question__title { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.25; }
.quiz-card:not(.quiz-card--result) .quiz-progress__fill { background: var(--rose); }
.quiz-card:not(.quiz-card--result) .quiz-progress__track { background: #f9dcd6; }
.quiz-card:not(.quiz-card--result) .quiz-option { border: 2px solid #f6d6cf; border-radius: 999px; padding: 1rem 1.4rem; background: #fff; font-weight: 500; }
.quiz-card:not(.quiz-card--result) .quiz-option:hover { border-color: #e8a1ab; background: #fff7f5; }
.quiz-card:not(.quiz-card--result) .quiz-option.is-selected { background: linear-gradient(90deg, #ffd9d2, #ffeadf); border-color: #e58796; }
.quiz-card:not(.quiz-card--result) .quiz-option__mark { width: 24px; height: 24px; }
.quiz-card:not(.quiz-card--result) .quiz-option.is-selected .quiz-option__mark { background: var(--rose); border-color: var(--rose); }
.quiz-card:not(.quiz-card--result) .quiz-option__mark.is-multi { border-radius: 8px; }
.quiz-card:not(.quiz-card--result) .quiz-option__mark.is-multi::after { border-radius: 4px; background: #fff; }
.quiz-card:not(.quiz-card--result) .quiz-option.is-selected .quiz-option__mark.is-multi { background: var(--rose); }
.quiz-card:not(.quiz-card--result) .quiz-btn--primary { background: var(--rose); color: #fff; box-shadow: 0 10px 24px rgba(193, 86, 106, .35); padding: 1rem 1.8rem; }
.quiz-card:not(.quiz-card--result) .quiz-btn--ghost { color: #8a5a63; border-color: #f0c9c3; }
.quiz-card--result { padding: clamp(24px, 4vw, 48px); }

/* Eredményoldal – ugyanaz a rózsaszín, kerek stílus */
.quiz-card--result { max-width: 1060px; border-radius: 36px; box-shadow: 0 24px 60px rgba(193, 86, 106, .18); }
.quiz-result__eyebrow { color: var(--rose); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }
.quiz-result__title { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.quiz-result__headline { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2rem, 4vw, 3rem); color: var(--rose); margin: .1rem 0 1.4rem; }
.quiz-bars { background: #fff4f1; border-radius: 24px; padding: 1.3rem 1.4rem; }
.quiz-bar__track { background: #f6d6cf; height: 10px; }
.quiz-bar__fill { background: #e8a1ab; }
.quiz-bar.is-dominant .quiz-bar__fill { background: linear-gradient(90deg, #c1566a, #e58796); }
.quiz-bar.is-dominant .quiz-bar__label { color: #28190f; font-weight: 700; }
.quiz-section__title { font-family: var(--font-sans); font-weight: 700; font-size: 1.15rem; border-bottom: 2px solid #f6d6cf; }
.quiz-section__lead { color: #7a6650; }
.pcard { border: 2px solid #f6d6cf; border-radius: 32px; box-shadow: 0 16px 40px rgba(193, 86, 106, .12); }
.pcard__media { background: radial-gradient(ellipse at 50% 38%, #ffffff 0%, #fff4f1 58%, #fde3dc 100%); }
.pcard__cat { color: var(--rose); font-weight: 700; }
.pcard__name { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
.pcard__tagline { font-family: var(--font-serif); color: #8a5a63; }
.pcard__badge { border-color: #f0c9c3; color: var(--rose); font-weight: 700; }
.pcard__pick { background: linear-gradient(90deg, #ffd9d2, #ffeadf); }
.pcard__pick span { color: var(--rose); font-weight: 700; }
.pcard__points li::before { background: var(--rose); }
.pcard__more { border-color: #f6d6cf; }
.pcard__more summary { color: var(--rose); font-weight: 700; }
.pcard__steps h5, .pcard__more-body h5 { color: var(--rose); }
.pcard__summary { font-family: var(--font-serif); border-left: 3px solid #e8a1ab; color: #5a2a33; }
.quiz-card--result .quiz-btn--ghost { border-color: #f0c9c3; color: #8a5a63; border-radius: 999px; }
.quiz-disclaimer { border-top: 2px solid #f6d6cf; }

/* Termékkártya: négyzetes kép bal oldalt, mellette görgethető szöveg */
.pcard { --h: clamp(380px, 36vw, 500px); grid-template-columns: var(--h) minmax(0, 1fr); height: var(--h); }
.pcard__media { position: relative; width: var(--h); height: var(--h); min-height: 0; padding: clamp(18px, 3vw, 34px); align-items: center; }
.pcard__stage { position: relative; top: auto; padding-bottom: 0; }
.pcard__stage::after { display: none; }
.pcard__media img { max-height: 100%; width: 100%; height: auto; object-fit: contain; }
.pcard__body { min-height: 0; height: var(--h); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #e8a1ab #fff4f1; }
.pcard__body::-webkit-scrollbar { width: 8px; }
.pcard__body::-webkit-scrollbar-thumb { background: #e8a1ab; border-radius: 99px; }
@media (max-width: 760px) {
  .pcard { --h: min(86vw, 340px); grid-template-columns: 1fr; height: auto; }
  .pcard__media { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .pcard__body { height: auto; max-height: 460px; }
}

/* A kép mindig teljes egészében látszik a négyzetben */
.pcard__media { box-sizing: border-box; overflow: hidden; }
.pcard__stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pcard__media img { width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* fotós termékképek a kvíz kártyáin: teljes felületű kép */
.pcard__media--photo { padding: 0; background: #eeeef2; }
.pcard__media--photo img { object-fit: cover; filter: none; }