/* RTPX Smart UI runtime v1
   Adapted from audited lazy-render, skeleton, menu-tab overflow, and pagination progress patterns.
   No Vue/Swiper bundle code is imported here. */
:root{
  --rtpx-smart-skeleton-base: color-mix(in srgb, var(--surface, #11131a) 74%, #ffffff 8%);
  --rtpx-smart-skeleton-line: linear-gradient(90deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.115) 46%, rgba(255,255,255,.045) 82%);
  --rtpx-smart-focus: color-mix(in srgb, var(--rtpx-button-accent, var(--accent, #12b857)) 72%, transparent);
  --rtpx-smart-progress-track: color-mix(in srgb, var(--text, #ffffff) 10%, transparent);
  --rtpx-smart-progress-fill: var(--rtpx-button-accent, var(--accent, #12b857));
  --rtpx-smart-progress-height: 2px;
}

.rtpx-smart-skeleton,
.rtpx-shell-skeleton-card,
.news-skeleton-card,
.game-pola-loading,
[data-rtpx-skeleton="true"]{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--rtpx-smart-skeleton-base);
}

.rtpx-smart-skeleton::after,
.rtpx-shell-skeleton-card::after,
.news-skeleton-card::after,
.game-pola-loading::after,
[data-rtpx-skeleton="true"]::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:var(--rtpx-smart-skeleton-line);
  background-size:220% 100%;
  animation:rtpxSmartSkeletonShine 1.8s linear infinite;
}

@keyframes rtpxSmartSkeletonShine{
  0%{background-position-x:100%}
  56%,100%{background-position-x:-100%}
}

@media (prefers-reduced-motion:reduce){
  .rtpx-smart-skeleton::after,
  .rtpx-shell-skeleton-card::after,
  .news-skeleton-card::after,
  .game-pola-loading::after,
  [data-rtpx-skeleton="true"]::after{
    animation:none;
  }
}

html.is-low-end-runtime .rtpx-smart-skeleton::after,
html.is-low-end-runtime .rtpx-shell-skeleton-card::after,
html.is-low-end-runtime .news-skeleton-card::after,
html.is-low-end-runtime .game-pola-loading::after,
html.is-save-data-runtime .rtpx-smart-skeleton::after,
html.is-save-data-runtime .rtpx-shell-skeleton-card::after,
html.is-save-data-runtime .news-skeleton-card::after,
html.is-save-data-runtime .game-pola-loading::after{
  animation:none;
  opacity:.46;
}

.rtpx-media-loading{
  position:relative;
  overflow:hidden;
  background:var(--rtpx-smart-skeleton-base);
}

.rtpx-media-loading::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:var(--rtpx-smart-skeleton-line);
  background-size:220% 100%;
  animation:rtpxSmartSkeletonShine 1.8s linear infinite;
}

.rtpx-media-loading > img,
.rtpx-media-loading picture > img{
  opacity:.18;
}

.rtpx-media-ready::after{
  content:none;
}

.rtpx-media-ready > img,
.rtpx-media-ready picture > img{
  opacity:1;
}

[data-rtpx-smart-tab="true"]{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .18s ease, color .18s ease, opacity .16s ease, border-color .18s ease;
}

[data-rtpx-smart-tab="true"] :is(span,.provider-chip__label,.rtpx-section-action-label,.button-label){
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

:is(.category-chip,.provider-chip,.provider-filter-button,.catalog-tab,.section-action-link,.rtpx-section-action-button,.guide-chip,.jackpot-pill)[data-rtpx-overflow="true"]{
  text-wrap:nowrap;
}

:is(.category-chip,.provider-chip,.provider-filter-button,.catalog-tab,.section-action-link,.rtpx-section-action-button,.guide-chip,.jackpot-pill):focus-visible{
  outline:2px solid var(--rtpx-smart-focus);
  outline-offset:2px;
}

:is(.category-chip,.provider-chip,.provider-filter-button,.catalog-tab,.section-action-link,.rtpx-section-action-button,.guide-chip,.jackpot-pill):active{
  opacity:.84;
}

.rtpx-lazy-section{
  content-visibility:visible;
  contain-intrinsic-size:auto;
  overflow-anchor:none;
}

.rtpx-lazy-section[data-rtpx-lazy-state="pending"]{
  contain:layout style;
}

.rtpx-lazy-section[data-rtpx-lazy-state="near"],
.rtpx-lazy-section[data-rtpx-lazy-state="ready"]{
  contain:layout style;
}

.rtpx-rail-progress{
  position:absolute;
  z-index:6;
  inset-inline:clamp(10px,1.2vw,18px);
  bottom:2px;
  height:var(--rtpx-smart-progress-height);
  border-radius:999px;
  background:var(--rtpx-smart-progress-track);
  pointer-events:none;
  opacity:0;
  transform:translateZ(0);
  transition:opacity .18s ease;
}

.rtpx-rail-progress[data-visible="true"]{
  opacity:.72;
}

.rtpx-rail-progress__fill{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:var(--rtpx-smart-progress-fill);
  transform:scaleX(var(--rtpx-progress-value,.001));
  transform-origin:left center;
  transition:transform .28s ease;
}

[dir="rtl"] .rtpx-rail-progress__fill{
  transform-origin:right center;
}

:is(.content-row,.featured-carousel-stage,.api-content-stage,.news-carousel-stage,.rtpx-jackpot-total-section,.jackpot-top20-stage,.game-pola-top20-stage,.jackpot-related-stage)[data-rtpx-progress-host="true"]{
  position:relative;
}

@media (max-width:640px){
  .rtpx-rail-progress{
    inset-inline:10px;
    bottom:1px;
  }
}


/* smart-ui-progress-hidden-v15 */
.rtpx-rail-progress,
.rtpx-rail-progress__fill{
  display:none;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}


/* global-header-footer-shell-skeleton-v16
   Skeleton shimmer untuk konten global header/footer saat first paint dan sebelum settings/logo selesai sinkron.
   Tidak mengubah ukuran layout final; hanya memberi shimmer transparan pada elemen yang sudah ada. */
:root{
  --rtpx-shell-skeleton-bg: color-mix(in srgb, var(--theme-text, #ffffff) 7%, transparent);
  --rtpx-shell-skeleton-bg-strong: color-mix(in srgb, var(--theme-text, #ffffff) 11%, transparent);
  --rtpx-shell-skeleton-border: color-mix(in srgb, var(--theme-text, #ffffff) 9%, transparent);
  --rtpx-shell-skeleton-radius: 999px;
}

html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) :is(
  .global-header .property-logo,
  .global-header .main-nav__link,
  .global-header .main-nav__button,
  .global-header .dropdown__button,
  .global-header .mobile-signin-button,
  .global-header .menu-toggle,
  .global-footer .footer-property-logo,
  .global-footer .footer-social,
  .global-footer .footer-column-heading,
  .global-footer .footer-link-list a,
  .global-footer [data-footer-legal],
  .global-footer [data-footer-copyright],
  .global-footer .footer-back-top
){
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:transparent;
  text-shadow:none;
  background:var(--rtpx-shell-skeleton-bg);
  border-color:var(--rtpx-shell-skeleton-border);
  box-shadow:none;
}

html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) :is(
  .global-header .property-logo,
  .global-footer .footer-property-logo
){
  border-radius:12px;
  min-height:min(var(--rtpx-header-logo-max-height, 38px), calc(var(--header-h, 72px) - 14px));
  background:var(--rtpx-shell-skeleton-bg-strong);
}

html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) .global-header .property-logo{
  width:clamp(116px,var(--rtpx-header-logo-width,152px),min(34vw,260px));
}

html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) .global-footer .footer-property-logo{
  width:clamp(118px,12vw,170px);
  min-width:clamp(118px,12vw,170px);
}

html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) :is(
  .global-header .property-logo img,
  .global-footer .footer-property-logo img,
  .global-footer .footer-social img,
  .global-header svg,
  .global-footer svg
){
  opacity:0;
  visibility:hidden;
}

html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) :is(
  .global-header .main-nav__link,
  .global-header .main-nav__button,
  .global-header .dropdown__button,
  .global-header .mobile-signin-button,
  .global-footer .footer-link-list a,
  .global-footer .footer-back-top
){
  border-radius:var(--rtpx-shell-skeleton-radius);
}

html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) .global-header .menu-toggle{
  border-radius:12px;
  background:var(--rtpx-shell-skeleton-bg-strong);
}

html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) .global-header .menu-toggle :is(.menu-toggle-line,.menu-toggle-glyph){
  opacity:0;
}

html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) .global-footer .footer-social{
  display:inline-flex;
  width:clamp(148px,14vw,230px);
  min-width:clamp(148px,14vw,230px);
  min-height:34px;
  border-radius:var(--rtpx-shell-skeleton-radius);
  background:var(--rtpx-shell-skeleton-bg);
}

html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) .global-footer .footer-column-heading{
  display:inline-flex;
  min-width:clamp(72px,8vw,128px);
  min-height:18px;
  border-radius:var(--rtpx-shell-skeleton-radius);
}

html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) .global-footer .footer-link-list a{
  min-height:18px;
  width:fit-content;
  min-width:clamp(104px,12vw,176px);
  max-width:100%;
  padding-inline:.01px;
}

html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) .global-footer .footer-link-list a:nth-child(2n){
  min-width:clamp(82px,10vw,146px);
}

