/* Dom accessibility settings widget. Body class names remain compatible with legacy Nagish state. */
#nagish-online-toolbar,
#nagish-online-toolbar * {
    box-sizing: border-box;
}

#nagish-online-toolbar {
    position: fixed;
    right: 18px;
    bottom: 24px;
    z-index: 950;
    width: 48px;
    direction: ltr;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
}

#nagish-online-toolbar .nagish-online-toolbar-toggle-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #01748e;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 25px;
    line-height: 1;
}

#nagish-online-toolbar .nagish-online-toolbar-toggle-link svg {
    display: block;
    width: 28px;
    height: 28px;
}

#nagish-online-toolbar .nagish-online-toolbar-overlay {
    position: absolute;
    right: 0;
    bottom: 60px;
    display: none;
    width: 280px;
    max-width: calc(100vw - 36px);
    max-height: calc(100vh - 100px);
    overflow-x: clip;
    overflow-y: auto;
    border: 2px solid #01748e;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

#nagish-online-toolbar.nagish-online-toolbar-open .nagish-online-toolbar-overlay {
    display: block;
}

#nagish-online-toolbar .nagish-online-toolbar-title {
    margin: 0;
    padding: 16px 16px 12px;
    background: #01748e;
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
}

#nagish-online-toolbar .nagish-online-tools {
    display: grid;
    gap: 8px;
    padding: 12px;
}

#nagish-online-toolbar .nagish-online-toolbar-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #01748e;
    border-radius: 6px;
    background: #fff;
    color: #202020;
    cursor: pointer;
    font: 600 16px/22px Arial, Helvetica, sans-serif;
    text-align: left;
}

#nagish-online-toolbar .nagish-online-toolbar-link[aria-pressed="true"] {
    background: #01748e;
    color: #fff;
}

#nagish-online-toolbar .nagish-online-toolbar-link:disabled {
    cursor: not-allowed;
    opacity: .55;
}

#nagish-online-toolbar button:focus-visible,
#nagish-online-skip-content:focus-visible {
    outline: 3px solid #003f4d;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px #fff;
}

.hwe-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1001;
    padding: 10px 14px;
    border-radius: 4px;
    background: #fff;
    color: #202020;
    font: 700 16px/20px Arial, Helvetica, sans-serif;
    text-decoration: none;
    transform: translateY(-160%);
}

.hwe-skip-link:focus {
    transform: translateY(0);
}

/* Colour modes are mutually exclusive. Without one of these body classes, Dom is untouched. */
body.nagish-online-grayscale:not(.nagish-online-high-contrast):not(.nagish-online-negative-contrast):not(.nagish-online-light-background) > *:not(#nagish-online-toolbar),
body.nagish-online-grayscale:not(.nagish-online-high-contrast):not(.nagish-online-negative-contrast):not(.nagish-online-light-background) > script {
    filter: grayscale(100%);
}

body.nagish-online-high-contrast:not(.nagish-online-grayscale):not(.nagish-online-negative-contrast):not(.nagish-online-light-background) > *:not(#nagish-online-toolbar):not(script),
body.nagish-online-high-contrast:not(.nagish-online-grayscale):not(.nagish-online-negative-contrast):not(.nagish-online-light-background) > *:not(#nagish-online-toolbar):not(script) * {
    background-color: #000 !important;
    background-image: none !important;
    border-color: #fff !important;
    box-shadow: none !important;
    color: #fff !important;
}

body.nagish-online-high-contrast:not(.nagish-online-grayscale):not(.nagish-online-negative-contrast):not(.nagish-online-light-background) a:not(#nagish-online-skip-content),
body.nagish-online-high-contrast:not(.nagish-online-grayscale):not(.nagish-online-negative-contrast):not(.nagish-online-light-background) a:not(#nagish-online-skip-content) * {
    color: #ff0 !important;
    text-decoration: underline !important;
}

body.nagish-online-negative-contrast:not(.nagish-online-grayscale):not(.nagish-online-high-contrast):not(.nagish-online-light-background) > *:not(#nagish-online-toolbar):not(script) {
    filter: invert(100%) hue-rotate(180deg);
}

body.nagish-online-light-background:not(.nagish-online-grayscale):not(.nagish-online-high-contrast):not(.nagish-online-negative-contrast) > *:not(#nagish-online-toolbar):not(script),
body.nagish-online-light-background:not(.nagish-online-grayscale):not(.nagish-online-high-contrast):not(.nagish-online-negative-contrast) > *:not(#nagish-online-toolbar):not(script) * {
    background-color: #fff !important;
    background-image: none !important;
    color: #000 !important;
}

body.nagish-online-links-underline a {
    text-decoration: underline !important;
}

body.nagish-online-readable-font,
body.nagish-online-readable-font *:not(#nagish-online-toolbar):not(#nagish-online-toolbar *) {
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
}


@media (max-width: 800px) {
    #nagish-online-toolbar {
        right: 12px;
        bottom: calc(72px + env(safe-area-inset-bottom));
        width: 48px;
    }

    #nagish-online-toolbar .nagish-online-toolbar-toggle-link {
        width: 48px;
        height: 48px;
    }

    #nagish-online-toolbar .nagish-online-toolbar-overlay {
        right: 0;
        bottom: 60px;
        width: min(320px, calc(100vw - 24px));
        max-width: none;
        max-height: min(560px, calc(100dvh - 150px));
    }

    #nagish-online-toolbar .nagish-online-toolbar-link {
        min-height: 48px;
        font-size: 17px;
        line-height: 22px;
    }
}


