/* ================================================================
   FINAL VISIBILITY + LAYOUT FIXES
   Fokus: memastikan seluruh teks hero, timer, nav, card, modal,
   footer, dan mobile tetap terlihat setelah legacy CSS dimuat.
   ================================================================ */

/* HERO CLOCK: jangan mewarisi layout grid legacy */
.live-clock-dashboard{
  width:100% !important;
  max-width:720px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
  margin:0 auto !important;
  padding:0 !important;
  border-radius:18px !important;
  overflow:hidden !important;
}

.clock-panel-top{
  width:100% !important;
  min-height:44px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 16px !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,242,235,.92)) !important;
  color:#756c58 !important;
  -webkit-text-fill-color:#756c58 !important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,242,235,.92)) !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  font-size:10px !important;
  line-height:1.35 !important;
  font-weight:900 !important;
  letter-spacing:.85px !important;
  text-transform:uppercase !important;
  white-space:normal !important;
  text-align:center !important;
  border-bottom:1px solid rgba(116,109,92,.10) !important;
}

#live-date-text{
  display:block !important;
  color:#756c58 !important;
  -webkit-text-fill-color:#756c58 !important;
  opacity:1 !important;
  visibility:visible !important;
  max-width:100% !important;
}

.clock-panel-bottom{
  width:100% !important;
  min-height:56px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:row !important;
  gap:14px !important;
  padding:11px 16px !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(135deg,#3d3a33 0%,#27251f 100%) !important;
}

.timer-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  max-width:170px !important;
  color:#efe8d7 !important;
  -webkit-text-fill-color:#efe8d7 !important;
  font-size:9px !important;
  line-height:1.3 !important;
  font-weight:900 !important;
  letter-spacing:1.05px !important;
  text-align:center !important;
}

.neon-timer-digital{
  display:inline-block !important;
  min-width:128px !important;
  color:#f1d486 !important;
  -webkit-text-fill-color:#f1d486 !important;
  opacity:1 !important;
  visibility:visible !important;
  font-size:23px !important;
  line-height:1 !important;
  letter-spacing:1.5px !important;
  font-weight:950 !important;
  font-variant-numeric:tabular-nums !important;
  white-space:nowrap !important;
  text-shadow:0 0 10px rgba(241,212,134,.18) !important;
}

