/* =========================
   THEME TOKENS
========================= */
:root{
  --bg: #f7f7f5;
  --surface: rgba(255,255,255,.9);
  --surface-2: rgba(255,255,255,.95);
  --border: rgba(17,17,17,.12);
  --text: #0b0b0b;
  --muted: rgba(11,11,11,.62);

  --card: #ffffff;
  --cardText: #0b0b0b;
  --cardMuted: rgba(11,11,11,.55);

  --primary: #facc15;
  --primaryDark: #eab308;

  --shadow: 0 18px 40px rgba(17,17,17,.12);
  --shadowSoft: 0 10px 24px rgba(17,17,17,.08);

  --r-xl: 18px;
  --r-lg: 14px;
  --r-md: 12px;

  --gap: 14px;
}

/* =========================
   BASE LAYOUT
========================= */
body{
  background: radial-gradient(1200px 700px at 20% 10%, rgba(250,204,21,.25), transparent 60%),
              radial-gradient(900px 600px at 80% 30%, rgba(17,17,17,.08), transparent 55%),
              var(--bg);
  color: var(--text);
}

.container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px;
}

.page{
  padding: 8px 0 24px;
}

/* =========================
   TOP NAV / HEADER
========================= */
header, .top-bar, .nav{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadowSoft);
}

header{
  padding: 14px 14px;
  margin: 14px auto;
  max-width: 1120px;
}

header img, .logo{
  border-radius: 12px;
}

/* =========================
   BUTTONS
========================= */
button, .btn{
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  padding: 10px 12px;
  cursor: pointer;
  transition: transform .06s ease, filter .12s ease, background .12s ease;
  font-weight: 650;
}

button:hover, .btn:hover{ filter: brightness(1.06); }
button:active, .btn:active{ transform: translateY(1px); }
button:disabled{ opacity: .55; cursor: not-allowed; }

.btn-primary{
  background: rgba(250,204,21,.35);
  border-color: rgba(250,204,21,.7);
}
.btn-primary:hover{ filter: brightness(1.05); }

.btn-danger{
  background: #111111;
  border-color: #111111;
  color: #facc15;
}

/* =========================
   INPUTS
========================= */
input, select, textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  outline: none;
}

input::placeholder, textarea::placeholder{ color: rgba(17,17,17,.45); }
input:focus, select:focus, textarea:focus{
  border-color: rgba(250,204,21,.7);
  box-shadow: 0 0 0 4px rgba(250,204,21,.2);
}

/* =========================
   SECTIONS / PANELS
========================= */
.panel{
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadowSoft);
  padding: 14px;
}

/* =========================
   LISTINGS GRID + CARDS
========================= */
#listingsGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gap);
  margin-top: 14px;
}

.listing-card{
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: var(--shadowSoft);
  overflow: hidden;
  padding: 12px;
}

.listing-card img{
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(17,17,17,.08);
  margin-bottom: 10px;
}

.listing-card strong{ font-size: 16px; }
.listing-card div{ color: var(--muted); margin-top: 4px; }

.listing-actions{
  display:flex;
  gap:10px;
  margin-top: 12px;
}

.listing-action-btn{
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #ffffff;
}

.listing-action-btn.danger{
  background: #111111;
  border-color: #111111;
  color: #facc15;
}

/* =========================
   FORMS (ADD LISTING PAGE)
========================= */
#listingForm{
  display: grid;
  gap: 12px;
}

.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){
  .form-row{ grid-template-columns: 1fr; }
}

/* =========================
   CHAT PAGE POLISH
========================= */
#chatPage .chat-container{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
}
@media (max-width: 860px){
  #chatPage .chat-container{ grid-template-columns: 1fr; }
}

.room-item{
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  margin-bottom: 8px;
}
.room-item.active{
  border-color: rgba(34,197,94,.55);
  background: rgba(34,197,94,.12);
}

.chat-message{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.chat-message-meta{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255,255,255,.70);
  font-size: 12px;
  margin-bottom: 6px;
}
.chat-message-text{
  color: rgba(255,255,255,.92);
}


/* Support-chat layout (GoDaddy-like single conversation) */
#chatPage.support-mode .chat-container{
  grid-template-columns: 1fr;
}
#chatPage.support-mode #chatRoomsPanel{
  display: none;
}
#chatPage.support-mode .chat-page-header{
  display: none;
}

/* Panels */
#chatPage .chat-rooms-panel,
#chatPage .chat-messages-panel{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  overflow: hidden;
}
#chatPage .chat-panel-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#chatPage .chat-panel-header h2{
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
#chatPage .chat-header-info h2{
  font-size: 16px;
  font-weight: 800;
}
#chatPage .chat-status{
  color: rgba(255,255,255,.70);
  font-size: 12px;
}

/* Messages area */
#chatPage .chat-messages{
  height: 52vh;
  min-height: 360px;
  overflow: auto;
  padding: 14px;
}
@media (max-width: 860px){
  #chatPage .chat-messages{ height: 56vh; }
}

/* Bubble style */
.chat-bubble{
  max-width: min(520px, 92%);
  width: fit-content;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  margin: 8px 0;
}
.chat-bubble.mine{
  margin-left: auto;
  background: rgba(99,102,241,.18);
  border-color: rgba(99,102,241,.35);
}
.chat-bubble.support{
  margin-right: auto;
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.28);
}
.chat-bubble.system{
  margin: 10px auto;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
  font-size: 13px;
}

.chat-bubble .bubble-meta{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  color: rgba(255,255,255,.70);
  font-size: 12px;
}
.chat-bubble .bubble-text{
  color: rgba(255,255,255,.92);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Input */
#chatPage .chat-input-section{
  display:flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
#chatPage .chat-input-section .chat-input{
  flex: 1;
}
#chatPage .create-room-section{
  display:flex;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* =========================
   MODALS (YOU ALREADY HAVE)
   keep your existing white card + green button styles
========================= */

/* Reset */
* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

:root {
  --primary: #facc15;
  --primary-dark: #eab308;
  --primary-light: #fde68a;
  --bg-dark: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f7f7f5;
  --text: #0b0b0b;
  --text-muted: #4b5563;
  --success: #facc15;
  --danger: #0b0b0b;
  --warning: #fbbf24;
  --border: rgba(17,17,17,.12);
}

body { 
  background: linear-gradient(135deg, #ffffff 0%, #f7f7f5 50%, #ffffff 100%);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* Page Navigation */
.page {
  display: none;
  min-height: 100vh;
  animation: fadeIn 0.3s ease;
}

.page.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Header */
header {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  padding: 20px 0;
  border-bottom: 2px solid var(--primary);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.12);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.logo {
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
}

.logo-img {
  height: 45px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.45));
}

.logo-text {
  background: linear-gradient(45deg, #111111, var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  padding: 12px 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #0b0b0b;
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.08);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.btn-icon {
  font-size: 16px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #0b0b0b;
}

.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(250, 204, 21, 0.45);
}

.btn-success {
  background: linear-gradient(135deg, var(--success), var(--primary-dark));
  color: #0b0b0b;
}

.btn-success:hover {
  box-shadow: 0 4px 20px rgba(250, 204, 21, 0.45);
}

/* Hero Section */
.hero-section {
  position: relative;
  padding: 80px 0 60px;
  overflow: hidden;
}

.hero-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(250, 204, 21, 0.2), transparent 50%),
              radial-gradient(circle at 70% 50%, rgba(17, 17, 17, 0.08), transparent 50%);
  pointer-events: none;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-text {
  animation: slideInLeft 0.6s ease;
}

.hero-title {
  font-size: 48px;
  font-weight: 800;
  background: linear-gradient(45deg, #111111, var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 18px;
  color: var(--text-muted);
  margin-bottom: 30px;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-hero-primary {
  padding: 16px 32px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #0b0b0b;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(250, 204, 21, 0.35);
}

.btn-hero-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 30px rgba(250, 204, 21, 0.45);
}

.btn-hero-secondary {
  padding: 16px 32px;
  background: transparent;
  color: var(--text);
  border: 2px solid var(--primary);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-hero-secondary:hover {
  background: var(--primary);
  color: #0b0b0b;
  transform: translateY(-3px);
}

.hero-image {
  position: relative;
  height: 400px;
  animation: slideInRight 0.6s ease;
}

.floating-card {
  position: absolute;
  background: var(--bg-card);
  padding: 15px 20px;
  border-radius: 16px;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(17, 17, 17, 0.12);
  animation: float 3s ease-in-out infinite;
}

.floating-card img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
}

.floating-card span {
  font-weight: 600;
  color: var(--text);
}

.card-1 { top: 20%; left: 10%; animation-delay: 0s; }
.card-2 { top: 50%; right: 10%; animation-delay: 1s; }
.card-3 { bottom: 20%; left: 30%; animation-delay: 2s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Advertisement Banner */
.ad-banner {
  background: linear-gradient(135deg, #111111, var(--primary), var(--primary-dark));
  border-radius: 20px;
  padding: 40px;
  margin: 30px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(17, 17, 17, 0.18);
  animation: slideDown 0.5s ease;
}

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

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

/* Stats Bar */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.stat-item {
  background: #ffffff;
  padding: 25px;
  border-radius: 16px;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(17, 17, 17, 0.08);
}

.stat-item:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 8px 30px rgba(17, 17, 17, 0.12);
}

.stat-icon {
  font-size: 40px;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(17, 17, 17, 0.12);
}

.stat-value {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(45deg, #111111, var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Search + Filters */
.search-section {
  background: #ffffff;
  padding: 30px;
  border-radius: 20px;
  margin: 30px 0;
  border: 2px solid rgba(250, 204, 21, 0.35);
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.08);
}

.search-bar {
  width: 100%;
  padding: 18px 20px 18px 55px;
  border: 2px solid rgba(17, 17, 17, 0.15);
  border-radius: 12px;
  background: #ffffff;
  color: var(--text);
  font-size: 16px;
}

/* Items Grid */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

/* Listing card basic (your JS adds .listing-card) */
.listing-card {
  background: #ffffff;
  border-radius: 16px;
  border: 2px solid rgba(17, 17, 17, 0.08);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.08);
}

.listing-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: #f3f4f6;
}

/* Autocomplete */
.autocomplete-container { position: relative; }

.autocomplete-list {
  background: #ffffff;
  max-height: 200px;
  overflow-y: auto;
  list-style: none;
  position: absolute;
  width: 100%;
  z-index: 1001;
  border: 2px solid rgba(17, 17, 17, 0.15);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.15);
}

.autocomplete-list li {
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.autocomplete-list li:hover { background: var(--bg-hover); }

/* ✅ FINAL HEADER POLISH (NO HIDDEN USER MENU) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Keep user menu visible when JS sets display:flex */
.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ffffff;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(17, 17, 17, 0.12);
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: #0b0b0b;
}

.logout-btn {
  background: none;
  border: none;
  color: #111111;
  font-size: 13px;
  cursor: pointer;
}

.logout-btn:hover {
  color: #111111;
  text-decoration: underline;
}

button:disabled {
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-buttons {
    justify-content: center;
  }

  .hero-title {
    font-size: 32px;
  }

  .items-grid {
    grid-template-columns: 1fr;
  }
}
.listing-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.listing-action-btn{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  cursor:pointer;
}

.listing-action-btn.danger{
  background: rgba(255,0,0,.14);
}
/* Modal overlay (blur background) */
.modal-overlay{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
}
.modal-overlay[hidden]{ display: none; }

.modal-card{
  width: min(520px, 100%);
  border-radius: 18px;
  padding: 16px 16px 14px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 20px 70px rgba(0,0,0,.25);
  transform: translateY(6px);
  opacity: 0;
  animation: modalIn .16s ease-out forwards;
}

@keyframes modalIn{
  to { transform: translateY(0); opacity: 1; }
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.modal-title{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#0f172a;
}

.modal-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.7);
  cursor:pointer;
  font-size: 20px;
  line-height: 0;
}

.modal-message{
  margin: 12px 0 16px;
  color: rgba(15,23,42,.75);
  line-height: 1.4;
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.modal-btn{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  color: #0f172a;
  cursor:pointer;
  font-weight: 600;
}

.modal-btn.primary{
  background: #22c55e;      /* green */
  border-color: #16a34a;
  color: #ffffff;
}
.modal-btn.primary:hover{
  filter: brightness(.96);
}
.modal-btn.danger{
  background: #ef4444;
  border-color: #dc2626;
  color: #ffffff;
}
.modal-btn.danger:hover{
  filter: brightness(.96);
}
/* Filters: 2 per row on desktop */
.filters{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

/* Make each filter fill its grid cell cleanly */
.filter-group{
  display: grid;
  gap: 6px;
}

.filter-group select,
.filter-group input{
  width: 100%;
}

/* Optional: make Sort span full width (looks nicer with 5 filters) */
.filter-group:last-child{
  grid-column: 1 / -1;
}

/* Mobile: 1 per row */
@media (max-width: 720px){
  .filters{
    grid-template-columns: 1fr;
  }
  .filter-group:last-child{
    grid-column: auto;
  }
}
.listing-topline{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin: 8px 0 6px;
  font-size: 12px;
  color: rgba(255,255,255,.75);
}

.listing-contact{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.contact-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.contact-text{
  color: rgba(255,255,255,.85);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.contact-btn{
  padding: 8px 10px;
  border-radius: 12px;
}

.contact-muted{
  color: rgba(255,255,255,.65);
  font-size: 13px;
}
/* Make sure header is always clickable */
header {
  position: relative;
  z-index: 999;
}

/* Any decorative overlay should not block clicks */
.hero-gradient,
.hero-section::before,
.hero-section::after {
  pointer-events: none;
}
/* =========================================================
   LAYOUT PATCH (keeps your design, improves alignment)
   Paste at the END of style.css
   ========================================================= */

/* Make header content align nicely on all sizes */
header .header-content{
  align-items: center;
}

header .nav-buttons{
  align-items: center;
  justify-content: flex-end;
}

/* Better spacing between sections on main page */
#mainPage .container{
  display: grid;
  gap: 16px;
}

/* Search + filters: consistent spacing */
.search-section,
.market-tools,
.panel{
  margin-top: 14px;
}

/* If your filters wrapper exists, keep it clean */
.filters{
  gap: 12px;
}

/* If filters are NOT inside .filters but are inside some row, still help */
.filters-row{
  gap: 12px;
}

/* Listings grid: stop cards from stretching weirdly */
#listingsGrid{
  align-items: start;
}

/* Listing card: consistent internal spacing */
.listing-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.listing-card > img{
  margin-bottom: 0;
}

.listing-card .listing-actions{
  margin-top: 8px;
}

/* Make action buttons equal width and wrap nicely */
.listing-actions .btn,
.listing-actions button{
  flex: 1 1 120px;
  justify-content: center;
  white-space: nowrap;
}

/* Contact row: prevent overflow on small screens */
.contact-row{
  flex-wrap: wrap;
}

.contact-text{
  min-width: 180px;
}

/* Add listing form: keep rows balanced */
#listingForm{
  max-width: 860px;
  margin: 0 auto;
}

.form-row{
  align-items: end;
}

/* Autocomplete dropdown should stay above everything */
#autocompleteList{
  position: relative;
  z-index: 2000;
}

/* Chat page: make columns match height better */
#chatPage .chat-container{
  align-items: start;
}

#chatPage .chat-container > *{
  min-height: 420px;
}

/* Modal content: ensure readable spacing */
.modal-content{
  max-height: 85vh;
  overflow: auto;
}

/* Mobile polish */
@media (max-width: 768px){
  header{
    margin: 10px auto;
  }

  header .nav-buttons{
    justify-content: center;
  }

  #listingForm{
    max-width: 100%;
  }

  .listing-actions .btn,
  .listing-actions button{
    flex: 1 1 100%;
  }
}
/* ===============================
   FIX: Edit / Delete buttons hidden
   Paste at END of style.css
================================ */

