/* Visual B final polish (19.10): layered after visual-b.css; scoped to body.vb. */

/* compact first screen: one speed/on-site line, no duplicate hours line */
.vbSpeed__note{margin:6px 0 0;font-size:.82rem;font-weight:650;color:var(--vb-petrol)}
.vbSpeed__note::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--vb-call);vertical-align:middle}
@media (min-width:901px){
  body.vb .vbSpeed{grid-column:1;grid-row:5}
  body.vb .cpAfterHours{grid-column:1;grid-row:6}
  body.vb .cpHeroTerms{grid-column:1;grid-row:7}
  body.vb .vbRight{grid-row:1 / span 5}
  body.vb .hero__trust{grid-column:2;grid-row:6 / span 2}
}
/* phones/tablets: headline → call → callback → both faces → chronometer → one speed line → the rest */
@media (max-width:900px){
  body.vb .hero h1{order:2}
  body.vb .hero__cta{order:3}
  body.vb .vbRight{order:4}
  body.vb .vbSpeed{order:5}
  body.vb .hero__lead{order:6}
  body.vb .cpAfterHours{order:7}
  body.vb .cpHeroTerms{order:8}
  body.vb .hero__trust{order:9}
}
@media (max-width:760px){
  body.vb .vbSpeed .vbSpeed__s{display:block;grid-column:1 / -1;font-size:.86rem;line-height:1.4;margin:0}
  body.vb .vbSpeed .vbSpeed__note{grid-column:1 / -1;margin:0;font-size:.76rem}
  body.vb .hero__trust{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ≤374px: two portraits side by side do not leave room for captions — photo above caption, video link below */
@media (max-width:374px){
  body.vb .hero .vbRight>.vbMasters{grid-template-columns:1fr;grid-template-areas:"k" "pair" "v";row-gap:8px}
  body.vb .vbMasters .vbMasters__video{justify-self:start;min-height:40px}
  body.vb .vbMaster{grid-template-columns:1fr!important;justify-items:start;gap:6px}
  body.vb .vbMaster img{width:72px!important}
}

/* quick dialog: full-width growing symptom field */
.qmodal__form textarea[data-problem]{min-height:3.2em;max-height:200px;resize:vertical;line-height:1.4;overflow-y:auto}
.qmodal__form label small{font-weight:500;color:var(--vb-muted,#566d79)}
body.vb .cpVisitTerms--quick a{color:var(--vb-petrol)!important;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  /* the dialog title already says what happens; the terms box carries the conditions */
  body.vb .qmodal__lead{display:none}
  body.vb .cpVisitTerms--quick{padding:10px 12px;margin:8px 0 10px}
  body.vb .cpVisitTerms--quick p{font-size:.86rem;line-height:1.4;margin:4px 0}
  body.vb .cpVisitTerms--quick a{font-size:.82rem}
  body.vb .qmodal__box h2{margin-bottom:4px}
}

/* ---- accessibility: contrast (axe-core, WCAG 2.1 AA) ---- */
body.vb .ftr .logo b{color:#fff!important}
body.vb .ftr .logo small{color:#bcd6d9!important}
body.vb .contacts a.card span,body.vb .contacts a.card small{color:#ffffff!important}
body.vb .cpAreaAttribution,body.vb .cpAreaAttribution a{color:#566d79!important}

/* ---- readable small print: informational text at least 12px ---- */
body.vb .req__form label,body.vb .qmodal__form label{font-size:.8rem!important}
body.vb .hero__trust small,body.vb .vbMaster figcaption span,body.vb .vbChrono__city,body.vb .vbChrono__city span,
body.vb .vbMasters__k,body.vb .contacts .card small,body.vb .review .verified,body.vb .gallery button span,
body.vb .cpAreaDistricts button span,body.vb .cpAreaMapLegend span,body.vb .cpAreaAttribution,body.vb .cpAreaCardFoot,
body.vb .cpAreaSteps p b,body.vb .cpAreaResult small,body.vb .cpCaseFacts dt,body.vb .ba__model,body.vb .ba__lbl,
body.vb .btile__meta span,body.vb .fanswer__k,body.vb .cpSymptomDraft span,body.vb .pband__k,body.vb .ftr h3,
body.vb .vbPath__k,body.vb .cpAreaCardEyebrow,body.vb .cpAreaMapTag,body.vb .hero__sym-k,
body.vb .facts b,body.vb .mcard__code,body.vb .mcard__tags span{font-size:12px!important}
body.vb .vbSpeed__num span{font-size:12px!important}
body.vb .logo small{font-size:11.5px}

/* ---- touch targets: card titles, footer and inline action links get a 24px+ hit area ---- */
body.vb .svc__item h3 a,body.vb .ftr a,body.vb .vbCard__tel,body.vb .cpAdviceLink a,body.vb .vbShine__note a{display:inline-block;padding-block:5px}
body.vb .consent input[type=checkbox]{width:24px;height:24px}

/* speed: numerals use the site font with tabular digits instead of a separate 39 KB monospace font */
body.vb{--mono:"Onest","Onest Fallback",Arial,sans-serif}
body.vb [class*="num"],body.vb .cpCompactProcess ol li>b,body.vb .svc__top i,body.vb .fault__top i,body.vb .stage__index .chip i{font-variant-numeric:tabular-nums}
body.vb .cpBenefitNumber,body.vb .cpGuarantee li:before,body.vb .cpWorkshop li:before{font-family:"Onest","Onest Fallback",Arial,sans-serif!important;font-variant-numeric:tabular-nums}
