/* SAF_TOPUP_LIGHT_GRAPHITE_V2 */

/* Только светлая тема */
body:is(.light,.light-theme) #safTopupPage.active-page {
    border-color: #d7dfd9 !important;
}

/* Выбранный способ оплаты */
body:is(.light,.light-theme) #safTopupPage .sftp-method.active {
    background: linear-gradient(
        135deg,
        #e1e6e2,
        #f1f3f1
    ) !important;
    border: 1px solid #aab5ad !important;
    color: #343b37 !important;
    box-shadow: inset 0 0 0 1px rgba(52,59,55,.10) !important;
}

/* Индикатор выбора */
body:is(.light,.light-theme) #safTopupPage .sftp-method-dot {
    background: #343b37 !important;
    background-color: #343b37 !important;
    border-color: #343b37 !important;
    box-shadow: none !important;
}

/* Значки способов оплаты, кроме фирменного логотипа СБП */
body:is(.light,.light-theme) #safTopupPage .sftp-method
:not(img):not(.sftp-method-dot):not(.sftp-method-dot *)
:is(svg:not(.saf-sbp-logo), i) {
    color: #343b37 !important;
    stroke: #343b37 !important;
}

/* Нейтральное состояние кнопок */
body:is(.light,.light-theme) #safTopupPage .sftp-method:not(.active) {
    border-color: #d9e0db !important;
    color: #343b37 !important;
}

/* Наведение и нажатие */
body:is(.light,.light-theme) #safTopupPage .sftp-method:hover,
body:is(.light,.light-theme) #safTopupPage .sftp-method:focus-visible {
    border-color: #8c9990 !important;
}

/* Значок пополнения */
body:is(.light,.light-theme) #safTopupPage .sftp-title-icon {
    background: #343b37 !important;
    border-color: #343b37 !important;
    color: white !important;
}

/* Кнопка назад */
body:is(.light,.light-theme) #safTopupPage .sftp-back {
    color: #343b37 !important;
    -webkit-text-fill-color: #343b37 !important;
}

/* Суммы */
body:is(.light,.light-theme) #safTopupPage .sftp-quick-button {
    border-color: #d9e0db !important;
    color: #343b37 !important;
}

body:is(.light,.light-theme) #safTopupPage .sftp-quick-button:hover,
body:is(.light,.light-theme) #safTopupPage .sftp-quick-button.active {
    background: #e7ebe8 !important;
    border-color: #aab5ad !important;
}

/* Кнопка оплаты */
body:is(.light,.light-theme) #safTopupPage .sftp-pay:not(:disabled) {
    background: #343b37 !important;
    border-color: #343b37 !important;
    color: #ffffff !important;
}


/* SAF_TOPUP_METHOD_GRAPHITE_V3 */

/* Только светлая тема, все устройства */
body:is(.light,.light-theme)
#safTopupPage .sftp-method.active,
body:is(.light,.light-theme)
#safTopupPage .sftp-method.active:hover,
body:is(.light,.light-theme)
#safTopupPage .sftp-method.active:focus-visible {
    background: linear-gradient(
        135deg,
        #e0e5e1 0%,
        #edf0ed 100%
    ) !important;
    background-color: #e5eae6 !important;
    border: 1px solid #a5b0a8 !important;
    color: #343b37 !important;
    -webkit-text-fill-color: #343b37 !important;
    box-shadow:
        inset 0 0 0 1px rgba(52,59,55,.12) !important;
}

/* Текст и декоративные иконки */
body:is(.light,.light-theme)
#safTopupPage .sftp-method.active
:not(img):not(svg):not(path):not(.sftp-method-dot) {
    color: #343b37 !important;
    -webkit-text-fill-color: #343b37 !important;
}

/* SVG-иконки, кроме цветного логотипа СБП */
body:is(.light,.light-theme)
#safTopupPage .sftp-method.active
svg:not(.saf-sbp-logo):not([class*="sbp"]):not([class*="SBP"]) {
    color: #343b37 !important;
    stroke: #343b37 !important;
}

/* Индикатор выбранного метода */
body:is(.light,.light-theme)
#safTopupPage .sftp-method.active .sftp-method-dot {
    background: #343b37 !important;
    border-color: #343b37 !important;
    box-shadow: none !important;
}

/* Если значок крипты — текстовый символ */
body:is(.light,.light-theme)
#safTopupPage .sftp-method.active
:is(.sftp-crypto-icon,.sftp-method-icon,.sftp-crypto-symbol) {
    color: #343b37 !important;
    -webkit-text-fill-color: #343b37 !important;
    text-shadow: none !important;
}