/* Dom: release fixed text heights only while the visitor enlarges text. */
body.dom-text-scaled :is(.top_menu,.header-menu,.listings-list,.listing-info,.listing-title,.listing-description) {height:auto!important;max-height:none!important;}
body.dom-text-scaled :is(a,p,label,button,li,h1,h2,h3) {white-space:normal!important;overflow-wrap:anywhere;}
body.dom-text-scaled :is(.list-news__item_text,.news-item-content,.author-block-column,.menu-new_index) {height:auto!important;max-height:none!important;overflow:visible!important;white-space:normal!important;}
body.dom-text-scaled .custom-search-form :is(input:not([type=hidden]):not([type=checkbox]),select,button) {height:auto!important;min-height:1.6em;line-height:1.4!important;max-width:100%;}
body.dom-text-scaled .custom-search-form :is(.inside,.fields-block,.search-field,.bedrooms-outer,.search-btn) {height:auto!important;max-height:none!important;}
body.dom-text-scaled .custom-search-form .inside {display:flow-root;}
body.dom-text-scaled .custom-search-form .btn-block {position:static!important;width:auto!important;margin-bottom:16px;}
body.dom-text-scaled .custom-search-form .fields-block {width:100%!important;display:flow-root;}
body.dom-text-scaled .custom-search-form .search-btn {width:auto!important;}
body.dom-text-scaled .custom-search-form .search-btn input {width:auto!important;min-width:180px;padding:8px 16px!important;background-image:none!important;}
body.dom-text-scaled .custom-search-form .select-slider .vals div {max-height:none!important;height:auto!important;overflow:visible!important;}
body.dom-text-scaled .latest_added_listings_block :is(.carousel_block,.listing,li) {height:auto!important;max-height:none!important;overflow:visible!important;}
body.dom-text-scaled .latest_added_listings_block .carousel_block {width:auto!important;margin:0!important;}
body.dom-text-scaled .latest_added_listings_block .carousel_block > ul {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:auto!important;height:auto!important;position:static!important;transform:none!important;left:0!important;}
body.dom-text-scaled .latest_added_listings_block .carousel_block > ul > li {float:none!important;width:auto!important;}
body.dom-text-scaled .latest_added_listings_block .listing {width:auto!important;padding:12px!important;}
body.dom-text-scaled .latest_added_listings_block .listing > :is(a,span) {float:none!important;display:block!important;position:relative!important;width:auto!important;height:auto!important;margin:4px 0!important;white-space:normal!important;}
body.dom-text-scaled .latest_added_listings_block :is(.directionleft,.directionright) {display:none!important;}
body.nagish-online-stop-gifs *, body.nagish-online-stop-gifs *::before, body.nagish-online-stop-gifs *::after {animation-play-state:paused!important;transition:none!important;scroll-behavior:auto!important;}
#nagish-online-toolbar {z-index:2147482000;}
@media print {#nagish-online-toolbar,#nagish-online-skip-content {display:none!important;}}

/* Dom: rectangular trigger, separate viewport-bounded settings panel. */
#nagish-online-toolbar {
    width:50px;
    height:44px;
    right:auto;
    bottom:auto;
    left:calc(100% - 62px);
    top:calc(100% - 56px);
}
#nagish-online-toolbar .nagish-online-toolbar-toggle-link {
    width:50px;
    height:44px;
    border-radius:2px;
}
#nagish-online-toolbar .nagish-online-toolbar-overlay {
    position:fixed;
    right:auto;
    bottom:auto;
    width:280px;
    max-width:calc(100vw - 24px);
    max-height:calc(100dvh - 80px);
    overscroll-behavior:contain;
}
@media(max-width:800px) {
    #nagish-online-toolbar .nagish-online-toolbar-overlay {width:320px;}
}

/* Keep the close control reachable while the settings panel scrolls. */
#nagish-online-toolbar .dom-accessibility-heading {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    position:sticky;
    top:0;
    z-index:1;
    background:#01748e;
}
#nagish-online-toolbar .dom-accessibility-heading .nagish-online-toolbar-title {
    padding:14px 4px 14px 14px;
    font-size:17px;
    line-height:22px;
}
#nagish-online-toolbar .dom-accessibility-close {
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin:4px;
    padding:0;
    border:0;
    border-radius:4px;
    background:transparent;
    color:#fff;
    cursor:pointer;
}
#nagish-online-toolbar .dom-accessibility-close:hover {background:rgba(0,0,0,.16);}
#nagish-online-toolbar .dom-accessibility-close:focus-visible {
    outline:2px solid #fff;
    outline-offset:-4px;
    box-shadow:none;
}

/* A filter on .main creates a containing block for its fixed .scrollToTop.
   Apply the selected colour filter to content children, leaving the common
   container and its fixed navigation control in viewport coordinates. */
body.nagish-online-grayscale > .main,
body.nagish-online-negative-contrast > .main {filter:none!important;}
body.nagish-online-grayscale > .main > :not(.scrollToTop):not(script) {filter:grayscale(100%);}
body.nagish-online-negative-contrast > .main > :not(.scrollToTop):not(script) {filter:invert(100%) hue-rotate(180deg);}
