/* =========================================================
   ДЕНТА+ — ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ
   special-version.css
   ========================================================= */


/* =========================================================
   CSS VARIABLES
   ========================================================= */

:root {
    --vip-font-scale: 1;
}


/* =========================================================
   КНОПКА "ДЛЯ СЛАБОВИДЯЩИХ"
   Можно размещать в любом месте сайта
   ========================================================= */

.dentaplus-vip-open {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: auto;

    min-width: 58px;

    min-height: 58px;

    padding: 8px 14px;

    box-sizing: border-box;

    border: 2px solid #222;

    border-radius: 50px;

    background: #fff;

    color: #222;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    font-weight: 600;

    line-height: 1;

    text-align: center;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;

    -webkit-tap-highlight-color: transparent;

}


/* Кнопка только с иконкой */

.dentaplus-vip-open.dentaplus-vip-icon-only {

    width: 64px;

    height: 64px;

    min-width: 64px;

    min-height: 64px;

    padding: 0;

    border-radius: 50%;

}


/* Hover */

.dentaplus-vip-open:hover {

    background: #222;

    color: #fff;

    border-color: #222;

    transform: scale(1.03);

}


/* Active */

.dentaplus-vip-open:active {

    transform: scale(.97);

}


/* Keyboard focus */

.dentaplus-vip-open:focus-visible {

    outline: 4px solid #0066ff;

    outline-offset: 3px;

}


/* =========================================================
   ИКОНКА ОЧКОВ
   ========================================================= */

.dentaplus-vip-glasses {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    flex: 0 0 38px;

}


/* SVG */

.dentaplus-vip-glasses svg {

    display: block;

    width: 36px;

    height: 36px;

}


/* Текст кнопки */

.dentaplus-vip-label {

    white-space: nowrap;

}


/* =========================================================
   PANEL
   ========================================================= */

#dentaplus-vip-panel {

    position: fixed;

    top: 0;

    right: 0;

    width: 440px;

    max-width: 100%;

    height: 100vh;

    height: 100dvh;

    box-sizing: border-box;

    padding: 24px;

    overflow-y: auto;

    z-index: 2147483000;

    background: #fff;

    color: #000;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    line-height: 1.5;

    box-shadow:
        -6px 0 25px rgba(0, 0, 0, .25);

    transform: translateX(105%);

    transition:
        transform .25s ease;

    -webkit-overflow-scrolling: touch;

}


/* Open */

#dentaplus-vip-panel.dentaplus-vip-panel-active {

    transform: translateX(0);

}


/* =========================================================
   PANEL HEADER
   ========================================================= */

.dentaplus-vip-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-bottom: 18px;

    margin-bottom: 22px;

    border-bottom: 3px solid #000;

}


.dentaplus-vip-title {

    font-size: 24px;

    font-weight: 700;

    line-height: 1.2;

}


/* Close */

#dentaplus-vip-close {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 46px;

    height: 46px;

    min-width: 46px;

    padding: 0;

    border: 2px solid #000;

    border-radius: 50%;

    background: #fff;

    color: #000;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

}


#dentaplus-vip-close:hover {

    background: #000;

    color: #fff;

}


/* =========================================================
   SECTION
   ========================================================= */

.dentaplus-vip-section {

    margin-bottom: 28px;

}


.dentaplus-vip-section-title {

    display: block;

    margin-bottom: 12px;

    font-size: 19px;

    font-weight: 700;

}


/* =========================================================
   BUTTON GRID
   ========================================================= */

.dentaplus-vip-buttons {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

}


/* =========================================================
   PANEL BUTTONS
   ========================================================= */

.dentaplus-vip-panel-button {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 54px;

    padding: 10px;

    box-sizing: border-box;

    border: 2px solid #000;

    border-radius: 4px;

    background: #fff;

    color: #000;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.25;

    text-align: center;

    cursor: pointer;

    transition:
        background-color .15s ease,
        color .15s ease;

}


.dentaplus-vip-panel-button:hover {

    background: #000;

    color: #fff;

}


/* Active button */

.dentaplus-vip-panel-button.vip-selected {

    background: #000;

    color: #fff;

}


/* =========================================================
   RESET BUTTON
   ========================================================= */

#dentaplus-vip-reset {

    width: 100%;

    min-height: 58px;

    margin-top: 5px;

    padding: 12px;

    border: 3px solid #000;

    border-radius: 4px;

    background: #000;

    color: #fff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

}


#dentaplus-vip-reset:hover {

    background: #fff;

    color: #000;

}


/* =========================================================
   ACTIVE VISUALLY IMPAIRED MODE
   ========================================================= */

body.dentaplus-vip-active {

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

}


/* Increase readable text */

body.dentaplus-vip-active
p,
body.dentaplus-vip-active
li,
body.dentaplus-vip-active
a,
body.dentaplus-vip-active
label,
body.dentaplus-vip-active
button,
body.dentaplus-vip-active
input,
body.dentaplus-vip-active
textarea,
body.dentaplus-vip-active
select {

    font-size:
        max(
            16px,
            calc(
                16px *
                var(--vip-font-scale)
            )
        ) !important;

}