/* SAF_TOPUP_LIGHT_GRAPHITE_FINAL_V4 */

/* Только светлая тема на всех устройствах */
html[data-theme="light"] body,
body.light,
body.light-theme,
body[data-theme="light"] {
    --saf-topup-graphite: #343b37;
    --saf-topup-border: #d6ded8;
    --saf-topup-selected: #e5eae6;
}

/* Способы оплаты: перекрываем исходные правила по ID */
html[data-theme="light"] body #safTopupPage #safTopupSbp.active,
html[data-theme="light"] body #safTopupPage #safTopupCard.active,
body.light #safTopupPage #safTopupSbp.active,
body.light #safTopupPage #safTopupCard.active,
body.light-theme #safTopupPage #safTopupSbp.active,
body.light-theme #safTopupPage #safTopupCard.active,
body[data-theme="light"] #safTopupPage #safTopupSbp.active,
body[data-theme="light"] #safTopupPage #safTopupCard.active {
    background: linear-gradient(
        135deg, #e0e5e1, #edf0ed
    ) !important;
    background-color: #e5eae6 !important;
    border: 1px solid #a5b0a8 !important;
    color: #343b37 !important;
    -webkit-text-fill-color: #343b37 !important;
    box-shadow: inset 0 0 0 1px rgba(52,59,55,.08) !important;
}

/* Убираем зелёный индикатор выбранного метода */
html[data-theme="light"] body #safTopupPage .sftp-method-dot,
body.light #safTopupPage .sftp-method-dot,
body.light-theme #safTopupPage .sftp-method-dot,
body[data-theme="light"] #safTopupPage .sftp-method-dot {
    background: #343b37 !important;
    background-color: #343b37 !important;
    border-color: #343b37 !important;
    box-shadow: none !important;
}

/* Доллар — отдельное изображение SVG.
   Меняем его цвет визуально, не затрагивая логотип СБП. */
html[data-theme="light"] body #safTopupPage #safTopupCard img,
body.light #safTopupPage #safTopupCard img,
body.light-theme #safTopupPage #safTopupCard img,
body[data-theme="light"] #safTopupPage #safTopupCard img {
    filter: grayscale(1) brightness(.48) !important;
}

/* Суммы: обычное состояние */
html[data-theme="light"] body #safTopupPage .sftp-quick-button,
body.light #safTopupPage .sftp-quick-button,
body.light-theme #safTopupPage .sftp-quick-button,
body[data-theme="light"] #safTopupPage .sftp-quick-button {
    background: #f8faf8 !important;
    border-color: #d6ded8 !important;
    color: #343b37 !important;
    box-shadow: none !important;
}

/* Выбранная сумма: никаких зелёных рамок и текста */
html[data-theme="light"] body #safTopupPage .sftp-quick-button.active,
body.light #safTopupPage .sftp-quick-button.active,
body.light-theme #safTopupPage .sftp-quick-button.active,
body[data-theme="light"] #safTopupPage .sftp-quick-button.active {
    background: #e5eae6 !important;
    border: 1px solid #a5b0a8 !important;
    color: #343b37 !important;
    box-shadow: inset 0 0 0 1px rgba(52,59,55,.08) !important;
}

html[data-theme="light"] body #safTopupPage .sftp-quick-button.active strong,
body.light #safTopupPage .sftp-quick-button.active strong,
body.light-theme #safTopupPage .sftp-quick-button.active strong,
body[data-theme="light"] #safTopupPage .sftp-quick-button.active strong {
    color: #343b37 !important;
    -webkit-text-fill-color: #343b37 !important;
}

/* Кнопка пополнения */
html[data-theme="light"] body #safTopupPage .sftp-pay:not(:disabled),
body.light #safTopupPage .sftp-pay:not(:disabled),
body.light-theme #safTopupPage .sftp-pay:not(:disabled),
body[data-theme="light"] #safTopupPage .sftp-pay:not(:disabled) {
    background: #343b37 !important;
    background-image: none !important;
    border-color: #343b37 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
}

/* Наведение не возвращает зелёные акценты */
html[data-theme="light"] body #safTopupPage .sftp-method:hover,
body.light #safTopupPage .sftp-method:hover,
body.light-theme #safTopupPage .sftp-method:hover,
body[data-theme="light"] #safTopupPage .sftp-method:hover {
    border-color: #8c9990 !important;
}


/* SAF_TOPUP_LIGHT_FINAL_INTERACTION_V5 */

