/* =========================================================
   CBSP DIGITAL CENTER
   Additive styles only. Existing site selectors are untouched.
   ========================================================= */

.cbsp-current-promo {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #003b7a 0%, #0068b5 58%, #0788c8 100%);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.cbsp-current-promo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 25%, rgba(255,255,255,.16) 0 2px, transparent 3px),
        radial-gradient(circle at 86% 72%, rgba(255,255,255,.12) 0 3px, transparent 4px);
    background-size: 80px 80px, 120px 120px;
}

.cbsp-current-promo-inner {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    min-height: 76px;
    padding: .75rem 0;
}

.cbsp-current-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .05em;
    white-space: nowrap;
}

.cbsp-current-promo-copy {
    min-width: 0;
}

.cbsp-current-promo-copy strong {
    display: block;
    font-size: clamp(.98rem, 1.5vw, 1.15rem);
    line-height: 1.3;
}

.cbsp-current-promo-copy small {
    display: block;
    margin-top: .2rem;
    color: rgba(255,255,255,.82);
    line-height: 1.35;
}

.cbsp-current-promo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: .6rem .9rem;
    border-radius: 9px;
    background: #fff;
    color: #00549b;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cbsp-current-promo-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
}

.cbsp-difference-section {
    padding: 4.5rem 0;
    background: linear-gradient(180deg, #f8fbfe 0%, #fff 100%);
    border-top: 1px solid #e5eef6;
    border-bottom: 1px solid #e5eef6;
}

.cbsp-section-kicker,
.cbsp-page-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .8rem;
    padding: .38rem .68rem;
    border-radius: 999px;
    background: #e8f3fb;
    color: #005aa8;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cbsp-difference-head {
    max-width: 780px;
    margin: 0 auto 2.25rem;
    text-align: center;
}

.cbsp-difference-head h2 {
    margin: 0 0 .75rem;
    color: var(--dark);
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    line-height: 1.2;
}

.cbsp-difference-head p {
    margin: 0;
    color: #5d6f7f;
    font-size: 1.02rem;
    line-height: 1.7;
}

.cbsp-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
}

.cbsp-tool-card {
    position: relative;
    display: flex;
    min-height: 245px;
    flex-direction: column;
    padding: 1.35rem;
    overflow: hidden;
    border: 1px solid #dbe8f2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 63, 110, .07);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cbsp-tool-card:hover {
    transform: translateY(-3px);
    border-color: #afd2ea;
    box-shadow: 0 16px 38px rgba(0, 63, 110, .12);
}

.cbsp-tool-icon {
    display: inline-grid;
    width: 46px;
    height: 46px;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: 13px;
    background: #edf7fd;
    font-size: 1.45rem;
}

.cbsp-tool-card h3 {
    margin: 0 0 .55rem;
    color: #17364e;
    font-size: 1.08rem;
}

.cbsp-tool-card p {
    margin: 0 0 1rem;
    color: #607383;
    line-height: 1.58;
}

.cbsp-tool-meta {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    margin-top: auto;
    margin-bottom: .9rem;
}

.cbsp-mini-tag {
    display: inline-flex;
    padding: .3rem .55rem;
    border-radius: 999px;
    background: #f2f7fa;
    color: #476274;
    font-size: .73rem;
    font-weight: 700;
}

.cbsp-tool-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #0067b1;
    font-weight: 800;
    text-decoration: none;
}

.cbsp-tool-link:hover { text-decoration: underline; }

.cbsp-trust-note {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    max-width: 850px;
    margin: 1.5rem auto 0;
    padding: 1rem 1.15rem;
    border: 1px solid #d6e9f5;
    border-radius: 14px;
    background: #f4faff;
    color: #456476;
    line-height: 1.55;
}

