/* =========================================================================
   accessibility.css — One Click Accessibility (Pojo) fixes
   Theme: diabitis_medbalance (shared by diabitis / overweight / gastro /
   bloodpressure / colesterol .medbalance.co.il)

   - Font resize rules are gated behind body[class*="pojo-a11y-resize-font-"]
     so with nothing selected (or after Reset) the design is untouched.
   - Contrast rules are gated behind the pojo contrast body classes.
   - Nothing here hard-codes a site URL: section background images are
     restored from a CSS variable (--a11y-bg) that functions.php copies from
     each element's own inline style, so clones / other sites just work.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Section 1: scale curves
   --a11y-scale       general text
   --a11y-scale-form  form controls + CF7 messages (start smallest, jump more)
   --a11y-scale-tb    accessibility toolbar items (a bit smaller than text)
   --a11y-scale-cc    cookie banner / settings (a bit smaller than text)
   ------------------------------------------------------------------------- */
:root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-tb: 1; --a11y-scale-cc: 1; }
body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-tb: 1.04; --a11y-scale-cc: 1.08; }
body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-tb: 1.08; --a11y-scale-cc: 1.12; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-tb: 1.12; --a11y-scale-cc: 1.16; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-tb: 1.15; --a11y-scale-cc: 1.20; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-tb: 1.18; --a11y-scale-cc: 1.24; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-tb: 1.21; --a11y-scale-cc: 1.28; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-tb: 1.25; --a11y-scale-cc: 1.32; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-tb: 1.28; --a11y-scale-cc: 1.36; }


/* -------------------------------------------------------------------------
   Section 2: base pin on <body> (measured body baseline = 16px)
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] { font-size: calc(16px * var(--a11y-scale)) !important; }


/* -------------------------------------------------------------------------
   Section 3: kill the plugin's % compounding inside every content root.
   Roots: header, .main-wrapper, .privacy-content (privacy template), footer, bootstrap modals, privacy/accessibility
   statement modals, floating call / whatsapp buttons, lightbox.
   Specificity is exactly (0,2,2) on purpose: it ties the plugin's
   "p:not(.pojo-a11y-toolbar-title)" and wins by source order, and it loses
   (by order) to every Section 4/5 rule, which are all >= (0,2,2).
   ------------------------------------------------------------------------- */
body[class*="pojo-a11y-resize-font-"]:not(.a11y-x) :where(header, .main-wrapper, .privacy-content, footer, .modal, .privacy-wrapper, .floating-call-btn, .whatsapp-buuton, .lightbox) :is(p, li, span, label, blockquote, legend, code, pre, dd, dt) {
	font-size: inherit !important;
}
/* long unbreakable strings (e-mail addresses, URLs) may wrap once enlarged,
   otherwise they push the page sideways on phones */
html body[class*="pojo-a11y-resize-font-"] :where(header, .main-wrapper, .privacy-content, footer, .modal, .privacy-wrapper) :is(p, li, a, td, th, h1, h2, h3, h4, h5, h6, span) {
	overflow-wrap: break-word;
}

/* Headings without a theme size use Bootstrap's sizes (rem = 16px, html is not
   touched by the plugin). Theme heading rules in Section 5 are more specific. */
