/* ============================================================
   STYLE V2 — Modern UI Refresh (2026)
   Overlay & enhancements for the public frontend.
   Dark glassmorphism, smooth animations, modern cards.
   ============================================================ */

/* ── CSS Variables (inherits dynamic $warnadasar via inline) ── */
:root {
  --v2-bg-deep:    #060d24;
  --v2-bg-card:    rgba(18, 24, 58, .72);
  --v2-bg-glass:   rgba(255,255,255,.04);
  --v2-border:     rgba(255,255,255,.08);
  --v2-text:       #e4e6f0;
  --v2-text-muted: #8b8fa7;
  --v2-accent:     var(--site-accent, #0b7dda);
  --v2-accent-glow:rgba(11,125,218,.35);
  --v2-success:    #00d68f;
  --v2-danger:     #ff3d71;
  --v2-warning:    #ffaa00;
  --v2-radius:     12px;
  --v2-radius-sm:  8px;
  --v2-radius-lg:  18px;
  --v2-shadow:     0 8px 32px rgba(0,0,0,.38);
  --v2-transition: .28s cubic-bezier(.4,0,.2,1);
}

/* ── Global Reset / Smoothing ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--v2-bg-deep) !important;
  color: var(--v2-text) !important;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Subtle animated gradient background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(11,125,218,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(100,50,200,.08) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* ── Scrollbar Modern ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--v2-accent);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--v2-accent) 80%, white); }


/* ── Typography Enhancement ───────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}

a {
  color: var(--v2-accent);
  text-decoration: none;
  transition: color var(--v2-transition);
}
a:hover { color: color-mix(in srgb, var(--v2-accent) 70%, white); text-decoration: none; }

small { color: var(--v2-text-muted); }


/* ── Progress Bar (top) ───────────────────────────────────── */
.progress-bar-custom {
  background: linear-gradient(90deg, var(--v2-accent), #7c4dff) !important;
  height: 3px !important;
  border-radius: 0 0 3px 0;
}

/* ── Cards — Glassmorphism ────────────────────────────────── */
.card {
  background: var(--v2-bg-card) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--v2-border) !important;
  border-radius: var(--v2-radius) !important;
  box-shadow: var(--v2-shadow);
  transition: transform var(--v2-transition), box-shadow var(--v2-transition);
  overflow: hidden;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--v2-border) !important;
  padding: 1rem 1.25rem;
}
.card-body {
  background: transparent !important;
  padding: 1.25rem;
}
.card-title { color: #fff !important; font-weight: 600; }


/* ── Buttons — Modern pill style ──────────────────────────── */
.btn {
  border-radius: var(--v2-radius-sm) !important;
  font-weight: 600;
  letter-spacing: .02em;
  transition: all var(--v2-transition) !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--v2-transition);
  border-radius: inherit;
  pointer-events: none;
}
.btn:hover::after { background: rgba(255,255,255,.08); }
.btn:active { transform: scale(.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--v2-accent), #1e88e5) !important;
  box-shadow: 0 4px 16px var(--v2-accent-glow);
}
.btn-primary:hover { box-shadow: 0 6px 24px var(--v2-accent-glow); }

