/* ====== Fonts ======
   No @import and no CDN: the platform forbids external dependencies, and an
   @import here would also hand every visitor's IP to Google around the site's
   own consent manager. Rubik is already loaded site-wide by the theme; when
   it is not, includes/shortcode.php prints a self-hosted @font-face for the
   files in assets/fonts/ behind the loadFont switch, and the stack below
   falls back to the system UI font.                                        */

/* ====== טוקנים ====== */
#zq-app{
  /* --muted was #8E7E6A, which the prototype used for every piece of secondary
     text. It measured 3.93:1 on white — under the 4.5:1 WCAG AA needs for text
     this size, and the calculator leans on it heavily (hints, option blurbs,
     the back button, the summary rows). This shade is the lightest that clears
     4.5:1 on white (5.71) and on --olive-soft (4.55), so nothing else moves. */
  --bg:#F4ECDD; --surface:#FFFFFF; --ink:#3A2A1C; --muted:#74644F;
  --line:#E7DBC6; --line-2:#D9CAB0;
  /* --olive-soft was #E8F6FC, a pale blue the prototype kept from its blue
     original. It tints the done steps, the chosen option, the info boxes and
     the "add item" hover, so it was the last visible off-brand colour. */
  --olive:#543924; --olive-deep:#3E2A1A; --olive-soft:#F0E4D2;
  /* Secondary text sitting ON --olive-soft. The warm tint is darker than the
     blue it replaced, which pushed 13px --muted text down to 3.1:1. This is the
     lightest shade that clears WCAG AA 4.5:1 on both the tint (4.55) and white
     (5.71), so a note still reads as secondary without failing the check. */
  --muted-on-soft:#74644F;
  --clay:#00ADEF; --clay-deep:#0093CE;
  --radius:16px; --radius-sm:11px;
  --shadow:0 1px 2px rgba(42,39,34,.05), 0 8px 28px rgba(42,39,34,.06);
  font-family:'Rubik',system-ui,sans-serif;
  color:var(--ink); background:var(--bg);
  max-width:760px; margin:0 auto; padding:26px 18px 40px;
  line-height:1.55; box-sizing:border-box;
}
#zq-app *,#zq-app *::before,#zq-app *::after{box-sizing:border-box}

/* ====== כותרת ====== */
.zq-head{text-align:center; margin-bottom:22px}
.zq-logo{display:block; width:min(300px,74%); height:auto; margin:0 auto 14px}
.zq-hero{margin:0 0 20px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow)}
.zq-hero img{display:block; width:100%; height:210px; object-fit:cover; object-position:center 48%}
@media (max-width:560px){.zq-hero img{height:150px}}
.zq-eyebrow{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--clay); font-weight:700; margin:0 0 8px
}
.zq-title{
  font-family:'Rubik',sans-serif; font-weight:700;
  font-size:clamp(18px,4vw,25px); line-height:1.2; margin:0 0 7px; color:var(--ink)
}
.zq-sub{color:var(--muted); margin:0; font-size:15px}

/* ====== פסי שלבים ====== */
.zq-steps{
  display:flex; gap:6px; list-style:none; padding:0; margin:0 0 18px;
  justify-content:center; flex-wrap:wrap
}
.zq-steps li{
  display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted);
  font-weight:500
}
.zq-steps li span{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1.5px solid var(--line-2);
  font-size:12px; font-weight:700; color:var(--muted); transition:.25s
}
.zq-steps li.is-active{color:var(--olive-deep)}
.zq-steps li.is-active span{background:var(--olive); border-color:var(--olive); color:#fff}
.zq-steps li.is-done span{background:var(--olive-soft); border-color:var(--olive); color:var(--olive-deep)}

/* ====== כרטיס ====== */
.zq-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:26px 22px; min-height:300px
}
.zq-step{display:none; animation:zqIn .3s ease}
.zq-step.is-current{display:block}
@keyframes zqIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.zq-h{font-family:'Rubik',sans-serif; font-size:23px; font-weight:700; margin:0 0 4px}
.zq-hint{color:var(--muted); font-size:14px; margin:0 0 18px}

