/* =====================================================================
   BODO QUIZ — UI (clean rebuild)
   Desktop-first. Mobile rules will be added/extended later.
   Fonts are expected to be loaded by the theme/Elementor:
   - Headings: Poppins
   - Text/UI: Inter
   ===================================================================== */

/* ===== Theme tokens (scoped via .bq-root) ===== */
.bq-root{
  /* layout */
  --bq-bar-h: 60px;
  --bq-wrap: 1000px;
  --bq-radius: 18px;
  --bq-gutter: 10px;

  /* surfaces */
  --bq-top-grad-1:#906AE9;
  --bq-top-grad-2:#92E2EB;
  --bq-top-grad-3:#F74EA6;

  --bq-page: #E9DCCB;    /* фон "шторки" */
  --bq-card: #FFFFFF;    /* белая карточка */
  --bq-ink:  #000000;    /* основной текст */
  --bq-muted: rgba(0,0,0,.70);

  /* controls */
  --bq-btn-bg: #3c332e;
  --bq-btn-bd: #2b221d;
  --bq-btn-hover: #FFFAF4;

  /* text */
  --bq-font-head: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bq-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ===== Safety reset inside widget ===== */
.bq-root, .bq-root *{ box-sizing:border-box; }
.bq-root button, .bq-root input, .bq-root select, .bq-root textarea{ font:inherit; }

/* Hide Elementor header spacing when bar is on (existing logic expects this) */
html.bq-on body{ padding-top: var(--bq-bar-h);}

/* ===== Root (fixed panel above site) ===== */
.bq-root{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  pointer-events: none;
}

/* Top gradient bar background */
.bq-root::before{
  content:"";
  position: fixed;
  top:0; left:0; right:0;
  height: var(--bq-bar-h);
  background: linear-gradient(90deg, var(--bq-top-grad-1) 0%, var(--bq-top-grad-2) 45%, var(--bq-top-grad-3) 100%);
  background-size: 240% 240%;
  animation: bqTopGrad 10s ease-in-out infinite;
  z-index: 0;
}

/* Keep it clean (no extra overlay effects) */
.bq-root::after{ display:none; }

@keyframes bqTopGrad{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== BAR ===== */
.bq-bar{
  height: var(--bq-bar-h);
  display:flex;
  align-items:center;
  justify-content:center;
  width: min(var(--bq-wrap), calc(100vw - 36px));
  margin: 0 auto;
  padding: 0 var(--bq-gutter);
  position: relative;
  pointer-events: auto;
  z-index: 1;
}

/* Toggle area (title centered) */
.bq-bar__toggle{
  appearance:none;
  border:0;
  background: transparent;
  padding: 0;
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* Title */
.bq-bar__title{
  font-family: var(--bq-font-head);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
  color:#fff;
  white-space: nowrap;
  text-align:center;
  max-width: max(920px, 70vw);
}

/* Chevron in bar header */
.bq-root .bq-bar__chev::before,
.bq-root .bq-bar__chev::after{
  content: none !important;
  display: none !important;
}
.bq-root .bq-bar .bq-bar__toggle{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
.bq-root .bq-bar .bq-bar__toggle > .bq-bar__chev{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  margin-right: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  transform: none !important;
  transition: none !important;
  line-height: 0 !important;
  font-size: 0 !important;
  background: none !important;
}
.bq-root.is-open .bq-bar .bq-bar__toggle > .bq-bar__chev{
  display: none !important;
}
.bq-root .bq-bar__chev svg{
  display: block !important;
  width: 18px !important;
  height: 18px !important;
}

/* Close button in a white circle, pinned to right */
.bq-bar__close{
  appearance:none;
  border:0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background:#fff;
  cursor:pointer;
  position:absolute;
  right: var(--bq-gutter);
  display:grid;
  place-items:center;
}
.bq-bar__close:before,
.bq-bar__close:after{
  content:"";
  position:absolute;
  width: 18px;
  height: 2px;
  background:#000;
  border-radius: 2px;
}
.bq-bar__close:before{ transform: rotate(45deg); }
.bq-bar__close:after{ transform: rotate(-45deg); }

/* ===== PANEL ("шторка") ===== */
.bq-panel{
  pointer-events: none;
}
.bq-panel.is-open{
  pointer-events: auto;
}

/* Inner background */
.bq-panel__inner{
  background: var(--bq-page);
  padding: 26px 0 34px;
  box-shadow: none;
}

/* Center container for all screens */
.bq-stage{
  width: min(var(--bq-wrap), calc(100vw - 36px));
  margin: 0 auto;
}

/* ===== Typography (defaults) ===== */
.bq-h1,.bq-h2,.bq-h3{
  font-family: var(--bq-font-head);
  color: var(--bq-ink);
  margin: 0 0 14px;
}
.bq-h2{ font-size: 36px; line-height: 1.08; font-weight: 600; }
.bq-p, .bq-root p{
  font-family: var(--bq-font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--bq-muted);
  margin: 0 0 18px;
}

/* ===== Card base ===== */
.bq-card{
  background: var(--bq-card);
  border-radius: var(--bq-radius);
  box-shadow: none;
  padding: 50px;
}

/* =========================================================
   Buttons (global)
   Applies to all "Продолжить" and similar controls
   ========================================================= */
.bq-btn,
.bq-primary,
.bq-next,
.bq-prev{
  -webkit-tap-highlight-color: transparent;
}

.bq-btn{
  appearance:none;
  border: 1px solid var(--bq-btn-bd);
  background: var(--bq-btn-bg);
  color:#fff;
  cursor:pointer;
  border-radius: 999px;
  padding: 14px 30px;
  font-family: var(--bq-font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .06em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  box-shadow:
    inset 0 0 0 3px #fff,
    0 0 0 2px #fff,
    0 0 0 1px var(--bq-btn-bg),
    0 1px 1px rgba(0,0,0,.20);

  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease, background-color .2s ease, color .2s ease;
  will-change: transform, box-shadow;
}
a.bq-btn{ color:#fff; }

.bq-btn:hover,
.bq-btn:focus{
  background: var(--bq-btn-hover);
  color:#000;
  transform: translateY(-1px);
  outline: none;
}
a.bq-btn:hover, a.bq-btn:focus{ color:#000; }

.bq-btn:active{ transform: translateY(0); opacity:.96; }

/* Link-style button */
.bq-link{
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  font-family: var(--bq-font-body);
  font-size: 14px;
  font-weight: 600;
  color: rgba(0,0,0,.65);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bq-link:hover{ color:#000; }

/* =========================================================
   HERO (Screen #1)
   ========================================================= */
.bq-card.bq-hero{
  padding: 50px;
}
.bq-hero{
  display:grid;
  grid-template-columns: 1fr 390px;
  gap: 40px;
  align-items:center;
}

/* ensure heading size as requested */
.bq-card.bq-hero .bq-h2{
  font-size: 36px;
}

/* Media */
.bq-hero__media{
  width: 390px;
  height: 323px;
  border-radius: var(--bq-radius);
  overflow:hidden;
  background: transparent;
  justify-self:end;
}
.bq-hero__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* =========================================================
   Other screens (keep existing class hooks, neutral styling)
   We'll refine per next mockups.
   ========================================================= */

/* Choice grid */
.bq-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.bq-option{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  padding: 16px 16px;
  cursor:pointer;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.bq-option:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.18);
}
.bq-option.is-active{
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Option text */
.bq-option__title{
  font-family: var(--bq-font-body);
  font-size: 15px;
  font-weight: 600;
  color:#000;
  margin: 0;
}
.bq-option__hint{
  font-family: var(--bq-font-body);
  font-size: 13px;
  color: rgba(0,0,0,.60);
  margin-top: 6px;
}

/* Footer actions */
.bq-actions{
  display:flex;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 18px;
}

/* Simple inputs (form screen) */
.bq-field{
  display:flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.bq-label{
  font-family: var(--bq-font-body);
  font-size: 13px;
  color: rgba(0,0,0,.65);
}
.bq-input{
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 0 14px;
  background:#fff;
}
.bq-input:focus{
  outline:none;
  border-color: rgba(0,0,0,.28);
}

/* =========================================================
   Responsive (desktop only for now; mobile will be rebuilt later)
   ========================================================= */
@media (max-width: 1024px){
  .bq-card{ padding: 36px; }
  .bq-hero{ grid-template-columns: 1fr 360px; gap: 28px; }
  .bq-hero__media{ width:360px; height: 300px; }
}
@media (max-width: 900px){
  .bq-hero{ grid-template-columns: 1fr; }
  .bq-hero__media{
    width: 100%;
    max-width: 520px;
    height: 320px;
    justify-self: start;
  }
  .bq-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .bq-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   CLOSE button — force override Elementor/theme hover (no red)
   Based on original plugin approach: all: unset + custom drawing
   ========================================================= */
.bq-root .bq-bar__close{
  all: unset !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  position: absolute !important;
  right: var(--bq-gutter) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.bq-root .bq-bar__close:before,
.bq-root .bq-bar__close:after{
  content:"" !important;
  position:absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 18px !important;
  height: 2px !important;
  background: #000 !important;
  border-radius: 2px !important;
}
.bq-root .bq-bar__close:before{ transform: translate(-50%,-50%) rotate(45deg) !important; }
.bq-root .bq-bar__close:after { transform: translate(-50%,-50%) rotate(-45deg) !important; }

/* keep same look on hover/focus/active (theme can paint it red otherwise) */
.bq-root .bq-bar__close:is(:hover,:focus,:active,:focus-visible){
  background: #fff !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}
.bq-root .bq-bar__close:is(:hover,:focus,:active,:focus-visible):before,
.bq-root .bq-bar__close:is(:hover,:focus,:active,:focus-visible):after{
  background: #000 !important;
}

/* =========================================================
   FIX: remove Elementor/theme hover "highlight strip" on bar
   (copied logic from original plugin CSS)
   ========================================================= */
.bq-root .bq-bar:is(:hover,:focus-within){
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.bq-root .bq-bar__toggle:is(:hover,:focus,:active){
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* also guard against pseudo-element overlays from themes */
.bq-root .bq-bar:is(:hover,:focus-within)::before,
.bq-root .bq-bar:is(:hover,:focus-within)::after,
.bq-root .bq-bar__toggle:is(:hover,:focus,:active)::before,
.bq-root .bq-bar__toggle:is(:hover,:focus,:active)::after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   BAR background must be ALWAYS transparent (no theme tint)
   Keep identical on hover/focus.
   ========================================================= */
.bq-root .bq-bar,
.bq-root .bq-bar:is(:hover,:focus-within){
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Some themes paint background on toggle itself */
.bq-root .bq-bar__toggle,
.bq-root .bq-bar__toggle:is(:hover,:focus,:active){
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Hard kill any overlay pseudo-elements */
.bq-root .bq-bar::before,
.bq-root .bq-bar::after,
.bq-root .bq-bar__toggle::before,
.bq-root .bq-bar__toggle::after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   Panel ("шторка") — full viewport height WHEN OPENED
   JS toggles .is-open on .bq-root (not on .bq-panel)
   ========================================================= */

/* When quiz is open — make panel a full-screen curtain under the bar */
.bq-root.is-open .bq-panel{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--bq-bar-h) !important;
  bottom: 0 !important;
  height: calc(100vh - var(--bq-bar-h)) !important;
}

/* Let the inner area scroll inside the curtain */
.bq-root.is-open .bq-panel__inner{
  height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   GLOBAL: When quiz is open, block interaction with page
   - Full-screen click-catcher backdrop
   - Ensures underlying site is not clickable
   ========================================================= */

/* click-catcher backdrop under the bar and above the page */
.bq-root.is-open::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;                 /* below .bq-bar (z-index:1) */
  background: transparent;    /* visual stays the same */
  pointer-events: auto;       /* blocks clicks to the page */
}

/* ensure panel sits above backdrop */
.bq-root.is-open .bq-panel{
  z-index: 1 !important;
  pointer-events: auto !important;
}

/* make inner background cover full width/height so no "holes" */
.bq-root.is-open .bq-panel__inner{
  width: 100% !important;
  min-height: 100% !important;
  background: #E9DCCB !important;
}

/* =========================================================
   SCREEN #2 (choices/ranges): "таблетка" header + icon back
   - Title (Poppins 28/700)
   - Back button = circular icon (reuses existing .bq-link[data-bq-back])
   - Below: second white block with grid, spacing 22px
   - Options use .bq-btn look, but inverted: light default, dark active/hover
   ========================================================= */

/* This screen uses renderChoices/renderRanges -> .bq-card + .bq-h3 + .bq-grid + .bq-link[data-bq-back] */
.bq-root.is-open .bq-stage .bq-card {
  position: relative;
}

/* Header pill (h3) */
.bq-root.is-open .bq-stage .bq-card > .bq-h3 {
  margin: 0;
  height: 80px; /* макет: таблетка (если нужно 8px — скажи, поправлю) */
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: 999px;
  background: #fff;
  padding: 0 22px 0 22px; /* место справа под круглую кнопку */
  font-family: var(--bq-font-head);
  font-size: 28px;
  font-weight: 700;
  color: #000;
}

/* Hide any subtitle spacing on this screen (optional) */
.bq-root.is-open .bq-stage .bq-card > .bq-p {
  margin-top: 10px;
}

/* Place "back/restart" button in top-right of the pill */
.bq-root.is-open .bq-stage .bq-card .bq-link[data-bq-back] {
  position: absolute;
  top: 40px;              /* center within 80px pill */
  right: 22px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #3c332e;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  outline: none;
  font-size: 0;           /* hide text */
  line-height: 0;
  color: transparent;
}
.bq-root.is-open .bq-stage .bq-card .bq-link[data-bq-back]::before {
  content: "";
  width: 21px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2221%22%20height%3D%2218%22%20viewBox%3D%220%200%2021%2018%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M14%209C14%207.9%2013.1%207%2012%207C10.9%207%2010%207.9%2010%209C10%2010.1%2010.9%2011%2012%2011C13.1%2011%2014%2010.1%2014%209ZM12%200C7.03%200%203%204.03%203%209H0L4%2013L8%209H5C5%205.13%208.13%202%2012%202C15.87%202%2019%205.13%2019%209C19%2012.87%2015.87%2016%2012%2016C10.49%2016%209.09%2015.51%207.94%2014.7L6.52%2016.14C8.04%2017.3%209.94%2018%2012%2018C16.97%2018%2021%2013.97%2021%209C21%204.03%2016.97%200%2012%200Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 21px 18px;
  background-position: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.bq-root.is-open .bq-stage .bq-card .bq-link[data-bq-back]:is(:hover,:focus,:active,:focus-visible) {
  background: #3c332e;
  filter: none;
  outline: none;
}

/* Second block container: style the grid itself as a white card */
.bq-root.is-open .bq-stage .bq-card > .bq-grid {
  margin-top: 22px;
  background: #fff;
  border-radius: var(--bq-radius);
  padding: 38px 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

/* Choice buttons inside grid: plugin uses .bq-opt */
.bq-root.is-open .bq-stage .bq-card > .bq-grid .bq-opt {
  border-radius: 999px;
  padding: 16px 18px;
  min-height: 54px;
  background: #FFFAF4;
  color: #000;
  border: 1px solid #2b221d;
  font-family: var(--bq-font-body);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow:
    inset 0 0 0 3px #fff,
    0 0 0 2px #fff,
    0 0 0 1px #3c332e,
    0 1px 1px rgba(0, 0, 0, .20);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease, background-color .2s ease, color .2s ease;
  cursor: pointer;
}
.bq-root.is-open .bq-stage .bq-card > .bq-grid .bq-opt:hover {
  background: #3c332e;
  color: #fff;
  transform: translateY(-1px);
}
.bq-root.is-open .bq-stage .bq-card > .bq-grid .bq-opt.is-active {
  background: #3c332e;
  color: #fff;
}
.bq-root.is-open .bq-stage .bq-card > .bq-grid .bq-opt.is-active:hover {
  transform: none;
}

/* Label inside option */
.bq-root.is-open .bq-stage .bq-card > .bq-grid .bq-opt__label {
  font: inherit;
  color: inherit;
}

/* Responsive for this screen (still desktop-first) */
@media (max-width: 900px){
  .bq-root.is-open .bq-stage .bq-card > .bq-h3{
    padding-left: 22px;
    padding-right: 72px;
    font-size: 22px;
    height: 68px;
  }
  .bq-root.is-open .bq-stage .bq-card .bq-link[data-bq-back]{
    top: 34px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
  .bq-root.is-open .bq-stage .bq-card > .bq-grid{
    grid-template-columns: 1fr;
    padding: 22px;
  }
}

/* =========================================================
   SCREEN #2 — layout fix to match Figma (header pill + separate options block)
   ========================================================= */

/* Make bq-card act as wrapper (white background already) */
.bq-root.is-open .bq-stage .bq-card{
  padding: 40px 44px !important;
}

/* Header pill: use h3 as the pill block */
.bq-root.is-open .bq-stage .bq-card > .bq-h3{
  margin: 0 !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;
  border-radius: 999px !important;
  background: #fff !important;

  padding: 0 86px 0 44px !important; /* space for icon button on the right */

  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #000 !important;
}

/* Back / restart icon aligned within the pill (top-right) */
.bq-root.is-open .bq-stage .bq-card .bq-link[data-bq-back]{
  top: 40px !important;   /* center of 80px pill */
  right: 22px !important;
}

/* Options block: the grid becomes the second white block */
.bq-root.is-open .bq-stage .bq-card > .bq-grid{
  margin-top: 22px !important;
  background: #fff !important;
  border-radius: 18px !important;
  padding: 34px 34px !important;
  gap: 22px !important;
}

/* Buttons: light by default with DOUBLE dark outline, dark on hover/active */
.bq-root.is-open .bq-stage .bq-card > .bq-grid .bq-opt{
  background: #FFFAF4 !important;
  color: #000 !important;

  border: 1px solid #2b221d !important;

  /* double outline: outer border + inner stroke separated by light gap */
  box-shadow:
    inset 0 0 0 2px #FFFAF4,   /* gap */
    inset 0 0 0 3px #2b221d,   /* inner dark line */
    0 1px 1px rgba(0, 0, 0, .20) !important;
}

.bq-root.is-open .bq-stage .bq-card > .bq-grid .bq-opt:hover,
.bq-root.is-open .bq-stage .bq-card > .bq-grid .bq-opt.is-active{
  background: #3c332e !important;
  color: #fff !important;

  border-color: #2b221d !important;
  box-shadow:
    inset 0 0 0 3px #fff,
    0 0 0 2px #fff,
    0 0 0 1px #3c332e,
    0 1px 1px rgba(0, 0, 0, .20) !important;
}

/* =========================================================
   SCREEN #2 — exact 2-block layout (as in макет)
   - Wrapper (.bq-card) becomes transparent container
   - Block 1: header pill (.bq-h3) with fully rounded corners
   - Block 2: options card (.bq-grid) with radius 18px
   - Gap between blocks: 22px
   - "Пройти заново" (button.bq-link[data-bq-back]) moved to header (icon only)
   ========================================================= */

/* Apply only to choice screens (they have .bq-grid) */
.bq-root.is-open .bq-stage .bq-card:has(> .bq-grid){
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  position: relative !important;
}

/* Header pill = first block */
.bq-root.is-open .bq-stage .bq-card:has(> .bq-grid) > .bq-h3{
  margin: 0 !important;
  height: 80px !important;
  display:flex !important;
  align-items:center !important;

  width: 100% !important;
  border-radius: 999px !important;
  background: #fff !important;

  padding: 0 86px 0 44px !important; /* space for icon button */
  font-family: var(--bq-font-head) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #000 !important;
}

/* Remove subtitle spacing on these screens (если появится — можно вернуть позже) */
.bq-root.is-open .bq-stage .bq-card:has(> .bq-grid) > .bq-p{
  display:none !important;
}

/* Options card = second block */
.bq-root.is-open .bq-stage .bq-card:has(> .bq-grid) > .bq-grid{
  margin-top: 22px !important;
  background: #fff !important;
  border-radius: 18px !important;
  padding: 34px 34px !important;

  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 22px !important;
}

/* Footer actions exist in HTML; hide them (restart moved to header) */
.bq-root.is-open .bq-stage .bq-card:has(> .bq-grid) > .bq-grid + .bq-actions{
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important; /* but button will be clickable */
}

/* Restart button placed in header top-right (icon only) */
.bq-root.is-open .bq-stage .bq-card:has(> .bq-grid) .bq-link[data-bq-back]{
  pointer-events: auto !important;

  position: absolute !important;
  top: 40px !important;     /* center of 80px pill */
  right: 22px !important;
  transform: translateY(-50%) !important;

  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: #3c332e !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  box-shadow: none !important;
  text-decoration:none !important;

  font-size: 0 !important;  /* hide text */
  line-height: 0 !important;
  color: transparent !important;
}

/* Keep the SVG icon (already defined in v8/v9 via ::before); just ensure it stays */
.bq-root.is-open .bq-stage .bq-card:has(> .bq-grid) .bq-link[data-bq-back]:is(:hover,:focus,:active,:focus-visible){
  background: #3c332e !important;
  filter: none !important;
  outline: none !important;
}

/* Buttons: light default with DOUBLE dark outline, dark on hover/active */
.bq-root.is-open .bq-stage .bq-card:has(> .bq-grid) > .bq-grid .bq-opt{
  border-radius: 999px !important;
  padding: 16px 18px !important;
  min-height: 54px !important;

  background: #FFFAF4 !important;
  color: #000 !important;

  border: 1px solid #2b221d !important;
  box-shadow:
    inset 0 0 0 2px #FFFAF4,   /* светлый зазор */
    inset 0 0 0 3px #2b221d,   /* внутренняя тёмная линия */
    0 1px 1px rgba(0, 0, 0, .20) !important;

  font-family: var(--bq-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;

  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease, background-color .2s ease, color .2s ease !important;
}

.bq-root.is-open .bq-stage .bq-card:has(> .bq-grid) > .bq-grid .bq-opt:hover,
.bq-root.is-open .bq-stage .bq-card:has(> .bq-grid) > .bq-grid .bq-opt.is-active{
  background: #3c332e !important;
  color: #fff !important;

  border-color: #2b221d !important;
  box-shadow:
    inset 0 0 0 3px #fff,
    0 0 0 2px #fff,
    0 0 0 1px #3c332e,
    0 1px 1px rgba(0, 0, 0, .20) !important;
}

/* Responsive (temporary) */
@media (max-width: 900px){
  .bq-root.is-open .bq-stage .bq-card:has(> .bq-grid) > .bq-h3{
    padding-left: 22px !important;
    padding-right: 72px !important;
    font-size: 22px !important;
    height: 68px !important;
  }
  .bq-root.is-open .bq-stage .bq-card:has(> .bq-grid) .bq-link[data-bq-back]{
    top: 34px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
  }
  .bq-root.is-open .bq-stage .bq-card:has(> .bq-grid) > .bq-grid{
    grid-template-columns: 1fr !important;
    padding: 22px !important;
  }
}

/* =========================================================
   Header progress chip (shows previous choices: "вес | бюджет")
   Appears in the header pill (screen 3+).
   ========================================================= */
.bq-root.is-open .bq-stage .bq-progress{
  position: absolute;
  top: 40px;               /* center of 80px header pill */
  right: 98px;             /* leaves room for the round restart button */
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 18px;
  border-radius: 999px;
  background: #E9DCCB;

  font-family: var(--bq-font-body);
  font-size: 18px;
  font-weight: 500;
  color: #000;

  max-width: 560px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile adjustments */
@media (max-width: 900px){
  .bq-root.is-open .bq-stage .bq-progress{
    top: 34px;
    right: 70px;
    font-size: 16px;
    padding: 10px 14px;
    max-width: 55vw;
  }
}


/* === BQ patch: progress chip + restart icon (append to your current CSS) === */

/* заголовок-плашка должен быть контейнером для чипа */
.bq-h3{ position:relative; }

/* чип с выбранными параметрами (вес / бюджет) */
.bq-progress{
  position:absolute;
  right:84px;             /* место под круглую кнопку справа */
  top:50%;
  transform:translateY(-50%);
  background:#E9DCCB;
  color:#000;
  border-radius:999px;
  padding:12px 16px;
  font: 500 18px/1.1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  white-space:nowrap;
  max-width:60%;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* иконка “Пройти заново” (без текста) */
.bq-restart{
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;
  background:#3a312c;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.bq-restart::before{
  content:"";
  width:21px;
  height:18px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  /* svg from your макет */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='18' viewBox='0 0 21 18' fill='none'%3E%3Cpath d='M14 9C14 7.9 13.1 7 12 7C10.9 7 10 7.9 10 9C10 10.1 10.9 11 12 11C13.1 11 14 10.1 14 9ZM12 0C7.03 0 3 4.03 3 9H0L4 13L8 9H5C5 5.13 8.13 2 12 2C15.87 2 19 5.13 19 9C19 12.87 15.87 16 12 16C10.49 16 9.09 15.51 7.94 14.7L6.52 16.14C8.04 17.3 9.94 18 12 18C16.97 18 21 13.97 21 9C21 4.03 16.97 0 12 0Z' fill='white'/%3E%3C/svg%3E");
}
.bq-restart:hover{ filter:brightness(1.05); }

/* сетка результатов, когда карточки приходят HTML-ом из Elementor template_id */
.bq-loop-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
@media (max-width:1024px){
  .bq-loop-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .bq-loop-grid{ grid-template-columns:1fr; }
}
/* ===== BODO QUIZ — Patch v14 (fix restart/progress/close + results split) ===== */

/* 1) Close button hidden until quiz opened */
.bq-root:not(.is-open) .bq-bar__close {
  opacity: 0 !important;
  pointer-events: none !important;
}
.bq-root.is-open .bq-bar__close {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 2) Restart button (icon only) lives in the header pill */
.bq-h3 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* progress chip sits before restart, grows naturally */
.bq-progress {
  margin-left: auto;
  background: #E9DCCB;
  border-radius: 999px;
  padding: 12px 18px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: #000;
  white-space: nowrap;
}

/* icon restart */
.bq-restart {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: #3c332e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.bq-restart::before {
  content: "";
  width: 21px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2221%22%20height=%2218%22%20viewBox=%220%200%2021%2018%22%20fill=%22none%22%3E%3Cpath%20d=%22M14%209C14%207.9%2013.1%207%2012%207C10.9%207%2010%207.9%2010%209C10%2010.1%2010.9%2011%2012%2011C13.1%2011%2014%2010.1%2014%209ZM12%200C7.03%200%203%204.03%203%209H0L4%2013L8%209H5C5%205.13%208.13%202%2012%202C15.87%202%2019%205.13%2019%209C19%2012.87%2015.87%2016%2012%2016C10.49%2016%209.09%2015.51%207.94%2014.7L6.52%2016.14C8.04%2017.3%209.94%2018%2012%2018C16.97%2018%2021%2013.97%2021%209C21%204.03%2016.97%200%2012%200Z%22%20fill=%22white%22/%3E%3C/svg%3E") no-repeat center / contain;
}
.bq-restart:hover {
  opacity: .92;
}

/* if restart still remained in actions — hide it to avoid layout bugs */
.bq-actions .bq-restart { display: none !important; }

/* 3) Never show progress chip on hero/first screen */
.bq-card:has(.bq-hero) .bq-progress { display: none !important; }

/* 4) Results screen — make two blocks like макет: header pill + body block */
.bq-card:has(.bq-results) {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.bq-card:has(.bq-results) > .bq-results {
  margin-top: 22px;
  background: #fff;
  border-radius: 18px;
  padding: 30px;
}

/* === BQ: header controls (progress + restart) === */
.bq-h3{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.bq-h3__right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}
.bq-restart-btn{
  width:46px;
  height:46px;
  border-radius:999px;
  background:#3c332e;
  border:0;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  box-shadow: 0 1px 1px rgba(0,0,0,.20);
  transition: transform .15s ease, opacity .2s ease, box-shadow .2s ease;
}
.bq-restart-btn:hover{
  transform: translateY(-1px);
}
.bq-restart-btn svg{ display:block; }

/* Close button is visible only when quiz is open */
.bq-root:not(.is-open) .bq-bar__close{
  opacity:0;
  pointer-events:none;
}

/* Safety: do not show progress on hero/first screen */
.bq-hero .bq-progress,
.bq-step--hero .bq-progress{
  display:none !important;
}

/* FIX: двойная иконка в кнопке "Пройти заново" */

/* если где-то рисуется иконка псевдоэлементами — выключаем */
.bq-root .bq-restart-btn::before,
.bq-root .bq-restart-btn::after{
  content: none !important;
  display: none !important;
}

/* если случайно оказалось 2 svg — показываем только первый */
.bq-root .bq-restart-btn svg + svg{
  display: none !important;
}

/* на всякий случай: убираем фоновые иконки */
.bq-root .bq-restart-btn{
  background-image: none !important;
}

/* ===== FIX: pill header only for steps with .bq-grid (НЕ для hero) ===== */

/* 1) Сбрасываем "таблетку" на hero-экране (где есть .bq-hero) */
.bq-root.is-open .bq-stage .bq-card:has(.bq-hero) > .bq-h3{
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: block !important;
  font-size: 36px !important; /* твой hero размер */
  font-weight: 600 !important;
  margin: 0 0 18px !important;
}

/* 2) Таблетка — только для карточек, где есть сетка выбора (.bq-grid) */
.bq-root.is-open .bq-stage .bq-card:has(> .bq-grid) > .bq-h3{
  margin: 0 !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  border-radius: 999px !important;
  background: #fff !important;

  /* ВАЖНО: одинаковые отступы слева/справа */
  padding: 0 22px 0 22px !important;

  font-family: var(--bq-font-head) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #000 !important;
}

/* правая группа внутри таблетки */
.bq-root.is-open .bq-stage .bq-card:has(> .bq-grid) > .bq-h3 .bq-h3__right{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}


/* =========================================================
   BQ header markup fix (JS renders .bq-h3 with left/right groups)
   - progress chip stays in flow (no absolute positioning)
   - restart button fixed size on the right
   ========================================================= */
.bq-root .bq-h3{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.bq-root .bq-h3__left{ flex: 1 1 auto; min-width:0; }
.bq-root .bq-h3__title{ font: inherit; color: inherit; }

.bq-root .bq-h3__right{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
}

/* progress chip (in-flow) */
.bq-root .bq-progress{
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;

  flex: 0 1 auto;
  max-width: 520px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 !important;
}

/* restart icon button */
.bq-root .bq-restart-btn{
  flex: 0 0 46px;
  width:46px !important;
  height:46px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}



/* =====================================================================
   Screen 5 — "Заявка" (результат + форма) : макет из Figma
   Два блока:
   1) Верхняя "таблетка" с заголовком + собранной инфой + кнопкой назад
   2) Контент: слева карточка результата, справа форма (в рамке)
   ===================================================================== */

.bq-h3--bar{
  background:#fff;
  border-radius:999px;
  padding:14px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  margin:0 0 18px;
}

.bq-h3--bar .bq-progress{
  background: rgba(79,107,115,.10);
  border-radius:999px;
  padding:10px 14px;
  font-size:16px;
  line-height:1;
  color: rgba(0,0,0,.78);
}
.bq-h3--bar .bq-progress:empty{ display:none; }

.bq-screen--form .bq-card--form{
  padding:28px;
}

.bq-form-layout{
  display:flex;
  align-items:flex-start;
  gap:28px;
}

.bq-form-left{
  flex:0 0 46%;
  max-width:520px;
  min-width:0;
}

.bq-form-right{
  flex:1 1 auto;
  min-width:0;
}

.bq-form-layout--single .bq-form-right{
  max-width:760px;
  margin:0 auto;
}

.bq-prod--picked{
  box-shadow:none;
}

.bq-formbox{
  border:2px solid rgba(0,0,0,.55);
  border-radius:18px;
  padding:22px;
  background:#fff;
}

.bq-formhead{ margin:0 0 16px; }
.bq-formhead__title{
  font-size:22px;
  line-height:1.12;
  font-weight:600;
  margin:0 0 8px;
}
.bq-formhead__sub{
  font-size:16px;
  line-height:1.35;
  margin:0;
  color: rgba(0,0,0,.62);
}

/* адаптив: на планшете/мобиле колонки становятся в колонку */
@media (max-width: 980px){
  .bq-form-layout{ flex-direction:column; }
  .bq-form-left{ max-width:none; flex-basis:auto; width:100%; }
  .bq-formbox{ padding:18px; }
  .bq-formhead__title{ font-size:24px; }
}



/* =========================================================
   FIX: CTA button "Получить предложение" disappeared
   Some themes/Elementor styles may hide buttons inside cards.
   Force-show and give stable spacing.
========================================================= */
.bq-root .bq-prod__bottom{
  display:block !important;

}

.bq-root .bq-prod__cta{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:46px;
  padding:12px 18px;
  border-radius:999px;
  border:0;
  background: var(--bq-accent);
  color:#000;
  font-weight:700;
  cursor:pointer;
}

.bq-root .bq-prod__cta:hover{ filter: brightness(0.98); }
.bq-root .bq-prod__cta:active{ transform: translateY(1px); }



/* =========================================================
   v2.3 — Unify header spacing/typography across all screens
   and make CTA look like .bq-btn.bq-primary (as on 1st screen)
   ========================================================= */

/* Header "pill" must be identical on every quiz screen */
.bq-root .bq-h3.bq-h3--bar{
  height:80px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;

  width:100% !important;
  background:#fff !important;
  border-radius:999px !important;
  padding:0 22px !important; /* одинаковые отступы слева/справа */
  box-shadow:0 10px 30px rgba(0,0,0,.12) !important;
  margin:0 0 18px !important;
}

.bq-root .bq-h3.bq-h3--bar .bq-h3__title{
  font-family: var(--bq-font-head) !important;
  font-size:20px !important;
  font-weight:600 !important;
  line-height:1.1 !important;
  color:#000 !important;
}

.bq-root .bq-h3.bq-h3--bar .bq-h3__left{ flex:1 1 auto !important; min-width:0 !important; }
.bq-root .bq-h3.bq-h3--bar .bq-h3__right{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

.bq-root .bq-h3.bq-h3--bar .bq-progress{
  flex:0 1 auto !important;
  max-width:520px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;

  background: rgba(79,107,115,.10) !important;
  border-radius:999px !important;
  padding:10px 14px !important;
  font-size:16px !important;
  line-height:1 !important;
  color: rgba(0,0,0,.78) !important;
}
.bq-root .bq-h3.bq-h3--bar .bq-progress:empty{ display:none !important; }

/* CTA button: same visual style as first screen (.bq-btn .bq-primary) */
.bq-root .bq-prod__cta{
  /* keep it full-width inside card */
  width:100% !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:46px !important;

  /* override old custom CTA styling to match .bq-btn */
  border: 1px solid var(--bq-btn-bd) !important;
  background: var(--bq-btn-bg) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding: 14px 30px !important;
  font-family: var(--bq-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.bq-root .bq-prod__cta:hover{ filter: brightness(0.98); }
.bq-root .bq-prod__cta:active{ transform: translateY(1px); }

/* === BODO QUIZ v2.6 OVERRIDES === */
/* 1) Страница результатов: убираем внутренний padding у bq-card (не трогаем другие экраны) */
.bq-root.is-open .bq-stage .bq-card.bq-card--results{
  padding: 0 !important;
}

/* === BODO QUIZ v2.6 OVERRIDES === */
/* 1) Страница результатов: убираем внутренний padding у bq-card (не трогаем другие экраны) */
.bq-root.is-open .bq-stage .bq-card.bq-card--results{
  padding: 0 !important;
}

/* 3) ЕДИНЫЙ СТИЛЬ ШАПКИ НА ВСЕХ ЭКРАНАХ */
/* Перебиваем старое правило padding: 0 86px 0 44px !important; */
.bq-root.is-open .bq-stage .bq-card > .bq-h3.bq-h3--bar,
.bq-root.is-open .bq-stage .bq-card > .bq-h3.bq-h3--bar[role="banner"],
.bq-root.is-open .bq-stage .bq-card.bq-card--results > .bq-h3.bq-h3--bar{
  padding: 0 22px !important;
}

/* На случай, если где-то шапка рендерится без модификатора --bar */
.bq-root.is-open .bq-stage .bq-card > .bq-h3:not(.bq-h3--hero){
  padding-left: 22px !important;
  padding-right: 22px !important;
}

/* FIX: Elementor container padding inside quiz product items */
.bq-root.is-open .bq-stage [data-bq-results] .e-con-inner{
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;

  padding: 0 !important; /* на всякий, если где-то не через vars */
}

/* Заявка: убираем padding, который Elementor задаёт через переменные */
.bq-root.is-open .bq-form-left [data-bq-selected-card] .e-con-inner{
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  padding: 0 !important;
}

/* Заявка: CTA внутри вставленной карточки не показываем */
.bq-root.is-open .bq-form-left [data-bq-selected-card] .bq-prod__bottom{
  display: none !important;
}


/* ================================
   ЗАЯВКА: карточка выбранного товара
   (вставленная Elementor loop-item)
   ================================ */

/* 1) Заголовок товара — принудительно чёрный */
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-heading-title{
  color: #000 !important;
  font-size: 24px;
  font-weight: 600;
  margin-top: 10px;
}

.bq-root.is-open .bq-form-left [data-bq-selected-card] .product-icon{
 width: 28px;
}

/* Если тема красит ссылку <a> внутри заголовка */
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-heading-title a{
  color: #000 !important;
  text-decoration: none;
}

/* 2) Убираем внутренние отступы у контейнеров Elementor в карточке */
.bq-root.is-open .bq-form-left [data-bq-selected-card] .e-con-inner{
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  padding: 0 !important;

  gap: 0 !important;            /* важное: Elementor gap */
}

/* 3) Контейнер, где ты видел padding 0 10px (elementor-element-faf52a) */
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-element-faf52a{
  padding: 0 !important;
}

/* 4) Убираем вертикальные отступы, которые Elementor задаёт виджетам */
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-element,
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-widget{
  margin-block: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 5) Возвращаем “аккуратные” интервалы (как в карточках результатов) */
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-widget-image{ margin-bottom: 10px !important; }
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-widget-heading{ margin-bottom: 10px !important; }
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-widget-text-editor{ margin-top: 8px !important; }

/* 6) Цена и старая цена — не раздуваем отступы */
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-widget-woocommerce-product-price{
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

/* (опционально) скрыть CTA внутри выбранной карточки, чтобы не дублировать форму справа */
.bq-root.is-open .bq-form-left [data-bq-selected-card] .bq-prod__bottom{
  display: none !important;
}

/* Заявка: оставляем display Elementor как есть, правим только интервалы */

/* 1) НЕ трогаем display. Сбрасываем gap у контейнеров Elementor */
.bq-root.is-open .bq-form-left [data-bq-selected-card] .e-con,
.bq-root.is-open .bq-form-left [data-bq-selected-card] .e-con-inner{
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}

/* 2) Снимаем “переменный” padding, который Elementor даёт через vars */
.bq-root.is-open .bq-form-left [data-bq-selected-card] .e-con-inner{
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  padding: 0 !important;
}

/* 3) Убираем padding 0 10px на конкретном контейнере (ты его подсветил) */
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-element-faf52a{
  padding: 0 !important;
}

/* 4) Elementor часто добавляет margin снизу каждому виджету */
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-widget,
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-element{
  margin-bottom: 0 !important;
}

/* 5) Возвращаем аккуратные отступы “как в карточке результата” */
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-widget-image{ margin-bottom: 5px !important; }
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-widget-heading{ margin-bottom: 4px !important; }
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-widget-text-editor{ margin-top: 4px !important; }
.bq-root.is-open .bq-form-left [data-bq-selected-card] .elementor-widget-woocommerce-product-price{ margin-top: 0px !important; }


/* RESULTS: убрать нижний отступ у блока цены */
.bq-root.is-open [data-bq-results] p.price{
  margin: 0 !important;
}

/* Mobile ≥360px and <768px */
@media (min-width: 320px) and (max-width: 767px){
  .bq-root.is-open .bq-stage .bq-card {
    padding: 14px 14px !important;
  }
}

/* Mobile ≥360px and <768px */
@media (min-width: 320px) and (max-width: 767px){
  .bq-root.is-open .bq-stage [data-bq-results],
  .bq-root.is-open .bq-stage .bq-results{
    padding: 14px 14px !important;
  }
}

@media (min-width: 320px) and (max-width: 767px){
  .bq-root.is-open .bq-stage .bq-hero__text h3.bq-h3{
    font-size: 24px !important;
    line-height: 1.15 !important;
  }
}

@media (min-width: 320px) and (max-width: 767px){
  /* Экран 5 (Заявка): убрать padding у формы */
.bq-root.is-open .bq-stage .bq-form-left ~ .bq-form-right form#callback-form.callback-form,
.bq-root.is-open .bq-stage [data-bq-selected-card] ~ .bq-form-right form#callback-form.callback-form{
  padding: 0 !important;
  }
}

@media (min-width: 320px) and (max-width: 767px){
.bq-form-layout {
    gap: 0px;
  }
}
@media (min-width: 320px) and (max-width: 600px){
.bq-root .bq-h3.bq-h3--bar .bq-progress {
    display: none;
  }
}


/* =========================================================
   Screen 6 (thanks) — layout: left text + right bottom logo
   ========================================================= */
.bq-thanks{
  display:flex;
  justify-content:space-between;
  gap:16px;
  min-height:220px;
}

.bq-thanks__left{
  flex:1 1 auto;
  min-width:0;
  align-self:flex-start;
}

.bq-thanks__right{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}

.bq-thanks__logo{
  width:300px;
  max-width:100%;
  height:auto;
  display:block;
}

@media (max-width: 767px){
  .bq-thanks{
    flex-direction:column;
    min-height:0;
  }
  .bq-thanks__right{
    width:100%;
    margin-top:16px;
    justify-content:flex-end;
  }
}

/* FIX: product-icons inside Bodo Quiz (form screen and others) */
.bq-root .product-icons{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: flex-start;
  justify-content: flex-start;

  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

/* на всякий случай убираем внешние влияния на li */
.bq-root .product-icons > li{
  margin: 0;
  padding: 0;
}

/* =========================================================
   FORM: Woo price styles inside выбранной карточки товара
   (old price = line-through, new price = underline)
   ========================================================= */

.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price{
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  line-height: 1.15 !important;
}

/* старая цена */
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price del{
  opacity: .55 !important;
  text-decoration: line-through !important;
}

/* чтобы точно зачёркивалось (Woo часто кладёт сумму в bdi/amount) */
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price del bdi,
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price del .amount,
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price del span{
  text-decoration: line-through !important;
}

/* новая цена */
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price ins{
  background: transparent !important;    /* Woo иногда заливает фон */
  text-decoration: none !important;
  border-bottom: 2px solid currentColor !important; /* “подчёркнутая” как в results */
  padding-bottom: 2px !important;
}

/* чтобы подчёркивание не слетало из-за внутренних тегов */
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price ins bdi,
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price ins .amount,
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price ins span{
  text-decoration: none !important;
}

/* optional: чтобы screen-reader текст не раздувал блок */
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price .screen-reader-text{
  display: none !important;
}

/* FORM: цены — отступ сверху */
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price{
  margin-top: 10px !important; /* было 0 */
}

/* FORM: убрать подчёркивание у новой цены */
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price ins{
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* FORM: match results card price styles (Elementor) */
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price del{
  opacity: .9 !important;
  color: #D44545 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price del bdi,
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price del .woocommerce-Price-amount,
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price del span{
  color: #D44545 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
}

.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price ins{
  color: #000 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price ins bdi,
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price ins .woocommerce-Price-amount,
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price ins span{
  color: #000 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}

/* FORM: enforce price output order (old price first, current price second) */
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price del{
  order: 1 !important;
}
.bq-root.is-open .bq-form-left [data-bq-selected-card] p.price ins{
  order: 2 !important;
}

/* =========================================================
   iOS/mobile: correct scroll height + safe-area
   Fix: 100vh issue in Safari (bottom browser bar overlaps)
   ========================================================= */
@media (max-width: 767px){

  /* 1) убираем 100vh — пусть top/bottom задают высоту */
  .bq-root.is-open .bq-panel{
    height: auto !important;
  }

  /* 2) добавляем запас снизу, чтобы контент не прятался под браузером */
  .bq-root.is-open .bq-panel__inner{
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}