/* Typed text on light/white fields must stay readable (focus, autofill, OS paint). */
.form-control:focus,
.form-textarea:focus,
input.form-control:focus,
textarea.form-control:focus,
input.form-input:focus,
.form-input:focus,
.cell .form-control:focus,
.form-group .form-control:focus,
.sign-form .form-control:focus,
.login-content .form-input:focus,
.fa-auth .form-control:focus,
.fa-auth .form-input:focus,
.page-auth-v2 .form-input:focus {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827 !important;
}

/* Native select stays on the dark theme while focused (picked value must remain visible). */
.form-select,
.form-select:focus,
.form-select:focus-visible,
select.form-select,
select.form-select:focus,
select.form-control,
select.form-control:focus {
    background-color: var(--bg-card-hover) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
}

.form-control:focus::placeholder,
.form-textarea:focus::placeholder,
.form-input:focus::placeholder,
input.form-control:focus::placeholder {
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827 !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    transition: background-color 99999s ease-out;
}

/* Customer service switch: html.cs-off hides all CS entry points. */
html.cs-off .btn-service,
html.cs-off [data-toggle="matte"][data-target="#service"],
html.cs-off .header-btn[data-target="#service"],
html.cs-off #service,
html.cs-off #zhiCustomBtn,
html.cs-off .footer-service,
html.cs-off #toolbar dt {
    display: none !important;
}

/* Bind / change phone: country code picker aligned with form-control */
.sign-form .intl-phone,
.fa-sheet .intl-phone {
    width: 100%;
    align-items: stretch;
}
.sign-form .intl-phone__dial,
.fa-sheet .intl-phone__dial {
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: var(--surface-muted, #f4f8f9);
    color: var(--text-main, inherit);
}

/*
 * WAP dark theme only: these custom properties are defined in tou2/header.
 * On PC layouts the vars are absent, so the declarations are ignored.
 * Prevents light-gray buttons from inheriting white text.
 */
.btn-secondary {
    background: linear-gradient(135deg, var(--binance-gold) 0%, var(--binance-gold-light) 100%) !important;
    border: none !important;
    color: var(--bg-dark) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.btn-secondary:active {
    background: linear-gradient(135deg, #D9A60A 0%, #E6C935 100%) !important;
    color: var(--bg-dark) !important;
}
.btn-default,
.btn-cancel,
a.btn.btn-default,
button.btn.btn-default {
    background: var(--bg-card-hover) !important;
    background-image: none !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    box-shadow: none !important;
}
.btn-default::after,
.btn-cancel::after {
    border-color: var(--border-color) !important;
}
.btn-default:not(.btn-disabled):active,
.btn-default:active,
.btn-cancel:not(.btn-disabled):active,
.btn-cancel:active {
    background: var(--border-color) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
.btn-noshadow.btn-secondary {
    background: var(--bg-card-hover) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--binance-gold) !important;
    -webkit-text-fill-color: var(--binance-gold) !important;
}
.btn-primary,
.btn-secondary:not(.btn-noshadow):not(.btn-disabled) {
    -webkit-text-fill-color: var(--bg-dark) !important;
}
.btn-disabled,
.btn-disabled.btn-secondary,
.btn-disabled.btn-default {
    background: var(--border-color) !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}