/* ==========================================================================
   Golden Win — Dark Navy (1xBet-style) Colour System
   COLOUR / CONTRAST ONLY. No layout, spacing, structure or logic changes.
   Palette:
     bg #07111F  bg2 #0B1628  card #111F34  elevated #162842  border #243B57
     text #FFFFFF / #D2DBE8 / #91A2B8 / #667991
     blue #1597F5   green #16C784
   ========================================================================== */

/* ---------- 1. Global design tokens ---------- */
:root,
.customer-theme,
.dark {
  /* shadcn base */
  --background: 215 63% 7%;
  --foreground: 0 0% 100%;
  --card: 216 51% 14%;
  --card-foreground: 0 0% 100%;
  --popover: 215 50% 17%;
  --popover-foreground: 0 0% 100%;
  --primary: 205 92% 52%;
  --primary-foreground: 0 0% 100%;
  --primary-glow: 205 92% 62%;
  --secondary: 215 50% 17%;
  --secondary-foreground: 215 32% 87%;
  --muted: 215 50% 17%;
  --muted-foreground: 214 22% 65%;
  --accent: 205 92% 52%;
  --accent-foreground: 0 0% 100%;
  --success: 157 80% 43%;
  --destructive: 0 72% 55%;
  --destructive-foreground: 0 0% 100%;
  --border: 213 41% 24%;
  --input: 215 50% 17%;
  --ring: 205 92% 52%;

  /* home / shell theme tokens */
  --home-canvas: 215 63% 7%;
  --home-surface: 216 51% 14%;
  --home-card: 215 50% 17%;
  --home-copy: 0 0% 100%;
  --home-deep: 214 62% 95%;
  --home-muted: 214 22% 65%;
  --home-line: 213 41% 24%;
  --home-mint: 215 50% 17%;
  --home-sky: 217 57% 10%;
  --home-green: 157 80% 43%;
  --home-blue: 205 92% 52%;
  --home-gold: 43 80% 54%;
  --home-yellow: 42 100% 65%;
  --home-on-dark: 0 0% 100%;

  /* controlled gradients — no purple, no neon */
  --gradient-primary: linear-gradient(135deg, #1597f5 0%, #0d7ad0 100%);
  --gradient-accent: linear-gradient(135deg, #1597f5, #0d7ad0);
  --gradient-surface: linear-gradient(160deg, #162842, #0b1628);
  --gradient-hero: radial-gradient(120% 90% at 50% 0%, rgba(21, 151, 245, 0.14), transparent 70%);
  --home-balance: linear-gradient(110deg, #0e2340, #15375c, #0a1728);
  --home-mission: linear-gradient(110deg, #0f2c4b, #1a5e96);

  --shadow-elegant: 0 10px 30px -12px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 16px rgba(21, 151, 245, 0.28);
  --shadow-home-nav: 0 -8px 20px rgba(0, 0, 0, 0.55);
  --shadow-home-fab: 0 8px 20px rgba(22, 199, 132, 0.3);

  /* brand tokens (were purple) */
  --brand-purple: #1597f5;
  --brand-bg: #07111f;
  --brand-surface: #111f34;
  --brand-border: #243b57;
  --brand-text: #ffffff;
  --brand-text-muted: #91a2b8;

  --sidebar-background: 215 63% 7%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-primary: 205 92% 52%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 216 51% 14%;
  --sidebar-accent-foreground: 215 32% 87%;
  --sidebar-border: 213 41% 24%;
  --sidebar-ring: 205 92% 52%;
}

/* ---------- 2. Page shell ---------- */
html,
body {
  background-color: #07111f;
  color: #ffffff;
}
.customer-theme body,
.customer-theme {
  background-color: #07111f;
  color: #ffffff;
}

/* ---------- 3. Header (was pale light-green gradient) ---------- */
.home-header {
  background: #0b1628 !important;
  border-bottom: 1px solid #243b57;
  color: #ffffff;
}
.home-header * {
  border-color: #243b57;
}

/* ---------- 4. Text readability safety net ----------
   Never dark text on dark navy. Never invisible low-opacity text.        */
.customer-theme .text-black,
.customer-theme .text-slate-900,
.customer-theme .text-slate-800,
.customer-theme .text-gray-900,
.customer-theme .text-gray-800,
.customer-theme .text-neutral-900,
.customer-theme .text-zinc-900,
.customer-theme .text-home-deep,
.text-home-deep {
  color: #ffffff !important;
}
.customer-theme .text-slate-700,
.customer-theme .text-gray-700,
.customer-theme .text-slate-600,
.customer-theme .text-gray-600,
.customer-theme .text-slate-500,
.customer-theme .text-gray-500 {
  color: #91a2b8 !important;
}
.text-home-muted\/40,
.text-home-muted\/50,
.text-home-on-dark\/60,
.text-home-on-dark\/70 {
  color: #91a2b8 !important;
}
.customer-theme .text-muted-foreground {
  color: #91a2b8 !important;
}
.customer-theme :disabled,
.customer-theme [aria-disabled="true"] {
  color: #667991;
}

/* ---------- 5. Surfaces: kill leftover light backgrounds ---------- */
.customer-theme .bg-white,
.customer-theme .bg-slate-50,
.customer-theme .bg-slate-100,
.customer-theme .bg-gray-50,
.customer-theme .bg-gray-100,
.customer-theme .bg-neutral-100 {
  background-color: #111f34 !important;
}
.bg-home-deep,
.hover\:bg-home-deep:hover {
  background-color: #162842 !important;
}
.customer-theme .bg-background,
.customer-theme .bg-card,
.customer-theme .bg-card\/60 {
  background-color: #111f34;
}
.customer-theme .bg-home-mint\/50,
.customer-theme .bg-home-mint\/60 {
  background-color: #162842;
}
.customer-theme .bg-home-on-dark\/10,
.customer-theme .bg-home-on-dark\/15 {
  background-color: rgba(255, 255, 255, 0.06);
}

/* ---------- 6. Cards / borders ---------- */
.customer-theme .border-home-line,
.customer-theme .border-border,
.customer-theme .border-white\/10,
.customer-theme .border-white\/5 {
  border-color: #243b57;
}

/* ---------- 7. Buttons: blue primary, green success, navy secondary ---------- */
.customer-theme .bg-primary,
.customer-theme .bg-home-blue {
  background-color: #1597f5 !important;
  color: #ffffff !important;
}
.customer-theme .bg-primary:hover,
.customer-theme .hover\:bg-home-blue\/90:hover {
  background-color: #0d82db !important;
}
.customer-theme .bg-home-green,
.customer-theme .hover\:bg-home-green:hover {
  background-color: #16c784 !important;
  color: #ffffff !important;
}
.customer-theme .hover\:bg-home-green\/90:hover {
  background-color: #12b075 !important;
}
.customer-theme .bg-secondary {
  background-color: #162842 !important;
  border-color: #243b57;
  color: #ffffff !important;
}
.customer-theme .text-primary {
  color: #1597f5 !important;
}
.customer-theme .text-home-green {
  color: #16c784 !important;
}
.customer-theme .text-home-blue {
  color: #1597f5 !important;
}

/* ---------- 8. Inputs: navy fields, white text, NO white inner line/box ---------- */
.customer-theme input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.customer-theme textarea,
.customer-theme select,
.fp-input,
.login-input,
.register-input {
  background-color: #162842 !important;
  border-color: #243b57 !important;
  color: #ffffff !important;
}
input,
textarea,
select,
.fp-input,
.fp-input-row,
.login-input,
.register-input {
  box-shadow: none !important;
  outline: none !important;
  border-image: none !important;
  background-clip: padding-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-text-fill-color: #ffffff;
  caret-color: #1597f5;
}
input:focus,
textarea:focus,
select:focus {
  box-shadow: none !important;
  outline: none !important;
  border-color: #1597f5 !important;
}
/* browser autofill = the white inner rectangle */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #162842 inset !important;
  box-shadow: 0 0 0 1000px #162842 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: #162842 !important;
  transition: background-color 9999s ease-in-out 0s;
}
input::placeholder,
textarea::placeholder,
.fp-input::placeholder {
  color: #91a2b8 !important;
  -webkit-text-fill-color: #91a2b8;
  opacity: 1 !important;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- 9. Login / Register screen ---------- */
.fp-root,
.customer-theme .fp-root {
  background: #07111f !important;
  color: #ffffff !important;
}
.fp-title,
.customer-theme .fp-title {
  color: #ffffff !important;
}
.fp-subtitle,
.fp-footer,
.customer-theme .fp-subtitle,
.customer-theme .fp-footer {
  color: #91a2b8 !important;
}
.fp-toggle-bar,
.fp-input-row,
.fp-otp-popup,
.customer-theme .fp-toggle-bar,
.customer-theme .fp-input-row,
.customer-theme .fp-otp-popup {
  background: #111f34 !important;
  border-color: #243b57 !important;
  box-shadow: none !important;
}
.fp-toggle-btn,
.customer-theme .fp-toggle-btn {
  color: #91a2b8 !important;
}
.fp-toggle-btn.active,
.fp-get-otp-btn,
.fp-submit-btn,
.customer-theme .fp-toggle-btn.active,
.customer-theme .fp-get-otp-btn,
.customer-theme .fp-submit-btn {
  background: #1597f5 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.fp-login-link,
.fp-otp-text,
.customer-theme .fp-login-link,
.customer-theme .fp-otp-text {
  color: #1597f5 !important;
}
.fp-box,
.pf-box {
  background: #111f34 !important;
  border-color: #243b57 !important;
}

/* ---------- 10. Modals / popups / dropdowns ---------- */
.customer-theme .menu-dropdown,
.customer-theme .c-modal-content {
  background: #111f34;
  border-color: #243b57;
  color: #ffffff;
}
.customer-theme .md-header,
.customer-theme .c-modal-header {
  background: #162842;
  border-bottom-color: #243b57;
  color: #ffffff;
}
.customer-theme .md-item-text,
.customer-theme .md-uid,
.customer-theme .md-t-left {
  color: #d2dbe8;
}
.customer-theme .md-item:hover {
  background: #162842;
}

/* ---------- 11. Bottom navigation ---------- */
.customer-theme nav.fixed,
.customer-theme [class*="bottom-0"][class*="fixed"] {
  border-top-color: #243b57;
}
.customer-theme .text-home-muted {
  color: #8798ad !important;
}

/* ---------- 12. No purple / neon leftovers ---------- */
.customer-theme [style*="#9F6EFD"],
.customer-theme [style*="#9f6efd"],
.customer-theme [style*="rgba(159, 110, 253"],
.customer-theme [style*="rgba(159,110,253"] {
  border-color: #243b57 !important;
}
.customer-theme [style*="#141125"],
.customer-theme [style*="#1e1a35"],
.customer-theme [style*="#0a0e1a"],
.customer-theme [style*="#111827"],
.customer-theme [style*="#1a1a2e"],
.customer-theme [style*="rgb(20, 17, 37)"],
.customer-theme [style*="rgb(30, 26, 53)"] {
  background-color: #111f34 !important;
  color: #ffffff !important;
}
.customer-theme .home-balance-panel {
  background-image: var(--home-balance);
  border: 1px solid #243b57;
}
.customer-theme .home-mission-panel {
  background-image: var(--home-mission);
  border: 1px solid #243b57;
}

/* ---------- 13. Scrollbars ---------- */
::-webkit-scrollbar-track {
  background: #0b1628;
}
::-webkit-scrollbar-thumb {
  background: #243b57;
}

/* ==========================================================================
   Telegram Floating Support Button — UNCHANGED (original design preserved)
   ========================================================================== */
#telegram-floating-support {
  position: fixed;
  bottom: 92px;
  right: 18px;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(0, 136, 204, 0.4);
  z-index: 99999;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.85);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  text-decoration: none;
}
#telegram-floating-support:hover {
  transform: scale(1.06);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(0, 136, 204, 0.6);
}
#telegram-floating-support:active {
  transform: scale(0.95);
}
#telegram-floating-support svg {
  width: 32px;
  height: 32px;
  fill: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* ---------- 14. Primary CTA buttons are blue (no gold/amber fills) ---------- */
.customer-theme .bg-home-gold,
.customer-theme .hover\:bg-home-gold\/90:hover,
.customer-theme .bg-amber-500\/90,
.customer-theme .bg-amber-300\/60 {
  background-color: #1597f5 !important;
  color: #ffffff !important;
  border-color: #1597f5 !important;
}
.customer-theme .bg-home-gold:hover,
.customer-theme .hover\:bg-home-gold\/90:hover {
  background-color: #0d82db !important;
}

/* ---------- 15. Auth / form primary actions = blue (green stays for success + wallet) ---------- */
button[class*="w-full"][class*="h-14"][class*="bg-home-green"],
button[class*="w-full"][class*="h-12"][class*="bg-home-green"],
button[class*="h-12"][class*="bg-home-green"][class*="rounded-xl"] {
  background-color: #1597f5 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
button[class*="w-full"][class*="h-14"][class*="bg-home-green"]:hover,
button[class*="w-full"][class*="h-12"][class*="bg-home-green"]:hover,
button[class*="h-12"][class*="bg-home-green"][class*="rounded-xl"]:hover {
  background-color: #0d82db !important;
}