/* 12Cuci visual layer. Loaded after the preserved structural stylesheet. */
:root {
  --forest: #009999;    /* primary teal — CTA buttons, headings, active nav */
  --evergreen: #004040;  /* dark teal — nav/footer/side-nav surfaces */
  --brown: #181818;      /* secondary/outline role — reused as charcoal (no fourth hue) */
  --gold: #F0B000;       /* gold accent — borders, focus states, slider controls */
  --cream: #FFFDF5;      /* readable light content surface */
  --charcoal: #181818;   /* dark text on light surfaces */
}

body { background: var(--cream); color: var(--charcoal); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Local icon glyphs keep the shell self-contained in offline preview. */
.fa::before,
.fas::before,
.fab::before { display: inline-block; width: 1.1em; text-align: center; font-style: normal; }
.fa-home::before { content: '\2302'; }
.fa-star::before { content: '\2605'; }
.fa-user::before { content: '\25CF'; }
.fa-calendar-alt::before { content: '\25A3'; }
.fa-eye::before { content: '\25C9'; }
.fa-tags::before { content: '\25C6'; }
.fa-facebook-f::before { content: 'f'; font-weight: 700; }
.fa-twitter::before { content: 'X'; font-weight: 700; }
.fa-whatsapp::before { content: '\25C9'; }

.header { background: var(--cream); border-bottom: 1px solid rgba(240,176,0,.45); }
.logo img { width: auto; max-width: 100%; height: auto; max-height: 70px; }
.nav-container { background: var(--evergreen); border-top-color: rgba(240,176,0,.5); }
.nav-link { color: var(--white); }
.nav-link:hover { color: var(--gold); }
.nav-icon { color: var(--gold); }

.btn-register,
.btn-join-now { background: var(--forest); color: var(--white); border: 1px solid var(--forest); }
.btn-register:hover,
.btn-join-now:hover { background: var(--evergreen); color: var(--white); box-shadow: 0 5px 14px rgba(0,64,64,.28); }
.btn-login { color: var(--charcoal); border-color: var(--charcoal); background: transparent; }
.btn-login:hover { background: var(--charcoal); color: var(--white); }

.mobile-auth-buttons { background: var(--evergreen); border-top-color: rgba(240,176,0,.5); }
.mobile-auth-buttons .btn-login { color: var(--white); border-color: var(--gold); }
.side-nav { background: var(--cream); }
.side-nav .nav-link { color: var(--charcoal); }
.side-nav .nav-link:hover { color: var(--evergreen); background: rgba(0,153,153,.1); }
.side-nav .nav-icon,
.side-nav .fa { color: var(--forest); }

.games-subnav { background: var(--charcoal); border-top-color: rgba(240,176,0,.25); }
.games-subnav-label { color: var(--gold); }
.games-subnav-list li a { color: var(--white); }
.games-subnav-list li a:hover { color: var(--gold); }

.side-nav-games-toggle { color: var(--charcoal); }
.side-nav-games-toggle:hover,
.side-nav-games-toggle[aria-expanded="true"] { background: rgba(0,0,0,.06); }
.side-nav-games-arrow { color: var(--forest); }
.side-nav-games-list { background: rgba(0,153,153,.06); }
.side-nav-games-list li a { color: var(--charcoal); }
.side-nav-games-list li a:hover { color: var(--evergreen); background: rgba(0,153,153,.12); }

.banner-section .swiper { background: var(--evergreen); border: 1px solid rgba(240,176,0,.5); }
.banner-section .swiper-slide img { object-fit: contain; object-position: center; background: var(--evergreen); }
.banner-section .swiper-button-next,
.banner-section .swiper-button-prev { color: var(--gold); text-shadow: 0 2px 5px rgba(0,0,0,.65); }
.banner-section .swiper-pagination-bullet { background: var(--cream); }
.banner-section .swiper-pagination-bullet-active { background: var(--gold); }

.stat-item,
.intro-section,
.body-text-section,
.article-card,
.game-cat-card,
.about-section,
.list-article-card,
.article-body,
.sidebar-widget { border-color: rgba(240,176,0,.28); }
.stat-item:hover,
.article-card:hover,
.game-cat-card:hover,
.list-article-card:hover { border-color: var(--gold); }
.stat-icon,
.cat-icon { background: var(--evergreen); color: var(--white); box-shadow: inset 0 0 0 1px rgba(240,176,0,.65); }

.intro-section h1,
.body-text-section h2,
.about-section h2,
.article-title { color: var(--evergreen); }
.body-text-section h2 { font-size: 20px; margin: 20px 0 10px; }
.body-text-section h2:first-child { margin-top: 0; }
.articles-section h2,
.game-categories-section h2 { border-left-color: var(--forest); }

.wide-banner { background: var(--evergreen); border: 1px solid rgba(240,176,0,.55); box-shadow: var(--shadow-md); }
.wide-banner img { object-fit: contain; }
.cat-stat-box,
.join-now-box,
.seo-cta { background: rgba(0,153,153,.08); border-color: rgba(0,153,153,.25); }
.cat-tag { background: var(--cream); }
.read-more-btn { background: var(--forest); color: var(--white); }
.read-more-btn:hover { background: var(--evergreen); color: var(--white); }

.site-footer { background: var(--evergreen); border-top: 3px solid var(--gold); }
.footer-col { background: var(--cream); border: 1px solid rgba(240,176,0,.35); }
.footer-info-block a,
.footer-links li a:hover { color: var(--forest); }
.footer-bottom p,
.footer-bottom a { color: var(--white); }
.footer-bottom a:hover { color: var(--gold); }
.placeholder-card > a { cursor: default; }
.placeholder-card img { background: var(--cream); }
.is-logo-fallback {
  object-fit: contain !important;
  background: var(--charcoal, #181818);
  padding: 1rem;
}

.article-feature-image {
  margin: 1.25rem 0 1.75rem;
  border-radius: 14px;
  overflow: hidden;
  background: var(--charcoal, #181818);
  aspect-ratio: 16 / 9;
}

.article-feature-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Functional fallback when the external Swiper bundle is unavailable. */
.slider-fallback { position: relative; }
.slider-fallback .swiper-wrapper { display: block; height: 100%; }
.slider-fallback .swiper-slide { display: none; height: 100%; }
.slider-fallback .swiper-slide.is-active { display: flex; }
.slider-fallback .swiper-pagination { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 5; display: flex; justify-content: center; gap: 7px; }
.slider-fallback .swiper-pagination button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--cream); opacity: .55; cursor: pointer; }
.slider-fallback .swiper-pagination button.is-active { background: var(--gold); opacity: 1; }
.slider-fallback .swiper-button-next::after { content: '›'; }
.slider-fallback .swiper-button-prev::after { content: '‹'; }
.slider-fallback .swiper-button-next,
.slider-fallback .swiper-button-prev { position: absolute; top: 50%; z-index: 6; width: 42px; height: 42px; margin-top: -21px; padding: 0; border: 0; background: rgba(24,24,24,.45); border-radius: 50%; color: var(--gold); font-size: 38px; line-height: 38px; cursor: pointer; }
.slider-fallback .swiper-button-next { right: 12px; }
.slider-fallback .swiper-button-prev { left: 12px; }

@media (max-width: 768px) {
  .logo img { max-height: 44px; }
  .menu-toggle { color: var(--evergreen); border-color: rgba(0,64,64,.3); }
}

@media (max-width: 576px) {
  .banner-section .swiper-slide img { object-fit: contain; }
}

/* Content-body tables (homepage + article copy) */
.table-scroll { overflow-x: auto; margin: 16px 0; }
.table-scroll table,
.article-content table { border-collapse: collapse; width: 100%; min-width: 480px; }
.table-scroll th, .table-scroll td,
.article-content th, .article-content td { border: 1px solid rgba(0,64,64,.25); padding: 8px 12px; text-align: left; font-size: 14px; }
.table-scroll th, .article-content th { background: var(--evergreen); color: var(--cream); }
.article-content { overflow-x: auto; }

/* Allow grid items to shrink below their content's intrinsic width so the
   overflow-x:auto rules above actually clip wide tables instead of the
   whole grid column stretching past the viewport on mobile. */
.article-main, .list-main { min-width: 0; }

a.game-cat-card { display: block; color: inherit; text-decoration: none; }

/* ---- GAME PROVIDERS GRID (new homepage section, no reference precedent) ----
   Reuses the existing .article-grid / .article-card visual pattern at a
   smaller tile size rather than inventing a new layout primitive. */
.providers-section { margin-bottom: 26px; }
.providers-section h2 {
  font-size: 20px; font-weight: 800; color: var(--black);
  margin-bottom: 16px; padding-left: 12px; border-left: 4px solid var(--forest);
}
.providers-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px;
}
.provider-card {
  background: var(--white);
  border: 1px solid rgba(240,176,0,.28);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.provider-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-md); }
.provider-card img { width: 100%; height: 130px; object-fit: cover; display: block; }
.provider-card span { display: block; text-align: center; font-size: 12px; font-weight: 700; padding: 6px 4px; color: var(--charcoal); }

@media (max-width: 992px) {
  .providers-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 576px) {
  .providers-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
  .provider-card img { height: 100px; }
}

/* ---- PAYMENT / TRUST STRIP (footer) ---- */
.payment-strip { margin: 24px 0 8px; text-align: center; }
.payment-strip img.payment-banner { max-width: 100%; height: auto; margin: 0 auto 12px; border-radius: var(--radius-sm); }
.payment-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.payment-icons img { width: 42px; height: 42px; object-fit: contain; background: var(--white); border-radius: 8px; padding: 4px; }