/* =========================================================
   Bokluy Top Up – Cleaned Unified Theme
   - Unified top-up pages theme
   - Shared 2-part product cards for all games
   - Shorter cards + larger product images
   - Removed duplicate/conflicting product card rules
   ========================================================= */

:root{
  --bg-1:#2f3033;
  --bg-2:#3a3b40;
  --card:#ffffff;
  --text:#111111;

  --y:#FACC15;
  --y2:#F59E0B;

  --shadow:0 12px 28px rgba(0,0,0,.18);
  --radius:22px;

  --topbar-bg-image: url("./images/topbar.png");
  --topbar-bg-opacity: .18;
}

*{ box-sizing:border-box; }
html,body{ height:100%; overflow-x:hidden; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(250,204,21,.12), transparent 50%),
    radial-gradient(900px 500px at 80% 20%, rgba(245,158,11,.10), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
}

/* =============================
   Topbar
============================= */
:where(
  .mlbb-topbar, .freefire-topbar, .pubg-topbar, .mcgg-topbar, .hok-topbar, .deltaforce-topbar, .growtopia-topbar
){
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(47,48,51,.88);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(250,204,21,.35);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

:where(
  .mlbb-topbar, .freefire-topbar, .pubg-topbar, .mcgg-topbar, .hok-topbar, .deltaforce-topbar, .growtopia-topbar
)::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--topbar-bg-image);
  background-size: cover;
  background-position: center;
  opacity: var(--topbar-bg-opacity);
  pointer-events:none;
  z-index: 0;
}