/* Светлая тема: кнопка пополнения */
html body.light #safTopupPage button.sftp-pay,
html body.light #safTopupPage button.sftp-pay:hover,
html body.light #safTopupPage button.sftp-pay:focus,
html body.light #safTopupPage button.sftp-pay:focus-visible,
html body.light-theme #safTopupPage button.sftp-pay,
html body.light-theme #safTopupPage button.sftp-pay:hover,
html body.light-theme #safTopupPage button.sftp-pay:focus,
html body.light-theme #safTopupPage button.sftp-pay:focus-visible {
    background: #343b37 !important;
    background-color: #343b37 !important;
    background-image: none !important;
    border: 1px solid #343b37 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
}

/* Суммы: убираем чёрную рамку фокуса */
html body.light #safTopupPage .sftp-quick-button.active,
html body.light #safTopupPage .sftp-quick-button.active:hover,
html body.light #safTopupPage .sftp-quick-button.active:focus,
html body.light #safTopupPage .sftp-quick-button.active:focus-visible,
html body.light-theme #safTopupPage .sftp-quick-button.active,
html body.light-theme #safTopupPage .sftp-quick-button.active:hover,
html body.light-theme #safTopupPage .sftp-quick-button.active:focus,
html body.light-theme #safTopupPage .sftp-quick-button.active:focus-visible {
    background: #e5eae6 !important;
    background-color: #e5eae6 !important;
    border: 1px solid #a5b0a8 !important;
    outline: none !important;
    box-shadow: none !important;
    color: #343b37 !important;
    -webkit-text-fill-color: #343b37 !important;
}

html body.light #safTopupPage .sftp-quick-button.active strong,
html body.light-theme #safTopupPage .sftp-quick-button.active strong {
    color: #343b37 !important;
    -webkit-text-fill-color: #343b37 !important;
}


/* SAF_TOPUP_LIGHT_GRAPHITE_FINAL_V6 */

/* Только светлая тема: кнопка пополнения */
html[data-theme="light"] body #safTopupPage .sftp-pay:not(:disabled),
html body:is(.light,.light-theme,[data-theme="light"])
#safTopupPage .sftp-pay:not(:disabled),
html[data-theme="light"] body #safTopupPage .sftp-pay:not(:disabled):hover,
html body:is(.light,.light-theme,[data-theme="light"])
#safTopupPage .sftp-pay:not(:disabled):hover,
html body:is(.light,.light-theme,[data-theme="light"])
#safTopupPage .sftp-pay:not(:disabled):active,
html body:is(.light,.light-theme,[data-theme="light"])
#safTopupPage .sftp-pay:not(:disabled):focus,
html body:is(.light,.light-theme,[data-theme="light"])
#safTopupPage .sftp-pay:not(:disabled):focus-visible {
    background: #343b37 !important;
    background-color: #343b37 !important;
    background-image: none !important;
    border-color: #343b37 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Поле суммы: убираем зелёную рамку и свечение */
html[data-theme="light"] body #safTopupPage .sftp-input-wrap,
html body:is(.light,.light-theme,[data-theme="light"])
#safTopupPage .sftp-input-wrap,
html[data-theme="light"] body #safTopupPage .sftp-input-wrap:focus-within,
html body:is(.light,.light-theme,[data-theme="light"])
#safTopupPage .sftp-input-wrap:focus-within {
    border-color: #a5b0a8 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Само поле ввода */
html[data-theme="light"] body #safTopupPage #safTopupAmount,
html body:is(.light,.light-theme,[data-theme="light"])
#safTopupPage #safTopupAmount,
html[data-theme="light"] body #safTopupPage #safTopupAmount:focus,
html body:is(.light,.light-theme,[data-theme="light"])
#safTopupPage #safTopupAmount:focus {
    border-color: #a5b0a8 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Выбранная быстрая сумма */
html[data-theme="light"] body #safTopupPage .sftp-quick-button.active,
html body:is(.light,.light-theme,[data-theme="light"])
#safTopupPage .sftp-quick-button.active,
html[data-theme="light"] body #safTopupPage .sftp-quick-button.active:hover,
html body:is(.light,.light-theme,[data-theme="light"])
#safTopupPage .sftp-quick-button.active:hover,
html body:is(.light,.light-theme,[data-theme="light"])
#safTopupPage .sftp-quick-button.active:focus,
html body:is(.light,.light-theme,[data-theme="light"])
#safTopupPage .sftp-quick-button.active:focus-visible {
    background: #e5eae6 !important;
    background-color: #e5eae6 !important;
    background-image: none !important;
    border: 1px solid #a5b0a8 !important;
    color: #343b37 !important;
    -webkit-text-fill-color: #343b37 !important;
    outline: none !important;
    box-shadow: none !important;
}

