/**
 * Tamirana Theme — Blue Brand (#c5d8ea / #7ca7d0)
 * Background: #08080f (very dark navy)
 * Reference: Figma IDN Games White-Label Partner - Tamirana variant
 *
 * Color Palette (from Figma):
 * - Primary accent: #c5d8ea (light steel blue)
 * - Secondary accent: #7ca7d0 (medium blue)
 * - Tertiary accent: #5b8ab5 (darker blue)
 * - Body background: #08080f
 * - Navbar/surface dark: #0e0e1b
 * - Section/card bg: #1a1a2e
 * - Hover state: #3d6a94
 * - Text primary: #ffffff
 * - Text secondary: #e6e6e6
 */

/* ─── Bree Serif Font (Tamirana only) ─── */
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');

*: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: 'Bree Serif', serif !important;
}
:root {
  /* ─── Brand Colors ─── */
  --warna_3: #c5d8ea;
  --warna_5: #7ca7d0;
  --warna_neon_1: #5b8ab5;
  --warna_neon_3: #7ca7d0;
  --warna_neon_4: #c5d8ea;
  --warna_hover: #3d6a94;

  /* ─── Backgrounds ─── */
  --body_background: #08080f;
  --warna_7: #0e0e1b;
  --warna_8: #2a3a4d;
  --warna_9: #1a1a2e;
  --warna_12: #1a1a2e;
  --warna_17: #0e0e1b;

  /* ─── Gradients ─── */
  /* --warna_6: linear-gradient(90deg, #7ca7d0, #5b8ab5); */
  /* --warna_6: linear-gradient(90deg, var(--warna_neon_5), var(--warna_neon_1)); */
  --warna_6: linear-gradient(90deg, #ed2227 0%, #c837ab 100%);
  --warna_10: #7ca7d0;
  --warna_11: #7ca7d0;

  /* ─── Text Colors ─── */
  --warna_text_2: #ffffff;
  --warna_text_3: #ffffff;
  --warna_text_4: #FEE440;
  --warna_text_7: #c5d8ea;
  --warna_text_9: #ffffff;

  /* ─── Neon Effects ─── */
  --warna_neon_1: #5b8ab5;
  --warna_neon_1_hover: #3d6a94;
  --warna_neon_2: #c5d8ea;
  --warna_neon_2_hover: #7ca7d0;
  --warna_neon_5: #7ca7d0;

  /* ─── Footer ─── */
  --footer_background: linear-gradient(180deg, #08080f 6.256%, #c5d8ea 193.43%);
}

body {
  background-color: var(--body_background) !important;
}
/* ─── Navbar Override ─── */
#navUtama {
  background: var(--warna_7);
}

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

.searchnav {
  background: #e6e6e6;
  color: #0d0d0d;
}

.searchnav svg {
  color: #0d0d0d;
}

.searchnav span {
  color: #0d0d0d;
}

a.nav-item:hover,
a.nav-item.active,
a.nav-item.show {
  color: #c5d8ea;
  text-shadow: 0 0 3px #c5d8ea;
}

.searchnavmobile:hover {
  background: #7ca7d0;
}

.pencarian-content {
    background: #1B1B32;
}

/* ─── Category Tabs ─── */
.button-category.active {
  background: #ffffff;
  color: #08080f;
  border: 2px solid #c5d8ea;
  background: var(--GGWP-Neutral-30, #fff);
  box-shadow:
    0 0 5px 0 #c5d8ea,
    0 0 10px 0 #c5d8ea inset;
}

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

/* ─── Buttons ─── */
.button-style-2 {
  color: var(--warna_text_9);
  border: 2px solid #c5d8ea;
  background: rgba(255, 255, 255, 0);
  box-shadow:
    0 0 5px 0 #c5d8ea,
    0 0 10px 0 #c5d8ea inset;
}

.button-style-2:hover {
  border: 2px solid #7ca7d0;
}

/* ─── Footer ─── */
.title-footer {
  text-shadow: 0 0 4px #c5d8ea;
}

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

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

.footerr .sec-2 {
  background: #08080f;
}

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

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

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

.maintitle2 {
  color: var(--warna_3);
}

.titsub::after {
  background: linear-gradient(
    0deg,
    #7ca7d0 0.85%,
    rgba(124, 167, 208, 0.75) 50%,
    rgba(0, 0, 0, 0) 99.15%
  );
}

/* ─── Search ─── */
.subtext-items {
  background: #1b1b32;
}

.searchItem {
  background: none;
}

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

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

/* ─── Form Controls ─── */
.form-control {
  background-color: #ffffff !important;
  color: #495057 !important;
}

.form-control:focus {
  border: 2px solid var(--warna_neon_2) !important;
  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: #ffffff;
}

.faq-content .faq-body-content {
  background: var(--warna_12);
}

.game-detail-order-process-info-card {
  border: 1px solid var(--warna_3)  !important;
  background: var(--warna_7) !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: #7ca7d0 !important;
}

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

.radio-nominal:hover + label {
  background: var(--warna_12);
  border: 2px solid var(--warna_neon_2);
  box-shadow: 0 0 4px 0 var(--warna_neon_2);
}

.radio-nominale:checked + label {
  background: var(--warna_12);
  border: 2px solid var(--warna_neon_2);
  box-shadow: 0 0 4px 0 var(--warna_neon_2);
}

.radio-nominale:hover + label {
  background: var(--warna_12);
  border: 2px solid var(--warna_neon_2);
  box-shadow: 0 0 4px 0 var(--warna_neon_2);
}

/* ─── 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 {
  background: var(--warna_3);
  color: #08080f;
  box-shadow: none;
}

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

.modal-popup .modal-footer {
  background: #7ca7d0;
}

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

.modal-popup .modal-footer .modal-button-link:hover {
  background: #ffffff;
  color: #5b8ab5;
}

/* ─── Payment Page ─── */
.payment-container {
  background: linear-gradient(180deg, #7ca7d0 -53.71%, rgba(8, 8, 15, 0) 84.63%);
}

/* ─── CTA / Action Buttons ─── */

.buy-btn-wrapper .button-style-1 {
  color: #08080f;
}

.buy-btn-wrapper .button-style-1:hover {
  background: #7ca7d0;
}

.button-style-9 {
  background: linear-gradient(-90deg, #ED2227, #FF00C8);
}

.button-style-9:hover {
  background: linear-gradient(90deg, #ED2227, #FF00C8);
}

/* .button-style-9 {
  background: linear-gradient(-90deg, #7ca7d0, #5b8ab5);
}

.button-style-9:hover {
  background: linear-gradient(90deg, #7ca7d0, #5b8ab5);
} */

/* ─── Section Cards ─── */
/* .section {
  background: #1a1a2e;
} */

/* ─── Accordion (Payment Methods) ─── */
.accordion-method .accordion-button {
  background: #1a1a2e;
}

.accordion-method .accordion-footer {
  background: #1a1a2e;
}

/* ─── Title Heading (Paling Laris, etc.) ─── */
.title-heading {
  text-shadow: 0 0 8px #c5d8ea;
}

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

/* ─── Game Card Overlays ─── */
.game-card-overlay,
.game-populer-overlay {
  background: linear-gradient(
    0deg,
    #7ca7d0 0.85%,
    rgba(124, 167, 208, 0.75) 50%,
    rgba(0, 0, 0, 0) 99.15%
  );
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: #7ca7d0;
}

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

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

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

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

/* ─── Newest Games Section (Homepage) ─── */
.newest-game-section .section-title {
  text-shadow: 0 0 8px #c5d8ea;
}

/* ─── Homepage Banner ─── */
.banner-title-heading {
  text-shadow: 0 0 8px #c5d8ea;
}

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

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