:where(
  .mlbb-topbar-inner, .freefire-topbar-inner, .pubg-topbar-inner, .mcgg-topbar-inner, .hok-topbar-inner, .deltaforce-topbar-inner, .growtopia-topbar-inner
){
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

:where(
  .mlbb-brand, .freefire-brand, .pubg-brand, .mcgg-brand, .hok-brand, .deltaforce-brand, .growtopia-brand
){
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
  text-decoration:none;
}

:where(
  .mlbb-logo, .freefire-logo, .pubg-logo, .mcgg-logo, .hok-logo, .deltaforce-logo, .growtopia-logo
){
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 12px;
  background:#fff;
  border: 2px solid rgba(250,204,21,.85);
  padding: 6px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  flex: 0 0 auto;
}

:where(
  .mlbb-brand-name, .freefire-brand-name, .pubg-brand-name, .mcgg-brand-name, .hok-brand-name, .deltaforce-brand-name, .growtopia-brand-name
){
  font-weight: 800;
  letter-spacing: .01em;
  color:#fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

:where(
  .mlbb-nav, .freefire-nav, .pubg-nav, .mcgg-nav, .hok-nav, .deltaforce-nav, .growtopia-nav
){
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

:where(
  .mlbb-pill, .freefire-pill, .pubg-pill, .mcgg-pill, .hok-pill, .deltaforce-pill, .growtopia-pill
){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 12px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
  color:#111;
  background: rgba(255,255,255,.94);
  border: 2px solid rgba(250,204,21,.35);
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
  white-space: nowrap;
}

:where(
  .mlbb-pill-primary, .freefire-pill-primary, .pubg-pill-primary, .mcgg-pill-primary, .hok-pill-primary, .deltaforce-pill-primary, .growtopia-pill-primary
){
  background: var(--y);
  border-color: rgba(0,0,0,.75);
}

@media (max-width: 560px){
  :where(
    .mlbb-topbar-inner, .freefire-topbar-inner, .pubg-topbar-inner, .mcgg-topbar-inner, .hok-topbar-inner, .deltaforce-topbar-inner, .growtopia-topbar-inner
  ){
    flex-wrap: nowrap;
    gap: 10px;
  }

  :where(
    .mlbb-brand-name, .freefire-brand-name, .pubg-brand-name, .mcgg-brand-name, .hok-brand-name, .deltaforce-brand-name, .growtopia-brand-name
  ){
    max-width: 160px;
  }
}

@media (max-width: 360px){
  :where(
    .mlbb-brand-name, .freefire-brand-name, .pubg-brand-name, .mcgg-brand-name, .hok-brand-name, .deltaforce-brand-name, .growtopia-brand-name
  ){
    max-width: 120px;
  }

  :where(
    .mlbb-pill, .freefire-pill, .pubg-pill, .mcgg-pill, .hok-pill, .deltaforce-pill, .growtopia-pill
  ){
    padding: 7px 9px;
    font-size: 11px;
  }
}

/* =============================
   Layout
============================= */
:where(
  .mlbb-page, .freefire-page, .pubg-page, .mcgg-page, .hok-page, .deltaforce-page, .growtopia-page
){
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 16px 26px;
}

:where(
  .mlbb-grid, .freefire-grid, .pubg-grid, .mcgg-grid, .hok-grid, .deltaforce-grid, .growtopia-grid
){
  display:grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 16px;
  align-items:start;
}

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

:where(
  .mlbb-left, .freefire-left, .pubg-left, .mcgg-left, .hok-left, .deltaforce-left, .growtopia-left,
  .mlbb-right, .freefire-right, .pubg-right, .mcgg-right, .hok-right, .deltaforce-right, .growtopia-right
){
  display:flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* =============================
   Shared cards
============================= */
:where(
  .mlbb-card, .freefire-card, .pubg-card, .mcgg-card, .hok-card, .deltaforce-card, .growtopia-card
){
  background: var(--card);
  border: 3px solid var(--y);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-width: 0;
}

:where(
  .mlbb-card-head, .freefire-card-head, .pubg-card-head, .mcgg-card-head, .hok-card-head, .deltaforce-card-head, .growtopia-card-head
){
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  background: #f3f4f6;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

:where(
  .mlbb-card-title, .freefire-card-title, .pubg-card-title, .mcgg-card-title, .hok-card-title, .deltaforce-card-title, .growtopia-card-title
){
  margin:0;
  font-weight: 1000;
  font-size: 22px;
}

:where(
  .mlbb-step, .freefire-step, .pubg-step, .mcgg-step, .hok-step, .deltaforce-step, .growtopia-step,
  .mlbb-badge, .freefire-badge, .pubg-badge, .mcgg-badge, .hok-badge, .deltaforce-badge, .growtopia-badge
){
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  background: rgba(250,204,21,.20);
  border: 2px solid rgba(0,0,0,.14);
}

/* =============================
   Guide
============================= */
:where(
  .mlbb-guide, .freefire-guide, .pubg-guide, .mcgg-guide, .hok-guide, .deltaforce-guide, .growtopia-guide
){
  padding: 14px;
}

:where(
  .mlbb-guide-banner, .freefire-guide-banner, .pubg-guide-banner, .mcgg-guide-banner, .hok-guide-banner, .deltaforce-guide-banner, .growtopia-guide-banner
){
  width:100%;
  height: 230px;
  border-radius: 18px;
  object-fit: cover;
  border: 3px solid rgba(0,0,0,.14);
  background: #e5e7eb;
}

:where(
  .mlbb-guide-text, .freefire-guide-text, .pubg-guide-text, .mcgg-guide-text, .hok-guide-text, .deltaforce-guide-text, .growtopia-guide-text
){
  margin-top: 12px;
  font-weight: 900;
  color: rgba(17,17,17,.80);
  line-height: 1.8;
}

:where(
  .mlbb-list, .freefire-list, .pubg-list, .mcgg-list, .hok-list, .deltaforce-list, .growtopia-list
){
  margin:0;
  padding: 14px 18px 18px;
  line-height: 1.8;
  font-weight: 900;
  color: rgba(17,17,17,.78);
}

/* =============================
   Step 1 form
============================= */
:where(
  .mlbb-form, .freefire-form, .pubg-form, .mcgg-form, .hok-form, .deltaforce-form, .growtopia-form
){
  padding: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items:center;
}

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

:where(
  .mlbb-input, .freefire-input, .pubg-input, .mcgg-input, .hok-input, .deltaforce-input, .growtopia-input
){
  width:100%;
  padding: 14px 14px;
  border-radius: 14px;
  border: 2px solid rgba(0,0,0,.10);
  background: #fff;
  outline: none;
  font-weight: 900;
}

:where(
  .mlbb-input:focus, .freefire-input:focus, .pubg-input:focus, .mcgg-input:focus, .hok-input:focus, .deltaforce-input:focus, .growtopia-input:focus
){
  border-color: rgba(250,204,21,.85);
  box-shadow: 0 0 0 4px rgba(250,204,21,.18);
}

:where(
  .mlbb-btn, .freefire-btn, .pubg-btn, .mcgg-btn, .hok-btn, .deltaforce-btn, .growtopia-btn
){
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 1000;
  cursor: pointer;
}

:where(
  .mlbb-btn-primary, .freefire-btn-primary, .pubg-btn-primary, .mcgg-btn-primary, .hok-btn-primary, .deltaforce-btn-primary, .growtopia-btn-primary
){
  background: var(--y);
  color: #111;
  border: 2px solid rgba(0,0,0,.20);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}

:where(
  .mlbb-btn-secondary, .freefire-btn-secondary, .pubg-btn-secondary, .mcgg-btn-secondary, .hok-btn-secondary, .deltaforce-btn-secondary, .growtopia-btn-secondary
){
  background: #fff;
  color: #111;
  border: 2px solid rgba(0,0,0,.14);
}

:where(
  .mlbb-btn-primary[disabled],
  .freefire-btn-primary[disabled],
  .pubg-btn-primary[disabled],
  .mcgg-btn-primary[disabled],
  .hok-btn-primary[disabled],
  .deltaforce-btn-primary[disabled],
  .growtopia-btn-primary[disabled],
  .mlbb-btn-secondary[disabled],
  .freefire-btn-secondary[disabled],
  .pubg-btn-secondary[disabled],
  .mcgg-btn-secondary[disabled],
  .hok-btn-secondary[disabled],
  .deltaforce-btn-secondary[disabled],
  .growtopia-btn-secondary[disabled]
){
  opacity: .55;
  cursor: not-allowed;
}

/* =============================
   Status + verified
============================= */
:where(
  .mlbb-statusline, .freefire-statusline, .pubg-statusline, .mcgg-statusline, .hok-statusline, .deltaforce-statusline, .growtopia-statusline
){
  padding: 0 14px 14px;
}

:where(
  .mlbb-status, .freefire-status, .pubg-status, .mcgg-status, .hok-status, .deltaforce-status, .growtopia-status
){
  font-weight: 900;
  color: rgba(17,17,17,.78);
  min-height: 18px;
}

:where(
  .mlbb-verified, .freefire-verified, .pubg-verified, .mcgg-verified, .hok-verified, .deltaforce-verified, .growtopia-verified
){
  margin: 0 14px 14px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 2px dashed rgba(0,0,0,.18);
  background: rgba(250,204,21,.10);
  font-weight: 1000;
}

/* =============================
   Shared products grid
   JS should render:
   .topup-product
   .topup-product-media
   .topup-product-img
   .topup-product-body
   .topup-product-title
   .topup-product-price
============================= */
#productsScroll{
  padding: 14px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 980px;
  margin: 0 auto;
}

@media (max-width: 900px){
  #productsScroll{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
  }
}

@media (max-width: 520px){
  #productsScroll{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(100vw - 20px);
    max-width: none;
  }
}

@media (max-width: 360px){
  #productsScroll{
    grid-template-columns: 1fr;
  }
}

#productsScroll .topup-product{
  display:flex;
  flex-direction:column;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  background:linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  box-shadow:0 14px 30px rgba(0,0,0,.28);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height:215px;
  position:relative;
}

