/* Booking 3B hero card (Claude Design "Sharma - Booking 3B Prototype", owner 2026-09-30). Scoped: #sfa-b3 / .b3-*, plus the host classes the layer sets on the hero card (.b3-host) and hero (.b3-dim). No Tailwind utilities. Colours are restated per state because GeneratePress paints button:hover/focus navy and gives every button 10px 20px padding. */ #sfa-hero33 .h33-card.b3-host { display: flex; flex-direction: column; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; border-radius: 30px; z-index: 6; } #sfa-hero33 .h33-card.b3-host > :not(#sfa-b3):not(.h33-cbody) { display: none !important; } /* the 33D body stays as a zero-height box UNDER the 3B card, holding only its "See all" link: hero 33D's tablet sticky bar keys on that link leaving the top of the screen, so it keeps appearing exactly when the (now 3B) card is scrolled past */ #sfa-hero33 .h33-card.b3-host > .h33-cbody { order: 2; display: block !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden !important; visibility: hidden !important; } #sfa-hero33 .h33-card.b3-host > .h33-cbody > :not(.h33-seem) { display: none !important; } #sfa-hero33 .h33-card.b3-host .h33-seem, #sfa-hero33 .h33-card.b3-host #h33-seeall-m { height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden !important; } #sfa-hero33 .h33-card.b3-host > #sfa-b3 { order: 1; } @media (min-width: 1024px) { #sfa-hero33.b3-dim .h33-head, #sfa-hero33.b3-dim .h33-conds, #sfa-hero33.b3-dim .h33-cta2, #sfa-hero33.b3-dim .h33-stats, #sfa-hero33.b3-dim .h33-ins, #sfa-hero33.b3-dim .h33-seals, #sfa-hero33.b3-dim .h33-steps { opacity: .2; filter: blur(2px); } #sfa-hero33 .h33-head, #sfa-hero33 .h33-conds, #sfa-hero33 .h33-cta2, #sfa-hero33 .h33-stats, #sfa-hero33 .h33-ins, #sfa-hero33 .h33-seals { transition: opacity .45s, filter .45s; } } #sfa-b3-src { display: none !important; } /* the hero clips with overflow:hidden, which makes it a scroll container and kills position:sticky (the short-screen Confirm bar); overflow:clip clips the same pixels without being a scroll container. Only while 3B is mounted. */ @supports (overflow: clip) { #sfa-hero33.b3-on { overflow: clip; } } #b3-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2147483000; } /* fix round 1 (CRO F9): the site's ink #16233d + blue #1857E8 (header Book, hero, today's card) instead of the prototype's */ /* R1 2026-09-30 (desktop contrast touch-up): grey text #6E7380 -> #5F6571 (4.27:1 -> 5.27:1 on the #F2F3F5 card) and green TEXT #1E8E3E -> #15803D (--b3-green-t: 4.21:1 -> 5.02:1 on white, 4.51:1 on the #E9F6EE tint); green fills/borders keep #1E8E3E. */ #sfa-b3 { --b3-ok: 1; --b3-blue: #1857E8; --b3-blue-d: #1449C6; --b3-green: #1E8E3E; --b3-green-t: #15803D; --b3-ink: #16233d; --b3-mute: #5F6571; --b3-ease: cubic-bezier(.22,.8,.24,1); --b3-display: 'Bricolage Grotesque', Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; visibility: visible; position: relative; width: 100%; margin-left: 0; font-family: Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--b3-ink); -webkit-font-smoothing: antialiased; text-align: left; line-height: 1.3; font-size: 14px; letter-spacing: normal; text-transform: none; transition: width .5s var(--b3-ease), margin-left .5s var(--b3-ease); z-index: 6; } #sfa-b3 *, #sfa-b3 *::before, #sfa-b3 *::after { box-sizing: border-box; } #sfa-b3 button, #sfa-b3 input, #sfa-b3 select { font: inherit; color: inherit; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; text-transform: none; letter-spacing: inherit; line-height: inherit; min-height: 0; min-width: 0; width: auto; height: auto; -webkit-appearance: none; appearance: none; text-align: inherit; outline: none; text-decoration: none; } #sfa-b3 button { cursor: pointer; -webkit-tap-highlight-color: transparent; } #sfa-b3 button:focus-visible, #sfa-b3 a:focus-visible, #sfa-b3 [tabindex]:focus-visible { outline: 3px solid rgba(24,87,232,.55); outline-offset: 2px; } #sfa-b3 p, #sfa-b3 h2 { margin: 0; padding: 0; border: 0; } #sfa-b3 a { color: var(--b3-blue); text-decoration: none; } #sfa-b3 svg { display: inline-block; flex: none; } #sfa-b3.is-wide { width: var(--b3-ww, 920px); margin-left: var(--b3-ml, -468px); } #sfa-b3 .b3-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* card + viewport + screens */ #sfa-b3 .b3-card { position: relative; background: #F2F3F5; border-radius: 30px; box-shadow: 0 24px 60px rgba(11,31,58,.3); } #sfa-b3 .b3-vp { position: relative; transition: height .45s var(--b3-ease); } #sfa-b3 .b3-vp.is-anim { overflow: hidden; border-radius: 30px; } #sfa-b3 .b3-scr { position: relative; } #sfa-b3 .b3-scr.is-out { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; } #sfa-b3 .b3-scr.in-r { animation: b3InR .45s var(--b3-ease) both; } #sfa-b3 .b3-scr.in-l { animation: b3InL .45s var(--b3-ease) both; } #sfa-b3 .b3-scr.out-l { animation: b3OutL .45s var(--b3-ease) both; } #sfa-b3 .b3-scr.out-r { animation: b3OutR .45s var(--b3-ease) both; } @keyframes b3InR { from { transform: translateX(42%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes b3InL { from { transform: translateX(-42%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes b3OutL { from { transform: none; opacity: 1; } to { transform: translateX(-42%); opacity: 0; } } @keyframes b3OutR { from { transform: none; opacity: 1; } to { transform: translateX(42%); opacity: 0; } } @keyframes b3Fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes b3Shake { 0%,100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } @keyframes b3Wk { from { transform: translateX(var(--b3-wk, 40px)); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes b3Spin { to { transform: rotate(360deg); } } @keyframes b3Nudge { 0% { box-shadow: 0 0 0 0 rgba(24,87,232,.45); } 100% { box-shadow: 0 0 0 12px rgba(24,87,232,0); } } @keyframes b3Swap { 0% { transform: translateY(70%); opacity: 0; } 60% { transform: translateY(-8%); opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes b3Ring { 0% { box-shadow: 0 0 0 0 rgba(24,87,232,.5); } 100% { box-shadow: 0 0 0 14px rgba(24,87,232,0); } } @keyframes b3Pulse { 0% { transform: scale(.7); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } } @keyframes b3Wave { from { opacity: 0; transform: translateY(70%) rotate(10deg); } to { opacity: 1; transform: none; } } @keyframes b3Draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } } @keyframes b3PopIn { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes b3Print { 0% { clip-path: inset(0 0 100% 0); transform: translateY(-16px); } 100% { clip-path: inset(0 0 0 0); transform: none; } } @keyframes b3Stamp { 0% { opacity: 0; transform: rotate(-12deg) scale(2.6); } 70% { opacity: 1; transform: rotate(-12deg) scale(.92); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } } @keyframes b3Shim { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } @keyframes b3Soft { from { opacity: 0; } to { opacity: 1; } } /* header block */ #sfa-b3 .b3-hd { padding: 22px 24px 16px; } #sfa-b3 .b3-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--b3-green-t); margin-bottom: 14px; } #sfa-b3 .b3-gdot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; flex: none; } #sfa-b3 .b3-title { font-family: var(--b3-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variation-settings: 'opsz' 28; line-height: 1.12; color: var(--b3-ink); outline: none; } #sfa-b3 .b3-rating { font-size: 13.5px; font-weight: 700; color: var(--b3-mute); margin-top: 6px; display: flex; gap: 6px; align-items: center; } #sfa-b3 .b3-stars { color: #FFB300; letter-spacing: 1px; } #sfa-b3 .b3-nav { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; margin-bottom: 18px; min-height: 18px; } #sfa-b3 .b3-back { color: var(--b3-blue); font-weight: 700; font-size: 13px; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; } #sfa-b3 .b3-back:hover, #sfa-b3 .b3-back:focus { background: transparent; color: var(--b3-blue-d); } #sfa-b3 .b3-back.is-green, #sfa-b3 .b3-back.is-green:hover, #sfa-b3 .b3-back.is-green:focus { color: var(--b3-green-t); } #sfa-b3 .b3-stepn { color: var(--b3-mute); } #sfa-b3 .b3-stepok { font-size: 13px; font-weight: 700; color: var(--b3-green-t); margin-bottom: 18px; } #sfa-b3 .b3-sub { font-size: 14px; font-weight: 600; color: var(--b3-mute); margin-top: 6px; } #sfa-b3 .b3-prog { height: 6px; border-radius: 3px; background: #DDE0E6; margin-top: 16px; overflow: hidden; } #sfa-b3 .b3-prog > i { display: block; height: 100%; border-radius: 3px; background: var(--b3-blue); } #sfa-b3 .b3-prog.is-done { background: var(--b3-green); } #sfa-b3 .b3-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; } /* New patient / Returning switch */ #sfa-b3 .b3-sw { position: relative; display: flex; height: 48px; border-radius: 999px; padding: 4px; background: linear-gradient(180deg,#DDE1E8,#E9ECF1); box-shadow: inset 0 1px 3px rgba(17,20,24,.18); user-select: none; -webkit-user-select: none; flex: none; } #sfa-b3 .b3-sw.is-sm { height: 44px; width: 280px; } #sfa-b3 .b3-sw-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: linear-gradient(180deg,#2F6CF5,#1857E8); box-shadow: 0 2px 8px rgba(24,87,232,.45), inset 0 1px 0 rgba(255,255,255,.3); transition: left .38s cubic-bezier(.3,1.35,.5,1); } #sfa-b3 .b3-sw.is-ret .b3-sw-thumb { left: 50%; } #sfa-b3 .b3-sw-b, #sfa-b3 .b3-sw-b:hover, #sfa-b3 .b3-sw-b:focus { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #46505C; background: transparent; border-radius: 999px; transition: color .25s; } #sfa-b3 .b3-sw-b[aria-pressed="true"], #sfa-b3 .b3-sw-b[aria-pressed="true"]:hover, #sfa-b3 .b3-sw-b[aria-pressed="true"]:focus { color: #fff; } /* rest: rows */ #sfa-b3 .b3-panel { background: #fff; border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 8px; } #sfa-b3 .b3-ph { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 2px; } #sfa-b3 .b3-ph1 { font-size: 14px; font-weight: 800; color: var(--b3-ink); } #sfa-b3 .b3-ph2 { font-size: 12px; font-weight: 600; color: var(--b3-mute); } #sfa-b3 .b3-rows { container: b3rows / inline-size; } #sfa-b3 .b3-row, #sfa-b3 .b3-row:focus { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 10px 12px 14px; border-radius: 18px; border: 2px solid #D6E2FB; background: #fff; color: var(--b3-ink); box-shadow: 0 1px 2px rgba(17,20,24,.04); transition: transform .22s cubic-bezier(.3,1.4,.5,1), box-shadow .22s, border-color .2s; text-align: left; } #sfa-b3 .b3-row.is-first { animation: b3Nudge 1.4s ease-out 1s 2; } #sfa-b3.nudged .b3-row.is-first { animation: none; } #sfa-b3 .b3-rd { line-height: 1.2; width: 74px; flex: none; } #sfa-b3 .b3-rday { display: block; font-size: 13px; font-weight: 800; } #sfa-b3 .b3-rpart { display: block; font-size: 12px; font-weight: 600; color: var(--b3-mute); } #sfa-b3 .b3-rt { line-height: 1.15; flex: 0 0 auto; min-width: max-content; } #sfa-b3 .b3-rtime { display: block; font-size: 20px; font-weight: 700; color: var(--b3-blue); white-space: nowrap; } #sfa-b3 .b3-rdoc { display: block; font-size: 13.5px; font-weight: 700; color: #46566e; white-space: nowrap; } #sfa-b3 .b3-soon { font-size: 10.5px; font-weight: 800; color: var(--b3-green-t); background: #E9F6EE; border-radius: 999px; padding: 3px 8px; align-self: flex-start; margin-top: 2px; white-space: nowrap; line-height: 1.2; } /* narrow rows (the card at 1024-1179, tablets): the tag sits under the day instead of the part-of-day word, so the time keeps its full width; wide rows (@container) keep the prototype's tag beside the time */ #sfa-b3 .b3-soon.is-inl { display: none; } #sfa-b3 .b3-soon.is-day { display: inline-block; margin-top: 3px; padding: 2px 7px; font-size: 10px; } #sfa-b3 .b3-row.is-first .b3-rpart { display: none; } @container b3rows (min-width: 392px) { #sfa-b3 .b3-soon.is-inl { display: inline-block; } #sfa-b3 .b3-soon.is-day { display: none; } #sfa-b3 .b3-row.is-first .b3-rpart { display: block; } } #sfa-b3 .b3-go { margin-left: auto; flex: 0 1 88px; min-width: 66px; height: 38px; width: 88px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 6px; background: #E8F0FE; color: var(--b3-blue); font-weight: 800; font-size: 14px; transition: all .25s cubic-bezier(.3,1.3,.5,1); } #sfa-b3 .b3-row.is-first .b3-go { background: var(--b3-blue); color: #fff; box-shadow: 0 6px 14px rgba(24,87,232,.3); } #sfa-b3 .b3-go i { font-style: normal; font-size: 16px; line-height: 1; } @media (hover: hover) { #sfa-b3 .b3-row:hover { transform: translateY(-2px); border-color: var(--b3-blue); background: #fff; color: var(--b3-ink); box-shadow: 0 10px 22px rgba(24,87,232,.18); } #sfa-b3 .b3-row:hover .b3-go { background: var(--b3-blue); color: #fff; } } #sfa-b3 .b3-row:active { transform: scale(.985); } #sfa-b3 .b3-row.is-skel { pointer-events: none; } #sfa-b3 .b3-sk { display: block; border-radius: 6px; background: linear-gradient(90deg,#EEF1F5 0,#F7F9FB 50%,#EEF1F5 100%); background-size: 400px 100%; animation: b3Shim 1.2s linear infinite; } #sfa-b3 .b3-note { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 150px; padding: 14px; border: 1.5px dashed #BFD3FB; border-radius: 16px; background: #F7FAFF; color: #46566e; font-size: 14px; font-weight: 700; line-height: 1.45; } #sfa-b3 .b3-note .b3-retry, #sfa-b3 .b3-note .b3-retry:hover, #sfa-b3 .b3-note .b3-retry:focus { align-self: flex-start; font-size: 13px; font-weight: 800; color: var(--b3-blue); background: #E8F0FE; border-radius: 999px; padding: 7px 12px; } #sfa-b3 .b3-seeall, #sfa-b3 .b3-seeall:focus { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 10px 12px 14px; border-radius: 18px; border: 2px dashed #BFD3FB; background: #F7FAFF; color: var(--b3-ink); text-align: left; transition: transform .22s cubic-bezier(.3,1.4,.5,1), box-shadow .22s, border-color .2s, background .2s; } @media (hover: hover) { #sfa-b3 .b3-seeall:hover { border-style: solid; border-color: var(--b3-blue); background: #fff; color: var(--b3-ink); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(24,87,232,.18); } } #sfa-b3 .b3-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #E8F0FE; color: var(--b3-blue); display: flex; align-items: center; justify-content: center; } #sfa-b3 .b3-sat { line-height: 1.2; min-width: 0; } #sfa-b3 .b3-sat b { display: block; font-size: 16px; font-weight: 800; color: var(--b3-blue); } #sfa-b3 .b3-sat span { display: block; font-size: 12px; font-weight: 600; color: var(--b3-mute); } #sfa-b3 .b3-arr { margin-left: auto; flex: none; width: 38px; height: 38px; border-radius: 999px; background: #E8F0FE; color: var(--b3-blue); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; } #sfa-b3 .b3-callbtn, #sfa-b3 .b3-callbtn:focus { height: 50px; width: 100%; border-radius: 999px; background: #fff; border: 2px solid #CFE6D6; color: var(--b3-green-t); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 800; transition: border-color .2s, background .2s; white-space: nowrap; } #sfa-b3 .b3-callbtn:hover { border-color: var(--b3-green); background: #F3FAF5; color: var(--b3-green-t); } #sfa-b3 .b3-callbtn small { font-size: 12px; font-weight: 700; color: #46505C; overflow: hidden; text-overflow: ellipsis; } #sfa-b3 .b3-orcall { text-align: center; font-size: 13px; font-weight: 700; color: var(--b3-mute); padding: 2px 0 2px; } #sfa-b3 .b3-orcall a { color: var(--b3-green-t); font-weight: 800; white-space: nowrap; } /* details */ #sfa-b3 .b3-stub { position: relative; background: #fff; border-radius: 24px; border: 2px solid var(--b3-blue); padding: 18px; display: flex; flex-direction: column; gap: 14px; } #sfa-b3 .b3-stub.is-ring { animation: b3Ring .7s ease-out both; } #sfa-b3 .b3-stubtop { position: relative; display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 2px dashed #E3E6EB; } #sfa-b3 .b3-tile { width: 52px; height: 52px; flex: none; border-radius: 16px; background: #E8F0FE; color: var(--b3-blue); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; } #sfa-b3 .b3-tile b { font-size: 10.5px; font-weight: 800; } #sfa-b3 .b3-tile span { font-size: 20px; font-weight: 800; } #sfa-b3 .b3-when { flex: 1; min-width: 0; line-height: 1.25; overflow: hidden; } #sfa-b3 .b3-when.is-swap { animation: b3Swap .5s cubic-bezier(.3,1.3,.5,1) both; } #sfa-b3 .b3-when b { display: block; font-size: 22px; font-weight: 700; color: var(--b3-blue); white-space: nowrap; } #sfa-b3 .b3-when span { display: block; font-size: 13px; font-weight: 600; color: var(--b3-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the shown time is gone (taken / not open for this visit type): kept on screen, struck, until the patient picks */ #sfa-b3 .b3-stub.is-gone { border-color: #FCD34D; } #sfa-b3 .b3-when.is-gone b { color: #8A919C; text-decoration: line-through; text-decoration-thickness: 2px; } #sfa-b3 .b3-when.is-gone span { color: #92400E; } #sfa-b3 .b3-chg, #sfa-b3 .b3-chg:focus { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; background: #E8F0FE; color: var(--b3-blue); border: 1.5px solid #BFD3FB; font-size: 13px; font-weight: 800; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; } #sfa-b3 .b3-chg:hover { background: var(--b3-blue); color: #fff; border-color: var(--b3-blue); } #sfa-b3 .b3-upd { position: absolute; top: -31px; right: 0; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--b3-green); border-radius: 999px; padding: 4px 10px; white-space: nowrap; animation: b3Fade .3s both; } #sfa-b3 .b3-fields { display: flex; flex-direction: column; gap: 14px; animation: b3Fade .35s both; } #sfa-b3 .b3-g2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; align-items: start; } #sfa-b3 .b3-f { display: block; min-width: 0; margin: 0; } #sfa-b3 .b3-fl { font-size: 12.5px; font-weight: 700; color: var(--b3-mute); transition: color .25s; display: flex; justify-content: space-between; gap: 6px; } #sfa-b3 .b3-fl em { font-style: normal; font-weight: 600; color: #A3A9B3; margin-left: 4px; } #sfa-b3 .b3-ok { color: var(--b3-green-t); font-weight: 800; animation: b3PopIn .35s both; } #sfa-b3 .b3-f input, #sfa-b3 .b3-f input:focus, #sfa-b3 .b3-f input:hover { display: block; width: 100%; height: 38px; border: 0; outline: none; font-size: 16px; font-weight: 600; background: transparent; padding: 0; color: var(--b3-ink); border-radius: 0; box-shadow: none; } /* focus scrolling keeps every control clear of the pinned Confirm (76px) and the fixed site header (WCAG 2.4.11) */ #sfa-b3 .b3-details input, #sfa-b3 .b3-details button:not(.b3-confirm), #sfa-b3 .b3-details a, #sfa-b3 .b3-details select, #sfa-b3 .b3-call input, #sfa-b3 .b3-call button, #sfa-b3 .b3-call a { scroll-margin-bottom: 96px; scroll-margin-top: 120px; } #sfa-b3 .b3-f input::placeholder { color: #A3A9B3; font-weight: 500; opacity: 1; } #sfa-b3 .b3-line { display: block; height: 2px; border-radius: 1px; background: #DDE0E6; transition: background .25s, transform .25s; } #sfa-b3 .b3-f[data-st="focus"] .b3-line { background: var(--b3-blue); transform: scaleY(1.5); } #sfa-b3 .b3-f.is-green[data-st="focus"] .b3-line { background: var(--b3-green); } #sfa-b3 .b3-f[data-st="ok"] .b3-line { background: var(--b3-green); } #sfa-b3 .b3-f[data-st="err"] .b3-line { background: #C2410C; } #sfa-b3 .b3-f[data-st="err"] .b3-fl { color: #C2410C; } #sfa-b3 .b3-msg { display: block; font-size: 12px; font-weight: 600; line-height: 1.4; margin-top: 6px; color: var(--b3-mute); animation: b3Fade .3s both; } #sfa-b3 .b3-f[data-st="err"] .b3-msg { color: #9A3412; background: #FFF4EC; border-radius: 8px; padding: 6px 9px; } #sfa-b3 .b3-notyou, #sfa-b3 .b3-notyou:hover, #sfa-b3 .b3-notyou:focus { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--b3-mute); text-decoration: underline; background: transparent; } #sfa-b3 .b3-pay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; color: var(--b3-mute); } #sfa-b3 .b3-pay .b3-pb, #sfa-b3 .b3-pay .b3-pb:hover, #sfa-b3 .b3-pay .b3-pb:focus { padding: 7px 12px; border-radius: 999px; background: #F2F3F5; color: var(--b3-ink); font-size: 13px; font-weight: 800; border: 1.5px solid transparent; } #sfa-b3 .b3-pay .b3-pb[aria-pressed="true"], #sfa-b3 .b3-pay .b3-pb[aria-pressed="true"]:hover, #sfa-b3 .b3-pay .b3-pb[aria-pressed="true"]:focus { background: #E8F0FE; color: var(--b3-blue); border-color: #BFD3FB; } /* CRO C1: today's insurance reassurance at the decision (verbatim copy; the self-pay line when Self-pay is picked) */ #sfa-b3 .b3-insnote { margin: -6px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: #46566e; } #sfa-b3 .b3-alts { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; } #sfa-b3 .b3-alts > span { font-size: 13px; color: var(--b3-mute); font-weight: 600; padding-left: 2px; } #sfa-b3 .b3-altg { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; } #sfa-b3 .b3-alt, #sfa-b3 .b3-alt:focus { display: flex; align-items: center; justify-content: center; height: 38px; padding: 0 6px; white-space: nowrap; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; border: 1.5px solid #D6E2FB; color: var(--b3-blue); transition: transform .2s cubic-bezier(.3,1.4,.5,1), box-shadow .2s, border-color .2s, background .2s; } @media (hover: hover) { #sfa-b3 .b3-alt:hover { border-color: var(--b3-blue); background: #E8F0FE; color: var(--b3-blue); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(24,87,232,.2); } } #sfa-b3 .b3-alt:active { transform: scale(.95); } #sfa-b3 .b3-sum { background: #FFF4EC; border: 1.5px solid #FED7AA; border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; animation: b3Fade .35s both; } #sfa-b3 .b3-sum p { font-size: 13px; font-weight: 700; color: #9A3412; } #sfa-b3 .b3-sum div { display: flex; gap: 6px; flex-wrap: wrap; } #sfa-b3 .b3-chip, #sfa-b3 .b3-chip:focus { padding: 6px 11px; border-radius: 999px; background: #fff; border: 1.5px solid #FDBA74; color: #9A3412; font-size: 12.5px; font-weight: 800; } #sfa-b3 .b3-chip:hover { background: #FFEDD5; color: #9A3412; } #sfa-b3 .b3-banner { background: #FFF7E6; border: 1.5px solid #FCD34D; color: #7C4A03; border-radius: 16px; padding: 11px 14px; font-size: 13px; font-weight: 700; line-height: 1.4; animation: b3Fade .35s both; } #sfa-b3 .b3-banner .b3-bretry, #sfa-b3 .b3-banner .b3-bretry:hover, #sfa-b3 .b3-banner .b3-bretry:focus { display: inline-block; margin-left: 4px; font-size: 13px; font-weight: 800; color: var(--b3-blue); background: #fff; border: 1.5px solid #BFD3FB; border-radius: 999px; padding: 4px 11px; } #sfa-b3 .b3-errbox { background: #FFF4EC; border: 1.5px solid #FED7AA; color: #9A3412; border-radius: 16px; padding: 11px 14px; font-size: 13px; font-weight: 700; line-height: 1.45; animation: b3Fade .35s both; } #sfa-b3 .b3-errbox a { color: #9A3412; text-decoration: underline; white-space: nowrap; } #sfa-b3 .b3-cwrap { display: flex; flex-direction: column; gap: 8px; margin: 0 -12px -12px; padding: 10px 12px 12px; } /* details: ONLY the Confirm button pins, and only while its own spot is below the fold (sticky); the consent scrolls */ #sfa-b3 .b3-cbar { position: sticky; bottom: 0; z-index: 3; margin: 0 -12px; padding: 8px 12px 12px; border-radius: 0 0 30px 30px; } #sfa-b3 .b3-cbar.is-stuck { background: linear-gradient(180deg, rgba(242,243,245,0) 0, #F2F3F5 12px); } #sfa-b3 .b3-cbar.is-stuck .b3-confirm { box-shadow: 0 8px 22px rgba(22,35,61,.28); } #sfa-b3 .b3-cend { display: block; height: 1px; margin-top: -11px; } #sfa-b3 .b3-details .b3-consent { margin-top: -4px; padding-bottom: 4px; } #sfa-b3 .b3-cwrap.is-shake, #sfa-b3 .b3-cbar.is-shake { animation: b3Shake .45s both; } #sfa-b3 .b3-big, #sfa-b3 .b3-big:focus { height: 54px; width: 100%; border-radius: 999px; background: var(--b3-blue); color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 800; transition: background .2s, transform .15s; } #sfa-b3 .b3-big:hover { background: var(--b3-blue-d); color: #fff; } #sfa-b3 .b3-big:active { transform: scale(.98); } #sfa-b3 .b3-big.is-green, #sfa-b3 .b3-big.is-green:focus { background: var(--b3-green); color: #fff; } #sfa-b3 .b3-big.is-green:hover { background: #18792F; color: #fff; } #sfa-b3 .b3-big[disabled], #sfa-b3 .b3-big[disabled]:hover { background: #C9CDD4; color: #fff; cursor: default; } #sfa-b3 .b3-big.is-wait[disabled], #sfa-b3 .b3-big.is-wait[disabled]:hover { background: #7FA2EE; cursor: progress; } #sfa-b3 .b3-big.is-pick, #sfa-b3 .b3-big.is-pick:focus, #sfa-b3 .b3-big.is-pick:hover { background: #fff; color: var(--b3-blue); box-shadow: inset 0 0 0 2px #BFD3FB, 0 8px 22px rgba(22,35,61,.18); } #sfa-b3 .b3-big.is-busy { cursor: progress; } #sfa-b3 .b3-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: b3Spin .7s linear infinite; } #sfa-b3 .b3-consent { font-size: 11.5px; font-weight: 600; line-height: 1.5; color: var(--b3-mute); text-align: center; padding: 0 10px 2px; text-wrap: pretty; } #sfa-b3 .b3-nw { white-space: nowrap; } /* a