/* Headings */

body.dentaplus-vip-active
h1 {

    font-size:
        max(
            28px,
            calc(
                32px *
                var(--vip-font-scale)
            )
        ) !important;

    line-height: 1.25 !important;

}


body.dentaplus-vip-active
h2 {

    font-size:
        max(
            24px,
            calc(
                28px *
                var(--vip-font-scale)
            )
        ) !important;

    line-height: 1.3 !important;

}


body.dentaplus-vip-active
h3 {

    font-size:
        max(
            21px,
            calc(
                24px *
                var(--vip-font-scale)
            )
        ) !important;

    line-height: 1.3 !important;

}


/* =========================================================
   LINE / LETTER SPACING
   ========================================================= */

body.dentaplus-vip-spacing
p,
body.dentaplus-vip-spacing
li,
body.dentaplus-vip-spacing
a,
body.dentaplus-vip-spacing
label {

    line-height: 2 !important;

    letter-spacing: .06em !important;

    word-spacing: .12em !important;

}


/* =========================================================
   UNDERLINE LINKS
   ========================================================= */

body.dentaplus-vip-links
a {

    text-decoration-line: underline !important;

    text-decoration-thickness: 3px !important;

    text-underline-offset: 3px !important;

}


/* =========================================================
   HIDE IMAGES
   ========================================================= */

body.dentaplus-vip-no-images
img,
body.dentaplus-vip-no-images
picture,
body.dentaplus-vip-no-images
video,
body.dentaplus-vip-no-images
iframe {

    visibility: hidden !important;

}


/* =========================================================
   BLACK / WHITE
   ========================================================= */

body.dentaplus-vip-black-white {

    background: #000 !important;

    color: #fff !important;

}


body.dentaplus-vip-black-white
*:not(#dentaplus-vip-panel):not(
    #dentaplus-vip-panel *
) {

    background-color: #000 !important;

    color: #fff !important;

    border-color: #fff !important;

}


body.dentaplus-vip-black-white
a:not(
    #dentaplus-vip-panel *
) {

    color: #fff !important;

}


/* =========================================================
   WHITE / BLACK
   ========================================================= */

body.dentaplus-vip-white-black {

    background: #fff !important;

    color: #000 !important;

}


body.dentaplus-vip-white-black
*:not(#dentaplus-vip-panel):not(
    #dentaplus-vip-panel *
) {

    background-color: #fff !important;

    color: #000 !important;

    border-color: #000 !important;

}


body.dentaplus-vip-white-black
a:not(
    #dentaplus-vip-panel *
) {

    color: #000 !important;

}


/* =========================================================
   BLACK / YELLOW
   ========================================================= */

body.dentaplus-vip-black-yellow {

    background: #000 !important;

    color: #ffff00 !important;

}


body.dentaplus-vip-black-yellow
*:not(#dentaplus-vip-panel):not(
    #dentaplus-vip-panel *
) {

    background-color: #000 !important;

    color: #ffff00 !important;

    border-color: #ffff00 !important;

}


body.dentaplus-vip-black-yellow
a:not(
    #dentaplus-vip-panel *
) {

    color: #ffff00 !important;

}


/* =========================================================
   YELLOW / BLACK
   ========================================================= */

body.dentaplus-vip-yellow-black {

    background: #ffff00 !important;

    color: #000 !important;

}


body.dentaplus-vip-yellow-black
*:not(#dentaplus-vip-panel):not(
    #dentaplus-vip-panel *
) {

    background-color: #ffff00 !important;

    color: #000 !important;

    border-color: #000 !important;

}


body.dentaplus-vip-yellow-black
a:not(
    #dentaplus-vip-panel *
) {

    color: #000 !important;

}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

body.dentaplus-vip-active
input,
body.dentaplus-vip-active
textarea,
body.dentaplus-vip-active
select {

    min-height: 48px !important;

    padding: 10px !important;

    border: 2px solid currentColor !important;

    box-sizing: border-box !important;

}


/* =========================================================
   TABLES
   ========================================================= */

body.dentaplus-vip-active
table {

    width: 100% !important;

    border-collapse: collapse !important;

}


body.dentaplus-vip-active
td,
body.dentaplus-vip-active
th {

    padding: 12px !important;

    border: 2px solid currentColor !important;

    line-height: 1.6 !important;

}


/* =========================================================
   FOCUS
   ========================================================= */

body.dentaplus-vip-active
*:focus-visible {

    outline: 4px solid #0066ff !important;

    outline-offset: 3px !important;

}


/* =========================================================
   PANEL ALWAYS NORMAL
   ========================================================= */