#productsScroll .topup-product:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 34px rgba(0,0,0,.34);
  border-color:rgba(56,189,248,.55);
}

#productsScroll .topup-product.active{
  border-color:#facc15;
  box-shadow:0 0 0 3px rgba(250,204,21,.18), 0 18px 34px rgba(0,0,0,.34);
}

#productsScroll .topup-product-media{
  height:142px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  background:
    radial-gradient(circle at top, rgba(56,189,248,.18), transparent 60%),
    linear-gradient(180deg, #1f3b5b 0%, #16263d 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
}

#productsScroll .topup-product-img,
#productsScroll .topup-product-icon{
  width:100%;
  max-width:128px;
  max-height:128px;
  object-fit:contain;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:16px;
}

#productsScroll .topup-product-body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:6px;
  padding:10px 10px 12px;
  background:linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

#productsScroll .topup-product-title{
  margin:0;
  color:#f8fafc;
  text-align:center;
  font-weight:900;
  font-size:14px;
  line-height:1.2;
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:34px;
}

#productsScroll .topup-product-price{
  margin:0;
  text-align:center;
  font-size:18px;
  font-weight:1000;
  color:#facc15;
  letter-spacing:.01em;
}

@media (max-width: 520px){
  #productsScroll .topup-product{
    min-height:190px;
    border-radius:18px;
  }

  #productsScroll .topup-product-media{
    height:118px;
    padding:8px;
  }

  #productsScroll .topup-product-img,
  #productsScroll .topup-product-icon{
    max-width:102px;
    max-height:102px;
  }

  #productsScroll .topup-product-body{
    padding:9px 8px 10px;
  }

  #productsScroll .topup-product-title{
    font-size:12px;
    min-height:30px;
  }

  #productsScroll .topup-product-price{
    font-size:15px;
  }
}