html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) .global-footer [data-footer-legal]{
  min-height:3.2em;
  border-radius:14px;
  background:
    linear-gradient(var(--rtpx-shell-skeleton-bg),var(--rtpx-shell-skeleton-bg)) left top / 100% 1.05em no-repeat,
    linear-gradient(var(--rtpx-shell-skeleton-bg),var(--rtpx-shell-skeleton-bg)) left 1.45em / 88% 1.05em no-repeat,
    linear-gradient(var(--rtpx-shell-skeleton-bg),var(--rtpx-shell-skeleton-bg)) left 2.9em / 62% 1.05em no-repeat;
}

html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) .global-footer [data-footer-copyright]{
  min-height:1.35em;
  border-radius:var(--rtpx-shell-skeleton-radius);
  background:var(--rtpx-shell-skeleton-bg);
}

html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) :is(
  .global-header .property-logo,
  .global-header .main-nav__link,
  .global-header .main-nav__button,
  .global-header .dropdown__button,
  .global-header .mobile-signin-button,
  .global-header .menu-toggle,
  .global-footer .footer-property-logo,
  .global-footer .footer-social,
  .global-footer .footer-column-heading,
  .global-footer .footer-link-list a,
  .global-footer [data-footer-legal],
  .global-footer [data-footer-copyright],
  .global-footer .footer-back-top
)::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:var(--rtpx-smart-skeleton-line);
  background-size:220% 100%;
  animation:rtpxSmartSkeletonShine 1.8s linear infinite;
}

html[data-rtpx-shell-skeleton="ready"] body:not(.admin-page) :is(.global-header,.global-footer){
  --rtpx-shell-skeleton-bg: transparent;
}

@media (prefers-reduced-motion:reduce){
  html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) :is(
    .global-header .property-logo,
    .global-header .main-nav__link,
    .global-header .main-nav__button,
    .global-header .dropdown__button,
    .global-header .mobile-signin-button,
    .global-header .menu-toggle,
    .global-footer .footer-property-logo,
    .global-footer .footer-social,
    .global-footer .footer-column-heading,
    .global-footer .footer-link-list a,
    .global-footer [data-footer-legal],
    .global-footer [data-footer-copyright],
    .global-footer .footer-back-top
  )::after{animation:none;opacity:.46;}
}

@media (max-width:980px){
  html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) .global-header .main-nav__link,
  html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) .global-header .main-nav__button{
    min-height:38px;
    width:100%;
    justify-content:flex-start;
  }
  html[data-rtpx-shell-skeleton="loading"] body:not(.admin-page) .global-footer .footer-social{
    width:min(220px,52vw);
    min-width:min(220px,52vw);
  }
}