/* ==================================================================
   ELI 2026-10-15 — כרטיס מתהפך: טרייד אין (#trade-in) + הזמנה מיוחדת (#order)
   פנים = מה שהיה שם, גב = טופס עם תמונות שנשלח לדשבורד.
   בלי JS: שני הצדדים אחד מתחת לשני. עם JS: סיבוב תלת-ממדי סביב ציר אנכי.
   ================================================================== */

.kbf{ position:relative; min-inline-size:0; perspective:2000px; }

/* ELI 2026-10-18: מלכודת הבוטים נשארת בתוך הכרטיס (בלי -9999px). כשהכרטיס מתהפך היא שוקפה לצד השני,
   הדף התרחב ל-10,000px ובמובייל המסך החליק הצידה ל"דף ריק". */
.kbf__hp{ position:absolute !important; inset-block-start:0; inset-inline-start:0; inline-size:1px; block-size:1px; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); opacity:0; pointer-events:none; white-space:nowrap; }
/* חגורת ביטחון: שום דבר בסקשנים של הטפסים לא ירחיב את הדף לרוחב */
#trade-in, #order{ overflow-x:clip; }

/* בלי JS */
.kbf__in{ display:flex; flex-direction:column; gap:16px; margin:0; }
.kbf:not(.kbf--js) [data-kbf-flip],
.kbf:not(.kbf--js) [data-kbf-unflip],
.kbf:not(.kbf--js) [data-kbf-reset]{ display:none; }

