﻿/* ============================================================
   PREMIUM DARK CASINO THEME — CentV Gaming Platform
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg-body:         #0d1117;
  --bg-surface:      #161b22;
  --bg-surface-2:    #21262d;
  --bg-header:       #010409;
  --accent:          #f0a500;
  --accent-hover:    #d4900a;
  --accent-glow:     rgba(240,165,0,.3);
  --text:            #e6edf3;
  --text-muted:      #8b949e;
  --text-subtle:     #484f58;
  --border:          #30363d;
  --success:         #3fb950;
  --danger:          #f85149;
  --radius:          8px;
  --radius-lg:       14px;
  --shadow:          0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:       0 8px 40px rgba(0,0,0,.7);
  --font:            'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --site-width:      1280px;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
form { padding:0; margin:0; }
h1,h2,h3,h4,h5,hr { margin:0; padding:0; }
p { margin:0; padding:0; font-size:14px; margin-top:10px; line-height:1.7; color:var(--text-muted); }
body {
  margin:0; padding:0;
  background:var(--bg-body);
  font-family:var(--font);
  color:var(--text);
  line-height:1.5;
  overflow-x:hidden;
}

/* ── Layout ─────────────────────────────────────────────── */
#scroll { display:none !important; }
#scroll * { position:absolute; right:0; bottom:0; list-style:none; font-size:0; line-height:0; z-index:-1; }

.website { width:100%; }

