@font-face { font-family: "Open Sans Hebrew Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/quiz-condensed-bold.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../assets/fonts/quiz-open-sans-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../assets/fonts/quiz-open-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.zh-product-quiz {
    --zh-quiz-primary: #82498c;
    --zh-quiz-text: #280114;
    --zh-quiz-muted: #726575;
    --zh-quiz-panel: #ffffff;
    --zh-quiz-content-width: 1140px;
    --zh-quiz-options-gap: 20px;
    --zh-quiz-options-width: 1012px;
    --zh-quiz-answer-background: #ffffff;
    --zh-quiz-answer-selected-background: #f8f4fa;
    --zh-quiz-answer-border: #520f68;
    --zh-quiz-answer-text: #333333;
    --zh-quiz-answer-min-height: 81px;
    --zh-quiz-button-background: #520f68;
    --zh-quiz-button-hover-background: #350645;
    --zh-quiz-button-disabled-background: #a385ad;
    --zh-quiz-button-text: #ffffff;
    --zh-quiz-button-radius: 100px;
    --zh-quiz-progress-width: 143px;
    --zh-quiz-progress-track: #e8d4f0;
    --zh-quiz-progress-fill: #82498c;
    color: var(--zh-quiz-text);
    background: linear-gradient(135deg, #f5e6f8 0%, #e8d4f0 25%, #f0e8f5 50%, #e4d0ed 75%, #f5e6f8 100%);
    font-family: "Open Sans", "Open Sans Hebrew", sans-serif;
    padding: 40px 24px;
    text-align: center;
    direction: rtl;
}
.zh-product-quiz *, .zh-product-quiz *::before, .zh-product-quiz *::after { box-sizing: border-box; }
.zh-product-quiz [hidden] { display: none !important; }
.zh-quiz__inner { width: 100%; max-width: var(--zh-quiz-content-width); margin-inline: auto; padding: 32px; border-radius: 16px; background: #ffffff99; }
.zh-quiz__intro { margin-bottom: 32px; }
.zh-product-quiz .zh-quiz__eyebrow { color: var(--zh-quiz-primary); font-size: 14px; margin: 0 0 12px; }
.zh-product-quiz .zh-quiz__intro-title {
    color: var(--zh-quiz-primary);
    font-family: "Open Sans Hebrew Condensed", "Open Sans Hebrew", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 4px;
}
.zh-product-quiz .zh-quiz__intro-text { font-size: 24px; line-height: 1.375; margin: 0; color: var(--zh-quiz-text); }
.zh-quiz__panel { background: var(--zh-quiz-panel); border: 1px solid #dec9e5; border-radius: 12px; padding: 24px; }
.zh-quiz__progress-wrap { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto 24px; }
.zh-product-quiz .zh-quiz__step { font-size: 18px; font-weight: 600; line-height: 25px; white-space: nowrap; margin: 0; color: var(--zh-quiz-progress-fill); }
.zh-quiz__progress { display: block; appearance: none; width: var(--zh-quiz-progress-width); min-width: 0; height: 8px; border: none; border-radius: 100px; overflow: hidden; background: var(--zh-quiz-progress-track); color: var(--zh-quiz-progress-fill); }
.zh-quiz__progress::-webkit-progress-bar { background: var(--zh-quiz-progress-track); border-radius: 100px; }
.zh-quiz__progress::-webkit-progress-value { background: var(--zh-quiz-progress-fill); border-radius: 100px; }
.zh-quiz__progress::-moz-progress-bar { background: var(--zh-quiz-progress-fill); border-radius: 100px; }
.zh-product-quiz .zh-quiz__question { font-family: "Open Sans", "Open Sans Hebrew", sans-serif; color: var(--zh-quiz-text); font-size: 28px; font-weight: 600; line-height: 1.36; margin: 0 0 24px; scroll-margin-top: 130px; }
.zh-quiz__question:focus { outline: none; }
.zh-product-quiz .zh-quiz__options { width: 100%; max-width: var(--zh-quiz-options-width); min-width: 0; border: 0; margin: 0; margin-inline: auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--zh-quiz-options-gap); }
.zh-product-quiz .zh-quiz__options.has-columns { display: grid; grid-template-columns: repeat(var(--zh-quiz-answer-columns), minmax(0, 1fr)); align-items: stretch; }
.zh-product-quiz .zh-quiz__options.has-columns .zh-quiz__answer { width: 100%; min-width: 0; max-width: none; }
.zh-product-quiz .zh-quiz__answer { position: relative; display: flex; justify-content: center; align-items: center; gap: 16px; flex: 0 1 auto; min-width: 130px; max-width: 260px; margin: 0; padding: 20px; border: .5px solid var(--zh-quiz-answer-border); border-radius: 12px; color: var(--zh-quiz-answer-text); background: var(--zh-quiz-answer-background); font-size: 16px; font-weight: 600; line-height: 22px; text-align: center; cursor: pointer; min-height: var(--zh-quiz-answer-min-height); transition: background-color .15s, border-color .15s, box-shadow .15s; }
.zh-product-quiz .zh-quiz__answer.is-compact { padding: 16px 24px; }
.zh-product-quiz .zh-quiz__answer:hover { box-shadow: 0 4px 12px 0 rgba(130, 73, 140, .2); }
.zh-product-quiz .zh-quiz__answer:active, .zh-product-quiz .zh-quiz__answer.is-selected { background: var(--zh-quiz-answer-selected-background); }
.zh-product-quiz .zh-quiz__answer:has(input:focus-visible) { outline: 3px solid var(--zh-quiz-answer-border); outline-offset: 3px; }
.zh-product-quiz .zh-quiz__answer input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.zh-quiz__answer-text { min-width: 0; overflow-wrap: anywhere; }
.zh-quiz__navigation { display: flex; justify-content: center; gap: 16px; align-items: center; margin-top: 24px; }
.zh-product-quiz .zh-quiz__button { display: inline-flex; justify-content: center; align-items: center; min-width: 160px; min-height: 52px; padding: 15px 64px; border: 1px solid var(--zh-quiz-button-background); border-radius: var(--zh-quiz-button-radius); background: var(--zh-quiz-button-background); color: var(--zh-quiz-button-text); font-family: inherit; font-size: 18px; font-weight: 600; line-height: 25px; text-align: center; text-decoration: none; cursor: pointer; }
.zh-product-quiz .zh-quiz__button:hover:not(:disabled) { background: var(--zh-quiz-button-hover-background); color: var(--zh-quiz-button-text); border-color: var(--zh-quiz-button-hover-background); }
.zh-product-quiz .zh-quiz__button:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.zh-product-quiz .zh-quiz__button:focus-visible { outline: 3px solid var(--zh-quiz-button-background); outline-offset: 4px; }
.zh-product-quiz .zh-quiz__button:disabled { background: var(--zh-quiz-button-disabled-background); border-color: var(--zh-quiz-button-disabled-background); color: var(--zh-quiz-button-text); opacity: 1; cursor: not-allowed; }
.zh-product-quiz .zh-quiz__button--back { color: var(--zh-quiz-button-background); background: transparent; border: 0; border-radius: 0; width: 62px; height: 52px; min-width: auto; min-height: 52px; padding: 0; }
.zh-product-quiz .zh-quiz__button--back:hover:not(:disabled) { background: transparent; color: var(--zh-quiz-button-background); border-color: transparent; }
.zh-product-quiz .zh-quiz__button--restart { color: var(--zh-quiz-button-background); background: #ffffff; border-color: var(--zh-quiz-button-background); min-width: auto; padding-inline: 16px; }
.zh-product-quiz .zh-quiz__button--restart:hover:not(:disabled) { background: #ffffff; color: var(--zh-quiz-button-background); border-color: var(--zh-quiz-button-background); }
.zh-product-quiz.is-result { --zh-quiz-product-image-width: 95px; }
.zh-product-quiz.is-result .zh-quiz__inner { max-width: 1140px; min-height: 494px; padding: 32px 40px; background: rgba(255, 255, 255, .5); border-radius: 0; }
.zh-product-quiz.is-result .zh-quiz__panel { background: transparent; border: 0; border-radius: 0; padding: 0; }
.zh-product-quiz.is-result .zh-quiz__question { max-width: 806px; margin: 0 auto 32px; color: #82498c; font-family: "Open Sans Hebrew Condensed", "Open Sans Hebrew", sans-serif; font-size: 36px; font-weight: 700; line-height: 49px; text-align: center; }
.zh-quiz__result { max-width: 475px; margin: 0 auto; }
.zh-quiz__product { display: flex; flex-direction: column; width: 100%; min-height: 234px; gap: 16px; background: #ffffff; border: .5px solid #dec9e5; border-radius: 12px; padding: 24px; text-align: right; }
.zh-quiz__product-row { display: grid; grid-template-columns: var(--zh-quiz-product-image-width, 95px) minmax(0, 1fr); gap: 16px; align-items: center; }
.zh-quiz__product-row:not(:has(.zh-quiz__product-image-link)) { grid-template-columns: minmax(0, 1fr); }
.zh-quiz__product-image-link { display: block; }
.zh-product-quiz .zh-quiz__product-image { display: block; width: var(--zh-quiz-product-image-width, 95px); height: 94px; object-fit: contain; }
.zh-quiz__product-content { min-width: 0; text-align: right; }
.zh-product-quiz .zh-quiz__product-title { color: #280114; font-family: "Open Sans", "Open Sans Hebrew", sans-serif; font-size: 16px; font-weight: 700; line-height: 22px; margin: 0 0 7px; }
.zh-product-quiz .zh-quiz__product-title a { color: inherit; text-decoration: none; }
.zh-product-quiz .zh-quiz__product-excerpt { color: #280114; font-size: 16px; font-weight: 400; line-height: 22px; margin: 0; }
.zh-product-quiz .zh-quiz__button--product { width: 100%; min-width: 0; height: 52px; min-height: 52px; }
.zh-quiz__product-price { color: var(--zh-quiz-primary); font-size: 22px; font-weight: 500; }
.zh-quiz__product-price del { color: var(--zh-quiz-muted); font-size: 16px; }
.zh-quiz__product-price ins { background: transparent; text-decoration: none; }
.zh-quiz__result-navigation { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.zh-product-quiz .zh-quiz__result-navigation .zh-quiz__button--back { width: 62px; height: 52px; min-height: 52px; padding: 0; }
.zh-product-quiz .zh-quiz__navigation > [type="submit"] { width: 312px; max-width: 100%; height: 52px; min-height: 52px; }
.zh-product-quiz.is-result .zh-quiz__intro, .zh-product-quiz.is-followup .zh-quiz__intro { display: none; }
@media (max-width: 767px) {
    .zh-product-quiz { padding: 36px 16px 48px; min-height: 560px; }
    .zh-product-quiz .zh-quiz__intro-title { font-size: 28px; }
    .zh-product-quiz .zh-quiz__intro-text { font-size: 16px; }
    .zh-quiz__intro { margin-bottom: 22px; }
    .zh-quiz__inner { padding: 16px; }
    .zh-quiz__panel { padding: 24px 20px; border-radius: 16px; }
    .zh-product-quiz .zh-quiz__question { font-size: 21px; margin-bottom: 22px; }
    .zh-product-quiz .zh-quiz__options.has-columns { grid-template-columns: minmax(0, 1fr); }
    .zh-product-quiz .zh-quiz__answer { flex-basis: 100%; max-width: 100%; min-width: 0; font-size: 16px; padding: 16px; min-height: var(--zh-quiz-answer-min-height); }
    .zh-product-quiz .zh-quiz__answer.is-compact { padding: 16px; }
    .zh-quiz__navigation { gap: 8px; }
    .zh-product-quiz .zh-quiz__button { min-width: 130px; padding-inline: 24px; }
    .zh-product-quiz .zh-quiz__button--back { min-width: auto; padding: 0; }
    .zh-product-quiz .zh-quiz__button--restart { min-width: auto; padding-inline: 12px; }
    .zh-product-quiz.is-result .zh-quiz__inner { padding: 16px; }
    .zh-product-quiz.is-result .zh-quiz__question { max-width: 100%; font-size: 28px; line-height: 38px; margin-bottom: 32px; }
    .zh-quiz__result { max-width: 100%; }
}
@media (max-width: 380px) { .zh-product-quiz.is-result { --zh-quiz-product-image-width: 75px; } }
@media (prefers-reduced-motion: reduce) { .zh-product-quiz * { transition: none; } }