html[data-theme="light"] body #safTopupPage .sftp-quick-button.active *,
html body:is(.light,.light-theme,[data-theme="light"])
#safTopupPage .sftp-quick-button.active * {
    -webkit-text-fill-color: #343b37 !important;
}

/* Светлая тема: нейтральный фокус у способов оплаты */
html[data-theme="light"] body #safTopupPage .sftp-method:focus,
html body:is(.light,.light-theme,[data-theme="light"])
#safTopupPage .sftp-method:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* SAF_TOPUP_LIGHT_BUTTON_FORCE_GRAPHITE_V7 */
@media (min-width: 0px) {
    html[data-theme="light"] body #safTopupPage .sftp-pay,
    html[data-theme="light"] body #safTopupPage button.sftp-pay,
    body.light #safTopupPage .sftp-pay,
    body.light-theme #safTopupPage .sftp-pay,
    body[data-theme="light"] #safTopupPage .sftp-pay {
        background: #343b37 !important;
        background-color: #343b37 !important;
        background-image: none !important;
        border-color: #343b37 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        box-shadow: none !important;
        filter: none !important;
    }

    html[data-theme="light"] body #safTopupPage .sftp-pay::before,
    html[data-theme="light"] body #safTopupPage .sftp-pay::after,
    body.light #safTopupPage .sftp-pay::before,
    body.light #safTopupPage .sftp-pay::after,
    body.light-theme #safTopupPage .sftp-pay::before,
    body.light-theme #safTopupPage .sftp-pay::after,
    body[data-theme="light"] #safTopupPage .sftp-pay::before,
    body[data-theme="light"] #safTopupPage .sftp-pay::after {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        filter: none !important;
    }

    html[data-theme="light"] body #safTopupPage .sftp-pay *,
    body.light #safTopupPage .sftp-pay *,
    body.light-theme #safTopupPage .sftp-pay *,
    body[data-theme="light"] #safTopupPage .sftp-pay * {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}


/* SAF_TOPUP_LIGHT_BUTTON_FORCE_GRAPHITE_V8 */
/* Светлая тема: фиксируем все состояния кнопки оплаты */

html[data-theme="light"] body #safTopupPage #safTopupPay:not(:disabled),
html[data-theme="light"] body #safTopupPage #safTopupPay:not(:disabled):hover,
html[data-theme="light"] body #safTopupPage #safTopupPay:not(:disabled):active,
html[data-theme="light"] body #safTopupPage #safTopupPay:not(:disabled):focus,
body.light #safTopupPage #safTopupPay:not(:disabled),
body.light #safTopupPage #safTopupPay:not(:disabled):hover,
body.light #safTopupPage #safTopupPay:not(:disabled):active,
body.light #safTopupPage #safTopupPay:not(:disabled):focus,
body.light-theme #safTopupPage #safTopupPay:not(:disabled),
body.light-theme #safTopupPage #safTopupPay:not(:disabled):hover,
body.light-theme #safTopupPage #safTopupPay:not(:disabled):active,
body.light-theme #safTopupPage #safTopupPay:not(:disabled):focus,
body[data-theme="light"] #safTopupPage #safTopupPay:not(:disabled),
body[data-theme="light"] #safTopupPage #safTopupPay:not(:disabled):hover,
body[data-theme="light"] #safTopupPage #safTopupPay:not(:disabled):active,
body[data-theme="light"] #safTopupPage #safTopupPay:not(:disabled):focus {
    background: #343b37 !important;
    background-color: #343b37 !important;
    background-image: none !important;
    border-color: #343b37 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

html[data-theme="light"] body #safTopupPage #safTopupPay:disabled,
body.light #safTopupPage #safTopupPay:disabled,
body.light-theme #safTopupPage #safTopupPay:disabled,
body[data-theme="light"] #safTopupPage #safTopupPay:disabled {
    background: #748078 !important;
    background-color: #748078 !important;
    background-image: none !important;
    border-color: #748078 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
    filter: none !important;
}


/* SAF_HOME_LIGHT_CARD_DESIGN_V2
   Только внешний вид существующих состояний.
   Никаких изменений логики подписки.
*/

/* Центральная карточка */
html body.light #homeUserCard {
    background: #fff !important;
    background-image: none !important;
    color: #202923 !important;
    border: 1px solid #dce2dd !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 30px rgba(35, 48, 40, .055) !important;
}

