/**
 * Gagra Bank — светло-бело-рубиновая тема
 * Подключайте ПОСЛЕ инлайн-<style> страницы (перед </head>).
 */
:root {
    --bg: #faf7f8 !important;
    --surface: #ffffff !important;
    --surface2: #fff5f6 !important;
    --border: #ece8ea !important;
    --text: #1f2937 !important;
    --text-sec: #6b7280 !important;
    --text-secondary: #6b7280 !important;
    --emerald: #be123c !important;
    --emerald-dark: #9f1239 !important;
    --violet: #be123c !important;
    --violet-dark: #9f1239 !important;
    --blue: #2563eb !important;
    --error: #dc2626 !important;
    --warning: #d97706 !important;
    --radius: 16px !important;
    --primary: #be123c !important;
    --primary-dark: #9f1239 !important;
    --primary-light: #e11d48 !important;
    --success: #be123c !important;
    --background: #faf7f8 !important;
    --section-bg: #fff5f6 !important;
    --card-bg: #ffffff !important;
    --modal-bg: rgba(17, 24, 39, 0.35) !important;
    --white: #ffffff !important;
    /* history.php и страницы с «тёмным» :root */
    --bg-body: #faf7f8 !important;
    --input-bg: #ffffff !important;
    --input-border: #ece8ea !important;
    --card-border: #ece8ea !important;
}

html {
    background: #faf7f8;
}

