/** * Consult Booking — front-end styles. * Everything is scoped under .cnsb-app and driven by CSS custom properties. */ /* Fonts (loaded locally, swap). */ @font-face{font-family:'Lora';font-style:normal;font-weight:400 600;font-display:swap;src:local('Lora');} @font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 700;font-display:swap;src:local('Nunito Sans');} .cnsb-app{ --cnsb-navy:#12284B;--cnsb-navy-deep:#0B1E38;--cnsb-accent:#F2A64C;--cnsb-accent-hov:#E2933A; --cnsb-accent-text:#12284B;--cnsb-step-active:#D6E5F2;--cnsb-success:#148A4E;--cnsb-link:#1B5FA8; --cnsb-page-bg:#E8E8E8;--cnsb-card-bg:#FFFFFF;--cnsb-info-bg:#E8F1FA;--cnsb-overlay:rgba(0,0,0,.45); --cnsb-border:#D5D9DF;--cnsb-border-str:#12284B;--cnsb-text:#3F4A57;--cnsb-text-muted:#6B7280;--cnsb-error:#C0392B; --cnsb-font-head:'Lora',Georgia,'Times New Roman',serif; --cnsb-font-body:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --cnsb-radius-card:8px;--cnsb-radius-ctrl:6px;--cnsb-radius-pill:999px; --cnsb-shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06); --cnsb-gap:24px;--cnsb-maxw:1180px; font-family:var(--cnsb-font-body);color:var(--cnsb-text);font-size:16px;line-height:1.5; background:var(--cnsb-page-bg);box-sizing:border-box; } .cnsb-app *,.cnsb-app *::before,.cnsb-app *::after{box-sizing:border-box;} .cnsb-app button{font-family:inherit;} .cnsb-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;} .cnsb-hidden{display:none!important;} /* ---- Shell ---- */ .cnsb-shell{display:flex;gap:var(--cnsb-gap);max-width:var(--cnsb-maxw);margin:0 auto;padding:40px 20px;align-items:flex-start;} .cnsb-stepper{width:280px;flex:0 0 280px;background:var(--cnsb-card-bg);border-radius:var(--cnsb-radius-card);box-shadow:var(--cnsb-shadow);align-self:flex-start;position:sticky;top:24px;padding:8px;} .cnsb-content{flex:1;min-width:0;background:var(--cnsb-card-bg);border-radius:var(--cnsb-radius-card);box-shadow:var(--cnsb-shadow);padding:40px;} /* ---- Stepper ---- */ .cnsb-stepper-list{list-style:none;margin:0;padding:0;} .cnsb-step-row{border-radius:6px;border-left:4px solid transparent;} .cnsb-step-btn{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:14px 16px;cursor:default;text-align:left;color:var(--cnsb-text-muted);border-radius:6px;} .cnsb-step-badge{position:relative;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#9CA3AF;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;} .cnsb-step-check{display:none;} .cnsb-step-label{font-size:16px;font-weight:600;} .cnsb-step-row[data-state="active"]{background:var(--cnsb-step-active);border-left-color:var(--cnsb-navy);} .cnsb-step-row[data-state="active"] .cnsb-step-badge{background:var(--cnsb-navy);} .cnsb-step-row[data-state="active"] .cnsb-step-label{color:var(--cnsb-navy);} .cnsb-step-row[data-state="complete"] .cnsb-step-badge{background:var(--cnsb-success);} .cnsb-step-row[data-state="complete"] .cnsb-step-num{display:none;} .cnsb-step-row[data-state="complete"] .cnsb-step-check{display:block;} .cnsb-step-row[data-state="complete"] .cnsb-step-label{color:var(--cnsb-navy);} .cnsb-step-row[data-state="complete"] .cnsb-step-btn{cursor:pointer;} /* ---- Headings ---- */ .cnsb-h1{font-family:var(--cnsb-font-head);font-size:34px;font-weight:500;color:var(--cnsb-navy);letter-spacing:-.01em;margin:0 0 28px;line-height:1.2;} .cnsb-subhead{font-size:15px;color:var(--cnsb-text);margin:-16px 0 24px;} .cnsb-section-head{font-size:20px;font-weight:700;color:var(--cnsb-navy);margin:24px 0 16px;} /* ---- Step 1 ---- */ .cnsb-question{display:grid;grid-template-columns:45% 50%;gap:0 5%;margin-bottom:56px;} .cnsb-question-label{font-size:18px;font-weight:700;color:var(--cnsb-navy);line-height:1.3;} .cnsb-req{color:var(--cnsb-navy);} .cnsb-helper{font-size:15px;font-weight:400;color:var(--cnsb-text);margin:8px 0 0;} .cnsb-options{display:flex;flex-direction:column;gap:14px;} .cnsb-option{height:46px;width:100%;border:1px solid var(--cnsb-border);border-radius:var(--cnsb-radius-ctrl);background:#fff;color:var(--cnsb-text);font-size:16px;cursor:pointer;transition:background .12s,border-color .12s;padding:0 12px;} .cnsb-option:hover{border-color:var(--cnsb-navy);background:#F7F9FC;} .cnsb-option[aria-checked="true"]{border:2px solid var(--cnsb-navy);background:var(--cnsb-step-active);color:var(--cnsb-navy);font-weight:600;padding:0 11px;} .cnsb-field-error{color:var(--cnsb-error);font-size:13px;margin:8px 0 0;} .cnsb-question.cnsb-invalid .cnsb-question-label{color:var(--cnsb-error);} /* ---- Step 2 fields (notched) ---- */ .cnsb-field-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:22px 18px;margin-bottom:8px;} .cnsb-grid-full{grid-column:span 10;} .cnsb-grid-half{grid-column:span 5;} .cnsb-grid-city{grid-column:span 4;} .cnsb-grid-state{grid-column:span 3;} .cnsb-grid-zip{grid-column:span 3;} .cnsb-input-wrap{position:relative;} .cnsb-input{width:100%;height:56px;border:1px solid var(--cnsb-border);border-radius:var(--cnsb-radius-ctrl);padding:20px 14px 6px;font-size:16px;color:var(--cnsb-text);background:var(--cnsb-card-bg);line-height:1.2;} .cnsb-input:focus{outline:none;border:2px solid var(--cnsb-navy);padding:19px 13px 5px;} .cnsb-notch-label{position:absolute;top:-8px;left:12px;background:var(--cnsb-card-bg);padding:0 6px;font-size:12px;color:var(--cnsb-text-muted);pointer-events:none;} .cnsb-input:focus~.cnsb-notch-label{color:var(--cnsb-navy);} .cnsb-field.cnsb-invalid .cnsb-input{border-color:var(--cnsb-error);} .cnsb-field.cnsb-invalid .cnsb-notch-label{color:var(--cnsb-error);} .cnsb-select-wrap .cnsb-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;} /* ---- Footer ---- */ .cnsb-footer{position:sticky;bottom:0;z-index:20;background:#fff;border-top:1px solid var(--cnsb-border);box-shadow:0 -1px 4px rgba(0,0,0,.06);} .cnsb-footer-inner{max-width:var(--cnsb-maxw);margin:0 auto;padding:16px 20px;} .cnsb-consent{text-align:center;font-size:12px;color:var(--cnsb-text-muted);margin-bottom:10px;} .cnsb-consent a{color:var(--cnsb-link);} .cnsb-footer-actions{display:flex;align-items:center;justify-content:center;gap:20px;} /* ---- Buttons ---- */ .cnsb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:16px;border:0;background:none;border-radius:var(--cnsb-radius-ctrl);} .cnsb-btn:focus-visible{outline:3px solid var(--cnsb-navy);outline-offset:2px;} .cnsb-btn-ghost{color:var(--cnsb-navy);font-weight:600;padding:12px 16px;} .cnsb-btn-primary{background:var(--cnsb-accent);color:var(--cnsb-accent-text);font-weight:600;border-radius:var(--cnsb-radius-pill);padding:14px 34px;min-width:170px;position:relative;} .cnsb-btn-primary:hover:not([disabled]){background:var(--cnsb-accent-hov);} .cnsb-btn[disabled],.cnsb-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;} .cnsb-btn-outline{border:1px solid var(--cnsb-navy);color:var(--cnsb-navy);font-weight:600;border-radius:var(--cnsb-radius-pill);padding:8px 18px;font-size:14px;background:#fff;} .cnsb-btn-outline:hover{background:#F7F9FC;} .cnsb-btn-text{color:var(--cnsb-text-muted);font-weight:600;padding:8px 12px;} .cnsb-btn-text-strong{color:var(--cnsb-navy);} .cnsb-btn-spinner{display:none;position:absolute;inset:0;align-items:center;justify-content:center;} .cnsb-btn.cnsb-loading .cnsb-btn-label,.cnsb-btn.cnsb-loading .cnsb-btn-chevron{visibility:hidden;} .cnsb-btn.cnsb-loading .cnsb-btn-spinner{display:flex;} .cnsb-btn-spinner .cnsb-icon{animation:cnsb-spin .8s linear infinite;} @keyframes cnsb-spin{to{transform:rotate(360deg);}} /* ---- Step 3 ---- */ .cnsb-center-card{display:flex;justify-content:space-between;gap:16px;border:1px solid var(--cnsb-border);border-radius:6px;padding:16px;margin-bottom:20px;} .cnsb-center-name{font-size:15px;font-weight:700;color:var(--cnsb-navy);margin-bottom:6px;} .cnsb-center-address,.cnsb-center-phone{display:block;color:var(--cnsb-navy);text-decoration:underline;font-size:13px;margin-bottom:2px;} .cnsb-center-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;} .cnsb-center-distance{font-size:13px;color:var(--cnsb-text-muted);} .cnsb-controls-row{display:flex;gap:14px;align-items:center;margin-bottom:8px;} .cnsb-calendar-field{width:240px;} .cnsb-calendar-field .cnsb-input{height:52px;cursor:pointer;} .cnsb-calendar-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--cnsb-navy);cursor:pointer;padding:4px;} .cnsb-native-date{position:absolute;right:8px;top:0;width:36px;height:100%;opacity:0;cursor:pointer;} .cnsb-filter-btn{position:relative;} .cnsb-filter-dot{position:absolute;top:4px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--cnsb-accent);} /* Availability */ .cnsb-avail-day{margin-top:18px;} .cnsb-avail-date{font-size:13px;font-weight:700;color:var(--cnsb-navy);margin-bottom:8px;} .cnsb-chip-row-wrap{position:relative;display:flex;align-items:center;} .cnsb-chip-row{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;} .cnsb-chip-row::-webkit-scrollbar{display:none;} .cnsb-chip{flex:0 0 auto;height:34px;border:1px solid var(--cnsb-border);border-radius:4px;background:#fff;color:var(--cnsb-text);font-size:13px;padding:0 12px;cursor:pointer;} .cnsb-chip:hover{border-color:var(--cnsb-navy);} .cnsb-chip[aria-pressed="true"]{background:var(--cnsb-navy);color:#fff;border-color:var(--cnsb-navy);} .cnsb-chip-nav{flex:0 0 auto;width:26px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--cnsb-border);border-radius:4px;background:#fff;color:var(--cnsb-navy);cursor:pointer;margin-left:6px;} .cnsb-chip-prev{margin-left:0;margin-right:6px;} .cnsb-avail-actions{text-align:center;margin:24px 0;} .cnsb-avail-exhausted,.cnsb-avail-empty{text-align:center;color:var(--cnsb-text-muted);font-size:14px;} .cnsb-avail-empty a{color:var(--cnsb-link);cursor:pointer;} /* Callout */ .cnsb-callout{background:var(--cnsb-info-bg);border-radius:6px;padding:24px;text-align:center;margin-top:12px;} .cnsb-callout-head{font-family:var(--cnsb-font-head);font-size:20px;color:var(--cnsb-navy);margin:0 0 8px;font-weight:500;} .cnsb-callout-line{font-size:14px;margin:0 0 14px;} .cnsb-callout-line a{color:var(--cnsb-link);} /* ---- Success ---- */ .cnsb-info-cards{display:flex;gap:20px;margin:24px 0;} .cnsb-info-card{flex:1;display:flex;gap:12px;border:1px solid var(--cnsb-border);border-radius:6px;padding:20px;} .cnsb-info-icon{color:var(--cnsb-navy);flex:0 0 auto;} .cnsb-info-date{font-weight:600;color:var(--cnsb-text);} .cnsb-info-link{display:inline-block;margin-top:12px;color:var(--cnsb-navy);text-decoration:none;font-size:14px;} .cnsb-info-phone{color:var(--cnsb-link);text-decoration:none;display:inline-block;margin-top:4px;} .cnsb-promos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;} .cnsb-promo-card{border:1px solid var(--cnsb-border);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;} .cnsb-promo-img{aspect-ratio:16/10;overflow:hidden;background:#eef1f5;} .cnsb-promo-img img{width:100%;height:100%;object-fit:cover;display:block;} .cnsb-promo-title{font-family:var(--cnsb-font-head);font-size:22px;color:var(--cnsb-navy);margin:16px;font-weight:500;flex:1;} .cnsb-promo-link{margin:0 16px 16px;color:var(--cnsb-navy);text-decoration:none;font-size:14px;} /* ---- Drawers ---- */ .cnsb-drawer-backdrop{position:fixed;inset:0;background:var(--cnsb-overlay);z-index:9998;} .cnsb-drawer{position:fixed;right:0;top:0;height:100vh;width:420px;max-width:100%;background:#fff;box-shadow:-4px 0 16px rgba(0,0,0,.12);z-index:9999;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 240ms cubic-bezier(.4,0,.2,1);} .cnsb-drawer:not(.cnsb-hidden){transform:translateX(0);} .cnsb-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--cnsb-border);} .cnsb-drawer-title{font-size:18px;color:var(--cnsb-navy);margin:0;font-weight:700;} .cnsb-drawer-close{background:none;border:0;cursor:pointer;color:var(--cnsb-navy);padding:4px;} .cnsb-drawer-body{flex:1;overflow-y:auto;padding:20px;} .cnsb-drawer-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 20px;border-top:1px solid var(--cnsb-border);} .cnsb-filter-group{border:0;margin:0 0 24px;padding:0;} .cnsb-filter-legend{font-size:14px;font-weight:700;color:var(--cnsb-navy);margin-bottom:12px;padding:0;} .cnsb-day-toggles{display:flex;gap:8px;} .cnsb-day-toggle{width:32px;height:32px;border:1px solid var(--cnsb-border);border-radius:4px;background:#fff;color:var(--cnsb-navy);font-size:13px;font-weight:600;cursor:pointer;} .cnsb-day-toggle[aria-checked="true"]{background:var(--cnsb-navy);color:#fff;border-color:var(--cnsb-navy);} .cnsb-radio-row{display:flex;gap:20px;} .cnsb-radio{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;} /* Find a Center */ .cnsb-centers-intro{font-size:14px;color:var(--cnsb-text);margin:0 0 14px;} .cnsb-zip-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;} .cnsb-zip-field{flex:1;} .cnsb-search-btn{padding:12px 24px;min-width:auto;height:56px;} .cnsb-geo-btn{display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--cnsb-navy);cursor:pointer;font-size:14px;padding:4px 0;margin-bottom:16px;} .cnsb-centers-message{font-size:14px;color:var(--cnsb-text-muted);} .cnsb-center-result{border:1px solid var(--cnsb-border);border-radius:6px;padding:16px;margin-bottom:14px;} .cnsb-center-result-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;} .cnsb-center-result-name{font-size:14px;font-weight:700;color:var(--cnsb-navy);} .cnsb-center-result-distance{font-size:13px;color:var(--cnsb-text-muted);white-space:nowrap;} .cnsb-center-result-address,.cnsb-center-result-phone{display:block;color:var(--cnsb-navy);text-decoration:underline;font-size:13px;margin-bottom:4px;} .cnsb-center-result .cnsb-btn{margin-top:8px;} /* ---- Responsive ---- */ @media(max-width:1023px){ .cnsb-shell{flex-direction:column;} .cnsb-stepper{width:100%;flex:none;position:static;} .cnsb-stepper-list{display:flex;} .cnsb-step-row{flex:1;border-left:0;border-bottom:4px solid transparent;} .cnsb-step-row[data-state="active"]{border-left:0;border-bottom-color:var(--cnsb-navy);} .cnsb-step-btn{flex-direction:column;text-align:center;gap:8px;} } @media(max-width:767px){ .cnsb-content{padding:24px;} .cnsb-h1{font-size:24px;} .cnsb-question{grid-template-columns:1fr;gap:16px;margin-bottom:36px;} .cnsb-field-grid{grid-template-columns:repeat(2,1fr);} .cnsb-grid-full,.cnsb-grid-city,.cnsb-grid-state,.cnsb-grid-zip{grid-column:span 2;} .cnsb-grid-half{grid-column:span 1;} .cnsb-info-cards,.cnsb-promos{flex-direction:column;grid-template-columns:1fr;} .cnsb-drawer{width:100%;} .cnsb-stepper-list{flex-direction:column;} .cnsb-step-row{flex:none;} .cnsb-step-btn{flex-direction:row;text-align:left;} .cnsb-controls-row{flex-wrap:wrap;} .cnsb-calendar-field{width:100%;} } @media(prefers-reduced-motion:reduce){ .cnsb-drawer{transition:none;} .cnsb-chip-row{scroll-behavior:auto;} .cnsb-btn-spinner .cnsb-icon{animation:none;} } /* ============================================================ * Theme-isolation layer. * * On live sites the host theme / page builder wraps this widget * in containers such as `.entry-content`, giving the theme's * bare `button`, `a`, `input` and `ol/li` rules a specificity of * (0,1,1) that beats this plugin's single-class rules (0,1,0). * The site's own brand colours then leak into the form (e.g. * pink option buttons and step labels). Re-assert the plugin's * values scoped under `.cnsb-app` (specificity 0,2,0) so the * widget renders identically under any theme. * * Values mirror the definitions above — keep them in sync. * ========================================================== */ /* Lists — stop theme `ol/li` markers & padding leaking in. */ .cnsb-app .cnsb-stepper-list{list-style:none;margin:0;padding:0;} .cnsb-app .cnsb-step-row{list-style:none;} /* Options (step 1). */ .cnsb-app .cnsb-option{border:1px solid var(--cnsb-border);background:#fff;color:var(--cnsb-text);text-decoration:none;text-transform:none;box-shadow:none;} .cnsb-app .cnsb-option:hover{border-color:var(--cnsb-navy);background:#F7F9FC;} .cnsb-app .cnsb-option[aria-checked="true"]{border:2px solid var(--cnsb-navy);background:var(--cnsb-step-active);color:var(--cnsb-navy);} /* Stepper. */ .cnsb-app .cnsb-step-btn{background:none;border:0;color:var(--cnsb-text-muted);box-shadow:none;text-transform:none;} .cnsb-app .cnsb-step-label{color:var(--cnsb-text-muted);} .cnsb-app .cnsb-step-row[data-state="active"] .cnsb-step-label, .cnsb-app .cnsb-step-row[data-state="complete"] .cnsb-step-label{color:var(--cnsb-navy);} /* Primary / secondary buttons (base first, then variants). */ .cnsb-app .cnsb-btn{background:none;border:0;color:inherit;text-decoration:none;text-transform:none;box-shadow:none;} .cnsb-app .cnsb-btn-ghost,.cnsb-app .cnsb-btn-text-strong{color:var(--cnsb-navy);} .cnsb-app .cnsb-btn-primary{background:var(--cnsb-accent);color:var(--cnsb-accent-text);} .cnsb-app .cnsb-btn-primary:hover:not([disabled]){background:var(--cnsb-accent-hov);} .cnsb-app .cnsb-btn-outline{border:1px solid var(--cnsb-navy);color:var(--cnsb-navy);background:#fff;} .cnsb-app .cnsb-btn-text{color:var(--cnsb-text-muted);} /* Chips, toggles and icon buttons. */ .cnsb-app .cnsb-chip{border:1px solid var(--cnsb-border);background:#fff;color:var(--cnsb-text);} .cnsb-app .cnsb-chip:hover{border-color:var(--cnsb-navy);} .cnsb-app .cnsb-chip[aria-pressed="true"]{background:var(--cnsb-navy);color:#fff;border-color:var(--cnsb-navy);} .cnsb-app .cnsb-chip-nav{border:1px solid var(--cnsb-border);background:#fff;color:var(--cnsb-navy);} .cnsb-app .cnsb-day-toggle{border:1px solid var(--cnsb-border);background:#fff;color:var(--cnsb-navy);} .cnsb-app .cnsb-day-toggle[aria-checked="true"]{background:var(--cnsb-navy);color:#fff;border-color:var(--cnsb-navy);} .cnsb-app .cnsb-calendar-btn,.cnsb-app .cnsb-drawer-close,.cnsb-app .cnsb-geo-btn{background:none;border:0;color:var(--cnsb-navy);} /* Form fields. */ .cnsb-app .cnsb-input{border:1px solid var(--cnsb-border);background:var(--cnsb-card-bg);color:var(--cnsb-text);box-shadow:none;} .cnsb-app .cnsb-input:focus{border:2px solid var(--cnsb-navy);box-shadow:none;} /* Links inside the widget. */ .cnsb-app .cnsb-consent a,.cnsb-app .cnsb-callout-line a,.cnsb-app .cnsb-avail-empty a{color:var(--cnsb-link);} .cnsb-app .cnsb-center-address,.cnsb-app .cnsb-center-phone, .cnsb-app .cnsb-center-result-address,.cnsb-app .cnsb-center-result-phone{color:var(--cnsb-navy);text-decoration:underline;} .cnsb-app .cnsb-info-link,.cnsb-app .cnsb-promo-link{color:var(--cnsb-navy);text-decoration:none;} .cnsb-app .cnsb-info-phone{color:var(--cnsb-link);text-decoration:none;} /* Stepper backgrounds — the theme paints its brand colour onto the *
  • /