/* ═══════════════════════════════════════════════════════════
   SNSP GmbH – Unified Casino Theme Override
   Purple / Dark Blue – Loaded AFTER page-specific CSS
   Remaps all color variables to the casino palette
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Casino Core Palette ── */
  --primary: #a855f7 !important;
  --primary-dark: #9333ea !important;
  --primary-light: #c084fc !important;
  --secondary: #6366f1 !important;
  --accent: #818cf8 !important;
  --accent-light: #a5b4fc !important;
  --accent-hover: #a78bfa !important;

  --bg-dark: #0a0a1a !important;
  --bg-card: #13102b !important;
  --bg-card-hover: #1c1640 !important;
  --bg-code: #0d0a1f !important;

  --success: #22c55e !important;
  --error: #ef4444 !important;
  --warning: #f59e0b !important;
  --info: #818cf8 !important;

  --text: #e8e2f4 !important;
  --text-muted: #9b8ec2 !important;
  --border: #2d2458 !important;

  --gradient: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #3b82f6 100%) !important;

  /* Bank-specific variable overrides */
  --bg-main: #0a0a1a !important;
  --text-primary: #e8e2f4 !important;
  --text-secondary: #9b8ec2 !important;
  --text-white: #e8e2f4 !important;
  --border-light: rgba(168, 85, 247, 0.08) !important;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3) !important;
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4) !important;
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5) !important;

  /* Essen-specific variable overrides */
  --accent-light: rgba(168, 85, 247, 0.15) !important;

  /* Kalender-specific variable overrides */
  --bg-primary: #0a0a1a !important;
  --bg-secondary: #13102b !important;
  --bg-tertiary: #1c1640 !important;
  --global-event: #a855f7 !important;

  /* Krypto-Handel overrides */
  --accent-gold: #c084fc !important;
  --accent-orange: #a855f7 !important;
  --accent-blue: #6366f1 !important;
  --accent-cyan: #818cf8 !important;
  --accent-green: #22c55e !important;
  --glow-gold: 0 0 20px rgba(168, 85, 247, 0.3), 0 0 40px rgba(168, 85, 247, 0.1) !important;

  /* Bank / Essen light-theme overrides → force dark */
  --bg-main: #0a0a1a !important;
}

/* ── Force dark background everywhere ── */
body {
  background: #0a0a1a !important;
  color: #e8e2f4 !important;
}

/* ── Bank page: force dark mode ── */
/* Bank normally has a light Sparkasse-red theme → override to casino dark */
.dashboard,
.sidebar,
.main-content,
.stat-card,
.transaction-item,
.form-container,
.login-container,
.login-box,
.register-box,
.payout-container,
.page-content,
.account-overview,
.quick-actions-card {
  background-color: #0a0a1a !important;
  color: #e8e2f4 !important;
}

.account-main-card {
  background: linear-gradient(135deg, #1a1040 0%, #13102b 100%) !important;
  border-color: rgba(168, 85, 247, 0.25) !important;
}

.account-main-card::before {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%) !important;
}

.quick-action-btn {
  background: rgba(19, 16, 43, 0.8) !important;
  border-color: rgba(168, 85, 247, 0.15) !important;
  color: #e8e2f4 !important;
}

.quick-action-btn:hover {
  background: rgba(168, 85, 247, 0.12) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
}

.card-header {
  border-bottom-color: rgba(168, 85, 247, 0.12) !important;
}

/* Bank header overrides */
.bank-header,
.header,
.header-top,
.header-main {
  background: linear-gradient(135deg, rgba(13, 10, 36, 0.95) 0%, rgba(20, 15, 50, 0.95) 100%) !important;
  border-bottom-color: rgba(168, 85, 247, 0.2) !important;
}

.header-nav a {
  color: #9b8ec2 !important;
}
.header-nav a:hover,
.header-nav a.active {
  color: #c084fc !important;
}