/* Заголовки и значения */
html body.light #homeUserCard .saf-plus-name,
html body.light #homeUserCard .saf-plus-prefix,
html body.light #homeUserCard #homeDays,
html body.light #homeUserCard .saf-plus-main,
html body.light #homeUserCard .saf-plus-main strong,
html body.light #homeUserCard .saf-plus-info strong,
html body.light #homeUserCard .saf-plus-expiry strong {
    color: #343b37 !important;
    -webkit-text-fill-color: #343b37 !important;
}

/* Статус — единый графитовый стиль для всех состояний */
html body.light #homeUserCard #homeStatus {
    color: #343b37 !important;
    -webkit-text-fill-color: #343b37 !important;
    background: #edf0ee !important;
    border: 1px solid #dce2dd !important;
    box-shadow: none !important;
}

/* Информационные секции */
html body.light #homeUserCard .saf-plus-info {
    background: #f8faf8 !important;
    border-color: #e1e6e2 !important;
}

html body.light #homeUserCard .saf-plus-row {
    border-color: #e4e8e5 !important;
}

html body.light #homeUserCard .saf-plus-row,
html body.light #homeUserCard .saf-plus-row * {
    color: #343b37;
}

/* Индикаторы срока */
html body.light #homeUserCard .saf-expiry-warning,
html body.light #homeUserCard .saf-expiry-warning.warning-soon,
html body.light #homeUserCard .saf-expiry-warning.warning-critical,
html body.light #homeUserCard #safSubscriptionWarning {
    background: #f1f3f1 !important;
    border: 1px solid #dce2dd !important;
    border-radius: 15px !important;
    box-shadow: none !important;
    color: #343b37 !important;
}

html body.light #homeUserCard .saf-expiry-warning *,
html body.light #homeUserCard #safSubscriptionWarning * {
    color: #343b37 !important;
    -webkit-text-fill-color: #343b37 !important;
}

/* Приветствие для новой подписки и сообщение об истечении */
html body.light #homeUserCard .saf-first-welcome,
html body.light #homeUserCard .saf-expired-message {
    padding: 24px 20px !important;
    margin: 14px 0 16px !important;
    text-align: center !important;
    border: 1px solid #dce2dd !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, #fafbfa, #f0f3f0) !important;
    box-shadow: none !important;
}

html body.light #homeUserCard .saf-first-welcome-icon,
html body.light #homeUserCard .saf-expired-message-icon {
    color: #343b37 !important;
    -webkit-text-fill-color: #343b37 !important;
}

html body.light #homeUserCard .saf-first-welcome-title,
html body.light #homeUserCard .saf-expired-message-title {
    color: #202923 !important;
    -webkit-text-fill-color: #202923 !important;
    font-size: 18px !important;
    font-weight: 750 !important;
    letter-spacing: -.3px !important;
}

html body.light #homeUserCard .saf-first-welcome-text,
html body.light #homeUserCard .saf-expired-message-text {
    max-width: 540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: #68726b !important;
    -webkit-text-fill-color: #68726b !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
}

/* Основная кнопка — графитовая, без кислотно-зелёного */
html body.light #homeUserCard #homeBuyButton,
html body.light #homeUserCard #homeBuyButton:hover,
html body.light #homeUserCard #homeBuyButton:focus {
    background: #343b37 !important;
    background-image: none !important;
    border: 1px solid #343b37 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
    filter: none !important;
}

html body.light #homeUserCard #homeBuyButton *,
html body.light #homeUserCard #homeBuyButton strong,
html body.light #homeUserCard #homeBuyButton .action-sub,
html body.light #homeUserCard #homeBuyButton .saf-buy-tariff-sub-v11,
html body.light #homeUserCard #homeBuyButton .saf-buy-tariff-icon-v11,
html body.light #homeUserCard #homeBuyButton .saf-buy-tariff-arrow-v11 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body.light #homeUserCard #homeBuyButton
.saf-buy-tariff-icon-v11 {
    background: rgba(255,255,255,.12) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Нейтральная полоса прогресса */
html body.light #homeUserCard .saf-plus-traffic-track-v9 {
    background: #e7ebe8 !important;
}

html body.light #homeUserCard .saf-plus-traffic-fill-v9 {
    background: #69756d !important;
    box-shadow: none !important;
}

/* Убираем цветовую тревожность рамки карточки */
html body.light #homeUserCard.expiry-soon,
html body.light #homeUserCard.expiry-critical,
html body.light #homeUserCard.saf-sub-warning,
html body.light #homeUserCard.saf-sub-danger {
    border-color: #dce2dd !important;
    box-shadow: 0 10px 30px rgba(35,48,40,.055) !important;
}