/**
 * Funstore Theme — Blue Brand (#013FB9) on Light Surface
 * Background: #f8faff (light blue-white)
 *
 * Color Palette:
 * - Primary accent: #013FB9
 * - Secondary accent: #00328F
 * - Tertiary accent: #002567
 * - Body background: #f8faff
 * - Navbar/surface: #ffffff
 * - Section/card bg: #ffffff
 * - Hover state: #00328F
 * - Text primary: #0d0d0d
 * - Text secondary: #595959
 */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&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: 'Urbanist', sans-serif !important;
}

:root {
  /* ─── Brand Colors ─── */
  --warna_text_1: #0d0d0d;
  --warna_text_5: #a3a3a3;
  --warna_3: #013fb9;
  --warna_5: #013fb9;
  --warna_neon_1: #013fb9;
  --warna_neon_3: #013fb9;
  --warna_neon_4: #013fb9;
  --warna_hover: #00328f;

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

  /* ─── Gradients ─── */
  --warna_6: linear-gradient(90deg, #013fb9 0%, #2f80ff 100%);
  --warna_10: #013fb9;
  --warna_11: #013fb9;

  /* ─── Text Colors ─── */
  /* --warna_text_2: #0d0d0d; */
  --warna_text_2: #ffffff;
  --warna_text_3: #444;
  --warna_text_4: #f4a511;
  --warna_text_7: #013fb9;
  --warna_text_9: #ffffff;

  /* ─── Neon Effects ─── */
  --warna_neon_1: #013fb9;
  --warna_neon_1_hover: #002567;
  --warna_neon_2: #013fb9;
  --warna_neon_2_hover: #00328f;
  --warna_neon_5: #013fb9;

  /* ─── Footer ─── */
  --footer_background: linear-gradient(180deg, rgba(255, 255, 255, 0) 9.59%, #d6e4fe 150%);

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

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

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

  .searchnav {
    background: #e6e6e6;
    color: #0d0d0d;
    max-width: 600px;
    margin-left: auto;
  }

  .searchnav svg {
    color: #0d0d0d;
  }

  .searchnav span {
    color: #0d0d0d;
    font-size: 14px;
  }

  .searchHead {
    background: var(--warna_text_1);
  }

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

  a.nav-item:hover,
  a.nav-item.active,
  a.nav-item.show {
    color: #013fb9;
    text-shadow: 0 0 4px rgba(40, 153, 249, 0.5);
  }

  .searchnavmobile:hover {
    background: #f0f0f0;
  }

  .pencarian-content {
    background: #ffffff;
  }

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

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

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

  .subtile-games-b {
    font-weight: 500;
  }

  /* ─── Buttons ─── */
  .button-style-2 {
    color: #0d0d0d;
    border: 2px solid #0d0d0d;
    background: #ffffff;
    box-shadow:
      0 0 4px 0 #1a1a1a,
      0 0 8px 0 #000 inset;
  }

  .button-style-2:hover {
    color: #013fb9;
    background: #ffffff;
    border: 2px solid #013fb9;
    box-shadow:
      0 4px 0 #2899f9,
      0 0 8px 0 #2899f9 inset;
  }

  /* ─── Footer ─── */

  .footer-content {
    min-width: 520px;
    margin-right: 50px;
  }

  .title-footer {
    color: #0d0d0d;
    text-shadow: 0 0 8px rgba(13, 13, 13, 0.5);
  }

  .text-foot * {
    color: #0d0d0d;
  }

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

  .menu-list li a:hover {
    color: #013fb9;
    font-weight: 600;
  }

  .footerr .sec-2 {
    background: #00133d;
  }

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

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

  .game-breadcrumb .breadcrumb {
    font-size: 14px;
    line-height: 20px;
  }

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

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

  .game-detail-category-name {
    color: #0d0d0d;
    font-weight: 700;
    font-size: 14px;
  }

  .game-detail-page {
    background: #f5f5f5;
  }

  .maintitle {
    line-height: 32px;
  }

  .maintitle2 {
    color: #013fb9;
    font-weight: 400;
  }

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

  .titlsub {
    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,
      #013fb9 0.85%,
      rgba(1, 63, 185, 0.75) 50%,
      rgba(1, 63, 185, 0) 99.15%
    );
  }

  .desc-input * {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #444;
  }

  .radio-nominal + label .method-name,
  .radio-nominal + label .saldo-anda {
    font-size: 14px;
    font-weight: 500;
  }

  .games-content * {
    color: #0d0d0d !important;
  }

  .checkout-ppn,
  .checkout-harga-produk,
  .checkout-biaya-layanan,
  .checkout-biaya-payment-gateway {
    color: #0d0d0d;
    font-weight: 500;
  }

  .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: #013fb9 !important;
  }

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

  .searchgameInstant b {
    color: #0d0d0d;
  }

  .searchgameInstant small {
    color: #0d0d0d;
  }

  .search-container .game-item:hover .searchgameInstant small {
    color: #0d0d0d !important;
  }

  .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
   box is what remains visible (no broken-image glyph). */
  .search-game-img {
    background-color: #013fb9;
  }

  /* ─── Form Controls ─── */
  .form-control {
    background-color: #f5f5f5 !important;
    color: #0d0d0d !important;
    border: none !important;
    font-weight: 500 !important;
    height: 48px;
    font-size: 15px;
  }

  .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;
    font-size: 15px;
  }

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

  .faq-content .faq-body-content {
    background: #e6e6e6;
    color: #0d0d0d;
  }

  .faq-body-content,
  .faq-body-content * {
    color: #0d0d0d !important;
    font-weight: 400;
  }

  .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: #00328f !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 #013FB9;
    background: rgba(255, 255, 255, 0);
    color: #013fb9;
    box-shadow:
      0 0 5px 0 #2899f9,
      0 0 10px 0 #2899f9 inset;
  }

  .label-va svg path {
    fill: #ed2227;
  }

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

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

  .modal-popup .modal-body .modal-titles {
    color: #0d0d0d !important;
    font-weight: 700 !important;
    text-transform: capitalize;
    line-height: 32px;
  }

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

  .modal-popup .modal-footer .modal-button-link {
    background: #013fb9;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
  }

  .modal-popup .modal-footer .modal-button-link:hover {
    background: #002567;
    color: #f5f5f5;
  }
  .modal-popup .modal-body {
    background: #f5f5f5;
  }

  /* ─── Payment Page ─── */
  .payment-container {
    background: linear-gradient(180deg, #d6e4fe -102.81%, rgba(255, 255, 255, 0) 60.06%);
  }

  .payment-container.payment-detail {
    background: #fafafa;
  }

  .payment-container .form-input {
    background: #e6e6e6 !important;
    color: #0d0d0d !important;
    font-size: 15px;
  }

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

  .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: #013fb9;
  }

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

  div:where(.swal2-container) div:where(.swal2-html-container) {
    color: #0d0d0d !important;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
  }

  div:where(.swal2-container) button:where(.swal2-styled):not([disabled]) {
    min-width: 100px;
    height: 40px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
  }

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

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

  .color-expired {
    color: #fff;
  }

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

  .label-va {
    background: #f6b741 !important;
    color: #0d0d0d;
  }

  .order-time {
    color: #fff;
  }

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

  .pay-text-2 {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
  }

  /* ─── CTA / Action Buttons ─── */
  .buy-btn-wrapper .button-style-1 {
    background: #013fb9;
    color: #ffffff;
    font-weight: 700 !important;
  }

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

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

  .button-style-9 {
    background: #013fb9;
    color: #ffffff;
  }

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

  /* ─── 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;
    text-shadow: 0 0 8px rgba(40, 153, 249, 0.5);
  }

  .required-email-data {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #0d0d0d;
  }

  .terms-of-service {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #0d0d0d;
  }

  .terms-of-service .text-warning {
    font-weight: 600;
  }

  .syarat-ketentuan-page {
    background: #fafafa;
    padding-bottom: 24px;
  }

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

  .desc-b * {
    font-size: 16px !important;
    line-height: 24px;
    font-weight: 500;
  }

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

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

  .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 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: #013fb9;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #00328f;
  }

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

  .navbar-brand {
    margin-right: 20px;
  }

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

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

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

  .searchHead .searIn {
    color: #0d0d0d;
    font-weight: 400;
    font-size: 15px;
  }

  /* ─── 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 {
    gap: 24px;
  }

  .banner-slide-container .col-banner-1 .title-banner {
    color: #0d0d0d;
    font-size: 24px;
    line-height: 32px;
  }

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

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

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

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