.logo-icon {
  background: linear-gradient(135deg, #a855f7, #6366f1) !important;
}

.balance-amount {
  color: #c084fc !important;
}

/* ── Essen page: force dark mode ── */
.essen-header,
.shop-container,
.shop-header,
.category-section,
.item-card,
.cart-sidebar,
.cart-panel,
.cart-item,
.cart-summary {
  background-color: #13102b !important;
  color: #e8e2f4 !important;
  border-color: rgba(168, 85, 247, 0.12) !important;
}

.cart-btn {
  background: linear-gradient(135deg, #a855f7, #6366f1) !important;
}

.item-card:hover {
  border-color: rgba(168, 85, 247, 0.3) !important;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.1) !important;
}

.hero-section {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(99, 102, 241, 0.06) 100%) !important;
}

.hero-title {
  color: #c084fc !important;
}

.balance-badge {
  background: rgba(168, 85, 247, 0.15) !important;
  border-color: rgba(168, 85, 247, 0.25) !important;
  color: #c084fc !important;
}

/* ── Shared card styling ── */
.card,
.service-card,
.feature,
.feature-card,
.stat-box,
.info-card {
  background: rgba(19, 16, 43, 0.8) !important;
  border-color: rgba(168, 85, 247, 0.15) !important;
  color: #e8e2f4 !important;
}

.card:hover,
.service-card:hover,
.feature-card:hover {
  border-color: rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 8px 32px rgba(168, 85, 247, 0.12) !important;
}

/* ── Links & Buttons – Casino purple ── */
a {
  color: #c084fc;
}
a:hover {
  color: #e9d5ff;
}

button, .btn, .btn-primary,
input[type="submit"],
.action-btn, .submit-btn,
.login-btn, .register-btn {
  background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
  border-color: #a855f7 !important;
  color: #fff !important;
  transition: all 0.25s ease;
}