.btn-success {
  background: linear-gradient(135deg, #00b074, var(--v2-success)) !important;
  box-shadow: 0 4px 16px rgba(0,214,143,.25);
}

.btn-danger {
  background: linear-gradient(135deg, #e53935, var(--v2-danger)) !important;
  box-shadow: 0 4px 16px rgba(255,61,113,.25);
}

.btn-warning {
  background: linear-gradient(135deg, #e68a00, var(--v2-warning)) !important;
  color: #fff !important;
}

.btn-info {
  background: linear-gradient(135deg, #0097a7, #00bcd4) !important;
}

.btn-sm {
  padding: .4rem .9rem !important;
  font-size: .8rem !important;
  border-radius: var(--v2-radius-sm) !important;
}

/* Gradient button enhancements */
.btn-gradient-yoda,
.btn-gradient-violet {
  border-radius: var(--v2-radius-sm) !important;
}


/* ── Form Controls ────────────────────────────────────────── */
.form-control,
.form-select {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--v2-border) !important;
  color: var(--v2-text) !important;
  border-radius: var(--v2-radius-sm) !important;
  padding: .6rem 1rem;
  transition: all var(--v2-transition);
}
.form-control:focus,
.form-select:focus {
  background: rgba(255,255,255,.08) !important;
  border-color: var(--v2-accent) !important;
  box-shadow: 0 0 0 3px var(--v2-accent-glow) !important;
  outline: none;
}
.form-control::placeholder { color: var(--v2-text-muted) !important; }

/* Select2 override */
.select2-container--default .select2-selection--single {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--v2-border) !important;
  border-radius: var(--v2-radius-sm) !important;
}


/* ── Navbar / Top Menu ────────────────────────────────────── */
.mcp-top-header header {
  background: rgba(6,13,36,.85) !important;
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--v2-border);
}

.site-header {
  background: var(--v2-bg-glass) !important;
  border-bottom: 1px solid var(--v2-border);
  margin-bottom: .5rem;
}
.site-header .nav-link {
  color: var(--v2-text) !important;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .5rem .25rem !important;
  transition: color var(--v2-transition), transform var(--v2-transition);
}
.site-header .nav-link:hover {
  color: var(--v2-accent) !important;
  transform: translateY(-2px);
}
.site-header .nav-link img {
  filter: brightness(1.1) drop-shadow(0 2px 6px rgba(0,0,0,.4));
  transition: transform var(--v2-transition);
}
.site-header .nav-link:hover img {
  transform: scale(1.12);
}

/* Marquee / News ticker */
.notificationtext {
  background: rgba(11,125,218,.1) !important;
  border-radius: 0;
  font-size: .82rem;
  color: var(--v2-text-muted);
}

/* Dropdown menus */
.dropdown-menu {
  background: rgba(18,24,58,.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--v2-border) !important;
  border-radius: var(--v2-radius) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  animation: v2DropIn .2s ease-out;
}
.dropdown-item {
  color: var(--v2-text) !important;
  border-radius: var(--v2-radius-sm);
  padding: .5rem .75rem;
  transition: background var(--v2-transition);
}
.dropdown-item:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

@keyframes v2DropIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Side Navigation (mobile drawer) ─────────────────────── */
.sidenav {
  background: rgba(6,13,36,.96) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid var(--v2-border);
  box-shadow: -8px 0 40px rgba(0,0,0,.5);
}
.sidenav a {
  transition: all var(--v2-transition);
  border-radius: var(--v2-radius-sm);
}
.sidenav a:hover {
  background: rgba(255,255,255,.06);
  padding-left: 1rem;
}


/* ── Carousel / Slider ────────────────────────────────────── */
.carousel-item img,
.swiper-slide img {
  border-radius: var(--v2-radius-lg) !important;
}
.carousel-indicators li,
.carousel-indicators button {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background-color: rgba(255,255,255,.4) !important;
  transition: all var(--v2-transition);
}
.carousel-indicators .active {
  background-color: var(--v2-accent) !important;
  transform: scale(1.2);
}


/* ── Game Cards / Grid ────────────────────────────────────── */
.gamelistcard,
.card-game,
[class*="game-card"] {
  border-radius: var(--v2-radius) !important;
  overflow: hidden;
  transition: all var(--v2-transition);
}
.gamelistcard:hover,
.card-game:hover,
[class*="game-card"]:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.gamelistcard img,
.card-game img {
  transition: transform .4s ease;
}
.gamelistcard:hover img,
.card-game:hover img {
  transform: scale(1.08);
}


/* ── Tables — Modern ──────────────────────────────────────── */
.table {
  color: var(--v2-text) !important;
}
.table thead th {
  background: rgba(255,255,255,.04) !important;
  border-color: var(--v2-border) !important;
  color: var(--v2-text-muted) !important;
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.table td {
  border-color: var(--v2-border) !important;
  vertical-align: middle;
}
.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255,255,255,.02) !important;
}
.table-hover tbody tr:hover {
  background: rgba(11,125,218,.06) !important;
}


/* ── Modal ─────────────────────────────────────────────────── */
.modal-content {
  background: rgba(18,24,58,.96) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--v2-border) !important;
  border-radius: var(--v2-radius-lg) !important;
  box-shadow: var(--v2-shadow);
}
.modal-header { border-color: var(--v2-border) !important; }
.modal-footer { border-color: var(--v2-border) !important; }


/* ── Badges / Pills ───────────────────────────────────────── */
.badge {
  border-radius: 99px !important;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .35em .7em;
}
.badge-success, .bg-success { background: var(--v2-success) !important; }
.badge-danger, .bg-danger   { background: var(--v2-danger) !important; }
.badge-warning, .bg-warning { background: var(--v2-warning) !important; color: #fff !important; }
.badge-info, .bg-info       { background: var(--v2-accent) !important; }


/* ── Togel Section ────────────────────────────────────────── */
.togelheader {
  background: var(--v2-bg-card) !important;
  border: 1px solid var(--v2-border) !important;
  border-radius: var(--v2-radius) !important;
  padding: .75rem 1rem;
}


/* ── Footer ───────────────────────────────────────────────── */
.bg-footer {
  background: linear-gradient(180deg, transparent 0%, rgba(6,13,36,.95) 10%) !important;
  border-top: 1px solid var(--v2-border);
}

.product-tile__clip-path {
  background: linear-gradient(180deg, transparent, var(--v2-bg-deep)) !important;
}

/* Fixed bottom nav */
.footerfixedcontent {
  z-index: 1040;
}
.footercontentdesktop {
  background: rgba(6,13,36,.92) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--v2-border) !important;
}
.footercontenttext {
  font-size: 1.2rem;
  transition: transform var(--v2-transition);
}
.footerfixedcontent a:hover .footercontenttext {
  transform: translateY(-2px);
}


