.ac-settings-trigger { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0; border: 1px solid #0284c7; border-radius: 50%; padding: 0; background: #0284c7; color: #fff; cursor: pointer; box-shadow: 0 4px 14px #0a254026; }
.ac-settings-trigger:hover { background: #0369a1; }
.ac-settings-trigger:hover { text-decoration: underline; text-underline-offset: 4px; }
.ac-access-floating { position: fixed; right: 18px; bottom: 18px; z-index: 1000; }
.ac-access-floating[hidden] { display: none !important; }
.ac-access-floating .af-access-label { display: none; }
/* Enlarged text must reflow instead of overlapping fixed-height containers. */
html.ac-text-scaled body :is(main,.af-footer) :is(h1,h2,h3,h4,h5,h6,p,li,a,label,td,th,button) { overflow-wrap: anywhere; }
html.ac-text-scaled .nc-header .nc-topbar__inner { flex-wrap: wrap; height: auto !important; gap: 8px 20px; }
html.ac-text-scaled .nc-header .nc-topbar__text { white-space: normal; flex-wrap: wrap; }
html.ac-text-scaled .nc-header .nc-topbar__actions { flex-wrap: wrap; }
html.ac-text-scaled .ac-corporate-pages-nav .acto-subnav__list a { height: auto !important; min-height: 46px !important; white-space: normal !important; }
html.ac-text-scaled body :is(.product-card__body,.ac-product__content) p { display: block !important; -webkit-line-clamp: unset !important; max-height: none !important; }
html.ac-text-scaled .af-footer__bottom-grid { flex-wrap: wrap; }
html.ac-text-scaled .af-access-label { max-width: 280px; }
@media(min-width:901px) {
    /* Keep the navigation on the logo row: shrink and scroll it instead of dropping to a second row. */
    .nc-header.ac-header-overflow .nc-navbar__inner { grid-template-columns: auto minmax(0, 1fr) auto !important; }
    .nc-header.ac-header-overflow .nc-brand { grid-column: 1; grid-row: 1; }
    .nc-header.ac-header-overflow .nc-tools { grid-column: 3 !important; grid-row: 1; }
    .nc-header.ac-header-overflow .nc-menu { display: flex !important; grid-column: 2; grid-row: 1; min-width: 0; width: auto; padding: 0; border-top: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .nc-header.ac-header-overflow .nc-menu::-webkit-scrollbar { display: none; }
    .nc-header.ac-header-overflow .nc-menu > ul { display: flex; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 2px !important; width: auto; }
    .nc-header.ac-header-overflow .nc-menu > ul > li > a { white-space: nowrap !important; height: auto !important; padding-inline: 6px !important; }
    .nc-header.ac-header-overflow .nc-burger { display: none !important; }
}
html.ac-text-scaled body main :is(.acto-carousel__text,.acto-hero__title,.rh-hero h1,.rh-hero h2) { font-size: clamp(26px,5vw,64px) !important; line-height: 1.2 !important; overflow-wrap: anywhere; }
html.ac-access-simple-font body :is(h1,h2,h3,h4,h5,h6,p,a,li,span,strong,small,button,input,textarea,select,label,td,th) { font-family: Arial,Tahoma,sans-serif !important; letter-spacing: normal !important; }
.ac-settings-trigger:focus-visible { outline: 3px solid #0284c7; outline-offset: 4px; }
html.ac-readable #content :is(p, li, dd, dt, td, th, blockquote, figcaption),
html.ac-readable .acto-pd__panels :is(p, li, dd, dt, td, th, blockquote, figcaption) {
    font-size: 19px !important;
    line-height: 1.95 !important;
    letter-spacing: .018em !important;
    word-spacing: .05em !important;
}
html.ac-readable #content :is(p, li, dd, dt, blockquote, figcaption) :is(span, a, strong, em, small, b, i) {
    font-size: inherit !important;
    line-height: inherit !important;
}
html.ac-readable #content p + p { margin-top: 1.1em !important; }
html.ac-readable #content a,
html.ac-readable .acto-pd__panels a {
    text-decoration: underline !important;
    text-decoration-thickness: 1.5px !important;
    text-underline-offset: 3px !important;
}
html[lang^="fa"].ac-readable #content :is(p, li, dd, dt, td, th, blockquote, figcaption) {
    letter-spacing: normal !important;
    word-spacing: normal !important;
}
@media (forced-colors: active) { .ac-settings__option input { appearance: auto; } }
html.ac-access-large-text body :is(p, li, td, th, dd, dt, label, input, textarea, select),html.ac-access-large-text body a:not(:has(img)):not(:has(svg)) { font-size: max(1.125rem, 18px) !important; }
html.ac-access-spacing body :is(p, li, td, th, dd, dt) { line-height: 2 !important; }
html.ac-access-links body a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px; }
html.ac-access-links body a:focus-visible { outline: 3px solid #0284c7 !important; outline-offset: 4px; }
html.ac-access-motion *,html.ac-access-motion *::before,html.ac-access-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.ac-access-motion { scroll-behavior: auto !important; }
html.ac-access-contrast body,html.ac-access-contrast body :is(header, footer, main, section, article, nav, aside, div, p, li, h1, h2, h3, h4, h5, h6, span, a, button, input, textarea, select, label, td, th, dialog):not(:where(.acto-carousel, .acto-carousel *, .acto-hero, .acto-hero *, .acto-pd__main, .acto-pd__main *, .acto-pd__lightbox, .acto-pd__lightbox *)) { background-color: #fff !important; background-image: none !important; color: #000 !important; border-color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
html.ac-access-contrast :is(.acto-carousel, .acto-hero) :is(h1, h2, h3, p, a, button) { background: #fff !important; color: #000 !important; text-shadow: none !important; }
html.ac-access-contrast :is(.acto-carousel__dot, .acto-hero__dot) { background: #fff !important; border: 2px solid #000 !important; }
html.ac-access-contrast :is(.acto-carousel__dot, .acto-hero__dot).is-active { background: #000 !important; border-color: #fff !important; }
html.ac-access-contrast body a { color: #003b80 !important; text-decoration: underline !important; }

/* Apply reading controls to nested text as well as its outer paragraph. */
html.ac-readable body :is(main, .acto-pd__panels) :is(p, li, td, th, dd, dt),
html.ac-access-large-text body :is(main, .acto-pd__panels) :is(p, li, td, th, dd, dt) { font-size: 20px !important; line-height: 1.85 !important; }
html:is(.ac-readable, .ac-access-large-text) body :is(main, .acto-pd__panels) :is(p, li, td, th, dd, dt) :is(span, a, strong, em, small) { font-size: inherit !important; line-height: inherit !important; }
html.ac-access-spacing body :is(main, .acto-pd__panels) :is(p, li, td, th, dd, dt),
html.ac-access-spacing body :is(main, .acto-pd__panels) :is(p, li, td, th, dd, dt) :is(span, a, strong, em, small) { line-height: 2.1 !important; }
html.ac-readable body main :is(p, li) a { text-decoration: underline !important; text-underline-offset: 4px; }

/* Dark surfaces preserve product photography and carousel backgrounds. */
html.ac-access-dark {
    color-scheme: dark;
    --ac-dark-bg: #101e2e;
    --ac-dark-deep: #0c1726;
    --ac-dark-surface: #142438;
    --ac-dark-card: #192c40;
    --ac-dark-control: #20364c;
    --ac-dark-btn: #203b54;
    --ac-dark-tile: #1e3a55;
    --ac-dark-tile-2: #1b3750;
    --ac-dark-active: #0d3a52;
    --ac-dark-hover: #1c3650;
    --ac-dark-hover-2: #27455f;
    --ac-dark-border: #34495f;
    --ac-dark-border-2: #3a526a;
    --ac-dark-line: #526b82;
    --ac-dark-text: #e6edf5;
    --ac-dark-muted: #b5c5d5;
    --ac-dark-link: #85d8ff;
    --acto-ink: var(--ac-dark-text);
    --acto-muted: var(--ac-dark-muted);
    --md-on-surface: var(--ac-dark-text);
    --md-on-surface-medium: var(--ac-dark-muted);
    --md-surface: var(--ac-dark-surface);
    --md-background: var(--ac-dark-deep);
    --acto-line: var(--ac-dark-border);
}
/* "Very dark" variant: the same structure with deeper surfaces, so depth and borders stay visible. */
html.ac-access-dark.ac-access-darker {
    --ac-dark-bg: #05090f;
    --ac-dark-deep: #03060a;
    --ac-dark-surface: #0b1219;
    --ac-dark-card: #101922;
    --ac-dark-control: #16212c;
    --ac-dark-btn: #15222e;
    --ac-dark-tile: #17242f;
    --ac-dark-tile-2: #14202b;
    --ac-dark-active: #0a2b3d;
    --ac-dark-hover: #121e29;
    --ac-dark-hover-2: #1a2b38;
    --ac-dark-border: #26343f;
    --ac-dark-border-2: #2d3b46;
    --ac-dark-line: #3d505e;
    --ac-dark-text: #eaf2f8;
    --ac-dark-muted: #b9c8d4;
    --ac-dark-link: #8fd9ff;
    --ac-scroll-thumb-a: #7dd3fc;
    --ac-scroll-thumb-b: #0284c7;
    --ac-scroll-thumb-hover-a: #bae6fd;
    --ac-scroll-thumb-hover-b: #38bdf8;
}
html.ac-access-dark body,
html.ac-access-dark body :is(header, footer, main, section, article, nav, aside, dialog, div):not(:where(.acto-carousel *, .acto-carousel, .acto-hero *, .acto-hero, .acto-pd__main *, .acto-pd__main, .acto-pd__track, .acto-pd__slide, .acto-pd__lightbox, .acto-pd__lightbox *)) { background-color: var(--ac-dark-bg) !important; color: var(--ac-dark-text) !important; border-color: var(--ac-dark-border) !important; }
html.ac-access-dark body :is(p, h1, h2, h3, h4, h5, h6, li, label, span, strong, small, td, th) { color: var(--ac-dark-text) !important; }
html.ac-access-dark body :is(a, button, input, textarea, select) { color: var(--ac-dark-text) !important; border-color: var(--ac-dark-line) !important; }
html.ac-access-dark body :is(button, input, textarea, select) { background-color: var(--ac-dark-control) !important; }
html.ac-access-dark body a { color: var(--ac-dark-link) !important; }
html.ac-access-dark .nc-brand::before { background: var(--ac-dark-bg) !important; }
html.ac-access-dark .ac-product__visual,html.ac-access-dark .acto-pd__main { background: #fff !important; }

/* Nested layout wrappers must not become separate opaque rectangles. */
html.ac-access-dark:not(.ac-access-contrast) body div:not(:where(.acto-carousel, .acto-carousel *, .acto-hero, .acto-hero *, .acto-pd__main, .acto-pd__main *, .acto-pd__lightbox, .acto-pd__lightbox *)) { background: transparent !important; }
html.ac-access-dark:not(.ac-access-contrast) body :is(.nc-navbar, .nc-topbar, .nc-sheet, .nc-mega, .nc-sites__menu, .nc-lang__menu, .nc-search__panel, .nc-search__results, .ac-language-dialog) { background: var(--ac-dark-bg) !important; }
html.ac-access-dark:not(.ac-access-contrast) body :is(.acto-cat-card, .ac-product, .product-card, .ac-usage-card, .ac-usage-product, .acto-news-card, .blog-card, .acto-ua-faq-item) { background: var(--ac-dark-card) !important; border-color: var(--ac-dark-border-2) !important; color: var(--ac-dark-text) !important; }
html.ac-access-dark:not(.ac-access-contrast) body :is(.acto-cat-card, .ac-product, .product-card) :is(h2, h3, p, span, strong, a) { color: var(--ac-dark-text) !important; background-color: transparent !important; }
html.ac-access-dark:not(.ac-access-contrast) body :is(a[class*="btn"], button, .acto-cat-card__icon, .acto-cat-card__badge) { background: var(--ac-dark-btn) !important; color: #fff !important; border-color: var(--ac-dark-line) !important; }
html.ac-access-dark:not(.ac-access-contrast) body a[class*="btn"] :is(span, strong, small) { color: inherit !important; background: transparent !important; }
html.ac-access-dark body :is(.nc-topbar__cut, .nc-topbar__cut2) { display: none !important; }
html.ac-access-dark:not(.ac-access-contrast) body :is(.ac-product__visual, .product-card__media) { background: #fff !important; }
html.ac-access-dark:not(.ac-access-contrast) body .nc-header .nc-brand::before { background: var(--ac-dark-bg) !important; }
html.ac-access-dark:not(.ac-access-contrast) body .acto-categories__all-link { background: var(--ac-dark-btn) !important; color: #fff !important; border-color: var(--ac-dark-line) !important; }
html.ac-access-dark:not(.ac-access-contrast) body .acto-categories__all-link :is(span, strong) { color: inherit !important; }

/* Dark mode completeness: lists, tables, panels and form fields carry their own light
   backgrounds with high specificity, which left light text on white boxes.
   Add [data-ac-dark-keep] to any element that must keep its own surface in dark mode. */
html.ac-access-dark:not(.ac-access-contrast) #content :is(section, article, aside, nav, header, footer, ul, ol, li, dl, dt, dd, form, fieldset, figure, figcaption, table, thead, tbody, tfoot, tr, td, th, caption, blockquote, details, summary, address):not(:where(.acto-carousel, .acto-carousel *, .acto-hero, .acto-hero *, .acto-pd__main, .acto-pd__main *, .acto-pd__lightbox, .acto-pd__lightbox *, .acto-pd__track, .acto-pd__track *, .acto-pd__slide, .acto-pd__slide *, .ac-product__visual, .ac-product__visual *, .product-card__media, .product-card__media *)):not([data-ac-dark-keep]) {
    background-color: var(--ac-dark-surface) !important;
    color: var(--ac-dark-text) !important;
    border-color: var(--ac-dark-border) !important;
}
html.ac-access-dark:not(.ac-access-contrast) body :is(.acto-products, .acto-products__bottom, .acto-products__tabs, .ac-corporate-content, .acto-subnav, .acto-subnav__toggle, .acto-subnav__list, .acto-tabpanel, .acto-form, .acto-contactpage__form, .acto-contactpage__info, .acto-faq, .acto-faq__item, .acto-blog, .blog-card, .blog-featured, .acto-about, .acto-mission, .acto-showcase, .acto-cta, .acto-video, .acto-news, .acto-news__card, .acto-brands, .acto-clients, .acto-sectors, .acto-why, .acto-why__card, .acto-testimonials, .acto-testimonial, .acto-promo, .acto-article, .acto-author, .acto-related__card, .acto-side__block, .acto-cat-card, .ac-usage-card, .ac-usage-product, .acto-ua__card, .acto-ua__product-card, .acto-ua__step-card, .acto-ua-faq-item, .acto-ua__stat, .pdt-card, .pdt-doc, .pdt-feature, .pdt-highlight, .pdt-mini__item, .pdt-store, .pdt-specs li, .acto-pd-buy__card, .acto-pd__chip, .acto-pd-featurelist li, .ac-product__action, .ac-catalog-toolbar, .ac-brand-filter, .ac-brand-filter summary, .ac-brand-filter__panel, .ac-brand-filter__options label, .ac-filter-chip, .ac-filter-search, .acto-sectors__row a, .acto-side__cats a, .acto-brands__item, .rh-products .rh-products__filter-toggle, .rh-products .rh-products__filters, .rh-products .rh-products__filters button, .rh-products__card, .rh-categories__card, .rh-categories__action, .rh-areas .rh-areas__detail a):not([data-ac-dark-keep]) {
    background-color: var(--ac-dark-surface) !important;
    color: var(--ac-dark-text) !important;
    border-color: var(--ac-dark-border) !important;
}
html.ac-access-dark:not(.ac-access-contrast) body :is(.rh-categories__icon, .rh-areas__illustration):not([data-ac-dark-keep]) {
    background-color: var(--ac-dark-tile-2) !important;
    color: var(--ac-dark-link) !important;
}
/* Product packshots blend into a light plate in the light design; on a dark card that
   multiply blend turns them black, so keep their photo plate white. */
html.ac-access-dark:not(.ac-access-contrast) body :is(.rh-products__media, .rh-hero__visual) {
    background-color: #fff !important;
}
html.ac-access-dark:not(.ac-access-contrast) body .rh-hero__visual img {
    mix-blend-mode: normal !important;
}
/* Quick-link docks (product tabs, corporate/usage menus): the pills keep a light fill
   in the light theme, which leaves their light labels unreadable in dark mode. */
html.ac-access-dark:not(.ac-access-contrast) body .acto-subnav,
html.ac-access-dark:not(.ac-access-contrast) body .acto-subnav--product {
    background-color: var(--ac-dark-surface) !important;
    border-color: var(--ac-dark-border) !important;
}
html.ac-access-dark:not(.ac-access-contrast) body .acto-subnav__list a {
    background-color: var(--ac-dark-tile) !important;
    background-image: none !important;
    color: var(--ac-dark-text) !important;
    border-color: transparent !important;
}
html.ac-access-dark:not(.ac-access-contrast) body .acto-subnav__list a:hover {
    background-color: var(--ac-dark-hover-2) !important;
    color: var(--ac-dark-link) !important;
}
html.ac-access-dark:not(.ac-access-contrast) body .acto-subnav__list a:is(.is-active, [aria-current]) {
    background-color: #0284c7 !important;
    background-image: none !important;
    color: #fff !important;
}
html.ac-access-dark:not(.ac-access-contrast) body .acto-subnav__list a:is(.is-active, [aria-current]) svg {
    stroke: #fff !important;
}
html.ac-access-dark:not(.ac-access-contrast) #content :is(p, h1, h2, h3, h4, h5, h6, span, strong, em, b, i, small, label, li, dt, dd, td, th, figcaption, blockquote, time, address, summary, legend, caption):not([data-ac-dark-keep]) {
    color: var(--ac-dark-text) !important;
}
html.ac-access-dark:not(.ac-access-contrast) #content :is(input, textarea, select):not([data-ac-dark-keep]) {
    background-color: var(--ac-dark-control) !important;
    color: var(--ac-dark-text) !important;
    border-color: var(--ac-dark-line) !important;
}
html.ac-access-dark:not(.ac-access-contrast) #content .ac-brand-filter__options label:has(:checked) {
    background-color: var(--ac-dark-active) !important;
    border-color: #0284c7 !important;
}
html.ac-access-dark:not(.ac-access-contrast) #content a:not(:where(.acto-subnav__list a)):not([data-ac-dark-keep]) { color: var(--ac-dark-link) !important; }
html.ac-access-dark:not(.ac-access-contrast) #content :is(a[class*="btn"], button, .ac-product__action a, .acto-products__tab, .ac-filter-chip, .acto-subnav__list a.is-active):not([data-ac-dark-keep]) { color: #fff !important; }
/* Light gradients would keep their pale fill behind the new dark text colours. */
html.ac-access-dark:not(.ac-access-contrast) #content :is(.acto-sectors, .pdt-ing, .acto-ua__protocol) { background-image: none !important; }
/* Header overlays live outside #content. */
html.ac-access-dark:not(.ac-access-contrast) body :is(.nc-menu, .nc-menu.is-open, .nc-sheet, .nc-sheet__nav, .nc-sheet__lang-list, .nc-mega, .nc-mega__cats, .nc-mega__panel, .nc-sites__menu, .nc-lang__menu, .nc-search__panel, .nc-search__shell):not([data-ac-dark-keep]) {
    background-color: var(--ac-dark-bg) !important;
    color: var(--ac-dark-text) !important;
    border-color: var(--ac-dark-border) !important;
}
/* Language picker: Apple-style drawer. */
html.ac-access-dark:not(.ac-access-contrast) body .ac-language-dialog {
    background-color: rgba(28, 28, 30, 0.86) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--ac-dark-text) !important;
    box-shadow: 0 40px 90px -28px rgba(0, 0, 0, 0.75) !important;
}
html.ac-access-dark:not(.ac-access-contrast) body .ac-language-dialog__head { border-color: transparent !important; }
html.ac-access-dark:not(.ac-access-contrast) body .ac-language-dialog__close {
    background-color: rgba(120, 120, 128, 0.32) !important;
    border-color: transparent !important;
    color: var(--ac-dark-text) !important;
}
html.ac-access-dark:not(.ac-access-contrast) body .ac-language-grid {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html.ac-access-dark:not(.ac-access-contrast) body .ac-language-grid a {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--ac-dark-text) !important;
}
html.ac-access-dark:not(.ac-access-contrast) body .ac-language-grid a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
html.ac-access-dark:not(.ac-access-contrast) body .ac-language-grid a.is-active {
    background-color: rgba(10, 132, 255, 0.14) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
}
html.ac-access-dark:not(.ac-access-contrast) body :is(.nc-sheet__lang-item, .nc-sheet__contact-item, .nc-sheet__socials a, .nc-sheet__close) {
    background-color: var(--ac-dark-surface) !important;
    border-color: var(--ac-dark-border) !important;
    color: var(--ac-dark-text) !important;
}
html.ac-access-dark:not(.ac-access-contrast) body .nc-sheet__lang-item.is-active {
    background-color: var(--ac-dark-active) !important;
    border-color: #0284c7 !important;
    color: #fff !important;
}
/* Document tiles: the light icon plate turns dark while the document icon stays visible. */
html.ac-access-dark:not(.ac-access-contrast) #content .pdt-doc__ico:not([data-ac-dark-keep]) {
    background-color: var(--ac-dark-tile) !important;
    color: var(--ac-dark-link) !important;
}
/* The logo artwork includes a dark-blue tagline below the white plate. A light backing
   keeps that text legible on the dark header and footer. */
html.ac-access-dark .nc-logo,
html.ac-access-dark .nc-sheet__brand-img,
html.ac-access-dark .af-brand__img {
    background-color: #fff !important;
    border-radius: 10px;
}
/* Very dark mode: align the overlays that carry their own dark palette. */
html.ac-access-dark.ac-access-darker body .nc-mega__item,
html.ac-access-dark.ac-access-darker body .nc-mega__cat,
html.ac-access-dark.ac-access-darker body .nc-mega__panel {
    background-color: var(--ac-dark-surface) !important;
    border-color: var(--ac-dark-border) !important;
}
html.ac-access-dark.ac-access-darker body .nc-search__panel .nc-search__item,
html.ac-access-dark.ac-access-darker body .nc-search__panel .nc-search__top,
html.ac-access-dark.ac-access-darker body .nc-search__panel .nc-search__item-media {
    background-color: var(--ac-dark-surface) !important;
    border-color: var(--ac-dark-border) !important;
}
html.ac-access-dark.ac-access-darker body .nc-search__panel .nc-search__input,
html.ac-access-dark.ac-access-darker body .nc-search__panel .nc-search__scroll {
    background-color: var(--ac-dark-bg) !important;
}

/* High contrast has priority when both visual modes are enabled. */
html.ac-access-contrast.ac-access-dark body,
html.ac-access-contrast.ac-access-dark body :is(header, footer, main, section, article, nav, aside, div, p, li, h1, h2, h3, h4, h5, h6, span, a, button, input, textarea, select, label, td, th, dialog):not(:where(.acto-carousel, .acto-carousel *, .acto-hero, .acto-hero *, .acto-pd__main, .acto-pd__main *, .acto-pd__lightbox, .acto-pd__lightbox *)) { background-color: #000 !important; color: #fff !important; border-color: #fff !important; }
html.ac-access-contrast.ac-access-dark body a { color: #ffed70 !important; }
/* Gentle motion on the accessibility symbol; the button and label stay fixed. */
.ac-settings-trigger>svg{transform-origin:50% 55%;animation:ac-access-greet 5.5s ease-in-out infinite}
@keyframes ac-access-greet{0%,62%,100%{transform:translateY(0) rotate(0)}70%{transform:translateY(-2px) rotate(-9deg)}78%{transform:translateY(-2px) rotate(9deg)}86%{transform:translateY(-1px) rotate(-5deg)}94%{transform:translateY(0) rotate(0)}}
.ac-settings-trigger:hover>svg,.ac-settings-trigger:focus-visible>svg,.ac-settings-trigger[aria-expanded=true]>svg{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ac-settings-trigger>svg{animation:none!important;transform:none!important}}
html.ac-access-motion .ac-settings-trigger>svg{animation:none!important;transform:none!important}

/* Letter spacing: text only, and never for connected Arabic script. */
html.ac-access-letter body :is(#content, main, .af-footer, .acto-pd__panels) :is(p, li, td, th, dd, dt, blockquote, figcaption) { letter-spacing: .08em !important; }
html.ac-access-letter body :is(#content, main, .af-footer, .acto-pd__panels) :is(h1, h2, h3, h4, h5, h6) { letter-spacing: .05em !important; }
html[lang^="fa"].ac-access-letter body :is(#content, main, .af-footer, .acto-pd__panels) :is(p, li, td, th, dd, dt, blockquote, figcaption, h1, h2, h3, h4, h5, h6) { letter-spacing: normal !important; }

/* Underline every heading so the document outline is easy to follow. */
html.ac-access-headings body :is(h1, h2, h3, h4, h5, h6) { text-decoration: underline !important; text-decoration-color: #0284c7 !important; text-decoration-thickness: 3px !important; text-underline-offset: .22em !important; }
html.ac-access-dark.ac-access-headings body :is(h1, h2, h3, h4, h5, h6) { text-decoration-color: var(--ac-dark-link) !important; }
html.ac-access-contrast.ac-access-headings body :is(h1, h2, h3, h4, h5, h6) { text-decoration-color: currentColor !important; }

/* Larger click areas for the controls people actually tap. */
html.ac-access-targets body :is(button, [role="button"], summary, input[type="submit"], input[type="button"], input[type="reset"], .ac-settings-trigger, a[class*="btn"]) { min-width: 48px !important; min-height: 48px !important; }
html.ac-access-targets body :is(.nc-menu > ul > li > a, .nc-tools a, .af-footer__legal a, .af-privacy, .af-list--social a) { display: inline-flex; align-items: center; min-height: 48px !important; }

/* A thicker, high-contrast keyboard focus ring. */
html.ac-access-focus body :focus-visible { outline: 4px solid #0284c7 !important; outline-offset: 3px !important; }
html.ac-access-focus body :focus-visible { box-shadow: 0 0 0 8px #ffffffb3 !important; }
html.ac-access-dark.ac-access-focus body :focus-visible { outline-color: var(--ac-dark-link) !important; box-shadow: 0 0 0 8px #101e2eb3 !important; }
html.ac-access-contrast.ac-access-focus body :focus-visible { outline-color: #000 !important; box-shadow: 0 0 0 8px #fff !important; }
html.ac-access-contrast.ac-access-dark.ac-access-focus body :focus-visible { outline-color: #fff !important; box-shadow: 0 0 0 8px #000 !important; }

/* Grayscale keeps shapes readable without colour reliance. */
html.ac-access-grayscale body :is(img, picture, video, iframe, canvas, svg) { filter: grayscale(1) !important; }

/* Dashed frames expose the page's section boundaries. */
html.ac-access-outline #content,
html.ac-access-outline #content :is(section, article, .acto-page-hero, .ac-corporate-content, .acto-products, .rh-hero, .rh-categories, .rh-products, .rh-areas, .rh-guide, .acto-about, .acto-mission, .acto-why, .acto-news, .acto-faq, .acto-brands, .acto-clients, .acto-sectors, .acto-testimonials, .acto-cta, .acto-video, .acto-blog, .acto-article, .acto-contactpage, .acto-pd__panels),
html.ac-access-outline .af-footer { outline: 3px dashed #0284c7 !important; outline-offset: -4px !important; }
html.ac-access-dark.ac-access-outline #content,
html.ac-access-dark.ac-access-outline #content :is(section, article, .acto-page-hero, .ac-corporate-content, .acto-products, .rh-hero, .rh-categories, .rh-products, .rh-areas, .rh-guide, .acto-about, .acto-mission, .acto-why, .acto-news, .acto-faq, .acto-brands, .acto-clients, .acto-sectors, .acto-testimonials, .acto-cta, .acto-video, .acto-blog, .acto-article, .acto-contactpage, .acto-pd__panels),
html.ac-access-dark.ac-access-outline .af-footer { outline-color: var(--ac-dark-link) !important; }
html.ac-access-contrast.ac-access-outline #content,
html.ac-access-contrast.ac-access-outline #content :is(section, article, .acto-page-hero, .ac-corporate-content, .acto-products, .rh-hero, .rh-categories, .rh-products, .rh-areas, .rh-guide, .acto-about, .acto-mission, .acto-why, .acto-news, .acto-faq, .acto-brands, .acto-clients, .acto-sectors, .acto-testimonials, .acto-cta, .acto-video, .acto-blog, .acto-article, .acto-contactpage, .acto-pd__panels),
html.ac-access-contrast.ac-access-outline .af-footer { outline-color: #000 !important; }
html.ac-access-contrast.ac-access-dark.ac-access-outline #content,
html.ac-access-contrast.ac-access-dark.ac-access-outline #content :is(section, article, .acto-page-hero, .ac-corporate-content, .acto-products, .rh-hero, .rh-categories, .rh-products, .rh-areas, .rh-guide, .acto-about, .acto-mission, .acto-why, .acto-news, .acto-faq, .acto-brands, .acto-clients, .acto-sectors, .acto-testimonials, .acto-cta, .acto-video, .acto-blog, .acto-article, .acto-contactpage, .acto-pd__panels),
html.ac-access-contrast.ac-access-dark.ac-access-outline .af-footer { outline-color: #fff !important; }

/* A large custom pointer: arrow for the page, target for interactive elements. */
html.ac-access-cursor,
html.ac-access-cursor body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M8.25 4.13L26.81 20.35L18.84 21.86L23.93 31.9L19.25 33.96L14.03 23.65L8.25 30.11Z' fill='%230284c7' stroke='%23fff' stroke-width='2.3' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important; }
html.ac-access-cursor body :is(input, textarea) { cursor: text !important; }
html.ac-access-cursor body :is(a, button, summary, label, select, [role="button"], [class*="card"], input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="reset"], input[type="button"], .ac-settings__option) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='15' fill='%230284c7' fill-opacity='.22' stroke='%230284c7' stroke-width='3.5'/%3E%3Ccircle cx='22' cy='22' r='3.5' fill='%230284c7'/%3E%3C/svg%3E") 22 22, pointer !important; }

/* Reading guide line that follows the pointer. */
.ac-reading-guide { position: fixed; top: 0; left: 0; z-index: 2147483000; display: block; width: 100%; height: 3px; border-radius: 3px; background: #0284c7; box-shadow: 0 0 0 1px #fff, 0 8px 20px #0284c74d; opacity: 0; pointer-events: none; will-change: transform; }
.ac-reading-guide.is-visible { opacity: 1; }
html.ac-access-dark .ac-reading-guide { background: var(--ac-dark-link) !important; box-shadow: 0 0 0 1px var(--ac-dark-bg), 0 8px 20px #00000080 !important; }
html.ac-access-contrast .ac-reading-guide { background: #000 !important; box-shadow: 0 0 0 2px #fff !important; }
html.ac-access-contrast.ac-access-dark .ac-reading-guide { background: #fff !important; box-shadow: 0 0 0 2px #000 !important; }

@media print { .ac-reading-guide { display: none !important; } }

/* The scrollbar follows the selected visual mode. */
html.ac-access-dark {
    --ac-scroll-thumb-a: #7dd3fc;
    --ac-scroll-thumb-b: #0284c7;
    --ac-scroll-thumb-hover-a: #bae6fd;
    --ac-scroll-thumb-hover-b: #38bdf8;
}
html.ac-access-contrast {
    --ac-scroll-track: #fff;
    --ac-scroll-thumb-a: #000;
    --ac-scroll-thumb-b: #000;
    --ac-scroll-thumb-hover-a: #000;
    --ac-scroll-thumb-hover-b: #000;
}
html.ac-access-contrast.ac-access-dark {
    --ac-scroll-track: #000;
    --ac-scroll-thumb-a: #fff;
    --ac-scroll-thumb-b: #fff;
    --ac-scroll-thumb-hover-a: #fff;
    --ac-scroll-thumb-hover-b: #fff;
}

/* Manual right-to-left mode from the accessibility panel. */
html.ac-access-rtl { direction: rtl; }
html.ac-access-rtl body { direction: rtl; text-align: right; }
html.ac-access-rtl .ac-access-floating { right: auto; left: 18px; }
html.ac-access-rtl .ac-font-size__controls,
html.ac-access-rtl .af-browser-icons,
html.ac-access-rtl .ac-settings__option input { direction: ltr; }
html.ac-access-rtl .skip-link:focus { left: auto; right: 12px; }
html.ac-access-rtl .ac-product__action svg,
html.ac-access-rtl .acto-cat-card__footer svg,
html.ac-access-rtl .rh-categories__action b,
html.ac-access-rtl .acto-subnav__list a > svg:last-child { transform: scaleX(-1); }
html.ac-access-rtl .nc-logo,
html.ac-access-rtl .nc-brand { direction: ltr; }
html.ac-access-rtl :is(.acto-carousel, .acto-pd__track, .acto-pd__main, .acto-pd__thumbs, .actorein-table-scroll, .af-browser-icons) { direction: ltr; }
html.ac-access-rtl :is(input[type="tel"], input[type="email"], input[type="url"], input[type="number"], input[type="password"]) { direction: ltr; text-align: left; }

/* Device preview: the current page rendered inside a phone/tablet sized frame. */
.ac-preview { position: fixed; inset: 0; z-index: 2147483002; display: flex; flex-direction: column; background: #0b1a28; }
.ac-preview__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #0a2540; color: #fff; border-bottom: 1px solid #1d3b55; }
.ac-preview__devices { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: calc(100% - 48px); padding: 4px; border: 1px solid #ffffff26; border-radius: 999px; background: #ffffff10; overflow-x: auto; scrollbar-width: none; }
.ac-preview__devices::-webkit-scrollbar { display: none; }
.ac-preview__device { padding: 7px 12px; border: 0; border-radius: 999px; background: transparent; color: #cfe2f0; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.ac-preview__device:hover { background: #ffffff1f; color: #fff; }
.ac-preview__device.is-active { background: #0284c7; color: #fff; }
.ac-preview__back { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 8px 14px; border: 1px solid #ffffff38; border-radius: 999px; background: #ffffff14; color: #fff; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color .18s ease, border-color .18s ease; }
.ac-preview__back:hover { background: #ffffff26; border-color: #ffffff66; }
.ac-preview__stage { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 16px; background: #0f2233; overflow: auto; }
.ac-preview__frame { width: 390px; max-width: 100%; height: 100%; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 24px 60px #00000066; }
.ac-preview--tablet .ac-preview__frame { width: 820px; }
html.ac-previewing,
html.ac-previewing body { overflow: hidden !important; }
@media (max-width: 520px) { .ac-preview__stage { padding: 8px; } .ac-preview__bar { padding: 8px 12px; } .ac-preview__device { padding: 6px 9px; font-size: 11px; } }

/* ============================================================
   Accessibility settings — macOS-style settings window
   A centred, rounded window with a translucent-looking sidebar,
   iOS switches, grouped rows and a live pane that swaps in place.
   The dialog is only the full-window stage; the visible frame is
   .ac-settings__window so backdrop clicks can close it.
   ============================================================ */
#ac-settings {
    --as-window: #ffffff;
    --as-sidebar: #f2f2f4;
    --as-content: #ffffff;
    --as-card: #ffffff;
    --as-foot: #fbfbfd;
    --as-border: #00000014;
    --as-sep: #00000010;
    --as-text: #1d1d1f;
    --as-muted: #6e6e73;
    --as-faint: #86868b;
    --as-hover: #00000007;
    --as-nav-hover: #0000000a;
    --as-accent: #0284c7;
    --as-link: #0284c7;
    --as-nav-active-bg: #0284c7;
    --as-nav-active-text: #ffffff;
    --as-track: #e3e3e8;
    --as-track-on: #0284c7;
    --as-knob: #ffffff;
    --as-count-bg: #00000014;
    --as-control-border: #0000001f;
    --as-btn-hover: #00000008;
    --as-shadow: 0 0 0 .5px #0b1b2b29, 0 28px 70px -12px #06121f59, 0 10px 26px -14px #06121f40;

    position: fixed;
    inset: 0;
    display: none;
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    height: 100dvh;
    max-height: none !important;
    margin: 0 !important;
    padding: 24px;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--as-text);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
#ac-settings[open] { display: flex; align-items: center; justify-content: center; }
#ac-settings::backdrop { background: #06121f59; }
/* Keep the page still behind the sheet, like a system settings window. */
html:has(#ac-settings[open]) { overflow: hidden; }
#ac-settings .ac-settings__window {
    display: flex;
    width: min(900px, 100%);
    max-width: 100%;
    height: min(600px, 100%);
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    background: var(--as-window) !important;
    border-radius: 14px;
    box-shadow: var(--as-shadow);
    overflow: hidden;
    animation: ac-settings-window-in .26s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes ac-settings-window-in {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
}

/* Structural wrappers never paint their own surface: the window, sidebar and
   content supply the colour, so dark-mode page rules cannot create bands. */
#ac-settings :is(.ac-settings__titlebar, .ac-settings__nav, .ac-settings__panes, .ac-settings__pane, .ac-settings__pane-head, .ac-settings__row) {
    background-color: transparent !important;
}

/* Sidebar */
#ac-settings .ac-settings__sidebar {
    display: flex;
    flex: 0 0 216px;
    flex-direction: column;
    width: 216px;
    min-width: 0;
    min-height: 0;
    padding: 13px 10px 10px;
    background: var(--as-sidebar) !important;
    border-inline-end: 1px solid var(--as-border) !important;
}
#ac-settings .ac-settings__titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px 12px 8px;
}
#ac-settings .ac-settings__window-title {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .01em;
    color: var(--as-muted) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#ac-settings .ac-settings__close {
    display: grid;
    flex: 0 0 26px;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--as-count-bg) !important;
    color: var(--as-muted) !important;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
#ac-settings .ac-settings__close:hover { background: var(--as-nav-hover) !important; color: var(--as-text) !important; }
#ac-settings .ac-settings__close svg { display: block; }
#ac-settings .ac-settings__nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    overflow-y: auto;
}
#ac-settings .ac-settings__nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 32px;
    padding: 6px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent !important;
    color: var(--as-text) !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-align: start;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
#ac-settings .ac-settings__nav-item:hover { background: var(--as-nav-hover) !important; }
#ac-settings .ac-settings__nav-item.is-active {
    background: var(--as-nav-active-bg) !important;
    color: var(--as-nav-active-text) !important;
    box-shadow: 0 1px 3px #0284c73d;
}
#ac-settings .ac-settings__nav-icon {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--as-muted) !important;
    transition: color .15s ease;
}
#ac-settings .ac-settings__nav-icon svg { display: block; width: 16px; height: 16px; }
#ac-settings .ac-settings__nav-item.is-active .ac-settings__nav-icon { color: var(--as-nav-active-text) !important; }
#ac-settings .ac-settings__nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: inherit !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#ac-settings .ac-settings__group-count {
    flex: 0 0 auto;
    min-width: 17px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--as-count-bg) !important;
    color: var(--as-muted) !important;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
#ac-settings .ac-settings__nav-item.is-active .ac-settings__group-count {
    background: transparent !important;
    color: inherit !important;
    box-shadow: inset 0 0 0 1px currentColor;
}
#ac-settings .ac-settings__group-count[hidden] { display: none !important; }

/* Content pane */
#ac-settings .ac-settings__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--as-content) !important;
}
#ac-settings .ac-settings__panes {
    flex: 1 1 auto;
    min-height: 0;
    padding: 24px 28px 26px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #c7c7cc transparent;
    scrollbar-width: thin;
}
#ac-settings .ac-settings__panes::-webkit-scrollbar { width: 10px; }
#ac-settings .ac-settings__panes::-webkit-scrollbar-track { background: transparent; }
#ac-settings .ac-settings__panes::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 10px;
    background: #c7c7cc;
    background-clip: content-box;
}
#ac-settings .ac-settings__panes::-webkit-scrollbar-thumb:hover { background: #a1a1a6; background-clip: content-box; }
#ac-settings .ac-settings__pane { display: block; max-width: 640px; }
#ac-settings .ac-settings__pane[hidden] { display: none !important; }
#ac-settings .ac-settings__pane.is-active { animation: ac-settings-pane-in .2s ease; }
@keyframes ac-settings-pane-in {
    from { opacity: .3; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}
#ac-settings .ac-settings__pane:focus-visible { outline-offset: -2px; }
#ac-settings .ac-settings__pane-head { margin: 0 0 18px; }
#ac-settings .ac-settings__pane-title {
    margin: 0 0 3px !important;
    color: var(--as-text) !important;
    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -.012em !important;
    line-height: 1.25 !important;
}
#ac-settings .ac-settings__pane-desc {
    margin: 0;
    color: var(--as-muted) !important;
    font-size: 12.5px;
    line-height: 1.5;
}

/* Grouped rows */
#ac-settings .ac-settings__group {
    margin: 0 0 16px;
    background: var(--as-card) !important;
    border: 1px solid var(--as-border) !important;
    border-radius: 12px;
    overflow: hidden;
}
#ac-settings .ac-settings__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 14px;
    flex-wrap: wrap;
    padding: 11px 14px;
    border-bottom: 1px solid var(--as-sep) !important;
}
#ac-settings .ac-settings__row-label {
    color: var(--as-text) !important;
    font-size: 13px;
    font-weight: 500;
}
#ac-settings .ac-settings__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--as-sep) !important;
    color: var(--as-text) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
    transition: background-color .12s ease;
}
#ac-settings .ac-settings__option:last-child { border-bottom: 0 !important; }
#ac-settings .ac-settings__option:hover { background: var(--as-hover) !important; }
#ac-settings .ac-settings__option--sub { padding-inline-start: 40px; }
#ac-settings .ac-settings__option-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
#ac-settings .ac-settings__option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
#ac-settings .ac-settings__option-name {
    color: inherit !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}
#ac-settings .ac-settings__option-help {
    color: var(--as-muted) !important;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.45;
}
#ac-settings .ac-settings__icon {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--as-faint) !important;
    transition: color .15s ease;
}
#ac-settings .ac-settings__icon svg { display: block; width: 16px; height: 16px; }
#ac-settings .ac-settings__option:hover .ac-settings__icon { color: var(--as-text) !important; }
#ac-settings .ac-settings__option:has(input:checked) .ac-settings__icon { color: var(--as-accent) !important; }

/* iOS-style switches */
#ac-settings .ac-settings__option input[type="checkbox"] {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 12px;
    background: var(--as-track) !important;
    box-shadow: inset 0 0 0 .5px var(--as-control-border);
    cursor: pointer;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: background-color .2s ease;
}
#ac-settings .ac-settings__option input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--as-knob) !important;
    box-shadow: 0 1px 2px #0000002e, 0 0 0 .5px #0000000f;
    transition: transform .2s cubic-bezier(.3,.9,.35,1);
}
#ac-settings .ac-settings__option input[type="checkbox"]:checked { background: var(--as-track-on) !important; }
#ac-settings .ac-settings__option input[type="checkbox"]:checked::after { transform: translateX(16px); }
/* Mirror the switch knob in right-to-left documents, including the manual RTL toggle. */
html[dir="rtl"] #ac-settings .ac-settings__option input[type="checkbox"]::after,
html[lang^="fa"] #ac-settings .ac-settings__option input[type="checkbox"]::after { left: auto; right: 2px; }
html[dir="rtl"] #ac-settings .ac-settings__option input[type="checkbox"]:checked::after,
html[lang^="fa"] #ac-settings .ac-settings__option input[type="checkbox"]:checked::after { transform: translateX(-16px); }

/* Text-size stepper */
#ac-settings .ac-font-size__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    direction: ltr;
}
#ac-settings .ac-font-size__stepper {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--as-card) !important;
    border: 1px solid var(--as-control-border) !important;
    border-radius: 8px;
}
#ac-settings .ac-font-size__stepper > * + * { border-inline-start: 1px solid var(--as-sep) !important; }
#ac-settings .ac-font-size__stepper button {
    min-width: 36px;
    min-height: 30px;
    padding: 4px 9px;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--as-text) !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease;
}
#ac-settings .ac-font-size__stepper button:hover { background: var(--as-btn-hover) !important; }
#ac-settings .ac-font-size__stepper button:disabled { opacity: .35; cursor: default; background: transparent !important; }
#ac-settings .ac-font-size__stepper output {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 0 6px;
    color: var(--as-text) !important;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
#ac-settings .ac-settings__linkbtn {
    padding: 4px 2px;
    border: 0;
    border-radius: 5px;
    background: transparent !important;
    color: var(--as-link) !important;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}
#ac-settings .ac-settings__linkbtn:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Footer */
#ac-settings .ac-settings__foot {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 18px;
    padding: 11px 28px;
    background: var(--as-foot) !important;
    border-top: 1px solid var(--as-border) !important;
}
#ac-settings .ac-settings__reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border: 0;
    background: transparent !important;
    color: var(--as-link) !important;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}
#ac-settings .ac-settings__reset span { color: inherit !important; font-size: inherit; }
#ac-settings .ac-settings__reset svg { display: block; flex: 0 0 auto; }
#ac-settings .ac-settings__reset:hover { text-decoration: underline; text-underline-offset: 2px; }
#ac-settings .ac-settings__note {
    margin: 0 !important;
    color: var(--as-muted) !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
}

