.c4b-w *,.c4b-w *::before,.c4b-w *::after{box-sizing:border-box;margin:0;padding:0} .c4b-w .c4b-init{width:100%;background:#fff;border-radius:8px;box-shadow:0 20px 40px rgba(0,30,30,.15);padding:32px 28px 28px} .c4b-w .c4b-provider-slider{width:100%;overflow:hidden;margin-top:18px;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)} .c4b-w .c4b-provider-track{display:flex;align-items:center;gap:14px;width:max-content;animation:c4bSlide 22s linear infinite} .c4b-w .c4b-provider-slider:hover .c4b-provider-track{animation-play-state:paused} .c4b-w .c4b-provider-logo{flex:0 0 auto;height:40px;padding:6px 16px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;box-shadow:0 1px 4px rgba(20,35,45,.10);border:1px solid rgba(20,35,45,.06)} .c4b-w .c4b-provider-logo img{max-height:26px;max-width:100px;object-fit:contain} .c4b-w .c4b-provider-logo span{font-size:12px;font-weight:600;color:#5a6a7a;white-space:nowrap} @keyframes c4bSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}} .c4b-w .c4b-btn{width:100%;background:var(--c4b-btn,var(--c4b-p));color:var(--c4b-btn-fg,#fff);border:none;padding:14px 20px;border-radius:var(--c4b-r-btn,2px);font-size:16px;font-weight:600;cursor:pointer;min-height:52px;transition:.2s;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 8px var(--c4b-btn-sh,var(--c4b-sh))} .c4b-w .c4b-row{display:flex;gap:10px;margin-top:18px;flex-wrap:nowrap;align-items:stretch} /* flex-basis 0 rather than auto, so the two buttons split the row evenly instead of sizing themselves from their own label lengths. */ .c4b-w .c4b-row .c4b-btn-back,.c4b-w .c4b-row .c4b-btn{flex:1 1 0;width:auto;min-width:0;min-height:52px;padding:12px 18px;font-size:16px;border-radius:var(--c4b-r-btn,2px)} .c4b-w .c4b-btn:hover{background:var(--c4b-btn-d,var(--c4b-pd));transform:translateY(-1px)} .c4b-w .c4b-btn:active{transform:translateY(1px)} .c4b-w .c4b-btn:disabled{opacity:.6;cursor:not-allowed;animation:none;transform:none} /* A band of light sweeps across the Continue button every few seconds, then waits — a moving highlight catches the eye where a static button does not, and the pause keeps it from nagging. Only on the step buttons: the entry card has the whole page to itself already. */ .c4b-w .c4b-row .c4b-btn:not(:disabled){position:relative;overflow:hidden} .c4b-w .c4b-row .c4b-btn:not(:disabled)::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none;transform:skewX(-18deg);background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);animation:c4bSheen 3.4s ease-in-out infinite} @keyframes c4bSheen{0%{left:-70%}45%{left:125%}100%{left:125%}} .c4b-w .c4b-row .c4b-btn:hover::after{animation:none;opacity:0} @media(prefers-reduced-motion:reduce){.c4b-w .c4b-row .c4b-btn:not(:disabled)::after{animation:none;opacity:0}.c4b-w .c4b-btn:hover,.c4b-w .c4b-btn:active{transform:none}} .c4b-w .c4b-btn-back{background:#fff;color:#1a2a3a;border:1.5px solid #ccd5db;padding:12px 18px;border-radius:var(--c4b-r-btn,2px);font-size:15px;font-weight:600;cursor:pointer} .c4b-w .c4b-overlay{position:fixed;inset:0;background:rgba(20,35,45,.40);backdrop-filter:blur(1px);display:none;justify-content:center;align-items:flex-start;z-index:100000;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;padding:var(--c4b-nav-gap,70px) 12px 12px;overflow-y:auto} .c4b-w .c4b-overlay.active{opacity:1;visibility:visible;display:flex} .c4b-w .c4b-popup{width:100%;max-width:560px;background:#fff;border-radius:8px;box-shadow:0 30px 70px rgba(0,0,0,.35);display:flex;flex-direction:column;height:auto;min-height:0;max-height:calc(100vh - var(--c4b-nav-h,80px) - 24px);transform:translateY(20px);transition:transform .3s;margin:0 auto;overflow:hidden} .c4b-w .c4b-overlay.active .c4b-popup{transform:translateY(0)} .c4b-w .c4b-ph{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #f0f4f5;background:#fff} .c4b-w .c4b-close{flex-shrink:0;background:#f0f4f5;color:#1a2a3a;border:none;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:15px;transition:.2s;display:flex;align-items:center;justify-content:center} .c4b-w .c4b-close:hover{background:var(--c4b-p);color:#fff} .c4b-w .c4b-prog-wrap{flex:1;display:none;align-items:center;gap:10px} .c4b-w .c4b-prog-wrap.vis{display:flex} .c4b-w .c4b-prog-track{flex:1;height:6px;background:#e5e9ec;border-radius:6px;overflow:hidden} .c4b-w .c4b-prog-fill{height:100%;background:var(--c4b-p);border-radius:6px;transition:width .3s ease;width:0%} .c4b-w .c4b-prog-pct{font-size:14px;font-weight:700;color:var(--c4b-p);min-width:38px;text-align:right} .c4b-w .c4b-body{flex:0 1 auto;min-height:0;overflow-y:auto;padding:20px 24px 24px;-webkit-overflow-scrolling:touch} .c4b-w .c4b-step{width:100%}.c4b-w .c4b-step.hidden{display:none!important} .c4b-w .c4b-q{font-size:20px;font-weight:700;color:#1a2a3a;line-height:1.3;margin-bottom:18px} .c4b-w .c4b-opt-group{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px} .c4b-w .c4b-opt{background:#fff;border:2px solid #e0e6ea;border-radius:var(--c4b-r-opt,2px);padding:16px 8px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;transition:.2s;position:relative;user-select:none} .c4b-w .c4b-opt:hover{border-color:var(--c4b-p);background:var(--c4b-bg2)} /* Selected reads as a solid block of the service colour rather than a tinted box inside a coloured border — one shape, not two nested outlines. */ .c4b-w .c4b-opt.sel{border-color:var(--c4b-p);background:var(--c4b-p)} .c4b-w .c4b-opt-icon{font-size:26px}.c4b-w .c4b-opt-label{font-size:16px;font-weight:700;color:#1a2a3a;text-align:center} .c4b-w .c4b-opt.sel .c4b-opt-label{color:#fff} .c4b-w .c4b-opt.sel .c4b-opt-icon,.c4b-w .c4b-opt.sel .c4b-opt-icon i{color:#fff} .c4b-w .c4b-opt-dot{width:16px;height:16px;border-radius:50%;border:2px solid #ccd5db;position:absolute;top:7px;right:7px} .c4b-w .c4b-opt.sel .c4b-opt-dot{border-color:#fff;background:#fff;box-shadow:inset 0 0 0 3px var(--c4b-p)} .c4b-w .c4b-sup-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px} .c4b-w .c4b-sup-card{background:#fff;border:2px solid #e0e6ea;border-radius:var(--c4b-r-opt,2px);padding:14px 12px 11px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:9px;transition:.2s;position:relative;user-select:none;min-height:86px;justify-content:center} .c4b-w .c4b-sup-card:hover{border-color:var(--c4b-p);background:var(--c4b-bg2)}.c4b-w .c4b-sup-card.sel{border-color:var(--c4b-p);background:var(--c4b-bg)} .c4b-w .c4b-sup-card .c4b-opt-dot{position:absolute;top:8px;right:8px}.c4b-w .c4b-sup-card.sel .c4b-opt-dot{border-color:var(--c4b-p);background:var(--c4b-p);box-shadow:inset 0 0 0 3px #fff} .c4b-w .c4b-sup-logo{width:100%;height:40px;display:flex;align-items:center;justify-content:center;overflow:hidden} .c4b-w .c4b-sup-logo img{max-width:100%;max-height:38px;object-fit:contain} .c4b-w .c4b-sup-name{font-size:13px;font-weight:700;color:#1a2a3a;text-align:center} .c4b-w .c4b-sup-card input[type="radio"]{position:absolute;opacity:0;width:0;height:0} .c4b-w .c4b-sup-fw{grid-column:1/-1;flex-direction:row;justify-content:flex-start;gap:12px;min-height:54px;padding:12px 14px} .c4b-w .c4b-sup-fw .c4b-sup-logo{width:36px;height:36px;flex-shrink:0}.c4b-w .c4b-sup-fw .c4b-sup-name{text-align:left;font-size:14px} /* Sits inside the provider grid now, directly under the "Other" card, so it spans both columns and needs no top margin of its own — the grid gap already spaces it. */ .c4b-w .c4b-manual{grid-column:1/-1;display:none}.c4b-w .c4b-manual.vis{display:block} .c4b-w .c4b-manual input{width:100%;padding:12px 14px;border:1.5px solid #e0e6ea;border-radius:10px;font-size:15px} .c4b-w .c4b-rl{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .c4b-w .c4b-rl-opt{display:flex;align-items:center;gap:13px;background:#fff;border:1.5px solid #e0e6ea;border-radius:var(--c4b-r-opt,2px);padding:11px 14px;cursor:pointer;transition:.2s;font-size:15px;color:#1a2a3a} .c4b-w .c4b-rl-opt:hover{border-color:var(--c4b-p);background:var(--c4b-bg2)}.c4b-w .c4b-rl-opt.sel{border-color:#1a2a3a;background:#f9fcff} .c4b-w .c4b-rl-opt input{position:absolute;opacity:0;width:0;height:0} .c4b-w .c4b-rd-out{width:18px;height:18px;min-width:18px;border-radius:50%;border:2px solid #ccd5db;display:flex;align-items:center;justify-content:center} .c4b-w .c4b-rd-in{width:8px;height:8px;border-radius:50%;background:transparent} .c4b-w .c4b-rl-opt.sel .c4b-rd-out{border-color:#1a2a3a}.c4b-w .c4b-rl-opt.sel .c4b-rd-in{background:#1a2a3a} .c4b-w .c4b-fw{position:relative;margin-bottom:14px;text-align:left!important} .c4b-w .c4b-fw label{display:block;font-size:12px;font-weight:600;color:var(--c4b-p);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em;text-align:left!important} .c4b-w .c4b-fw input,.c4b-w .c4b-fw select,.c4b-w .c4b-fw textarea{width:100%;padding:12px 14px;border:1.5px solid #e0e6ea;border-radius:10px;font-size:15px;background:#fff;transition:.2s;font-family:inherit;text-align:left!important} .c4b-w .c4b-fw textarea{height:90px;resize:vertical} .c4b-w .c4b-fw input:focus,.c4b-w .c4b-fw select:focus,.c4b-w .c4b-fw textarea:focus{border-color:var(--c4b-p);outline:none;box-shadow:0 0 0 3px var(--c4b-sh)} .c4b-w .c4b-deal{display:flex;align-items:center;gap:10px;background:var(--c4b-bg);border:1.5px solid var(--c4b-border);border-radius:12px;padding:12px 16px;margin-bottom:14px;font-size:15px;font-weight:600;color:#1a2a3a} .c4b-w .c4b-deal i{font-size:18px;color:var(--c4b-p)} .c4b-w .c4b-err{color:#c0392b;background:#fdf0ef;border:1px solid #f5c6cb;border-radius:8px;padding:9px 12px;font-size:13px;margin-top:6px;display:none} .c4b-w .c4b-err.show{display:block} .c4b-w .c4b-step-a-image{width:100%;height:auto;display:block;border-radius:8px;margin-top:16px;object-fit:cover} .c4b-w .c4b-banner-text{width:100%;background:var(--c4b-bg);border:1.5px solid var(--c4b-border);border-radius:12px;padding:16px 18px;margin-top:16px;font-size:15px;font-weight:600;color:#1a2a3a;line-height:1.6;text-align:center;white-space:pre-line} /* Banner wrapper holds no spacing of its own, so when the banner is set to "None" (or left blank) it collapses to zero height and the popup shrinks to fit only the items that are actually shown. */ .c4b-w .c4b-banner-wrap{font-size:0;line-height:0} .c4b-w .c4b-banner-wrap.c4b-banner-empty{display:none} /* ── Accessibility ── Visually hidden but still announced by screen readers, and a visible focus ring so keyboard users can see where they are. The honeypot is hidden from everyone (including assistive tech) — only bots fill it. */ .c4b-w .c4b-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .c4b-w .c4b-hp-wrap{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} /* :focus-within fires on mouse clicks too, which drew a ring outside the border of a card that was already highlighted — the doubled outline on a selected option. The first rule keeps a ring for anything focused but not yet selected, and works everywhere; the second uses :focus-visible so a keyboard user still gets a ring on the selected card, where it is their only indication of where they are, while a mouse click does not. */ .c4b-w .c4b-opt:focus-within:not(.sel),.c4b-w .c4b-sup-card:focus-within:not(.sel),.c4b-w .c4b-rl-opt:focus-within:not(.sel),.c4b-w .c4b-chk-item:focus-within:not(.sel){outline:3px solid var(--c4b-p);outline-offset:2px} .c4b-w .c4b-opt:has(input:focus-visible),.c4b-w .c4b-sup-card:has(input:focus-visible),.c4b-w .c4b-rl-opt:has(input:focus-visible),.c4b-w .c4b-chk-item:has(input:focus-visible){outline:3px solid var(--c4b-p);outline-offset:2px} .c4b-w .c4b-btn:focus-visible,.c4b-w .c4b-btn-back:focus-visible,.c4b-w .c4b-close:focus-visible,.c4b-w .c4b-done-btn:focus-visible{outline:3px solid #1a2a3a;outline-offset:2px} .c4b-w .c4b-opt{cursor:pointer} @media(prefers-reduced-motion:reduce){.c4b-w *,.c4b-w *::before,.c4b-w *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}} .c4b-w .c4b-gdpr{display:flex;align-items:flex-start;gap:10px;background:#f8f9fa;border:1.5px solid #e0e6ea;border-radius:12px;padding:12px 14px;margin-top:16px;font-size:12px;color:#5a6a7a;line-height:1.5} .c4b-w .c4b-loader{text-align:center;padding:22px 10px} .c4b-w .c4b-pbar{background:#e5e9ec;border-radius:30px;height:22px;overflow:hidden;margin:14px 0;position:relative} .c4b-w .c4b-pbar-fill{height:100%;background:var(--c4b-p);width:0%;transition:width .1s;border-radius:30px} .c4b-w .c4b-pbar-txt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:700;color:#1a2a3a} /* Indeterminate fill for the Processing step. No real percentage exists while the submission is in flight, so a band sweeps the track instead of a bar sitting frozen at 60%. */ .c4b-w .c4b-pbar-indet{position:relative;overflow:hidden} .c4b-w .c4b-pbar-indet .c4b-pbar-fill{position:absolute;top:0;left:0;width:40%;background:var(--c4b-p);background-image:linear-gradient(90deg,var(--c4b-p),var(--c4b-pd),var(--c4b-p));animation:c4bIndet 1.4s ease-in-out infinite} @keyframes c4bIndet{0%{left:-42%;width:40%}50%{width:58%}100%{left:100%;width:40%}} .c4b-w .c4b-loader h3{position:relative;display:inline-block} .c4b-w .c4b-dots::after{content:"";animation:c4bDots 1.4s steps(4,end) infinite} @keyframes c4bDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}} /* A bar that never stops moving is worse than none for anyone sensitive to motion, so it settles into a plain three-quarter fill instead. */ @media(prefers-reduced-motion:reduce){.c4b-w .c4b-pbar-indet .c4b-pbar-fill{position:relative;animation:none;width:75%}.c4b-w .c4b-dots::after{animation:none;content:"..."}} .c4b-w .c4b-summary-title{font-size:22px;font-weight:700;color:var(--c4b-p);margin-bottom:16px;display:flex;align-items:center;gap:10px} .c4b-w .c4b-summary{background:#f8f9fb;border:1px solid #eef1f4;border-radius:16px;padding:4px 18px;margin-bottom:16px} .c4b-w .c4b-cs{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid #e7ecf0;text-align:left!important} .c4b-w .c4b-cs:last-child{border-bottom:none} .c4b-w .c4b-cs-icon{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:var(--c4b-bg);color:var(--c4b-p);display:flex;align-items:center;justify-content:center;font-size:14px} .c4b-w .c4b-cs-body{flex:1 1 auto;min-width:0} /* clamp() scales the label between phone and desktop without a breakpoint; the plain font-size before it is the fallback for clients without clamp. */ .c4b-w .c4b-cs h6{font-size:13px;font-size:clamp(12px,1.1vw + 9px,15px);font-weight:700;color:var(--c4b-p);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;display:flex;gap:5px;text-align:left!important} .c4b-w .c4b-cs span,.c4b-w .c4b-cs-body div.c4b-cs-val{font-size:15px;font-weight:600;color:#1a2a3a;text-align:left!important;line-height:1.5;word-break:break-word;overflow-wrap:anywhere} .c4b-w .c4b-cs-sub{font-size:13px;font-weight:400;color:#5a6a7a;margin-top:2px;line-height:1.5;word-break:break-word;overflow-wrap:anywhere} @media(max-width:480px){.c4b-w .c4b-summary{padding:2px 14px}.c4b-w .c4b-cs{gap:10px;padding:12px 0}.c4b-w .c4b-cs-icon{width:30px;height:30px;font-size:12px}.c4b-w .c4b-cs span,.c4b-w .c4b-cs-body div.c4b-cs-val{font-size:15px}.c4b-w .c4b-cs h6{font-size:12px}} .c4b-w .c4b-upload{border:2px dashed #e0e6ea;border-radius:12px;padding:18px;text-align:center;cursor:pointer;background:#fafafa;margin-bottom:14px} .c4b-w .c4b-agree-box{background:var(--c4b-bg);border-radius:14px;padding:18px;font-size:15px;line-height:1.6} .c4b-w .c4b-spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:c4bSpin .6s linear infinite;vertical-align:middle} @keyframes c4bSpin{to{transform:rotate(360deg)}} .c4b-w .c4b-success-box{max-width:460px;margin:0 auto;padding:40px 24px 32px;text-align:center;background:linear-gradient(145deg,#fff,#fafcff);border-radius:28px;box-shadow:0 16px 40px -12px var(--c4b-sh)} .c4b-w .c4b-checkmark{width:88px;height:88px;margin:0 auto 24px;display:block} .c4b-w .c4b-ck-circle{stroke:var(--c4b-p);stroke-width:2;stroke-dasharray:166;stroke-dashoffset:166;animation:c4bCircle .8s cubic-bezier(.65,0,.45,1) forwards} .c4b-w .c4b-ck-check{stroke:var(--c4b-p);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:c4bCheck .5s cubic-bezier(.65,0,.45,1) .4s forwards} @keyframes c4bCircle{to{stroke-dashoffset:0}}@keyframes c4bCheck{to{stroke-dashoffset:0}} .c4b-w .c4b-success-title{font-size:36px;font-weight:700;color:#1a2e3b;margin:0 0 14px;animation:c4bFadeUp .5s ease forwards .2s;opacity:0} .c4b-w .c4b-success-msg{font-size:16px;line-height:1.7;color:#4a6572;background:var(--c4b-bg);padding:18px 22px;border-radius:18px;border:1px solid var(--c4b-border);animation:c4bFadeUp .5s ease forwards .3s;opacity:0} .c4b-w .c4b-success-footer{margin-top:28px;animation:c4bFadeUp .5s ease forwards .5s;opacity:0} .c4b-w .c4b-done-btn{background:var(--c4b-btn,var(--c4b-p));color:var(--c4b-btn-fg,#fff);border:none;padding:14px 36px;border-radius:var(--c4b-r-btn,2px);font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 8px 20px -8px var(--c4b-sh-lg);transition:.2s} .c4b-w .c4b-done-btn:hover{background:var(--c4b-btn-d,var(--c4b-pd));transform:translateY(-2px)} .c4b-w .c4b-auto-close{font-size:13px;color:#8a9aaa;margin-top:12px} @keyframes c4bFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @media(max-width:560px){.c4b-w .c4b-overlay{padding:max(16px,var(--c4b-nav-gap,16px)) 12px 16px;align-items:center;justify-content:center;background:rgba(20,35,45,.6)}.c4b-w .c4b-popup{max-width:100%;width:100%;border-radius:16px;max-height:calc(100vh - max(16px,var(--c4b-nav-gap,16px)) - 16px);transform:translateY(16px);margin:auto}.c4b-w .c4b-overlay.active .c4b-popup{transform:translateY(0)}.c4b-w .c4b-ph{padding:10px 14px}.c4b-w .c4b-body{padding:16px 16px 28px}.c4b-w .c4b-q{font-size:18px;margin-bottom:14px}.c4b-w .c4b-opt-group{grid-template-columns:repeat(3,1fr);gap:8px}.c4b-w .c4b-opt{padding:12px 6px 10px}.c4b-w .c4b-opt-icon{font-size:22px}.c4b-w .c4b-opt-label{font-size:14px}.c4b-w .c4b-sup-grid{gap:8px}.c4b-w .c4b-sup-card{min-height:78px;padding:12px 8px 10px}.c4b-w .c4b-sup-logo{height:34px}.c4b-w .c4b-sup-logo img{max-height:32px}.c4b-w .c4b-sup-name{font-size:12px}.c4b-w .c4b-row{flex-wrap:nowrap;gap:8px}.c4b-w .c4b-btn{padding:10px 14px;font-size:14px;min-height:40px}.c4b-w .c4b-btn-back{padding:9px 12px;font-size:13px;min-height:40px}.c4b-w .c4b-fw input,.c4b-w .c4b-fw select,.c4b-w .c4b-fw textarea{font-size:16px}.c4b-w .c4b-rl-opt{padding:10px 12px;font-size:14px}.c4b-w .c4b-success-title{font-size:28px}.c4b-w .c4b-success-box{padding:28px 16px 22px}}@media(max-width:380px){.c4b-w .c4b-overlay{padding:14px 10px}.c4b-w .c4b-popup{border-radius:14px}.c4b-w .c4b-body{padding:14px 14px 20px}.c4b-w .c4b-opt-group{grid-template-columns:1fr}.c4b-w .c4b-opt{flex-direction:row;padding:12px 14px;gap:12px}.c4b-w .c4b-sup-grid{grid-template-columns:1fr}.c4b-w .c4b-sup-card{min-height:54px;flex-direction:row;justify-content:flex-start;padding:10px 14px;gap:12px}.c4b-w .c4b-sup-logo{width:40px;height:32px;flex-shrink:0}.c4b-w .c4b-sup-name{text-align:left;font-size:13px}.c4b-w .c4b-sup-card .c4b-opt-dot{top:50%;transform:translateY(-50%)}.c4b-w .c4b-sup-fw{flex-wrap:wrap}} /* ── "Input & Button" initial-card style — usable by ANY of the 4 services (generic or Digital Voice) when the admin sets Initial Card Style to "Postcode input + Button" ── */ .c4b-w .c4b-init-inline{width:100%;background:transparent;box-shadow:none;padding:0;display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;align-items:stretch} .c4b-w .c4b-pc-wrap{flex:1;position:relative;min-width:120px} .c4b-w .c4b-pc-wrap input{width:100%;height:100%;min-height:50px;padding:12px 16px 12px 42px;border:2px solid var(--c4b-p);border-radius:8px;font-size:15px;background:#fff;color:#1a2a3a;font-family:inherit;box-sizing:border-box} .c4b-w .c4b-pc-wrap input::placeholder{color:#8a9aaa} .c4b-w .c4b-pc-wrap input:focus{outline:none;border-color:var(--c4b-pd);box-shadow:0 0 0 3px var(--c4b-sh)} .c4b-w .c4b-pc-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--c4b-p);font-size:16px;pointer-events:none} .c4b-w .c4b-init-inline .c4b-btn{width:auto;flex:0 0 auto;white-space:nowrap;min-height:50px;padding:0 22px} @media(max-width:480px){.c4b-w .c4b-init-inline{gap:6px}.c4b-w .c4b-pc-wrap{min-width:90px}.c4b-w .c4b-pc-wrap input{padding:10px 10px 10px 36px;font-size:14px;min-height:46px}.c4b-w .c4b-pc-icon{left:12px;font-size:14px}.c4b-w .c4b-init-inline .c4b-btn{padding:0 14px;font-size:14px;min-height:46px}} .c4b-w.c4b-dv .c4b-opt-icon{font-size:24px;color:var(--c4b-p)}.c4b-w.c4b-dv .c4b-opt-label{font-size:13px} .c4b-w.c4b-dv .c4b-fw input[readonly]{background:#f5f6f8;color:#5a6a7a} .c4b-w .c4b-chk-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .c4b-w .c4b-chk-item{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1.5px solid #e0e6ea;border-radius:var(--c4b-r-opt,2px);padding:11px 14px;cursor:pointer;transition:.2s;font-size:14px;color:#1a2a3a;position:relative} .c4b-w .c4b-chk-item:hover{border-color:var(--c4b-p);background:var(--c4b-bg2)} .c4b-w .c4b-chk-item.sel{border-color:var(--c4b-p);background:var(--c4b-bg)} .c4b-w .c4b-chk-item input{position:absolute;opacity:0;width:0;height:0} .c4b-w .c4b-chk-box{width:18px;height:18px;min-width:18px;border-radius:5px;border:2px solid #ccd5db;display:flex;align-items:center;justify-content:center;transition:.2s;margin-top:1px} .c4b-w .c4b-chk-item.sel .c4b-chk-box{border-color:var(--c4b-p);background:var(--c4b-p)} .c4b-w .c4b-chk-box i{font-size:10px;color:#fff;opacity:0;transition:.15s} .c4b-w .c4b-chk-item.sel .c4b-chk-box i{opacity:1} .c4b-w .c4b-hint{font-size:12px;color:#8a9aaa;margin:-8px 0 14px} @media(max-width:560px){.c4b-w .c4b-chk-item{padding:9px 12px;font-size:13px}} /* ── Button colours, hardened against the theme ── Themes routinely restyle every