/* Ensure the actions row is always visible and not clipped */
.listing-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: space-between !important;

  /* critical: if parent had weird overflow or spacing */
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Give every action button a real size */
.listing-actions .btn,
.listing-actions button{
  flex: 1 1 120px !important;
  min-width: 120px !important;
  min-height: 40px !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* Force high-contrast styles for edit/delete specifically */
.listing-actions .btn-warning,
.listing-actions .btn-danger{
  opacity: 1 !important;
  filter: none !important;
}

.listing-actions .btn-warning{
  background: rgba(245,158,11,.22) !important;
  border-color: rgba(245,158,11,.55) !important;
  color: #fff !important;
}

.listing-actions .btn-danger{
  background: rgba(239,68,68,.22) !important;
  border-color: rgba(239,68,68,.55) !important;
  color: #fff !important;
}

/* On hover, make them pop */
.listing-actions .btn-warning:hover{
  background: rgba(245,158,11,.30) !important;
}
.listing-actions .btn-danger:hover{
  background: rgba(239,68,68,.30) !important;
}

/* Safety: if any card styles clip content, remove clipping */
.listing-card{
  overflow: visible !important;
}

/* Mobile: stack buttons so edit/delete never get pushed off-screen */
@media (max-width: 520px){
  .listing-actions .btn,
  .listing-actions button{
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
}
/* ===============================
   Listing actions: 2-column layout
================================ */

/* Use a 2-column grid for the action buttons */
.listing-actions{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

/* Buttons fill the grid nicely */
.listing-actions .btn,
.listing-actions button{
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* Keep them 2 columns on mobile too (unless super tiny) */
@media (max-width: 380px){
  .listing-actions{
    grid-template-columns: 1fr !important;
  }
}



/* =========================
   CHAT WIDGET (GoDaddy-style)
   ========================= */
.chat-widget-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(20,20,35,.92);
  color: rgba(255,255,255,.95);
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.chat-widget-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(239,68,68,.95);
  color: white;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 1px solid rgba(255,255,255,.18);
}

.chat-widget{
  position: fixed;
  right: 18px;
  bottom: 86px;
  width: min(360px, calc(100vw - 36px));
  height: 520px;
  max-height: calc(100vh - 120px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12,12,24,.96);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  z-index: 9999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-widget.hidden{ display:none; }

.chat-widget-header{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.chat-widget-title{
  font-weight: 800;
  font-size: 14px;
}
.chat-widget-status{
  font-size: 12px;
  color: rgba(255,255,255,.70);
}
.chat-widget-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}

.chat-widget-messages{
  padding: 12px;
  flex: 1;
  overflow: auto;
}
.cw-bubble{
  max-width: 92%;
  width: fit-content;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  margin: 8px 0;
}
.cw-bubble.mine{
  margin-left: auto;
  background: rgba(99,102,241,.18);
  border-color: rgba(99,102,241,.35);
}
.cw-bubble.support{
  margin-right: auto;
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.28);
}
.cw-bubble.system{
  margin: 10px auto;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.80);
  font-size: 13px;
}
.cw-meta{
  font-size: 11px;
  color: rgba(255,255,255,.65);
  margin-bottom: 6px;
}
.cw-text{
  font-size: 13px;
  color: rgba(255,255,255,.92);
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-widget-input{
  display:flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.chat-widget-input input{
  flex: 1;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
}

/* Owner inbox room list preview */
.room-item{
  text-align: left;
}
.room-line{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
}
.room-name{
  font-weight: 700;
}
.room-badge{
  color: rgba(239,68,68,.95);
  font-size: 18px;
  line-height: 1;
}
.room-sub{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  margin-top: 6px;
}
.room-preview{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 210px;
}
.room-time{
  white-space: nowrap;
  color: rgba(255,255,255,.55);
}

/* Orders UI */
.orders-toolbar{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.orders-list{
  margin-top: 12px;
  display: grid;
  gap: 12px;
}
.order-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px;
}
.order-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.order-title{
  font-weight: 800;
}
.order-status-pill{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  text-transform: lowercase;
}
.order-meta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  font-size: 13px;
  color: rgba(255,255,255,.82);
}
.order-note{
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.86);
  font-size: 13px;
}
.order-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: flex-end;
}
.order-actions select{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  padding: 9px 10px;
}
/* =========================================
   Compact Search + Filters (less height)
   ========================================= */
.search-section{
  padding: 16px;
  margin: 16px 0;
  border-radius: 16px;
}

.search-section .search-header{
  margin-bottom: 10px;
}

.search-section .section-title{
  margin: 0 0 2px;
  font-size: 18px;
  line-height: 1.2;
}

.search-section .section-subtitle{
  margin: 0 0 10px;
  font-size: 13px;
  opacity: .85;
}

.search-bar{
  padding: 12px 14px 12px 44px; /* shorter input */
  font-size: 14px;
  border-radius: 12px;
}

.search-bar-container{
  margin-bottom: 10px;
}

/* Filters: more columns = less vertical height */
.filters{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* tighter label/input spacing */
.filter-group{
  gap: 4px;
}

.filter-group label{
  font-size: 12px;
  opacity: .9;
}

/* Remove "Sort spans full width" so it doesn't add extra row */
.filter-group:last-child{
  grid-column: auto;
}

/* Medium screens: 2 columns */
@media (max-width: 980px){
  .filters{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Small screens: 1 column */
@media (max-width: 720px){
  .filters{
    grid-template-columns: 1fr;
  }
}


/* ===============================
   TOP UP HOME + GAME PAGES
   (Bokluy mobile layout)
   =============================== */

.topup-bg{
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(56,189,248,.35), transparent 55%),
              linear-gradient(180deg, #0b2a3d 0%, #0a1f2d 55%, #081624 100%);
  color: var(--text);
}

.topup-shell{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 70px;
}

.topup-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 8px;
}

.topup-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing:.3px;
  color:#fff;
}

.topup-brand img{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
}

.topup-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.topup-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
}

.topup-pill:hover{ background: rgba(255,255,255,.14); }

.topup-hero{
  margin-top: 14px;
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.topup-hero img{
  width:100%;
  height: 210px;
  object-fit: cover;
  display:block;
}

.topup-strip{
  margin: 18px 0 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.topup-strip h2{
  margin:0;
  font-size: 18px;
  color:#fff;
}

.topup-strip p{
  margin:0;
  color: rgba(255,255,255,.75);
  font-size: 13px;
}

.game-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

@media (max-width: 900px){
  .game-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .game-grid{ grid-template-columns: 1fr; }
}

.game-tile{
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 10px;
}

.game-tile img{
  width: 100%;
  height: 160px;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(0,0,0,.18);
}

.game-tile h3{
  margin: 2px 0 0;
  color:#fff;
  font-size: 14px;
  letter-spacing:.2px;
}

.topup-btn-yellow{
  margin-top: 2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 18px;
  border-radius: 999px;
  background: #ffd84d;
  color: #0b1220;
  font-weight: 900;
  text-decoration:none;
  font-size: 13px;
  border: 0;
}

.topup-btn-yellow:hover{ filter: brightness(.95); }

/* Footer (matches your screenshot style) */
.site-footer{
  margin-top: 28px;
  padding: 26px 14px 18px;
  background: rgba(0,0,0,.32);
  border-top: 1px solid rgba(255,255,255,.10);
  text-align:center;
}

.footer-social{
  display:flex;
  justify-content:center;
  gap: 14px;
  margin-bottom: 12px;
}

.social-circle{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  text-decoration:none;
}

.social-circle svg{
  width: 22px;
  height: 22px;
  fill: #ffffff;
  opacity: .95;
}

.footer-copy{
  color:#fff;
  font-size: 20px;
  margin: 10px 0 6px;
}

.footer-links{
  margin: 0 0 14px;
  font-size: 20px;
}

.footer-links a{
  color: #38bdf8;
  text-decoration:none;
}

.footer-links a:hover{ text-decoration: underline; }

.footer-pay{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  color:#fff;
  font-weight: 800;
  margin-top: 10px;
}

.footer-pay img{
  height: 26px;
  width: auto;
  border-radius: 6px;
}

/* ===============================
   MLBB Top Up Page (Bokluy layout)
   =============================== */

.topup-body{
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden; /* lock body; inner areas handle scrolling */
  background: linear-gradient(180deg, #0b2536 0%, #081b28 100%);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
}


/* Header */
.topup-header{
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: linear-gradient(90deg, rgba(0,180,255,.20), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.topup-header-left{
  display: flex;
  align-items: center;
  gap: 10px;
}

.topup-brand{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: .2px;
}

.topup-brand-dot{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,180,255,.25);
  border: 1px solid rgba(0,180,255,.35);
}

.topup-game-pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

.topup-header-right{
  display: flex;
  gap: 8px;
}

.topup-header-btn{
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

/* Wrapper */
.topup-wrap{
  height: calc(100vh - 56px - 72px); /* header + bottom bar */
  overflow: hidden; /* keep main locked */
  display: flex;
  flex-direction: column;
}

/* Banner */
.topup-banner{
  position: relative;
  margin: 14px 14px 10px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}

.topup-banner img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  opacity: .9;
}

.topup-banner-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.50) 85%);
}

.topup-banner-title{
  font-size: 18px;
  font-weight: 800;
}

.topup-banner-sub{
  font-size: 12px;
  opacity: .9;
}

/* Content area (allow internal scroll for whole content if needed) */
.topup-content{
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 14px 10px;
  display: grid;
  gap: 12px;
  min-height: 0;
}


/* Card */
.topup-card{
  background: linear-gradient(180deg, rgba(0,180,255,.10), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 12px;
}

.topup-card-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.topup-step{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: rgba(0,180,255,.25);
  border: 1px solid rgba(0,180,255,.35);
}

.topup-card-title{
  font-weight: 800;
}

/* Form */
.topup-form{
  display: grid;
  gap: 10px;
}

.topup-input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: #fff;
  outline: none;
}

.topup-input::placeholder{ color: rgba(255,255,255,.65); }

.topup-primary-btn{
  padding: 12px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  background: rgba(0,180,255,.28);
  color: #fff;
}

.topup-status{
  font-size: 12px;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.topup-status.ok{ border-color: rgba(0,255,170,.35); }
.topup-status.warn{ border-color: rgba(255,210,0,.35); }
.topup-status.err{ border-color: rgba(255,70,70,.35); }

.topup-player-name{
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 13px;
}

.topup-hint{
  font-size: 12px;
  opacity: .85;
}

/* Products: ONLY this box scrolls */
.topup-products-shell{
  height: 260px;            /* fixed box height */
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  overflow: hidden;         /* clip scroll area corners */
}

.topup-products-scroll{
  height: 100%;
  overflow-y: auto;         /* internal scroll */
  padding: 10px;
  display: grid;
  gap: 10px;
}

/* Product item */
.topup-product{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #fff;
  text-align: left;
}

.topup-product.active{
  border-color: rgba(255,216,77,.55);
  box-shadow: 0 0 0 2px rgba(255,216,77,.15);
}

.topup-product-left{
  display: flex;
  align-items: center;
  gap: 10px;
}

.topup-product-img{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(255,255,255,.08);
}

.topup-product-title{
  font-weight: 700;
  font-size: 13px;
}

.topup-product-price{
  font-weight: 900;
  color: #ffd84d; /* Bokluy accent */
}

.topup-mini-note{
  margin-top: 8px;
  font-size: 12px;
  opacity: .85;
}

/* Payment box */
.topup-paybox{
  display: grid;
  gap: 10px;
}

.topup-pay-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.topup-pay-logos{
  display: flex;
  gap: 8px;
  align-items: center;
}

.topup-pay-logo{
  height: 30px;
  width: auto;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  padding: 4px 8px;
}

.topup-pay-btn{
  padding: 12px 14px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  font-weight: 900;
  background: #ffd84d;
  color: #0a1620;
}

.topup-pay-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* Terms */
.topup-terms{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  opacity: .95;
}

.topup-terms a{
  color: #00b4ff;
  text-decoration: none;
}

/* Bottom bar */
.topup-bottom{
  height: 72px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
}

.topup-total-label{
  font-size: 12px;
  opacity: .85;
}

.topup-total-value{
  font-size: 18px;
  font-weight: 900;
  color: #ffd84d;
}

.topup-next-btn{
  padding: 14px 16px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  font-weight: 900;
  background: rgba(0,180,255,.30);
  color: #fff;
}

.topup-next-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
}
html, body{
  height: auto;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto; /* allow normal page scrolling */
}


/* Whole MLBB page takes the full screen */
.mlbb-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header / form area stays fixed */
.mlbb-top {
  flex: 0 0 auto;
}

/* Bottom area: products panel fills remaining space */
.mlbb-bottom {
  flex: 1 1 auto;
  min-height: 0; /* IMPORTANT: allows inner scrolling in flex */
  display: flex;
  gap: 16px;
}

/* Example: left column (inputs/summary) */
.mlbb-side {
  flex: 0 0 360px; /* change width as you want */
  overflow: hidden;
}

/* Right column (products) */
.mlbb-products {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0; /* IMPORTANT */
  overflow: hidden;
}

/* This is the scrollable area */
.mlbb-products-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain; /* prevents "scroll chaining" */
  -webkit-overflow-scrolling: touch;
  padding-right: 6px; /* optional */
}
/* =========================
   CHAT THEME (White / Yellow / Black)
   Paste at bottom of style.css
========================= */

:root{
  --chat-bg: #ffffff;
  --chat-text: #111111;
  --chat-muted: #444444;
  --chat-border: #ffd400;      /* bright yellow */
  --chat-border-2: #ffe88a;    /* softer yellow */
  --chat-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Base area */
#chatPage,
#chatPage *{
  color: var(--chat-text);
}

#chatPage{
  background: #f7f7f7;
}

#chatPage .page-title,
#chatPage .page-subtitle{
  color: var(--chat-text);
}

/* Main chat container */
#chatPage .chat-container{
  background: transparent;
  gap: 14px;
}

/* Panels */
#chatPage .chat-rooms-panel,
#chatPage .chat-messages-panel{
  background: var(--chat-bg);
  border: 2px solid var(--chat-border);
  border-radius: 16px;
  box-shadow: var(--chat-shadow);
  overflow: hidden;
}

/* Headers */
#chatPage .chat-panel-header{
  background: var(--chat-bg);
  border-bottom: 2px solid var(--chat-border);
  padding: 14px 16px;
}

#chatPage .chat-panel-header h2,
#chatPage #chatTitle{
  color: var(--chat-text);
  font-weight: 800;
}

#chatPage #chatStatusText,
#chatPage .chat-status{
  color: var(--chat-muted);
}

/* Online indicator */
#chatPage .online-indicator{
  background: #fff8cc;
  border: 1px solid var(--chat-border);
  color: var(--chat-text);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
}

/* Room list area */
#chatPage .rooms-list{
  background: var(--chat-bg);
}

#chatPage .no-rooms,
#chatPa
/* =========================
   TOPUP HOME (topup-bg) THEME
   White bg • Yellow borders • Black text
   Paste at bottom of style.css
========================= */

:root{
  --ty-yellow: #ffd400;
  --ty-yellow-soft: #ffe88a;
  --ty-black: #111111;
  --ty-white: #ffffff;
  --ty-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Page background + base text */
body.topup-bg{
  background: #f7f7f7;
  color: var(--ty-black);
}

/* Shell */
.topup-shell{
  color: var(--ty-black);
}

/* Top bar */
.topup-topbar{
  background: var(--ty-white);
  border: 2px solid var(--ty-yellow);
  border-radius: 16px;
  box-shadow: var(--ty-shadow);
  margin: 12px auto;
}

/* Brand */
.topup-brand span{
  color: var(--ty-black);
  font-weight: 900;
}

/* Pills (Marketplace/Login/Browse Games) */
.topup-pill{
  background: var(--ty-white);
  color: var(--ty-black);
  border: 2px solid var(--ty-yellow);
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
}
.topup-pill:hover{
  background: #fffdf0;
}

/* Hero banner */
.topup-hero{
  background: var(--ty-white);
  border: 2px solid var(--ty-yellow);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--ty-shadow);
}
.topup-hero img{
  display: block;
  width: 100%;
}

/* Strip section */
.topup-strip{
  background: var(--ty-white);
  border: 2px solid var(--ty-yellow);
  border-radius: 18px;
  box-shadow: var(--ty-shadow);
  color: var(--ty-black);
}
.topup-strip h2{
  color: var(--ty-black);
  font-weight: 900;
}
.topup-strip p{
  color: #333333;
}

