/* ==========================================================================
   Pusat Bola Tangkas — Reskin (Pink • Bright Blue • Gold)
   Drop-in override stylesheet for the provided HTML skeleton.
   ========================================================================== */

:root{
  --pbt-pink: #ff4fa3;
  --pbt-blue: #00a7ff;
  --pbt-gold: #ffd166;

  --pbt-ink: #081027;
  --pbt-bg0: #05071b;
  --pbt-bg1: #0a1337;

  --pbt-surface: rgba(255,255,255,0.06);
  --pbt-surface-2: rgba(255,255,255,0.10);
  --pbt-border: rgba(255,209,102,0.35);
  --pbt-border-2: rgba(255,255,255,0.12);

  --pbt-text: #f7f9ff;
  --pbt-muted: rgba(247,249,255,0.78);

  --pbt-shadow: 0 14px 38px rgba(0,0,0,0.45);
  --pbt-radius: 16px;
}

html, body{
  scroll-behavior: smooth;
}

body{
  background:
    radial-gradient(1100px 500px at 20% 10%, rgba(255,79,163,0.22), transparent 60%),
    radial-gradient(1100px 500px at 80% 0%, rgba(0,167,255,0.22), transparent 60%),
    radial-gradient(900px 600px at 50% 100%, rgba(255,209,102,0.16), transparent 62%),
    linear-gradient(180deg, var(--pbt-bg0), var(--pbt-bg1)) !important;
  color: var(--pbt-text) !important;
}

::selection{
  background: rgba(255,79,163,0.35);
  color: var(--pbt-text);
}

/* Links */
a{ color: var(--pbt-blue) !important; }
a:hover{ color: var(--pbt-pink) !important; }

/* Borders / separators used by the template */
.line-border,
.line-border-top,
.line-border-left,
.line-border-right,
.line-border-bottom{
  border-color: var(--pbt-border) !important;
}

/* Header / menu glass look */
.header-front,
.menu-header-wrap{
  background: transparent !important;
}

.menu-header,
.identity-header .container,
.top-download-apk .main-download-apk{
  background: rgba(7,10,29,0.65) !important;
  border: 1px solid var(--pbt-border-2) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--pbt-shadow);
  border-radius: var(--pbt-radius);
}

/* Offcanvas / dropdown / modal panels */
.bg-offcanvas,
.offcanvas,
.dropdown-menu,
.modal-content{
  background: rgba(7,10,29,0.92) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--pbt-border-2) !important;
  box-shadow: var(--pbt-shadow);
}

/* Brand images */
.logo-header img,
.offcanvas-header img{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
}

/* Navbar toggler */
.navbar-toggler{
  border-color: rgba(255,209,102,0.45) !important;
}

.navbar-toggler:focus{
  box-shadow: 0 0 0 0.2rem rgba(255,209,102,0.15) !important;
}

/* Buttons */
.btn{
  border-radius: 999px !important;
  letter-spacing: 0.2px;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.btn-main,
.btn-info,
.btn-primary,
.btn-success,
.btn-shortcut{
  background-image: linear-gradient(135deg, var(--pbt-blue) 0%, var(--pbt-pink) 60%, var(--pbt-gold) 120%) !important;
  border: 1px solid rgba(255,209,102,0.75) !important;
  color: var(--pbt-ink) !important;
  box-shadow: 0 10px 28px rgba(0,167,255,0.18), 0 10px 28px rgba(255,79,163,0.14) !important;
}

.btn-main:hover,
.btn-info:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-shortcut:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,167,255,0.24), 0 14px 34px rgba(255,79,163,0.20) !important;
  filter: brightness(1.03);
}

.btn-main-dark,
.btn-dark{
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,209,102,0.55) !important;
  color: var(--pbt-text) !important;
}

.btn-main-dark:hover,
.btn-dark:hover{
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,209,102,0.85) !important;
  transform: translateY(-1px);
}

.btn-white-dark{
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: var(--pbt-text) !important;
}

.btn-white-dark:hover{
  border-color: rgba(255,209,102,0.65) !important;
  transform: translateY(-1px);
}

.btn-trans,
.btn-outline-light,
.btn-outline-secondary{
  background: transparent !important;
  border: 1px solid rgba(255,209,102,0.65) !important;
  color: var(--pbt-gold) !important;
}

.btn-trans:hover,
.btn-outline-light:hover,
.btn-outline-secondary:hover{
  background: rgba(255,209,102,0.10) !important;
  color: var(--pbt-text) !important;
}

/* Forms */
.input-group-text{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--pbt-gold) !important;
}

.form-control,
.form-select,
.form-floating > .form-control{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: var(--pbt-text) !important;
  box-shadow: none !important;
}

.form-control::placeholder{
  color: rgba(247,249,255,0.55) !important;
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(0,167,255,0.65) !important;
  box-shadow: 0 0 0 0.2rem rgba(0,167,255,0.18) !important;
}

.form-floating > label{
  color: rgba(247,249,255,0.72) !important;
}

/* Slider / banners */
.main-slider{
  border-radius: var(--pbt-radius) !important;
  overflow: hidden;
  box-shadow: var(--pbt-shadow) !important;
}

/* Owl carousel dots (template uses sa_owl_theme too) */
.owl-theme .owl-dots .owl-dot span,
.sa_owl_theme .owl-dots .owl-dot span{
  background: rgba(255,255,255,0.22) !important;
}

.owl-theme .owl-dots .owl-dot.active span,
.sa_owl_theme .owl-dots .owl-dot.active span{
  background: var(--pbt-gold) !important;
  box-shadow: 0 0 0 4px rgba(255,209,102,0.18);
}

/* Cards / tiles */
.item_game_menu_wrap,
.simple-card-title-desc,
.sub-page-aside,
.logo-group,
.main-slider-menu,
.floating-socmed .contact-wrap{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--pbt-radius) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,0.35) !important;
}

/* Realtime widget */
.fixed-latest-dpwd{
  border: 1px solid rgba(255,209,102,0.55) !important;
  background: rgba(7,10,29,0.78) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* ==========================================================================
   Image uniform fixes (Jackpot / Bank / Provider)
   ========================================================================== */

/* 1) Jackpot: make the icon area a neat square, prevent stretching */
.jackpot-play .icon{
  width: clamp(140px, 18vw, 260px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.jackpot-play .icon img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
  padding: 10px;
}

/* 2) Bank logos: force same visual height & center them */
.bank-items-container .bic-item{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.bank-items-container .bic-item img{
  width: auto !important;  /* override inline width:100% */
  height: auto !important;
  max-width: 100%;
  max-height: 44px;        /* uniform size */
  object-fit: contain;
  display: block;
}

/* Keep spacing consistent even if bootstrap col has margin-bottom */
.bank-items-container .bic-item.mb-3{ margin-bottom: 12px !important; }

/* 3) Provider logos: same idea (uniform, centered) */
.logo-group .logo-group-content{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.logo-group-content .lggr-item{
  flex: 0 1 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.logo-group-content .lggr-item img{
  width: auto !important;  /* override inline width:100% */
  height: auto !important;
  max-width: 100%;
  max-height: 46px;        /* uniform size */
  object-fit: contain;
  display: block;
}

/* Responsive tweaks */
@media (max-width: 575.98px){
  .logo-group-content .lggr-item{ flex-basis: 46%; }
  .bank-items-container .bic-item img{ max-height: 40px; }
  .logo-group-content .lggr-item img{ max-height: 42px; }
}