/* ── SITE HEADER (slim top bar) ──────────────────────────── */
.site-header {
  background:var(--bg-header);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:200;
  width:100%;
}
.header-bar {
  height:60px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 20px;
}
/* Hamburger toggle (mobile only) */
.sidebar-toggle {
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  width:38px;
  height:38px;
  background:var(--bg-surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  transition:background .2s;
}
.sidebar-toggle:hover { background:var(--bg-surface); }
.sidebar-toggle span { display:block; width:17px; height:2px; background:var(--text); border-radius:2px; }
/* Header spacer pushes auth to right */
.header-spacer { flex:1; }
/* Utility: hide on small screens */
.hidden-sm { display:initial; }

/* Logo */
.header-logo { flex:0 0 auto; display:flex; align-items:center; text-decoration:none; }
.header-logo img { height:46px; width:auto; display:block; }

/* Nav */
.header-nav {
  flex:1;
  display:flex;
  align-items:center;
  gap:2px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.header-nav::-webkit-scrollbar { display:none; }
.nav-item {
  color:rgba(255,255,255,.7);
  text-decoration:none;
  font-size:12px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:8px 12px;
  border-radius:var(--radius);
  white-space:nowrap;
  transition:color .2s, background .2s;
}
.nav-item:hover { color:#fff; background:rgba(255,255,255,.08); }
.nav-item.active { color:var(--accent); background:rgba(240,165,0,.1); }

/* Auth area */
.header-auth {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
.header-login-form {
  display:flex;
  align-items:center;
  gap:6px;
}
.header-input {
  background:var(--bg-surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-family:var(--font);
  font-size:13px;
  height:36px;
  padding:0 10px;
  width:116px;
  transition:border-color .2s;
}
.header-input::placeholder { color:var(--text-subtle); }
.header-input:focus { outline:none; border-color:var(--accent); }
.btn-header-login {
  background:var(--accent);
  color:#1a0a00;
  font-family:var(--font);
  font-size:13px;
  font-weight:700;
  border:none;
  border-radius:var(--radius);
  height:36px;
  padding:0 16px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s;
}
.btn-header-login:hover { background:var(--accent-hover); }
.btn-register-nav {
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:var(--radius);
  font-family:var(--font);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  height:36px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  transition:background .2s, color .2s;
}
.btn-register-nav:hover { background:var(--accent); color:#1a0a00; }
.forgot-link {
  color:var(--text-muted);
  font-size:11px;
  text-decoration:none;
  white-space:nowrap;
}
.forgot-link:hover { color:var(--accent); }
/* Mobile-only login button — shown at ≤700px */
.btn-login-mobile { display:none; }

/* Logged-in header */
.header-user-info {
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:nowrap;
}
.user-stat { font-size:11px; color:var(--text-muted); line-height:1.3; white-space:nowrap; }
.user-stat strong { display:block; color:var(--text); font-size:13px; font-weight:700; }
.user-stat.credits strong { color:var(--accent); }
.header-user-actions { display:flex; align-items:center; gap:6px; }
.btn-play-nav {
  background:var(--accent);
  color:#1a0a00;
  font-family:var(--font);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  border-radius:var(--radius);
  padding:7px 14px;
  white-space:nowrap;
  cursor:pointer;
  border:none;
  transition:background .2s;
}
.btn-play-nav:hover { background:var(--accent-hover); color:#1a0a00; }
.btn-small-link {
  color:var(--text-muted);
  font-size:12px;
  text-decoration:none;
  padding:7px 8px;
  white-space:nowrap;
  transition:color .2s;
}
.btn-small-link:hover { color:var(--text); }

/* ─── SIDEBAR OVERLAY (mobile tap-to-close) ─────────────── */
.sidebar-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  z-index:149;
  cursor:pointer;
}
.sidebar-overlay.active { display:block; }

/* ─── LEFT NAVIGATION SIDEBAR ───────────────────────────── */
.page__navbar {
  position:fixed;
  top:0;
  left:0;
  width:240px;
  height:100vh;
  background:var(--bg-header);
  border-right:1px solid var(--border);
  overflow-y:auto;
  z-index:150;
  transition:transform .25s ease;
  padding-bottom:80px;
  scrollbar-width:thin;
  scrollbar-color:var(--bg-surface-2) transparent;
}
.page__navbar::-webkit-scrollbar { width:4px; }
.page__navbar::-webkit-scrollbar-thumb { background:var(--bg-surface-2); border-radius:2px; }
/* Sidebar logo (desktop) */
.sidebar-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 16px 8px;
  border-bottom:1px solid var(--border);
  text-decoration:none;
}
.sidebar-logo img { height:40px; width:auto; max-width:180px; object-fit:contain; }
/* Promo button in sidebar */
.sidebar-promo { padding:12px 16px 4px; }
.sidebar-btn-promo {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  background:linear-gradient(135deg, var(--accent), #ff8c00);
  color:#1a0a00;
  font-family:var(--font);
  font-size:13px;
  font-weight:700;
  padding:10px 16px;
  border-radius:var(--radius);
  text-decoration:none;
  transition:opacity .2s;
  justify-content:center;
}
.sidebar-btn-promo:hover { opacity:.88; color:#1a0a00; }
.promo-icon { font-size:14px; }
/* Mobile: hide sidebar logo when header logo shows */
.header-logo-mobile { display:none; }

.sidebar-inner { padding-top:4px; }
.sidebar-section-label {
  padding:14px 20px 6px;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--text-subtle);
}
.sidebar-nav {
  list-style:none;
  padding:4px 8px;
  margin:0;
}
.sidebar-nav-item { border-radius:var(--radius); margin-bottom:1px; }
.sidebar-nav-item a {
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 12px;
  color:rgba(255,255,255,.55);
  text-decoration:none;
  font-size:13.5px;
  font-weight:500;
  border-radius:var(--radius);
  transition:color .2s, background .2s;
}
.sidebar-nav-item a:hover { color:#fff; background:rgba(255,255,255,.07); }
.sidebar-nav-item.active a { color:var(--accent); background:rgba(240,165,0,.12); }
.sidebar-nav-item svg { flex-shrink:0; opacity:.65; transition:opacity .2s; }
.sidebar-nav-item a:hover svg, .sidebar-nav-item.active svg { opacity:1; }
.sidebar-actions {
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  border-top:1px solid var(--border);
  margin:12px 0 0;
}
.sidebar-btn-primary {
  display:block;
  background:var(--accent);
  color:#1a0a00;
  font-family:var(--font);
  font-size:13px;
  font-weight:700;
  text-align:center;
  padding:10px 16px;
  border-radius:var(--radius);
  text-decoration:none;
  transition:background .2s;
}
.sidebar-btn-primary:hover { background:var(--accent-hover); color:#1a0a00; }
.sidebar-btn-secondary {
  display:block;
  background:var(--bg-surface-2);
  color:var(--text);
  font-family:var(--font);
  font-size:13px;
  font-weight:600;
  text-align:center;
  padding:9px 16px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  text-decoration:none;
  transition:background .2s;
}
.sidebar-btn-secondary:hover { background:var(--bg-surface); color:var(--text); }

/* ─── MAIN CONTENT AREA (offset by sidebar) ─────────────── */
.page__content {
  margin-left:240px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ─── TOP BAR: PLAY BUTTON + DEPOSIT + USER DROPDOWN ─────── */
.btn-header-play {
  display:inline-flex;
  align-items:center;
  background:linear-gradient(135deg, var(--accent), #ff8c00);
  color:#1a0a00;
  font-family:var(--font);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  border:none;
  border-radius:var(--radius);
  height:36px;
  padding:0 16px;
  cursor:pointer;
  white-space:nowrap;
  transition:opacity .2s;
}
.btn-header-play:hover { opacity:.88; color:#1a0a00; }
.btn-header-secondary {
  display:inline-flex;
  align-items:center;
  background:var(--bg-surface-2);
  color:var(--text);
  border:1px solid var(--border);
  font-family:var(--font);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  border-radius:var(--radius);
  height:36px;
  padding:0 14px;
  white-space:nowrap;
  transition:background .2s;
}
.btn-header-secondary:hover { background:var(--bg-surface); color:var(--text); }
/* User balance display in top bar */
.user-balance { display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; }
.balance-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }
.balance-amount { font-size:14px; font-weight:700; color:var(--accent); }
/* User avatar & dropdown */
.header-user-info { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.header-user-dropdown { position:relative; }
.user-avatar-btn {
  width:36px;
  height:36px;
  background:var(--bg-surface-2);
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--text);
  font-family:var(--font);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .2s, background .2s;
}
.user-avatar-btn:hover { border-color:var(--accent); background:var(--bg-surface); }
.user-dropdown-menu {
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  min-width:190px;
  z-index:300;
  overflow:hidden;
  padding:4px 0;
}
.user-dropdown-menu.open { display:block; }
.user-dropdown-menu a {
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  color:var(--text-muted);
  text-decoration:none;
  font-size:13px;
  transition:background .2s, color .2s;
}
.user-dropdown-menu a:hover { background:var(--bg-surface-2); color:var(--text); }
.user-dropdown-menu hr { border:none; border-top:1px solid var(--border); margin:4px 0; }
.user-dropdown-menu .dropdown-logout { color:var(--danger); }
.user-dropdown-menu .dropdown-logout:hover { background:rgba(248,81,73,.1); color:var(--danger); }

/* Old header classes — kept empty for compat */
.header { display:none; }
.players_text { display:none; }
.loginpanel,.loginform_txt,.loginform_field,.loginform_forgot,.loginform_submit { display:none; }
.txtbox_grad { display:none; }
.container_logo,.container_support,.container_login { display:none; }
#menu,.menu_item_open,.menu_item_closed,.menu_spacer,.mp { display:none; }

/* ── CONTENT ──────────────────────────────────────────────── */
.content {
  padding:28px 24px 40px;
  overflow:hidden; /* clearfix — contains floated game cards */
}

/* ── HERO / GAMES CONTENT ─────────────────────────────────── */
.games_content {
  background:linear-gradient(135deg, #0d0620 0%, #0e1b3d 50%, #1a0e3d 100%);
  border-radius:var(--radius-lg);
  padding:48px 40px;
  display:flex;
  align-items:center;
  gap:40px;
  margin-bottom:32px;
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
  flex-wrap:wrap;
}
.games_content::before {
  content:'';
  position:absolute;
  top:-40%;
  right:-5%;
  width:480px;
  height:480px;
  background:radial-gradient(circle, rgba(240,165,0,.12) 0%, transparent 65%);
  pointer-events:none;
}
.games_content .left {
  flex:1 1 300px;
  float:none;
  width:auto;
  z-index:1;
}
.games_content .left div { margin:0; }
.games_content .left h1 {
  font-size:clamp(22px, 4vw, 38px);
  font-weight:900;
  color:#fff;
  line-height:1.2;
  margin-bottom:14px;
}
.games_content .left p {
  font-size:15px;
  color:rgba(255,255,255,.7);
  line-height:1.65;
  margin:0 0 24px;
}
.games_content .right {
  flex:0 0 auto;
  float:none;
  z-index:1;
  text-align:center;
}
.games_content .right div { margin:0; text-align:center; }
.games_content .right img { max-width:300px; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }

/* Override .blink inside hero as primary CTA button */
.games_content .blink,
.games_content .blink:visited {
  display:inline-flex;
  align-items:center;
  background:linear-gradient(135deg, var(--accent), #ff8c00);
  color:#1a0a00 !important;
  font-family:var(--font);
  font-size:15px;
  font-weight:800;
  text-decoration:none !important;
  border-radius:var(--radius-lg);
  padding:14px 32px;
  box-shadow:0 4px 20px rgba(240,165,0,.4);
  transition:transform .2s, box-shadow .2s;
}
.games_content .blink:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(240,165,0,.5);
  text-decoration:none !important;
  color:#1a0a00 !important;
}

/* ── SEARCH BAR ────────────────────────────────────────────── */
.search-bar-form { margin:0 0 20px; }
.search-bar-wrap {
  display:flex;
  align-items:center;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  height:44px;
  padding:0 14px;
  gap:10px;
  max-width:520px;
  transition:border-color .2s;
}
.search-bar-wrap:focus-within { border-color:var(--accent); }
.search-icon { color:var(--text-subtle); flex-shrink:0; }
.search-bar-input {
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
}
.search-bar-input::placeholder { color:var(--text-subtle); }

/* ── SECTION TITLE ─────────────────────────────────────────── */
.section-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.section-title-left {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text);
  font-size:15px;
  font-weight:700;
}
.section-title-left svg { color:var(--accent); }
.section-title-link {
  font-size:12px;
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}
.section-title-link:hover { text-decoration:underline; }

/* ── CATEGORY GRID (homepage) ─────────────────────────────── */
.category-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-bottom:32px;
}
.games_styles {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  text-align:center;
  float:none;
  max-width:none;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  cursor:pointer;
}
.games_styles:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 36px rgba(0,0,0,.55);
  border-color:rgba(240,165,0,.35);
}
/* Category card label strip (text-based, no img) */
.games_styles > a:first-child {
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #1a0637, #0e2040);
  color:var(--accent);
  font-family:var(--font);
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  padding:8px 12px;
  min-height:34px;
}
.games_styles > a:first-child img { display:none; }
/* thumbnail image */
.games_styles > a:nth-child(2) { display:block; overflow:hidden; }
.games_styles > a:nth-child(2) img {
  width:100%;
  height:185px;
  object-fit:cover;
  display:block;
  transition:transform .3s;
}
.games_styles:hover > a:nth-child(2) img { transform:scale(1.06); }
/* "Ver todos" link */
.games_styles > .blink,
.games_styles > a.blink {
  display:block;
  padding:10px 14px;
  background:var(--bg-surface-2);
  color:var(--accent) !important;
  font-size:13px !important;
  font-weight:700 !important;
  text-decoration:none !important;
  transition:background .2s;
}
.games_styles > .blink:hover,
.games_styles > a.blink:hover {
  background:rgba(240,165,0,.1);
  color:var(--accent-hover) !important;
}
/* hide <br> tags inside category cards */
.games_styles br { display:none; }

/* ── GAME CARDS ──────────────────────────────────────────── */
.game {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  float:left;
  width:calc(50% - 12px);
  min-width:0;
  margin-top:20px;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.game:hover {
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(0,0,0,.65);
  border-color:rgba(240,165,0,.4);
}
/* .game + .game gets 24px gap; PHP odd cards have inline style="margin-left:0" to start new row */
.game + .game { margin-left:24px; }

/* ── SLOTS PAGE GRID: 3-col on desktop ───────────────────── */
.slots-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-top:20px;
}
.slots-grid .game {
  float:none;
  width:100%;
  margin:0 !important;
}
@media (max-width:960px) {
  .slots-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px) {
  .slots-grid { grid-template-columns:1fr; }
}

/* Inner wrapper — flex column to display: screenshot → label → description */
.game > div {
  display:flex;
  flex-direction:column;
  padding:0;
}

/* Game screenshot — render first (top) */
.game .gleft {
  order:1;
  float:none;
  width:100%;
  padding:0;
  overflow:hidden;
  position:relative;
}
.game .gleft a { display:block; }
.game .gleft img {
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
  transition:transform .3s;
}
.game:hover .gleft img { transform:scale(1.05); }
/* Jackpot badge overlay */
.game .gleft b, .game .gleft font {
  display:inline-block;
  position:absolute;
  bottom:8px;
  right:8px;
  background:rgba(0,0,0,.82);
  color:var(--accent);
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:20px;
  border:1px solid var(--accent);
}
.game .gleft br { display:none; }

/* Label strip — below image */
.game .gtitle {
  order:2;
  background:linear-gradient(135deg, #1a0637, #0e2040);
  padding:10px 16px;
  height:auto;
}
.game .gtitle img { display:none; }
.game .gtitle a {
  color:var(--accent);
  font-family:var(--font);
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
}
/* ── IMG SECTION LABELS ────────────────────────────────────── */
.img-label {
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  margin-bottom:14px;
  background:linear-gradient(90deg, rgba(240,165,0,.18), transparent);
  border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--text);
  font-family:var(--font);
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* Description + CTA — bottom */
.game .gright {
  order:3;
  float:none;
  width:100%;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.game .gright .gtop {
  font-size:12px;
  color:var(--text-muted);
  line-height:1.55;
  flex:1;
  height:auto;
  padding:0;
}
.game .gright .gtop div { padding:0; }
/* Replace old btn_knowmore.jpg with modern play button */
.game .gright center { margin-top:12px; text-align:center; }
.game .gright center a { display:inline-block; }
.game .gright center a img { display:none; }
.game .gright center a::before {
  content:'Jogar Agora';
  display:inline-block;
  background:linear-gradient(135deg, var(--accent), #ff8c00);
  color:#1a0a00;
  font-family:var(--font);
  font-size:12px;
  font-weight:700;
  border-radius:var(--radius);
  padding:9px 22px;
  transition:background .2s, transform .1s;
}
.game .gright center a:hover::before {
  background:linear-gradient(135deg, var(--accent-hover), #e07500);
  transform:scale(1.04);
}

/* Game detail page */
.back-nav {
  margin-bottom:16px;
}
.back-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font);
  font-size:13px;
  font-weight:600;
  color:var(--text-subtle);
  text-decoration:none;
  padding:6px 12px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:color .2s, border-color .2s;
}
.back-link:hover { color:var(--accent); border-color:var(--accent); }
.game_main_left { width:58%; float:left; }
/* Prevent game screenshot image from ever overflowing its container */
.game_main_left img { max-width:100%; height:auto; display:block; }
.game_main_left table { max-width:100%; width:100%; }
.game_main_right {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  width:38%;
  float:right;
  min-height:280px;
}
.game_main_right > div { padding:20px; }
/* Clearfix so page doesn't collapse under the floats */
.game_main_left + .game_main_right + * { clear:both; }
.game_basicinfo { display:flex; align-items:flex-start; margin-bottom:10px; }
.game_basicinfo .check { flex:0 0 28px; width:28px; padding:0; display:flex; align-items:center; justify-content:center; }
.game_basicinfo .check img { display:none; }
.game_basicinfo .check::before {
  content:'';
  display:inline-block;
  width:18px;
  height:18px;
  flex-shrink:0;
  background-color:var(--accent);
  border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a0a00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:70%;
  background-repeat:no-repeat;
  background-position:center;
}
.game_basicinfo .text1,
.game_basicinfo .text2 {
  font-family:var(--font); font-size:13px; font-weight:600;
  color:var(--text); padding:0; margin:0;
}
.jackpot-panel {
  background:linear-gradient(135deg, #1a0637, #0e2040);
  border-top:1px solid rgba(240,165,0,.25);
  padding:14px 0;
  height:auto !important;
}
.game_jackpot { font-family:var(--font); font-size:20px; font-weight:800; color:var(--accent); }

/* ── GAME ACTION BUTTONS ────────────────────────────────── */
.game-btn-row { display:flex; gap:10px; margin:12px 0; flex-wrap:wrap; }
.game-btn-row a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 20px;
  background:var(--bg-surface-2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  transition:background .2s, border-color .2s;
}
.game-btn-row a:hover { background:var(--bg-surface); border-color:var(--text-muted); }
.game-btn-row a.btn-play {
  background:linear-gradient(135deg, var(--accent), #ff8c00);
  color:#1a0a00;
  border:none;
}
.game-btn-row a.btn-play:hover { background:linear-gradient(135deg, var(--accent-hover), #e07500); }
.game-btn-row img { height:36px; width:auto; }

/* ── LINK STYLES ──────────────────────────────────────────── */
.blink {
  color:var(--accent);
  font-size:14px;
  text-decoration:none;
  font-weight:600;
}
.blink:hover { text-decoration:underline; color:var(--accent-hover); }
.blink_small { color:var(--accent); font-size:13px; text-decoration:none; }
.blink_small:hover { text-decoration:underline; }
.wlink { color:rgba(255,255,255,.8); font-size:11px; text-decoration:underline; }
.wlink:hover { text-decoration:none; color:#fff; }
.wtext { color:rgba(255,255,255,.8); font-size:11px; }

/* ── REGISTRATION ─────────────────────────────────────────── */
.registration_panel {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:28px;
  width:100%;
  max-width:680px;
}
.registration_panel div { padding:0; }
.registration_left { width:auto; float:none; }
.registration_right { width:auto; float:none; margin-top:16px; }
.registration_why { margin-top:14px; display:flex; align-items:flex-start; }
.registration_why .check { flex:0 0 28px; width:28px; display:flex; align-items:center; justify-content:center; }
.registration_why .check img { display:none; }
.registration_why .check::before {
  content:'';
  display:inline-block;
  width:20px;
  height:20px;
  flex-shrink:0;
  background-color:var(--accent);
  border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a0a00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:70%;
  background-repeat:no-repeat;
  background-position:center;
}
.registration_why .text1,
.registration_why .text2 { font-family:var(--font); font-size:14px; font-weight:600; color:var(--text); padding:0; }
.registration_text { font-family:var(--font); font-size:16px; font-weight:600; color:var(--text); background:var(--bg-surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:0 10px; height:34px; }
.registration_error { font-family:var(--font); font-size:15px; color:var(--danger); font-weight:600; }

/* ── CONTACT ──────────────────────────────────────────────── */
.contact_panel {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:28px;
  width:100%;
  max-width:680px;
}
.contact_panel div { padding:0; }
.contact_left,.contact_right { width:auto; float:none; }
.contact_why { margin-top:14px; display:flex; align-items:flex-start; }
.contact_why .check { flex:0 0 28px; width:28px; display:flex; align-items:center; justify-content:center; }
.contact_why .check img { display:none; }
.contact_why .check::before {
  content:'';
  display:inline-block;
  width:20px;
  height:20px;
  flex-shrink:0;
  background-color:var(--accent);
  border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a0a00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:70%;
  background-repeat:no-repeat;
  background-position:center;
}
.contact_why .text1,
.contact_why .text2 { font-family:var(--font); font-size:14px; font-weight:600; color:var(--text); }
.contact_text { font-family:var(--font); font-size:16px; color:var(--text); }
.contact_error { font-family:var(--font); font-size:15px; color:var(--danger); }

/* ── SUPPORT ──────────────────────────────────────────────── */
.green_text { color:var(--success); font-size:14px; text-align:center; }
.red_text { color:var(--danger); font-size:14px; text-align:center; }
.support_panel {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:28px;
  width:100%;
}
.support_panel div { padding:0; }
.support_left,.support_right { width:auto; float:none; }
.support_left .links {
  width:100%;
  max-width:280px;
  float:left;
  background:var(--bg-surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  line-height:1.9;
}
.support_left .links div { padding:14px; }
.support_left .links a { color:var(--text-muted); text-decoration:none; }
.support_left .links a:hover { color:var(--accent); }
.support_left .advice { float:left; margin-left:16px; }
.support_right div { padding:0 0 12px; }
.resetul { padding:0; margin:0; list-style:none; }
.sp_right_text { color:var(--text); font-size:18px; font-weight:700; }

/* FAQ */
#questions { margin-bottom:20px; padding-left:0; margin-left:20px; }
#questions li {
  background:url(../../img/pt_br/question-mark.png) no-repeat left center;
  list-style-type:none;
  margin-bottom:10px;
  padding:5px 0 5px 30px;
  color:var(--text-muted);
}
div.faq-a { border-bottom:1px solid var(--border); padding:10px 0 7px; }
.return-top { float:right; cursor:pointer; padding-left:20px; color:var(--accent); }

/* ── PROMOTIONS ───────────────────────────────────────────── */
.month_panel {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
  width:100%;
  color:var(--text);
}
.month_panel div { padding:0; }
.promo_panel_left,
.promo_panel_right {
  background:var(--bg-surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  float:left;
  width:calc(50% - 8px);
}
.promo_panel_left { margin-right:8px; }
.promo_panel_right { margin-left:8px; }
.promo_panel_left img,
.promo_panel_right img { float:left; margin:0 12px 0 0; height:60px; width:auto; }
.promo_panel_left div,
.promo_panel_right div { padding:0; }
.promo_sep { clear:both; height:16px; }

/* ── AFFILIATES ───────────────────────────────────────────── */
.affliate_buttons { width:44%; float:left; text-align:center; }
.affliate_banner { float:left; margin-bottom:5px; margin-right:3px; }
.main_affliates { width:50%; float:left; text-align:right; padding-right:10px; }

/* ── MY ACCOUNT ───────────────────────────────────────────── */
.my_account_login_panel {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:28px;
  width:100%;
  max-width:500px;
}
.my_account_login_panel div { padding:0; }
.my_account_login_left { width:auto; float:none; }
.my_account_login_right { width:auto; float:none; text-align:center; margin-top:16px; }
.my_account_main_table {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
  width:100%;
  color:var(--text);
}
.my_account_main_table div { padding:0; }
.my_account_menu { width:100%; max-width:320px; float:left; margin-bottom:16px; }
.my_account_menu .icon { width:68px; float:left; text-align:center; }
.my_account_menu .icon div { padding-top:4px; }
.my_account_menu .content_area { float:left; width:calc(100% - 76px); }
.my_account_menu .content_area .link a { color:var(--accent); font-size:14px; font-weight:700; text-decoration:underline; }
.my_account_menu .content_area .link a:hover { text-decoration:none; }
.my_account_menu .content_area .description { font-size:12px; color:var(--text-muted); padding-top:4px; }
.my_account_buy_paymentform { float:left; width:auto; margin-right:12px; margin-bottom:12px; }
.my_account_points_left { width:auto; float:none; }
.my_account_points_left .product_holder { width:160px; float:left; margin:8px; }
.my_account_points_right {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  float:right;
  width:360px;
  min-height:200px;
  margin-left:16px;
}
.my_account_points_right div { padding:16px; }

/* ── MAIN PAGE ────────────────────────────────────────────── */
.main_content {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.main_content .left { flex:1 1 300px; float:none; width:auto; }
.main_content .right { flex:0 0 auto; float:none; width:auto; text-align:right; }
.main_content .left div,.main_content .right div { margin:0; }
.main_how_works { width:100%; display:flex; flex-wrap:wrap; gap:0; }
.main_how_works .step { flex:1 1 220px; display:flex; align-items:center; padding:12px 0; }
.main_how_works .step .image { width:60px; flex:0 0 60px; text-align:center; }
.main_how_works .step .image div { padding-top:4px; }
.main_how_works .step .text .text-side div { padding-top:0; padding-left:10px; font-size:14px; font-weight:600; color:var(--text); }
.main_games { width:100%; }
.main_games .gamesmall {
  width:calc(33.33% - 8px);
  display:inline-flex;
  align-items:center;
  background:var(--bg-surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:8px;
  margin-bottom:8px;
  float:left;
}
.main_games .gamesmall .image { width:50px; flex:0 0 50px; float:left; }
.main_games .gamesmall .text { width:auto; float:left; flex:1; }
.main_games .gamesmall .text div { padding:0 0 0 8px; font-size:13px; font-weight:600; color:var(--text); }
.main_games .gamesmall .jackpot_small { float:right; }
.main_games .gamesmall .jackpot_small div { text-align:right; font-size:13px; font-weight:700; color:var(--accent); padding:0 4px 0 0; }
.main_testimonal {
  background:var(--bg-surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  width:calc(50% - 8px);
  float:left;
  margin-bottom:8px;
  min-height:60px;
}
.main_testimonal div { padding:14px 18px; font-size:13px; color:var(--text-muted); }

/* ── PANEL / PRIZE ────────────────────────────────────────── */
.panel-prizes {
  background:var(--bg-surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 20px;
  margin-top:12px;
  display:flex;
  gap:24px;
}

/* ── UTILITY ──────────────────────────────────────────────── */
.label1 { color:var(--danger); font-family:var(--font); font-size:12px; font-weight:700; }
.label2 { color:var(--success); font-family:var(--font); font-size:12px; }
.label2B { color:#7baff5; font-family:var(--font); font-size:12px; }
.label2R { color:var(--danger); font-family:var(--font); font-size:12px; }
.label3 { color:var(--danger); font-family:var(--font); font-size:18px; }
.label4 { color:var(--text); font-family:var(--font); font-size:15px; }
.tabletoplabel { color:#ffffff; font-family:var(--font); font-size:15px; }
.inputField {
  color:var(--text); font-family:var(--font); font-size:12px; font-weight:700;
  background:var(--bg-surface-2); border:1px solid var(--border);
  height:30px; border-radius:var(--radius); padding:0 8px;
}
.inputField:focus { outline:none; border-color:var(--accent); }
.submitbutton {
  color:var(--text); font-family:var(--font); font-size:12px; font-weight:700; height:30px;
  background:var(--bg-surface-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:0 12px; cursor:pointer;
}
.submitbutton:hover { border-color:var(--accent); color:var(--accent); }
.errorField {
  color:var(--text); font-family:var(--font); font-size:12px; font-weight:700;
  background:rgba(248,81,73,.1); border:1px solid var(--danger);
  height:30px; border-radius:var(--radius); padding:0 8px;
}
.errorField1 {
  color:var(--danger); font-family:var(--font); font-size:12px; font-weight:700;
  background:rgba(248,81,73,.1); border:1px solid var(--danger);
  height:30px; border-radius:var(--radius); padding:0 8px;
}
.linkSel { color:var(--accent); text-decoration:underline; font-family:var(--font); font-size:12px; font-weight:700; }
.linkSel:hover { color:var(--accent-hover); text-decoration:underline; }
.link { color:var(--accent); text-decoration:underline; font-family:var(--font); font-size:12px; font-weight:700; }
.link:hover { color:var(--accent-hover); text-decoration:none; }
.linkSm { color:var(--accent); text-decoration:none; font-family:var(--font); font-size:12px; font-weight:700; }
.linkSm:hover { text-decoration:underline; }
.menuLink { color:var(--text); text-decoration:none; font-family:var(--font); font-size:16px; font-weight:700; text-transform:uppercase; }
.menuLink:hover { text-decoration:none; }
.tableBr { border:1px solid var(--border); }
.labelTop { color:var(--accent); font-family:var(--font); font-size:22px; font-weight:700; }
.menuTopSEL { text-decoration:none; font-family:var(--font); font-weight:700; color:var(--success); font-size:14px; }
.menuTop { text-decoration:none; font-family:var(--font); font-weight:700; color:rgba(255,255,255,.8); font-size:14px; }
.menuTop:hover { color:#fff; }
.menuTop22 { text-decoration:none; font-family:var(--font); font-weight:700; color:var(--accent); font-size:14px; }
.menuTop22:hover { color:var(--accent-hover); }
.bottomText { font-family:var(--font); font-size:10px; color:var(--text-muted); text-decoration:underline; }
.bottomText:hover { color:var(--text); text-decoration:none; }
.footer { clear:both; background:var(--bg-surface-2); border:1px solid var(--border); border-radius:var(--radius); }
.footer div { margin-left:5px; }
.b1,.b2,.b3,.b4 { display:none; }

/* ── SITE FOOTER ──────────────────────────────────────────── */
.site-footer {
  background:#010409;
  border-top:1px solid var(--border);
  margin-top:8px;
}
.footer-inner {
  max-width:var(--site-width);
  margin:0 auto;
  padding:48px 20px 0;
}
.footer-columns {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
}
.footer-col h4 {
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:rgba(255,255,255,.5);
  margin-bottom:14px;
}
.footer-col p {
  font-size:13px;
  color:var(--text-muted);
  line-height:1.7;
  margin-top:0;
}
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col ul li { margin-bottom:8px; }
.footer-col ul li a {
  color:var(--text-muted);
  text-decoration:none;
  font-size:13px;
  transition:color .2s;
}
.footer-col ul li a:hover { color:var(--accent); }
.footer-badges {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:12px;
}
.footer-badges img {
  height:28px;
  width:auto;
  opacity:.7;
  filter:grayscale(30%);
  transition:opacity .2s, filter .2s;
}
.footer-badges img:hover { opacity:1; filter:none; }
.footer-disclaimer {
  border-top:1px solid var(--border);
  padding:20px 0;
  font-size:11px;
  color:var(--text-subtle);
  line-height:1.7;
  text-align:center;
}
.footer-bottom {
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 0 24px;
  flex-wrap:wrap;
  gap:10px;
}
.footer-copyright { font-size:12px; color:var(--text-subtle); }
.footer-bottom-links { display:flex; gap:20px; flex-wrap:wrap; }
.footer-bottom-links a {
  color:var(--text-subtle);
  text-decoration:none;
  font-size:12px;
  transition:color .2s;
}
.footer-bottom-links a:hover { color:var(--text-muted); }

/* Old footer classes (compat) */
.bottom_content,.footer_icons,.footer_text,.footer_links { display:none; }
.copyright_text,.favorites_text { display:none; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:1100px) {
  .header-login-form { gap:4px; }
  .header-input { width:90px; }
}
/* Sidebar collapses — hamburger shows */
@media (max-width:960px) {
  .sidebar-toggle { display:flex; }
  .page__navbar { transform:translateX(-240px); top:0; }
  .page__navbar.open { transform:translateX(0); }
  .page__content { margin-left:0; }
  .header-logo-mobile { display:flex; }
  .sidebar-logo { display:none; }
  .game { width:100%; float:none; margin-left:0 !important; }
  .game + .game { margin-left:0 !important; }
  .game_main_left { width:100%; float:none; }
  .game_main_right { width:100%; float:none; margin-top:16px; }
  .games_content { padding:32px 24px; }
  .footer-columns { grid-template-columns:1fr 1fr; gap:28px; }
  .promo_panel_left,.promo_panel_right { width:100%; float:none; margin:0 0 12px 0; }
  .my_account_points_right { width:100%; float:none; margin-left:0; margin-top:16px; }
  .main_games .gamesmall { width:calc(50% - 8px); }
}
@media (max-width:700px) {
  .category-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .games_content { 
    padding:24px 20px; 
    gap:24px; 
    text-align:center; 
  }
  .games_content .left { 
    flex:1 1 100%;
    text-align:center; 
  }
  .games_content .right { display:none; }
  .games_content .left h1 { font-size:24px; }
  .games_content .left p { font-size:14px; margin-bottom:18px; }
  .header-login-form { display:none; }
  .forgot-link { display:none; }
  .btn-login-mobile {
    display:inline-flex;
    align-items:center;
    background:rgba(240,165,0,.15);
    color:var(--accent);
    border:1px solid var(--accent);
    border-radius:var(--radius);
    font-family:var(--font);
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    height:32px;
    padding:0 12px;
    white-space:nowrap;
  }
  .hidden-sm { display:none !important; }
  .footer-columns { grid-template-columns:1fr; gap:24px; }
  .main_games .gamesmall { width:100%; }
  .main_testimonal,.affliate_buttons,.main_affliates { width:100%; float:none; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .game + .game { margin-left:0 !important; margin-top:16px; }
}
@media (max-width:600px) {
  .content { padding:16px 14px 32px; }
  .games_content { 
    padding:20px 16px; 
    gap:18px;
    margin-bottom:24px; 
  }
  .games_content .left h1 { font-size:20px; margin-bottom:10px; }
  .games_content .left p { font-size:13px; line-height:1.5; margin-bottom:16px; }
  .games_content .blink { padding:11px 24px; font-size:14px; }
  .header-bar { padding:10px 12px; }
  .category-grid { grid-template-columns:1fr; gap:12px; }
  .game { width:100%; float:none; margin-left:0 !important; margin-top:16px; }
  .game + .game { margin-left:0 !important; margin-top:16px; }
  /* Game detail page — phone fixes */
  .game_main_left { width:100%; float:none; overflow:hidden; }
  .game_main_right { width:100%; float:none; margin-top:16px; padding:0; }
  .game_main_right > div { padding:16px; }
  .game_main_left h1 { font-size:18px; margin-bottom:8px; }
  .game_main_left img { max-width:100%; height:auto; border-radius:var(--radius); }
  /* Stack jackpot values vertically so they don't overflow */
  .jackpot-panel table { display:block; }
  .jackpot-panel tr { display:flex; flex-direction:column; padding:0 12px; }
  .jackpot-panel td:first-child { display:none; }
  .game_jackpot { font-size:14px !important; padding:3px 0; }
  /* Section titles responsive */
  .section-title { font-size:14px; margin:20px 0 12px; padding:0; }
  .section-title-left { gap:6px; }
  .section-title svg { width:16px; height:16px; }
  .section-title-link { font-size:12px; }
  /* Search bar responsive */
  .search-bar-form { margin:16px 0; }
  .search-bar-input { font-size:14px; padding:0 12px 0 36px; }
  .back-nav { clear:both; margin-bottom:12px; }
}