/* HERO COPY: guard against legacy transparency / clipping */
.hero-copy,
.hero-copy h1,
.hero-copy p,
.hero-kicker,
.hero-stat,
.hero-stat strong,
.hero-stat span,
.hero-status,
.hero-mini-note{
  opacity:1 !important;
  visibility:visible !important;
}
.hero-copy h1{
  -webkit-text-fill-color:#22211e !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
}
.hero-copy h1 span{
  -webkit-text-fill-color:transparent !important;
  background:linear-gradient(135deg,#6f5620,#caa957 45%,#8b6a22) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
.hero-copy p{color:#5f5b54 !important;}
.hero-status{color:#716d65 !important;}
.hero-mini-note{color:#7b776e !important;}

/* TICKER / PROVIDER NAV TEXT */
.win-ticker-bar,
.ticker-kapsul-item,
.ticker-kapsul-item b,
.provider-nav-tabs,
.tab-btn,
.provider-section h2,
.provider-section h2::after{
  opacity:1 !important;
  visibility:visible !important;
}

/* GAME CARD TEXT */
.game-info,
.game-info h3,
.rtp-text,
.btn-mainkan,
.btn-pola,
.badge-status{
  opacity:1 !important;
  visibility:visible !important;
}
.game-info h3{
  color:#292722 !important;
  -webkit-text-fill-color:#292722 !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
}
.rtp-text{color:#fff !important;-webkit-text-fill-color:#fff !important;}

/* MODAL TEXT */
.modal-box,
.modal-header-text h2,
.modal-header-text h4,
.modal-box p,
.modal-box span,
.pola-label,
.pola-number-display,
.jam-title,
.jam-digital-text,
.modal-action-btn{
  opacity:1 !important;
  visibility:visible !important;
}

/* FOOTER TEXT */
.seo-footer,
.seo-footer h3,
.seo-footer p,
.seo-footer a,
.seo-table th,
.seo-table td,
.footer-bottom p{
  opacity:1 !important;
  visibility:visible !important;
}
.seo-footer p,.seo-footer td{color:#65615a !important;}
.seo-footer h3{color:#35342e !important;}

/* BOTTOM NAV TEXT */
.floating-bottom-nav,
.floating-bottom-nav .nav-item,
.floating-bottom-nav .nav-text{
  opacity:1 !important;
  visibility:visible !important;
}

/* MOBILE */
@media (max-width:560px){
  .live-clock-dashboard{max-width:100% !important;}
  .clock-panel-top{min-height:42px !important;padding:9px 12px !important;font-size:8px !important;letter-spacing:.6px !important;}
  .clock-panel-bottom{min-height:58px !important;padding:10px 12px !important;gap:8px !important;}
  .timer-label{max-width:125px !important;font-size:8px !important;letter-spacing:.8px !important;}
  .neon-timer-digital{min-width:112px !important;font-size:19px !important;letter-spacing:1px !important;}
  .hero-copy h1{font-size:26px !important;}
  .hero-copy p{font-size:11px !important;line-height:1.6 !important;}
  .hero-stat strong{font-size:12px !important;}
  .hero-stat span{font-size:8px !important;}
}

@media (max-width:390px){
  .clock-panel-top{font-size:7.5px !important;}
  .clock-panel-bottom{flex-direction:column !important;gap:5px !important;}
  .timer-label{max-width:none !important;}
  .neon-timer-digital{font-size:18px !important;}
}

/* ================================================================
   REFINEMENT PASS — MODAL + FOOTER
   ================================================================ */

/* ---------- PREMIUM GAME MODAL ---------- */
.modal-overlay{
  background:rgba(20,19,16,.64) !important;
  backdrop-filter:blur(18px) saturate(.82) !important;
  -webkit-backdrop-filter:blur(18px) saturate(.82) !important;
  padding:18px !important;
}
.modal-box{
  width:min(720px,calc(100vw - 30px)) !important;
  max-width:720px !important;
  padding:24px !important;
  border-radius:24px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(246,245,241,.985) 62%,rgba(238,236,228,.98)) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:
    0 34px 80px rgba(0,0,0,.28),
    0 0 0 1px rgba(129,108,60,.08),
    inset 0 1px 0 #fff !important;
  transform:translateY(8px) scale(.98) !important;
}
.modal-overlay.modal-open .modal-box{transform:translateY(0) scale(1) !important}
.modal-close-btn{
  top:14px !important;
  right:14px !important;
  width:30px !important;
  height:30px !important;
  border-radius:50% !important;
  line-height:27px !important;
  font-size:16px !important;
  background:rgba(244,243,239,.95) !important;
  color:#77736a !important;
  border:1px solid rgba(116,109,93,.16) !important;
  box-shadow:0 4px 10px rgba(45,42,34,.06) !important;
}
.modal-close-btn:hover{background:#b88e36 !important;color:#fff !important;border-color:#b88e36 !important}
.modal-header-text{
  margin:0 40px 18px !important;
  padding:0 0 14px !important;
  border-bottom:1px solid rgba(133,119,86,.13) !important;
}
.modal-header-text h2{
  margin:0 !important;
  font-size:21px !important;
  line-height:1.15 !important;
  font-weight:950 !important;
  letter-spacing:-.35px !important;
  color:#24231f !important;
}
.modal-header-text h4{
  margin:5px 0 0 !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:850 !important;
  letter-spacing:.55px !important;
  text-transform:none !important;
  color:#96732c !important;
}
.modal-split-layout{
  grid-template-columns:minmax(0,1.04fr) minmax(0,1fr) !important;
  gap:14px !important;
  margin-bottom:14px !important;
  align-items:stretch !important;
}
.modal-left-poster{
  min-height:0 !important;
  height:168px !important;
  aspect-ratio:auto !important;
  border-radius:15px !important;
  overflow:hidden !important;
  background:linear-gradient(145deg,#f0efeb,#dddcd6) !important;
  border:1px solid rgba(125,117,101,.18) !important;
  box-shadow:0 12px 24px rgba(50,47,39,.10),inset 0 1px 0 #fff !important;
}
.modal-left-poster img{
  object-fit:cover !important;
}
.modal-right-info{
  min-height:168px !important;
  height:auto !important;
}
.pola-dashboard-grid{gap:8px !important}
.pola-non-pragmatic-container,
.pola-pragmatic-container,
.pola-empty-box{
  border-radius:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 8px 18px rgba(20,19,18,.10) !important;
}
.pola-non-pragmatic-container{
  background:linear-gradient(180deg,#11131a,#0b0d12) !important;
  border-color:#252934 !important;
  padding:12px !important;
}
.pola-non-pragmatic-container > div[style*="Courier New"]{
  font-size:12px !important;
  line-height:1.25 !important;
}
.jam-gacor-box{
  margin:0 0 14px !important;
  padding:11px 14px !important;
  min-height:54px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:4px !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#fffaf0,#fbf4e1) !important;
  border:1px solid rgba(175,139,55,.28) !important;
  box-shadow:inset 0 1px 0 #fff,0 7px 16px rgba(79,66,35,.05) !important;
}
.jam-title{
  color:#916d24 !important;
  font-size:9px !important;
  line-height:1.15 !important;
  font-weight:950 !important;
  letter-spacing:1px !important;
  text-shadow:none !important;
}
.jam-digital-text{
  color:#7b5f27 !important;
  -webkit-text-fill-color:#7b5f27 !important;
  font-size:15px !important;
  line-height:1.15 !important;
  font-weight:950 !important;
  letter-spacing:1px !important;
  text-shadow:none !important;
}
.modal-action-btn{
  min-height:44px !important;
  padding:12px 18px !important;
  border-radius:12px !important;
  font-size:11px !important;
  letter-spacing:1px !important;
  background:linear-gradient(135deg,#b88d35 0%,#d7ba64 55%,#e5ce8b 100%) !important;
  color:#261f12 !important;
  border:1px solid rgba(129,98,27,.25) !important;
  box-shadow:0 10px 20px rgba(145,111,39,.15),inset 0 1px 0 rgba(255,255,255,.45) !important;
}
.modal-action-btn:hover{transform:translateY(-1px) !important;box-shadow:0 13px 24px rgba(145,111,39,.20),inset 0 1px 0 rgba(255,255,255,.55) !important}

/* ---------- PREMIUM FOOTER ---------- */
.seo-footer{
  max-width:1240px !important;
  margin:28px auto 0 !important;
  padding:28px 30px 16px !important;
  border-radius:24px 24px 0 0 !important;
  background:linear-gradient(180deg,#f5f4f0 0%,#ecebe6 100%) !important;
  border:1px solid rgba(118,113,101,.13) !important;
  box-shadow:0 -10px 30px rgba(45,42,35,.05),inset 0 1px 0 #fff !important;
}
.footer-table-container,
.footer-seo-intro,
.footer-container{
  max-width:1000px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.footer-table-container{
  margin-bottom:26px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.footer-table-container h3{
  margin:0 0 10px !important;
  font-size:12px !important;
  font-weight:950 !important;
  letter-spacing:.8px !important;
  text-transform:uppercase !important;
  color:#37342f !important;
}
.seo-table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  overflow:hidden !important;
  border-radius:11px !important;
  border:1px solid rgba(123,116,98,.14) !important;
  box-shadow:0 8px 20px rgba(50,47,39,.05),inset 0 1px 0 #fff !important;
}
.seo-table th{
  padding:10px 14px !important;
  background:linear-gradient(180deg,#eee9dc,#e5dfd0) !important;
  color:#574921 !important;
  font-size:9px !important;
  font-weight:950 !important;
  letter-spacing:.6px !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}
.seo-table td{
  padding:11px 14px !important;
  background:rgba(255,255,255,.74) !important;
  color:#69655c !important;
  font-size:10px !important;
  line-height:1.45 !important;
}
.footer-seo-intro{
  margin-bottom:26px !important;
  padding:15px 17px !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.68) !important;
  border:1px solid rgba(124,118,103,.12) !important;
  border-left:3px solid #bd9945 !important;
  box-shadow:inset 0 1px 0 #fff,0 6px 18px rgba(46,44,38,.04) !important;
}
.footer-seo-intro p{
  margin:0 !important;
  font-size:10.5px !important;
  line-height:1.72 !important;
  color:#656158 !important;
  text-align:left !important;
}
.footer-container{
  display:grid !important;
  grid-template-columns:1.18fr .82fr 1.18fr !important;
  gap:0 !important;
  align-items:stretch !important;
  border:1px solid rgba(124,118,103,.11) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.42) !important;
  box-shadow:inset 0 1px 0 #fff,0 7px 18px rgba(46,44,38,.035) !important;
}
.footer-block{
  min-height:142px !important;
  padding:18px 18px 17px !important;
  border:none !important;
  border-radius:0 !important;
  background:rgba(255,255,255,.56) !important;
  box-shadow:none !important;
}
.footer-block + .footer-block{
  border-left:1px solid rgba(124,118,103,.10) !important;
}
.footer-block h3{
  position:relative !important;
  margin:0 0 12px !important;
  padding:0 0 10px !important;
  font-size:11px !important;
  font-weight:950 !important;
  letter-spacing:.8px !important;
  text-transform:uppercase !important;
  color:#3d3a34 !important;
}
.footer-block h3::after{
  width:30px !important;
  height:2px !important;
  bottom:0 !important;
  left:0 !important;
  background:linear-gradient(90deg,#ae8531,#e5ca7d) !important;
  box-shadow:none !important;
}
.footer-block p,
.footer-links li a{
  font-size:10px !important;
  line-height:1.85 !important;
  color:#66625a !important;
}
.footer-block p{margin:0 !important}
.footer-links{margin:0 !important;padding:0 !important}
.footer-links li{margin:0 0 6px !important}
.footer-links li:last-child{margin-bottom:0 !important}
.footer-links li a{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  font-weight:800 !important;
  text-decoration:none !important;
  color:#7d642f !important;
}
.footer-links li a::before{content:'›';font-size:12px;color:#b38a38}
.footer-links li a:hover{color:#a17a29 !important;transform:translateX(2px) !important}
.footer-bottom{
  max-width:1000px !important;
  margin:18px auto 0 !important;
  padding:14px 0 2px !important;
  border-top:1px solid rgba(118,113,101,.12) !important;
  text-align:center !important;
}
.footer-bottom p{
  margin:0 !important;
  color:#89857c !important;
  font-size:9px !important;
  letter-spacing:.2px !important;
}

@media (max-width:760px){
  .modal-box{width:min(560px,calc(100vw - 20px)) !important;padding:19px !important}
  .modal-header-text{margin-left:34px !important;margin-right:34px !important;margin-bottom:15px !important}
  .modal-header-text h2{font-size:19px !important}
  .modal-split-layout{grid-template-columns:1fr !important;gap:11px !important}
  .modal-left-poster{height:190px !important}
  .modal-right-info{min-height:0 !important}
  .jam-gacor-box{margin-bottom:11px !important}
  .footer-container{grid-template-columns:1fr !important}
  .footer-block{min-height:auto !important}
  .footer-block + .footer-block{border-left:none !important;border-top:1px solid rgba(124,118,103,.10) !important}
  .seo-table{display:block;overflow-x:auto;white-space:nowrap}
  .seo-table table{min-width:640px}
}

@media (max-width:560px){
  .seo-footer{padding:22px 14px 14px !important;border-radius:20px 20px 0 0 !important}
  .modal-overlay{padding:10px !important}
  .modal-box{width:calc(100vw - 20px) !important;padding:16px !important;border-radius:20px !important}
  .modal-header-text{margin:0 31px 13px !important;padding-bottom:11px !important}
  .modal-header-text h2{font-size:18px !important}
  .modal-header-text h4{font-size:10px !important}
  .modal-left-poster{height:172px !important}
  .jam-gacor-box{min-height:50px !important;padding:10px 12px !important}
  .jam-digital-text{font-size:13px !important}
  .modal-action-btn{min-height:42px !important;font-size:10px !important}
  .footer-seo-intro p,.footer-block p,.footer-links li a{font-size:10px !important}
}