/* Keyboard focus inside the window */
#ac-settings :is(button, input, output):focus-visible {
    outline: 2px solid var(--as-link) !important;
    outline-offset: 2px;
}
#ac-settings .ac-settings__nav-item.is-active:focus-visible { outline-color: var(--as-nav-active-text) !important; }

@media (prefers-reduced-motion: reduce) {
    #ac-settings .ac-settings__window,
    #ac-settings .ac-settings__pane { animation: none !important; }
}

/* Small screens: the window becomes a full-screen sheet and the sidebar
   turns into a horizontally scrollable pill strip. */
@media (max-width: 720px) {
    #ac-settings { padding: 0; }
    #ac-settings .ac-settings__window {
        flex-direction: column;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    #ac-settings .ac-settings__sidebar {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        padding: 10px 12px 0;
        border-inline-end: 0 !important;
        border-bottom: 1px solid var(--as-border) !important;
    }
    #ac-settings .ac-settings__titlebar { padding: 0 0 8px 2px; }
    #ac-settings .ac-settings__nav {
        flex: 0 0 auto;
        flex-direction: row;
        gap: 6px;
        padding: 0 0 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    #ac-settings .ac-settings__nav::-webkit-scrollbar { display: none; }
    #ac-settings .ac-settings__nav-item {
        flex: 0 0 auto;
        width: auto;
        min-height: 30px;
        padding: 5px 11px;
        border-radius: 999px;
    }
    #ac-settings .ac-settings__nav-item.is-active { border-radius: 999px; }
    #ac-settings .ac-settings__nav-label { overflow: visible; text-overflow: clip; }
    #ac-settings .ac-settings__panes { padding: 18px 16px 20px; }
    #ac-settings .ac-settings__pane { max-width: none; }
    #ac-settings .ac-settings__pane-title { font-size: 18px !important; }
    #ac-settings .ac-settings__row--font { flex-direction: column; align-items: flex-start; }
    #ac-settings .ac-settings__foot { padding: 10px 16px; }
}

