/**
 * JKT48 Theme — Red Brand (#ed2227) on Light Surface
 * Background: #f5f5f5 (light gray)
 * Reference: Figma IDN Games White-Label Partner - JKT48 variant
 *
 * Color Palette (from Figma):
 * - Primary accent: #ed2227 (JKT48 red / ADS Brand 500)
 * - Secondary accent: #c41219 (darker red)
 * - Tertiary accent: #a10f15 (deep red)
 * - Body background: #f5f5f5
 * - Navbar/surface: #ffffff
 * - Section/card bg: #ffffff
 * - Hover state: #c41219
 * - Text primary: #0d0d0d
 * - Text secondary: #595959
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* ─── Font Override (JKT48) ───
   Plus Jakarta Sans as the base font, excluding Font Awesome icon elements so
   glyph fonts are preserved (same pattern as the Tamirana theme). */
*:not(.fa):not([class*='fa-']):not([class^='fa']),
*:not(.fa):not([class*='fa-']):not([class^='fa'])::before,
*:not(.fa):not([class*='fa-']):not([class^='fa'])::after {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

:root {
  /* ─── Brand Colors ─── */
  --warna_text_1: #0D0D0D;
  --warna_text_5: #A3A3A3;
  --warna_3: #ed2227;
  --warna_5: #ed2227;
  --warna_neon_1: #c41219;
  --warna_neon_3: #ed2227;
  --warna_neon_4: #ed2227;
  --warna_hover: #c41219;

  /* ─── Backgrounds ─── */
  --body_background: #f5f5f5;
  --warna_7: #ffffff;
  --warna_8: #e6e6e6;
  --warna_9: #ffffff;
  --warna_12: #F5F5F5;
  --warna_17: #ffffff;

  /* ─── Gradients ─── */
  --warna_6: linear-gradient(90deg, #ED2227 0%, #FF00C8 100%);
  --warna_10: #ed2227;
  --warna_11: #ed2227;

  /* ─── Text Colors ─── */
  /* --warna_text_2: #0d0d0d; */
  --warna_text_2: #ffffff;
  --warna_text_3: #444;
  --warna_text_4: #F4A511;
  --warna_text_7: #ed2227;
  --warna_text_9: #ffffff;

  /* ─── Neon Effects ─── */
  --warna_neon_1: #c41219;
  --warna_neon_1_hover: #a10f15;
  --warna_neon_2: #ED2227;
  --warna_neon_2_hover: #c41219;
  --warna_neon_5: #ed2227;

  /* ─── Footer ─── */
  --footer_background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 9.59%, rgba(13, 13, 13, 0.50) 210%);
}

body {
  background-color: var(--body_background) !important;
  color: #0d0d0d;
}

/* ─── Navbar Override ─── */
#navUtama {
  background: var(--warna_7);
  border-bottom: 1px solid #eaeaea;
}

.navbar-collapse {
  background: var(--warna_7) !important;
}

.searchnav {
  background: #f0f0f0;
  color: #595959;
}

.searchnav svg {
  color: #0D0D0D;
}

.searchnav span {
  color: #0D0D0D;
}

a.nav-item {
  color: #0d0d0d;
}

a.nav-item:hover,
a.nav-item.active,
a.nav-item.show {
  color: #ed2227;
  text-shadow: 0 0 4px rgba(237, 34, 39, 0.50);
}

.searchnavmobile:hover {
  background: #f0f0f0;
}

.pencarian-content {
  background: #ffffff;
}



/* ─── Category Tabs ─── */
.button-category.active {
  background: #ffffff;
  color: #ed2227;
  border: 2px solid #ed2227;
  box-shadow: 0 0 5px 0 #ED2227, 0 0 10px 0 #ED2227 inset;
}

.button-category {
  border-color: #0d0d0d;
  color: #ffffff;
  background: #0d0d0d;
}

/* ─── Buttons ─── */
.button-style-2 {
  color: #0D0D0D;
  border: 2px solid #0D0D0D;
  background: #ffffff;
  box-shadow: 0 0 5px 0 #1A1A1A, 0 0 10px 0 #000 inset;
}

.button-style-2:hover {
  color: #ED2227;
  background: #ffffff;
  border: 2px solid #ed2227;
}

/* ─── Footer ─── */
.title-footer {
  color: #0d0d0d;
  text-shadow: 0 0 4px rgba(13, 13, 13, 0.50);
}

.text-foot * {
  color: #595959;
}

.menu-list li a {
  color: #595959;
}

.menu-list li a:hover {
  color: #ed2227;
}

.footerr .sec-2 {
  background: #0D0D0D;
}

/* ─── Game Detail / Breadcrumb ─── */
.game-breadcrumb .breadcrumb-item.active {
  color: var(--warna_3);
}

.game-breadcrumb .breadcrumb-item a {
  color: #0D0D0D;
}

.game-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #0D0D0D;
}