/* ── Auth Pages (Login / Register / Forgot) ───────────────── */
.auth-card,
.card[style*="151819"],
.card[style*="background"] {
  background: var(--v2-bg-card) !important;
  border: 1px solid var(--v2-border) !important;
}


/* ── Owl Carousel (mobile nav) ────────────────────────────── */
.owl-carousel .owl-item {
  transition: transform var(--v2-transition);
}
.owl-carousel .owl-item:hover {
  transform: scale(1.05);
}
.gamelistmenumobile {
  filter: brightness(1.1) drop-shadow(0 2px 6px rgba(0,0,0,.35));
  transition: transform var(--v2-transition);
}
.gamelistmenumobile:hover { transform: scale(1.1); }


/* ── Member Dashboard ─────────────────────────────────────── */
.provBalance {
  background: transparent !important;
}
.provBalance td {
  border-color: var(--v2-border) !important;
}


/* ── Animations ───────────────────────────────────────────── */
@keyframes v2FadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v2Pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}
@keyframes v2Shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.v2-fade-up { animation: v2FadeUp .5s ease-out both; }
.v2-pulse { animation: v2Pulse 2s ease-in-out infinite; }

/* Lazy skeleton shimmer */
img.lazyload:not([src]) {
  background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 75%);
  background-size: 200% 100%;
  animation: v2Shimmer 1.5s ease-in-out infinite;
  border-radius: var(--v2-radius);
  min-height: 60px;
}


/* ── Utilities ────────────────────────────────────────────── */
.v2-glass {
  background: var(--v2-bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
}
.v2-glow {
  box-shadow: 0 0 20px var(--v2-accent-glow);
}


/* ── Responsive ───────────────────────────────────────────── */

/* Mobile header hamburger */
.v2-mobile-header {
  background: rgba(6,13,36,.9) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--v2-border);
}
.v2-hamburger {
  background: transparent !important;
  border: 1px solid var(--v2-border) !important;
  color: #F1F1FF !important;
  font-size: 20px;
  padding: 6px 10px !important;
  border-radius: var(--v2-radius-sm) !important;
  transition: all var(--v2-transition);
}
.v2-hamburger:hover {
  background: rgba(255,255,255,.08) !important;
}

@media (max-width: 575px) {
  .card {
    border-radius: var(--v2-radius-sm) !important;
  }
  .carousel-item img,
  .swiper-slide img {
    border-radius: var(--v2-radius) !important;
  }
  .site-header .nav-link {
    font-size: .7rem;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .container { max-width: 95%; }
}

@media (min-width: 992px) {
  /* Slight parallax header */
  .mcp-top-header {
    position: sticky;
    top: 0;
    z-index: 1030;
  }
}


/* ── DataTables Override ──────────────────────────────────── */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--v2-border) !important;
  color: var(--v2-text) !important;
  border-radius: var(--v2-radius-sm) !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--v2-text-muted) !important;
}
.page-item .page-link {
  background: rgba(255,255,255,.04) !important;
  border-color: var(--v2-border) !important;
  color: var(--v2-text) !important;
  border-radius: var(--v2-radius-sm) !important;
  margin: 0 2px;
}
.page-item.active .page-link {
  background: var(--v2-accent) !important;
  border-color: var(--v2-accent) !important;
  color: #fff !important;
}


/* ── Jackpot Counter ──────────────────────────────────────── */
.jackpotcounterdesktop,
.jackpotcountermobile,
[class*="jackpot"] {
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}


/* ── Alert / Notif ────────────────────────────────────────── */
.alert {
  border: 1px solid var(--v2-border) !important;
  border-radius: var(--v2-radius-sm) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.alert-success { background: rgba(0,214,143,.12) !important; border-color: rgba(0,214,143,.25) !important; }
.alert-danger  { background: rgba(255,61,113,.12) !important; border-color: rgba(255,61,113,.25) !important; }
.alert-warning { background: rgba(255,170,0,.12) !important; border-color: rgba(255,170,0,.25) !important; }
.alert-info    { background: rgba(11,125,218,.12) !important; border-color: rgba(11,125,218,.25) !important; }