/* ==========================================================================
   Finex — MetaFuture-inspired Purple/Violet/Pink palette (no orange/gold)
   Loads AFTER gold-theme.css (and bg-animation.css). Redefines the SAME
   --gt-* variables gold-theme.css's ~470 lines of card/table/form/badge/
   button overrides already read from — so this file only needs to change
   the palette itself, not duplicate all of that. A few spots in
   bg-animation.css / gold-theme.css use a hardcoded rgba() instead of a
   var (documented inline below) — those are re-declared here explicitly.
   The --gt-gold-* variable names are unchanged from the original gold
   theme (kept so every existing override that already reads them just
   works) but now hold the purple/violet/pink brand accent, not gold.
   ========================================================================== */

:root {
  /* ---- Base surfaces: deep purple ---- */
  --gt-bg: #1a1030;
  --gt-bg-elevated: #251841;
  --gt-card-bg: #2b1c4d;
  --gt-card-border: #45316f;
  --gt-sidebar-bg: #170c28;
  --gt-header-bg: rgba(23, 12, 40, 0.9);

  /* ---- Accent: purple -> violet -> pink (same 3 stops as the hero banners) ---- */
  --gt-gold-1: #e84fc9;
  --gt-gold-2: #8b3fd6;
  --gt-gold-3: #4a2f7a;
  --gt-gold-2-rgb: 139, 63, 214;

  --gt-text: #ece5f7;
  --gt-text-muted: #ab9bcf;
  --gt-heading: #ffffff;

  --gt-border: #3c2c63;
  --gt-border-light: #503c80;

  /* Info accent — a lighter lavender, still distinct from the main violet */
  --gt-info: #c9a8ff;
  --gt-info-rgb: 201, 168, 255;

  /* ---- Typography — Poppins everywhere, loaded via Google Fonts in <head> ---- */
  --bs-font-sans-serif: "Poppins", "Inter var", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}
body, .pc-container, .card, .btn, h1, h2, h3, h4, h5, h6,
.fx-value, .fx-label, .fx-brand-name, .fx-brand-tag {
  font-family: "Poppins", "Inter var", sans-serif;
}

/* ---- bg-animation.css hardcodes these instead of reading --gt-* vars ---- */
body {
  background: #1a1030;
}
.auth-main .auth-wrapper.v1 .auth-form {
  background:
    radial-gradient(circle at 30% 20%, rgba(232, 79, 201, 0.14), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(122, 61, 219, 0.35), transparent 55%),
    #1a1030;
}
.ball {
  background: linear-gradient(259.53deg, #e84fc940 6.53%, #7a3ddb33 95.34%);
}

/* ---- gold-theme.css bakes a literal gold rgba() into the card shadow ring ---- */
.card {
  --bs-card-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 63, 214, 0.08);
}

/* ---- preset-8 hardcoded rgba() tints (badges/alerts/bg-light-primary etc.) ---- */
[data-pc-preset=preset-8] .bg-light-primary {
  background: rgba(139, 63, 214, 0.14);
}
[data-pc-preset=preset-8] .btn-primary {
  --bs-btn-focus-shadow-rgb: 139, 63, 214;
}
[data-pc-preset=preset-8] .accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(139, 63, 214, 0.25);
  --bs-accordion-active-bg: rgba(139, 63, 214, 0.12);
}
[data-pc-preset=preset-8] .alert-primary {
  --bs-alert-bg: rgba(139, 63, 214, 0.14);
  --bs-alert-border-color: rgba(139, 63, 214, 0.3);
}
[data-pc-preset=preset-8] .list-group-item-primary {
  background-color: rgba(139, 63, 214, 0.14);
}
[data-pc-preset=preset-8] .btn-light-primary {
  background: rgba(139, 63, 214, 0.14);
  border-color: rgba(139, 63, 214, 0.14);
}

.form-control:focus, .datatable-input:focus, .custom-select:focus,
.dataTable-selector:focus, .dataTable-input:focus, .form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(139, 63, 214, 0.25);
}

.bg-light-primary { background: rgba(139, 63, 214, 0.14); }
.badge.bg-light-primary { background: rgba(139, 63, 214, 0.18); }

/* ==========================================================================
   .btn-info — vendor bakes a literal cyan/teal into this one too (same issue
   documented for .btn-primary in gold-theme.css), so a CSS-variable
   redefinition alone doesn't reach it. Used for "Connect Wallet" — a lighter
   lavender keeps it visually distinct from the deeper-violet primary CTA.
   ========================================================================== */
[data-pc-preset=preset-8] .btn-info {
  --bs-btn-color: #2b1c4d;
  --bs-btn-bg: var(--gt-info);
  --bs-btn-border-color: var(--gt-info);
  --bs-btn-hover-color: #2b1c4d;
  --bs-btn-hover-bg: #ddc4ff;
  --bs-btn-hover-border-color: #ddc4ff;
  --bs-btn-focus-shadow-rgb: var(--gt-info-rgb);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #a06ee0;
  --bs-btn-active-border-color: #a06ee0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
  --bs-btn-disabled-color: #2b1c4d;
  --bs-btn-disabled-bg: var(--gt-info);
  --bs-btn-disabled-border-color: var(--gt-info);
}