/* Game grid tiles */
.game-grid{
  gap: 14px;
}

.game-tile{
  background: var(--ty-white);
  border: 2px solid var(--ty-yellow);
  border-radius: 18px;
  box-shadow: var(--ty-shadow);
  color: var(--ty-black);
  overflow: hidden;
}

.game-tile h3{
  color: var(--ty-black);
  letter-spacing: .5px;
}

/* Tile images */
.game-tile img{
  width: 100%;
  display: block;
  border-bottom: 2px solid var(--ty-yellow-soft);
}

/* Yellow action button (TOPUP) */
.topup-btn-yellow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ty-yellow);
  border: 2px solid var(--ty-yellow);
  color: var(--ty-black);
  font-weight: 900;
  border-radius: 12px;
  text-decoration: none;
  padding: 10px 14px;
}
.topup-btn-yellow:hover{
  filter: brightness(0.95);
}

/* Footer */
.site-footer{
  background: var(--ty-white);
  border: 2px solid var(--ty-yellow);
  border-radius: 18px;
  box-shadow: var(--ty-shadow);
  color: var(--ty-black);
}

.site-footer a{
  color: var(--ty-black);
  text-decoration: none;
  border-bottom: 1px solid var(--ty-yellow-soft);
}
.site-footer a:hover{
  border-bottom-color: var(--ty-yellow);
}

.footer-copy{
  color: #222222;
}

.footer-pay span{
  color: #222222;
}

/* Social circles */
.social-circle{
  background: var(--ty-white);
  border: 2px solid var(--ty-yellow);
  border-radius: 999px;
}
.social-circle svg{
  fill: var(--ty-black);
}
.social-circle:hover{
  background: #fffdf0;
}

/* Optional: ensure any text inside is black */
body.topup-bg h1,
body.topup-bg h2,
body.topup-bg h3,
body.topup-bg p,
body.topup-bg span,
body.topup-bg small{
  color: inherit;
}
/* =========================
   TOPUP HOME tweaks (logo + borders)
   Paste at bottom of style.css
========================= */

body.topup-bg .topup-brand{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Bigger logo */
body.topup-bg .topup-brand img{
  width: 52px;       /* increase size */
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
  border: 2px solid #ffd400;
  background: #ffffff;
  padding: 4px;
}

/* Marketplace/Login buttons (topup-pill) stronger border */
body.topup-bg .topup-pill{
  border: 2px solid #ffd400;
  background: #ffffff;
  color: #111111;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
body.topup-bg .topup-pill:hover{
  background: #fffdf0;
}

/* Banner border */
body.topup-bg .topup-hero{
  border: 2px solid #ffd400;
}

/* Game cards stronger border */
body.topup-bg .game-tile{
  border: 2px solid #ffd400;
  position: relative;
}

/* Add border around the game name */
body.topup-bg .game-tile h3{
  display: inline-block;
  margin: 12px auto 10px;
  padding: 8px 12px;
  border: 2px solid #ffd400;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  font-weight: 900;
  text-align: center;
}

/* Optional: center the name nicely if your tile is flex/column */
body.topup-bg .game-tile{
  text-align: center;
}

/* Make tile image area look clean */
body.topup-bg .game-tile img{
  border-bottom: 2px solid #ffe88a;
}
/* Topup page: make logo text black */
body.topup-bg .topup-brand span,
body.topup-bg .topup-brand{
  color: #111111 !important;
}
/* =========================
   TOPUP HOME: richer background + yellow footer
   Paste at bottom of style.css
========================= */

/* More designed background (soft pattern + gradients) */
body.topup-bg{
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(255, 212, 0, .20), transparent 60%),
    radial-gradient(800px 420px at 85% 25%, rgba(0, 0, 0, .06), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
  color: #111111;
}

/* Add a subtle dotted overlay for texture */
body.topup-bg::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .08;
  z-index: 0;
}

/* Ensure your content stays above the overlay */
body.topup-bg .topup-shell{
  position: relative;
  z-index: 1;
}

/* Footer: yellow background */
body.topup-bg .site-footer{
  background: #ffd400;
  border: 2px solid #111111;     /* optional: black border looks nice on yellow */
  color: #111111;
}

/* Footer links readable on yellow */
body.topup-bg .site-footer a{
  color: #111111;
  border-bottom: 1px solid rgba(0,0,0,.35);
}
body.topup-bg .site-footer a:hover{
  border-bottom-color: #111111;
}

/* Social circles in footer: invert for contrast */
body.topup-bg .site-footer .social-circle{
  background: #ffffff;
  border: 2px solid #111111;
}
body.topup-bg .site-footer .social-circle svg{
  fill: #111111;
}
/* Verified badge next to lister name */
.lister-name{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lister-name .verified-badge{
  width: 16px;
  height: 16px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFD400' d='M12 1.8l2.7 2.2 3.4-.2 1.1 3.2 3 1.7-1.7 3 1.7 3-3 1.7-1.1 3.2-3.4-.2L12 22.2l-2.7-2.2-3.4.2-1.1-3.2-3-1.7 1.7-3-1.7-3 3-1.7 1.1-3.2 3.4.2L12 1.8z'/%3E%3Cpath fill='%23111111' d='M10.2 15.6l-2.6-2.6 1.4-1.4 1.2 1.2 4-4 1.4 1.4-5.4 5.4z'/%3E%3C/svg%3E");
}
/* Verified badge next to lister name (listing cards) */
.listing-seller{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Blue verified badge (like normal verified icons) */
.verified-badge{
  width: 16px;
  height: 16px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231D9BF0' d='M12 1.8l2.7 2.2 3.4-.2 1.1 3.2 3 1.7-1.7 3 1.7 3-3 1.7-1.1 3.2-3.4-.2L12 22.2l-2.7-2.2-3.4.2-1.1-3.2-3-1.7 1.7-3-1.7-3 3-1.7 1.1-3.2 3.4.2L12 1.8z'/%3E%3Cpath fill='%23FFFFFF' d='M10.2 15.6l-2.6-2.6 1.4-1.4 1.2 1.2 4-4 1.4 1.4-5.4 5.4z'/%3E%3C/svg%3E");
}

.name-box{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  background: rgba(0,0,0,0.15);
  color: #fff;
  font-weight: 600;
}
/* ===============================
   TOPUP PAGES: ENABLE NORMAL PAGE SCROLL (OVERRIDES)
   Paste at END of style.css
   =============================== */

.topup-body{
  overflow-y: auto !important;   /* allow page scroll */
  overflow-x: hidden !important;
}

/* Remove the locked viewport wrapper */
.topup-wrap{
  height: auto !important;
  overflow: visible !important;
}

/* Let the content flow naturally */
.topup-content{
  overflow: visible !important;
  min-height: auto !important;
}

/* Remove "only this box scrolls" behavior for products */
.topup-products-shell{
  height: auto !important;       /* no fixed height */
  overflow: visible !important;
}

.topup-products-scroll{
  height: auto !important;
  overflow: visible !important;  /* no internal scroll */
}
/* ===============================
   FORCE REMOVE INNER PRODUCTS SCROLLBAR
   Paste at END of style.css
   =============================== */

/* Make whole page scroll */
html, body { height: auto !important; }
body.topup-body { overflow: auto !important; }

/* Disable any nested scroll areas */
.topup-wrap,
.topup-content,
.topup-products-shell,
.topup-products-scroll,
#productsScroll {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* If you previously set a flex/locked layout, undo it */
.topup-wrap { display: block !important; }
/* =========================================================
   BOKLUY — UNIFIED LIGHT THEME OVERRIDES (WHITE/YELLOW/BLACK)
   Paste at the VERY END of style.css
   ========================================================= */

/* 1) Global tokens (one palette) */
:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --card: #ffffff;

  --text: #111111;
  --muted: rgba(17,17,17,.62);

  --primary: #facc15;      /* yellow */
  --primaryDark: #eab308;  /* deeper yellow */

  --border: rgba(17,17,17,.12);
  --shadowSoft: 0 10px 24px rgba(17,17,17,.08);

  --r-xl: 18px;
  --r-lg: 14px;
  --r-md: 12px;
}

/* 2) Global page background + normal scrolling everywhere */
html, body{
  height: auto !important;
  min-height: 100% !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Kill any dark “topup” backgrounds if present */
body.topup-bg,
.topup-body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* 3) Universal container feel (cards, panels) */
.card,
.topup-card,
.topup-panel,
.topup-player-name,
.topup-status{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadowSoft) !important;
  border-radius: var(--r-lg) !important;
}

/* 4) Buttons — make everything consistent */
.btn,
button,
input[type="button"],
input[type="submit"],
a.btn{
  border-radius: 999px;
}

/* Primary-like buttons */
.btn-primary,
.primary-btn,
.topup-next-btn,
.topup-submit-btn{
  background: var(--primary) !important;
  color: var(--text) !important;
  border: 1px solid rgba(17,17,17,.18) !important;
  box-shadow: var(--shadowSoft) !important;
  font-weight: 800;
}

.btn-primary:hover,
.primary-btn:hover,
.topup-next-btn:hover,
.topup-submit-btn:hover{
  background: var(--primaryDark) !important;
}

/* Secondary-like buttons / pills */
.btn-secondary,
.topup-pill{
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  font-weight: 700;
}

.topup-pill:hover,
.btn-secondary:hover{
  background: rgba(250,204,21,.14) !important;
  border-color: rgba(17,17,17,.18) !important;
}

/* 5) Inputs — consistent everywhere */
input, select, textarea{
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  outline: none !important;
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(250,204,21,.85) !important;
  box-shadow: 0 0 0 4px rgba(250,204,21,.22) !important;
}

/* 6) Top bars on topup pages: force light */
.topup-topbar,
.topup-header{
  background: #ffffff !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* 7) Make “white text” overrides stop fighting you */
.topup-shell,
.topup-hero,
.topup-brand,
.topup-actions,
.topup-wrap,
.mlbb-page{
  color: var(--text) !important;
}

/* 8) Remove locked scrolling wrappers if any still exist */
.topup-wrap,
.mlbb-page{
  height: auto !important;
  overflow: visible !important;
}
/* =========================================================
   MLBB — LIGHT LAYOUT (MATCH SCREENSHOT STRUCTURE)
   ========================================================= */

.mlbb-light{
  background: var(--bg);
  color: var(--text);
}

/* Topbar */
.mlbb-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.mlbb-topbar-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mlbb-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}

.mlbb-logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.mlbb-brand-name{
  font-weight: 900;
  letter-spacing: .3px;
}

.mlbb-nav{
  display: flex;
  gap: 10px;
  align-items: center;
}

.mlbb-pill{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
}

.mlbb-pill:hover{
  background: rgba(250,204,21,.14);
  border-color: rgba(17,17,17,.18);
}

.mlbb-pill-primary{
  background: var(--primary);
  border-color: rgba(17,17,17,.18);
}

/* Page grid */
.mlbb-page{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 16px 30px;
}

.mlbb-grid{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 16px;
}

@media (max-width: 1024px){
  .mlbb-grid{ grid-template-columns: 1fr; }
}

/* Cards */
.mlbb-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl, 18px);
  box-shadow: var(--shadowSoft);
  overflow: hidden;
}

.mlbb-card + .mlbb-card{ margin-top: 14px; }

.mlbb-card-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(17,17,17,.08);
  background: #fff;
}

.mlbb-card-title{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}

.mlbb-step, .mlbb-badge{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: rgba(250,204,21,.22);
  border: 1px solid rgba(17,17,17,.10);
}

/* Left column content */
.mlbb-guide{
  padding: 14px 16px 16px;
}

.mlbb-guide-banner{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(17,17,17,.10);
  display: block;
  margin-bottom: 12px;
}

.mlbb-guide-text p{
  margin: 6px 0;
  color: rgba(17,17,17,.75);
  font-weight: 700;
}

.mlbb-list{
  margin: 0;
  padding: 12px 18px 16px 36px;
  color: rgba(17,17,17,.75);
  font-weight: 700;
}

/* Form row like screenshot */
.mlbb-form{
  padding: 14px 16px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 160px;
  gap: 12px;
}

@media (max-width: 640px){
  .mlbb-form{ grid-template-columns: 1fr; }
}

.mlbb-input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  font-weight: 700;
}

/* Verified */
.mlbb-verified{
  margin: 0 16px 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(17,17,17,.12);
  background: rgba(250,204,21,.12);
  display: flex;
  gap: 8px;
  align-items: center;
}

.mlbb-verified-label{ color: rgba(17,17,17,.70); font-weight: 800; }

/* Buttons */
.mlbb-btn{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(17,17,17,.18);
  font-weight: 900;
  cursor: pointer;
}

.mlbb-btn-primary{
  background: var(--primary);
  color: var(--text);
}

.mlbb-btn-primary:hover{
  background: var(--primaryDark);
}

/* Products grid */
.mlbb-products{
  padding: 14px 16px 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1100px){
  .mlbb-products{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px){
  .mlbb-products{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .mlbb-products{ grid-template-columns: 1fr; }
}

.mlbb-product{
  text-align: left;
  background: #fff;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 20px rgba(17,17,17,.06);
  cursor: pointer;
}

.mlbb-product:hover{
  border-color: rgba(17,17,17,.20);
  transform: translateY(-1px);
}

.mlbb-product.is-selected{
  border-color: rgba(250,204,21,.95);
  box-shadow: 0 0 0 4px rgba(250,204,21,.22), 0 14px 24px rgba(17,17,17,.08);
}

.mlbb-product-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mlbb-chip{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(250,204,21,.22);
  border: 1px solid rgba(17,17,17,.10);
}

.mlbb-price{
  font-weight: 900;
}

.mlbb-product-name{
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 4px;
}

.mlbb-product-sub{
  color: rgba(17,17,17,.65);
  font-weight: 800;
}

/* Payment box */
.mlbb-paybox{
  padding: 14px 16px 16px;
}

.mlbb-payrow{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 16px;
  background: #fff;
}

.mlbb-paylogo{
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.mlbb-paytitle{
  font-weight: 900;
}

.mlbb-paydesc{
  color: rgba(17,17,17,.65);
  font-weight: 700;
  margin-top: 2px;
}

.mlbb-terms{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-weight: 800;
  color: rgba(17,17,17,.70);
}

.mlbb-terms a{
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(17,17,17,.30);
}

.mlbb-total{
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(17,17,17,.10);
}

.mlbb-total-label{
  color: rgba(17,17,17,.65);
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.mlbb-total-value{
  font-size: 22px;
  font-weight: 1000;
}

#checkoutBtn:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* Footer */
.mlbb-footer{
  margin-top: 14px;
  padding: 10px 6px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(17,17,17,.70);
  font-weight: 700;
}

.mlbb-accepted{
  display: flex;
  align-items: center;
  gap: 10px;
}

.mlbb-accepted img{
  width: 44px;
  height: 22px;
  object-fit: contain;
}
/* ===== Payment section polish ===== */

.mlbb-payrow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mlbb-paymeta{
  flex: 1;
  min-width: 0;
}

.mlbb-paytag{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(250,204,21,.22);
  border: 1px solid rgba(17,17,17,.10);
  white-space: nowrap;
}

.mlbb-checkline{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(17,17,17,.18);
  background: rgba(250,204,21,.08);
}

.mlbb-terms{
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: rgba(17,17,17,.75);
}

.mlbb-terms input{
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.mlbb-total{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(17,17,17,.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mlbb-total-left{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mlbb-total-label{
  font-size: 12px;
  letter-spacing: .9px;
  font-weight: 1000;
  color: rgba(17,17,17,.65);
}

.mlbb-total-value{
  font-size: 30px;
  font-weight: 1000;
  line-height: 1;
}
/* status lines for nameStatus / payStatus */
.mlbb-statusline{
  padding: 0 16px 16px;
}

.mlbb-status{
  font-weight: 800;
  color: rgba(17,17,17,.72);
}

.mlbb-status.ok{ color: #0f7a2a; }
.mlbb-status.warn{ color: #8a6a00; }
.mlbb-status.err{ color: #b00020; }

/* Next button row under products */
.mlbb-nextrow{
  padding: 0 16px 16px;
  display: flex;
  justify-content: flex-end;
}

.mlbb-btn-secondary{
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
  font-weight: 900;
}
/* =========================================================
   MLBB Products — Black border + Yellow/Orange fill
   (works with topup-game-common.js rendered cards)
   ========================================================= */

#productsScroll{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px 16px 16px;
}

@media (max-width: 1100px){
  #productsScroll{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px){
  #productsScroll{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  #productsScroll{ grid-template-columns: 1fr; }
}

/* Card button */
#productsScroll .topup-product{
  width: 100%;
  text-align: left;
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;

  /* Black border */
  border: 2px solid #111 !important;

  /* Yellow -> Orange fill */
  background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%) !important;

  /* Keep it clean */
  box-shadow: 0 12px 22px rgba(17,17,17,.12);
  transition: transform .12s ease, box-shadow .12s ease;
}

#productsScroll .topup-product:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(17,17,17,.16);
}

/* Active selected */
#productsScroll .topup-product.active{
  outline: 4px solid rgba(250,204,21,.55);
  box-shadow: 0 0 0 4px rgba(17,17,17,.18), 0 18px 30px rgba(17,17,17,.18);
}

/* Inner layout from your JS */
#productsScroll .topup-product-left{
  display: flex;
  align-items: center;
  gap: 10px;
}

#productsScroll .topup-product-img{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid #111;
  background: #fff;
}

#productsScroll .topup-product-title{
  font-weight: 1000;
  color: #111;
  line-height: 1.15;
}

#productsScroll .topup-product-price{
  margin-top: 10px;
  display: inline-block;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 1000;

  /* Price pill */
  background: rgba(255,255,255,.75);
  border: 2px solid #111;
  color: #111;
}
/* =========================================================
   Fix product cards going out of view (no horizontal overflow)
   ========================================================= */

/* Make sure the page never scrolls sideways */
html, body{
  overflow-x: hidden !important;
}

/* Ensure the product section/card can’t push outside */
.mlbb-right,
.mlbb-card,
#productsScroll{
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Force grid to fit container width */
#productsScroll{
  width: 100% !important;

  /* Fit-to-container grid */
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;

  gap: 12px !important;
  padding: 14px 16px 16px !important;

  /* No horizontal scrolling */
  overflow-x: hidden !important;
}

/* Make each button respect the grid cell */
#productsScroll .topup-product{
  width: 100% !important;
  min-width: 0 !important;
}