/* =============================
   Payment area
============================= */
:where(
  .mlbb-paybox, .freefire-paybox, .pubg-paybox, .mcgg-paybox, .hok-paybox, .deltaforce-paybox, .growtopia-paybox
){
  padding: 14px;
  display:grid;
  gap: 14px;
}

:where(
  .mlbb-payrow, .freefire-payrow, .pubg-payrow, .mcgg-payrow, .hok-payrow, .deltaforce-payrow, .growtopia-payrow
){
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  background:#fff;
  border: 3px solid var(--y);
  border-radius: 18px;
  padding: 12px;
  min-width: 0;
}

:where(
  .mlbb-paylogo, .freefire-paylogo, .pubg-paylogo, .mcgg-paylogo, .hok-paylogo, .deltaforce-paylogo, .growtopia-paylogo
){
  width: 50px;
  height: 50px;
  border-radius: 14px;
  border: 2px solid var(--y);
  background:#fff;
  padding: 6px;
  object-fit: contain;
}

:where(
  .mlbb-paymeta, .freefire-paymeta, .pubg-paymeta, .mcgg-paymeta, .hok-paymeta, .deltaforce-paymeta, .growtopia-paymeta
){
  flex: 1 1 auto;
  min-width: 0;
}

:where(
  .mlbb-paytitle, .freefire-paytitle, .pubg-paytitle, .mcgg-paytitle, .hok-paytitle, .deltaforce-paytitle, .growtopia-paytitle
){
  font-weight: 1000;
  font-size: 18px;
}

:where(
  .mlbb-paydesc, .freefire-paydesc, .pubg-paydesc, .mcgg-paydesc, .hok-paydesc, .deltaforce-paydesc, .growtopia-paydesc
){
  margin-top: 4px;
  font-weight: 900;
  color: rgba(17,17,17,.70);
}