/* ====== רשתות בחירה ====== */
.zq-grid{display:grid; gap:12px; margin:14px 0 6px}
.zq-grid--products{grid-template-columns:repeat(2,1fr)}
.zq-grid--foam{grid-template-columns:1fr}
.zq-grid--acrylan{grid-template-columns:repeat(2,1fr)}
.zq-opt--img{padding:0; overflow:hidden; text-align:center}
.zq-opt--img .zq-opt-img{display:block; width:100%; background:#fff; overflow:hidden}
.zq-opt--img .zq-opt-img img{width:100%; height:auto; display:block}
.zq-opt--img .zq-opt-txt{display:block; padding:12px 14px 14px}
.zq-grid--fabric{grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px}

.zq-opt{
  text-align:right; cursor:pointer; background:var(--surface);
  border:1.5px solid var(--line-2); border-radius:var(--radius-sm);
  padding:16px; transition:.18s; position:relative; font:inherit; color:inherit;
  width:100%
}
.zq-opt:hover{border-color:var(--olive); transform:translateY(-2px)}
.zq-opt.is-sel{border-color:var(--olive); background:var(--olive-soft)}
/* A chosen option carries the tint, so its description needs the darker shade. */
.zq-opt.is-sel p{color:var(--muted-on-soft)}
.zq-opt.is-sel::after{
  content:'✓'; position:absolute; top:10px; left:12px;
  width:22px; height:22px; border-radius:50%; background:var(--olive); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:700
}
.zq-opt h3{margin:0 0 3px; font-size:16px; font-weight:700}
.zq-opt p{margin:0; font-size:13px; color:var(--muted)}
.zq-opt .zq-icon{font-size:26px; display:block; margin-bottom:8px}
#zq-products .zq-opt,#zq-locations .zq-opt{text-align:center; padding:30px 16px}
#zq-products .zq-opt h3,#zq-locations .zq-opt h3{font-size:clamp(21px,5.5vw,27px); margin:0}

/* ====== כרטיסי בד (אלמנט החתימה — ספר דוגמיות) ====== */
.zq-swatch{
  cursor:pointer; border:none; background:none; padding:0; font:inherit;
  text-align:center; border-radius:var(--radius-sm); transition:.18s; position:relative
}
.zq-swatch .zq-sw-img{
  display:block; width:100%; height:0; padding-bottom:100%; /* ריבוע תואם לכל הדפדפנים */
  border-radius:var(--radius-sm); background-size:cover;
  background-position:center; border:1.5px solid var(--line-2);
  box-shadow:inset 0 -18px 30px rgba(0,0,0,.06); transition:.18s; position:relative
}
.zq-swatch:hover .zq-sw-img{transform:translateY(-2px); border-color:var(--olive)}
.zq-swatch.is-sel .zq-sw-img{
  border:2px dashed var(--olive); outline:3px solid var(--olive-soft);
}
.zq-swatch.is-sel .zq-sw-img::after{
  content:'✓'; position:absolute; top:7px; left:7px; width:22px; height:22px;
  border-radius:50%; background:var(--olive); color:#fff; display:grid;
  place-items:center; font-size:12px; font-weight:700
}

.zq-swatch .zq-sw-name{display:block; margin-top:6px; font-size:12.5px; font-weight:500; color:var(--ink); direction:ltr}
/* ====== סרגל בדים ====== */
.zq-fabbar{margin-bottom:14px}
.zq-search{
  width:100%; padding:11px 14px; border:1.5px solid var(--line-2);
  border-radius:var(--radius-sm); font:inherit; background:var(--bg); margin-bottom:10px
}
.zq-search:focus{outline:none; border-color:var(--olive); background:#fff}
.zq-chips{display:flex; gap:7px; flex-wrap:wrap}
.zq-chip{
  border:1.5px solid var(--line-2); background:var(--surface); color:var(--muted);
  border-radius:999px; padding:6px 14px; font:inherit; font-size:13px;
  cursor:pointer; transition:.15s
}
.zq-chip:hover{border-color:var(--olive)}
.zq-chip.is-on{background:var(--olive); border-color:var(--olive); color:#fff}

/* ====== שדות מידה / קלט ====== */
.zq-dims{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.zq-dims.zq-dims--2{grid-template-columns:repeat(2,1fr)}
.zq-field{display:flex; flex-direction:column; gap:6px; font-size:14px; position:relative}
.zq-field>span{font-weight:500}
.zq-field input{
  padding:12px 14px; border:1.5px solid var(--line-2); border-radius:var(--radius-sm);
  font:inherit; background:var(--bg); width:100%
}
.zq-field input:focus{outline:none; border-color:var(--olive); background:#fff}
.zq-field--text input::placeholder,.zq-field input::placeholder{color:#b6ad9d}
.zq-dims .zq-field em{
  position:absolute; left:14px; bottom:13px; font-style:normal;
  font-size:13px; color:var(--muted); pointer-events:none
}

/* ====== סיכום ומחיר ====== */
.zq-summary{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 16px; margin-bottom:16px
}
.zq-summary .row{display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:14px}
.zq-summary .row span:first-child{color:var(--muted)}
.zq-summary .row span:last-child{font-weight:500; text-align:left}
.zq-sum-fab{
  width:46px; height:32px; border-radius:6px; display:inline-block;
  background-size:cover; background-position:center; border:1px solid var(--line-2)
}
.zq-item{display:flex; align-items:center; gap:12px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px}
.zq-item-fab{width:46px; height:46px; border-radius:8px; background-size:cover; background-position:center; border:1px solid var(--line-2); flex:0 0 auto}
.zq-item-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.zq-item-info strong{font-size:14px; font-weight:600}
.zq-item-info span{font-size:12.5px; color:var(--muted)}
.zq-item-price{font-weight:700; font-size:14px; white-space:nowrap}
.zq-item-rm{border:none; background:none; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; padding:0 6px; border-radius:6px; flex:0 0 auto}
.zq-item-rm:hover{background:rgba(0,0,0,.06); color:#b3492e}
.zq-additem{width:100%; margin:2px 0 18px; padding:12px; border:1.5px dashed var(--line-2); background:transparent; color:var(--olive-deep); border-radius:var(--radius-sm); font:inherit; font-weight:600; cursor:pointer; transition:.15s}
.zq-additem:hover{border-color:var(--olive); background:var(--olive-soft)}
.zq-price{
  position:relative; background:var(--olive); color:#fff; border-radius:var(--radius-sm);
  padding:22px 24px; display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px
}
.zq-price::before{
  content:""; position:absolute; inset:7px; border:1.5px dashed rgba(255,255,255,.45);
  border-radius:8px; pointer-events:none
}
.zq-price-label{font-size:14px; opacity:.85}
.zq-price-num{font-family:'Rubik',sans-serif; font-size:36px; font-weight:700; letter-spacing:-.5px}

/* ====== שלב 1: פרטי קשר מעל בחירת המוצר ====== */
.zq-h--lead{font-size:19px; margin:0 0 2px}
.zq-hint--tight{margin-bottom:8px}
.zq-start-fields{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:10px 0 6px}
/* Scoped by id: Elementor's ".elementor hr{margin:0}" outranks a bare class. */
#zq-app .zq-sep{border:0; border-top:1px dashed var(--line-2); height:0; margin:22px 0 20px}
.zq-start-consent{margin-top:14px; line-height:1.6}
/* A field the customer has to fix, on step 1 and in the order form alike. */
.zq-field input[aria-invalid="true"]{border-color:#b3492e; background:#fff7f5}

/* ====== טופס יצירת קשר ====== */
.zq-contact{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:6px}
.zq-shipnote{font-size:13px; color:var(--muted-on-soft); background:var(--olive-soft); border-radius:10px; padding:10px 12px; margin:12px 0}
.zq-order-note{font-size:14px; color:var(--muted); line-height:1.6; text-align:center; margin:0 0 14px}
.zq-seam-note{font-size:13px; line-height:1.6; color:#7a5b00; background:#fff6e0; border:1px solid #f0dca6; border-radius:10px; padding:10px 12px; margin:0 0 12px}
.zq-wa{background:#25D366; border-color:#25D366; color:#fff; text-decoration:none}
.zq-wa:hover{opacity:.92; background:#25D366}
.zq-wa-wrap{text-align:center; margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.zq-or-line{display:block; font-size:13px; color:var(--muted); margin-bottom:10px}
.zq-flow{margin-top:6px}
.zq-flow-q{font-size:16px; margin:10px 0; font-weight:700; text-align:center}
.zq-back-link{background:none; border:none; color:var(--olive); cursor:pointer; font:inherit; font-size:14px; padding:4px 0}
.zq-back-link:hover{text-decoration:underline}
.zq-erotex{margin:8px 0 4px}
.zq-erotex-lead{font-size:14px; color:var(--muted); line-height:1.6; margin:0 0 14px}
.zq-btn--erotex{display:block; width:100%; box-sizing:border-box; text-align:center; text-decoration:none; background:var(--olive); color:#fff; margin-bottom:16px}
.zq-btn--erotex:hover{opacity:.92}
.zq-erotex-field{max-width:300px}
.zq-field--full{grid-column:1 / -1}

/* ====== פעולות ====== */
.zq-actions{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0 4px}
.zq-done{
  background:var(--olive-soft); border:1px solid var(--olive);
  border-radius:var(--radius-sm); padding:16px; margin-top:14px;
  font-size:15px; color:var(--olive-deep); text-align:center; font-weight:500
}

/* ====== כפתורים ====== */
.zq-btn{
  font:inherit; font-weight:700; font-size:15px; cursor:pointer; border:1.5px solid transparent;
  border-radius:var(--radius-sm); padding:13px 22px; transition:.18s
}
.zq-btn--next{background:var(--olive); color:#fff}
.zq-btn--next:hover:not(:disabled){background:var(--olive-deep)}
.zq-btn--next:disabled{background:var(--line-2); color:#fff; cursor:not-allowed; opacity:.7}
.zq-btn--ghost{background:transparent; color:var(--muted); border-color:var(--line-2)}
.zq-btn--ghost:hover{border-color:var(--olive); color:var(--olive-deep)}
/* The submit button used to carry --clay, the accent the prototype inherited
   from its blue original. It is the only brand-coloured button on the final
   step (the others there are the ghost "back" and the green WhatsApp), so it
   loses no emphasis by joining the brand family. */
.zq-btn--order{background:var(--olive); color:#fff}
.zq-btn--order:hover{background:var(--olive-deep)}
.zq-btn--call{background:#fff; color:var(--olive-deep); border-color:var(--olive)}
.zq-btn--call:hover{background:var(--olive-soft)}

/* ====== ניווט / טקסטים קטנים ====== */
.zq-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:22px}
.zq-nav--end{margin-top:8px; border-top:1px solid var(--line); padding-top:14px}
.zq-err{color:#b3492e; font-size:13.5px; margin:10px 0 0; min-height:1px}
.zq-empty{color:var(--muted); text-align:center; padding:20px}
.zq-foot{text-align:center; color:var(--muted); font-size:12.5px; margin:16px 0 0}

/* ====== נגישות + מובייל ====== */
.zq-btn:focus-visible,.zq-opt:focus-visible,.zq-swatch:focus-visible,
.zq-chip:focus-visible,.zq-field input:focus-visible{outline:3px solid var(--clay); outline-offset:2px}
@media (max-width:560px){
  #zq-app{padding:22px 12px 32px}
  .zq-card{padding:20px 14px}
  .zq-grid--products{grid-template-columns:repeat(2,1fr); gap:10px}
  #zq-products .zq-opt,#zq-locations .zq-opt{padding:24px 10px}
  #zq-products .zq-opt h3,#zq-locations .zq-opt h3{font-size:clamp(19px,6.4vw,24px)}
  .zq-grid--fabric{grid-template-columns:repeat(3,1fr); gap:9px}
  .zq-dims,.zq-dims.zq-dims--2{grid-template-columns:1fr}
  .zq-contact,.zq-actions{grid-template-columns:1fr}
  .zq-steps{gap:4px}
  .zq-steps li{font-size:0; gap:0}
  .zq-steps li span{font-size:12px}
  .zq-h{font-size:21px}
  .zq-price{padding:18px}
  .zq-price-num{font-size:30px}
  .zq-item{gap:10px; padding:9px 10px}
  .zq-item-fab{width:42px; height:42px}
  .zq-item-info strong{font-size:13.5px}
  .zq-btn{padding:13px 18px}
}
@media (max-width:380px){
  .zq-grid--fabric{grid-template-columns:repeat(2,1fr)}
  .zq-price-num{font-size:27px}
  .zq-price-label{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .zq-step{animation:none}
  .zq-opt:hover,.zq-swatch:hover .zq-sw-img{transform:none}
}
/* Where-to-find-the-number hint under the external catalogue button. Optional:
   nothing is printed unless the owner uploaded an image in the settings. */
.zq-erotex-hint{margin:14px 0 4px; padding:0}
.zq-erotex-hint img{display:block; width:100%; max-width:430px; height:auto;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff}
.zq-erotex-hint figcaption{margin-top:7px; font-size:13px; color:var(--muted); line-height:1.5}

/* ---------------------------------------------------------------------------
   Phone width: reclaim the gutters.

   Measured on the live page at 390px: the theme container takes 15px a side,
   Elementor's widget wrap another 10px, #zq-app 12px and .zq-card 14px — four
   nested paddings that leave the content 277px of a 390px screen. The outer two
   belong to the theme and are used by every other block on the site, so they
   stay; instead the app pulls itself out over them with a negative inline
   margin and keeps one honest gutter of its own.

   The negative margin is exactly the outer padding (15 + 10), which lands the
   app on the page's own content column — the same width as the headings and
   paragraphs around it, and never wider than the viewport, which is what would
   cause sideways scrolling. The card then sits flush in that column, the way
   the hero image already does, and keeps its own padding for the text inside.
   --------------------------------------------------------------------------- */
@media (max-width: 600px){
  #zq-app{
    margin-inline: -25px;          /* 15px theme container + 10px widget wrap */
    padding-inline: 0;             /* flush with the page column, like the hero image */
  }
  .zq-card{ padding-inline: 14px; border-radius: 12px }
  .zq-head{ padding-inline: 2px }
  .zq-steps{ gap: 4px }
  /* Two option tiles a row stay two a row, but with the extra width they no
     longer wrap their labels onto three lines. */
  .zq-grid--products{ gap: 10px }
  .zq-dims{ gap: 10px }
  /* Name, phone and e-mail stack: three in a row is too narrow to type in. */
  .zq-start-fields{ grid-template-columns: 1fr; gap: 10px }
  .zq-h--lead{ font-size: 18px }
  #zq-app .zq-sep{ margin: 18px 0 16px }

  /* House number, flat and floor are two or three characters each. Stacking
     them full width made the address the longest part of the form, so they
     share one row while every other field keeps the whole width.
     A browser without :has() drops this block and gets the stacked form. */
  .zq-contact:has(#zq-o-house){ grid-template-columns: repeat(3, 1fr) }
  .zq-contact:has(#zq-o-house) > .zq-field{ grid-column: 1 / -1 }
  .zq-contact > .zq-field:has(#zq-o-house),
  .zq-contact > .zq-field:has(#zq-o-apt),
  .zq-contact > .zq-field:has(#zq-o-floor){ grid-column: auto }
}

/* Very narrow phones: trim the card's own padding so nothing clips. */
@media (max-width: 360px){
  #zq-app{ margin-inline: -25px; padding-inline: 0 }
  .zq-card{ padding-inline: 11px }
}

/* A sent quote is final: no remove buttons on its summary (a new quote starts
   from "one more item" or "start over"). */
#zq-app.zq-sent .zq-item-rm{ display: none }