#dentaplus-vip-panel,
#dentaplus-vip-panel * {

    box-sizing: border-box;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    #dentaplus-vip-panel {

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        width: 100%;

        max-width: 100%;

        height: 100vh;

        height: 100dvh;

        padding: 18px;

        transform:
            translateY(105%);

        box-shadow:
            0 -5px 25px rgba(0, 0, 0, .25);

    }


    #dentaplus-vip-panel.dentaplus-vip-panel-active {

        transform:
            translateY(0);

    }


    .dentaplus-vip-header {

        position: sticky;

        top: -18px;

        z-index: 10;

        margin-left: -18px;

        margin-right: -18px;

        padding: 14px 18px;

        background: #fff;

    }


    .dentaplus-vip-title {

        font-size: 21px;

    }


    #dentaplus-vip-close {

        width: 50px;

        height: 50px;

        min-width: 50px;

        font-size: 30px;

    }


    .dentaplus-vip-section-title {

        font-size: 18px;

    }


    .dentaplus-vip-panel-button {

        min-height: 58px;

        font-size: 16px;

    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    #dentaplus-vip-panel {

        padding: 15px;

    }


    .dentaplus-vip-header {

        top: -15px;

        margin-left: -15px;

        margin-right: -15px;

        padding-left: 15px;

        padding-right: 15px;

    }


    .dentaplus-vip-buttons {

        grid-template-columns: 1fr;

    }


    .dentaplus-vip-title {

        font-size: 19px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #dentaplus-vip-panel,
    .dentaplus-vip-open {

        transition: none;

    }

}
/* =========================================================
   МОБИЛЬНАЯ КНОПКА "ДЛЯ СЛАБОВИДЯЩИХ"
   ========================================================= */

#dentaplus-vip-mobile-button {

    display: none;

}


/* =========================================================
   ТЕЛЕФОН
   ========================================================= */

@media (max-width: 768px) {

    #dentaplus-vip-mobile-button {

        display: flex;

        position: fixed;

        right: 15px;

        bottom: 20px;

        z-index: 2147482999;

        width: 58px;

        height: 58px;

        min-width: 58px;

        min-height: 58px;

        padding: 0;

        margin: 0;

        align-items: center;

        justify-content: center;

        border: 2px solid #222;

        border-radius: 50%;

        background: #fff;

        color: #222;

        box-shadow:
            0 3px 12px rgba(0, 0, 0, .25);

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;

    }


    #dentaplus-vip-mobile-button
    svg {

        width: 34px;

        height: 34px;

        display: block;

    }


    #dentaplus-vip-mobile-button:hover {

        background: #222;

        color: #fff;

    }


    #dentaplus-vip-mobile-button:active {

        transform: scale(.95);

    }


    #dentaplus-vip-mobile-button:focus-visible {

        outline: 4px solid #0066ff;

        outline-offset: 3px;

    }

}


/* =========================================================
   ОЧЕНЬ МАЛЕНЬКИЙ ЭКРАН
   ========================================================= */

@media (max-width: 380px) {

    #dentaplus-vip-mobile-button {

        right: 10px;

        bottom: 15px;

        width: 54px;

        height: 54px;

        min-width: 54px;

        min-height: 54px;

    }

}
/* =========================================================
   ДЕНТА+ — КНОПКА В МОБИЛЬНОЙ ШАПКЕ
   ========================================================= */

.dentaplus-vip-mobile-header {
    display: none !important;
}


@media (max-width: 991px) {

    /*
     * Контейнер мобильных кнопок
     */

    .mobile-menu {

        display: flex !important;

        align-items: center;

        justify-content: flex-end;

        gap: 10px;

    }


    /*
     * Кнопка "Для слабовидящих"
     */

    .dentaplus-vip-mobile-header {

        display: inline-flex !important;

        align-items: center;

        justify-content: center;

        width: 48px !important;

        height: 48px !important;

        min-width: 48px !important;

        min-height: 48px !important;

        padding: 0 !important;

        margin: 0 !important;

        border: 1.5px solid #222 !important;

        border-radius: 50% !important;

        background: #fff !important;

        color: #222 !important;

        box-sizing: border-box;

        cursor: pointer;

        box-shadow: none;

        transform: none;

    }


    /*
     * SVG очков
     */

    .dentaplus-vip-mobile-header
    .dentaplus-vip-glasses {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 34px;

        height: 34px;

    }


    .dentaplus-vip-mobile-header
    .dentaplus-vip-glasses svg {

        display: block;

        width: 32px;

        height: 32px;

    }


    /*
     * Hover / active
     */

    .dentaplus-vip-mobile-header:hover {

        background: #222 !important;

        color: #fff !important;

    }


    .dentaplus-vip-mobile-header:active {

        transform: scale(.95);

    }


    /*
     * Фокус
     */

    .dentaplus-vip-mobile-header:focus-visible {

        outline: 3px solid #0066ff;

        outline-offset: 2px;

    }


    /*
     * Сам hamburger
     */

    .mobile-menu .rs-menu-toggle {

        display: flex !important;

        align-items: center;

        justify-content: center;

    }

}


/* =========================================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ
   ========================================================= */

@media (max-width: 400px) {

    .mobile-menu {

        gap: 6px;

    }


    .dentaplus-vip-mobile-header {

        width: 44px !important;

        height: 44px !important;

        min-width: 44px !important;

        min-height: 44px !important;

    }


    .dentaplus-vip-mobile-header
    .dentaplus-vip-glasses svg {

        width: 29px;

        height: 29px;

    }

}