html body[class*="pojo-a11y-resize-font-"] :where(header, .main-wrapper, .privacy-content, footer, .modal, .privacy-wrapper) h1 { font-size: calc((1.375rem + 1.5vw) * var(--a11y-scale)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"] :where(header, .main-wrapper, .privacy-content, footer, .modal, .privacy-wrapper) h2 { font-size: calc((1.325rem + .9vw) * var(--a11y-scale)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"] :where(header, .main-wrapper, .privacy-content, footer, .modal, .privacy-wrapper) h3 { font-size: calc((1.3rem + .6vw) * var(--a11y-scale)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"] :where(header, .main-wrapper, .privacy-content, footer, .modal, .privacy-wrapper) h4 { font-size: calc((1.275rem + .3vw) * var(--a11y-scale)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"] :where(header, .main-wrapper, .privacy-content, footer, .modal, .privacy-wrapper) h5 { font-size: calc(1.25rem * var(--a11y-scale)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"] :where(header, .main-wrapper, .privacy-content, footer, .modal, .privacy-wrapper) h6 { font-size: calc(1rem * var(--a11y-scale)) !important; line-height: 1.2 !important; }
@media (min-width: 1200px) {
	html body[class*="pojo-a11y-resize-font-"] :where(header, .main-wrapper, .privacy-content, footer, .modal, .privacy-wrapper) h1 { font-size: calc(2.5rem * var(--a11y-scale)) !important; }
	html body[class*="pojo-a11y-resize-font-"] :where(header, .main-wrapper, .privacy-content, footer, .modal, .privacy-wrapper) h2 { font-size: calc(2rem * var(--a11y-scale)) !important; }
	html body[class*="pojo-a11y-resize-font-"] :where(header, .main-wrapper, .privacy-content, footer, .modal, .privacy-wrapper) h3 { font-size: calc(1.75rem * var(--a11y-scale)) !important; }
	html body[class*="pojo-a11y-resize-font-"] :where(header, .main-wrapper, .privacy-content, footer, .modal, .privacy-wrapper) h4 { font-size: calc(1.5rem * var(--a11y-scale)) !important; }
}


/* -------------------------------------------------------------------------
   Section 4: CF7 form controls + messages on --a11y-scale-form.
   Input and submit share one explicit height per form so they stay equal on
   every device; text is centred by the control itself (padding-block 0).
   Theme baselines: .content-form input 48px high, footer form 44px high.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .content-form input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
html body[class*="pojo-a11y-resize-font-"] .content-form textarea,
html body[class*="pojo-a11y-resize-font-"] .content-form select {
	font-size: calc(16px * var(--a11y-scale-form)) !important;
	line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .content-form input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
html body[class*="pojo-a11y-resize-font-"] .content-form input[type="submit"] {
	height: calc(48px * var(--a11y-scale-form)) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	box-sizing: border-box !important;
}
html body[class*="pojo-a11y-resize-font-"] .content-form input[type="submit"] {
	font-size: calc(24px * var(--a11y-scale-form)) !important;
	line-height: 1.2 !important;
}
html body[class*="pojo-a11y-resize-font-"] .content-form ::placeholder {
	font-size: calc(18px * var(--a11y-scale-form)) !important;
}
/* footer form (theme: input padding 10px, submit 23px / padding 5px 14px !important) */
html body[class*="pojo-a11y-resize-font-"] .footer-form.content-form input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
html body[class*="pojo-a11y-resize-font-"] .footer-form.content-form input[type="submit"] {
	height: calc(44px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .footer-form.content-form input[type="submit"] {
	font-size: calc(23px * var(--a11y-scale-form)) !important;
	padding: 0 14px !important;
}
html body[class*="pojo-a11y-resize-font-"] .footer-form.content-form .form-submit > p::before {
	font-size: calc(23px * var(--a11y-scale-form)) !important;
}

/* response message: <div>, not in the plugin list -> scale it, unitless line-height */
html body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output {
	font-size: calc(16px * var(--a11y-scale-form)) !important;
	line-height: 1.4 !important;
}

/* validation tip: stays position:static (theme never takes it out of flow),
   one line at every step. Uses the gentler text curve, capped by the column
   width (container query) so the longest message ("לשדה זה יש קלט ארוך מדי.",
   ~10.5em) never leaves its column - the 2-column form is only ~180px wide
   per field on tablets. */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-form .row > [class*="col-"] {
	container-type: inline-size;
}
html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip {
	font-size: calc(15px * var(--a11y-scale)) !important;
	font-size: min(calc(15px * var(--a11y-scale)), 9.4cqi) !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
}


/* -------------------------------------------------------------------------
   Section 4c: cookie banner (#cc-banner-root lives outside the content roots).
   Generic inherit first, then explicit pins on the (smaller) cookie curve.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) :is(p, li, span, label, a, summary, td, th) { font-size: inherit !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-root { font-size: calc(14px * var(--a11y-scale-cc)) !important; line-height: 1.5 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap,
html body[class*="pojo-a11y-resize-font-"] .cc-modal { font-size: calc(14px * var(--a11y-scale-cc)) !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(16px * var(--a11y-scale-cc)) !important; line-height: 1.4 !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-cc)) !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(14px * var(--a11y-scale-cc)) !important; line-height: 1.3 !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-cc)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-head h2 { font-size: calc(18px * var(--a11y-scale-cc)) !important; line-height: 1.3 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-modal-close,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-close { font-size: calc(24px * var(--a11y-scale-cc)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-cat-desc,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cat-desc { font-size: calc(13px * var(--a11y-scale-cc)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-required-badge,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-required-badge { font-size: calc(11px * var(--a11y-scale-cc)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list td,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list td { font-size: calc(12px * var(--a11y-scale-cc)) !important; }


/* -------------------------------------------------------------------------
   Section 5: every font-size rule of assets/css/style.css + responsive.css,
   gated and x var(--a11y-scale). px line-heights are scaled too so lines
   never overlap / crop. Media blocks in the theme's own order.
   Icon glyphs in fixed boxes (slick arrows, call icon, close buttons) are
   intentionally not scaled.
   ------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .global-btn { font-size: calc(19px * var(--a11y-scale)) !important; line-height: calc(26px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .navbar-nav .menu-item { font-size: calc(16px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .header-btn { font-size: calc(20px * var(--a11y-scale)) !important; line-height: calc(27px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .hero-content .title { font-size: calc(32px * var(--a11y-scale)) !important; line-height: calc(46px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .hero-content .desc { font-size: calc(18px * var(--a11y-scale)) !important; line-height: calc(32px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .number-box .number-content { font-size: calc(22px * var(--a11y-scale)) !important; line-height: calc(30px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .imagine-title { font-size: calc(50px * var(--a11y-scale)) !important; line-height: calc(52px * var(--a11y-scale)) !important; }
/* "imagine" circles (desktop): fixed-size circles orbiting a photo. Text and
   circle grow on capped curves so the text stays inside and circles never
   collide (measured on all 5 sites: text fits, circles keep a gap at step 200).
   Below 1200px see the flex layout after the 400px block. */
html body[class*="pojo-a11y-resize-font-"] .imagine-list .list-item { width: calc(160px * min(var(--a11y-scale), 1.2)) !important; height: calc(160px * min(var(--a11y-scale), 1.2)) !important; }
html body[class*="pojo-a11y-resize-font-"] .imagine-list .list-item .list-content > p { font-size: calc(18px * min(var(--a11y-scale), 1.3)) !important; line-height: calc(19px * min(var(--a11y-scale), 1.3)) !important; }
html body[class*="pojo-a11y-resize-font-"] .form-submit::after { top: calc(24px * var(--a11y-scale-form) - 6px) !important; }
html body[class*="pojo-a11y-resize-font-"] .content-form h2 { font-size: calc(24px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .contact-form-content.hash > h2 { font-size: calc(36px * var(--a11y-scale)) !important; line-height: calc(46px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .contact-form-content.hash > p { font-size: calc(22px * var(--a11y-scale)) !important; line-height: calc(34px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .our-process-sec h2.title { font-size: calc(36px * var(--a11y-scale)) !important; line-height: calc(36px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .hash-process-box .number-box,
html body[class*="pojo-a11y-resize-font-"] .hash-process-box .image-box { width: calc(60px * var(--a11y-scale)) !important; height: calc(64px * var(--a11y-scale)) !important; line-height: calc(64px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .hash-process-box .number-box .number,
html body[class*="pojo-a11y-resize-font-"] .hash-process-box .number-box .process-popup-number { font-size: calc(34px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .hash-process-box .title { font-size: calc(18px * var(--a11y-scale)) !important; line-height: calc(26px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .hash-process-box p.desc { font-size: calc(16px * var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .hash-process-box a { font-size: calc(12px * var(--a11y-scale)) !important; line-height: calc(18px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .who-col-content h2.title { font-size: calc(43px * var(--a11y-scale)) !important; line-height: calc(54px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .who-list .list-item { font-size: calc(18px * var(--a11y-scale)) !important; line-height: calc(26px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .patient-recommend-sec h2.title { font-size: calc(36px * var(--a11y-scale)) !important; line-height: calc(28px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .diagnostic-method-sec h2.title { font-size: calc(36px * var(--a11y-scale)) !important; line-height: calc(43px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .review-sec h2.title { font-size: calc(36px * var(--a11y-scale)) !important; line-height: calc(28px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .review-area .desc { font-size: calc(19px * var(--a11y-scale)) !important; line-height: calc(25px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .our-staff-wrap h2,
html body[class*="pojo-a11y-resize-font-"] .faq-sec h2.title { font-size: calc(36px * var(--a11y-scale)) !important; line-height: calc(28px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .position-of-staff h2 { font-size: calc(19px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"] .position-of-staff p { font-size: calc(14px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .staf-lower-content p { font-size: calc(13px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .staff-sub-desc { font-size: calc(19px * var(--a11y-scale)) !important; line-height: calc(30px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .staff-sub-desc strong { font-size: calc(22px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .faq-accordion .accordion-header button { font-size: calc(16px * var(--a11y-scale)) !important; line-height: 1.4 !important; }
html body[class*="pojo-a11y-resize-font-"] .intrgrative-sec h2.title { font-size: calc(25px * var(--a11y-scale)) !important; line-height: calc(36px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .intrgrative-sec .area-col .title { font-size: calc(25px * var(--a11y-scale)) !important; line-height: calc(36px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .integrative-slider .slick-slide .area-box .desc { font-size: calc(19px * var(--a11y-scale)) !important; line-height: calc(26px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .integrative-slider .slick-slide .area-box .desc strong { font-size: calc(17px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .footer-title { font-size: calc(20px * var(--a11y-scale)) !important; line-height: calc(28px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .footer-title.bottom { font-size: calc(15px * var(--a11y-scale)) !important; line-height: calc(20px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .footer-links .item,
html body[class*="pojo-a11y-resize-font-"] .footer-links .item a { font-size: calc(16px * var(--a11y-scale)) !important; line-height: calc(20px * var(--a11y-scale)) !important; }
/* footer + its contact form grow with the text (theme: 835px footer, 310px
   form, 270px fields) so enlarged inputs don't get cramped */
html body[class*="pojo-a11y-resize-font-"] footer > .container { max-width: min(calc(835px * var(--a11y-scale)), 1182px) !important; }
html body[class*="pojo-a11y-resize-font-"] .footer-form { max-width: calc(310px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .footer-form .content-form-wrap { max-width: calc(270px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .method-modal-content .hash-process-box p,
html body[class*="pojo-a11y-resize-font-"] .process-modal-content .hash-process-box p { font-size: calc(16px * var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .method-modal-content .hash-process-box li,
html body[class*="pojo-a11y-resize-font-"] .process-modal-content .hash-process-box li { font-size: calc(16px * var(--a11y-scale)) !important; line-height: calc(20px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .privacy-banner h1 { font-size: calc(56px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"] .privacy-content .page-content p { font-size: calc(18px * var(--a11y-scale)) !important; line-height: calc(28px * var(--a11y-scale)) !important; }
/* floating call button: stays exactly as designed at every step (its hidden
   number text would otherwise stretch the round button into an oval) */
html body[class*="pojo-a11y-resize-font-"] .floating-call-btn .call-button { font-size: 18px !important; }
html body[class*="pojo-a11y-resize-font-"] .floating-call-btn .call-text { font-size: 25px !important; }
html body[class*="pojo-a11y-resize-font-"] .floating-call-btn .call-icon { font-size: 28px !important; }
/* privacy / accessibility statement modal: theme uses vw + vh; vh line-heights
   don't grow, so force unitless. Readability floor keeps 0.8vw from rendering
   ~7px on tablets (gated, default render untouched). :where() restated explicitly. */
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(max(18px, 1.4vw) * var(--a11y-scale)) !important; line-height: 1.3 !important; }
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3 { font-size: calc(max(16px, 1.1vw) * var(--a11y-scale)) !important; line-height: 1.3 !important; }
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content div { font-size: calc(max(14px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.6 !important; }
html body[class*="pojo-a11y-resize-font-"] .pv-links > span,
html body[class*="pojo-a11y-resize-font-"] .pv-link { font-size: calc(max(14px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.2 !important; }
html body[class*="pojo-a11y-resize-font-"] .privacy-content table td { font-size: calc(max(14px, 0.8vw) * var(--a11y-scale)) !important; }

@media (max-width: 767px) {
	html body[class*="pojo-a11y-resize-font-"] .hero-content .title { font-size: calc(36px * var(--a11y-scale)) !important; line-height: calc(44px * var(--a11y-scale)) !important; }
	html body[class*="pojo-a11y-resize-font-"] .imagine-title { font-size: calc(40px * var(--a11y-scale)) !important; line-height: calc(46px * var(--a11y-scale)) !important; }
	html body[class*="pojo-a11y-resize-font-"] .imagine-list { --a11y-ct: 12px; --a11y-cl: 13px; }
	html body[class*="pojo-a11y-resize-font-"] .imagine-list .list-item,
	html body[class*="pojo-a11y-resize-font-"] .imagine-list .list-item:nth-child(n) { --a11y-c: min(calc(116px * var(--a11y-scale)), calc((100% - 12px) / 2)); }
	html body[class*="pojo-a11y-resize-font-"] .our-process-sec h2.title { font-size: calc(26px * var(--a11y-scale)) !important; line-height: calc(30px * var(--a11y-scale)) !important; }
	html body[class*="pojo-a11y-resize-font-"] .who-col-content h2.title { font-size: calc(30px * var(--a11y-scale)) !important; line-height: calc(36px * var(--a11y-scale)) !important; }
	html body[class*="pojo-a11y-resize-font-"] .contact-form-content.hash > h2,
	html body[class*="pojo-a11y-resize-font-"] .diagnostic-method-sec h2.title,
	html body[class*="pojo-a11y-resize-font-"] .our-staff-wrap h2,
	html body[class*="pojo-a11y-resize-font-"] .review-sec h2.title,
	html body[class*="pojo-a11y-resize-font-"] .faq-sec h2.title,
	html body[class*="pojo-a11y-resize-font-"] .patient-recommend-sec h2.title { font-size: calc(26px * var(--a11y-scale)) !important; line-height: calc(30px * var(--a11y-scale)) !important; }
	html body[class*="pojo-a11y-resize-font-"] .intrgrative-sec h2.title { font-size: calc(20px * var(--a11y-scale)) !important; line-height: calc(28px * var(--a11y-scale)) !important; }
	html body[class*="pojo-a11y-resize-font-"] .privacy-banner h1 { font-size: calc(38px * var(--a11y-scale)) !important; }
	html body[class*="pojo-a11y-resize-font-"] .footer-form,
	html body[class*="pojo-a11y-resize-font-"] .footer-form .content-form-wrap { max-width: 100% !important; }
}
@media (max-width: 600px) {
	html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(18px * var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; }
	html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3 { font-size: calc(16px * var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; }
	html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p,
	html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li,
	html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a { font-size: calc(12px * var(--a11y-scale)) !important; line-height: calc(20px * var(--a11y-scale)) !important; }
	html body[class*="pojo-a11y-resize-font-"] .privacy-content table td { font-size: calc(12px * var(--a11y-scale)) !important; }
}
@media (max-width: 400px) {
	html body[class*="pojo-a11y-resize-font-"] .imagine-list { --a11y-ct: 11px; --a11y-cl: 12px; }
}
/* below 1200px the circles are absolutely placed over the photo in a narrower
   container and already overlap on some sites; enlarged text can't fit without covering each other.
   While text is enlarged they line up under the photo instead (flex row,
   wraps), so no circle ever hides another one's text - on any site's copy. */
@media (max-width: 1199px) {
	html body[class*="pojo-a11y-resize-font-"] .imagine-list { position: static !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; padding: 16px 0 24px !important; }
	html body[class*="pojo-a11y-resize-font-"] .imagine-list .list-item,
	html body[class*="pojo-a11y-resize-font-"] .imagine-list .list-item:nth-child(n) { position: relative !important; top: auto !important; left: auto !important; right: auto !important; flex: 0 0 auto !important; width: var(--a11y-c, calc(160px * var(--a11y-scale))) !important; height: auto !important; aspect-ratio: 1 / 1; }
	html body[class*="pojo-a11y-resize-font-"] .imagine-list .list-item .list-content > p { font-size: calc(var(--a11y-ct, 18px) * var(--a11y-scale)) !important; line-height: calc(var(--a11y-cl, 19px) * var(--a11y-scale)) !important; }
}
/* expanded desktop menu (>=992px): logo + 7 menu items + button don't fit
   once enlarged, which pushed the header button off-screen / glued it to the
   menu. From 1200px the header widens just enough for a one-line menu (see
   the fit-content rule below) so the menu text grows fully; on 992-1199px there
   is no spare width, so the menu text is capped at x1.4 there. Wrapped items
   are centred (text and vertically), 24px gaps, the button stays one line with
   24px space before it, and the logo may shrink (never above its 240px). */
@media (min-width: 992px) {
	html body[class*="pojo-a11y-resize-font-"] header .navbar-nav { gap: 24px !important; align-items: center !important; margin-left: auto !important; margin-right: auto !important; }
	html body[class*="pojo-a11y-resize-font-"] .navbar-nav .menu-item { text-align: center !important; }
	/* logo box = at most its 240px (a % max-width alone lets the link take the
	   image's natural width and leave a big empty gap beside the logo) */
	html body[class*="pojo-a11y-resize-font-"] header .navbar-brand { flex: 0 1 240px !important; min-width: 0 !important; max-width: 240px !important; margin-left: 24px !important; }
	html body[class*="pojo-a11y-resize-font-"] header .navbar-brand img.logo { max-width: 100% !important; }
	/* menu centred between logo and button */
	html body[class*="pojo-a11y-resize-font-"] header .navbar-content { flex: 1 1 auto !important; display: flex !important; justify-content: center !important; margin-left: 24px !important; }
	html body[class*="pojo-a11y-resize-font-"] header .navbar-collapse { flex-grow: 1 !important; justify-content: center !important; }
	html body[class*="pojo-a11y-resize-font-"] header .header-btn { flex-shrink: 0 !important; white-space: nowrap !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	html body[class*="pojo-a11y-resize-font-"] .navbar-nav .menu-item { font-size: calc(16px * min(var(--a11y-scale), 1.4)) !important; }
	html body[class*="pojo-a11y-resize-font-"] header .navbar-nav { gap: 16px !important; }
	html body[class*="pojo-a11y-resize-font-"] header .navbar-brand { margin-left: 12px !important; }
}
/* from 1200px the header grows only as much as the one-line menu needs
   (fit-content), never below the theme's 1182px and never past the screen;
   if one line can't fit even at full width, items wrap as above */
@media (min-width: 1200px) {
	html body[class*="pojo-a11y-resize-font-"] header .header-container { max-width: 100% !important; width: fit-content !important; min-width: min(1182px, 100%) !important; }
}


/* -------------------------------------------------------------------------
   Section 6: accessibility toolbar items
   - one line in the fixed 180px panel at every step / every mode
   - icon spacing on the LEFT of the icon, no underline on the item text
   - item font capped on the toolbar curve (longest label "קישורים תחתונים"
     bold + icon fits 180px - 2x12px padding at 12.8px x 1.28)
   ------------------------------------------------------------------------- */
#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a {
	white-space: nowrap !important;
	text-decoration: none !important;
}
#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a span {
	text-decoration: none !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a {
	font-size: calc(12.8px * var(--a11y-scale-tb)) !important;
	padding-left: 12px !important;
	padding-right: 12px !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a span {
	font-size: inherit !important;
}


/* -------------------------------------------------------------------------
   Section 7: contrast modes
   Prefixes carry :not(#a11y-x):not(.a11y-x) so they out-rank the plugin's
   "*:not(#pojo-a11y-toolbar)" rules (1,1,1) / (1,2,1).
   ------------------------------------------------------------------------- */

/* high contrast: body itself black (plugin leaves it #fbfaf8) */
body.pojo-a11y-high-contrast { background: #000 !important; background-color: #000 !important; }

/* --- section background images stay visible (URL comes from the element's
       own inline style via --a11y-bg, set by functions.php).
       The diagnostic-methods section keeps the plain contrast background
       (black / white) - its light pattern image only reduces contrast. --- */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .a11y-has-bg:not(.diagnostic-method-sec) {
	background-image: var(--a11y-bg) !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .hero-sec.a11y-has-bg,
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .intrgrative-sec.a11y-has-bg {
	background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .imagine-sec.a11y-has-bg {
	background-size: cover !important; background-position: bottom center !important; background-repeat: no-repeat !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .who-suitable-sec.a11y-has-bg {
	background-size: cover !important;
}
@media (max-width: 767px) {
	html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .intrgrative-sec.a11y-has-bg { background-position: right center !important; }
}
/* containers inside an image section: no background colour, only the text
   itself gets the contrast background (the plugin already paints text) */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .a11y-has-bg :is(div, ul, ol, section, article, figure, form, fieldset):not(.image-box):not(.number-box):not(.list-item):not(.area-col):not(.slick-arrow):not(.modal):not(.modal-dialog):not(.modal-content) {
	background-color: transparent !important;
	background-image: none !important;
}
/* transparent PNGs on top of an image section (e.g. the couple photo): no
   grey / black / white plate behind them */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .a11y-has-bg img:not(.image-box img) {
	background: transparent !important;
	background-color: transparent !important;
}

/* --- video placeholders: the full-size play overlay is a <button>; the
       plugin paints buttons, which hides the video poster underneath --- */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale):not(#a11y-x):not(.a11y-x) .video__play-button,
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale):not(#a11y-x):not(.a11y-x) .video__play-button-icon,
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale):not(#a11y-x):not(.a11y-x) .video__play-button-icon * {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
}

/* --- icons inside the dark-red boxes (process numbers / method icons):
       keep a dark box so the white icons and numbers stay visible --- */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .hash-process-box :is(.image-box, .number-box) {
	background: #000 !important;
	background-color: #000 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#a11y-x):not(.a11y-x) .hash-process-box :is(.image-box, .number-box) {
	outline: 1px solid #fff !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .hash-process-box :is(.image-box, .number-box) * {
	background: transparent !important;
	background-color: transparent !important;
	color: #fff !important;
}
/* white icons sitting on dark buttons / circles: no grey plate behind them */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#a11y-x):not(.a11y-x) :is(.global-btn, .header-btn, .imagine-list .list-item, .whatsapp-buuton) img {
	background: transparent !important;
	background-color: transparent !important;
}

/* "imagine" circles: solid black disc in every contrast mode so the white tick
   and the text stay readable on top of the photo */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .imagine-list .list-item {
	background: #000 !important;
	background-color: #000 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .imagine-list .list-item * {
	background: transparent !important;
	background-color: transparent !important;
	color: #fff !important;
	filter: none !important;
}

/* --- button icons on the light background: white icons -> black. The plugin
       paints the <img> itself white; clear that first or the filter turns the
       whole box into a black block. --- */
html body.pojo-a11y-light-background:not(#a11y-x):not(.a11y-x) :is(.global-btn, .header-btn) > img {
	background: transparent !important;
	background-color: transparent !important;
	filter: brightness(0) !important;
}
html body.pojo-a11y-light-background:not(#a11y-x):not(.a11y-x) .form-submit::after {
	filter: brightness(0) !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#a11y-x):not(.a11y-x) .footer-form.content-form .form-submit > p::before {
	color: #fff !important;
}

/* --- arrows / triangles between cards (background-image pseudo elements) --- */
/* left-triangle.png is a narrow two-tone triangle; recoloured by a filter it
   turns into a thin jagged sliver. Use a solid SVG triangle filling the same
   30x56 box instead (the theme's mobile rotate(270deg) still applies).
   z-index: the plugin paints the next process box black, and that box is
   drawn later, covering the arrow's tip - lift the arrow above it. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .hash-process-box::after {
	z-index: 2 !important;
}
/* ...but each column also has an AOS transform = its own stacking context, so
   z-index can't lift the arrow out of it. The arrow's tip reaches ~13px into
   the next column, whose plugin-painted background then covers it. The section
   behind is the same plain colour, so make the columns/boxes transparent. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .our-process-sec :is(.process-row, .process-row > [class*="col-"], .hash-process-box) {
	background: transparent !important;
	background-color: transparent !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#a11y-x):not(.a11y-x) .hash-process-box::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 56'%3e%3cpolygon points='30,0 0,28 30,56' fill='%23fff'/%3e%3c/svg%3e") !important;
	background-size: 100% 100% !important;
	filter: none !important;
}
html body.pojo-a11y-light-background:not(#a11y-x):not(.a11y-x) .hash-process-box::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 56'%3e%3cpolygon points='30,0 0,28 30,56' fill='%23000'/%3e%3c/svg%3e") !important;
	background-size: 100% 100% !important;
	filter: none !important;
}
html body.pojo-a11y-light-background:not(#a11y-x):not(.a11y-x) .integrative-slider .area-col.scientific-col::before {
	filter: brightness(0) !important;
}
/* "scientific / implementation" cards keep their two-card shape (rounded
   corners from the theme + a visible edge) in every contrast mode */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#a11y-x):not(.a11y-x) .integrative-slider .area-col {
	background: #000 !important;
	background-color: #000 !important;
	border: 1px solid #fff !important;
}
html body.pojo-a11y-light-background:not(#a11y-x):not(.a11y-x) .integrative-slider .area-col {
	background: #fff !important;
	background-color: #fff !important;
	border: 1px solid #000 !important;
}
/* FAQ chevron: faq-open.png is a red chevron on an opaque white square, so a
   filter can only turn it into a solid block. Swap in the same 15x8 chevron
   as SVG in the mode's text colour (rotation on open still comes from Bootstrap). */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#a11y-x):not(.a11y-x) .faq-accordion .accordion-button::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='15' height='8' viewBox='0 0 15 8'%3e%3cpath d='M1 1l6.5 6 6.5-6' fill='none' stroke='%23fff' stroke-width='1.8'/%3e%3c/svg%3e") !important;
	filter: none !important;
}
html body.pojo-a11y-light-background:not(#a11y-x):not(.a11y-x) .faq-accordion .accordion-button::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='15' height='8' viewBox='0 0 15 8'%3e%3cpath d='M1 1l6.5 6 6.5-6' fill='none' stroke='%23000' stroke-width='1.8'/%3e%3c/svg%3e") !important;
	filter: none !important;
}

/* --- FAQ header buttons follow the mode --- */
/* one border per question: the theme's .accordion-item border (recoloured),
   no extra border on the button inside it (avoids the "double border") */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#a11y-x):not(.a11y-x) .faq-accordion .accordion-button {
	background: #000 !important; background-color: #000 !important; color: #fff !important;
	border: 0 !important;
}
html body.pojo-a11y-light-background:not(#a11y-x):not(.a11y-x) .faq-accordion .accordion-button {
	background: #fff !important; background-color: #fff !important; color: #000 !important;
	border: 0 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#a11y-x):not(.a11y-x) .faq-accordion .accordion-item {
	border-color: #fff !important;
}
html body.pojo-a11y-light-background:not(#a11y-x):not(.a11y-x) .faq-accordion .accordion-item {
	border-color: #000 !important;
}

/* --- hamburger (Bootstrap draws it as a background SVG, which the plugin wipes) --- */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#a11y-x):not(.a11y-x) .navbar-toggler-icon {
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center center / 100% !important;
}
html body.pojo-a11y-light-background:not(#a11y-x):not(.a11y-x) .navbar-toggler-icon {
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center center / 100% !important;
}

/* --- every button gets a visible border in every contrast mode --- */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#a11y-x):not(.a11y-x) :is(.global-btn, .header-btn, .content-form input[type="submit"], .cc-btn, .popup-close-btn, .call-button, .navbar-toggler, .privacy-close-btn, button:not(.video__play-button):not(.pojo-a11y-toolbar-link):not(.accordion-button)) {
	border: 1px solid #fff !important;
}
html body.pojo-a11y-light-background:not(#a11y-x):not(.a11y-x) :is(.global-btn, .header-btn, .content-form input[type="submit"], .cc-btn, .popup-close-btn, .call-button, .navbar-toggler, .privacy-close-btn, button:not(.video__play-button):not(.pojo-a11y-toolbar-link):not(.accordion-button)) {
	border: 1px solid #000 !important;
}
html body.pojo-a11y-high-contrast:not(#a11y-x):not(.a11y-x) .call-button {
	background: #000 !important; background-color: #000 !important;
}

/* --- disabled slider arrow (first/last slide): the theme only hides its icon,
       so in contrast modes the painted, bordered arrow box was left as an
       empty square. Hide the box too. --- */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale):not(#a11y-x):not(.a11y-x) .slick-slider .slick-arrow.slick-disabled:not(#a11y-x) {
	visibility: hidden !important;
}

/* --- slider dots: the dot <button>s must stay plain (no plugin fill/border,
       which drew them as squares); the dot glyph takes the mode colour,
       active dot solid, others faded. Selector is one step more specific
       than the "every button gets a border" rule above. --- */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .slick-slider .slick-dots li button:not(#a11y-x) {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#a11y-x):not(.a11y-x) .slick-slider .slick-dots li button::before {
	color: #fff !important;
	opacity: .45 !important;
}
html body.pojo-a11y-light-background:not(#a11y-x):not(.a11y-x) .slick-slider .slick-dots li button::before {
	color: #000 !important;
	opacity: .35 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background):not(#a11y-x):not(.a11y-x) .slick-slider .slick-dots li.slick-active button::before {
	opacity: 1 !important;
}

/* --- cookie settings toggles: visible + distinct ON state in every mode --- */
.cc-toggle input:checked + .cc-slider { background: #10b981 !important; }
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#a11y-x):not(.a11y-x) .cc-slider { outline: 1px solid #fff !important; }
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#a11y-x):not(.a11y-x) .cc-toggle input:checked + .cc-slider { background: #fff !important; }
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#a11y-x):not(.a11y-x) .cc-toggle input:checked + .cc-slider::before { background: #000 !important; }
html body.pojo-a11y-light-background:not(#a11y-x):not(.a11y-x) .cc-slider { outline: 1px solid #000 !important; }
html body.pojo-a11y-light-background:not(#a11y-x):not(.a11y-x) .cc-toggle input:checked + .cc-slider { background: #000 !important; }
html body.pojo-a11y-light-background:not(#a11y-x):not(.a11y-x) .cc-toggle input:checked + .cc-slider::before { background: #fff !important; }
html body.pojo-a11y-grayscale .cc-toggle input:checked + .cc-slider { background: #333 !important; }

/* --- checkboxes: native tick drawn inside the box in every mode --- */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale):not(#a11y-x):not(.a11y-x) input[type="checkbox"]:not(.cc-toggle input) {
	-webkit-appearance: checkbox !important;
	appearance: auto !important;
	accent-color: #1eb01a;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#a11y-x):not(.a11y-x) input[type="checkbox"]:not(.cc-toggle input) {
	outline: 1px solid #fff !important;
}


/* -------------------------------------------------------------------------
   Section 8: shared snippet (same block on every medbalance site)
   ------------------------------------------------------------------------- */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) select {
	border: 1px solid #000 !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input::placeholder,
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea::placeholder {
	color: #000;
}

/* Remove the problematic body filter only during grayscale mode */
body.pojo-a11y-grayscale {
	-webkit-filter: none !important;
	filter: none !important;
	overflow-x: hidden !important;
}
/* Reapply grayscale to the document root */
html:has(body.pojo-a11y-grayscale) {
	-webkit-filter: grayscale(100%) !important;
	filter: grayscale(100%) !important;
}
/* Change toolbar positioning only during grayscale mode */
body.pojo-a11y-grayscale #pojo-a11y-toolbar {
	position: fixed !important;
	z-index: 99999 !important;
}

.cc-slider, body.pojo-a11y-high-contrast .cc-slider, body.pojo-a11y-grayscale .cc-slider,
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider,
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider {
	background: #ababff !important;
}
body.pojo-a11y-grayscale .wpcf7-not-valid-tip {
	color: #fff;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-btn {
	border: 1px solid #000 !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider {
	background: gray !important;
}
body.pojo-a11y-high-contrast .cc-slider {
	background: gray !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider {
	background: gray !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg img {
	background: #000 !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg {
	background: transparent !important;
}
body.pojo-a11y-high-contrast .transparent-bg {
	background: transparent !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .transparent-bg {
	background: transparent !important;
}
body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg img {
	background: transparent !important;
}
body.pojo-a11y-high-contrast .transparent-bg img {
	background: transparent !important;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .transparent-bg img {
	background: transparent !important;
}
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before {
	color: #fff;
}
body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"]:checked::before {
	color: #fff;
}

body #cc-floater {
	bottom: unset !important;
	top: 12.5vw !important;
	left: 0.2vw !important;
	right: unset !important;
	width: 2.5vw !important;
	height: 2.5vw !important;
	line-height: 2.5vw;
	text-align: center !important;
	z-index: 999 !important;
}
body #cc-floater svg {
	width: 1.5vw !important;
	height: 1.5vw !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
body #pojo-a11y-toolbar {
	z-index: 9999 !important;
	top: 9vw !important;
}
body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
	font-size: 1.5vw !important;
	padding: 0.6vw !important;
}
body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg {
	width: 1.5vw !important;
}
#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a svg {
	padding-right: 0 !important;
	padding-left: 6px !important;
}

@media (max-width: 767px) {
	body #cc-floater {
		bottom: unset !important;
		top: 60vw !important;
		left: 2px !important;
		width: 7.5vw !important;
		height: 7.5vw !important;
		line-height: 7.5vw;
		padding: 4.5vw !important;
	}
	body #cc-floater svg {
		width: 5vw !important;
		height: 5vw !important;
	}
	body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
		font-size: 5.5vw !important;
		padding: 2vw !important;
	}
	body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg {
		width: 5.8vw !important;
	}
	body #pojo-a11y-toolbar {
		top: 48vw !important;
	}

	/* cookie banner centred on mobile (banner is cc-pos-left on these sites) */
	.cc-banner {
		padding: 16px !important;
	}
	.cc-root.cc-pos-right,
	.cc-root.cc-pos-left {
		left: 50% !important;
		right: unset !important;
		bottom: 10px !important;
		width: 95%;
		transform: translateX(-50%);
	}
	.cc-root.cc-pos-right .cc-banner.cc-box,
	.cc-root.cc-pos-left .cc-banner.cc-box {
		max-width: none;
	}
	.cc-btn {
		padding: 7px 9px !important;
	}
}

/* no sideways scrolling (all views). With <html dir="rtl"> anything that pokes
   past the LEFT edge of the screen becomes scrollable (in the theme's original
   LTR page it was simply unreachable) - e.g. the "imagine" circles overhang by
   1-46px depending on site and width. Clip that off-screen overhang; nothing
   visible changes, vertical scrolling / sticky header are unaffected. */
.main-wrapper,
body > .privacy-content,
footer {
	overflow-x: clip;
}

/* mobile menu (all views): theme opens it at a fixed top:90px from the navbar,
   but the navbar starts 10px into the header (header padding), leaving a strip
   of page visible between header and menu. Sit it flush under the header. */
@media (max-width: 767px) {
	header .navbar .navbar-collapse {
		top: calc(100% + 10px);
	}
}


/* -------------------------------------------------------------------------
   Section 9: <html dir="rtl"> neutraliser.
   slick.css floats slides right under any [dir="rtl"] ancestor, and
   slick-theme.css swaps the prev/next arrows. These sliders already run with
   rtl:true from JS, so restore their original geometry exactly (slick-theme
   base values, plus the theme's own mobile values from responsive.css).
   Measured on all 5 sites: 0 px diff.
   ------------------------------------------------------------------------- */
html[dir="rtl"] .slick-slider:not([dir]) .slick-slide { float: left; }
html[dir="rtl"] .slick-slider:not([dir]) .slick-prev { left: -25px; right: auto; }
html[dir="rtl"] .slick-slider:not([dir]) .slick-next { right: -25px; left: auto; }
@media (max-width: 767px) {
	html[dir="rtl"] .patient-recommend-slider:not([dir]) .slick-prev { left: 0; right: auto; }
	html[dir="rtl"] .patient-recommend-slider:not([dir]) .slick-next { right: 0; left: auto; }
}