/* Prevent long titles from making the card wider */
#productsScroll .topup-product-title{
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* On smaller screens, slightly smaller min width */
@media (max-width: 900px){
  #productsScroll{
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  }
}
/* =========================================================
   Big section cards (mlbb-card) — better background color
   ========================================================= */

/* Page background slightly warm so white cards pop */
body.mlbb-light{ background: #f7f7f7 !important; }


/* Big cards: soft warm white + subtle yellow edge */
.mlbb-card{
  background: #fffdf7 !important;           /* warm white */
  border: 1px solid rgba(17,17,17,.10) !important;
  box-shadow: 0 16px 34px rgba(17,17,17,.10) !important;
}

/* Card header strip: gentle yellow tint */
.mlbb-card-head{
  background: rgba(250,204,21,.10) !important;
  border-bottom: 1px solid rgba(17,17,17,.08) !important;
}

/* Optional: make the step badge look more “premium” */
.mlbb-step, .mlbb-badge{
  background: rgba(250,204,21,.22) !important;
  border: 1px solid rgba(17,17,17,.14) !important;
}
/* =========================================================
   OPTION D — Yellow + Blue Contrast (Light + clean)
   ========================================================= */

/* Page background */
body.mlbb-light{
  background: #F7FAFF !important; /* very light blue */
  color: #111111 !important;
}

/* Big cards */
.mlbb-card{
  background: #FFFFFF !important;
  border: 1px solid rgba(17,17,17,.12) !important;
  box-shadow: 0 16px 34px rgba(17,17,17,.10) !important;
}

/* Card headers get a tiny blue tint */
.mlbb-card-head{
  background: rgba(37,99,235,.06) !important;  /* blue tint */
  border-bottom: 1px solid rgba(17,17,17,.08) !important;
}

/* Step badge: yellow (brand) */
.mlbb-step, .mlbb-badge{
  background: rgba(250,204,21,.25) !important;
  border: 1px solid rgba(17,17,17,.14) !important;
}

/* Pills: white with border */
.mlbb-pill{
  background: #fff !important;
  border: 1px solid rgba(17,17,17,.14) !important;
}

/* Primary pill/button stays yellow */
.mlbb-pill-primary,
.mlbb-btn-primary{
  background: #FACC15 !important;
  border-color: rgba(17,17,17,.18) !important;
  color: #111111 !important;
}

/* Links + subtle accents use blue */
.mlbb-terms a,
.mlbb-paydesc{
  color: #2563EB !important;
}

/* Inputs: add blue focus ring (still uses yellow border) */
.mlbb-input:focus,
input:focus, select:focus, textarea:focus{
  border-color: rgba(250,204,21,.85) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.14) !important;
}

/* Payment checkbox accent */
.mlbb-terms input{
  accent-color: #2563EB !important;
}
/* =========================================================
   Yellowish background + subtle pulsing glow on big cards
   ========================================================= */

/* Background: soft yellow */
body.mlbb-light{
  background: #FFF6D6 !important; /* yellowish cream */
}

/* Base card look */
.mlbb-card{
  background: #FFFFFF !important;
  border: 1px solid rgba(17,17,17,.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 26px rgba(17,17,17,.10) !important;
  position: relative;
}

/* Pulse glow animation (yellow -> darker -> yellow) */
@keyframes mlbbGlowPulse{
  0%{
    box-shadow:
      0 12px 26px rgba(17,17,17,.10),
      0 0 0 0 rgba(250,204,21,.0),
      0 0 22px rgba(250,204,21,.18);
  }
  50%{
    box-shadow:
      0 16px 32px rgba(17,17,17,.20),
      0 0 0 0 rgba(17,17,17,.0),
      0 0 18px rgba(17,17,17,.18);
  }
  100%{
    box-shadow:
      0 12px 26px rgba(17,17,17,.10),
      0 0 0 0 rgba(250,204,21,.0),
      0 0 22px rgba(250,204,21,.18);
  }
}

/* Apply the pulse */
.mlbb-card{
  animation: mlbbGlowPulse 2.6s ease-in-out infinite;
}

/* Make it calmer on hover (optional) */
.mlbb-card:hover{
  animation-duration: 3.4s;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .mlbb-card{ animation: none !important; }
}
/* =========================================================
   MLBB background: dark yellow/orange gradient + light yellow
   ========================================================= */

body.mlbb-light{
  /* Darker yellow/orange with a light-yellow glow area */
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(255, 243, 183, .95) 0%, rgba(255, 243, 183, 0) 60%),
    radial-gradient(800px 520px at 85% 18%, rgba(255, 214, 102, .55) 0%, rgba(255, 214, 102, 0) 55%),
    linear-gradient(135deg, #C97A00 0%, #F59E0B 35%, #FACC15 68%, #FFF3B0 100%) !important;

  background-attachment: fixed !important;
  color: #111111 !important;
}

/* Make big cards pop on the stronger background */
.mlbb-card{
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(17,17,17,.14) !important;
  box-shadow: 0 18px 36px rgba(17,17,17,.16) !important;
  backdrop-filter: blur(4px);
}
/* =========================================================
   MLBB "Game Store" Theme (teal/blue, pleasing like screenshot)
   ========================================================= */

body.mlbb-teal{
  color: #fff !important;
  background:
    radial-gradient(1200px 700px at 15% 18%, rgba(0, 200, 255, .35) 0%, rgba(0, 200, 255, 0) 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(0, 140, 255, .28) 0%, rgba(0, 140, 255, 0) 55%),
    linear-gradient(135deg, #0B3550 0%, #0B6D85 35%, #079BB9 70%, #0B3550 100%) !important;
  background-attachment: fixed !important;
}

/* Topbar matches theme */
body.mlbb-teal .mlbb-topbar{
  background: rgba(10, 30, 50, .55) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(10px);
}

body.mlbb-teal .mlbb-brand,
body.mlbb-teal .mlbb-brand-name{
  color: #fff !important;
}

/* Pills */
body.mlbb-teal .mlbb-pill{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
}

body.mlbb-teal .mlbb-pill:hover{
  background: rgba(255,255,255,.14) !important;
}

body.mlbb-teal .mlbb-pill-primary{
  background: rgba(0, 200, 255, .22) !important;
  border-color: rgba(0, 200, 255, .35) !important;
}

/* Big cards = glass */
body.mlbb-teal .mlbb-card{
  background: rgba(10, 22, 36, .38) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.25) !important;
  backdrop-filter: blur(12px);
}

/* Card header bar (dark strip like screenshot) */
body.mlbb-teal .mlbb-card-head{
  background: rgba(0,0,0,.28) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

body.mlbb-teal .mlbb-card-title{
  color: #fff !important;
}

/* Step badge */
body.mlbb-teal .mlbb-step,
body.mlbb-teal .mlbb-badge{
  background: rgba(0, 200, 255, .22) !important;
  border: 1px solid rgba(0, 200, 255, .35) !important;
  color: #fff !important;
}

/* Inputs */
body.mlbb-teal .mlbb-input,
body.mlbb-teal input,
body.mlbb-teal select,
body.mlbb-teal textarea{
  background: rgba(255,255,255,.92) !important;
  color: #0b1220 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
}

body.mlbb-teal .mlbb-input:focus,
body.mlbb-teal input:focus{
  box-shadow: 0 0 0 4px rgba(0, 200, 255, .22) !important;
  border-color: rgba(0, 200, 255, .55) !important;
}

/* Buttons */
body.mlbb-teal .mlbb-btn-primary{
  background: rgba(0, 200, 255, .22) !important;
  border: 1px solid rgba(0, 200, 255, .35) !important;
  color: #fff !important;
}

body.mlbb-teal .mlbb-btn-primary:hover{
  background: rgba(0, 200, 255, .30) !important;
}

body.mlbb-teal .mlbb-btn-secondary{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
}

/* Status text */
body.mlbb-teal .mlbb-status{ color: rgba(255,255,255,.82) !important; }
body.mlbb-teal .mlbb-status.ok{ color: #B6FFCB !important; }
body.mlbb-teal .mlbb-status.warn{ color: #FFE9A6 !important; }
body.mlbb-teal .mlbb-status.err{ color: #FFC2C2 !important; }

/* =========================================================
   Product cards (from your JS): .topup-product
   Make them blue "game package" style
   ========================================================= */

body.mlbb-teal #productsScroll{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 12px !important;
  padding: 14px 16px 16px !important;
}

body.mlbb-teal #productsScroll .topup-product{
  width: 100% !important;
  min-width: 0 !important;
  border-radius: 16px !important;
  padding: 12px !important;
  cursor: pointer;

  background: linear-gradient(135deg, #0BB8E6 0%, #0A86D6 55%, #075AAE 100%) !important;
  border: 1px solid rgba(0,0,0,.25) !important;
  box-shadow: 0 14px 26px rgba(0,0,0,.22) !important;

  color: #fff !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

body.mlbb-teal #productsScroll .topup-product:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 18px 32px rgba(0,0,0,.26) !important;
}

body.mlbb-teal #productsScroll .topup-product.active{
  outline: 3px solid rgba(0, 200, 255, .55);
  box-shadow: 0 0 0 4px rgba(0, 200, 255, .18), 0 18px 34px rgba(0,0,0,.28) !important;
}

/* Inner layout */
body.mlbb-teal #productsScroll .topup-product-left{
  display: flex;
  align-items: center;
  gap: 10px;
}

body.mlbb-teal #productsScroll .topup-product-img{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.18);
}

body.mlbb-teal #productsScroll .topup-product-title{
  font-weight: 1000;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.mlbb-teal #productsScroll .topup-product-price{
  margin-top: 10px;
  display: inline-block;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 1000;

  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
}

/* Payment box a bit cleaner */
body.mlbb-teal .mlbb-payrow{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

body.mlbb-teal .mlbb-checkline{
  border: 1px dashed rgba(255,255,255,.22) !important;
  background: rgba(0,0,0,.16) !important;
}

body.mlbb-teal .mlbb-terms a{ color: #BDF2FF !important; }

/* Footer */
body.mlbb-teal .mlbb-footer{ color: rgba(255,255,255,.80) !important; }
/* =========================================================
   RESET — Bokluy Yellow / White / Black (MLBB)
   Put this at VERY END of style.css
   ========================================================= */

body.mlbb-light{
  background: #FFFBEA !important;  /* soft light yellow */
  color: #111111 !important;
}

/* Topbar */
body.mlbb-light .mlbb-topbar{
  background: #ffffff !important;
  border-bottom: 1px solid rgba(17,17,17,.12) !important;
}

body.mlbb-light .mlbb-brand,
body.mlbb-light .mlbb-brand-name{
  color: #111111 !important;
}

/* Pills */
body.mlbb-light .mlbb-pill{
  background: #ffffff !important;
  border: 1px solid rgba(17,17,17,.14) !important;
  color: #111111 !important;
}

body.mlbb-light .mlbb-pill:hover{
  background: rgba(250,204,21,.14) !important;
}

body.mlbb-light .mlbb-pill-primary{
  background: #FACC15 !important;
  border-color: rgba(17,17,17,.18) !important;
  color: #111111 !important;
}

/* Big cards */
body.mlbb-light .mlbb-card{
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(17,17,17,.12) !important;
  box-shadow: 0 16px 34px rgba(17,17,17,.10) !important;
}

body.mlbb-light .mlbb-card-head{
  background: rgba(250,204,21,.10) !important;
  border-bottom: 1px solid rgba(17,17,17,.08) !important;
}

body.mlbb-light .mlbb-step,
body.mlbb-light .mlbb-badge{
  background: rgba(250,204,21,.25) !important;
  border: 1px solid rgba(17,17,17,.14) !important;
  color: #111111 !important;
}

/* Inputs */
body.mlbb-light .mlbb-input,
body.mlbb-light input,
body.mlbb-light select,
body.mlbb-light textarea{
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid rgba(17,17,17,.14) !important;
}

body.mlbb-light .mlbb-input:focus,
body.mlbb-light input:focus{
  border-color: rgba(250,204,21,.85) !important;
  box-shadow: 0 0 0 4px rgba(250,204,21,.22) !important;
}

/* Buttons */
body.mlbb-light .mlbb-btn-primary{
  background: #FACC15 !important;
  border: 1px solid rgba(17,17,17,.18) !important;
  color: #111111 !important;
}

body.mlbb-light .mlbb-btn-primary:hover{
  background: #EAB308 !important;
}

body.mlbb-light .mlbb-btn-secondary{
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid rgba(17,17,17,.14) !important;
}

/* Products (from JS): keep your yellow/orange cards + black border */
body.mlbb-light #productsScroll{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 12px !important;
  padding: 14px 16px 16px !important;
  overflow-x: hidden !important;
}

body.mlbb-light #productsScroll .topup-product{
  width: 100% !important;
  min-width: 0 !important;
  border-radius: 16px !important;
  padding: 12px !important;

  border: 2px solid #111 !important;
  background: linear-gradient(135deg, #FDE047 0%, #F59E0B 100%) !important;
  box-shadow: 0 12px 22px rgba(17,17,17,.12) !important;

  color: #111 !important;
}

body.mlbb-light #productsScroll .topup-product:hover{
  transform: translateY(-2px);
}

body.mlbb-light #productsScroll .topup-product.active{
  outline: 4px solid rgba(250,204,21,.55);
}

body.mlbb-light #productsScroll .topup-product-img{
  border: 2px solid #111;
  background: #fff;
}

body.mlbb-light #productsScroll .topup-product-price{
  background: rgba(255,255,255,.75);
  border: 2px solid #111;
  color: #111;
}

/* Payment */
body.mlbb-light .mlbb-payrow{
  background: #fff !important;
  border: 1px solid rgba(17,17,17,.12) !important;
}

body.mlbb-light .mlbb-checkline{
  border: 1px dashed rgba(17,17,17,.18) !important;
  background: rgba(250,204,21,.08) !important;
}

body.mlbb-light .mlbb-terms a{
  color: #111111 !important;
}

