/* Consent banner + form additions. Loaded on every page; deliberately tiny and
   dependency-free so it survives a strict CSP (D6). */
.sg-consent{position:fixed;inset-inline:0;bottom:0;z-index:9999;display:none;
  background:#fff;border-top:3px solid #B00000;box-shadow:0 -2px 18px rgba(0,0,0,.18);
  padding:16px 20px;font-size:15px;line-height:1.6;color:#222}
.sg-consent[data-open="1"]{display:block}
.sg-consent__inner{max-width:1100px;margin:0 auto;display:flex;gap:16px;
  align-items:center;flex-wrap:wrap;justify-content:space-between}
/* 380px basis + the button row overflows a 400px phone, which pushed the whole
   page into horizontal scroll. min-width:0 lets the flex item actually shrink. */
.sg-consent__text{flex:1 1 320px;min-width:0;margin:0}
.sg-consent__text a{color:#000000;text-decoration:underline}
.sg-consent__buttons{display:flex;gap:10px;flex-wrap:wrap}
.sg-consent button{font:inherit;cursor:pointer;border-radius:4px;padding:10px 22px;
  border:1px solid #B00000}
/* Elementor styles bare <button>, so these need the extra specificity to win. */
.sg-consent .sg-consent__accept{background:#000000;color:#fff;border-color:#000000}
.sg-consent .sg-consent__reject,
.sg-consent .sg-consent__manage{background:#fff;color:#000000;border-color:#B00000}
.sg-consent .sg-consent__save{background:#B00000;color:#fff;border-color:#B00000}
.sg-consent button:focus-visible{outline:3px solid #245bd4;outline-offset:2px}

/* Honeypot: hidden from people, reachable by bots.

   NOT the usual `left:-9999px` trick: this page is dir="rtl", and an absolutely
   positioned element parked far off-axis extends the document's scrollable area,
   which in RTL shifts the visible viewport onto empty space — every page rendered
   BLANK. This is the standard clip-based visually-hidden pattern instead: it
   occupies no layout and creates no overflow in either direction.

   Also deliberately not `display:none` — bots skip those fields, which is exactly
   the ones we want them to fill. aria-hidden + tabindex="-1" keep it away from
   screen readers and the keyboard. */
.sg-hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.sg-form-error{margin:10px 0 0;color:#a32020;font-size:14px}

/* --- preferences panel ------------------------------------------------- */
.sg-consent__prefs{margin:14px 0 0;border-top:1px solid #e3d9c7;padding-top:12px;
  width:100%;text-align:start}
.sg-consent__row{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px}
.sg-consent__row input{margin-top:4px;width:18px;height:18px;flex:none}
.sg-consent__row strong{display:block}
.sg-consent__row small{color:#555}
.sg-consent__manage{background:#fff;color:#000000}

/* --- legal pages -------------------------------------------------------- */
.sg-legal{line-height:1.85;font-size:17px}
.sg-legal h1{margin:0 0 6px}
.sg-legal h2{margin:32px 0 10px;font-size:1.25em}
.sg-legal p,.sg-legal li{max-width:70ch}
.sg-legal-updated{color:#666;font-size:15px;margin:0 0 24px}
.sg-legal-list{padding-inline-start:1.3em}
.sg-legal-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px;
  display:block;overflow-x:auto}
.sg-legal-table th,.sg-legal-table td{border:1px solid #ddd;padding:8px 10px;text-align:start;
  vertical-align:top}
.sg-legal-table th{background:#f2f2f2;font-weight:700}

/* --- footer legal strip ------------------------------------------------- */
.sg-legal-links{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;
  align-items:center;padding:14px 20px;background:#1c1c1c;color:#ddd;font-size:14px}
.sg-legal-links a,.sg-legal-links button{color:#ddd;text-decoration:underline;
  background:none;border:0;font:inherit;cursor:pointer;padding:0}
.sg-legal-links a:hover,.sg-legal-links button:hover{color:#fff}
.sg-legal-links a:focus-visible,.sg-legal-links button:focus-visible{
  outline:3px solid #7fb3ff;outline-offset:3px}

/* Section 11 notice card under every form (serviceandgo palette).
   text #3d3d3d on #f5f5f5 -> 10.1:1 · links #000 -> 19.3:1 · border #767676 vs white -> 4.54:1 */
.privacy-notice{
  background:#f5f5f5;     /* site palette: black / grey / red */
  border:1px solid #767676; /* 4.54:1 vs white */
  border-inline-start:4px solid #B00000;
  border-radius:8px;
  padding:14px 18px;
  margin-top:12px;
  text-align:start;
}
.privacy-notice p{
  font-size:13px;
  line-height:1.75;
  color:#3d3d3d;          /* 10.1:1 on #f5f5f5 */
  margin:0 0 8px;
}
.privacy-notice p:last-child{margin-bottom:0}
.privacy-notice a{
  color:#000;             /* 19.3:1 on #f5f5f5 */
  text-decoration:underline;
  font-weight:600;
}
.privacy-notice a:hover{color:#B00000}
.privacy-notice a:focus-visible{outline:3px solid #245bd4;outline-offset:2px}

/* Explicit consent checkbox. Elementor resets `input` hard (appearance:none,
   its own border/background), which renders a checkbox as an invisible box —
   hence the appearance:auto and the neutralising of those resets. */
/* Lives INSIDE .privacy-notice on purpose. It used to sit on the page itself,
   which meant its colour depended on whatever surrounded the form — and the
   contact page's form sits on a near-black sidebar, where #3d3d3d text was
   invisible. Inside the card the background is known, so the contrast is too. */
.sg-consent-field{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #d0d0d0;
}
.sg-consent-field label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:400;
  font-size:13.5px;
  line-height:1.65;
  color:#3d3d3d;
  cursor:pointer;
}
.sg-consent-field input[type="checkbox"]{
  appearance:auto;-webkit-appearance:auto;
  width:18px;height:18px;min-width:18px;flex:none;
  margin:2px 0 0;padding:0;
  background:transparent;border:0;border-radius:0;box-shadow:none;
  accent-color:#B00000;
  cursor:pointer;
}
.sg-consent-field input[type="checkbox"]:focus-visible{outline:3px solid #245bd4;outline-offset:2px}
.sg-consent-field a{color:#000;text-decoration:underline;font-weight:600}





@media (max-width:600px){
  .sg-consent{padding:12px 14px;font-size:14px;max-height:70vh;overflow-y:auto}
  .sg-consent__inner{flex-direction:column;align-items:stretch;gap:12px}
  .sg-consent__text{flex:1 1 auto}
  .sg-consent__buttons{width:100%}
  .sg-consent__buttons button{flex:1 1 auto;padding:12px 10px}   /* 44px touch target */
  .sg-legal-links{gap:6px 12px;padding:12px 14px;font-size:13px}
  .privacy-notice{padding:12px 14px}
  .privacy-notice p{font-size:12.5px}
}

/* serviceandgo (Stage 4): the Call Now Button bar is fixed to the bottom with a huge
   z-index and sat ON TOP of the banner's buttons (Lighthouse target-size: 0.4px
   visible). The banner must win until the visitor has chosen. */
.sg-consent{z-index:2147483647}
.sg-consent button{min-height:44px}
/* ...but that alone never won: the plugin's .cnb-zindex-10 is ALSO 2147483647, and on a tie
   the later element in the DOM paints on top. The banner sits right after the skip link
   (first Tab stop), the Call Now Button near </body> — so on phones it covered all three
   banner buttons and a tap on "קבל הכל" dialled the garage (post-launch review, 2026-09-14).
   One notch lower, via id+class so it beats the plugin class without !important. The open
   popup (2147483647, below) still sits above it too. */
#callnowbutton.call-now-button{z-index:2147483646}

/* Popup #189 (F2 "שיחה עם יועץ שירות"). Elementor's dialog.min.css gives the open
   modal z-index 9999, so the consent banner and the Call Now Button (both 2147483647)
   covered the bottom of it — on a phone exactly where the consent box and the submit
   button end up, because the Section 11 notice makes this form taller than WordPress's.
   While open, the modal is the top layer (it is appended to <body> last, so it wins
   the tie); closed, it is display:none and the banner is back on top. */
.dialog-type-lightbox.elementor-popup-modal{z-index:2147483647}
/* Mobile popup is height:100vh = the LARGE viewport; with the browser toolbar shown the
   last ~56px (the submit button) could not be scrolled into view. dvh = visible area. */
@media (max-width:767px){
  @supports (height:100dvh){
    body #elementor-popup-modal-189 .dialog-message{height:100dvh}
  }
}

/* ======================================================================================
   D19 (2026-09-14): post-launch design quick fixes, owner-approved items 1–10.
   HTML half: build.py (share_descriptions … wrap_phone_numbers). Item 1 is in sg-a11y.css.
   ====================================================================================== */

/* 5. One Hebrew typeface. The Elementor kit asks for Archivo / Montserrat / Poppins, none of which
   has Hebrew glyphs, so Hebrew text fell back to system fonts (and a synthesized 900 bold on the
   hero). Rubik (Hebrew + Latin) is self-hosted by Elementor already. Text elements only — icon
   fonts set their own family on <i> / ::before, which are not in this list. */
body, body :is(h1,h2,h3,h4,h5,h6,p,a,li,span,strong,b,em,small,label,button,input,select,textarea,
  div,td,th,blockquote,figcaption,cite,time){font-family:"Rubik",Arial,sans-serif!important}

/* 8. The phone number never breaks across lines (and is isolated from the RTL text around it). */
.sg-nowrap{white-space:nowrap;unicode-bidi:isolate}

/* 7. Service lines: emoji "icons" removed at build time; one consistent bullet instead. */
.sg-bullet::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#B00000;margin-inline-end:10px;vertical-align:.1em}

/* 2a. Footer form (F1) on the black footer: the light-grey card looked like a foreign dialog.
   Dark variant — text #d6d6d6 on #000 14.6:1 · links #fff 21:1 · border #767676 4.7:1. */
.elementor-element-a05a94a .privacy-notice{background:transparent;border-color:#767676;
  border-inline-start-color:#B00000}
.elementor-element-a05a94a .privacy-notice p,
.elementor-element-a05a94a .sg-consent-field label{color:#d6d6d6}
.elementor-element-a05a94a .privacy-notice a,
.elementor-element-a05a94a .sg-consent-field a{color:#fff}
.elementor-element-a05a94a .privacy-notice a:hover{color:#ffd6d6}
.elementor-element-a05a94a .sg-consent-field{border-top-color:#444}
.elementor-element-a05a94a .privacy-notice a:focus-visible,
.elementor-element-a05a94a .sg-consent-field input[type="checkbox"]:focus-visible{outline-color:#7fb3ff}

/* 2b. Narrow sidebar form (F3, service pages): the notice ran ~18 lines. Same text, denser. */
.elementor-element-734b25e .privacy-notice{padding:10px 12px}
.elementor-element-734b25e .privacy-notice p{font-size:12px;line-height:1.55;margin-bottom:6px}
.elementor-element-734b25e .sg-consent-field{margin-top:8px;padding-top:8px}
.elementor-element-734b25e .sg-consent-field label{font-size:12.5px;line-height:1.5;gap:8px}

/* 3. Thank-you page (authored by build.py). White on #B00000 7.4:1 · #111 on white 18.9:1. */
.sg-thanks{max-width:640px;margin:56px auto 72px;padding-inline:20px;text-align:center}
.sg-thanks h1{font-size:clamp(28px,5vw,40px);line-height:1.25;margin:0 0 14px;color:#111}
.sg-thanks p{font-size:18px;line-height:1.7;color:#333;margin:0 auto;max-width:48ch}
.sg-thanks__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.sg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;
  padding:12px 26px;border-radius:6px;font-size:17px;font-weight:600;text-decoration:none!important}
.sg-btn--primary{background:#B00000;color:#fff!important;border:2px solid #B00000}
.sg-btn--primary:hover{background:#8a0000;border-color:#8a0000}
.sg-btn--secondary{background:#fff;color:#111!important;border:2px solid #111}
.sg-btn:focus-visible{outline:3px solid #245bd4;outline-offset:3px}

/* 6. Manufacturer logos (home): two sections of 5 one-image containers. On phones Elementor
   stacked them one per row at ~300px each (~2,000px of scrolling). One compact 5-column grid. */
@media (max-width:767px){
  .elementor-element-283ba9f > .e-con-inner,
  .elementor-element-654583b > .e-con-inner{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px 12px!important;align-items:center}
  .elementor-element-283ba9f > .e-con-inner > .e-con,
  .elementor-element-654583b > .e-con-inner > .e-con{width:auto!important;max-width:none!important;
    min-height:0!important;padding:0!important;margin:0!important}
  .elementor-element-283ba9f img,
  .elementor-element-654583b img{width:100%!important;height:auto!important;max-height:56px;object-fit:contain}
}