:where(
  .mlbb-paytag, .freefire-paytag, .pubg-paytag, .mcgg-paytag, .hok-paytag, .deltaforce-paytag, .growtopia-paytag
){
  font-weight: 1000;
  border: 2px solid var(--y);
  background: rgba(250,204,21,.22);
  padding: 8px 12px;
  border-radius: 999px;
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

:where(
  .mlbb-checkline, .freefire-checkline, .pubg-checkline, .mcgg-checkline, .hok-checkline, .deltaforce-checkline, .growtopia-checkline
){
  border: 2px dashed rgba(0,0,0,.22);
  background: rgba(250,204,21,.12);
  border-radius: 16px;
  padding: 12px;
}

:where(
  .mlbb-terms, .freefire-terms, .pubg-terms, .mcgg-terms, .hok-terms, .deltaforce-terms, .growtopia-terms
){
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 12px;
  font-weight: 1000;
  width: 100%;
  text-align:left;
}

:where(
  .mlbb-terms input, .freefire-terms input, .pubg-terms input, .mcgg-terms input, .hok-terms input, .deltaforce-terms input, .growtopia-terms input
){
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}

:where(
  .mlbb-total, .freefire-total, .pubg-total, .mcgg-total, .hok-total, .deltaforce-total, .growtopia-total
){
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  background:#fff;
  border: 2px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 12px;
}

:where(
  .mlbb-total-label, .freefire-total-label, .pubg-total-label, .mcgg-total-label, .hok-total-label, .deltaforce-total-label, .growtopia-total-label
){
  font-weight: 1000;
  letter-spacing: .08em;
  color: rgba(17,17,17,.70);
}

:where(
  .mlbb-total-value, .freefire-total-value, .pubg-total-value, .mcgg-total-value, .hok-total-value, .deltaforce-total-value, .growtopia-total-value
){
  font-weight: 1000;
  font-size: 30px;
}

/* =============================
   Mobile reorder
============================= */
@media (max-width: 980px){
  :where(
    .mlbb-grid, .freefire-grid, .pubg-grid, .mcgg-grid, .hok-grid, .deltaforce-grid, .growtopia-grid
  ){
    display: flex;
    flex-direction: column;
  }

  :where(
    .mlbb-left, .freefire-left, .pubg-left, .mcgg-left, .hok-left, .deltaforce-left, .growtopia-left
  ){
    display: contents;
  }

  :where(
    .mlbb-right, .freefire-right, .pubg-right, .mcgg-right, .hok-right, .deltaforce-right, .growtopia-right
  ){
    order: 2;
  }

  :where(
    .mlbb-left, .freefire-left, .pubg-left, .mcgg-left, .hok-left, .deltaforce-left, .growtopia-left
  ) > :nth-child(1){
    order: 1;
    width: 100%;
    border-radius: 16px;
  }

  :where(
    .mlbb-left, .freefire-left, .pubg-left, .mcgg-left, .hok-left, .deltaforce-left, .growtopia-left
  ) > :nth-child(2){
    order: 3;
    width: 100%;
    border-radius: 16px;
  }

  :where(
    .mlbb-guide-banner, .freefire-guide-banner, .pubg-guide-banner, .mcgg-guide-banner, .hok-guide-banner, .deltaforce-guide-banner, .growtopia-guide-banner
  ){
    height: 90px;
    border-radius: 14px;
  }

  :where(
    .mlbb-guide-text, .freefire-guide-text, .pubg-guide-text, .mcgg-guide-text, .hok-guide-text, .deltaforce-guide-text, .growtopia-guide-text
  ){
    margin-top: 6px;
    line-height: 1.25;
    font-size: 12.5px;
    font-weight: 800;
  }

  :where(
    .mlbb-guide-text p, .freefire-guide-text p, .pubg-guide-text p, .mcgg-guide-text p, .hok-guide-text p, .deltaforce-guide-text p, .growtopia-guide-text p
  ){
    margin: 0 0 4px;
  }

  :where(
    .mlbb-list, .freefire-list, .pubg-list, .mcgg-list, .hok-list, .deltaforce-list, .growtopia-list
  ){
    padding: 10px 12px 12px;
    line-height: 1.25;
    font-size: 12.5px;
    font-weight: 800;
  }

  :where(
    .mlbb-list li, .freefire-list li, .pubg-list li, .mcgg-list li, .hok-list li, .deltaforce-list li, .growtopia-list li
  ){
    margin: 2px 0;
    white-space: normal;
    word-break: break-word;
  }
}

/* =============================
   Footer
============================= */
.site-footer{
  max-width: 1200px;
  margin: 18px auto 26px;
  background: var(--y);
  border: 4px solid #111;
  border-radius: 28px;
  padding: 18px 18px 14px;
  text-align:center;
  box-shadow: 0 20px 40px rgba(0,0,0,.22);
}

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

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

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

.footer-copy{
  font-weight: 1000;
  margin: 6px 0 10px;
}

.footer-links{
  font-weight: 1000;
  margin-bottom: 12px;
}

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

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

.footer-pay img{
  height: 30px;
  width: auto;
}

/* =============================
   Bokluy home / special top-up shell
   Kept, but product card conflicts removed
============================= */
body.bokluy-topup-page{
  min-height:100%;
  margin:0;
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(104,136,255,.22), transparent 45%),
    radial-gradient(900px 600px at 85% 15%, rgba(63,110,255,.20), transparent 44%),
    linear-gradient(180deg,#05033a 0%, #08084f 40%, #08043c 100%);
}

.bokluy-topup-shell{
  width:min(100%, 860px);
  margin:0 auto;
  padding:14px 14px 22px;
}

.bokluy-topup-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:8px 0 14px;
  padding:16px 20px;
  border:2px solid rgba(101,127,255,.65);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(23,22,87,.98), rgba(19,17,72,.98));
  box-shadow:0 12px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(153,175,255,.12);
}