/* Footer */
body.mlbb-light .mlbb-footer{
  color: rgba(17,17,17,.75) !important;
}
/* =========================================================
   MLBB BLACK + YELLOW BORDERS (only for mlbb-light page)
   Paste at VERY END of style.css
   ========================================================= */

body.mlbb-light{
  background: #0B0B0B !important;
  color: #F5F5F5 !important;
}

/* Topbar */
body.mlbb-light .mlbb-topbar{
  background: #0B0B0B !important;
  border-bottom: 2px solid #FACC15 !important;
}

body.mlbb-light .mlbb-brand,
body.mlbb-light .mlbb-brand-name{
  color: #F5F5F5 !important;
}

/* Pills / Nav buttons */
body.mlbb-light .mlbb-pill{
  background: #0B0B0B !important;
  color: #F5F5F5 !important;
  border: 2px solid #FACC15 !important;
}

body.mlbb-light .mlbb-pill:hover{
  background: rgba(250,204,21,.10) !important;
}

body.mlbb-light .mlbb-pill-primary{
  background: #FACC15 !important;
  color: #0B0B0B !important;
  border: 2px solid #FACC15 !important;
}

/* Big cards */
body.mlbb-light .mlbb-card{
  background: #0F0F0F !important;
  border: 2px solid #FACC15 !important;
  box-shadow: none !important;
}

/* Card headers */
body.mlbb-light .mlbb-card-head{
  background: #0B0B0B !important;
  border-bottom: 2px solid #FACC15 !important;
}

body.mlbb-light .mlbb-card-title{
  color: #F5F5F5 !important;
}

body.mlbb-light .mlbb-step,
body.mlbb-light .mlbb-badge{
  background: #0B0B0B !important;
  color: #FACC15 !important;
  border: 2px solid #FACC15 !important;
}

/* Inputs */
body.mlbb-light .mlbb-input,
body.mlbb-light input,
body.mlbb-light select,
body.mlbb-light textarea{
  background: #0B0B0B !important;
  color: #F5F5F5 !important;
  border: 2px solid #FACC15 !important;
}

body.mlbb-light .mlbb-input::placeholder,
body.mlbb-light input::placeholder{
  color: rgba(245,245,245,.65) !important;
}

body.mlbb-light .mlbb-input:focus,
body.mlbb-light input:focus{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(250,204,21,.18) !important;
}

/* Buttons */
body.mlbb-light .mlbb-btn-primary{
  background: #FACC15 !important;
  color: #0B0B0B !important;
  border: 2px solid #FACC15 !important;
}

body.mlbb-light .mlbb-btn-secondary{
  background: #0B0B0B !important;
  color: #F5F5F5 !important;
  border: 2px solid #FACC15 !important;
}

/* Products (from your JS) */
body.mlbb-light #productsScroll{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 12px !important;
  padding: 14px 16px 16px !important;
  overflow-x: hidden !important;
}

body.mlbb-light #productsScroll .topup-product{
  background: #0B0B0B !important;
  color: #F5F5F5 !important;
  border: 2px solid #FACC15 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

body.mlbb-light #productsScroll .topup-product.active{
  outline: 4px solid rgba(250,204,21,.35) !important;
}

body.mlbb-light #productsScroll .topup-product-img{
  background: #0F0F0F !important;
  border: 2px solid #FACC15 !important;
}

body.mlbb-light #productsScroll .topup-product-price{
  background: #0F0F0F !important;
  border: 2px solid #FACC15 !important;
  color: #FACC15 !important;
}

/* Payment checkline */
body.mlbb-light .mlbb-checkline{
  background: #0B0B0B !important;
  border: 2px dashed #FACC15 !important;
}

body.mlbb-light .mlbb-terms a{
  color: #FACC15 !important;
}

/* Footer */
body.mlbb-light .mlbb-footer{
  color: rgba(245,245,245,.70) !important;
}/* =========================================================
   MLBB background: dark gray like screenshot (not pure black)
   ========================================================= */

body.mlbb-light{
  color: #F2F2F2 !important;

  /* Dark gray gradient + soft vignette */
  background:
    radial-gradient(1100px 700px at 18% 12%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 650px at 85% 20%, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(135deg, #3B3F45 0%, #2F3338 45%, #262A2F 100%) !important;

  background-attachment: fixed !important;
}

/* Keep your yellow borders, but soften card background slightly */
body.mlbb-light .mlbb-card{
  background: rgba(20,22,25,.65) !important;   /* dark gray panel */
  border: 2px solid #FACC15 !important;        /* yellow border */
}

/* Topbar darker gray */
body.mlbb-light .mlbb-topbar{
  background: rgba(35,38,43,.85) !important;
  border-bottom: 2px solid #FACC15 !important;
}

/* Inputs: dark gray, still readable */
body.mlbb-light .mlbb-input,
body.mlbb-light input,
body.mlbb-light select,
body.mlbb-light textarea{
  background: rgba(40,44,50,.9) !important;
  border: 2px solid #FACC15 !important;
  color: #F2F2F2 !important;
}
body.mlbb-light .mlbb-input::placeholder,
body.mlbb-light input::placeholder{
  color: rgba(242,242,242,.55) !important;
}

/* Product cards: dark gray with yellow border */
body.mlbb-light #productsScroll .topup-product{
  background: rgba(28,31,36,.92) !important;
  border: 2px solid #FACC15 !important;
  color: #F2F2F2 !important;
}
body.mlbb-light #productsScroll .topup-product-price{
  background: rgba(0,0,0,.25) !important;
  border: 2px solid #FACC15 !important;
  color: #FACC15 !important;
}
/* =========================================================
   MLBB: Dark gray background + WHITE cards + yellow borders
   ========================================================= */

/* Keep the dark gray background (do not change) */
body.mlbb-light{
  color: #111111 !important; /* default text inside white cards */
}

/* Big cards -> WHITE */
body.mlbb-light .mlbb-card{
  background: #FFFFFF !important;
  border: 2px solid #FACC15 !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.18) !important;
}

/* Card header stays clean */
body.mlbb-light .mlbb-card-head{
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(17,17,17,.10) !important;
}

body.mlbb-light .mlbb-card-title{
  color: #111111 !important;
}

body.mlbb-light .mlbb-step,
body.mlbb-light .mlbb-badge{
  background: rgba(250,204,21,.22) !important;
  border: 2px solid #FACC15 !important;
  color: #111111 !important;
}

/* Inputs inside cards -> white */
body.mlbb-light .mlbb-input,
body.mlbb-light input,
body.mlbb-light select,
body.mlbb-light textarea{
  background: #FFFFFF !important;
  color: #111111 !important;
  border: 2px solid #FACC15 !important;
}

body.mlbb-light .mlbb-input::placeholder,
body.mlbb-light input::placeholder{
  color: rgba(17,17,17,.50) !important;
}

/* Products -> white cards, yellow border */
body.mlbb-light #productsScroll .topup-product{
  background: #FFFFFF !important;
  border: 2px solid #FACC15 !important;
  color: #111111 !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.14) !important;
}

body.mlbb-light #productsScroll .topup-product-img{
  background: #FFFFFF !important;
  border: 2px solid #FACC15 !important;
}

body.mlbb-light #productsScroll .topup-product-price{
  background: rgba(250,204,21,.16) !important;
  border: 2px solid #FACC15 !important;
  color: #111111 !important;
}

/* Nav pills keep yellow border but readable on dark topbar */
body.mlbb-light .mlbb-pill{
  background: transparent !important;
  color: #F2F2F2 !important;
  border: 2px solid #FACC15 !important;
}
body.mlbb-light .mlbb-pill-primary{
  background: #FACC15 !important;
  color: #111111 !important;
}
/* =========================================================
   Topup shared components for pages like MCGG
   ========================================================= */

body.topup-light .topup-card{
  background: #fff !important;
  border: 2px solid #FACC15 !important;
  border-radius: 18px;
  box-shadow: 0 18px 36px rgba(0,0,0,.18) !important;
  overflow: hidden;
  margin-top: 14px;
}

body.topup-light .topup-card-head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(17,17,17,.10);
}

body.topup-light .topup-card-head h3{
  margin: 0;
  font-weight: 1000;
}

.topup-form-grid{
  padding: 14px 16px 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 760px){
  .topup-form-grid{ grid-template-columns: 1fr; }
}

.topup-field label{
  display: block;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 6px;
  color: rgba(17,17,17,.70);
}

body.topup-light .topup-input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 2px solid #FACC15 !important;
  background: #fff !important;
  color: #111 !important;
  outline: none;
}

