/*
 * Optimal – accessibility.css
 * Fixes the "One Click Accessibility" (Pojo, legacy module) font resize and
 * the checkbox/toggle rendering in the contrast and grayscale modes.
 *
 * The plugin only adds body.pojo-a11y-resize-font-NN (130…200) and sets
 * `font-size: NN% !important` on body/p/li/label/input/span… and NN*1.33% on
 * h1–h6 / "h_ span". Percentages compound through nesting, px headings are
 * scaled against the wrong parent, px line-heights never grow, and
 * <button>/<div>/<a> never change at all.
 *
 * Every resize rule below is gated behind body[class*="pojo-a11y-resize-font-"]
 * so with nothing selected (or after Reset) this file changes nothing.
 * Every contrast rule is gated behind its own pojo-a11y-* body class.
 *
 * Content roots on this theme (no Elementor): .header, <section>,
 * .treatment-title-area (#how_it_work), <footer>, .modal (contact popup) and
 * the 404 template wrappers. The toolbar (#pojo-a11y-toolbar), the cookie
 * banner (.cc-root) and the cookie modal (.cc-modal-wrap) are body siblings
 * and are handled separately.
 */

/* ───────────────────────────────────────────────────────────────────────
   Section 1: STEP → MULTIPLIERS
     Gentle first click, steady growth after it.
     --a11y-scale          text / headings / lists       +5%  … +55%
     --a11y-scale-form     inputs, buttons, CF7 messages,
                           cookie title/body/buttons     +10% … +65%
     --a11y-scale-toolbar  accessibility toolbar items   +4%  … +45%
                           (deliberately a bit smaller than page text)
   ─────────────────────────────────────────────────────────────────────── */
:root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-toolbar: 1; }
body.pojo-a11y-resize-font-130 { --a11y-scale: 1.05; --a11y-scale-form: 1.10; --a11y-scale-toolbar: 1.04; }
body.pojo-a11y-resize-font-140 { --a11y-scale: 1.10; --a11y-scale-form: 1.17; --a11y-scale-toolbar: 1.08; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.16; --a11y-scale-form: 1.25; --a11y-scale-toolbar: 1.13; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.23; --a11y-scale-form: 1.33; --a11y-scale-toolbar: 1.18; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.30; --a11y-scale-form: 1.41; --a11y-scale-toolbar: 1.24; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.38; --a11y-scale-form: 1.49; --a11y-scale-toolbar: 1.30; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.46; --a11y-scale-form: 1.57; --a11y-scale-toolbar: 1.37; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.55; --a11y-scale-form: 1.65; --a11y-scale-toolbar: 1.45; }

/* ───────────────────────────────────────────────────────────────────────
   Section 2: Base pin on <body> (theme: 20px / 30px, ≤767px 20px / 25px).
   The toolbar sets its own font-size, so this does not reach it.
   Line-height is px in this theme, so it has to grow with the text.
   ─────────────────────────────────────────────────────────────────────── */
