/* Theme 1: Dark gaming with high contrast */
:root{
  --bg:#0b0f1a;
  --panel:#0f172a;
  --card:#111827;
  --border:#334155;
  --text:#f9fbff;       /* brighter text */
  --muted:#e2e8f0;      /* readable muted */
  --accent:#22d3ee;     /* neon cyan */
  --accent-hover:#06b6d4;
  --link:#38bdf8;
  --link-hover:#a5f3fc;
  --placeholder:#cbd5e1;
}

html,body{
  background:var(--bg);
  color:var(--text);
  font-size:16.5px;
  line-height:1.5;
  min-height:100%;
}

/* Navbar */
.navbar{background:linear-gradient(90deg,#0f172a,#111827);border-bottom:1px solid var(--border);padding-top:0.4rem;padding-bottom:0.4rem}
.navbar .navbar-brand{
  padding-top:0;
  padding-bottom:0;
  font-weight:700;
  letter-spacing:0.04em;
  font-size:1.05rem;
  line-height:1.1;
}
.navbar .nav-link{
  color:var(--text)!important;
  padding-top:0.32rem;
  padding-bottom:0.32rem;
  line-height:1.15;
  font-size:0.97rem;
}
.navbar .nav-link:hover{color:var(--link-hover)!important}
.navbar .brand-mark{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.18);overflow:hidden}
.navbar .brand-mark img{max-width:100%;max-height:100%;object-fit:contain}
.navbar .brand-text{font-weight:700;letter-spacing:.04em;font-size:1.05rem}
@media (max-width: 575.98px){
  .navbar .brand-mark{width:32px;height:32px;border-radius:10px;}
  .navbar .brand-text{font-size:1rem;}
}

/* Cards & Panels */
.card{background:var(--panel);border:1px solid var(--border);color:var(--text)}

/* Forms */
label,.form-label{color:var(--text)}
.form-control{background:var(--card);color:var(--text);border-color:var(--border)}
.form-control:focus{background:var(--card);color:var(--text);border-color:var(--accent);box-shadow:0 0 0 .25rem rgba(34,211,238,.2)}
.form-control::placeholder{color:var(--placeholder)}
.form-select{background:var(--card);color:var(--text);border-color:var(--border)}

/* Buttons */
.btn-primary{background:var(--accent);border-color:var(--accent);color:#001017;font-weight:600}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#000c0f}
.btn-outline-light{border-color:var(--muted);color:var(--muted)}
.btn-outline-light:hover{border-color:var(--link);color:var(--link)}

/* Links & text */
a{color:var(--link)}
a:hover{color:var(--link-hover)}
.text-muted,.small.text-muted{color:var(--muted)!important}

/* Tables (admin) */
.table-dark{--bs-table-bg: var(--panel); --bs-table-striped-bg:#0e1525; --bs-table-striped-color:var(--text); --bs-table-color:var(--text)}

/* Denom & payment selectable cards */
.denom-card,.pay-card{display:flex;align-items:center;gap:.75rem;background:var(--card);border:1px solid var(--border);border-radius:.5rem;padding:.6rem .75rem;cursor:pointer;user-select:none}
.denom-card input,.pay-card input{appearance:none;width:1rem;height:1rem;border:2px solid var(--border);border-radius:50%;display:inline-block;position:relative}
.denom-card input:checked,.pay-card input:checked{border-color:var(--accent);box-shadow:0 0 0 .15rem rgba(34,211,238,.25)}
.denom-card.active,.pay-card.active{border-color:var(--accent)}
.denom-content,.pay-content{display:flex;justify-content:space-between;align-items:center;width:100%}

/* Codashop-like product cards */
.denom-card.codashop{position:relative;overflow:hidden;background:linear-gradient(180deg,#101826,#0b1220);border:1px solid rgba(56,189,248,.2);border-radius:12px;padding:.85rem 1rem}
.denom-card.codashop::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(34,211,238,.12), transparent 40%);pointer-events:none}
.denom-card .logo-slot{display:flex;align-items:center;gap:.5rem}
.denom-card .logo-slot img{width:36px;height:36px;object-fit:contain;border-radius:8px;background:#0d1422;padding:4px;border:1px solid rgba(148,163,184,.2)}
.denom-card .title{font-weight:600}
.denom-card .price-badge{background:rgba(34,211,238,.12);color:var(--text);border:1px solid rgba(34,211,238,.35);padding:.15rem .5rem;border-radius:.5rem;font-weight:600}

/* Brand logo util */
.brand-logo{display:inline-block;background:#0d1422;border:1px solid rgba(148,163,184,.2);border-radius:12px}

/* Game-styled logo frame (consistent size) */
.game-frame{width:72px;height:72px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:14px;background:radial-gradient(120% 120% at 0% 0%, #0d1422 0%, #0b1220 55%, #0a0f1c 100%);border:1px solid rgba(56,189,248,.28);box-shadow:inset 0 0 24px rgba(56,189,248,.06), 0 0 0 2px rgba(2,132,199,.12), 0 8px 20px rgba(2,132,199,.08)}
.game-frame::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg, rgba(34,211,238,.0), rgba(34,211,238,.6), rgba(34,211,238,.0));opacity:.8}
.game-frame img{width:64px;height:64px;object-fit:contain;filter:none}

/* Product card layout helpers */
.product-card{display:flex;flex-direction:column;min-height:240px}
.product-card .btn{margin-top:auto}

/* Text clamps to keep cards tidy */
.clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Codashop-like game tiles */
.game-tile-link{display:block;text-decoration:none;color:inherit}
.game-tile{background:transparent;border:none;border-radius:14px;padding:8px;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:150px;box-shadow:none;transition:transform .18s ease}
.game-tile:hover{transform:translateY(-2px)}
.game-thumb{width:96px;height:96px;display:flex;align-items:center;justify-content:center;position:relative;overflow:visible;background:transparent;border:0;border-radius:0}
.game-thumb::before{display:none}
.game-thumb img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));transition:transform .18s ease}
.game-tile:hover .game-thumb img{transform:scale(1.05)}
.game-thumb img{width:76px;height:76px;object-fit:contain}
.game-title{margin-top:.5rem;font-weight:700;letter-spacing:.2px;font-size:.98rem}
.game-meta{color:var(--muted);font-size:.85rem}
.game-price{margin-top:.35rem;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.35);border-radius:10px;padding:.1rem .45rem;font-weight:600;font-size:.95rem}

/* Admin sidebar */
.admin-sidebar{background:var(--panel);min-height:calc(100vh - 56px);overflow-y:auto;overflow-x:hidden}
.admin-sidebar .admin-nav-title{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;margin:.75rem .75rem .25rem}
.admin-sidebar .nav-link{color:var(--text);padding:.5rem .75rem;border-radius:.375rem;margin:.125rem .5rem;display:flex;gap:.5rem;align-items:center}
.admin-sidebar .nav-link:hover{background:rgba(56,189,248,.08);color:var(--link-hover)}
.admin-sidebar .nav-link.active{background:rgba(34,211,238,.12);border:1px solid var(--accent)}
.admin-nav-section{padding:.25rem 0 .5rem;border-bottom:0}

/* Admin main content centering and responsiveness */
.admin-main-col{padding-left:1rem;padding-right:1rem}
.admin-content{width:100%}
@media (min-width: 1400px){ /* xl+ */
  .admin-content{max-width:1200px;margin-left:auto;margin-right:auto}
}

/* Generic responsive helpers */
img,video,iframe{max-width:100%;height:auto}
.table{width:100%}
.table-responsive{overflow-x:auto}

/* Sidebar behavior */
@media (min-width: 992px){
  .admin-sidebar{position:sticky;top:56px}
  /* Give inner breathing room so section boxes are not flush to separator */
  .admin-sidebar .admin-nav-section{padding-left:.75rem;padding-right:.75rem}
  .admin-sidebar .admin-nav-title.btn{margin-left:0;margin-right:0}
  .admin-sidebar .nav-link{margin-left:0;margin-right:0}
}

/* Responsive sidebar (mobile & tablet) */
@media (max-width: 991.98px){
  .admin-sidebar{position:static;top:auto;min-height:unset;height:auto;overflow-y:visible;margin-bottom:1rem;padding-left:0;padding-right:0}
  .admin-sidebar.border-end{border-right:0!important;border-bottom:1px solid var(--border)!important}
  .admin-sidebar .admin-nav-title.btn{width:100%;margin-left:0;margin-right:0;border-radius:0}
  .admin-sidebar .nav-link{margin-left:0;margin-right:0;border-radius:0}
  .admin-sidebar .admin-nav-section{padding-left:0;padding-right:0}
  .admin-sidebar-col{padding-left:0!important;padding-right:0!important}
  .admin-layout{overflow-x:hidden}
}

/* Collapsible section buttons */
.admin-sidebar .admin-nav-title.btn{margin:.5rem .5rem;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between}
.admin-sidebar .admin-nav-title.btn span{display:inline-block;position:relative}
.admin-sidebar .admin-nav-title.btn span::after{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--accent),transparent);width:100%;margin-top:.35rem;opacity:.7;border-radius:2px}
.admin-sidebar .admin-nav-title.btn:hover{border-color:var(--accent);color:var(--text)}
.admin-sidebar .admin-nav-title .admin-caret{transition:transform .2s ease, opacity .2s ease; opacity:.85}
.admin-sidebar .admin-nav-title[aria-expanded="true"] .admin-caret{transform:rotate(180deg); opacity:1}
.admin-sidebar .collapse .nav-link{padding-left:1.25rem}

