/* Bright Dental Arlington Heights — the Hoffman Estates pattern for the action pills (2026-09-27).
   Copied rule-for-rule from the Hoffman site's contact-pills.css, review-button.css, the "Prominent
   booking and telephone actions" block of design-refresh.css, and the PractisIQ chat block of its
   styles.css. Loaded after styles.css on every page. Only the pills, the mobile header rows, the
   Google pills and the chat launcher change; pictures, typography and section colours stay. */

/* --- Red call and booking pills, green directions pills (Hoffman contact-pills.css) --- */
body a[href^="tel:"],body a.directions-pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:fit-content;max-width:100%;min-height:44px;padding:10px 18px;border:1px solid transparent!important;border-radius:999px!important;color:#fff!important;font-size:14px;font-weight:650;line-height:1.4;text-decoration:none!important;vertical-align:middle;box-sizing:border-box}
body a[href^="tel:"]{background:#c62828!important;white-space:nowrap}
body a[href^="tel:"]:hover{background:#a51f1f!important}
body a.directions-pill{background:#18743b!important;margin-top:10px;margin-bottom:6px}
body a.directions-pill:hover{background:#115a2d!important}
body a[href^="tel:"]:focus-visible,body a.directions-pill:focus-visible{outline:3px solid #202449;outline-offset:3px}
body .site-header nav a.nav-phone{width:auto}
body .site-header nav a.nav-phone svg{width:14px;height:14px;flex:none}
body .pricing-group-head>div{display:flex;flex-wrap:wrap;gap:8px}
body .site-header #mobile-nav-links a.nav-directions,body .hero-actions .action-directions{margin:0}

/* --- Book online = the same red pill (Hoffman design-refresh.css, "Prominent booking and telephone actions") --- */
.site-header nav a.nav-cta,
.site-header nav a.nav-phone,
a.btn[href*="/booking.html"],
a.btn[href^="tel:"]{background:#c62828;color:#fff;border:1px solid #c62828;border-radius:999px}
.site-header nav a.nav-cta:hover,
.site-header nav a.nav-phone:hover,
a.btn[href*="/booking.html"]:hover,
a.btn[href^="tel:"]:hover{background:#a51f1f;color:#fff;border-color:#a51f1f}

/* --- Phone-width header: the call pill on its own row, Book online + Get directions side by side,
       then Menu; the page links fold behind Menu (Hoffman styles.css + design-refresh.css + contact-pills.css) --- */
.menu-toggle{display:none}
@media(max-width:700px){
  .site-header nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .site-header nav a,.site-header nav .menu-toggle{min-height:44px}
  .site-header nav .menu-toggle{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;background:#eef2ff;color:var(--accent-deep);font:inherit;font-size:12px;font-weight:800;line-height:1;padding:9px 8px;cursor:pointer}
  .site-header nav a.nav-phone{grid-column:1/-1;order:1;font-size:15px}
  .site-header nav .nav-phone svg{display:block}
  .site-header nav a.nav-cta{grid-column:1;order:2}
  body .site-header #mobile-nav-links a.nav-directions{display:inline-flex;grid-column:2;grid-row:2;order:3;min-height:44px;padding:9px 8px;font-size:12px;width:100%}
  body .site-header nav .menu-toggle{grid-column:1/-1;grid-row:3;order:4}
  body .site-header #mobile-nav-links a.nav-cta,body .site-header #mobile-nav-links a.nav-directions{display:flex;align-items:center;justify-content:center;width:100%;height:44px;min-height:44px;margin:0;padding:0 8px;font-size:12px;font-weight:650;line-height:1.2;text-align:center;box-sizing:border-box}
  .site-header nav > a:not(.nav-phone):not(.nav-cta):not(.nav-directions){display:none;grid-column:1/-1;min-height:38px;border-radius:10px;background:#fff;order:5}
  .site-header nav.mobile-open > a:not(.nav-phone):not(.nav-cta):not(.nav-directions){display:inline-flex}
  .site-header nav.mobile-open{max-height:70vh;overflow-y:auto}
  body .hero-actions .action-directions{width:100%;min-height:50px}
  .hero-actions .btn{width:100%}
  section[id]{scroll-margin-top:235px}
}

/* --- Google pills: blue, fixed bottom-left, "Find us on Google" stacked above "Leave a Google review"
       (Hoffman review-button.css + the design-refresh.css stack rule) --- */
.gfab-stack{position:static;flex-direction:row;justify-content:center;padding:18px;flex-wrap:wrap;background:var(--soft)}
.gfab{box-shadow:none;font-weight:500;font-size:13px}
.gfab.review-launcher{position:fixed;left:18px;bottom:20px;z-index:9998;background:#14489f;color:#fff;border:1px solid #14489f;border-radius:999px;padding:12px 18px;font-size:14px;font-weight:700;box-shadow:0 4px 18px rgba(23,78,166,.35)}
.gfab.review-launcher:hover{background:#103a82}
.gfab.review-launcher:focus-visible{outline:3px solid #174ea6;outline-offset:3px}
@media(max-width:560px){.gfab.review-launcher{left:12px;bottom:20px;padding:11px 13px;font-size:12px;max-width:calc(100vw - 104px)}}
.gfab.review-launcher svg{background:#fff;border-radius:50%;padding:4px;box-sizing:content-box;width:20px;height:20px}
.gfab.review-launcher.find-launcher{bottom:82px}
@media(max-width:560px){.gfab.review-launcher.find-launcher{bottom:80px}}
@media(max-width:700px){.gfab-stack{padding-bottom:80px}.site-footer{padding-bottom:90px}}

/* --- Hero photo crop (operator, 2026-09-27: "her head is cutting off" on desktop Chrome). The photo is
       1694x928 and the desktop hero box is taller in proportion, so object-fit: cover trimmed the top and
       bottom equally and took the top of her head. Anchor the crop near the top; the phone rule
       (72% center, in styles.css) is untouched. --- */
@media(min-width:701px){.hero-image-wrap img{object-position:center 12%}}

/* --- PractisIQ chat launcher and panel: the Hoffman purple (Hoffman styles.css chat block) --- */
.pq-chat-bubble{background:#6f42c1!important;box-shadow:0 6px 20px rgba(111,66,193,.38)!important}
.pq-chat-header,.pq-chat-msg.user,.pq-chat-send,.pq-chat-callback-row .submit{background:#6f42c1!important;color:#fff!important}
.pq-chat-action-btn{color:#6f42c1!important;border-color:#6f42c1!important}
.pq-chat-action-btn:hover{background:#f3eefc!important}
.pq-chat-input:focus,.pq-chat-field input:focus,.pq-chat-field textarea:focus{border-color:#6f42c1!important}
@media (max-width:480px){
  .pq-chat-root{bottom:16px!important;right:16px!important}
  .pq-chat-panel{width:calc(100vw - 44px)!important;max-width:calc(100vw - 44px)!important;right:0!important;bottom:70px!important;height:48vh!important;max-height:370px!important;min-height:280px!important;border-radius:14px!important}
  .pq-chat-bubble{width:54px!important;height:54px!important;border-radius:27px!important;font-size:24px!important}
}
.pq-chat-input{min-height:0!important;height:38px!important;max-height:96px!important;line-height:1.4!important}
.pq-chat-input-row{align-items:flex-end!important}
.pq-chat-send{align-self:center!important;height:38px!important;padding:0 16px!important}