.bokluy-topup-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
  font-weight:1000;
  letter-spacing:.02em;
}

.bokluy-topup-brand img{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
  flex:0 0 auto;
}

.bokluy-topup-brand span{
  font-size:17px;
  line-height:1;
}

.bokluy-topup-login-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-radius:999px;
  color:#eaf5ff;
  font-weight:900;
  background:linear-gradient(180deg,#68c0ff,#4d8cff);
  border:2px solid rgba(181,228,255,.45);
  box-shadow:0 8px 20px rgba(44,111,255,.38), inset 0 0 0 1px rgba(255,255,255,.12);
  white-space:nowrap;
  text-decoration:none;
}



.bokluy-topup-banner-card,
.bokluy-topup-game-card,
.bokluy-topup-panel,
.bokluy-topup-bottom-bar{
  border-radius:28px;
  background:linear-gradient(90deg,#4f72c8 0%, #5f8ff6 100%);
  box-shadow:0 16px 36px rgba(0,0,0,.24);
}

.bokluy-topup-banner-card{
  padding:0;
  overflow:hidden;
  margin-bottom:14px;
}

.bokluy-topup-banner-image{
  display:block;
  width:100%;
  height:clamp(180px,33vw,330px);
  object-fit:cover;
}

.bokluy-topup-game-card{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:18px;
  margin-bottom:14px;
  padding:18px;
  background:linear-gradient(180deg,#082678 0%, #082a7f 70%, #072263 100%);
}

.bokluy-topup-game-cover img{
  width:100%;
  aspect-ratio:1/1;
  border-radius:22px;
  object-fit:cover;
  border:2px solid rgba(241,202,108,.68);
  background:#1c2d78;
}

.bokluy-topup-game-meta h1{
  margin:4px 0 14px;
  font-size:clamp(30px,4.8vw,42px);
  line-height:1.05;
  font-weight:1000;
}

.bokluy-topup-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:12px;
}

.bokluy-topup-stats div{
  background:rgba(8,18,69,.28);
  border-radius:18px;
  padding:12px 10px;
  text-align:center;
}

.bokluy-topup-stats strong{
  display:block;
  color:#f3cb76;
  font-size:22px;
  font-weight:1000;
}

.bokluy-topup-stats span{
  display:block;
  margin-top:4px;
  color:#dce6ff;
  font-weight:800;
  font-size:13px;
}

.bokluy-topup-game-meta p{
  margin:0;
  color:#edf3ff;
  font-weight:700;
  line-height:1.45;
  font-size:14px;
}

.bokluy-topup-main{
  display:grid;
  gap:14px;
}

.bokluy-topup-panel{
  padding:16px;
  background:linear-gradient(90deg,#4f72c8 0%, #5f8ff6 100%);
}

.bokluy-topup-panel-title{
  margin-bottom:14px;
  padding:18px 20px;
  border-radius:18px;
  background:rgba(72,87,120,.72);
  color:#fff;
  font-size:18px;
  font-weight:1000;
}

.bokluy-topup-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:12px;
}

.bokluy-topup-input{
  width:100%;
  min-width:0;
  padding:18px 16px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.28);
  background:#fff;
  color:#2b2b2b;
  font-size:18px;
  outline:none;
}

.bokluy-topup-confirm-btn,
.bokluy-topup-pay-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  cursor:pointer;
  border-radius:14px;
  font-weight:1000;
  color:#fff2df;
  background:linear-gradient(90deg,#e7b377 0%, #c18641 50%, #f2c17e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 18px rgba(52,25,2,.18);
}

.bokluy-topup-confirm-btn{
  padding:18px 18px;
  min-width:180px;
  font-size:18px;
}

.bokluy-topup-statusline{
  padding-top:10px;
}

.bokluy-topup-status,
#nameStatus,
#payStatus{
  font-weight:900;
  font-size:14px;
  color:#e8efff;
}