/* ==========================================================================
   Alerts — .alert-primary is already covered by preset-8 above; success/
   danger/warning/info still render Bootstrap's stock light-mode colors
   (bright mint/pink/etc.) which clash hard on a dark purple card.
   ========================================================================== */
.alert-success {
  --bs-alert-color: var(--gt-gold-1);
  --bs-alert-bg: rgba(139, 63, 214, 0.14);
  --bs-alert-border-color: rgba(139, 63, 214, 0.32);
}
.alert-danger {
  --bs-alert-color: #ff9a9d;
  --bs-alert-bg: rgba(229, 72, 77, 0.14);
  --bs-alert-border-color: rgba(229, 72, 77, 0.32);
}
.alert-warning {
  --bs-alert-color: #ffcf7a;
  --bs-alert-bg: rgba(245, 166, 35, 0.14);
  --bs-alert-border-color: rgba(245, 166, 35, 0.32);
}
.alert-info {
  --bs-alert-color: #d5c1ff;
  --bs-alert-bg: rgba(176, 135, 242, 0.14);
  --bs-alert-border-color: rgba(176, 135, 242, 0.32);
}

/* ==========================================================================
   Checkboxes/radios — Bootstrap's own unchecked state is a plain white box
   with a light-gray border, invisible against a dark card. Checked state is
   already themed by gold-theme.css's preset-8 override (follows --gt-gold-2
   automatically), this only fixes the unchecked/focus states.
   ========================================================================== */
.form-check-input {
  background-color: var(--gt-bg-elevated);
  border: 1px solid var(--gt-border-light);
}
.form-check-input:focus {
  border-color: var(--gt-gold-2);
  box-shadow: 0 0 0 0.2rem rgba(139, 63, 214, 0.25);
}

/* ==========================================================================
   Primary CTA shine sweep — a soft light band drifts across the button every
   few seconds. Purely decorative, GPU-cheap (transform-only), pauses between
   sweeps instead of looping constantly.
   ========================================================================== */
.btn-primary, .btn-info, .message #ok {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after, .btn-info::after, .message #ok::after {
  content: "";
  position: absolute;
  inset: 0;
  left: -75%;
  width: 50%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  animation: mf-shine 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mf-shine {
  0% { left: -75%; }
  35% { left: 130%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after, .btn-info::after, .message #ok::after {
    animation: none;
    display: none;
  }
}

/* ==========================================================================
   Logo shine — a bright highlight band drifts across the "MetaFuture"
   gradient-text wordmark. Named globally so each page's own .fx-brand-name
   rule (in master.blade.php / sign-in / sign-up / forgot-pass — each has
   its own inline <style> block that loads after this file, so it owns the
   winning declaration) can just reference this keyframe by name.
   ========================================================================== */
@keyframes mf-text-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   Mobile report tables — My Slots, Business Activity, Slot Wise Team,
   Retopup Income, Auto Upgrade, Transactions all share the same
   `.table-responsive` + inline-styled `<td>/<th>` pattern. Those inline
   styles (padding:0.75rem etc.) win over a normal stylesheet rule, so this
   needs !important to actually shrink things down on narrow phones instead
   of just relying on table-responsive's horizontal scroll, which was
   forcing already-short truncated tx hashes to wrap one character per line.
   ========================================================================== */
@media (max-width: 576px) {
  .table-responsive table th,
  .table-responsive table td {
    padding: 0.4rem !important;
    font-size: 0.72rem !important;
  }
}

/* ==========================================================================
   Success popup (cute-alert plugin, assets/common/alert/) — MetaFuture
   rebrand: gradient header instead of the plugin's flat green, generous
   rounded corners, and the same shine sweep already used on primary
   buttons (.btn-primary::after above — identical technique, reused here).
   Loaded on every page via master.blade.php, so this applies site-wide
   immediately; only the success state is restyled per request — error/
   warning/info/question keep the plugin's own defaults for now.
   ========================================================================== */
.alert-frame {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(139, 63, 214, 0.15);
}
.alert-header.success-bg {
  background: linear-gradient(120deg, #4a2f7a 0%, #8b3fd6 50%, #e84fc9 100%) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.alert-header.success-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  left: -75%;
  width: 50%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: mf-shine 3.6s ease-in-out infinite;
  pointer-events: none;
}
.alert-button.success-bg.success-btn {
  background: linear-gradient(120deg, #8b3fd6, #e84fc9) !important;
  border-radius: 999px;
  font-weight: 700;
}
.alert-button.success-bg.success-btn:hover {
  opacity: 0.9;
}
.success-timer {
  background: linear-gradient(90deg, #8b3fd6, #e84fc9) !important;
}
@media (prefers-reduced-motion: reduce) {
  .alert-header.success-bg::after { animation: none; display: none; }
}