html body[class*="pojo-a11y-resize-font-"] {
    font-size: calc(20px * var(--a11y-scale)) !important;
    line-height: calc(30px * var(--a11y-scale)) !important;
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] {
        line-height: calc(25px * var(--a11y-scale)) !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────
   Section 3: Kill the compounding percentages inside every content root.
   (input/select/textarea are handled in Section 4.)
   ─────────────────────────────────────────────────────────────────────── */
html body[class*="pojo-a11y-resize-font-"] :is(.header, section, .treatment-title-area, footer, .modal, .gold-card-banner, .breadcrums, .description-section) :is(p, li, span, label, blockquote, legend, code, pre, dd, dt) {
    font-size: inherit !important;
}

/* Headings with no theme rule fall back to Bootstrap 5.0.2 (h2.footer-title,
   .dr-nidal-title, .stage-item h3 above 767px, 404 title…). Mirror its values. */
html body[class*="pojo-a11y-resize-font-"] :is(.header, section, .treatment-title-area, footer, .modal, .gold-card-banner, .breadcrums, .description-section) h1 { font-size: calc((1.375rem + 1.5vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.header, section, .treatment-title-area, footer, .modal, .gold-card-banner, .breadcrums, .description-section) h2 { font-size: calc((1.325rem + 0.9vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.header, section, .treatment-title-area, footer, .modal, .gold-card-banner, .breadcrums, .description-section) h3 { font-size: calc((1.3rem + 0.6vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.header, section, .treatment-title-area, footer, .modal, .gold-card-banner, .breadcrums, .description-section) h4 { font-size: calc((1.275rem + 0.3vw) * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.header, section, .treatment-title-area, footer, .modal, .gold-card-banner, .breadcrums, .description-section) h5 { font-size: calc(1.25rem * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] :is(.header, section, .treatment-title-area, footer, .modal, .gold-card-banner, .breadcrums, .description-section) h6 { font-size: calc(1rem * var(--a11y-scale)) !important; }
@media (min-width: 1200px) {
    html body[class*="pojo-a11y-resize-font-"] :is(.header, section, .treatment-title-area, footer, .modal, .gold-card-banner, .breadcrums, .description-section) h1 { font-size: calc(2.5rem * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"] :is(.header, section, .treatment-title-area, footer, .modal, .gold-card-banner, .breadcrums, .description-section) h2 { font-size: calc(2rem * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"] :is(.header, section, .treatment-title-area, footer, .modal, .gold-card-banner, .breadcrums, .description-section) h3 { font-size: calc(1.75rem * var(--a11y-scale)) !important; }
    html body[class*="pojo-a11y-resize-font-"] :is(.header, section, .treatment-title-area, footer, .modal, .gold-card-banner, .breadcrums, .description-section) h4 { font-size: calc(1.5rem * var(--a11y-scale)) !important; }
}

/* ───────────────────────────────────────────────────────────────────────
   Section 4: FORM CONTROLS, BUTTONS, CF7 MESSAGES  (--a11y-scale-form)
   Values mirror the theme 1:1 (style.css, then responsive.css ≤767px).
   ─────────────────────────────────────────────────────────────────────── */
html body[class*="pojo-a11y-resize-font-"] :is(.header, section, .treatment-title-area, footer, .modal, .gold-card-banner, .breadcrums, .description-section) :is(input, select, textarea) {
    font-size: calc(19px * var(--a11y-scale-form)) !important;
    line-height: calc(26px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .global-btn {
    font-size: calc(23px * var(--a11y-scale-form)) !important;
    line-height: calc(26px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .global-btn.submit-btn i {
    font-size: calc(21px * var(--a11y-scale-form)) !important;
    line-height: calc(23px * var(--a11y-scale-form)) !important;
}
/* CF7: the response box is a <div> and the tip a <span> inside the control
   wrap; both inherit the 20px body text. Unitless line-height so it grows. */
html body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output,
html body[class*="pojo-a11y-resize-font-"] .wpcf7 .wpcf7-not-valid-tip {
    font-size: calc(20px * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .global-btn {
        font-size: calc(19px * var(--a11y-scale-form)) !important;
        line-height: calc(26px * var(--a11y-scale-form)) !important;
    }
}

/* Section 4b: elements with an intentional size of their own that Section 3
   would flatten: the 404 template title (inline style="font-size:30px"). */
html body[class*="pojo-a11y-resize-font-"] .description-section h3 {
    font-size: calc(30px * var(--a11y-scale)) !important;
}

/* ───────────────────────────────────────────────────────────────────────
   Section 4c: COOKIE BANNER (.cc-root) and COOKIE SETTINGS MODAL
   (.cc-modal-wrap, a separate body child, NOT inside .cc-root).
   Generic inherit first, then scaled pins (bare + scoped selectors).
   ─────────────────────────────────────────────────────────────────────── */
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) :is(p, li, span, label, a, legend, dd, dt) {
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-root {
    font-size: calc(14px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-title,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-title {
    font-size: calc(18px * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-body,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-body {
    font-size: calc(14px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-btn,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-btn {
    font-size: calc(15px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-lang-toggle,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-lang-toggle {
    font-size: calc(12px * var(--a11y-scale)) !important;
}
/* Modal: its text inherits the 20px body (already scaled by Section 2). */
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-btn {
    font-size: calc(20px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-modal-head h2 {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: 1.2 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-close,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-modal-close {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: 1 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cat-desc,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cat-desc {
    font-size: calc(13px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-required-badge,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-required-badge {
    font-size: calc(11px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cookies-list summary,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cookies-list td {
    font-size: calc(12px * var(--a11y-scale)) !important;
}

/* Section 4d: validation tips are CF7 default (display:block, static, in
   flow). The theme never takes them out of flow: no position to fix. */

/* ───────────────────────────────────────────────────────────────────────
   Section 5: Every font-size rule from style.css + responsive.css
   (base → max-width:991px → max-width:767px, the theme's source order),
   × --a11y-scale, with the px line-height scaled alongside.
   ─────────────────────────────────────────────────────────────────────── */
html body[class*="pojo-a11y-resize-font-"] .navbar-nav li a {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: calc(30px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .hero-content-area .title {
    font-size: calc(58px * var(--a11y-scale)) !important;
    line-height: calc(50px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .hero-content-area .title > span {
    font-size: calc(130px * var(--a11y-scale)) !important;
    line-height: calc(120px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .hero-content-area .desc,
html body[class*="pojo-a11y-resize-font-"] .title-area p.desc,
html body[class*="pojo-a11y-resize-font-"] .cta-form-content .subtitle,
html body[class*="pojo-a11y-resize-font-"] .about-content .subtitle {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(34px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .title-area h2.title {
    font-size: calc(42px * var(--a11y-scale)) !important;
    line-height: calc(52px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .benifit-list .benifit-content .benifit-title {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(29px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cta-form-content .title {
    font-size: calc(32px * var(--a11y-scale)) !important;
    line-height: calc(34px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .why-list-item .title {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(28px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .why-list-item .desc {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: calc(24px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .iin-box .iin-col-title {
    font-size: calc(37px * var(--a11y-scale)) !important;
    line-height: calc(50px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .iin-box .iin-item .desc {
    font-size: calc(20px * var(--a11y-scale)) !important;
    line-height: calc(24px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .suitable-treatment-sec .title-area .subtitle,
html body[class*="pojo-a11y-resize-font-"] .value-list .desc-wrapper .desc {
    font-size: calc(22px * var(--a11y-scale)) !important;
    line-height: calc(32px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .su-treatment-item .desc {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: calc(26px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .faq-accordion .accordion-header button {
    font-size: calc(22px * var(--a11y-scale)) !important;
    line-height: calc(33px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .testimonial-item .name {
    font-size: calc(17px * var(--a11y-scale)) !important;
    line-height: calc(24px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .about-content p.desc,
html body[class*="pojo-a11y-resize-font-"] .dr-nidal-section p.desc {
    font-size: calc(22px * var(--a11y-scale)) !important;
    line-height: calc(30px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .footer-content-wrapper > p.desc,
html body[class*="pojo-a11y-resize-font-"] .copyright-wrapper .text {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(37px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .footer-link .item .content * {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: calc(32px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .modal-close-btn {
    font-size: calc(30px * var(--a11y-scale)) !important;
}
@media (max-width: 991px) {
    /* .navbar-toggler i (hamburger, 31px) is deliberately NOT scaled */
    html body[class*="pojo-a11y-resize-font-"] .title-area h2.title {
        font-size: calc(42px * var(--a11y-scale)) !important;
        line-height: calc(44px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .hero-content-area .title {
        font-size: calc(48px * var(--a11y-scale)) !important;
        line-height: calc(46px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .hero-content-area .title > span {
        font-size: calc(100px * var(--a11y-scale)) !important;
        line-height: calc(90px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .hero-content-area .desc {
        font-size: calc(22px * var(--a11y-scale)) !important;
        line-height: calc(32px * var(--a11y-scale)) !important;
    }
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .navbar-nav li a {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(25px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .hero-content-area .title {
        font-size: calc(36px * var(--a11y-scale)) !important;
        line-height: calc(31px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .hero-content-area .title > span {
        font-size: calc(82px * var(--a11y-scale)) !important;
        line-height: calc(80px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .hero-content-area .desc {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(28px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .title-area h2.title {
        font-size: calc(42px * var(--a11y-scale)) !important;
        line-height: calc(44px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .cta-form-content .title {
        font-size: calc(38px * var(--a11y-scale)) !important;
        line-height: calc(40px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .cta-form-content .subtitle {
        font-size: calc(22px * var(--a11y-scale)) !important;
        line-height: calc(32px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .title-area p.desc {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(26px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .stage-item .title {
        font-size: calc(26px * var(--a11y-scale)) !important;
        line-height: calc(32px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .footer-content-wrapper > p.desc {
        font-size: calc(22px * var(--a11y-scale)) !important;
        line-height: calc(30px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .footer-link .item .content * {
        font-size: calc(22px * var(--a11y-scale)) !important;
        line-height: calc(28px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .copyright-wrapper .text {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(32px * var(--a11y-scale)) !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────
   Section 6: ACCESSIBILITY TOOLBAR ITEMS grow a bit less than the page.
   The plugin gives the item spans NN% of the link (12.8px → 25.6px at 200).
   1em = the link's own size (the plugin never touches the <a>).
   ─────────────────────────────────────────────────────────────────────── */
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-item a > span {
    font-size: calc(1em * var(--a11y-scale-toolbar)) !important;
}

/* ───────────────────────────────────────────────────────────────────────
   Section 7: CHECKBOXES IN HIGH CONTRAST / NEGATIVE CONTRAST /
   LIGHT BACKGROUND / GRAYSCALE
   Cookie-settings toggles (.cc-toggle > input + .cc-slider): the theme paints
   every track #ababff, checked and unchecked alike, and Pojo blanks the
   modal around it, so the state is hard to read. In each mode the track gets
   a visible edge, and when checked a ✓ is drawn inside the knob.
   Native checkboxes/radios get their native appearance back (Pojo high
   contrast sets appearance:none in Firefox, which removes the tick) and an
   accent colour that reads on the mode's background.
   ─────────────────────────────────────────────────────────────────────── */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) .cc-modal-wrap:not(#pojo-a11y-toolbar) .cc-toggle input + .cc-slider {
    outline-style: solid !important;
    outline-width: 2px !important;
    outline-offset: -2px !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) .cc-modal-wrap:not(#pojo-a11y-toolbar) .cc-toggle input:checked + .cc-slider::before {
    content: "\2713" !important;
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-align: center !important;
}

/* High contrast + negative contrast: black page */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .cc-modal-wrap:not(#pojo-a11y-toolbar) .cc-toggle input + .cc-slider {
    background: #000 !important;
    outline-color: #fff !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .cc-modal-wrap:not(#pojo-a11y-toolbar) .cc-toggle input + .cc-slider::before {
    background: #fff !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .cc-modal-wrap:not(#pojo-a11y-toolbar) .cc-toggle input:checked + .cc-slider {
    background: #ff0 !important;
    outline-color: #ff0 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .cc-modal-wrap:not(#pojo-a11y-toolbar) .cc-toggle input:checked + .cc-slider::before {
    background: #000 !important;
    color: #ff0 !important;
}

/* Light background: white page */
html body.pojo-a11y-light-background .cc-modal-wrap:not(#pojo-a11y-toolbar) .cc-toggle input + .cc-slider {
    background: #fff !important;
    outline-color: #000 !important;
}
html body.pojo-a11y-light-background .cc-modal-wrap:not(#pojo-a11y-toolbar) .cc-toggle input + .cc-slider::before {
    background: #000 !important;
}
html body.pojo-a11y-light-background .cc-modal-wrap:not(#pojo-a11y-toolbar) .cc-toggle input:checked + .cc-slider {
    background: #000 !important;
}
html body.pojo-a11y-light-background .cc-modal-wrap:not(#pojo-a11y-toolbar) .cc-toggle input:checked + .cc-slider::before {
    background: #fff !important;
    color: #000 !important;
}

/* Grayscale: colours are desaturated by the theme's html filter, so use values */
html body.pojo-a11y-grayscale .cc-modal-wrap:not(#pojo-a11y-toolbar) .cc-toggle input + .cc-slider {
    background: #bdbdbd !important;
    outline-color: #424242 !important;
}
html body.pojo-a11y-grayscale .cc-modal-wrap:not(#pojo-a11y-toolbar) .cc-toggle input + .cc-slider::before {
    background: #fff !important;
}
html body.pojo-a11y-grayscale .cc-modal-wrap:not(#pojo-a11y-toolbar) .cc-toggle input:checked + .cc-slider {
    background: #212121 !important;
    outline-color: #212121 !important;
}
html body.pojo-a11y-grayscale .cc-modal-wrap:not(#pojo-a11y-toolbar) .cc-toggle input:checked + .cc-slider::before {
    background: #fff !important;
    color: #000 !important;
}

/* Native checkboxes / radios anywhere outside the toolbar */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) :not(#pojo-a11y-toolbar) > input:is([type="checkbox"], [type="radio"]) {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    background-image: none !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :not(#pojo-a11y-toolbar) > input:is([type="checkbox"], [type="radio"]) {
    accent-color: #ff0 !important;
}
html body:is(.pojo-a11y-light-background, .pojo-a11y-grayscale) :not(#pojo-a11y-toolbar) > input:is([type="checkbox"], [type="radio"]) {
    accent-color: #000 !important;
}

/* ───────────────────────────────────────────────────────────────────────
   Section 8: ICONS, ACCORDION, SLIDER DOTS IN THE CONTRAST MODES
   Line icons (treatment / stages / why-us SVGs, footer contact SVGs) are
   single-colour drawings on circles. Pojo turns
   the circles black (high + negative contrast) or white (light background),
   so black icons vanish on black and the white footer icons vanish on
   white. Force every icon to one flat colour that reads on the mode's
   background (white on dark, black on light) and outline its circle.
   Filled colour PNG icons (benefit tick, is/is-not, question mark, about
   tick) keep their own colours: flattening them erases the inner tick, and
   they already read on black and on white. Photos are not touched.
   Grayscale keeps the design (filter only).
   The CSS arrows (FAQ ::after, stage ::before) are pseudo-elements Pojo
   never recolours, so they get the same treatment.
   ─────────────────────────────────────────────────────────────────────── */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.icon-area img, .stage-img-area img, .why-icon-area img, .footer-link .icon-wrapper img),
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .faq-accordion .accordion-button::after,
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .stage-list .stage-item::before {
    filter: brightness(0) invert(1) !important;
    background-color: transparent !important;
}
html body.pojo-a11y-light-background :is(.icon-area img, .stage-img-area img, .why-icon-area img, .footer-link .icon-wrapper img),
html body.pojo-a11y-light-background .faq-accordion .accordion-button::after,
html body.pojo-a11y-light-background .stage-list .stage-item::before {
    filter: brightness(0) !important;
    background-color: transparent !important;
}
/* Pojo high contrast paints every <img> #808080: no grey box behind icons */
html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) :is(.star-img, .logo, .right-side-logo-ads) {
    background-color: transparent !important;
}
/* Icon circles keep their shape */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.icon-area, .stage-img-area, .why-icon-area, .footer-link .icon-wrapper) {
    border: 2px solid #fff !important;
}
html body.pojo-a11y-light-background :is(.icon-area, .stage-img-area, .why-icon-area, .footer-link .icon-wrapper) {
    border: 2px solid #000 !important;
}

/* FAQ accordion: each item and its open/closed state stay distinguishable */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .faq-accordion .accordion-item:not(#pojo-a11y-toolbar) {
    border: 1px solid #fff !important;
}
html body.pojo-a11y-light-background .faq-accordion .accordion-item:not(#pojo-a11y-toolbar) {
    border: 1px solid #000 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .faq-accordion .accordion-header .accordion-button:not(#pojo-a11y-toolbar) {
    border: 0 !important;
    background-image: none !important;
}
html body.pojo-a11y-high-contrast .faq-accordion .accordion-header .accordion-button:not(#pojo-a11y-toolbar) {
    background-color: #000 !important;
    color: #fff !important;
}
html body.pojo-a11y-high-contrast .faq-accordion .accordion-header .accordion-button:not(.collapsed):not(#pojo-a11y-toolbar),
html body.pojo-a11y-negative-contrast .faq-accordion .accordion-header .accordion-button:not(.collapsed):not(#pojo-a11y-toolbar) {
    color: #ff0 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .faq-accordion .accordion-button:focus-visible:not(#pojo-a11y-toolbar) {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .faq-accordion .accordion-body:not(#pojo-a11y-toolbar) {
    border-top: 1px dashed #fff !important;
}
html body.pojo-a11y-light-background .faq-accordion .accordion-body:not(#pojo-a11y-toolbar) {
    border-top: 1px dashed #000 !important;
}

/* Mobile slider dots (Slick): Pojo paints them the page colour */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .slick-dots:not(#pojo-a11y-toolbar) li {
    background: #fff !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .slick-dots:not(#pojo-a11y-toolbar) li.slick-active {
    background: #ff0 !important;
}
html body.pojo-a11y-light-background .slick-dots:not(#pojo-a11y-toolbar) li {
    background: #bdbdbd !important;
}
html body.pojo-a11y-light-background .slick-dots:not(#pojo-a11y-toolbar) li.slick-active {
    background: #000 !important;
}

/* Section 9: BACKGROUND IMAGES in the contrast modes are restored by an
   inline block printed from functions.php (the URLs come from ACF, so they
   cannot be written here). */

/* ───────────────────────────────────────────────────────────────────────
   Section 10: NO PAINTED BOXES OVER IMAGES IN THE CONTRAST MODES
   Pojo paints every element black (high / negative contrast) or white
   (light background) and every <img> #808080. Inside the sections that
   carry a background image (.sec-bg: hero, suitable, values) those boxes
   cover the picture and the hero <span> covers the first title line.
   Clear them there, and never paint a box behind any image.
   ─────────────────────────────────────────────────────────────────────── */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .sec-bg:not(#pojo-a11y-toolbar) *,
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .sec-bg:not(#pojo-a11y-toolbar) *::before,
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .sec-bg:not(#pojo-a11y-toolbar) *::after {
    background-color: transparent !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) img:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) {
    background-color: transparent !important;
}

/* ───────────────────────────────────────────────────────────────────────
   Section 11: "WHO IS IT FOR" (.suitable-treatment-sec) IN THE CONTRAST MODES
   Same as the default design (background photo, floating cards, question
   icon on the card edge); only the card background takes the mode colour,
   with an edge so the card shape still reads over the photo.
   Beats Section 10's transparent rule (class column 4 > 2).
   ─────────────────────────────────────────────────────────────────────── */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .suitable-treatment-sec.sec-bg:not(#pojo-a11y-toolbar) .su-treatment-item {
    background-color: #000 !important;
    border: 2px solid #fff !important;
}
html body.pojo-a11y-light-background .suitable-treatment-sec.sec-bg:not(#pojo-a11y-toolbar) .su-treatment-item {
    background-color: #fff !important;
    border: 2px solid #000 !important;
}
/* the card text sits on the card, not on the photo */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .suitable-treatment-sec.sec-bg:not(#pojo-a11y-toolbar) .su-treatment-item * {
    background-color: transparent !important;
}

/* ───────────────────────────────────────────────────────────────────────
   Section 12: NO FOCUS BORDER ON CLICK IN THE CONTRAST MODES
   Pojo high contrast draws `:focus { outline: thin dotted }` on anything
   clicked (e.g. the FAQ question stays boxed after opening it). Remove it
   for mouse/touch focus; keyboard focus (:focus-visible) keeps its ring,
   which keyboard users need to see where they are.
   ─────────────────────────────────────────────────────────────────────── */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) :focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* ───────────────────────────────────────────────────────────────────────
   Section 13: "OUR VALUES" (.value-sec) IN THE CONTRAST MODES
   The photo sits on .value-sec-bg (covered by Section 10), but the card row
   is a second .container outside it, pulled up over the photo with
   margin-bottom:-230px, so Pojo's black/white boxes on that container, row
   and columns hide the lower part of the photo. Clear them; the cards keep
   their default shape and take the mode colour, like Section 11.
   ─────────────────────────────────────────────────────────────────────── */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .value-sec:not(#pojo-a11y-toolbar) *,
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .value-sec:not(#pojo-a11y-toolbar) *::before,
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .value-sec:not(#pojo-a11y-toolbar) *::after {
    background-color: transparent !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .value-sec:not(#pojo-a11y-toolbar) .value-list .desc-wrapper {
    background-color: #000 !important;
    border: 2px solid #fff !important;
    overflow: hidden !important;
}
html body.pojo-a11y-light-background .value-sec:not(#pojo-a11y-toolbar) .value-list .desc-wrapper {
    background-color: #fff !important;
    border: 2px solid #000 !important;
    overflow: hidden !important;
}

/* ───────────────────────────────────────────────────────────────────────
   Section 14: FOOTER CONTACT AREA IN THE CONTRAST MODES
   .footer-wrapper::before is the light-blue decorative panel; Pojo never
   recolours pseudo-elements, so it stays #ecf4fb while the contact block on
   top of it turns black (or white). No painted boxes here: both go
   transparent and the block sits on the mode's page colour.
   ─────────────────────────────────────────────────────────────────────── */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .footer-sec:not(#pojo-a11y-toolbar) .footer-wrapper::before {
    background: transparent !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .footer-sec:not(#pojo-a11y-toolbar) :is(.footer-content-wrapper, .footer-content-wrapper *:not(.icon-wrapper)) {
    background-color: transparent !important;
}

/* ───────────────────────────────────────────────────────────────────────
   Section 15: FORM FIELD BORDERS IN LIGHT BACKGROUND
   The theme draws fields with `border: 1px solid #fff` (white on the dark
   form box). Pojo light background turns the box white, so the fields lose
   their outline. Draw it in black; the rounded shape is unchanged.
   ─────────────────────────────────────────────────────────────────────── */
html body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]), textarea, select) {
    border: 1px solid #000 !important;
}

/* ───────────────────────────────────────────────────────────────────────
   Section 16: HEADER MENU WRAPS BY ITEM WHEN TEXT IS ENLARGED (≥992px)
   The desktop menu is one flex row, so bigger text squeezes every item and
   its words break inside it ("איך / הטיפול / עובד?"). Keep each item on one
   line and let whole items move to a second row when space runs out.
   The mobile (collapsed, vertical) menu is untouched.
   ─────────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
    html body[class*="pojo-a11y-resize-font-"] .header .navbar-collapse {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .header .navbar-nav {
        flex-wrap: wrap !important;
        row-gap: calc(4px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .header .navbar-nav > li {
        white-space: nowrap !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────
   Section 17: TEXT OVER BACKGROUND PHOTOS STAYS READABLE (colour only)
   The photos are dimmed / lightened in the mode (Section 18), so the text
   only needs a solid colour: white, with yellow links/buttons, on the
   dimmed photo; black on the photo in light background.
   No shadows, no boxes. Cards (Sections 11 and 13) keep their own colours.
   ─────────────────────────────────────────────────────────────────────── */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .sec-bg:not(#pojo-a11y-toolbar) :is(h1, h2, h3, h4, h5, h6, p, span, li, strong, b, em, div) {
    color: #fff !important;
    text-shadow: none !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .sec-bg:not(#pojo-a11y-toolbar) :is(a, a *, .global-btn, .global-btn *) {
    color: #ff0 !important;
    border-color: #ff0 !important;
    text-shadow: none !important;
}
html body.pojo-a11y-light-background .sec-bg:not(#pojo-a11y-toolbar) :is(h1, h2, h3, h4, h5, h6, p, span, li, strong, b, em, div, a, a *, .global-btn, .global-btn *) {
    color: #000 !important;
    text-shadow: none !important;
}
html body.pojo-a11y-light-background .sec-bg:not(#pojo-a11y-toolbar) .global-btn {
    border-color: #000 !important;
}

/* ───────────────────────────────────────────────────────────────────────
   Section 18: DIM / LIGHTEN THE BACKGROUND PHOTOS IN THE CONTRAST MODES
   The restored photos are bright, so Section 17's white text disappears on
   them. Blend the photo with a flat grey painted UNDER it (no layer over
   the text, nothing changes size or position):
     high + negative contrast  multiply × #595959  → photo at ~35% brightness
   Light background keeps the photo as it is.
   The hero photo only exists from 768px up (the theme removes it on
   mobile), so its rule is limited to that range.
   ─────────────────────────────────────────────────────────────────────── */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.suitable-treatment-sec, .value-sec-bg).sec-bg:not(#pojo-a11y-toolbar) {
    background-color: #595959 !important;
    background-blend-mode: multiply !important;
}
@media (min-width: 768px) {
    html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .hero-sec.sec-bg:not(#pojo-a11y-toolbar) {
        background-color: #595959 !important;
        background-blend-mode: multiply !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────
   Section 19: COOKIE BUTTONS IN LIGHT BACKGROUND
   .cc-btn has `border:0`; Pojo light background paints it white on the white
   banner / settings modal, so "אישור הכל", "דחיית הכל", "שמירת הבחירה" lose
   their shape. Outline them in black. The underlined text link
   ("הגדרות", .cc-btn-text) stays a link.
   ─────────────────────────────────────────────────────────────────────── */
html body.pojo-a11y-light-background :is(.cc-root, .cc-modal-wrap):not(#pojo-a11y-toolbar) .cc-btn:not(.cc-btn-text) {
    border: 1px solid #000 !important;
}

/* ───────────────────────────────────────────────────────────────────────
   Section 20: NO JUSTIFIED TEXT WHILE THE FONT IS ENLARGED
   Justified text opens wide gaps between words once the font grows, which
   is hard to read. Switch every justified block to right alignment (RTL
   start) while a size is selected; default and Reset keep the design.
     .text-justify         about / team / Dr. Nidal / values paragraphs
     .text-justify-center  treatment-stage descriptions (justify + centred
                           last line)
     .treatment-content .item .details > p   treatment list
   ─────────────────────────────────────────────────────────────────────── */
html body[class*="pojo-a11y-resize-font-"] :is(.text-justify, .text-justify-center, .treatment-content-area .treatment-content .item .details > p) {
    text-align: right !important;
    text-align-last: right !important;
}