/* ══════════════════════════════════════════════════════════════════════
   The phone action bar (2026-10-11, Velogics), architecture/phone-action-bar.md.
   Mohamed: "make sure they all have the cta buttons everywhere on the websites"
   and "the charbot button sometimes overlaps with the buttons on the phone fix it".

   Phones and tablets only (hidden from 1024px up): Call plus the page's own action,
   edge to edge, 56px tall plus the safe area. dtr-callbar.js slides it up past the
   first screen (500px) and away while a form or [data-callbar-hide] (the footer) is
   on screen, publishes --callbar-h and body[data-callbar], and keeps it off the
   contact page. Transform-only motion; reduced motion turns the slide off.
   Markup is added to every page by scripts/callbar_include.mjs.
   ══════════════════════════════════════════════════════════════════════ */
.dtr-callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:850;
  display:flex !important; align-items:stretch; gap:0; margin:0;
  padding:0 0 env(safe-area-inset-bottom, 0px) !important;
  background:#0a0f14; border-top:1px solid rgba(184,135,35,.55);
  box-shadow:0 -12px 30px -22px rgba(0,0,0,.55);
  transform:translateY(120%); transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.dtr-callbar.is-shown{ transform:translateY(0); }
.dtr-callbar[data-callbar-off]{ display:none !important; }
@media (prefers-reduced-motion:reduce){ .dtr-callbar{ transition:none; } }
@media (min-width:1024px){ .dtr-callbar{ display:none !important; } }

/* the old bar's name and rating line stays in the page for screen readers */
.dtr-callbar-note{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.dtr-callbar > a{
  flex:1 1 0; min-width:0; min-height:56px; margin:0; border-radius:0;
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:8px 14px; text-align:center; text-decoration:none;
  font:600 13px/1.25 'DM Sans',system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase;
}
.dtr-callbar > a.dtr-callbar-call{ color:#e0b862 !important; -webkit-text-fill-color:#e0b862 !important; border-inline-end:1px solid rgba(255,255,255,.12); }
/* dtr-rtl.css makes every tel: link inline-block in Arabic; keep the icon beside the word */
html[dir] .dtr-callbar > a.dtr-callbar-call{ display:flex; direction:inherit; }
.dtr-callbar > a.dtr-callbar-call svg{ width:17px; height:17px; flex:none; }
.dtr-callbar > a.dtr-callbar-act{
  flex:1.7 1 0;
  background:linear-gradient(180deg,#d4a84a 0%,#b88723 55%,#a07418 100%);
  color:#14181d !important; -webkit-text-fill-color:#14181d !important;
}
.dtr-callbar > a.dtr-callbar-act span{ display:block; }
.dtr-callbar > a:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }

/* The bar replaces the floating "Free Quote" pill on articles: one bottom bar only. */
.bp-sticky{ display:none !important; }

@media (max-width:1023.98px){
  /* The chat bubble, its greeting and its panel sit fully above the bar while it is up
     (the Velogics widget positions them with inline styles, hence !important; keyed on the
     widget's stable vlgl-/vlgg-/vlgp- classes, never on its aria-label). */
  body > .vlgl-dream_touch_renovations,
  body > .vlgg-dream_touch_renovations,
  body > .vlgp-dream_touch_renovations{ transition:bottom .3s cubic-bezier(.16,1,.3,1); }
  body[data-callbar="shown"] > .vlgl-dream_touch_renovations{ bottom:calc(var(--callbar-h, 57px) + 14px) !important; }
  body[data-callbar="shown"] > .vlgg-dream_touch_renovations,
  body[data-callbar="shown"] > .vlgp-dream_touch_renovations{ bottom:calc(var(--callbar-h, 57px) + 90px) !important; }
}
@media (max-width:1023.98px) and (prefers-reduced-motion:reduce){
  body > .vlgl-dream_touch_renovations, body > .vlgg-dream_touch_renovations, body > .vlgp-dream_touch_renovations{ transition:none; }
}