button:hover, .btn:hover, .btn-primary:hover,
input[type="submit"]:hover,
.action-btn:hover, .submit-btn:hover,
.login-btn:hover, .register-btn:hover {
  background: linear-gradient(135deg, #c084fc, #8b5cf6) !important;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.35) !important;
}

/* ── Inputs ── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
select, textarea,
.form-input, .input-field {
  background: rgba(13, 10, 31, 0.8) !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
  color: #e8e2f4 !important;
}

input:focus, select:focus, textarea:focus,
.form-input:focus, .input-field:focus {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15) !important;
  outline: none;
}

input::placeholder, textarea::placeholder {
  color: rgba(155, 142, 194, 0.5) !important;
}

/* ── Tables ── */
table, .table {
  border-color: rgba(168, 85, 247, 0.12) !important;
}

th {
  background: rgba(168, 85, 247, 0.1) !important;
  color: #c084fc !important;
  border-color: rgba(168, 85, 247, 0.15) !important;
}

td {
  border-color: rgba(168, 85, 247, 0.08) !important;
  color: #e8e2f4 !important;
}

tr:hover td {
  background: rgba(168, 85, 247, 0.05) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0a0a1a;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a855f7, #6366f1);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #c084fc, #818cf8);
}

/* ── Footer ── */
footer {
  background: rgba(10, 10, 26, 0.95) !important;
  border-top: 1px solid rgba(168, 85, 247, 0.15) !important;
  color: #9b8ec2 !important;
}

footer a {
  color: #c084fc !important;
}

/* ── Disclaimer styling ── */
.disclaimer {
  background: rgba(19, 16, 43, 0.6) !important;
  border-color: rgba(168, 85, 247, 0.15) !important;
  color: #9b8ec2 !important;
}

/* ── Hero / Header sections ── */
.hero {
  background: linear-gradient(135deg,
    rgba(168, 85, 247, 0.08) 0%,
    rgba(99, 102, 241, 0.06) 50%,
    rgba(59, 130, 246, 0.04) 100%
  ) !important;
  border-bottom-color: rgba(168, 85, 247, 0.15) !important;
}

.hero h1 {
  background: linear-gradient(90deg, #c084fc, #818cf8, #60a5fa, #a855f7, #e9d5ff, #6366f1, #c084fc) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: h1flow 4s ease-in-out infinite !important;
}
@keyframes h1flow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ── Code blocks (docs) ── */
pre, code, .code-block {
  background: rgba(13, 10, 31, 0.9) !important;
  border-color: rgba(168, 85, 247, 0.12) !important;
}

/* ── Badges / Tags ── */
.badge, .tag, .method-badge, .method {
  border-color: rgba(168, 85, 247, 0.3) !important;
}

/* ── Highlight color for .highlight cards ── */
.card.highlight {
  border-color: rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.08) !important;
}

.card.highlight:hover {
  border-color: rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 8px 40px rgba(168, 85, 247, 0.15) !important;
}

/* ── Card arrow links ── */
.card-arrow {
  color: #c084fc !important;
}

/* ── Feature icons ── */
.feature-icon, .card-icon {
  filter: none;
}

/* ── Selection color ── */
::selection {
  background: rgba(168, 85, 247, 0.3);
  color: #fff;
}

/* ── Bank-specific: Sparkasse red buttons → purple ── */
.sparkasse-btn, .bank-btn {
  background: linear-gradient(135deg, #a855f7, #6366f1) !important;
}

/* ── Maintenance page override ── */
.maintenance-page, .maintenance-box {
  background: #0a0a1a !important;
  color: #e8e2f4 !important;
}

/* ── Kalender event cards ── */
.event-card, .calendar-day, .day-cell {
  background: rgba(19, 16, 43, 0.7) !important;
  border-color: rgba(168, 85, 247, 0.12) !important;
}

.event-card:hover, .day-cell:hover {
  border-color: rgba(168, 85, 247, 0.3) !important;
}

/* ── Checkout ── */
.checkout-container, .checkout-box, .payment-form {
  background: rgba(19, 16, 43, 0.8) !important;
  border-color: rgba(168, 85, 247, 0.15) !important;
}

/* ── Tabs ── */
.tab, .tab-btn, .nav-tab {
  color: #9b8ec2 !important;
  border-color: transparent !important;
}

.tab.active, .tab-btn.active, .nav-tab.active {
  color: #c084fc !important;
  border-color: #a855f7 !important;
  background: rgba(168, 85, 247, 0.1) !important;
}

/* ── Modal overrides ── */
.modal, .modal-content, .popup {
  background: rgba(19, 16, 43, 0.98) !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
  color: #e8e2f4 !important;
}

/* ── Disclaimer modal → casino style ── */
.disclaimer-modal {
  background: rgba(13, 10, 36, 0.96) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  color: #e8e2f4 !important;
}

.disclaimer-modal hr {
  border-top-color: rgba(168, 85, 247, 0.15) !important;
}

/* Bank disclaimer override (normally light) */
.disclaimer-modal-overlay[data-area="bank"] .disclaimer-modal {
  background: rgba(13, 10, 36, 0.96) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  color: #e8e2f4 !important;
}

/* ── Status badges ── */
.status-online, .status-active, .status-success {
  color: #22c55e !important;
}
.status-offline, .status-error {
  color: #ef4444 !important;
}
.status-pending, .status-warning {
  color: #f59e0b !important;
}

/* ── Docs: endpoint sections ── */
.endpoint, .api-section, .endpoint-card {
  background: rgba(19, 16, 43, 0.7) !important;
  border-color: rgba(168, 85, 247, 0.12) !important;
}

/* ── Krypto-Handel: navbar & page ── */
.navbar {
  background: linear-gradient(135deg, rgba(13, 10, 36, 0.96) 0%, rgba(20, 15, 50, 0.96) 100%) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.2) !important;
}

.navbar::after {
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.5), transparent) !important;
}

.navbar-brand-text {
  color: #c084fc !important;
}

.navbar-link, .navbar-disclaimer {
  color: #9b8ec2 !important;
}
.navbar-link:hover, .navbar-disclaimer:hover {
  color: #c084fc !important;
}

.navbar-balance {
  background: rgba(168, 85, 247, 0.12) !important;
  border-color: rgba(168, 85, 247, 0.25) !important;
}

.navbar-balance-amount {
  color: #c084fc !important;
}

.auth-bar {
  background: rgba(13, 10, 36, 0.9) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.15) !important;
}

.auth-bar::after {
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.4), transparent) !important;
}

.balance-display {
  color: #c084fc !important;
}

.page {
  background: #0a0a1a !important;
}

.page__title {
  background: linear-gradient(135deg, #c084fc, #818cf8, #60a5fa) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

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

.section-title::before {
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.5), transparent) !important;
}

/* Krypto-Handel controls & table */
.controls {
  background: rgba(19, 16, 43, 0.6) !important;
  border-color: rgba(168, 85, 247, 0.12) !important;
}

