/**
 * IDN Times Theme — Red Brand (#ed2227) on Light Surface
 * Background: #f5f5f5 (light gray)
 * Copied from the JKT48 variant as the branding baseline.
 *
 * Color Palette:
 * - Primary accent: #ed2227 (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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* ─── Font Override (IDN Times) ───
   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: 'Poppins', 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: #535353;
  --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) 9.59%,
    rgba(13, 13, 13, 0.5) 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.5);
}

.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.5);
}

.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);
  font-weight: 400;
}

.maintitle {
  line-height: 32px;
}

.maintitle2 {
  color: #ed2227;
  line-height: 26px;
  font-size: 18px;
  font-weight: 400;
}

.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) 99.15%
  );
}

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

.title-games-b {
  line-height: 24px;
}

.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;
  font-weight: 400;
}

.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;
  line-height: 24px;
}

.searchgameInstant b {
  color: #0d0d0d;
}

.searchgameInstant small {
  color: var(--warna_3);
  line-height: 24px;
}

.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;
  line-height: 32px;
}

.toggle-faq {
  color: #0d0d0d;
  font-weight: 700;
  line-height: 24px;
}

.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;
  font-weight: 700;
}

.game-detail-order-process-info-card .text-saweria {
  color: #f4a511 !important;
  font-weight: 700;
}

/* ─── 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);
  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: #ED2227;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.modal-popup .modal-footer .modal-button-link:hover {
  background: rgba(237, 34, 39, 0.9);
  color: #f5f5f5;
}
.modal-popup .modal-body {
  background: #f5f5f5;
}

.modal-popup .modal-body .modal-titles {
  color: #0d0d0d !important;
  font-weight: 800 !important;
  text-transform: capitalize;
}

.modal-popup .modal-body .modal-desc * {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

/* ─── Payment Page ─── */
.payment-container {
  background: linear-gradient(180deg, #0d0d0d -200%, rgba(255, 255, 255, 0) 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;
}

.radio-nominal + label .method-name,
.radio-nominal + label .saldo-anda {
  font-size: 14px;
  line-height: 20px;
}

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;
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
}

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;
  background: #ed2227;
}

.label-invoice-number,
.label-transaction-status,
.label-payment-status {
  color: #0D0D0D;
}

.pay-text-1 {
  color: #0d0d0d;
  line-height: 32px;
}

.pay-text-2 {
  font-weight: 400;
  line-height: 24px;
  margin-top: 5px;
}

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

.buy-btn-wrapper .button-style-1 strong {
  font-weight: 700;
}

.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;
  font-weight: 700;
}

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

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

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

.desc-b * {
  font-size: 14px !important;
}

.desc-b .first-paragraph {
  margin-bottom: 12px;
  display: block;
}

.desc-b ul {
  margin-bottom: 12px;
}

.required-email-data {
  font-weight: 400;
  color: #0d0d0d;
}

.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: 100px;
}

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

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

.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;
  line-height: 32px;
}

.desc-banner p {
  color: #0d0d0d;
  font-size: 16px;
  line-height: 24px;
}

.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;
}