/* Dark mode: same structure, macOS dark surfaces. */
html.ac-access-dark:not(.ac-access-contrast) #ac-settings {
    --as-window: #1c1c1e;
    --as-sidebar: #232325;
    --as-content: #1c1c1e;
    --as-card: #262628;
    --as-foot: #202022;
    --as-border: #ffffff1f;
    --as-sep: #ffffff14;
    --as-text: #f2f2f7;
    --as-muted: #a1a1a6;
    --as-faint: #8e8e93;
    --as-hover: #ffffff0a;
    --as-nav-hover: #ffffff0f;
    --as-accent: #2f9fe0;
    --as-link: #6cc0ea;
    --as-nav-active-bg: #0a84ff;
    --as-nav-active-text: #ffffff;
    --as-track: #3a3a3c;
    --as-track-on: #0a84ff;
    --as-knob: #ffffff;
    --as-count-bg: #ffffff1f;
    --as-control-border: #ffffff26;
    --as-btn-hover: #ffffff14;
    --as-shadow: 0 0 0 .5px #ffffff2e, 0 30px 80px -12px #000000cc, 0 12px 30px -16px #000000cc;
}
html.ac-access-dark:not(.ac-access-contrast) #ac-settings .ac-settings__panes { scrollbar-color: #5a5a5e transparent; }
html.ac-access-dark:not(.ac-access-contrast) #ac-settings .ac-settings__panes::-webkit-scrollbar-thumb {
    background: #5a5a5e;
    background-clip: content-box;
}
html.ac-access-dark:not(.ac-access-contrast) #ac-settings .ac-settings__panes::-webkit-scrollbar-thumb:hover {
    background: #6f6f75;
    background-clip: content-box;
}
html.ac-access-dark.ac-access-darker:not(.ac-access-contrast) #ac-settings {
    --as-window: #0f0f11;
    --as-sidebar: #161618;
    --as-content: #0f0f11;
    --as-card: #1b1b1e;
    --as-foot: #131315;
    --as-border: #ffffff1f;
    --as-sep: #ffffff12;
    --as-muted: #9d9da3;
    --as-faint: #8b8b90;
    --as-nav-hover: #ffffff12;
    --as-hover: #ffffff09;
    --as-track: #34343a;
    --as-shadow: 0 0 0 .5px #ffffff26, 0 30px 90px -10px #000000e6, 0 12px 34px -16px #000000e6;
}