.topup-packages{
  padding: 10px 16px 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.topup-submit{
  padding: 12px 16px 16px;
  text-align: center;
}

.topup-btn-big{
  padding: 12px 26px !important;
}

.topup-note{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(17,17,17,.70);
  font-weight: 700;
}
/* HOK / topup pages: make sure cards are WHITE with yellow border */
body.topup-light .topup-card{
  background: #fff !important;
  border: 2px solid #FACC15 !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.18) !important;
}

/* Make header/nav buttons readable on dark header */
body.topup-light .topup-header-btn{
  color: #F2F2F2 !important;
  border: 2px solid #FACC15 !important;
  background: transparent !important;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
}

/* Status colors for white cards */
body.topup-light .topup-status{ color: rgba(17,17,17,.70) !important; font-weight: 800; }
body.topup-light .topup-status.ok{ color: #0F7A2A !important; }
body.topup-light .topup-status.warn{ color: #8A6A00 !important; }
body.topup-light .topup-status.err{ color: #B00020 !important; }

/* Player name box should be white too */
body.topup-light .topup-player-name{
  background: rgba(250,204,21,.12) !important;
  border: 2px solid #FACC15 !important;
  color: #111 !important;
}
/* =========================================================
   UNIVERSAL GAME THEME (dark gray background)
   + WHITE cards + yellow borders
   + Supports per-game prefixes:
     mlbb- / hok- / freefire- / pubg- / mcgg-
   + Universal footer .site-footer (yellow boxed)
   ========================================================= */

/* 1) Page background for ALL game pages */
body.game-page{
  background:
    radial-gradient(1100px 700px at 18% 12%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 650px at 85% 20%, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(135deg, #3B3F45 0%, #2F3338 45%, #262A2F 100%) !important;
  background-attachment: fixed !important;
  overflow-x: hidden !important;
}

/* 2) Shared layout wrappers (works with your existing MLBB layout) */
.game-page :where(.mlbb-page, .hok-page, .freefire-page, .pubg-page, .mcgg-page){
  width: min(1200px, 96vw);
  margin: 0 auto;
  padding: 18px 0 30px;
}

.game-page :where(.mlbb-grid, .hok-grid, .freefire-grid, .pubg-grid, .mcgg-grid){
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 16px;
}

@media (max-width: 980px){
  .game-page :where(.mlbb-grid, .hok-grid, .freefire-grid, .pubg-grid, .mcgg-grid){
    grid-template-columns: 1fr;
  }
}

/* 3) Topbar shared (per-game prefixes) */
.game-page :where(
  .mlbb-topbar, .hok-topbar, .freefire-topbar, .pubg-topbar, .mcgg-topbar
){
  background: rgba(35,38,43,.85);
  border-bottom: 2px solid #FACC15;
  backdrop-filter: blur(10px);
}

.game-page :where(
  .mlbb-topbar-inner, .hok-topbar-inner, .freefire-topbar-inner, .pubg-topbar-inner, .mcgg-topbar-inner
){
  width: min(1200px, 96vw);
  margin: 0 auto;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.game-page :where(.mlbb-brand, .hok-brand, .freefire-brand, .pubg-brand, .mcgg-brand){
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.game-page :where(.mlbb-brand-name, .hok-brand-name, .freefire-brand-name, .pubg-brand-name, .mcgg-brand-name){
  color: #F2F2F2;
  font-weight: 1000;
}

.game-page :where(.mlbb-logo, .hok-logo, .freefire-logo, .pubg-logo, .mcgg-logo){
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Pills */
.game-page :where(.mlbb-pill, .hok-pill, .freefire-pill, .pubg-pill, .mcgg-pill){
  background: transparent;
  color: #F2F2F2;
  border: 2px solid #FACC15;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  text-decoration: none;
}

.game-page :where(.mlbb-pill-primary, .hok-pill-primary, .freefire-pill-primary, .pubg-pill-primary, .mcgg-pill-primary){
  background: #FACC15;
  color: #111;
}

/* 4) WHITE cards + yellow border (per-game prefixes) */
.game-page :where(
  .mlbb-card, .hok-card, .freefire-card, .pubg-card, .mcgg-card
){
  background: #fff;
  border: 2px solid #FACC15;
  border-radius: 18px;
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
  overflow: hidden;
}

.game-page :where(
  .mlbb-card-head, .hok-card-head, .freefire-card-head, .pubg-card-head, .mcgg-card-head
){
  background: #fff;
  border-bottom: 1px solid rgba(17,17,17,.10);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.game-page :where(
  .mlbb-card-title, .hok-card-title, .freefire-card-title, .pubg-card-title, .mcgg-card-title
){
  margin: 0;
  font-weight: 1000;
  color: #111;
}

.game-page :where(
  .mlbb-step, .hok-step, .freefire-step, .pubg-step, .mcgg-step,
  .mlbb-badge, .hok-badge, .freefire-badge, .pubg-badge, .mcgg-badge
){
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(250,204,21,.22);
  border: 2px solid #FACC15;
  color: #111;
  font-weight: 1000;
}

/* Left guide area */
.game-page :where(
  .mlbb-guide, .hok-guide, .freefire-guide, .pubg-guide, .mcgg-guide
){
  padding: 14px;
}

.game-page :where(
  .mlbb-guide-banner, .hok-guide-banner, .freefire-guide-banner, .pubg-guide-banner, .mcgg-guide-banner
){
  width: 100%;
  border-radius: 16px;
  border: 2px solid #FACC15;
  display: block;
}

.game-page :where(
  .mlbb-guide-text, .hok-guide-text, .freefire-guide-text, .pubg-guide-text, .mcgg-guide-text
){
  margin-top: 12px;
  font-weight: 800;
  color: rgba(17,17,17,.78);
}

/* 5) Inputs + buttons */
.game-page :where(
  .mlbb-form, .hok-form, .freefire-form, .pubg-form, .mcgg-form
){
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
}

@media (max-width: 760px){
  .game-page :where(.mlbb-form, .hok-form, .freefire-form, .pubg-form, .mcgg-form){
    grid-template-columns: 1fr;
  }
}

.game-page :where(
  .mlbb-input, .hok-input, .freefire-input, .pubg-input, .mcgg-input
){
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 2px solid #FACC15;
  background: #fff;
  color: #111;
  outline: none;
}

.game-page :where(
  .mlbb-btn, .hok-btn, .freefire-btn, .pubg-btn, .mcgg-btn
){
  border-radius: 14px;
  border: 2px solid #FACC15;
  font-weight: 1000;
  padding: 12px 14px;
  cursor: pointer;
}

.game-page :where(
  .mlbb-btn-primary, .hok-btn-primary, .freefire-btn-primary, .pubg-btn-primary, .mcgg-btn-primary
){
  background: #FACC15;
  color: #111;
}

.game-page :where(
  .mlbb-btn-secondary, .hok-btn-secondary, .freefire-btn-secondary, .pubg-btn-secondary, .mcgg-btn-secondary
){
  background: #fff;
  color: #111;
}

/* 6) Products grid (IDs are same across games) */
.game-page #productsScroll{
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  overflow-x: hidden;
}

/* Your JS renders .topup-product */
.game-page #productsScroll .topup-product{
  background: #fff !important;
  border: 2px solid #FACC15 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.14) !important;
  color: #111 !important;
}

.game-page #productsScroll .topup-product.active{
  outline: 4px solid rgba(250,204,21,.35);
}

.game-page #productsScroll .topup-product-price{
  background: rgba(250,204,21,.16) !important;
  border: 2px solid #FACC15 !important;
  color: #111 !important;
  border-radius: 12px;
}

/* 7) Payment area shared */
.game-page :where(
  .mlbb-paybox, .hok-paybox, .freefire-paybox, .pubg-paybox, .mcgg-paybox
){
  padding: 14px;
}

.game-page :where(
  .mlbb-checkline, .hok-checkline, .freefire-checkline, .pubg-checkline, .mcgg-checkline
){
  margin-top: 10px;
  border: 2px dashed rgba(17,17,17,.20);
  background: rgba(250,204,21,.10);
  border-radius: 14px;
  padding: 12px;
}

.game-page :where(
  .mlbb-total, .hok-total, .freefire-total, .pubg-total, .mcgg-total
){
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* =========================================================
   UNIVERSAL FOOTER (yellow boxed like screenshot)
   ========================================================= */

.site-footer{
  margin: 26px auto 40px;
  width: min(1200px, 96vw);
  padding: 26px 18px 22px;

  background: #FACC15;
  border: 3px solid #111;
  border-radius: 22px;

  text-align: center;
  color: #111;
}

.footer-social{
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
}

.social-circle{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 3px solid #111;
  text-decoration: none;
}

.social-circle svg{
  width: 22px;
  height: 22px;
  fill: #111;
}

.footer-copy{
  font-weight: 900;
  font-size: 22px;
  margin: 6px 0 10px;
}

.footer-links{
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 14px;
}

.footer-links a{
  color: #111;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.footer-pay{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-weight: 1000;
  font-size: 22px;
}

.footer-pay img{
  height: 34px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 3px solid #111;
  background: #fff;
}
/* =========================================================
   FIX: Payment section consistency across all game pages
   (mlbb / freefire / pubg / mcgg / hok)
   ========================================================= */

.game-page :where(
  .mlbb-paybox, .freefire-paybox, .pubg-paybox, .mcgg-paybox, .hok-paybox
){
  padding: 14px !important;
  display: grid;
  gap: 12px;
}

/* Payment row */
.game-page :where(
  .mlbb-payrow, .freefire-payrow, .pubg-payrow, .mcgg-payrow, .hok-payrow
){
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  background: #fff !important;
  border: 2px solid #FACC15 !important;
  border-radius: 16px !important;
  padding: 12px !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.10) !important;
}

.game-page :where(
  .mlbb-paylogo, .freefire-paylogo, .pubg-paylogo, .mcgg-paylogo, .hok-paylogo
){
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  border: 2px solid #FACC15 !important;
  background: #fff !important;
  object-fit: contain !important;
  padding: 6px !important;
  flex: 0 0 auto;
}

.game-page :where(
  .mlbb-paymeta, .freefire-paymeta, .pubg-paymeta, .mcgg-paymeta, .hok-paymeta
){
  flex: 1 1 auto !important;
  min-width: 0;
}

.game-page :where(
  .mlbb-paytitle, .freefire-paytitle, .pubg-paytitle, .mcgg-paytitle, .hok-paytitle
){
  font-weight: 1000 !important;
  color: #111 !important;
  font-size: 18px !important;
  line-height: 1.1;
}

.game-page :where(
  .mlbb-paydesc, .freefire-paydesc, .pubg-paydesc, .mcgg-paydesc, .hok-paydesc
){
  font-weight: 900 !important;
  color: rgba(17,17,17,.70) !important;
  margin-top: 4px !important;
  line-height: 1.2;
}

.game-page :where(
  .mlbb-paytag, .freefire-paytag, .pubg-paytag, .mcgg-paytag, .hok-paytag
){
  flex: 0 0 auto;
  font-weight: 1000 !important;
  border: 2px solid #FACC15 !important;
  background: rgba(250,204,21,.18) !important;
  color: #111 !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
}

/* Terms line */
.game-page :where(
  .mlbb-checkline, .freefire-checkline, .pubg-checkline, .mcgg-checkline, .hok-checkline
){
  border: 2px dashed rgba(17,17,17,.25) !important;
  background: rgba(250,204,21,.12) !important;
  border-radius: 14px !important;
  padding: 12px !important;
}

.game-page :where(
  .mlbb-terms, .freefire-terms, .pubg-terms, .mcgg-terms, .hok-terms
){
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: 1000 !important;
  color: #111 !important;
}

.game-page :where(
  .mlbb-terms a, .freefire-terms a, .pubg-terms a, .mcgg-terms a, .hok-terms a
){
  color: #111 !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Total row */
.game-page :where(
  .mlbb-total, .freefire-total, .pubg-total, .mcgg-total, .hok-total
){
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;

  background: #fff !important;
  border: 2px solid rgba(17,17,17,.08) !important;
  border-radius: 16px !important;
  padding: 12px !important;
}

.game-page :where(
  .mlbb-total-label, .freefire-total-label, .pubg-total-label, .mcgg-total-label, .hok-total-label
){
  font-weight: 1000 !important;
  letter-spacing: .06em;
  color: rgba(17,17,17,.75) !important;
}

.game-page :where(
  .mlbb-total-value, .freefire-total-value, .pubg-total-value, .mcgg-total-value, .hok-total-value
){
  font-weight: 1000 !important;
  font-size: 28px !important;
  color: #111 !important;
}

/* Make disabled Pay still look decent */
.game-page :where(
  .mlbb-btn-primary, .freefire-btn-primary, .pubg-btn-primary, .mcgg-btn-primary, .hok-btn-primary
)[disabled]{
  opacity: .55;
  cursor: not-allowed;
}
/* =========================================================
   CLEAN SPACING + TERMS ALIGN FIX (all game pages)
   ========================================================= */

/* 1) Add clean vertical spacing between the big cards */
.game-page :where(.mlbb-right, .freefire-right, .pubg-right, .mcgg-right, .hok-right){
  display: flex;
  flex-direction: column;
  gap: 16px;              /* space between big cards */
}

/* Also add spacing on the left column */
.game-page :where(.mlbb-left, .freefire-left, .pubg-left, .mcgg-left, .hok-left){
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 2) Fix the Terms checkbox + text alignment */
.game-page :where(
  .mlbb-checkline, .freefire-checkline, .pubg-checkline, .mcgg-checkline, .hok-checkline
){
  display: flex;
  align-items: center;
  justify-content: flex-start; /* never center */
}

.game-page :where(
  .mlbb-terms, .freefire-terms, .pubg-terms, .mcgg-terms, .hok-terms
){
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  text-align: left !important;
}

/* Make checkbox not drift */
.game-page :where(
  .mlbb-terms input, .freefire-terms input, .pubg-terms input, .mcgg-terms input, .hok-terms input
){
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0 !important;
}

/* Make text stay next to checkbox */
.game-page :where(
  .mlbb-terms span, .freefire-terms span, .pubg-terms span, .mcgg-terms span, .hok-terms span
){
  flex: 1 1 auto;
  display: inline-block;
}

/* 3) Payment card internal spacing (so it breathes like MLBB) */
.game-page :where(
  .mlbb-paybox, .freefire-paybox, .pubg-paybox, .mcgg-paybox, .hok-paybox
){
  display: grid;
  gap: 14px;
}

/* 4) Make Pay row wrap nicely on small screens */
@media (max-width: 520px){
  .game-page :where(
    .mlbb-payrow, .freefire-payrow, .pubg-payrow, .mcgg-payrow, .hok-payrow
  ){
    flex-wrap: wrap;
  }
  .game-page :where(
    .mlbb-paytag, .freefire-paytag, .pubg-paytag, .mcgg-paytag, .hok-paytag
  ){
    margin-left: auto;
  }
}

/* ===== Home game cards v2 (like your 1st screenshot) ===== */
.game-grid.game-grid-v2{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

/* Make the whole card clickable */
.game-grid-v2 .game-card{
  display: block;
  text-decoration: none;
  border-radius: 18px;
  overflow: hidden;
  background: #2a2b2f; /* dark body behind image */
  border: 2px solid rgba(0,0,0,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}

.game-grid-v2 .game-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
}

.game-grid-v2 .game-card-img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* Yellow text strip (instead of gray) */
.game-grid-v2 .game-card-label{
  background: #f5c400;
  color: #111;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 14px 16px;
  font-size: 18px;
  border-top: 2px solid rgba(0,0,0,.25);
}

@media (max-width: 520px){
  .game-grid-v2 .game-card-img{ height: 180px; }
  .game-grid-v2 .game-card-label{ font-size: 16px; }
}

/* OPTIONAL: hide old tile styles if they interfere */
.game-grid-v2 .game-tile,
.game-grid-v2 .topup-btn-yellow{
  display: none !important;
}
/* ===== Home game cards (reference layout: big image + bottom strip) ===== */
.game-grid.game-grid-v3{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.game-card-v3{
  display: block;
  text-decoration: none;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}

.game-card-v3:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
}

/* Big image area */
.game-card-v3-media{
  width: 100%;
  height: 260px;           /* adjust for your exact look */
  background: #222;
}

.game-card-v3-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bottom strip (YOU want yellow instead of gray) */
.game-card-v3-label{
  background: #f5c400;     /* yellow strip */
  color: #111;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 16px 18px;
  font-size: 18px;
  border-top: 2px solid rgba(0,0,0,.25);
}

@media (max-width: 520px){
  .game-card-v3-media{ height: 200px; }
  .game-card-v3-label{ font-size: 16px; padding: 14px 16px; }
}
/* =========================
   FIX: Bokluy yellow footer
   ========================= */

/* footer container */
.site-footer{
  width: min(1200px, calc(100% - 48px));
  margin: 36px auto 36px;
  padding: 28px 22px;

  background: #f5c400;
  border: 3px solid #111;
  border-radius: 22px;

  text-align: center;
  box-sizing: border-box;
}

/* socials row */
.site-footer .footer-social{
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin-bottom: 14px;
}

/* social circle buttons */
.site-footer .social-circle{
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  border: 3px solid #111;
  background: #fff;

  text-decoration: none;
}

/* svg icon size */
.site-footer .social-circle svg{
  width: 22px;
  height: 22px;
  fill: #111;
}

/* copyright */
.site-footer .footer-copy{
  font-weight: 900;
  font-size: 26px;
  color: #111;
  margin: 10px 0 8px;
}

/* links */
.site-footer .footer-links{
  font-weight: 900;
  font-size: 22px;
  margin: 6px 0 14px;
}

.site-footer .footer-links a{
  color: #111;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* accept row */
.site-footer .footer-pay{
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.site-footer .footer-pay span{
  font-weight: 900;
  font-size: 24px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}

/* IMPORTANT: prevent global img rules from stretching these */
.site-footer .footer-pay img{
  width: 96px !important;
  height: 38px !important;
  object-fit: contain !important;
  display: block;
  max-width: none !important;
}

/* responsive */
@media (max-width: 600px){
  .site-footer{ width: calc(100% - 24px); margin: 24px auto; }
  .site-footer .footer-copy{ font-size: 20px; }
  .site-footer .footer-links{ font-size: 18px; }
  .site-footer .footer-pay span{ font-size: 18px; }
  .site-footer .footer-pay img{ width: 82px !important; height: 34px !important; }
}
/* =========================
   MOBILE-FIRST OVERRIDES
   Paste at the BOTTOM
   ========================= */

html, body{
  width: 100%;
  overflow-x: hidden;
}

img, video{
  max-width: 100%;
  height: auto;
}

:root{
  --mobile-pad: 14px;
}

/* Top bar: keep clean on small screens */
@media (max-width: 900px){
  .mlbb-topbar-inner{
    padding: 10px var(--mobile-pad);
  }

  .mlbb-nav{
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .mlbb-pill{
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* Make ALL topup pages go 1-column on mobile */
@media (max-width: 900px){
  .mlbb-page{
    padding: 16px var(--mobile-pad);
  }

  .mlbb-grid{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .mlbb-left,
  .mlbb-right{
    width: 100%;
  }

  /* Big cards spacing */
  .mlbb-right{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .mlbb-card{
    border-radius: 16px;
  }

  /* Inputs + buttons full width */
  .mlbb-form{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mlbb-btn{
    width: 100%;
  }

  /* Products: 2 columns on mobile, 1 column on very small phones */
  .mlbb-products{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: none !important; /* avoid “stuck scroll” issues */
    overflow: visible !important;
  }
}

@media (max-width: 420px){
  .mlbb-products{
    grid-template-columns: 1fr;
  }
}

/* Footer: stack nicely on mobile */
@media (max-width: 900px){
  .site-footer{
    padding: 18px var(--mobile-pad);
  }

  .footer-social{
    justify-content: center;
  }

  .footer-links,
  .footer-pay,
  .footer-copy{
    text-align: center;
  }

  .footer-pay{
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* HOME page game grid: mobile-friendly */
@media (max-width: 900px){
  .game-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (max-width: 420px){
  .game-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================
   HOME (mobile only) — game card layout
   Paste at the BOTTOM of style.css
   ========================================= */

@media (max-width: 768px){

  /* Grid = 3 columns like the screenshot */
  .game-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0 12px;
  }

  /* Card */
  .game-tile{
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #3a3f47;              /* dark card base (behind image) */
    aspect-ratio: 1 / 1;              /* square tiles */
  }

  /* Image fills the tile */
  .game-tile img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Title overlay (bottom bar) */
  .game-tile h3{
    
    left: 0;
    right: 0;
    bottom: 0;

    margin: 0;
    padding: 10px 10px;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;

    color: #fff;
    background: rgba(0,0,0,0.45);     /* overlay like screenshot */
    z-index: 2;
  }

  /* Make the existing TOPUP <a> turn into a full-card click target */
  .game-tile .topup-btn-yellow{
    position: absolute;
    inset: 0;
    opacity: 0;                       /* invisible */
    z-index: 3;                       /* above everything */
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
  }
}

/* Very small phones: switch to 2 columns so it doesn’t get too tiny */
@media (max-width: 360px){
  .game-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* HOME (game cards v3) — 3 per row on mobile, smaller cards */
@media (max-width: 768px){
  .game-grid.game-grid-v3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  /* make the whole card smaller + tighter */
  .game-card-v3{
    border-radius: 14px;
    overflow: hidden;
  }

  /* smaller image area */
  .game-card-v3-media{
    height: 105px;
  }

  /* ensure the image fills nicely */
  .game-card-v3-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* smaller label area */
  .game-card-v3-label{
    font-size: 11px;
    padding: 8px 8px;
    letter-spacing: .3px;
    line-height: 1.1;
  }
}

/* very small phones: switch to 2 per row so it doesn't look cramped */
@media (max-width: 360px){
  .game-grid.game-grid-v3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .game-card-v3-media{ height: 120px; }
}
/* HOME topup page: make the white background darker (gray) */
body.topup-bg{
  background: #e4e6ea; /* change darker/lighter if you want */
}

/* Add a bordered box around the left text inside "Game Top Up" strip */
.topup-strip > div:first-child{
  border: 2px solid var(--ty-yellow);
  border-radius: 999px;           /* pill-like */
  padding: 10px 14px;
  background: var(--ty-white);
  box-shadow: var(--ty-shadow);
}

/* Optional: tighten the text so it fits nicely inside the new border */
.topup-strip > div:first-child h2{
  margin: 0;
  font-size: 16px;
}
.topup-strip > div:first-child p{
  margin: 2px 0 0;
  font-size: 12px;
}

/* Make the left "Game Top Up / Select..." box border same as game-name yellow */
.topup-strip > div:first-child{
  border: 2px solid #f4b400;  /* same yellow tone */
  border-radius: 999px;
  padding: 10px 14px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.10);
}
/* HOME: wrap the whole top strip in a yellow bordered container */
.topup-strip{
  border: 2px solid #f4b400;     /* same as game-name yellow */
  border-radius: 16px;
  padding: 12px 12px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  margin-bottom: 14px;
}

/* Keep layout clean on small screens */
@media (max-width: 480px){
  .topup-strip{
    gap: 10px;
    padding: 10px;
  }
}
/* Remove the mistaken inner border around the left text block */
.topup-strip > div:first-child{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* ===== User icon menu ===== */
.userbox{ position:relative; display:inline-flex; align-items:center; }
.userbtn{
  width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.08);
  color:#fff;
  cursor:pointer;
}
.userbtn:active{ transform:scale(.98); }
.usericon{ font-size:18px; line-height:1; }

.usermenu{
  position:absolute; right:0; top:50px;
  width:180px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(10,15,30,0.95);
  backdrop-filter: blur(10px);
  padding:8px;
  display:none;
  z-index:9999;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.usermenu.open{ display:block; }

.um-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  color:rgba(255,255,255,0.92);
  font-weight:800;
  background:transparent;
  border:0;
  cursor:pointer;
}
.um-item:hover{ background:rgba(255,255,255,0.08); }
.um-item.danger{ color:#ffb4b4; }
/* ===== User icon menu (near Marketplace) ===== */
.userbox{ position:relative; display:inline-flex; align-items:center; }

.userbtn{
  width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.08);
  cursor:pointer;
  padding:0;
  overflow:hidden;
}

.userbtn-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.userbtn-fallback{
  width:100%;
  height:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:#fff;
}

.usermenu{
  position:absolute;
  right:0;
  top:50px;
  width:190px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(10,15,30,0.95);
  backdrop-filter: blur(10px);
  padding:8px;
  display:none;
  z-index:9999;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.usermenu.open{ display:block; }

.um-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  color:rgba(255,255,255,0.92);
  font-weight:800;
  background:transparent;
  border:0;
  cursor:pointer;
}

.um-item:hover{ background:rgba(255,255,255,0.08); }
.um-item.danger{ color:#ffb4b4; }
/* ===== Topup topbar alignment fix ===== */
.topup-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between; /* <-- key */
  gap:12px;
}

.topup-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.topup-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto; /* extra safety */
}

/* ===== User icon menu ===== */
.userbox{ position:relative; display:inline-flex; align-items:center; }

.userbtn{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.08);
  cursor:pointer;
  padding:0;
  overflow:hidden;
}

.userbtn-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.userbtn-fallback{
  width:100%;
  height:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:#fff;
}

.usermenu{
  position:absolute;
  right:0;
  top:52px;
  width:190px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(10,15,30,0.95);
  backdrop-filter: blur(10px);
  padding:8px;
  display:none;
  z-index:9999;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.usermenu.open{ display:block; }

.um-item{
  width:100%;
  display:flex;
  align-items:center;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  color:rgba(255,255,255,0.92);
  font-weight:900;
  background:transparent;
  border:0;
  cursor:pointer;
}
.um-item:hover{ background:rgba(255,255,255,0.08); }
.um-item.danger{ color:#ffb4b4; }
/* =========================
   TERMS / REFUND (LEGAL) PAGE FIX
   Add <body class="legal-page">
   ========================= */

.legal-page{
  background:#fff;
  color:#111;
}

/* Prevent weird horizontal overflow on mobile */
.legal-page, .legal-page *{
  max-width:100%;
}
.legal-page{
  overflow-x:hidden;
}

/* Main shell: center + spacing */
.legal-page .topup-shell,
.legal-page .container,
.legal-page main{
  width:min(980px, 100%);
  margin:0 auto;
  padding-left:14px;
  padding-right:14px;
}

/* Header card */
.legal-page .topup-topbar,
.legal-page .legal-header{
  margin-top:14px;
  border:2px solid #ffbf1f;
  border-radius:16px;
  background:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* If your header uses "Back" button inside */
.legal-page .topup-actions .topup-pill,
.legal-page .legal-header .back-btn{
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  color:#111;
}

/* Content card (fix: light background + readable text) */
.legal-page .legal-card,
.legal-page .terms-card,
.legal-page .refund-card,
.legal-page .topup-card{
  margin-top:12px;
  border-radius:18px;
  border:2px solid #ffbf1f;
  background:#fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  overflow:hidden;
}

/* Content area inside card (fix: remove dark overlay feel) */
.legal-page .legal-body,
.legal-page .terms-body,
.legal-page .refund-body,
.legal-page .topup-card-body,
.legal-page .content{
  background:#fff;
  color:#111;
  padding:14px 14px 16px;
  line-height:1.65;
  font-size:14px;
}

/* Headings spacing */
.legal-page h1, .legal-page h2, .legal-page h3{
  margin:10px 0 8px;
  line-height:1.25;
}
.legal-page p{ margin:10px 0; }

/* Lists look clean */
.legal-page ul, .legal-page ol{
  margin:10px 0 10px 18px;
  padding:0;
}
.legal-page li{ margin:6px 0; }

/* Remove any “forced dark panel” styles if your old CSS does that */
.legal-page .dark,
.legal-page .panel-dark,
.legal-page .topup-notes,
.legal-page .note-card{
  background:#fff !important;
  color:#111 !important;
}

/* If you have the yellow "BOKLUY TERMS" button bar:
   make it normal (not squishing content) */
.legal-page .bokluy-terms-btn,
.legal-page .terms-btn,
.legal-page .legal-cta{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin:12px 0 0;
  padding:10px 12px;
  border-radius:14px;
  border:2px solid #111;
  background: linear-gradient(180deg, #ffd54a 0%, #ffbf1f 100%);
  color:#111;
  font-weight:1000;
}

/* Footer: keep it below content (no overlap) */
.legal-page .site-footer{
  margin-top:16px;
}

/* Mobile tune */
@media (max-width:520px){
  .legal-page .topup-shell,
  .legal-page .container,
  .legal-page main{
    padding-left:12px;
    padding-right:12px;
  }

  .legal-page .legal-body,
  .legal-page .terms-body,
  .legal-page .refund-body,
  .legal-page .topup-card-body,
  .legal-page .content{
    padding:12px 12px 14px;
    font-size:14px;
  }
}
/* =========================================
   MARKETPLACE -> game-card-like layout
   3 in a row on mobile
   ========================================= */

.market-grid-v3{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 700px){
  .market-grid-v3{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 980px){
  .market-grid-v3{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Card */
.market-card-v3{
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1.5px solid rgba(255,191,31,.45);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.market-card-v3:hover{
  border-color: rgba(255,191,31,.75);
  box-shadow: 0 14px 34px rgba(0,0,0,.09);
}

.market-card-v3-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.market-card-v3-media{
  width:100%;
  aspect-ratio: 1 / 1;
  background: rgba(0,0,0,.03);
}
.market-card-v3-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.market-card-v3-label{
  padding:10px 10px 6px;
  font-weight:1100;
  font-size:12.5px;
  line-height:1.15;
  color: rgba(0,0,0,.86);
  text-transform: uppercase;
}

.market-card-v3-meta{
  padding:0 10px 8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.market-pill{
  font-size:11px;
  font-weight:1000;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,213,74,.18);
  color: rgba(0,0,0,.82);
}

.market-card-v3-sub{
  padding:8px 10px 10px;
  border-top:1px solid rgba(0,0,0,.06);
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  color: rgba(0,0,0,.62);
  font-weight:900;
}

/* Make sure your marketplace container uses this class */
#listingsGrid.market-grid-v3{
  margin-top:10px;
}
/* =========================================
   HOME (mobile only) — game card layout v4
   3 columns, square tiles, image + yellow bottom label
   Paste at the VERY END of style.css
   ========================================= */

@media (max-width: 768px){

  /* Force the grid */
  .game-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 12px !important;
    align-items: stretch !important;
  }

  /* Tile becomes a clean “card” */
  .game-tile{
    position: relative !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #2f3338 !important; /* dark base behind image */
    aspect-ratio: 1 / 1 !important; /* square */
    display: block !important;
    padding: 0 !important;          /* kill old padding */
    border: 2px solid rgba(0,0,0,.25) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
  }

  /* Image fills the card */
  .game-tile img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Hide any old yellow button inside tiles (if you had one) */
  .game-tile .topup-btn-yellow{
    display: none !important;
  }

  /* Bottom yellow label */
  .game-tile h3{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    margin: 0 !important;
    padding: 10px 10px !important;

    background: #f5c400 !important;
    color: #111 !important;

    font-weight: 1000 !important;
    font-size: 13px !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;

    border-top: 2px solid rgba(0,0,0,.25) !important;
    text-align: center !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Slightly tighter on very small phones */
  @media (max-width: 420px){
    .game-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .game-tile h3{
      font-size: 12px !important;
      padding: 9px 8px !important;
    }
  }
}
/* ===== Product page layout: match index.html card sizing ===== */

:root{
  --container-max: 1100px;
  --gap: 14px;
  --card-radius: 14px;
  --card-pad: 12px;
}

/* same body/container feel as index.html */
.page,
main,
.container {
  width: 100%;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 14px;
}

/* Grid like index.html (responsive, smaller cards) */
.products-grid,
.product-grid,
.grid-products {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: stretch;
}

/* card sizing */
.product-card,
.product,
.card-product {
  border-radius: var(--card-radius);
  overflow: hidden;
  padding: var(--card-pad);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  min-height: 0; /* prevents weird stretching */
}

/* image area: prevents huge tall cards */
.product-card img,
.product img,
.card-product img {
  width: 100%;
  height: 110px;         /* key: locks image height */
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* title/price/buttons: compact */
.product-title,
.product-card h3,
.product h3 {
  font-size: 14px;
  line-height: 1.25;
  margin: 10px 0 6px;
  font-weight: 700;
}

.product-price,
.product-card .price,
.product .price {
  font-size: 13px;
  opacity: 0.9;
  margin: 0 0 10px;
}

/* keep button from making cards tall */
.product-card button,
.product button,
.card-product button {
  margin-top: auto;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
}

/* Mobile: match index.html tighter layout */
@media (max-width: 520px) {
  .container { padding: 12px; }
  .products-grid,
  .product-grid,
  .grid-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-card img,
  .product img,
  .card-product img {
    height: 96px;
  }
}
/* ===============================
   COMPACT HOME-LIKE LISTING GRID
   Paste at END of style.css
   =============================== */

/* Keep the page width like home */
#mainPage .search-section,
#mainPage .listings-section{
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px;
}

/* Compact grid (same feel as home cards) */
#mainPage .items-grid{
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  align-items: stretch;
}

/* Mobile: 2 columns like home */
@media (max-width: 520px){
  #mainPage .items-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Make ANY injected card element compact, even if JS uses random class names */
#mainPage .items-grid > *{
  border-radius: 14px !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

/* If your injected listing card uses common class names, tighten them too */
#mainPage .items-grid .listing-card,
#mainPage .items-grid .item-card,
#mainPage .items-grid .product-card,
#mainPage .items-grid .card{
  padding: 0 !important;
  border-radius: 14px !important;
}

/* Clamp big images/media areas inside cards */
#mainPage .items-grid img{
  width: 100% !important;
  height: 110px !important;      /* key: stops tall cards */
  object-fit: cover !important;
  display: block !important;
}

/* Reduce text sizing and spacing inside cards */
#mainPage .items-grid h1,
#mainPage .items-grid h2,
#mainPage .items-grid h3,
#mainPage .items-grid h4,
#mainPage .items-grid .title,
#mainPage .items-grid .name{
  font-size: 14px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

#mainPage .items-grid p,
#mainPage .items-grid .desc,
#mainPage .items-grid .meta,
#mainPage .items-grid .price,
#mainPage .items-grid .sub{
  font-size: 13px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

/* Tighten common “content” wrappers */
#mainPage .items-grid .content,
#mainPage .items-grid .body,
#mainPage .items-grid .details,
#mainPage .items-grid .info{
  padding: 12px !important;
}

/* Buttons: smaller and not oversized */
#mainPage .items-grid button,
#mainPage .items-grid .btn{
  padding: 10px 12px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
}

/* LIST VIEW toggle support (if your JS adds a class) */
#mainPage .items-grid.list-view{
  display: flex !important;
  flex-direction: column !important;
}
#mainPage .items-grid.list-view > *{
  display: grid !important;
  grid-template-columns: 110px 1fr !important;
  gap: 12px !important;
}
#mainPage .items-grid.list-view img{
  height: 90px !important;
}
/* === Game card logo area: remove background === */

/* 1) The box that holds the logo image */
.game-card .game-logo,
.game-card .logo,
.game-card .card-logo,
.game-card .img-wrap,
.game-card .image-wrap,
.game-card .thumb,
.game-card .game-icon {
  background: transparent !important;
  background-image: none !important;
}

/* 2) If you use a placeholder pattern (like diagonal stripes) via pseudo-elements */
.game-card .game-logo::before,
.game-card .game-logo::after,
.game-card .logo::before,
.game-card .logo::after,
.game-card .card-logo::before,
.game-card .card-logo::after,
.game-card .img-wrap::before,
.game-card .img-wrap::after,
.game-card .thumb::before,
.game-card .thumb::after {
  content: none !important;
  display: none !important;
}

/* 3) Make the image itself fit nicely */
.game-card img {
  background: transparent !important;
  object-fit: contain;
}
.placeholder,
.placeholder-logo,
.logo-placeholder {
  background: transparent !important;
  background-image: none !important;
}
/* Big image area (LOGO AREA) — make it transparent */
.game-card-v3-media{
  width: 100%;
  height: 260px;           /* keep your size */
  background: transparent; /* ✅ remove background */
  display: flex;           /* ✅ center logo nicely */
  align-items: center;
  justify-content: center;
}

/* Make logos fit without cropping, and keep transparency */
.game-card-v3-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* ✅ no crop */
  display: block;
  background: transparent; /* ✅ no image background */
}
.game-card-v3-media img{
  padding: 10px;
  box-sizing: border-box;
}
/* Reduce the white space by shrinking the media area */
.game-card-v3-media{
  height: 170px !important;  /* try 150–190 */
}

/* Keep logo centered and not cropped */
.game-card-v3-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* === Remove ALL white from the game cards === */

/* Card body background */
.game-card-v3{
  background: transparent !important;   /* no white card */
  box-shadow: none !important;          /* optional: removes white-card look */
}

/* Media (logo) area: remove background + remove forced height */
.game-card-v3-media{
  background: transparent !important;
  height: auto !important;              /* ✅ removes big white space */
  padding: 0 !important;
  display: block !important;
}

/* Make image decide the height */
.game-card-v3-media img{
  width: 100%;
  height: auto !important;              /* ✅ no blank vertical space */
  display: block;
  object-fit: contain;
  background: transparent !important;
}

/* Keep the yellow label area clean */
.game-card-v3-label{
  margin-top: 0 !important;
}
/* Keep marketplace + seller button inline on index.html */
.topup-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Ensure seller button matches the "topup-pill" sizing */
.topup-actions .sell-btn{
  height: 40px;              /* adjust to match your pill */
  padding: 0 14px;
  border-radius: 999px;      /* pill shape like topup-pill */
}
/* --- HOME TOP BAR: keep layout, don't break marketplace pill --- */
.topup-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Force marketplace pill to keep its original look */
.topup-actions > a.topup-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;        /* adjust if your pill is different */
  padding: 0 16px;
  border-radius: 999px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
/* --- SELLER BUTTON (yellow + white text) --- */
.topup-actions .sell-btn,
.topup-actions #sellOpenBtn,
#sellOpenBtn,
.sell-btn{
  appearance: none;
  border: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 40px;            /* match marketplace pill */
  padding: 0 16px;
  border-radius: 999px;

  background: #facc15;     /* yellow */
  color: #ffffff;          /* white text */
  font-weight: 800;
  font-size: 14px;
  line-height: 1;

  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: transform .08s ease, opacity .2s ease;
}

#sellOpenBtn:hover,
.sell-btn:hover{ opacity: .95; }

#sellOpenBtn:active,
.sell-btn:active{ transform: translateY(1px); }
/* If Home + other buttons are in a container */
.header-actions,
.nav-actions,
.nav-right,
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* =========================
   BOKLUY HOME PAGE
========================= */
body.bokluy-home-page{
  min-height:100vh;
  background:
    radial-gradient(1100px 500px at 50% -5%, rgba(71,95,255,.22), transparent 55%),
    radial-gradient(600px 400px at 100% 0%, rgba(0,188,255,.12), transparent 60%),
    linear-gradient(180deg, #060c4a 0%, #08073f 48%, #050538 100%);
  color:#fff;
}

.bokluy-home-page .bokluy-home-shell{
  width:min(100%, 430px);
  margin:0 auto;
  padding:14px 12px 22px;
  box-sizing:border-box;
}

.bokluy-home-page .bokluy-home-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-radius:24px;
  border:1px solid rgba(98,143,255,.65);
  background:linear-gradient(180deg, rgba(26,29,95,.95), rgba(11,12,72,.96));
  box-shadow:0 10px 24px rgba(0,0,0,.28), inset 0 0 0 2px rgba(93,135,255,.08);
  position:sticky;
  top:10px;
  z-index:30;
}

.bokluy-home-page .bokluy-home-brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

.bokluy-home-page .bokluy-home-brand img{
  width:48px;
  height:48px;
  border-radius:999px;
  object-fit:cover;
  background:#fff;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  padding:2px;
}

.bokluy-home-page .bokluy-home-brand-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1;
}

.bokluy-home-page .bokluy-home-brand-copy strong{
  font-size:1.35rem;
  letter-spacing:.04em;
  color:#fff;
  font-weight:900;
}

.bokluy-home-page .bokluy-home-brand-copy span{
  margin-top:4px;
  font-size:.62rem;
  letter-spacing:.16em;
  color:rgba(212,224,255,.72);
  font-weight:700;
}

.bokluy-home-page .bokluy-home-topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.bokluy-home-page .bokluy-home-link-pill,
.bokluy-home-page .bokluy-home-userbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  border-radius:999px;
  padding:0 16px;
  border:1px solid rgba(118,166,255,.95);
  text-decoration:none;
  color:#eef7ff;
  font-weight:800;
  font-size:.92rem;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.22);
}

.bokluy-home-page .bokluy-home-link-pill{
  background:linear-gradient(180deg, rgba(59,78,191,.95), rgba(38,42,142,.95));
}

.bokluy-home-page .bokluy-home-link-pill:hover,
.bokluy-home-page .bokluy-home-userbtn:hover{
  filter:brightness(1.06);
}

.bokluy-home-page .bokluy-home-userbox{ position:relative; }

.bokluy-home-page .bokluy-home-userbtn{
  border:none;
  cursor:pointer;
  background:linear-gradient(180deg, #6fd1ff 0%, #5aa5ff 42%, #4a83ff 100%);
  padding:0 18px;
}


.bokluy-home-page .bokluy-home-userbtn-text{
  display:inline-block;
  white-space:nowrap;
}

.bokluy-home-page .bokluy-home-userbtn .userbtn-img{
  display:none;
}

.bokluy-home-page .bokluy-home-usermenu{
  top:52px;
  right:0;
  width:200px;
  border-radius:18px;
  border:1px solid rgba(109,151,255,.45);
  background:rgba(8,10,54,.96);
}

.bokluy-home-page .bokluy-home-usermenu .um-item{
  font-weight:800;
}

.bokluy-home-page .bokluy-home-hero-card{
  margin-top:14px;
  border-radius:26px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(45,55,166,.95), rgba(34,25,121,.98));
  border:1px solid rgba(112,129,255,.58);
  box-shadow:0 16px 32px rgba(0,0,0,.28);
}

.bokluy-home-page .bokluy-home-hero-card img{
  width:100%;
  display:block;
  aspect-ratio: 1.9 / 1;
  object-fit:cover;
}

.bokluy-home-page .bokluy-home-section-head{
  padding:22px 10px 10px;
  text-align:center;
}

.bokluy-home-page .bokluy-home-section-head h1{
  margin:0;
  font-size:2rem;
  font-weight:900;
  letter-spacing:.04em;
  color:#fff;
}

.bokluy-home-page .bokluy-home-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:10px auto 12px;
}

.bokluy-home-page .bokluy-home-divider span{
  width:78%;
  max-width:290px;
  height:3px;
  border-radius:999px;
  position:relative;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.95) 16%, rgba(255,255,255,.95) 84%, transparent 100%);
}

.bokluy-home-page .bokluy-home-divider span::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:-6px;
  width:0;
  height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-top:10px solid rgba(255,255,255,.95);
}

.bokluy-home-page .bokluy-home-section-head p{
  margin:0;
  color:rgba(223,231,255,.9);
  font-size:1rem;
  font-weight:700;
}

.bokluy-home-page .bokluy-home-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:12px;
}

.bokluy-home-page .bokluy-game-card{
  position:relative;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  overflow:hidden;
  min-height:235px;
  border-radius:24px;
  background:linear-gradient(180deg, #40317f 0%, #36205f 100%);
  border:1px solid rgba(114,120,233,.6);
  box-shadow:0 14px 28px rgba(0,0,0,.22), inset 0 0 0 2px rgba(143,126,255,.14);
}

.bokluy-home-page .bokluy-game-card::before{
  content:"";
  position:absolute;
  inset:10px 10px auto 10px;
  height:118px;
  border-radius:18px;
  border:1px solid rgba(192,183,255,.15);
  pointer-events:none;
}

.bokluy-home-page .bokluy-game-badge{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  min-width:42px;
  text-align:center;
  padding:5px 8px;
  border-radius:10px;
  background:#ff3e42;
  color:#fff;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.04em;
}

.bokluy-home-page .bokluy-game-media{
  padding:14px 14px 0;
}

.bokluy-home-page .bokluy-game-media img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:18px;
  display:block;
}

.bokluy-home-page .bokluy-game-body{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:12px 10px 14px;
  margin-top:auto;
}

.bokluy-home-page .bokluy-game-body h3{
  margin:0;
  min-height:44px;
  text-align:center;
  color:#fff;
  font-size:.92rem;
  line-height:1.22;
  font-weight:800;
}

.bokluy-home-page .bokluy-game-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:86px;
  min-height:38px;
  padding:0 16px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, #ffebb6 0%, #f8c876 44%, #d89a42 100%);
  color:#fff7eb;
  font-size:.92rem;
  letter-spacing:.08em;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px rgba(0,0,0,.18);
}

.bokluy-home-page .bokluy-home-footer{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(49,51,111,.72);
  border:1px solid rgba(108,121,255,.34);
  color:#eef1ff;
}

.bokluy-home-page .bokluy-home-footer-copy{
  font-size:.92rem;
  font-weight:700;
}

.bokluy-home-page .bokluy-home-footer-pay{
  display:flex;
  align-items:center;
  gap:8px;
}

.bokluy-home-page .bokluy-home-footer-pay img{
  height:26px;
  width:auto;
  display:block;
  border-radius:6px;
}

@media (max-width: 400px){
  .bokluy-home-page .bokluy-home-shell{
    padding-left:10px;
    padding-right:10px;
  }

  .bokluy-home-page .bokluy-home-topbar{
    padding:10px 12px;
  }

  .bokluy-home-page .bokluy-home-brand img{
    width:42px;
    height:42px;
  }

  .bokluy-home-page .bokluy-home-brand-copy strong{
    font-size:1.08rem;
  }

  .bokluy-home-page .bokluy-home-brand-copy span,
  .bokluy-home-page .bokluy-home-link-pill{
    display:none;
  }

  .bokluy-home-page .bokluy-home-userbtn{
    min-height:42px;
    padding:0 14px;
  }

  .bokluy-home-page .bokluy-home-userbtn-text{
    font-size:.86rem;
  }

  .bokluy-home-page .bokluy-home-grid{
    gap:12px;
  }

  .bokluy-home-page .bokluy-game-card{
    min-height:220px;
    border-radius:22px;
  }

  .bokluy-home-page .bokluy-game-card::before{
    height:106px;
  }

  .bokluy-home-page .bokluy-game-body h3{
    font-size:.84rem;
    min-height:40px;
  }

  .bokluy-home-page .bokluy-game-btn{
    min-width:78px;
    min-height:34px;
    font-size:.84rem;
  }
}


/* ============================================ */
body.bokluy-home-page{
  min-height:100vh !important;
  background:
    radial-gradient(circle at top, rgba(77,87,255,.25), transparent 28%),
    linear-gradient(180deg, #070a45 0%, #06083c 56%, #070942 100%) !important;
  color:#fff !important;
}

body.bokluy-home-page *{ box-sizing:border-box; }

.bokluy-home-page .bokluy-home-shell{
  width:min(100%, 430px) !important;
  margin:0 auto !important;
  padding:12px 12px 22px !important;
}

.bokluy-home-page .bokluy-home-topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:12px 12px 12px 14px !important;
  margin:10px 0 14px !important;
  border-radius:24px !important;
  border:1px solid rgba(108,143,255,.45) !important;
  background:linear-gradient(180deg, #1b1d77 0%, #111661 100%) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.bokluy-home-page .bokluy-home-brand{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
.bokluy-home-page .bokluy-home-brand img{
  width:42px !important;
  height:42px !important;
  border-radius:999px !important;
  object-fit:cover !important;
  background:#fff !important;
  flex:0 0 42px !important;
}
.bokluy-home-page .bokluy-home-brand-copy strong{
  display:block !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  letter-spacing:.03em !important;
}
.bokluy-home-page .bokluy-home-brand-copy span{
  display:block !important;
  margin-top:3px !important;
  color:#dbe2ff !important;
  font-size:9px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
}

.bokluy-home-page .bokluy-home-topbar-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-shrink:0 !important;
}

.bokluy-home-page .bokluy-home-link-pill,
.bokluy-home-page .bokluy-home-userbtn,
.bokluy-home-page #sellOpenBtn.sell-btn{
  height:40px !important;
  border-radius:999px !important;
  border:1px solid rgba(145,175,255,.5) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 5px 16px rgba(0,0,0,.18) !important;
  font-weight:900 !important;
  padding:0 16px !important;
}
.bokluy-home-page .bokluy-home-link-pill{
  background:linear-gradient(180deg, #5b6cff 0%, #4053ca 100%) !important;
  color:#fff !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:12px !important;
}
.bokluy-home-page #sellOpenBtn.sell-btn{
  width:54px !important;
  min-width:54px !important;
  padding:0 !important;
  background:linear-gradient(180deg, #ffd91a 0%, #f0b90c 100%) !important;
  color:#432600 !important;
  border-color:rgba(255,235,122,.8) !important;
  margin:0 !important;
}
.bokluy-home-page .bokluy-home-userbtn{
  width:54px !important;
  min-width:54px !important;
  padding:0 !important;
  background:linear-gradient(180deg, #69b9ff 0%, #4f7cff 100%) !important;
  color:#fff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.bokluy-home-page .bokluy-home-usermenu{
  top:calc(100% + 8px) !important;
  right:0 !important;
  left:auto !important;
  min-width:160px !important;
  background:#111861 !important;
  border:1px solid rgba(126,147,255,.38) !important;
  border-radius:16px !important;
}
.bokluy-home-page .bokluy-home-usermenu .um-item{ color:#fff !important; }

.bokluy-home-page .bokluy-home-hero-card{
  position:relative !important;
  min-height:150px !important;
  margin:0 0 24px !important;
  overflow:hidden !important;
  border-radius:26px !important;
  border:1px solid rgba(123,141,255,.4) !important;
  background:linear-gradient(180deg, #4850dd 0%, #27268f 100%) !important;
  box-shadow:0 18px 32px rgba(0,0,0,.28) !important;
}
.bokluy-home-page .bokluy-home-hero-card img{
  width:100% !important;
  height:100% !important;
  min-height:150px !important;
  object-fit:cover !important;
  display:block !important;
}
.bokluy-home-page .bokluy-home-hero-overlay{
  position:absolute !important;
  inset:auto 16px 16px auto !important;
  display:none;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:4px !important;
  text-shadow:0 4px 16px rgba(0,0,0,.4) !important;
}
.bokluy-home-page .bokluy-home-hero-fallback .bokluy-home-hero-overlay{ display:flex !important; }
.bokluy-home-page .bokluy-home-hero-overlay strong{
  color:#ffcc2e !important;
  font-size:30px !important;
  font-weight:1000 !important;
  line-height:1 !important;
}
.bokluy-home-page .bokluy-home-hero-overlay span{
  color:#fff !important;
  font-size:13px !important;
  font-weight:900 !important;
}

.bokluy-home-page .bokluy-home-section-head{
  text-align:center !important;
  margin:0 0 18px !important;
}
.bokluy-home-page .bokluy-home-section-head h1{
  color:#fff !important;
  font-size:28px !important;
  font-weight:1000 !important;
  line-height:1.1 !important;
  margin:0 !important;
  text-shadow:0 6px 18px rgba(0,0,0,.35) !important;
}
.bokluy-home-page .bokluy-home-divider{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  margin:10px 0 12px !important;
}
.bokluy-home-page .bokluy-home-divider span{
  position:relative !important;
  display:block !important;
  width:min(260px, 76%) !important;
  height:2px !important;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.95) 18%, rgba(255,255,255,.95) 82%, transparent 100%) !important;
}
.bokluy-home-page .bokluy-home-divider span::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:14px !important;
  height:14px !important;
  background:#fff !important;
  clip-path:polygon(50% 100%, 0 0, 100% 0) !important;
  transform:translate(-50%, -35%) !important;
}
.bokluy-home-page .bokluy-home-section-head p{
  margin:0 !important;
  color:#d9e1ff !important;
  font-size:14px !important;
  font-weight:800 !important;
}

.bokluy-home-page .bokluy-home-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:14px 12px !important;
  align-items:stretch !important;
}
.bokluy-home-page .bokluy-game-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  padding:10px 10px 12px !important;
  border-radius:24px !important;
  text-decoration:none !important;
  background:linear-gradient(180deg, #4d3393 0%, #362272 100%) !important;
  border:1px solid rgba(104,124,255,.36) !important;
  box-shadow:0 12px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
.bokluy-home-page .bokluy-game-card::before{
  content:"" !important;
  position:absolute !important;
  inset:7px !important;
  border-radius:19px !important;
  border:1px solid rgba(143,147,255,.16) !important;
  pointer-events:none !important;
}
.bokluy-home-page .bokluy-game-badge{
  position:absolute !important;
  top:10px !important;
  right:9px !important;
  z-index:2 !important;
  min-width:30px !important;
  height:24px !important;
  padding:0 8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:8px !important;
  background:#ff4343 !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:1000 !important;
  letter-spacing:.04em !important;
}
.bokluy-home-page .bokluy-game-media{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.06) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
.bokluy-home-page .bokluy-game-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  color:transparent !important;
}
.bokluy-home-page .bokluy-game-body{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:10px !important;
  padding-top:10px !important;
}
.bokluy-home-page .bokluy-game-body h3{
  width:100% !important;
  min-height:38px !important;
  margin:0 !important;
  color:#fff !important;
  text-align:center !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:1000 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.bokluy-home-page .bokluy-game-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:84px !important;
  max-width:100% !important;
  height:36px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg, #ffd789 0%, #e3ad4d 100%) !important;
  color:#fff7e7 !important;
  font-size:11px !important;
  font-weight:1000 !important;
  letter-spacing:.08em !important;
  text-shadow:0 1px 1px rgba(100,48,0,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36) !important;
}

.bokluy-home-page .bokluy-home-footer{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin:20px 0 4px !important;
  padding:14px 16px !important;
  border-radius:18px !important;
  background:rgba(132,140,216,.78) !important;
  color:#fff !important;
}
.bokluy-home-page .bokluy-home-footer-copy{
  font-size:12px !important;
  line-height:1.45 !important;
  font-weight:900 !important;
}
.bokluy-home-page .bokluy-home-footer-pay{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.bokluy-home-page .bokluy-home-pay-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:48px !important;
  height:28px !important;
  padding:0 10px !important;
  border-radius:8px !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:1000 !important;
}
.bokluy-home-page .bokluy-home-pay-pill-aba{ background:#0b87a6 !important; }
.bokluy-home-page .bokluy-home-pay-pill-khqr{ background:#dd3041 !important; }

.bokluy-home-page #sellModal{ display:none !important; }
.bokluy-home-page #sellModal[aria-hidden="false"]{ display:block !important; }

@media (max-width: 390px){
  .bokluy-home-page .bokluy-home-shell{ padding-left:10px !important; padding-right:10px !important; }
  .bokluy-home-page .bokluy-home-topbar{ padding:10px 10px 10px 12px !important; }
  .bokluy-home-page .bokluy-home-link-pill{ padding:0 12px !important; font-size:11px !important; }
  .bokluy-home-page .bokluy-home-grid{ gap:12px 10px !important; }
  .bokluy-home-page .bokluy-game-card{ padding:9px 8px 11px !important; border-radius:22px !important; }
  .bokluy-home-page .bokluy-game-body h3{ font-size:11px !important; min-height:34px !important; }
  .bokluy-home-page .bokluy-game-btn{ width:78px !important; height:34px !important; font-size:10px !important; }
}