/* ==================================================================
   לא בטוחים מה מתאים לכם? (שלד H06) — ELI 2026-10-07
   template-parts/section-match-2026.php + assets/js/eli-match-2026.js
   ימין: שלושת השלבים (עולים מלמטה עם שלושת הקווים) + כפתור התחלה.
   שמאל: פאנל קרם בכנף L — תוצאה לדוגמה / שאלון / "מצאנו".
   נטען רק בעמוד הבית.
   ================================================================== */

.kbx{
  --kbx-gutter:20px; /* = ריפוד ה-.wrap */
  padding-block:clamp(48px, 6.6vw, 96px);
  background:#FFFFFF;
  color:#0A0A0A;
  font-family:var(--font);
}

.kbx__head{ display:flex; flex-direction:column; gap:10px; margin-block-end:clamp(24px, 3.3vw, 48px); max-inline-size:1100px; }
.kbx__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(3.75rem, 2.2rem + 4.2vw, 6rem);
  line-height:.86;
  letter-spacing:0;
}
.kbx__claim{ margin:0; font-size:clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight:800; color:#C93A0F; }
.kbx__lead{ margin:0; max-inline-size:60ch; font-size:clamp(1rem, .92rem + .3vw, 1.19rem); line-height:1.55; color:#444444; }

.kbx__body{ display:flex; flex-direction:column; gap:28px; }

/* --- השלבים --- */
.kbx__side{ display:flex; flex-direction:column; gap:22px; }
.kbx__steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.kbx__step{ position:relative; display:flex; align-items:flex-start; gap:14px; }
.kbx__num{
  position:relative;
  flex:none;
  display:grid;
  place-items:center;
  inline-size:40px;
  block-size:40px;
  border:1.5px solid #0A0A0A;
  border-radius:999px;
  background:#FFFFFF;
  font-size:16px;
  font-weight:800;
  z-index:1;
}
.kbx__step-txt{ display:flex; flex-direction:column; gap:3px; padding-block-start:4px; }
.kbx__step-txt strong{ font-size:16px; }
.kbx__step-txt span{ font-size:14px; line-height:1.5; color:#6B5F58; }

/* שלושת הקווים — נמשכים מתחת לעיגול ונעלמים, פעם אחת */
.kbx__trail{
  position:absolute;
  inset-block-start:100%;
  left:50%;
  display:flex;
  align-items:flex-start;
  gap:4px;
  transform:translateX(-50%);
  transform-origin:center top;
  opacity:0;
  pointer-events:none;
}
.kbx__trail span{ display:block; inline-size:3px; border-radius:2px; background:#F14B1C; block-size:14px; }
.kbx__trail span:nth-child(2){ block-size:24px; }

@keyframes kbx-rise{ from{ opacity:0; transform:translateY(48px); } to{ opacity:1; transform:none; } }
@keyframes kbx-trail{ 0%{ opacity:1; transform:translateX(-50%) scaleY(1.4); } 100%{ opacity:0; transform:translateX(-50%) scaleY(.1); } }

.kbx--pre .kbx__step{ opacity:0; }
.kbx.is-in .kbx__step{ animation:kbx-rise .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--d) * 140ms + 150ms); }
.kbx.is-in .kbx__step .kbx__trail{ animation:kbx-trail .8s ease-out both; animation-delay:calc(var(--d) * 140ms + 150ms); }

.kbx__start-wrap{ display:flex; flex-direction:column; gap:10px; }
.kbx__start{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  block-size:52px;
  border:0;
  border-radius:8px;
  background:#C93A0F;
  color:#FFFFFF;
  font:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}
.kbx__start:focus-visible{ outline:3px solid #0A0A0A; outline-offset:2px; }
.kbx__note{ font-size:13px; color:#6B5F58; text-align:center; }

/* --- הפאנל --- */
.kbx__panel{
  margin-inline:calc(-1 * var(--kbx-gutter));
  padding:24px var(--kbx-gutter);
  background:#F6F2EC;
  min-block-size:200px;
}
.kbx__phead{ display:flex; flex-direction:column; gap:10px; margin-block-end:14px; }
.kbx__ptitle{ font-size:15px; font-weight:700; }
.kbx__ptitle--found{
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 2rem + 2vw, 3.5rem);
  font-weight:700;
  line-height:.9;
  outline:0;
}
.kbx__sum{ display:flex; flex-wrap:wrap; gap:6px; }
.kbx__chip-sum{
  display:flex;
  align-items:center;
  block-size:30px;
  padding:0 12px;
  border-radius:999px;
  background:#FFFFFF;
  font-size:13px;
  font-weight:500;
}

/* כרטיסי ההמלצה */
.kbx__cards{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  margin-inline:calc(-1 * var(--kbx-gutter));
  padding-inline:var(--kbx-gutter);
  padding-block-end:40px; /* מקום לשלושת הקווים מתחת לכרטיס */
}
.kbx__cards::-webkit-scrollbar{ display:none; }
.kbx__cell{ position:relative; flex:0 0 250px; scroll-snap-align:start; display:flex; }
.kbx__cell .kbx__trail{ gap:6px; }
.kbx__cell .kbx__trail span{ inline-size:4px; block-size:22px; }
.kbx__cell .kbx__trail span:nth-child(2){ block-size:38px; }

.kbx__card{
  display:flex;
  flex-direction:column;
  inline-size:100%;
  overflow:hidden;
  background:#FFFFFF;
  border-radius:24px 4px 24px 4px;
}
.kbx__media{
  position:relative;
  display:block;
  block-size:150px;
  background:#FFFFFF;
  border-block-end:1px solid #EFEAE4;
}
.kbx__media img{
  position:absolute;
  inset:10px;
  inline-size:calc(100% - 20px);
  block-size:calc(100% - 20px);
  object-fit:contain;
}
.kbx__tag{
  position:absolute;
  inset-block-start:10px;
  inset-inline-start:10px;
  padding:4px 9px;
  background:#C93A0F;
  color:#FFFFFF;
  font-size:11px;
  font-weight:700;
  border-radius:12px 3px 12px 3px;
}
.kbx__cbody{ display:flex; flex-direction:column; gap:10px; flex:1 1 auto; padding:14px; }
.kbx__brand{ font-size:12px; font-weight:500; letter-spacing:.04em; color:#6B5F58; margin-block-end:-8px; }
.kbx__name{ font-size:16px; font-weight:700; line-height:1.3; color:#0A0A0A; text-decoration:none; }
.kbx__why{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 10px;
  background:#F6F2EC;
  border-radius:16px 4px 16px 4px;
  font-size:12px;
  line-height:1.45;
  color:#444444;
}
.kbx__why strong{ color:#0A0A0A; font-size:12px; }
.kbx__price{ margin:auto 0 0; font-size:20px; font-weight:800; }
.kbx__price del{ font-size:13px; font-weight:400; color:#6B6B6B; }

.kbx__acts{ display:flex; flex-direction:column; gap:8px; }
.kbx__cart{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  block-size:44px;
  border-radius:8px;
  background:#C93A0F;
  color:#FFFFFF;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:background-color .2s ease;
}
.kbx__cart:hover,
.kbx__cart:focus-visible{ background:#A82F0B; color:#FFFFFF; }
.kbx__cart:focus-visible{ outline:3px solid #0A0A0A; outline-offset:2px; }
.kbx__cart.loading{ opacity:.7; }
.kbx__cart.added{ background:#0A0A0A; }
.kbx__acts .added_to_cart{ display:none; }
.kbx__more{ font-size:13px; font-weight:700; color:#0A0A0A; text-align:center; text-underline-offset:3px; }

.kbx__again{
  display:block;
  margin:0 auto;
  padding:6px 4px;
  border:0;
  background:none;
  color:#0A0A0A;
  font:inherit;
  font-size:14px;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:4px;
  cursor:pointer;
}
.kbx__empty{ margin:0; font-size:15px; line-height:1.6; }
.kbx__noscript a{ font-weight:700; color:#0A0A0A; }

/* "מצאנו" — הכרטיסים עולים מלמטה עם שלושת הקווים (רגע של המוטיב) */
.kbx__res.is-new .kbx__cell{ animation:kbx-rise .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--d) * 140ms + 100ms); }
.kbx__res.is-new .kbx__cell .kbx__trail{ animation:kbx-trail .8s ease-out both; animation-delay:calc(var(--d) * 140ms + 100ms); }

/* --- השאלון --- */
.kbx__quiz{ display:flex; flex-direction:column; gap:20px; }
.kbx__qhead{ display:flex; flex-direction:column; gap:8px; }
.kbx__qstep{ font-size:14px; font-weight:700; color:#6B5F58; outline:0; }
.kbx__bar{ display:block; block-size:4px; border-radius:2px; background:#EDE3D7; overflow:hidden; }
.kbx__bar span{ display:block; block-size:100%; background:#C93A0F; transition:width .3s ease; }

.kbx__group{ margin:0; padding:0; border:0; min-inline-size:0; }
.kbx__group legend{ padding:0; margin-block-end:10px; font-size:18px; font-weight:800; }
.kbx__opts{ display:flex; flex-wrap:wrap; gap:8px; }
.kbx__opt{ position:relative; cursor:pointer; }
.kbx__opt input{ position:absolute; opacity:0; inline-size:1px; block-size:1px; }
.kbx__opt span{
  display:flex;
  align-items:center;
  block-size:44px;
  padding:0 18px;
  border:1.5px solid #0A0A0A;
  border-radius:999px;
  background:#FFFFFF;
  font-size:15px;
  font-weight:500;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.kbx__opt input:checked + span{ background:#C93A0F; border-color:#C93A0F; color:#FFFFFF; font-weight:700; }
.kbx__opt input:focus-visible + span{ outline:3px solid #0A0A0A; outline-offset:2px; }

.kbx__qnav{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.kbx__back{
  padding:6px 4px;
  border:0;
  background:none;
  font:inherit;
  font-size:15px;
  font-weight:700;
  color:#0A0A0A;
  text-decoration:underline;
  text-underline-offset:4px;
  cursor:pointer;
}
.kbx__next{
  block-size:48px;
  padding:0 28px;
  border:0;
  border-radius:8px;
  background:#C93A0F;
  color:#FFFFFF;
  font:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}
.kbx__next:disabled{ background:#D8CEC3; color:#6B5F58; cursor:default; }
.kbx__next:focus-visible{ outline:3px solid #0A0A0A; outline-offset:2px; }

@media (hover:hover){
  .kbx__opt:hover span{ border-color:#C93A0F; }
  .kbx__start:hover{ background:#A82F0B; }
  .kbx__next:not(:disabled):hover{ background:#A82F0B; }
}

/* ---------- מחשב ---------- */
@media (min-width:1001px){
  .kbx__body{ flex-direction:row; align-items:stretch; gap:48px; }
  .kbx__side{ flex:0 0 360px; gap:28px; }
  .kbx__steps{ gap:28px; }
  .kbx__num{ inline-size:44px; block-size:44px; font-size:18px; }
  .kbx__step-txt strong{ font-size:19px; }
  .kbx__step-txt span{ font-size:15px; }
  .kbx__start-wrap{ margin-block-start:auto; }
  .kbx__start{ block-size:56px; font-size:17px; }

  .kbx__panel{
    flex:1 1 0;
    min-inline-size:0;
    margin:0;
    padding:28px;
    border-radius:56px 8px 56px 8px;
  }
  .kbx__phead{ flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-block-end:18px; }
  .kbx__ptitle:not(.kbx__ptitle--found){ font-size:17px; }
  .kbx__ptitle--found{ font-size:clamp(2.75rem, 1.6rem + 2vw, 3.75rem); }

  .kbx__cards{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
    overflow:visible;
    margin:0;
    padding:0 0 36px;
  }
  .kbx__cell{ flex:none; }
  .kbx__card{ border-radius:32px 6px 32px 6px; }
  .kbx__media{ block-size:160px; }
  .kbx__cbody{ padding:16px; gap:12px; }
  .kbx__name{ font-size:17px; }
  .kbx__why, .kbx__why strong{ font-size:13px; }
  .kbx__quiz{ max-inline-size:640px; }
}

@media (prefers-reduced-motion:reduce){
  .kbx--pre .kbx__step{ opacity:1; }
  .kbx__step, .kbx__cell, .kbx__trail{ animation:none !important; }
  .kbx__trail{ opacity:0 !important; }
  .kbx__bar span, .kbx__opt span, .kbx__cart{ transition:none; }
}

/* הערות כנות על תוצאה לא מושלמת */
.kbx__notes{ margin:0 0 14px; padding:10px 14px; background:#FFFFFF; border-inline-start:3px solid #F14B1C; border-radius:4px 16px 4px 16px; font-size:14px; line-height:1.55; color:#444444; }
@media (min-width:1001px){
  .kbx__cards--n1{ grid-template-columns:minmax(0, 1fr); max-inline-size:340px; }
  .kbx__cards--n2{ grid-template-columns:repeat(2, minmax(0, 1fr)); max-inline-size:680px; }
}