#bc-container #bc-fab{position:fixed;bottom:30px;inset-inline-end:30px;width:58px;height:58px;border-radius:50%;background:var(--bc-accent);border:0;box-shadow:0 8px 22px var(--bc-focus),0 4px 12px rgba(0,0,0,.18);cursor:pointer;z-index:99999;display:flex;align-items:center;justify-content:center;padding:0;transition:transform .18s,box-shadow .18s} #bc-container #bc-fab:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--bc-focus),0 6px 16px rgba(0,0,0,.22)} #bc-container #bc-fab:focus-visible{outline:3px solid var(--bc-accent);outline-offset:3px} #bc-container #bc-fab svg{width:26px;height:26px;fill:var(--bc-accent-contrast)} #bc-container #bc-card{position:fixed;bottom:102px;inset-inline-end:30px;width:360px;max-width:calc(100vw - 40px);max-height:calc(100vh - 130px);background:var(--bc-bg);color:var(--bc-text);border:1px solid var(--bc-border);border-radius:var(--bc-radius);box-shadow:var(--bc-shadow);opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);transform-origin:bottom right;transition:all .22s cubic-bezier(.34,1.4,.5,1);z-index:99998;overflow-y:auto;font-family:var(--bc-font)} #bc-container #bc-card.active{opacity:1;visibility:visible;transform:translateY(0) scale(1)} /* transform-origin has no logical form. The card is anchored with * inset-inline-end, so a right-to-left locale opens it against the other * edge and it must grow from that corner, not from across the card. * WordPress puts dir="rtl" on for those locales. */ [dir="rtl"] #bc-container #bc-card{transform-origin:bottom left} #bc-container .bc-header{display:flex;align-items:center;gap:11px;padding:18px 16px 0 20px} #bc-container .bc-h-icon{width:32px;height:32px;border-radius:calc(var(--bc-radius-input) - 1px);background:var(--bc-accent);display:flex;align-items:center;justify-content:center;flex:0 0 auto} #bc-container .bc-h-icon svg{width:18px;height:18px;fill:var(--bc-accent-contrast)} #bc-container .bc-header h3{flex:1;margin:0;font-family:var(--bc-font);font-size:17px;font-weight:700;color:var(--bc-text);letter-spacing:-.01em} #bc-container .bc-close{width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--bc-text-soft);cursor:pointer;display:flex;align-items:center;justify-content:center} /* Inline SVG marks replace the dingbats this widget used to type. */ #bc-container .bc-glyph{width:1em;height:1em;fill:currentColor;display:block} #bc-container .bc-close .bc-glyph{width:18px;height:18px} #bc-container .bc-badge-vip .bc-glyph{width:11px;height:11px;display:inline-block;vertical-align:-1px} #bc-container .bc-success-mark{display:flex;justify-content:center;line-height:0;margin-bottom:8px} #bc-container .bc-success-mark .bc-glyph{width:34px;height:34px} #bc-container .bc-close:hover{background:var(--bc-focus);color:var(--bc-text)} #bc-container .bc-close:focus-visible{outline:2px solid var(--bc-accent);outline-offset:2px} #bc-container .bc-body{padding:14px 20px 22px} #bc-container .bc-lead{font-size:14px;color:var(--bc-text-soft);margin:0 0 16px;line-height:1.5} #bc-container .bc-lead-verify{text-align:center} #bc-container .bc-lead-verify span,#bc-container .bc-lead-verify strong{display:block} #bc-container .bc-lead-verify strong{margin:6px 0;color:var(--bc-text);font-size:15px;overflow-wrap:anywhere} #bc-container .bc-view{display:none}#bc-container .bc-view.active{display:block;animation:bc-fade .25s} #bc-container .bc-input-group{margin-bottom:14px} #bc-container .bc-input-group label:not(.screen-reader-text){display:block;font-family:var(--bc-font);font-size:12px;font-weight:600;margin-bottom:6px;color:var(--bc-text-soft)} #bc-container .bc-input-group input,#bc-container .bc-input-group textarea,#bc-container #bc-cat{width:100%;padding:11px 13px;border:1px solid var(--bc-border-input);border-radius:var(--bc-radius-input);box-sizing:border-box;font-family:var(--bc-font);font-size:14px;color:var(--bc-text);background:var(--bc-field)} /* WCAG 2.1 AA 2.4.7/1.4.11: the translucent --bc-focus ring composited to ~1.2:1; * a field's real focus indicator must be visible, so use a solid accent-ink outline. */ #bc-container .bc-input-group input:focus,#bc-container .bc-input-group textarea:focus,#bc-container #bc-cat:focus{border-color:var(--bc-accent);outline:2px solid var(--bc-accent-ink);outline-offset:2px;box-shadow:0 0 0 3px var(--bc-focus)} #bc-container .bc-input-group textarea{resize:vertical;min-height:84px} #bc-container .bc-btn{width:100%;background:var(--bc-accent);color:var(--bc-accent-contrast);border:0;border-radius:var(--bc-radius-input);padding:12px;font-family:var(--bc-font);font-weight:700;font-size:14px;cursor:pointer;transition:filter .15s,transform .06s} #bc-container .bc-btn:hover{filter:brightness(1.07)} #bc-container .bc-btn:active{transform:translateY(1px)} #bc-container .bc-btn:disabled{opacity:.55;cursor:not-allowed} /* WCAG 2.1 AA 2.4.7: submit buttons had no focus style and fell back to an * inconsistent UA ring on the accent-filled button. */ #bc-container .bc-btn:focus-visible{outline:3px solid var(--bc-text);outline-offset:2px} /* WCAG 2.1 AA 1.3.1/3.3.2: the email and OTP labels use .screen-reader-text, * a wp-admin class that does not exist on the front end. Define a clip rule in * the plugin's own CSS so the labels are in the a11y tree regardless of theme. */ #bc-container .screen-reader-text{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} #bc-container .bc-recovery{margin-top:13px;text-align:center;font-size:13px;line-height:1.4} #bc-container .bc-link{background:none;border:0;padding:2px 4px;color:var(--bc-accent-ink);font-family:var(--bc-font);font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:2px} #bc-container .bc-link:hover{filter:brightness(1.12)} #bc-container .bc-link:disabled{color:var(--bc-text-soft);cursor:default;text-decoration:none;filter:none} #bc-container .bc-link:focus-visible{outline:2px solid var(--bc-accent);outline-offset:2px;border-radius:4px} #bc-container .bc-recovery-sep{color:var(--bc-text-soft);margin:0 2px} #bc-container .bc-badge-vip{background:var(--bc-focus);color:var(--bc-accent-ink);padding:5px 12px;border-radius:999px;font-family:var(--bc-font);font-size:11px;font-weight:700;display:inline-block;margin-bottom:12px;letter-spacing:.03em} #bc-container #bc-msg-area{margin-top:10px;font-family:var(--bc-font);font-size:13px;text-align:center;color:var(--bc-err)} #bc-container .bc-pot{position:absolute;inset-inline-start:-9999px} @keyframes bc-fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}} @media (prefers-reduced-motion:reduce){#bc-container #bc-card,#bc-container .bc-view.active,#bc-container #bc-fab{animation:none;transition:none}} @media (max-width:767px){#bc-container #bc-fab{width:52px;height:52px;bottom:20px;inset-inline-end:16px}#bc-container #bc-card{width:calc(100vw - 32px);inset-inline-end:16px;bottom:84px;max-height:calc(100vh - 104px)}}