/* עם JS: שני הצדדים באותו תא */
.kbf--js .kbf__in{
  display:grid; gap:0;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.3,.7,.15,1), height .5s cubic-bezier(.2,.8,.2,1);
}
.kbf--js .kbf__face{
  grid-area:1 / 1; align-self:start; min-inline-size:0;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.kbf--js .kbf__back{ transform:rotateY(180deg); visibility:hidden; }
.kbf--js.is-flipped .kbf__in{ transform:rotateY(-180deg); }
.kbf--back .kbf__back{ visibility:visible; }
.kbf--back .kbf__front{ visibility:hidden; }

/* שדות הגב עולים מלמטה אחד-אחד כשהכרטיס מסתיים להתהפך */
.kbf--js .kbf__back .kbf__f{ opacity:0; transform:translateY(14px); }
.kbf--back .kbf__back .kbf__f{ opacity:1; transform:none; transition:opacity .4s ease, transform .55s cubic-bezier(.2,.8,.2,1); }

/* ---------- כללי ---------- */
.kbf__back{ position:relative; }

.kbf__step{ margin:0; font-size:17px; font-weight:800; line-height:1.3; }
.kbf__step b{ color:#C93A0F; font-weight:900; }
.kbf__step:focus{ outline:none; }

.kbf__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

.kbf__back-btn{
  display:inline-flex; align-items:center; gap:4px;
  margin:0; padding:6px 8px; border:0; border-radius:8px;
  background:transparent; color:inherit; opacity:.72;
  font:600 14px/1 var(--font); cursor:pointer;
  transition:opacity .2s ease, background-color .2s ease;
}
.kbf__back-btn:hover{ opacity:1; background:rgba(10,10,10,.06); }
.kbf__back-btn:focus-visible{ outline:3px solid rgba(201,58,15,.45); outline-offset:1px; opacity:1; }

.kbf__body{ display:flex; flex-direction:column; gap:16px; }

.kbf__hint{ margin:0; font-size:13px; line-height:1.5; color:#6A6A6A; }

.kbf__go svg{ transition:transform .25s ease; }
@media (hover:hover){ .kbf__go:hover svg{ transform:translateX(-4px); } }

/* סיכום מהפנים — שלושה קווים קטנים + הכלי */
.kbf__sum{
  display:flex; align-items:center; gap:10px; margin:0;
  padding:10px 14px; border-radius:14px 4px 14px 4px;
  background:#F6F2EC; font-size:14px; font-weight:700; line-height:1.35;
}
.kbf__sum::before{
  content:""; flex:none; inline-size:18px; block-size:12px;
  background:
    linear-gradient(#F14B1C,#F14B1C) right 0 top 0 / 60% 3px no-repeat,
    linear-gradient(#F14B1C,#F14B1C) right 0 top 50% / 100% 3px no-repeat,
    linear-gradient(#F14B1C,#F14B1C) right 0 bottom 0 / 40% 3px no-repeat;
}
.kbf__sum[hidden]{ display:none; }

/* textarea בסגנון השדות הקיימים */
.kbf .kbt__field textarea{
  box-sizing:border-box; inline-size:100%; min-block-size:92px; margin:0;
  padding:12px; resize:vertical;
  border:1.5px solid #CFCFCF; border-radius:16px 4px 16px 4px;
  background:#FFFFFF; color:#0A0A0A;
  font:400 15px/1.5 var(--font); box-shadow:none;
  transition:border-color .2s ease;
}
.kbf .kbt__field textarea::placeholder{ color:#8A8A8A; }
.kbf .kbt__field textarea:focus{ outline:none; border-color:#0A0A0A; }
.kbf .kbt__field textarea:focus-visible{ outline:3px solid rgba(201,58,15,.35); outline-offset:1px; }
.kbf .kbt__field small{ font-weight:400; opacity:.7; }

/* תמונות */
.kbf__photos{ display:flex; flex-direction:column; gap:12px; }

.kbf__drop{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:14px 16px; border:1.5px dashed #9A9A9A; border-radius:16px 4px 16px 4px;
  font-size:14px; line-height:1.4; color:#444444; cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease;
}
.kbf__drop input{ position:absolute; inset:0; inline-size:100%; block-size:100%; opacity:0; cursor:pointer; }
.kbf__drop svg{ flex:none; color:#C93A0F; }
.kbf__drop span{ display:flex; flex-direction:column; gap:2px; }
.kbf__drop b{ color:#0A0A0A; font-weight:700; }
.kbf__drop small{ font-size:13px; opacity:.75; }
.kbf__drop:hover, .kbf__drop.is-over{ border-color:#C93A0F; background:rgba(241,75,28,.05); }
.kbf__drop:focus-within{ outline:3px solid rgba(201,58,15,.35); outline-offset:2px; }
.kbf__drop[hidden]{ display:none; }

.kbf__thumbs{ display:flex; flex-wrap:wrap; gap:12px; margin:0; padding:0; list-style:none; }
.kbf__thumbs:empty{ display:none; }

/* כל תמונה נכנסת מהצד כמו פולרואיד שמניחים על השולחן */
.kbf__thumbs li{
  position:relative; inline-size:84px; padding:5px 5px 14px;
  background:#FFFFFF; border-radius:4px;
  box-shadow:0 1px 2px rgba(10,10,10,.12), 0 6px 16px rgba(10,10,10,.10);
  transform:rotate(-2.5deg);
  animation:kbfIn .5s cubic-bezier(.2,.8,.2,1) both;
}
.kbf__thumbs li:nth-child(2){ transform:rotate(2deg); }
.kbf__thumbs li:nth-child(3){ transform:rotate(-1deg); }
.kbf__thumbs img{ display:block; inline-size:74px; block-size:74px; object-fit:cover; border-radius:2px; }
.kbf__thumbs li.is-busy img{ opacity:.35; }
.kbf__x{
  position:absolute; inset-block-start:-8px; inset-inline-end:-8px;
  display:flex; align-items:center; justify-content:center;
  inline-size:26px; block-size:26px; padding:0; border:0; border-radius:50%;
  background:#0A0A0A; color:#FFFFFF; font:700 15px/1 var(--font); cursor:pointer;
}
.kbf__x:focus-visible{ outline:3px solid rgba(201,58,15,.6); outline-offset:1px; }
@keyframes kbfIn{ from{ opacity:0; translate:-28px 6px; } to{ opacity:1; translate:0 0; } }

.kbf__err{ margin:0; padding:10px 14px; border-radius:12px 3px 12px 3px; background:rgba(201,58,15,.1); color:#A82F0B; font-size:14px; font-weight:600; }
.kbf__err[hidden]{ display:none; }

button.kbt__send:disabled, button.kbo__btn:disabled{ opacity:.6; cursor:progress; }

/* נשלח */
.kbf__done{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px;
  min-block-size:260px; padding-block:8px;
}
.kbf__done[hidden]{ display:none; }
.kbf--sent .kbf__body, .kbf--sent .kbf__top{ display:none; }
.kbf__lines{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; inline-size:120px; margin-block-end:8px; }
.kbf__lines i{ display:block; block-size:9px; border-radius:8px; background:#F14B1C; transform-origin:right center; animation:kbfLine .8s cubic-bezier(.2,.8,.2,1) both; }
.kbf__lines i:nth-child(1){ inline-size:55%; }
.kbf__lines i:nth-child(2){ inline-size:100%; animation-delay:.08s; }
.kbf__lines i:nth-child(3){ inline-size:35%; animation-delay:.16s; }
@keyframes kbfLine{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.kbf__done-t{ margin:0; font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem, 1.7rem + 1.6vw, 3rem); line-height:.95; }
.kbf__done-p{ margin:0; max-inline-size:38ch; font-size:16px; line-height:1.55; opacity:.8; }
.kbf__again{ margin-block-start:6px; padding:0; border:0; background:none; color:#C93A0F; font:700 15px/1.4 var(--font); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }

/* ---------- כהה: הזמנה מיוחדת ---------- */
button.kbo__btn{ border:0; font-family:var(--font); cursor:pointer; }
.kbo__btn svg{ transition:transform .25s ease; }
@media (hover:hover){ .kbo__btn:hover svg{ transform:translateX(-4px); } }

.kbo__back{
  display:flex; flex-direction:column; gap:20px;
  padding:clamp(28px, 3.6vw, 56px) clamp(22px, 4.2vw, 72px);
  background:#15100F; color:#F6F2EC;
  border-radius:56px 8px 56px 8px;
}
.kbo__back .kbf__step{ font-family:var(--font-display); font-weight:700; font-size:clamp(2rem, 1.5rem + 1.6vw, 3rem); line-height:.95; }
.kbo__back .kbo__btn{ align-self:flex-start; margin-block-start:4px; }
.kbo__back .kbf__back-btn:hover{ background:rgba(246,242,236,.08); }

.kbf__cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px clamp(20px, 3vw, 40px); }
.kbf__col{ display:flex; flex-direction:column; gap:16px; min-inline-size:0; }

.kbf--dark .kbt__field{ color:#F6F2EC; }
.kbf--dark .kbt__field input,
.kbf--dark .kbt__field textarea{
  background:rgba(246,242,236,.06); border-color:rgba(246,242,236,.24); color:#F6F2EC;
}
.kbf--dark .kbt__field input::placeholder,
.kbf--dark .kbt__field textarea::placeholder{ color:rgba(246,242,236,.45); }
.kbf--dark .kbt__field input:focus,
.kbf--dark .kbt__field textarea:focus{ border-color:#F6F2EC; }
.kbf--dark .kbf__drop{ border-color:rgba(246,242,236,.38); color:rgba(246,242,236,.75); }
.kbf--dark .kbf__drop b{ color:#F6F2EC; }
.kbf--dark .kbf__drop svg{ color:#F14B1C; }
.kbf--dark .kbf__drop:hover, .kbf--dark .kbf__drop.is-over{ border-color:#F14B1C; background:rgba(241,75,28,.08); }
.kbf--dark .kbf__err{ background:rgba(241,75,28,.14); color:#FF8A66; }
.kbf--dark .kbf__again{ color:#F14B1C; }
.kbf--dark .kbf__x{ background:#F14B1C; }

/* ---------- מובייל ---------- */
@media (max-width:760px){
  .kbf__cols{ grid-template-columns:1fr; }
  .kbo__back{ border-radius:32px 8px 32px 8px; padding:26px 20px 24px; gap:18px; }
  .kbo__back .kbo__btn{ align-self:stretch; display:flex; }
  .kbf__done{ min-block-size:220px; }
}
@media (max-width:380px){
  .kbf .kbf__back .kbt__row{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .kbf--js .kbf__in{ transition:none; }
  .kbf--js .kbf__back, .kbf--js.is-flipped .kbf__in{ transform:none; }
  .kbf--js .kbf__back .kbf__f{ opacity:1; transform:none; transition:none; }
  .kbf__thumbs li, .kbf__lines i{ animation:none; }
}

/* ==================================================================
   ELI 2026-10-15 — "רוצים כלי שאין באתר?" גרסה כתומה (kbo--v2 / kbf--orange)
   פנים: טקסט ממורכז, שני קורקינטים מלפנים שמתקרבים לפי --p (0→1 בגלילה).
   הקווים רק מאחורי הקורקינט השמאלי — בכיוון של הלוגו.
   ================================================================== */
.kbo .kbo__card.kbo--v2{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:minmax(0,250px) minmax(0,1fr) minmax(0,250px);
  grid-template-areas:"r t l"; align-items:end; column-gap:20px; row-gap:0;
  min-block-size:480px; padding:0;
  background:#F14B1C; color:#0A0A0A; border-radius:56px 8px 56px 8px;
}
.kbo--v2 .kbo__ghost{
  position:absolute; z-index:-1; inset-block-start:-70px; inset-block-end:auto; inset-inline:auto; left:50%;
  transform:translateX(-50%);
  font-size:clamp(20rem, 10rem + 24vw, 39rem); line-height:.8; color:#C93A0F; opacity:.4;
}
.kbo--v2 .kbo__txt{
  grid-area:t; align-self:center; position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:44px 0;
}
.kbo--v2 .kbo__title{ color:#F6F2EC; white-space:nowrap; font-size:clamp(2.6rem, .6rem + 4.2vw, 4.9rem); }
.kbo--v2 .kbo__line{ margin:6px 0 0; max-inline-size:32ch; color:#0A0A0A; font-weight:600; font-size:clamp(1.05rem, .95rem + .4vw, 1.25rem); }
.kbo--v2 .kbo__note{ margin:0; max-inline-size:40ch; color:#2A1A12; font-size:1rem; }
.kbo--v2 .kbo__btn, .kbf--orange .kbo__btn{ margin-block-start:14px; background:#0A0A0A; color:#F6F2EC; }
.kbo--v2 .kbo__btn:hover, .kbf--orange .kbo__btn:hover, .kbo--v2 .kbo__btn:focus-visible, .kbf--orange .kbo__btn:focus-visible{ background:#2A1A12; color:#F6F2EC; }
.kbf--orange .kbo__btn:focus-visible{ outline:2px solid #F6F2EC; outline-offset:3px; }

/* הקורקינטים — מתקרבים לפי --p */
.kbo__veh{ position:relative; align-self:end; display:flex; align-items:flex-end; block-size:440px; min-inline-size:0; }
.kbo__veh--r{ grid-area:r; justify-content:flex-end; }
.kbo__veh--l{ grid-area:l; justify-content:flex-start; }
.kbo__veh img{
  display:block; inline-size:auto; block-size:404px; max-inline-size:100%; object-fit:contain;
  margin-block-end:18px; transform-origin:50% 100%;
  filter:drop-shadow(0 22px 22px rgba(60,10,0,.38));
  transform:translateY(calc((1 - var(--p, 1)) * 46px)) scale(calc(.58 + .42 * var(--p, 1)));
  opacity:calc(.3 + .7 * var(--p, 1));
  will-change:transform;
}
.kbo__veh--r img{ margin-inline-end:30px; }
.kbo__veh--l img{ block-size:412px; margin-block-end:14px; margin-inline-start:26px; }

.kbo__trail{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; inline-size:64px; }
.kbo__trail i{ display:block; block-size:10px; border-radius:8px; background:#F6F2EC; transform-origin:right center; }
.kbo__trail i:nth-child(1){ inline-size:58%; }
.kbo__trail i:nth-child(2){ inline-size:100%; }
.kbo__trail i:nth-child(3){ inline-size:60%; }
.kbo__veh .kbo__trail{ position:absolute; left:0; bottom:70px; }
.kbo__veh .kbo__trail i{ transform:scaleX(var(--p, 1)); }
.kbo__trail--sm{ gap:6px; inline-size:64px; flex:none; }
.kbo__trail--sm i{ block-size:7px; }

/* חותמת */
.kbo__stamp{
  position:absolute; z-index:2; left:259px; bottom:14px;
  inline-size:132px; block-size:132px; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border:3px solid #F6F2EC; border-radius:50%; color:#F6F2EC; transform:rotate(-12deg);
}
.kbo__stamp::before{ content:""; position:absolute; inset:6px; border:1.5px dashed rgba(246,242,236,.7); border-radius:50%; }
.kbo__stamp small{ font-size:9px; font-weight:800; letter-spacing:.1em; }
.kbo__stamp b{ font-family:var(--font-display); font-weight:700; font-size:36px; line-height:.88; }

/* גב הכרטיס — כתום */
.kbf--orange .kbo__back{ background:#F14B1C; color:#0A0A0A; }
.kbf--orange .kbo__back .kbf__step{ color:#F6F2EC; }
.kbf--orange .kbf__back-btn{ background:rgba(10,10,10,.08); color:#0A0A0A; opacity:1; }
.kbf--orange .kbf__back-btn:hover{ background:rgba(10,10,10,.14); }
.kbf--orange .kbt__field{ color:#0A0A0A; }
.kbf--orange .kbt__field input,
.kbf--orange .kbt__field textarea{ background:#F6F2EC; border:2px solid #0A0A0A; color:#0A0A0A; }
.kbf--orange .kbt__field input::placeholder,
.kbf--orange .kbt__field textarea::placeholder{ color:#6A5F58; }
.kbf--orange .kbt__field input:focus,
.kbf--orange .kbt__field textarea:focus{ border-color:#0A0A0A; }
.kbf--orange .kbt__field input:focus-visible,
.kbf--orange .kbt__field textarea:focus-visible{ outline:3px solid rgba(246,242,236,.9); outline-offset:1px; }
.kbf--orange .kbf__drop{ border-color:#0A0A0A; color:#2A1A12; }
.kbf--orange .kbf__drop b{ color:#0A0A0A; }
.kbf--orange .kbf__drop svg{ color:#0A0A0A; }
.kbf--orange .kbf__drop:hover, .kbf--orange .kbf__drop.is-over{ border-color:#0A0A0A; background:rgba(10,10,10,.06); }
.kbf--orange .kbf__drop:focus-within{ outline-color:rgba(246,242,236,.9); }
.kbf--orange .kbf__err{ background:rgba(10,10,10,.12); color:#0A0A0A; }
.kbf--orange .kbf__x{ background:#0A0A0A; }
.kbo__send{ display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.kbo__send .kbo__btn{ margin:0; align-self:auto; }
.kbf--orange .kbf__lines i{ background:#F6F2EC; }
.kbf--orange .kbf__done-t{ color:#F6F2EC; }
.kbf--orange .kbf__done-p{ opacity:1; color:#0A0A0A; }
.kbf--orange .kbf__again{ color:#0A0A0A; }

@media (max-width:1000px){
  .kbo .kbo__card.kbo--v2{ grid-template-columns:minmax(0,190px) minmax(0,1fr) minmax(0,190px); column-gap:12px; }
  .kbo__veh{ block-size:360px; }
  .kbo__veh img, .kbo__veh--l img{ block-size:330px; }
  .kbo__stamp{ left:190px; inline-size:112px; block-size:112px; }
  .kbo__stamp b{ font-size:30px; }
  .kbo__stamp small{ font-size:8px; }
}

@media (max-width:760px){
  .kbo .kbo__card.kbo--v2{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"r s l" "t t t";
    row-gap:6px; column-gap:0; min-block-size:0; padding:18px 0 26px; border-radius:32px 8px 32px 8px;
  }
  .kbo--v2 .kbo__ghost{ inset-block-start:150px; inset-block-end:auto; font-size:21rem; transform:translateX(-50%); }
  .kbo__veh{ block-size:200px; }
  .kbo__veh img{ block-size:180px; margin-block-end:8px; filter:drop-shadow(0 12px 12px rgba(60,10,0,.35)); transform:translateY(calc((1 - var(--p, 1)) * 26px)) scale(calc(.62 + .38 * var(--p, 1))); }
  .kbo__veh--r img{ margin-inline-end:12px; }
  .kbo__veh--l img{ block-size:186px; margin-block-end:6px; margin-inline-start:10px; }
  .kbo__veh .kbo__trail{ position:static; flex:none; align-self:flex-end; margin-block-end:30px; margin-inline-start:-6px; inline-size:34px; gap:5px; }
  .kbo--v2 .kbo__line, .kbo--v2 .kbo__note{ margin-inline:auto; }
  .kbo__veh .kbo__trail i{ block-size:6px; }
  .kbo__stamp{ position:relative; left:auto; bottom:auto; grid-area:s; align-self:center; inline-size:96px; block-size:96px; border-width:2.5px; }
  .kbo__stamp::before{ inset:4px; border-width:1px; }
  .kbo__stamp small{ font-size:7px; letter-spacing:.08em; }
  .kbo__stamp b{ font-size:26px; }
  .kbo--v2 .kbo__txt{ padding:6px 20px 0; align-items:stretch; }
  .kbo--v2 .kbo__title{ white-space:normal; font-size:clamp(2.9rem, 2rem + 4vw, 3.7rem); }
  .kbo--v2 .kbo__btn{ display:flex; justify-content:center; }
  .kbo__send .kbo__btn{ flex:1; justify-content:center; }
  .kbo__trail--sm{ inline-size:46px; gap:5px; }
  .kbo__trail--sm i{ block-size:6px; }
}

@media (prefers-reduced-motion:reduce){
  .kbo__veh img{ transform:none; opacity:1; }
  .kbo__veh .kbo__trail i{ transform:none; }
}