.game-breadcrumb .breadcrumb-item a:hover {
  color: var(--warna_3);
}

.game-detail-category-name {
  color: var(--warna_3);
}

.maintitle {
  line-height: 30px;
}

.maintitle2 {
  color: #ED2227;
}

.title-games-populer {
  color: #FFFFFF;
}

.titlesub {
  background: linear-gradient(0deg, #0D0D0D 0.85%, rgba(13, 13, 13, 0.75) 50%, rgba(13, 13, 13, 0.00) 99.15%);
}

.titsub::after {
  background: linear-gradient(
    0deg,
    #ed2227 0.85%,
    rgba(237, 34, 39, 0.80) 50%,
    rgba(237, 34, 39, 0.00) 99.15%
  );
}

.games-content * {
  color: #1A1A1A !important;
}

.checkout-ppn,
.checkout-harga-produk,
.checkout-biaya-layanan,
.checkout-biaya-payment-gateway {
  color: #0D0D0D;
}

.checkout-total {
  border-top: 1px solid #535353 !important;
}
/* ─── Search ─── */
.subtext-items {
  background: #F5F5F5;
  color: #0D0D0D;
}

.searchItem {
  background: none;
}

.searchItem:hover {
  background: #E6E6E6;
}

.searchItem:hover .searchgameInstant {
  color: #0D0D0D !important;
}

.searchItem:hover .searchgameInstant small {
  color: #ED2227 !important
}

.searchItem:hover .searchgameInstant b {
  color: #0D0D0D !important;
}

.searchgameInstant b {
  color: #0D0D0D;
}

.searchgameInstant small {
  color: var(--warna_3);
}

.search-container .game-item:hover .searchgameInstant small {
  color: #ed2227;
}

.search-container .game-item:hover {
  background: none;
}

/* Fallback background shown behind the search game image. When the image fails
   to load, GameImage / onerror swaps the src for a transparent pixel, so this
   red box is what remains visible (no broken-image glyph). */
.search-game-img {
  background-color: #ed2227;
}

/* ─── Form Controls ─── */
.form-control {
  background-color: #F5F5F5 !important;
  color: #0D0D0D !important;
  border: none !important;
}

.form-control:focus {
  border: 2px solid var(--warna_neon_2) !important;
  color: #0d0d0d !important;
}

.form-control:focus::placeholder {
  color: #0d0d0d !important;
}

.form-control::placeholder {
  color: #0D0D0D !important;
}

.form-control:-ms-input-placeholder {
  color: #0D0D0D !important;
}

.form-control::-ms-input-placeholder {
  color: #0D0D0D !important;
}

/* ─── FAQ / Info Cards ─── */
.header-faq {
  color: #0d0d0d;
}

.toggle-faq {
  color: #0D0D0D;
}

.faq-content .faq-body-content {
  background: #E6E6E6;
  color: #0D0D0D;
}

.faq-body-content, .faq-body-content * {
  color: #0D0D0D !important;
}

.game-detail-order-process-info-card {
  border: 1px solid #A3A3A3 !important;
  background: #E6E6E6 !important;
}

.game-detail-order-process-info-card .text-order {
  color: #0d0d0d !important;
}

.game-detail-order-process-info-card .text-saweria {
  color: #F4A511 !important;
}

/* ─── Warning/Accent Text ─── */
.text-warning {
  color: var(--warna_3) !important;
}

a.text-warning:hover {
  color: #c41219 !important;
}

/* ─── Radio Buttons (Nominal/Payment) ─── */
.radio-nominal:checked + label {
  background: #F5F5F5;
  border: 2px solid var(--warna_neon_2);
  box-shadow: none;
}

.radio-nominal:hover + label {
  background: #F5F5F5;
  border: 2px solid var(--warna_neon_2);
  box-shadow: none;
}

.radio-nominale:checked + label {
  background: #F5F5F5;
  border: 2px solid var(--warna_neon_2);
  box-shadow: none;
}

.radio-nominale:hover + label {
  background: #F5F5F5;
  border: 2px solid var(--warna_neon_2);
  box-shadow: none;
}

.radio-nominale + label .currency-idr1 {
  font-weight: 700;
}

.radio-nominale + label {
  justify-content: flex-start;
}

/* ─── How To Pay Button ─── */
/* .button-how-to-pay.button-style-2:hover {
  background: #ffffff;
  color: var(--warna_3);
  box-shadow: none;
} */

.button-how-to-pay.button-style-2 {
  border: 2px solid #ED2227;
  background: rgba(255, 255, 255, 0.00);
  color: #ED2227;
  box-shadow: 0 0 5px 0 #ED2227, 0 0 10px 0 #ED2227 inset;;
}

/* ─── Modal ─── */
.modal-popup .modal-header {
  background: #FFF;
}

.modal-popup .modal-footer {
  background: #FFF;
}

.modal-popup .modal-footer .modal-button-link {
  background: #ffffff;
  color: #ed2227;
}

.modal-popup .modal-footer .modal-button-link:hover {
  background: #ffffff;
  color: #c41219;
}
.modal-popup .modal-body {
  background: #F5F5F5;
}

.modal-popup .modal-body .modal-titles {
  color: #0D0D0D;
  font-weight: 800 !important;
}

/* ─── Payment Page ─── */
.payment-container {
  background: linear-gradient(180deg, #0D0D0D -200%, rgba(255, 255, 255, 0.00) 40%);
}

.payment-container .form-input {
  background: #E6E6E6 !important;
  color: #535353 !important;
}

.payment-container .form-input::placeholder {
  color: #535353 !important;
}

.payment-container button[type=submit] {
  width: 35%;
}

.modal-popup .modal-header .modal-button-close svg {
  stroke: #0D0D0D;
}

.payment-container .card-section {
  background-color: #E6E6E6;
}

.payment-container .group-name {
  color: #ED2227;
}

.payment-container .order-number {
  color: #0D0D0D;
}

.payment-container .payment-method {
  color: #0D0D0D;
}

div:where(.swal2-icon).swal2-success .swal2-success-ring {
  border: 2px solid var(--Success-500, #0A8B41) !important;
}

div:where(.swal2-icon).swal2-success {
  color: #0A8B41;
}

div:where(.swal2-container) h2:where(.swal2-title) {
  color: #0D0D0D !important;
}

div:where(.swal2-container) div:where(.swal2-html-container) {
  color: #0D0D0D !important;
}

.border-color-expired {
  border: 1px solid #ED2227;
}

.bg-expired {
  background: #8E1317;
}

.color-expired {
  color: #FFF;
}

.label-va {
  background: #F6B741 !important;
  color: #0D0D0D;
}

.order-time {
  color: #FFF;
}

.pay-text-1 {
  color: #0D0D0D;
}

/* ─── CTA / Action Buttons ─── */
.buy-btn-wrapper .button-style-1 {
  background: #ed2227;
  color: #ffffff;
}

.buy-btn-wrapper .button-style-1:hover {
  background: #8E1317;
}

.button-style-9 {
  background: #ed2227;
}

.button-style-9:hover {
  background: #c41219;
}

/* ─── Accordion (Payment Methods) ─── */
.accordion-method .accordion-button {
  background: #F5F5F5;
  color: #0D0D0D;
}

.accordion-method .accordion-footer {
  background: #F5F5F5;
  padding: 12px 16px 12px 16px
}

/* ─── Title Heading (Paling Laris, etc.) ─── */
.title-heading {
  color: #0d0d0d;
  text-shadow: 0 0 8px rgba(237, 34, 39, 0.70);
}

.syarat-ketentuan .title-heading {
  color: #ED2227;
  text-shadow: none;
}

.color-text-4 {
  color: var(--warna_text_4);
}

/* Fallback background shown behind game images. When an image fails to load,
   GameImage swaps the src for a transparent pixel, so this red box is what
   remains visible (no broken-image glyph). */
.image-games-populer,
.image-games-b {
  background-color: #f0f0f0;
}

/* ─── Game Card Overlays ─── */
.game-card-overlay,
.game-populer-overlay {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.85) 0.85%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0) 99.15%
  );
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar-track {
  background: #e6e6e6;
}

::-webkit-scrollbar-thumb {
  background: #ed2227;
}

::-webkit-scrollbar-thumb:hover {
  background: #c41219;
}

/* ─── Logo/Image Sizes ─── */
.logfott {
  width: 110px;
}

.navbar-brand img {
  width: 84px;
}

.banner-slide-container .col-banner-1 .logo-banner {
  width: 125px;
}

.modal-popup .modal-header .modal-logo {
  width: 84px;
}

.searchHead .searIn {
  color: #0D0D0D;
}

/* ─── Newest Games Section (Homepage) ─── */
.newest-game-section .section-title {
  color: #0d0d0d;
  text-shadow: none;
}

/* ─── Homepage Banner ─── */
.banner-title-heading {
  color: #0d0d0d;
  text-shadow: none;
}

.banner-slide-container .col-banner-1 .title-banner {
  color: #0D0D0D;
}

.desc-banner p {
  color: #0D0D0D;
}

.flashsale-container .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 40px;
  background: #ed2227;
}

.banner-slide-container .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 40px;
  background: #ed2227;
}

.hero-brand-divider {
  background: #A3A3A3 !important;
}

.footer-brand-divider {
  background: #A3A3A3 !important;
}

/* logo saweria style */

.hero-saweria-logo {
  height: 50px !important;
}

.footer-saweria-logo {
  height: 47px !important;
}

.game-detail-saweria-logo {
  height: 40px !important;
}

.game-detail-saweria-logo-mobile {
  height: 40px !important;
}