body {
    background: linear-gradient(180deg, #fffdfd 0%, #faf7f8 45%, #f8f4f5 100%) !important;
    color: #1f2937 !important;
}

.app {
    background: transparent !important;
}

/* Шапки */
.page-header {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid #ece8ea !important;
    backdrop-filter: blur(12px) !important;
}

.page-back {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
    color: #6b7280 !important;
    box-shadow: 0 1px 3px rgba(190, 18, 60, 0.06);
}

.page-back:active,
.page-back:hover {
    background: #fff5f6 !important;
    color: #be123c !important;
    border-color: rgba(190, 18, 60, 0.25) !important;
}

.page-title {
    color: #111827 !important;
}

/* Герои (мемориал, ЭЦП и т.п.) — рубиновый градиент, текст светлый */
.mo-hero,
.sig-hero {
    background: linear-gradient(135deg, #9f1239 0%, #be123c 50%, #e11d48 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Карточки на тёмном фоне → светлые */
.mo-card,
.mo-code-block,
.ds-card {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.mo-card-title,
.ds-card-title {
    color: #6b7280 !important;
}

.mo-card-title i,
.ds-card-title i {
    color: #be123c !important;
}

.mo-icon-circle.success {
    background: linear-gradient(135deg, #9f1239, #e11d48) !important;
}

.mo-icon-circle.primary {
    background: linear-gradient(135deg, #9f1239, #e11d48) !important;
}

/* Инфо-баннеры */
.info-banner {
    background: rgba(190, 18, 60, 0.06) !important;
    border: 1px solid rgba(190, 18, 60, 0.15) !important;
}

.info-banner-icon {
    background: rgba(190, 18, 60, 0.12) !important;
    color: #be123c !important;
}

.info-banner-text {
    color: #6b7280 !important;
}

.info-banner-text strong {
    color: #111827 !important;
}

.info-banner.warn {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(217, 119, 6, 0.25) !important;
}

/* Навигация снизу */
.bottom-nav {
    background: #ffffff !important;
    border-top: 1px solid #ece8ea !important;
    box-shadow: 0 -4px 24px rgba(190, 18, 60, 0.06) !important;
}

.nav-item.active,
.nav-item:hover {
    color: #be123c !important;
}

/* Комиссии / «emerald» блоки */
.fee-block {
    background: rgba(190, 18, 60, 0.06) !important;
    border: 1px solid rgba(190, 18, 60, 0.14) !important;
}

.fee-row.total {
    border-top-color: rgba(190, 18, 60, 0.2) !important;
}

/* Карта в переводах */
.sc-icon.visa {
    background: linear-gradient(135deg, #9f1239, #e11d48) !important;
}

/* Дубликат главной (homepage): светлые карты и шапка */
.user-avatar {
    background: linear-gradient(135deg, #9f1239, #e11d48) !important;
    box-shadow: 0 4px 14px rgba(190, 18, 60, 0.3);
}

.user-greeting {
    color: #6b7280 !important;
}

.user-name {
    color: #111827 !important;
}

.header-btn {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
    color: #6b7280 !important;
    box-shadow: 0 1px 3px rgba(190, 18, 60, 0.06);
}

.header-btn:hover {
    background: #fff5f6 !important;
    color: #be123c !important;
    border-color: rgba(190, 18, 60, 0.25) !important;
}

.bank-card.card-apra {
    background: linear-gradient(145deg, #ffffff 0%, #fff5f7 42%, #ffe4e9 100%) !important;
    border: 1px solid rgba(190, 18, 60, 0.18) !important;
    box-shadow: 0 8px 32px rgba(190, 18, 60, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.bank-card.card-apra::before {
    background: #e11d48 !important;
    opacity: 0.12 !important;
}

.bank-card.card-apra::after {
    background: #fb7185 !important;
    opacity: 0.08 !important;
}

.bank-card.card-mc {
    background: linear-gradient(145deg, #ffffff 0%, #faf5ff 45%, #f3e8ff 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    box-shadow: 0 8px 28px rgba(99, 102, 241, 0.08) !important;
}

/* Модальные оверлеи */
.confirm-overlay {
    background: rgba(17, 24, 39, 0.45) !important;
}

.card-panel-overlay {
    background: rgba(17, 24, 39, 0.45) !important;
}

/* client_dashboard: шапка */
.header {
    background: linear-gradient(135deg, #9f1239 0%, #be123c 45%, #e11d48 100%) !important;
}

/* --- payments.php и аналогичные «тёмные» сетки --- */
.page-header .page-title,
.container .page-title,
.container h1.page-title {
    color: #111827 !important;
}

.payment-category {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

.payment-category:hover {
    border-color: rgba(190, 18, 60, 0.35) !important;
}

.page-back:active {
    color: #be123c !important;
}

/* Частые тёмные заливки → светлые карточки */
[class*="modal"] .modal-header,
.modal-header {
    background: #ffffff !important;
    border-bottom: 1px solid #ece8ea !important;
}

.service-card,
.pay-tile,
.tile-card {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
}

/* ── homepage.php: тёмные блоки поверх светлого body ── */
.app .apra-mark {
    color: #be123c !important;
}

.app .card-balance-label {
    color: #6b7280 !important;
}

.app .card-balance-value {
    color: #111827 !important;
}

.app .card-number-masked,
.app .card-expiry {
    color: #374151 !important;
}

.app .card-dot {
    background: #d1d5db !important;
}

.app .card-dot.active {
    background: #be123c !important;
}

.app .actions-grid .action-btn {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
    box-shadow: 0 2px 10px rgba(190, 18, 60, 0.05) !important;
}

.app .actions-grid .action-btn:hover {
    background: #fff5f6 !important;
    border-color: rgba(190, 18, 60, 0.28) !important;
    transform: translateY(-2px) !important;
}

.app .action-icon.transfer {
    background: rgba(190, 18, 60, 0.12) !important;
    color: #be123c !important;
}

.app .action-icon.iban {
    background: rgba(37, 99, 235, 0.1) !important;
    color: #2563eb !important;
}

.app .action-icon.topup {
    background: rgba(217, 119, 6, 0.12) !important;
    color: #d97706 !important;
}

.app .action-icon.other {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #7c3aed !important;
}

.app .action-label {
    color: #6b7280 !important;
}

.transactions-section .section-title {
    color: #111827 !important;
}

.transactions-section .section-link {
    color: #be123c !important;
}

.app .tx-list {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

.app .tx-item {
    border-bottom-color: #ece8ea !important;
}

.app .tx-item:hover {
    background: #fffafb !important;
}

.app .tx-title {
    color: #111827 !important;
}

.app .tx-icon.tx-positive {
    background: rgba(190, 18, 60, 0.1) !important;
    color: #be123c !important;
}

.app .tx-amount.positive {
    color: #be123c !important;
}

.app .tx-status.st-green {
    color: #be123c !important;
}

.app .limits-banner {
    background: linear-gradient(135deg, #ffffff 0%, #fff5f7 100%) !important;
    border: 1px solid rgba(190, 18, 60, 0.2) !important;
}

.app .limits-title {
    color: #111827 !important;
}

.app .limits-sub {
    color: #6b7280 !important;
}

.app .useful-title {
    color: #111827 !important;
}

.app .useful-btn {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
}

.app .useful-btn:hover {
    border-color: rgba(190, 18, 60, 0.3) !important;
}

.app .useful-btn-icon.support {
    background: rgba(190, 18, 60, 0.12) !important;
    color: #be123c !important;
}

.app .useful-btn-title {
    color: #111827 !important;
}

/* Деталь операции (homepage) */
.app .op-overlay {
    background: rgba(17, 24, 39, 0.4) !important;
}

.app .op-sheet {
    background: #faf7f8 !important;
}

.app .op-hero-back,
.app .op-hero-download {
    background: #fff5f6 !important;
    color: #be123c !important;
    border: 1px solid rgba(190, 18, 60, 0.2) !important;
}

.app .op-hero-icon {
    background: rgba(190, 18, 60, 0.12) !important;
    color: #be123c !important;
}

.app .op-hero-title,
.app .op-hero-amount {
    color: #111827 !important;
}

.app .op-hero-date {
    color: #6b7280 !important;
}

.app .op-info-card {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
}

.app .op-info-row + .op-info-row {
    border-top-color: #ece8ea !important;
}

.app .op-info-row.total {
    border-top-color: #ece8ea !important;
}

.app .op-info-value {
    color: #111827 !important;
}

.app .op-info-value.green {
    color: #be123c !important;
}

.app .op-receipt-btn {
    background: linear-gradient(135deg, #9f1239 0%, #be123c 100%) !important;
    box-shadow: 0 8px 20px rgba(190, 18, 60, 0.25) !important;
}

/* ── payments.php: быстрый перевод и формы ── */
.quick-transfer,
.recent-recipients {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

.quick-transfer .section-header {
    color: #be123c !important;
}

.quick-transfer .form-label,
.modal-content .form-label {
    color: #374151 !important;
}

.quick-transfer .form-input,
.quick-transfer .form-select,
.modal-content .form-input,
.modal-content .form-select {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
    color: #111827 !important;
}

.quick-transfer .form-input:focus,
.quick-transfer .form-select:focus,
.modal-content .form-input:focus,
.modal-content .form-select:focus {
    border-color: #be123c !important;
    box-shadow: 0 0 0 2px rgba(190, 18, 60, 0.15) !important;
}

.quick-transfer .form-select option,
.modal-content .form-select option {
    background: #ffffff !important;
    color: #111827 !important;
}

.transfer-type-btn.active {
    background: #fff5f6 !important;
    color: #be123c !important;
}

.transfer-type-btn:not(.active) {
    background: transparent !important;
    color: #6b7280 !important;
}

.cs-trigger {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
    color: #111827 !important;
}

.cs-trigger.open {
    border-color: #be123c !important;
    box-shadow: 0 0 0 2px rgba(190, 18, 60, 0.12) !important;
}

.cs-label {
    color: #374151 !important;
}

.cs-balance {
    color: #be123c !important;
}

.cs-opt-icon {
    background: rgba(190, 18, 60, 0.12) !important;
    color: #be123c !important;
}

.cs-dropdown {
    background: #ffffff !important;
    border: 1px solid #be123c !important;
    border-top: none !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1) !important;
}

.cs-option:hover {
    background: rgba(190, 18, 60, 0.08) !important;
}

.cs-option.selected {
    background: rgba(190, 18, 60, 0.12) !important;
}

.btn-primary {
    background: linear-gradient(135deg, #9f1239 0%, #be123c 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(190, 18, 60, 0.35) !important;
}

.btn-primary:hover {
    box-shadow: 0 8px 24px rgba(190, 18, 60, 0.45) !important;
}

.category-icon.transfer,
.category-icon.utilities {
    background: linear-gradient(135deg, #9f1239 0%, #be123c 100%) !important;
}

.recipient-card {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
}

.recipient-card:hover {
    background: #fffafb !important;
    border-color: rgba(190, 18, 60, 0.35) !important;
}

.recipient-avatar {
    background: linear-gradient(135deg, #9f1239 0%, #be123c 100%) !important;
}

.recipient-name,
.category-title {
    color: #111827 !important;
}

.service-tag {
    background: #fff5f6 !important;
    color: #6b7280 !important;
    border: 1px solid #ece8ea !important;
}

.modal {
    background: rgba(17, 24, 39, 0.45) !important;
}

.modal-content {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
}

/* ── history.php: фильтры и дровер ── */
.filter-toggle {
    background: #111827 !important;
    border: 1px solid #1f2937 !important;
    color: #e5e7eb !important;
}

.filter-toggle:hover,
.filter-toggle.active {
    border-color: #be123c !important;
    color: #fda4af !important;
}

.filter-toggle .ft-badge {
    background: #be123c !important;
}

.filter-drawer {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
}

.drawer-handle span {
    background: #d1d5db !important;
}

.drawer-title {
    color: #111827 !important;
}

.drawer-close {
    background: #fff5f6 !important;
    color: #6b7280 !important;
    border: 1px solid #ece8ea !important;
}

.drawer-close:hover {
    background: #ffe4e9 !important;
    color: #be123c !important;
}

.filter-label {
    color: #6b7280 !important;
}

.filter-input,
.filter-select {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
    color: #111827 !important;
}

.filter-input:focus,
.filter-select:focus {
    border-color: #be123c !important;
    box-shadow: 0 0 0 2px rgba(190, 18, 60, 0.12) !important;
}

.filter-select option {
    background: #ffffff !important;
    color: #111827 !important;
}

.filter-indicator {
    background: rgba(190, 18, 60, 0.08) !important;
    border: 1px solid rgba(190, 18, 60, 0.22) !important;
    color: #be123c !important;
}

.filter-btn {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

.filter-btn:first-child {
    background: linear-gradient(135deg, #9f1239 0%, #be123c 100%) !important;
    color: #fff !important;
}

/* ── bank_chat.php / supportchat: светлый чат ── */
.chat-header {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid #ece8ea !important;
    backdrop-filter: blur(12px) !important;
}

.chat-back {
    background: #fff5f6 !important;
    border: 1px solid rgba(190, 18, 60, 0.25) !important;
    color: #be123c !important;
}

.chat-back:active {
    color: #9f1239 !important;
}

.chat-agent-avatar {
    background: linear-gradient(135deg, #9f1239, #be123c) !important;
}

.chat-agent-name {
    color: #111827 !important;
}

.chat-agent-status {
    color: #be123c !important;
}

.chat-agent-status::before {
    background: #be123c !important;
}

.chat-container {
    background: #faf7f8 !important;
}

.message-bubble.manager {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
    color: #374151 !important;
}

.message-bubble.client {
    background: linear-gradient(135deg, #9f1239, #be123c) !important;
    color: #fff !important;
}

.chat-input-area {
    background: #ffffff !important;
    border-top: 1px solid #ece8ea !important;
}

.file-btn {
    background: #fff5f6 !important;
    border: 1px solid #ece8ea !important;
    color: #6b7280 !important;
}

.file-btn:active {
    color: #be123c !important;
}

.chat-textarea {
    background: #ffffff !important;
    border: 1px solid #ece8ea !important;
    color: #111827 !important;
}

.chat-textarea::placeholder {
    color: #9ca3af !important;
}

.chat-textarea:focus {
    border-color: rgba(190, 18, 60, 0.4) !important;
}

.chat-send-btn {
    background: linear-gradient(135deg, #9f1239, #be123c) !important;
    box-shadow: 0 2px 12px rgba(190, 18, 60, 0.35) !important;
}