/* Prevent horizontal scroll on admin layout */
.admin-layout{overflow-x:hidden; position:relative}

/* Vertical separator between Sidebar and Main (responsive) */
@media (min-width: 992px){ /* lg and up: sidebar col-lg-2 (16.6667%) */
  .admin-layout::before{content:"";position:absolute;top:0;bottom:0;left:16.6667%;width:1px;background:var(--border);pointer-events:none;z-index:0}
  .admin-sidebar.border-end{border-right:0!important}
}
@media (min-width: 768px) and (max-width: 991.98px){ /* md: sidebar col-md-3 (25%) */
  .admin-layout::before{content:"";position:absolute;top:0;bottom:0;left:25%;width:1px;background:var(--border);pointer-events:none;z-index:0}
  .admin-sidebar.border-end{border-right:0!important}
}




/* ====================== Gen-Z Light Navbar & Footer (scoped) ====================== */
/* Aktif saat body memiliki class .theme-genz (ditambahkan di layout utama) */
.theme-genz .navbar{
  background: rgba(255,255,255,.78) !important;
  border-bottom: 1px solid #000000 !important; /* separator hitam */
  box-shadow: 0 1px 0 rgba(0,0,0,.06); /* garis bantu halus */
  backdrop-filter: saturate(1.4) blur(10px);
  z-index: 1100; /* pastikan selalu di atas hero */
}
.theme-genz .navbar .nav-link{position:relative;overflow:hidden}
/* Flash-light hover effect pada item navbar */
.theme-genz .navbar .nav-link::before{
  content:""; position:absolute; width:220px; height:220px; pointer-events:none;
  top: calc(var(--my, 50%) - 110px); left: calc(var(--mx, 50%) - 110px);
  background: radial-gradient(100px 100px at center, rgba(167,139,250,.28), rgba(167,139,250,0) 70%);
  opacity:0; transform:scale(.85); transition: opacity .18s ease, transform .18s ease;
}
.theme-genz .navbar .nav-link:hover::before,
.theme-genz .navbar .nav-link:focus::before{opacity:1; transform:scale(1)}
.theme-genz .navbar .nav-link:active::before{opacity:1; transform:scale(1.08)}
.theme-genz .navbar .brand-mark{background:#eef2ff;border:1px solid #e5e7eb}
.theme-genz .navbar .brand-text{color:#0f172a}
.theme-genz .navbar .nav-link{color:#0f172a!important}
.theme-genz .navbar .nav-link:hover{color:#111827!important}
/* Dropdown pada navbar terang */
.theme-genz .dropdown-menu-dark{background-color:#ffffff;color:#111827;border:1px solid #e5e7eb; z-index: 1200}
.theme-genz .dropdown-menu{z-index: 1200}
.theme-genz .dropdown-menu-dark .dropdown-item{color:#111827}
.theme-genz .dropdown-menu-dark .dropdown-item:hover{background:#f3f4f6}
/* Flash-light juga untuk dropdown item */
.theme-genz .dropdown-menu .dropdown-item{position:relative;overflow:hidden}
.theme-genz .dropdown-menu .dropdown-item::before{
  content:""; position:absolute; width:220px; height:220px; pointer-events:none;
  top: calc(var(--my, 50%) - 110px); left: calc(var(--mx, 50%) - 110px);
  background: radial-gradient(100px 100px at center, rgba(34,211,238,.20), rgba(34,211,238,0) 70%);
  opacity:0; transform:scale(.9); transition: opacity .18s ease, transform .18s ease;
}
.theme-genz .dropdown-menu .dropdown-item:hover::before,
.theme-genz .dropdown-menu .dropdown-item:focus::before{opacity:1; transform:scale(1)}
.theme-genz .dropdown-menu .dropdown-item:active::before{opacity:1; transform:scale(1.06)}
/* Toggler icon & border (navbar pakai .navbar-dark di markup) */
.theme-genz .navbar-dark .navbar-toggler{border-color:rgba(15,23,42,.35)}
.theme-genz .navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230f172a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}

/* Footer selaras tema Gen Z (terang lembut) */
.theme-genz footer.bg-dark{
  background:
    radial-gradient(700px 260px at 100% -10%, rgba(167,139,250,.10), transparent 60%),
    radial-gradient(700px 260px at 0% -10%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg,#ffffff 0%, #f7f8fc 100%) !important;
  color:#0b1322 !important;
  border-top:1px solid #000000 !important; /* separator hitam */
  box-shadow: 0 -1px 0 rgba(0,0,0,.05) inset; /* garis bantu di tepi atas */
}
.theme-genz footer, .theme-genz footer .small{color:#0b1322!important}
.theme-genz footer .text-secondary{color:#475569!important}
.theme-genz footer .fw-semibold{color:#0b1322!important}
.theme-genz footer .link-light{color:#0b1322!important}
.theme-genz footer .link-light:hover{color:#0a1020!important}