/* Правки поверх styles-payment.min.css (payment/options/cart/shipping2), подключается после него. */

/* ========== 1. Правки поверх макета и общих стилей (style.min.css, select2) ========== */
/* балуны-справки: разметка div/a/b без классов макета */
body .balloon.js-balloon{border-radius:6px;padding:12px;color:var(--gray-500);font-size:14px;font-style:normal;font-weight:400;line-height:19px}
body .balloon.js-balloon p,body .balloon.js-balloon div,body .balloon.js-balloon span,body .balloon.js-balloon li{color:var(--gray-500);font-size:14px;line-height:19px}
body .balloon.js-balloon b,body .balloon.js-balloon strong{font-weight:600}
body .balloon.js-balloon a,body .balloon.js-balloon a.link{color:#3c8ace;text-decoration:none;font-size:14px;line-height:19px}
body .balloon.js-balloon a:hover{text-decoration:underline}
body .balloon.js-balloon h4,body .balloon.js-balloon .form_label{font-size:14px;line-height:19px;font-weight:600;color:var(--gray-500);margin:0}
body .balloon.js-balloon img{display:inline-block;vertical-align:middle}

/* галочка чипа: правило 61% для круглых radio не должно сдвигать галку (у нас чип на radio, в макете checkbox) */
.chip--checkbox .checkbox__input[type=radio]{background-position:50%}
/* пустая панель метода (единственный чип скрыт, справки нет) не должна давать пустой отступ */
#paymentMethodAccordion .accordion-body:not(:has(> :not(.d-none))){padding:0;border-top:0}
/* стрелка show-more: спрайт chevron смотрит вверх (0deg), в свёрнутом состоянии - вниз */
.js-show-more .icon{transition:transform .2s ease;transform:rotate(180deg)}
.js-show-more.is-open .icon{transform:rotate(0)}
.js-pay-hidden{display:none!important}
/* заголовок способа (.chip__label--title) и подсказки 14px из билда 06.10 - в styles-payment.min.css их нет */
.chip__label.chip__label--title{font-size:16px;font-style:normal;font-weight:500;line-height:20px}
#paymentMethodAccordion .text-hint{font-size:14px;line-height:14px}
/* в макете правило радиусов с accordion--empty написано селектором-потомком и ломает свёрнутые заголовки */
.accordion--bordered .chip--radio:not(.accordion--empty .accordion--bordered .chip--radio.collapsed){border-bottom-left-radius:12px;border-bottom-right-radius:12px}
#paymentMethodAccordion .accordion--bordered:not(.accordion--empty) .chip--radio:not(.collapsed){border-bottom-left-radius:0;border-bottom-right-radius:0}
.container .user_settings #form_lang .js-lang-dropdown{display:flex;justify-content:flex-end;top:0;width:120px}
.container .user_settings #form_lang .select2-container--default .select2-selection--single .select2-selection__rendered{padding-left:10px;display:flex;align-items:center}
.container .user_settings #form_lang .select2-selection__option{display:inline-flex;align-items:center;gap:8px}
.select2-results__option .select2-selection__option{display:inline-flex;align-items:center;gap:8px}
.select-dropdown .select2-container--default .select2-selection--single{padding:0 22px 0 0}
.select-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow{background:none;height:26px}
.select-dropdown .select2-container--open .select2-selection--single .select2-selection__arrow{-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.select-dropdown .select2-container .select2-selection--single .select2-selection__rendered{font-size:14px;color:var(--gray-700)}
.select-dropdown .select2-results__options{border:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none}
.select-dropdown .select2-results__option{border-bottom:0;padding:6px 8px;font-size:14px;line-height:20px;color:var(--gray-700)}
.select-dropdown .select2-container--default .select2-results__option--highlighted[aria-selected],.select-dropdown .select2-container--default .select2-results__option[aria-selected=true]{background-color:var(--gray-100);color:var(--gray-700);line-height:20px;padding:6px 8px}
/* style.min.css: .select2-container{width:100%!important} глушит inline width у select - фиксируем 64px из макета */
.order-currency-dropdown .select2-container{width:64px!important}
/* .selection{margin-left} из style.min.css сдвигает текст внутри 64px */
.select-dropdown.order-currency-dropdown .select2-container .selection{margin-left:0;width:100%}
.select-dropdown.order-currency-dropdown .select2-container--default .select2-selection--single .select2-selection__rendered{text-align:left;padding:0 2px 0 8px}
/* прелоадер смены языка (style.min.css z-index:11) должен перекрывать .block-sticky (z-index:1000) */
#globalpreloader.preloader{z-index:2000}
/* открытое бургер-меню: затемнение должно перекрывать фиксированный "Ваш заказ" (overlay z-index:4) */
.container:has(~ .overlay.show) .block-order,.container:has(~ .overlay.show) .block-sticky{z-index:3}
/* переключатель темы: вид бокса языка (.select-dropdown--bottom-rounded); -62px - select2 языка шириной 120px при видимых 50px */
.container .user_settings .theme-toggle{float:right;width:28px;height:28px;margin-right:-62px;position:relative;z-index:1;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--gray-200);border-radius:0 0 6px 6px;background:var(--gray-100);color:var(--gray-500);cursor:pointer}
.container .user_settings .theme-toggle:hover{background:var(--gray-300);color:#1a73e8}
.container .user_settings .theme-toggle:focus{outline:0}
@media only screen and (max-width:768px){.container .user_settings .theme-toggle{float:none;position:absolute;left:58px;top:0;margin:0;border-radius:6px}}
/* открытый список языка - не прижимать к боксу */
.container .user_settings #form_lang .select2-container--open .select2-dropdown--below{margin-top:3px}
.theme-toggle .theme-toggle__sun{display:none}
[dark-theme] .theme-toggle .theme-toggle__sun{display:block}
[dark-theme] .theme-toggle .theme-toggle__moon{display:none}
/* шеврон выбора языка - внутри бокса, а не у края 120px-контейнера */
.container .user_settings #form_lang .select2-selection--single{position:relative}
/* style.min.css: body input:focus:not([type=radio]){outline:0} глушит фокус .input из макета (3px свечение) */
body input.input:focus:not([type=radio]){outline:3px solid var(--background-brand-light-hover)}
/* style.min.css: h2{padding:2px 0} опускает "Ваш заказ" на 4px относительно заголовка левой колонки */
.inner__right-side>h2.subtitle2-bold{padding:0}
/* инпуты в "Ваш заказ" (количество, промокод) - 32px, как кнопки рядом */
.block-order input.input:not([type=radio]){height:32px;line-height:20px}
/* промокод: "Применить" в потоке flex, инпут (со своим крестиком) занимает остаток */
.field--discount .field__wrapper>.button--tertiary{position:static;transform:none}
.field--discount .field__wrapper .field__wrapper .input{width:100%}
/* options.asp: чипсы вариантов параметра; недоступный вариант (нет в наличии) */
.chip.chip--disabled{opacity:.55;cursor:default;pointer-events:none}
/* payment.asp, смартфон: плашка "Выбрано" над шторкой "Ваш заказ", пока выбранный способ за экраном */
.baige{display:inline-flex;align-items:center;gap:4px;padding:4px 12px}
.baige--notification{position:absolute;top:-36px;left:50%;transform:translateX(-50%);z-index:2;max-width:calc(100% - 32px);white-space:nowrap;backdrop-filter:blur(6px);background-color:var(--light-color);border-radius:20px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.baige--notification p{margin:0;min-width:0}
.baige--notification .js-selected-name{overflow:hidden;text-overflow:ellipsis}
/* options.asp: длинное название варианта "бежит" у выбранного чипса и под курсором (сдвиг --run-shift считает options.js) */
.chip__label--run.is-run,.chip:hover .chip__label--run{text-overflow:clip}
.chip__label--run.is-run .chip__run,.chip:hover .chip__label--run .chip__run{display:inline-block;animation:chip-run var(--run-dur,6s) linear infinite}
@keyframes chip-run{0%,15%{transform:translateX(0)}70%,85%{transform:translateX(var(--run-shift,0))}100%{transform:translateX(0)}}
/* options.asp: список чекбоксов вне чипа - padding-left .checkbox рассчитан на bootstrap float, которого в css макета нет */
.options-checks .checkbox{padding-left:0;width:auto}
/* мобильная шапка по макету: "назад" + заголовок, бургер 24px цвета текста; style.min.css даёт шапку 75px */
.pt-mhead{display:none}
@media only screen and (max-width:768px){
body .container header{height:56px}
body .container header .pt-mhead{display:flex;height:56px;padding-right:32px}
body .container header .lang{display:none}
body .container header nav{padding-top:0}
body .container header nav ul{margin-top:56px}
body .container header nav .menu-bobile{width:24px;height:24px;top:16px;right:0;padding:0}
body .container header nav .menu-bobile span,body .container header nav .menu-bobile span:after,body .container header nav .menu-bobile span:before{width:18px;height:2px;border-radius:1px;background:var(--gray-800)}
body .container header nav .menu-bobile span{left:3px;top:11px}
body .container header nav .menu-bobile span:before{top:-6px}
body .container header nav .menu-bobile span:after{bottom:-6px}
body .container header nav .menu-bobile.active span{background-color:transparent}
body .container header nav .menu-bobile.active span:before{top:0}
body .container header nav .menu-bobile.active span:after{bottom:0}
body .container .maindiv{padding-top:4px}
}
/* низ страницы: styles-payment.min.css резервирует 350px под fixed "Ваш заказ"; точную высоту ставит payment-common.js */
@media (max-width:768px){body{padding-bottom:140px}body:not(:has(.block-order)){padding-bottom:0}}
/* капча: .row_captcha input{max-width:152px} не даёт полю занять остаток строки до картинки */
body .payment-captcha .row_captcha input.turing_text{max-width:none;flex:1 1 auto}
/* "товар закончился": одна колонка по центру */
.payment-subscribe{max-width:420px;margin:0 auto}
/* попап подтверждения email (скидка): ошибка капчи/email */
.discount-popup input.is-error{background-color:#fce3e3}
.discount-popup .discount-popup-cancel{display:block;margin-top:12px;text-align:center;font-size:14px}

/* ========== 2. Тёмная тема: атрибут dark-theme на <html>. Токены задаёт styles-payment.min.css;
   здесь - компоненты, завязанные в макете на primitives напрямую, и общие шапка/подвал/модалки ========== */
html[dark-theme]{color-scheme:dark}

/* страница */
[dark-theme] body,[dark-theme] body.container{background:var(--gray-1000)!important} /* style.min.css: body{background-color:#f7f7f7!important} */
[dark-theme] .maindiv,[dark-theme] body .container .maindiv{background:transparent;border-color:var(--gray-800)}
[dark-theme] body .container,[dark-theme] body .container header nav{background-color:var(--gray-1000)} /* mobile: белый фон в style.min.css */
[dark-theme] .preloader{background-color:var(--gray-1000)}
[dark-theme] .overlay,[dark-theme] .overlay.show{background-color:rgba(11,16,25,.85)}
[dark-theme] .container .lang h1,[dark-theme] body .container header .lang h1{color:var(--gray-100)}
[dark-theme] header nav a,[dark-theme] header nav ul li a{color:var(--brand-400)}
[dark-theme] body .container header nav ul li{border-color:var(--gray-800)}
[dark-theme] body .container header nav .menu-bobile span,[dark-theme] body .container header nav .menu-bobile span:after,[dark-theme] body .container header nav .menu-bobile span:before{background:var(--gray-100)}
[dark-theme] body .container header nav .menu-bobile.active span{background-color:transparent}
[dark-theme] footer,[dark-theme] footer p{color:var(--gray-500)}
[dark-theme] footer a,[dark-theme] footer p a{color:var(--brand-400)}
[dark-theme] .link,[dark-theme] body .balloon.js-balloon a,[dark-theme] body .balloon.js-balloon a.link{color:var(--brand-400)}

/* переключатель темы - фон как у select2-бокса языка */
[dark-theme] .container .user_settings .theme-toggle{background:var(--gray-800);border-color:var(--gray-700);color:var(--gray-400)}
[dark-theme] .container .user_settings .theme-toggle:hover{background:var(--gray-700);color:var(--brand-400)}

/* текст и фоны */
[dark-theme] .color-text-primary{color:var(--gray-100)}
[dark-theme] .color-text-secondary{color:var(--gray-300)}
[dark-theme] .color-text-tertiary{color:var(--gray-400)}
[dark-theme] .color-text-brand{color:var(--brand-400)}
[dark-theme] .color-icon-black{color:var(--gray-100)}
[dark-theme] .color-bg-secondary{background-color:var(--gray-850)}
[dark-theme] .color-bg-tertiary{background-color:var(--gray-800)}
[dark-theme] .custom-border-default{border-color:var(--gray-800)}
[dark-theme] .accordion--bordered,[dark-theme] .accordion-body{border-color:var(--gray-800)}

/* контейнеры */
[dark-theme] .tile{background-color:var(--gray-900);border-color:var(--gray-800)}
/* фон .block-order только в мобильной шторке (как в макете), на десктопе он вылезал квадратными углами из-под .tile */
@media (max-width:768px){[dark-theme] .block-order{background-color:var(--gray-900);box-shadow:0 -2px 12px 0 rgba(0,0,0,.5)}}
[dark-theme] .tile.cart-item--error{border-color:var(--border-error)}

/* поля */
[dark-theme] .input,[dark-theme] body input.input,[dark-theme] body .payment-captcha input.turing_text,[dark-theme] body textarea.options-textarea{background-color:var(--gray-900);border-color:var(--gray-700);color:var(--gray-100)}
[dark-theme] .input::placeholder,[dark-theme] body input.input::placeholder{color:var(--gray-500)}
[dark-theme] .input:hover:not([disabled]),[dark-theme] body input.input:hover:not([disabled]){border-color:var(--brand-500)}
[dark-theme] .field--error .input,[dark-theme] .field--error body input.input,[dark-theme] body .field--error input.input{border-color:var(--border-error)}
[dark-theme] .radio__input[type=radio],[dark-theme] .checkbox__input[type=checkbox],[dark-theme] .checkbox__input[type=radio]{border-color:var(--gray-600);background-color:var(--gray-900)}
[dark-theme] .radio__input[type=radio]:checked,[dark-theme] .checkbox__input[type=checkbox]:checked,[dark-theme] .checkbox__input[type=radio]:checked{background-color:var(--brand-500);border-color:var(--brand-500)}

/* кнопки и ссылки */
[dark-theme] .button--secondary{background-color:var(--gray-800);border-color:var(--gray-700);color:var(--gray-300)}
[dark-theme] .button--secondary:hover{background-color:var(--gray-700)}
[dark-theme] .button--secondary-filled{background-color:var(--gray-800);color:var(--gray-300)}
[dark-theme] .button--secondary-filled:hover{background-color:var(--gray-700)}
[dark-theme] .button--secondary-filled:active{background-color:var(--gray-600)}
[dark-theme] .button--outline{border-color:var(--gray-700)}
[dark-theme] .button--tertiary{background-color:var(--gray-900);border-color:var(--gray-700);color:var(--gray-300)}
[dark-theme] .button--system:hover{color:var(--gray-300)}
[dark-theme] .button--primary{background-color:var(--brand-600)}
[dark-theme] .button--primary:hover{background-color:var(--brand-500)}
[dark-theme] .custom-link--default{color:var(--brand-400)}
[dark-theme] .custom-link--default:hover{color:var(--brand-300)}
[dark-theme] .custom-link--default:active{color:var(--brand-500)}

/* чипы (подметоды/валюты) */
[dark-theme] .chip--primary>div{background:var(--gray-900);border-color:var(--gray-700)}
[dark-theme] .chip--primary:hover>div{background:var(--gray-800);border-color:var(--gray-600)}
[dark-theme] .chip--primary:active>div{background:var(--gray-800);border-color:var(--brand-800)}
[dark-theme] .chip--primary input[type=radio]:checked+div{background:rgba(72,132,255,.2);border-color:var(--brand-500)}
[dark-theme] .chip--secondary{border-color:var(--gray-800)}
[dark-theme] .chip--secondary input[type=radio]:checked+div{background-color:var(--gray-800)}
[dark-theme] .chip--outline{border-color:var(--gray-800)}
[dark-theme] .chip--outline:hover{background-color:var(--gray-800);border-color:var(--gray-700)}
[dark-theme] .chip--checkbox:has(.checkbox__input:checked){background:rgba(72,132,255,.2);border-color:var(--brand-500)}
[dark-theme] .baige--notification{background-color:var(--gray-800);box-shadow:0 2px 8px rgba(0,0,0,.5)}

/* select2 */
[dark-theme] .select2-container--default .select2-selection--single,[dark-theme] .js-example-basic-single+.select2-container--default .select2-selection--single{background:var(--gray-800);border-color:var(--gray-700)}
[dark-theme] .select-dropdown .select2-container--default .select2-selection--single:hover{background-color:var(--gray-700)}
[dark-theme] .select-dropdown .select2-container--open .select2-selection--single{background:var(--gray-800);border-color:var(--gray-600)}
[dark-theme] .select-dropdown .select2-container .select2-selection--single .select2-selection__rendered,[dark-theme] .select-dropdown .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--gray-200)}
[dark-theme] .select-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow .icon{color:var(--gray-400)}
[dark-theme] .select2-container--default .select2-dropdown{background-color:var(--gray-900);border-color:var(--gray-700);box-shadow:0 6px 18px rgba(0,0,0,.5)}
[dark-theme] .select2-container--default .select2-results__option,[dark-theme] .select-dropdown .select2-results__option{color:var(--gray-200)}
[dark-theme] .select2-container--default .select2-results__option--highlighted[aria-selected],[dark-theme] .select-dropdown .select2-container--default .select2-results__option--highlighted[aria-selected],[dark-theme] .select-dropdown .select2-container--default .select2-results__option[aria-selected=true]{background-color:var(--gray-800);color:var(--gray-100)}
[dark-theme] .select2-container--default .select2-search--dropdown .select2-search__field{background-color:var(--gray-900);border-color:var(--gray-700);color:var(--gray-100)}

/* балуны-справки, qtip, модалки */
[dark-theme] body .balloon.js-balloon,[dark-theme] body .balloon.js-balloon p,[dark-theme] body .balloon.js-balloon div,[dark-theme] body .balloon.js-balloon span,[dark-theme] body .balloon.js-balloon li,[dark-theme] body .balloon.js-balloon h4,[dark-theme] body .balloon.js-balloon .form_label{color:var(--gray-300)}
[dark-theme] .qtip-default{background-color:var(--gray-800);border-color:var(--gray-700);color:var(--gray-200)}
[dark-theme] .truemodal_content,[dark-theme] .truemodal_wrapper .truemodal_content{background-color:var(--gray-900);color:var(--gray-200)}

/* попап подтверждения email для скидки (trueModal + .authorization) */
[dark-theme] body #true-modals .true-modal-overlay{background-color:var(--gray-1000)}
[dark-theme] #true-modals .true-modal-container>div{background-color:var(--gray-900)!important;border-color:var(--gray-800)!important}
[dark-theme] .authorization .commentdiv,[dark-theme] .authorization .commentdiv.text,[dark-theme] .authorization span.comment_login_text{color:var(--gray-200)}
[dark-theme] .authorization input.email_text,[dark-theme] .authorization input.turing_text,[dark-theme] .authorization input#f_confirm_code{background-color:var(--gray-900);border-color:var(--gray-700);color:var(--gray-100)}
[dark-theme] .authorization input::placeholder{color:var(--gray-500)}
[dark-theme] .authorization .row_captcha img{border-color:var(--gray-700)}
[dark-theme] .discount-popup input.is-error{background-color:rgba(245,35,35,.25)}
/* ошибка .product_error p: светло-розовый бокс -> приглушённый красный */
[dark-theme] .product_error p{background-color:rgba(245,72,72,.1);border-color:rgba(245,72,72,.45);color:#ff9d92;border-radius:12px}

/* плашка cookie и модалка политики: инлайн-стили с !important перебиваем специфичностью */
[dark-theme] .gdpr{background-color:var(--gray-900)!important;border-top-color:var(--brand-600)!important;box-shadow:0 -2px 24px rgba(0,0,0,.6)!important}
[dark-theme] .gdpr .gdpr_text p,[dark-theme] .modal-box,[dark-theme] .modal-box p{color:var(--gray-300)!important}
[dark-theme] .gdpr .gdpr_text a,[dark-theme] .modal-box a{color:var(--brand-400)!important}
[dark-theme] .gdpr .gdpr_buttons .gdpr_button,[dark-theme] .modal-close button{background-color:var(--brand-600)!important;border-color:var(--brand-600)!important;color:#fff!important}
[dark-theme] .gdpr .gdpr_buttons .gdpr_button:hover,[dark-theme] .modal-close button:hover{background-color:var(--brand-500)!important;border-color:var(--brand-500)!important}
[dark-theme] .modal-overlay{background-color:rgba(11,16,25,.85)!important}
[dark-theme] .modal-box{background-color:var(--gray-900)!important;border-color:var(--gray-800)!important}
[dark-theme] .modal-box h2,[dark-theme] .modal-box h3,[dark-theme] .modal-box h4{color:var(--gray-100)!important}
[dark-theme] .close-modal span{color:var(--brand-400)!important}