#nameStatus.ok,#payStatus.ok,.bokluy-topup-status.ok{ color:#afffb4; }
#nameStatus.warn,#payStatus.warn,.bokluy-topup-status.warn{ color:#fff0a3; }
#nameStatus.err,#payStatus.err,.bokluy-topup-status.err{ color:#ffd2d2; }

.bokluy-topup-player-box{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(8,18,69,.30);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#fff;
}

.bokluy-topup-player-box span{
  font-weight:800;
  color:#dfe8ff;
}

.bokluy-topup-player-box strong{
  font-weight:1000;
}

.bokluy-topup-products-panel{
  min-width:0;
}

.bokluy-topup-products#productsScroll,
#productsScroll.bokluy-topup-products,
.bokluy-topup-products{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  min-width:0;
  width:100%;
  max-height:min(58vh,620px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-right:2px;
  align-content:start;
}

.bokluy-topup-products::-webkit-scrollbar{ width:8px; }
.bokluy-topup-products::-webkit-scrollbar-track{ background:rgba(15,21,77,.18); border-radius:999px; }
.bokluy-topup-products::-webkit-scrollbar-thumb{ background:rgba(255,209,115,.48); border-radius:999px; }

.bokluy-topup-payrow{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px;
  border-radius:16px;
  background:rgba(72,87,120,.72);
}

.bokluy-topup-paylogo{
  width:74px;
  height:74px;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  padding:4px;
}

.bokluy-topup-paytitle{
  font-size:24px;
  font-weight:1000;
  color:#fff;
}

.bokluy-topup-paydesc{
  margin-top:4px;
  font-size:18px;
  color:#eef3ff;
}

.bokluy-topup-terms{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:18px;
  color:#fff;
  font-size:18px;
  font-weight:800;
}

.bokluy-topup-terms input{
  width:28px;
  height:28px;
  accent-color:#6ea4ff;
  flex:0 0 auto;
}

.bokluy-topup-terms a{
  color:#e2b236;
  text-decoration:none;
}

.bokluy-topup-paystatus{
  min-height:22px;
  margin-top:10px;
  color:#eef3ff;
  font-weight:800;
}

.bokluy-topup-bottom-bar{
  margin-top:16px;
  padding:18px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:linear-gradient(180deg,#16134c, #141243);
  border:2px solid rgba(95,143,246,.45);
}

.bokluy-topup-total-wrap{
  display:flex;
  align-items:baseline;
  gap:8px;
  color:#fff;
  font-weight:800;
  font-size:26px;
}

.bokluy-topup-total-wrap strong{
  color:#f4c678;
  font-size:48px;
  line-height:1;
  font-weight:1000;
}

.bokluy-topup-pay-btn{
  padding:18px 34px;
  min-width:210px;
  font-size:22px;
}

.bokluy-topup-pay-btn:disabled,
.bokluy-topup-confirm-btn:disabled{
  opacity:.65;
  cursor:not-allowed;
}

.bokluy-topup-footer{
  margin-top:14px;
}

.bokluy-topup-footer-pay{
  display:flex;
  align-items:center;
  gap:10px;
}

.bokluy-footer-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:10px;
  background:#167896;
  color:#fff;
  font-size:15px;
  font-weight:1000;
}

.bokluy-footer-pill-red{
  background:#d93d4a;
}

.bokluy-home-grid-two{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}

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

.bokluy-topup-mini-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  background:linear-gradient(180deg,#6b8ff6 0%, #4d6fca 100%);
  color:#fff;
  font-size:12px;
  font-weight:1000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 20px rgba(8,18,69,.22);
}

/* =============================
   Bokluy responsive
============================= */
@media (max-width: 900px){
  .bokluy-topup-game-card{
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
  }

  .bokluy-topup-game-cover{
    max-width: 110px;
  }

  .bokluy-topup-form-grid{
    grid-template-columns: 1fr;
  }

  .bokluy-topup-confirm-btn{
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 640px){
  .bokluy-topup-shell{ padding:12px 12px 20px; }
  .bokluy-topup-topbar{ padding:12px 14px; gap:8px; }
  .bokluy-topup-brand img{ width:34px; height:34px; }
  .bokluy-topup-brand span{ font-size:12px; }
  .bokluy-topup-login-pill{ padding:11px 14px; font-size:12px; gap:8px; }
  .bokluy-topup-banner-image{ height:160px; }

  .bokluy-topup-game-card{
    grid-template-columns: 95px minmax(0, 1fr);
    padding:12px;
    gap:12px;
    align-items:start;
  }

  .bokluy-topup-game-cover{
    max-width:95px;
  }

  .bokluy-topup-game-meta h1{
    font-size:24px;
    margin-bottom:10px;
  }

  .bokluy-topup-stats{
    gap:8px;
  }

  .bokluy-topup-stats div{
    padding:8px 6px;
    border-radius:14px;
  }

  .bokluy-topup-stats strong{
    font-size:15px;
  }

  .bokluy-topup-stats span{
    font-size:10px;
  }

  .bokluy-topup-game-meta p{
    font-size:12px;
    line-height:1.4;
  }

  .bokluy-topup-panel{ padding:14px; }
  .bokluy-topup-panel-title{ padding:16px 18px; font-size:16px; }
  .bokluy-topup-input{ padding:16px 14px; font-size:15px; }
  .bokluy-topup-confirm-btn{ padding:16px 14px; font-size:15px; }

  .bokluy-topup-products#productsScroll,
  .bokluy-topup-products,
  #productsScroll.bokluy-topup-products{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }

  .bokluy-topup-payrow{ padding:14px; gap:12px; }
  .bokluy-topup-paylogo{ width:64px; height:64px; }
  .bokluy-topup-paytitle{ font-size:18px; }
  .bokluy-topup-paydesc{ font-size:14px; }
  .bokluy-topup-terms{ font-size:14px; align-items:flex-start; }
  .bokluy-topup-terms input{ width:24px; height:24px; }
  .bokluy-topup-bottom-bar{ padding:16px 18px; gap:12px; border-radius:24px; }
  .bokluy-topup-total-wrap{ font-size:18px; }
  .bokluy-topup-total-wrap strong{ font-size:28px; }
  .bokluy-topup-pay-btn{ min-width:150px; padding:15px 20px; font-size:18px; }
}

@media (max-width: 430px){
  .bokluy-topup-shell{ padding:10px 10px 18px; }
  .bokluy-topup-topbar{ padding:10px 11px; gap:6px; }
  .bokluy-topup-brand{ gap:8px; min-width:0; }
  .bokluy-topup-brand span{ font-size:11px; }
  .bokluy-topup-login-pill{ padding:10px 11px; font-size:11px; min-width:0; }
  .bokluy-topup-login-pill span:last-child{ overflow:hidden; text-overflow:ellipsis; }

  .bokluy-topup-game-card,
  .bokluy-topup-panel,
  .bokluy-topup-bottom-bar{
    border-radius:22px;
  }

  .bokluy-topup-game-card{
    grid-template-columns: 82px minmax(0, 1fr);
    gap:10px;
  }

  .bokluy-topup-game-cover{
    max-width:82px;
  }

  .bokluy-topup-game-meta h1{
    font-size:20px;
    margin-bottom:8px;
  }

  .bokluy-topup-stats{
    gap:6px;
  }

  .bokluy-topup-stats strong{
    font-size:13px;
  }

  .bokluy-topup-stats span{
    font-size:9px;
  }

  .bokluy-topup-game-meta p{
    font-size:11px;
    line-height:1.35;
  }

  .bokluy-topup-panel-title{ padding:14px 14px; font-size:15px; }

  .bokluy-topup-products#productsScroll,
  .bokluy-topup-products,
  #productsScroll.bokluy-topup-products{
    gap:8px;
  }

  .bokluy-topup-payrow{ padding:12px; }
  .bokluy-topup-paytitle{ font-size:16px; }
  .bokluy-topup-paydesc{ font-size:13px; }
  .bokluy-topup-bottom-bar{ padding:14px; }
  .bokluy-topup-total-wrap{ font-size:16px; }
  .bokluy-topup-total-wrap strong{ font-size:24px; }
  .bokluy-topup-pay-btn{ min-width:132px; padding:14px 16px; font-size:16px; }
  .bokluy-topup-topbar-actions{ gap:8px; }
  .bokluy-topup-mini-pill{ padding:10px 11px; font-size:11px; }
}