.cbsp-trust-note strong { color: #17415d; }

/* Digital Center pages */
.cbsp-page-hero {
    padding: 4rem 0 3.3rem;
    background:
        radial-gradient(circle at 90% 10%, rgba(30, 151, 214, .16), transparent 30%),
        linear-gradient(135deg, #f3f9fd 0%, #fff 62%);
    border-bottom: 1px solid #e2edf4;
}

.cbsp-page-hero .container { max-width: 1120px; }

.cbsp-page-hero h1 {
    max-width: 850px;
    margin: 0 0 1rem;
    color: #12324a;
    font-size: clamp(2rem, 4.7vw, 3.45rem);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.cbsp-page-hero p {
    max-width: 790px;
    margin: 0;
    color: #5a6f7e;
    font-size: 1.08rem;
    line-height: 1.7;
}

.cbsp-hero-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1.4rem;
}

.cbsp-btn-primary,
.cbsp-btn-secondary {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: .72rem 1rem;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.cbsp-btn-primary { background: #0067b1; color: #fff; }
.cbsp-btn-primary:hover { background: #005390; }
.cbsp-btn-secondary { background: #eef5f9; color: #17415d; border: 1px solid #d5e4ee; }
.cbsp-btn-secondary:hover { background: #e4f0f7; }

.cbsp-page-main {
    padding: 3rem 0 4.5rem;
    background: #fff;
}

.cbsp-page-main .container { max-width: 1120px; }

.cbsp-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.cbsp-feature-panel,
.cbsp-form-card,
.cbsp-result-card,
.cbsp-update-card,
.cbsp-glossary-card,
.cbsp-help-card {
    border: 1px solid #dbe7ef;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(18, 60, 90, .06);
}

.cbsp-feature-panel { padding: 1.35rem; }
.cbsp-feature-panel h2,
.cbsp-feature-panel h3 { color: #17364e; }
.cbsp-feature-panel p { color: #607383; line-height: 1.65; }

.cbsp-feature-list {
    display: grid;
    gap: .75rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.cbsp-feature-list li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    color: #455e70;
    line-height: 1.52;
}

.cbsp-feature-list li::before {
    content: "✓";
    display: inline-grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-items: center;
    border-radius: 50%;
    background: #eaf7f0;
    color: #168153;
    font-size: .77rem;
    font-weight: 900;
}

.cbsp-form-card { padding: 1.5rem; }

.cbsp-question {
    padding: 1.15rem 0;
    border-bottom: 1px solid #edf1f4;
}
.cbsp-question:first-child { padding-top: 0; }
.cbsp-question:last-child { border-bottom: 0; }
.cbsp-question legend,
.cbsp-field-label {
    margin-bottom: .7rem;
    color: #1b3d55;
    font-size: .98rem;
    font-weight: 800;
}

.cbsp-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.cbsp-choice {
    position: relative;
}

.cbsp-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cbsp-choice span {
    display: flex;
    min-height: 46px;
    align-items: center;
    padding: .68rem .8rem;
    border: 1px solid #d7e3eb;
    border-radius: 10px;
    background: #fbfdfe;
    color: #3f5c6f;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.cbsp-choice input:checked + span {
    border-color: #1680c2;
    background: #eef8fe;
    color: #0a5d93;
    box-shadow: inset 0 0 0 1px #1680c2;
    font-weight: 750;
}

.cbsp-choice input:focus-visible + span {
    outline: 3px solid rgba(0, 103, 177, .2);
    outline-offset: 2px;
}

.cbsp-select,
.cbsp-input {
    width: 100%;
    min-height: 46px;
    padding: .65rem .75rem;
    border: 1px solid #d5e1e9;
    border-radius: 10px;
    background: #fff;
    color: #28475c;
    font: inherit;
}

.cbsp-form-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.cbsp-result-card {
    display: none;
    margin-top: 1.25rem;
    padding: 1.45rem;
    border-color: #b8d9ec;
    background: linear-gradient(180deg, #f7fcff 0%, #fff 100%);
}
.cbsp-result-card.is-visible { display: block; }

.cbsp-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.cbsp-result-label {
    margin-bottom: .35rem;
    color: #658091;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cbsp-result-title {
    margin: 0;
    color: #0f466c;
    font-size: 1.5rem;
}

.cbsp-match-score {
    display: inline-flex;
    min-width: 68px;
    min-height: 68px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    background: #e9f6fd;
    color: #0067b1;
    font-weight: 900;
}
.cbsp-match-score small { font-size: .62rem; font-weight: 700; }

.cbsp-reasons {
    display: grid;
    gap: .55rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}
.cbsp-reasons li {
    padding-left: 1.35rem;
    position: relative;
    color: #486477;
    line-height: 1.5;
}
.cbsp-reasons li::before {
    content: "•";
    position: absolute;
    left: .35rem;
    color: #1480c1;
    font-weight: 900;
}

.cbsp-alternatives {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin-top: 1rem;
}
.cbsp-alt-card {
    display: block;
    padding: .85rem;
    border: 1px solid #e0e9ef;
    border-radius: 11px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cbsp-alt-card:hover,
.cbsp-alt-card:focus-visible {
    border-color: #98c7e3;
    box-shadow: 0 8px 20px rgba(18, 60, 90, .08);
    transform: translateY(-1px);
    outline: none;
}
.cbsp-alt-card strong { color: #23485f; }
.cbsp-alt-card p { margin: .35rem 0 0; color: #6a7f8d; font-size: .88rem; line-height: 1.45; }

.cbsp-privacy-line {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin-top: 1rem;
    color: #6a7f8d;
    font-size: .85rem;
    line-height: 1.45;
}

.cbsp-filter-row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 0 0 1.15rem;
}

.cbsp-filter-button {
    min-height: 38px;
    padding: .5rem .75rem;
    border: 1px solid #d6e2e9;
    border-radius: 999px;
    background: #fff;
    color: #466273;
    font: inherit;
    font-size: .88rem;
    font-weight: 750;
    cursor: pointer;
}
.cbsp-filter-button.is-active {
    border-color: #1880bd;
    background: #eef8fe;
    color: #075c91;
}

.cbsp-update-list { display: grid; gap: 1rem; }
.cbsp-update-card {
    padding: 1.3rem 1.45rem;
    text-align: start;
}
.cbsp-update-meta {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: .65rem;
    color: #718391;
    font-size: .78rem;
}
.cbsp-update-type {
    padding: .25rem .5rem;
    border-radius: 999px;
    background: #eef6fb;
    color: #276180;
    font-weight: 800;
}
.cbsp-update-card h2,
.cbsp-update-card h3 { margin: 0 0 .55rem; color: #17364e; text-align: start; }
.cbsp-update-card p { margin: 0 0 .5rem; color: #5d7382; line-height: 1.62; text-align: start; }
.cbsp-update-card ul {
    margin: .35rem 0 .55rem;
    padding-left: 1.25rem;
    color: #4e6879;
    line-height: 1.6;
    text-align: start;
}
.cbsp-update-card li { padding-left: .1rem; }
.cbsp-source-link { color: #0067b1; font-weight: 750; }

.cbsp-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .55rem;
    border-radius: 999px;
    background: #eaf7f0;
    color: #16764e;
    font-size: .76rem;
    font-weight: 800;
}
.cbsp-status-pill.is-expired {
    background: #f1f3f5;
    color: #65737d;
}
.cbsp-update-card.is-expired {
    background: #fbfcfd;
    border-color: #e1e6ea;
}
.cbsp-update-card.is-expired h2 { color: #536876; }

.cbsp-warning-box,
.cbsp-info-box {
    margin-top: 1rem;
    padding: .95rem 1rem;
    border-radius: 12px;
    line-height: 1.55;
}
.cbsp-warning-box { border: 1px solid #f0d6a6; background: #fff9ed; color: #73561f; }
.cbsp-info-box { border: 1px solid #d5e7f3; background: #f5fbff; color: #456476; }

.cbsp-checklist {
    display: grid;
    gap: .65rem;
    margin: 1rem 0 0;
}
.cbsp-check-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .7rem;
    padding: .75rem;
    border: 1px solid #e1e9ee;
    border-radius: 10px;
    background: #fff;
}
.cbsp-check-item input { margin-top: .2rem; accent-color: #0067b1; }
.cbsp-check-item strong { color: #2a4c62; }
.cbsp-check-item small { display: block; margin-top: .2rem; color: #758692; line-height: 1.4; }

.cbsp-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8eef2;
}
.cbsp-progress > span {
    display: block;
    width: 0;
    height: 100%;
    background: #1680bd;
    transition: width .2s ease;
}
.cbsp-progress-copy { margin-top: .45rem; color: #6e8290; font-size: .85rem; }

.cbsp-help-grid,
.cbsp-glossary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.cbsp-help-card,
.cbsp-glossary-card { padding: 1.2rem; }
.cbsp-help-card h3,
.cbsp-glossary-card h3 { margin: 0 0 .5rem; color: #17364e; }
.cbsp-help-card p,
.cbsp-glossary-card p { margin: 0 0 .85rem; color: #607383; line-height: 1.58; }

.cbsp-emergency-card {
    border-color: #efc8c8;
    background: #fff9f9;
}
.cbsp-emergency-card h3 { color: #9a3131; }

.cbsp-search-box { margin-bottom: 1rem; }
.cbsp-search-box input {
    width: 100%;
    min-height: 48px;
    padding: .7rem .85rem;
    border: 1px solid #d5e1e8;
    border-radius: 11px;
    font: inherit;
}

.cbsp-empty-state {
    display: none;
    padding: 1.1rem;
    border: 1px dashed #cddbe4;
    border-radius: 12px;
    color: #6b7d89;
    text-align: center;
}
.cbsp-empty-state.is-visible { display: block; }

.cbsp-breadcrumbs {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    color: #7a8c98;
    font-size: .85rem;
}
.cbsp-breadcrumbs a { color: #276b95; text-decoration: none; }

.cbsp-fact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin-top: 1.2rem;
}
.cbsp-fact {
    padding: 1rem;
    border: 1px solid #dfe9ef;
    border-radius: 12px;
    background: #fbfdfe;
}
.cbsp-fact strong { display: block; color: #164665; margin-bottom: .35rem; }
.cbsp-fact span { color: #687e8d; line-height: 1.45; }

.cbsp-noscript {
    margin: 1rem auto;
    padding: .9rem 1rem;
    max-width: 1120px;
    border: 1px solid #f0d6a6;
    border-radius: 10px;
    background: #fff9ed;
    color: #73561f;
}

@media (max-width: 900px) {
    .cbsp-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cbsp-current-promo-inner { grid-template-columns: 1fr auto; }
    .cbsp-fact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .cbsp-current-promo-inner { grid-template-columns: 1fr; gap: .65rem; padding: .8rem 0; }
    .cbsp-current-promo-link { width: 100%; }
    .cbsp-tools-grid,
    .cbsp-card-grid,
    .cbsp-help-grid,
    .cbsp-glossary-grid,
    .cbsp-choice-grid,
    .cbsp-alternatives { grid-template-columns: 1fr; }
    .cbsp-difference-section { padding: 3rem 0; }
    .cbsp-page-hero { padding: 3rem 0 2.5rem; }
    .cbsp-page-main { padding: 2.2rem 0 3.5rem; }
    .cbsp-result-head { flex-direction: column; }
}

/* Dedicated Sanitas Update detail pages */
.cbsp-detail-hero .cbsp-update-meta { margin-top: .8rem; }
.cbsp-detail-shell { max-width: 980px; }
.cbsp-detail-card {
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid #dce7ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(24, 68, 94, .06);
}
.cbsp-detail-card.is-expired { background: #fbfcfd; border-color: #e1e6ea; }
.cbsp-detail-body { display: grid; gap: 1rem; }
.cbsp-detail-body p { margin: 0; color: #4f6878; line-height: 1.75; text-align: start; }
.cbsp-detail-bullets { margin: 1.4rem 0 0; padding-inline-start: 1.25rem; padding-inline-end: 0; color: #405f72; line-height: 1.7; text-align: start; }
.cbsp-detail-validity { margin-top: 1.25rem; padding: .8rem 1rem; border-radius: 12px; background: #f4f8fb; color: #557080; font-weight: 700; }
.cbsp-detail-card.is-expired .cbsp-detail-validity { background: #f2f3f4; color: #67747d; }
.cbsp-detail-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.6rem; }
.cbsp-update-title-link { color: inherit; text-decoration: none; }
.cbsp-update-title-link:hover { color: #0067b1; text-decoration: underline; text-underline-offset: 3px; }
.cbsp-update-actions { margin-top: .9rem; }

/* V17 - NAVIGATOR UX */
.navigator-hero-meta {
    display: flex;
    justify-content: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}
.navigator-hero-meta > span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: .4rem .75rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
}
.navigator-intro-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.2rem;
    padding: 1rem 1.1rem;
    border: 1px solid #dce7ee;
    border-radius: 14px;
    background: #f8fbfd;
    color: #466678;
    line-height: 1.6;
}
.navigator-progress {
    margin-bottom: 1.4rem;
    padding: 1rem 1.1rem;
    border: 1px solid #dce7ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(22, 70, 101, .05);
}
.navigator-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem;
    color: #365c73;
    font-size: .9rem;
    font-weight: 700;
}
.navigator-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7eef3;
}
.navigator-progress-track > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0067b1, #00a6d6);
    transition: width .25s ease;
}
.navigator-section-label {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .8rem;
    align-items: center;
    margin: 1.45rem 0 .85rem;
    color: #164665;
}
.navigator-section-label > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e8f4fb;
    color: #0067b1;
    font-weight: 800;
}
.navigator-section-label strong { display: block; font-size: 1rem; }
.navigator-section-label small { display: block; margin-top: .16rem; color: #6b8391; font-weight: 500; }
.navigator-ready-note {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-top: 1rem;
    padding: .8rem .9rem;
    border: 1px solid #dce7ee;
    border-radius: 12px;
    background: #f6f9fb;
    color: #607785;
    font-size: .9rem;
    line-height: 1.5;
}
.navigator-ready-note.is-ready {
    border-color: #b9e3d0;
    background: #effaf5;
    color: #176645;
}
.navigator-form-error {
    margin-top: .8rem;
    padding: .75rem .9rem;
    border: 1px solid #f0c9c9;
    border-radius: 10px;
    background: #fff5f5;
    color: #9b2c2c;
    font-size: .9rem;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .navigator-hero-meta { justify-content: flex-start; }
    .navigator-intro-card { padding: .9rem; }
    .navigator-progress { padding: .9rem; }
    .navigator-progress-copy { align-items: flex-start; flex-direction: column; gap: .2rem; }
    .navigator-section-label { grid-template-columns: 36px minmax(0, 1fr); gap: .65rem; }
    .navigator-section-label > span { width: 36px; height: 36px; }
}