.controls::before {
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.3), transparent) !important;
}

.table-wrap {
  background: rgba(19, 16, 43, 0.5) !important;
  border-color: rgba(168, 85, 247, 0.12) !important;
}

.control-group label {
  color: #9b8ec2 !important;
}

.btn--gold {
  background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
}
.btn--gold:hover {
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.3) !important;
}

.btn--muted {
  background: rgba(19, 16, 43, 0.6) !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
  color: #9b8ec2 !important;
}
.btn--muted:hover {
  background: rgba(168, 85, 247, 0.12) !important;
  color: #c084fc !important;
}

.btn--danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

.gold {
  color: #c084fc !important;
}

/* ── Ankauf: header ── */
.header .logo-text {
  color: #c084fc !important;
}

/* ── Docs: sidebar & sections ── */
.sidebar-nav, .doc-sidebar {
  background: rgba(13, 10, 36, 0.9) !important;
  border-right-color: rgba(168, 85, 247, 0.12) !important;
}

.sidebar-link, .nav-link {
  color: #9b8ec2 !important;
}
.sidebar-link:hover, .sidebar-link.active,
.nav-link:hover, .nav-link.active {
  color: #c084fc !important;
  background: rgba(168, 85, 247, 0.1) !important;
}

/* Docs method badges */
.method-get, .get {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #22c55e !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}
.method-post, .post {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #c084fc !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}
.method-delete, .delete {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ── Payment-API page ── */
.api-key-card, .key-card {
  background: rgba(19, 16, 43, 0.8) !important;
  border-color: rgba(168, 85, 247, 0.15) !important;
}

/* ── Login / Register pages (all services) ── */
.login-page, .register-page,
.login-container, .register-container {
  background: #0a0a1a !important;
}

.login-box, .register-box,
.login-card, .register-card {
  background: rgba(19, 16, 43, 0.85) !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.login-box h1, .login-box h2,
.register-box h1, .register-box h2 {
  color: #c084fc !important;
}

/* ── Payout / Deposit pages ── */
.payout-card, .deposit-card,
.withdrawal-section, .deposit-section {
  background: rgba(19, 16, 43, 0.8) !important;
  border-color: rgba(168, 85, 247, 0.15) !important;
}

/* ── Announcements ── */
.announcements-container .announcement,
.announcement-card {
  background: rgba(19, 16, 43, 0.8) !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
}

/* ── Toast / Notification ── */
.toast, .notification, .alert {
  background: rgba(19, 16, 43, 0.95) !important;
  border-color: rgba(168, 85, 247, 0.25) !important;
  color: #e8e2f4 !important;
}

/* ── Hardcoded white/light overrides ── */
.auth-disclaimer-btn {
  background: rgba(19, 16, 43, 0.8) !important;
  color: #c084fc !important;
  border-color: rgba(168, 85, 247, 0.25) !important;
}
.auth-disclaimer-btn:hover {
  background: rgba(168, 85, 247, 0.15) !important;
}

.stock-badge.low {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

.login-logo, .logo-icon {
  background: linear-gradient(135deg, #a855f7, #6366f1) !important;
}

/* ── User greeting ── */
.user-greeting {
  color: #9b8ec2 !important;
}
.user-greeting strong {
  color: #c084fc !important;
}

/* ── Logout button (special - keep distinct) ── */
.btn-logout {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #ef4444 !important;
}
.btn-logout:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.15) !important;
}

/* ── Btn-disclaimer ── */
.btn-disclaimer {
  color: #9b8ec2 !important;
}
.btn-disclaimer:hover {
  color: #c084fc !important;
}

/* ── Kalender specific ── */
.calendar-header {
  background: rgba(13, 10, 36, 0.9) !important;
}

.calendar-grid {
  border-color: rgba(168, 85, 247, 0.1) !important;
}

.day-cell.today {
  border-color: #a855f7 !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.2) !important;
}

.day-cell.has-event {
  background: rgba(168, 85, 247, 0.08) !important;
}

/* ── Ambient background pattern (subtle) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(99, 102, 241, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.02) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Ensure page headers clear the fixed nav ── */
.header, .bank-header, .shop-header, .navbar {
  margin-top: 0 !important;
}