/* High contrast: flat black and white, with outlines instead of soft fills. */
html.ac-access-contrast #ac-settings {
    --as-window: #ffffff;
    --as-sidebar: #ffffff;
    --as-content: #ffffff;
    --as-card: #ffffff;
    --as-foot: #ffffff;
    --as-border: #000000;
    --as-sep: #000000;
    --as-text: #000000;
    --as-muted: #000000;
    --as-faint: #000000;
    --as-hover: #f2f2f2;
    --as-nav-hover: #f2f2f2;
    --as-accent: #000000;
    --as-link: #003b80;
    --as-nav-active-bg: #000000;
    --as-nav-active-text: #ffffff;
    --as-track: #ffffff;
    --as-track-on: #000000;
    --as-knob: #ffffff;
    --as-count-bg: #00000014;
    --as-control-border: #000000;
    --as-btn-hover: #f2f2f2;
    --as-shadow: 0 0 0 2px #000000;
}
html.ac-access-contrast.ac-access-dark #ac-settings {
    --as-window: #000000;
    --as-sidebar: #000000;
    --as-content: #000000;
    --as-card: #000000;
    --as-foot: #000000;
    --as-border: #ffffff;
    --as-sep: #ffffff;
    --as-text: #ffffff;
    --as-muted: #ffffff;
    --as-faint: #ffffff;
    --as-hover: #1a1a1a;
    --as-nav-hover: #1a1a1a;
    --as-accent: #ffffff;
    --as-link: #ffed70;
    --as-nav-active-bg: #ffffff;
    --as-nav-active-text: #000000;
    --as-track: #000000;
    --as-track-on: #ffffff;
    --as-knob: #000000;
    --as-count-bg: #ffffff1f;
    --as-control-border: #ffffff;
    --as-btn-hover: #1a1a1a;
    --as-shadow: 0 0 0 2px #ffffff;
}
/* High contrast repaints every text node; keep the window's own layering. */
html.ac-access-contrast #ac-settings :is(p, span, label, output, small, strong, em, b, i, h2, h3) { background-color: transparent !important; }
html.ac-access-contrast #ac-settings .ac-settings__window { box-shadow: 0 0 0 2px var(--as-text) !important; }
html.ac-access-contrast #ac-settings .ac-settings__option input[type="checkbox"] {
    background: var(--as-card) !important;
    box-shadow: inset 0 0 0 2px var(--as-text) !important;
}
html.ac-access-contrast #ac-settings .ac-settings__option input[type="checkbox"]::after {
    background: var(--as-text) !important;
    box-shadow: none !important;
}
html.ac-access-contrast #ac-settings .ac-settings__option input[type="checkbox"]:checked { background: var(--as-text) !important; }
html.ac-access-contrast #ac-settings .ac-settings__option input[type="checkbox"]:checked::after { background: var(--as-card) !important; }
html.ac-access-contrast #ac-settings .ac-settings__nav-item.is-active { box-shadow: none; }