/*
Theme Name: PaitoPCSO Theme
Theme URI: https://paitopcso.com
Author: PaitoPCSO Developer
Author URI: https://paitopcso.com
Description: WordPress theme for Paito Warna lottery results - dark luxury design with 15 pasaran support, programmatic SEO, AJAX-powered color tables, and live results.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paitopcso
*/

/* ━━━ RESET & BASE ━━━ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg-primary:#0A0C10;
  --bg-secondary:#12151B;
  --bg-card:#181C24;
  --bg-table:#0F1218;
  --gold:#C9A84C;
  --gold-light:#E8D48B;
  --gold-dark:#A68A3A;
  --text-primary:#E8E6E3;
  --text-secondary:#9A9A9A;
  --text-muted:#666;
  --border:#2A2D35;
  --red:#D32F2F;
  --green:#43A047;
  --radius:8px;
  --shadow:0 4px 24px rgba(0,0,0,.4);
}
html{font-size:15px;scroll-behavior:smooth}
body{
  background:var(--bg-primary);
  color:var(--text-primary);
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold-light)}
img{max-width:100%;height:auto}

/* ━━━ LAYOUT ━━━ */
.site-wrapper{min-height:100vh;display:flex;flex-direction:column}
.site-content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:20px 15px}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 15px}

/* ━━━ HEADER ━━━ */
.site-header{
  background:linear-gradient(180deg,#12151B 0%,#0A0C10 100%);
  border-bottom:1px solid var(--border);
  padding:15px 0;
  position:sticky;top:0;z-index:100;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.site-logo{font-size:1.5rem;font-weight:700;color:var(--gold);letter-spacing:1px}
.site-logo span{color:var(--text-primary)}
.site-nav{display:flex;gap:15px;flex-wrap:wrap}
.site-nav a{color:var(--text-secondary);font-size:.85rem;padding:5px 0;border-bottom:2px solid transparent;transition:all .2s}
.site-nav a:hover,.site-nav a.active{color:var(--gold);border-bottom-color:var(--gold)}

/* ━━━ FOOTER ━━━ */
.site-footer{
  background:var(--bg-secondary);
  border-top:1px solid var(--border);
  padding:30px 0 20px;
  text-align:center;
  color:var(--text-muted);
  font-size:.8rem;
}
.site-footer a{color:var(--gold)}
.footer-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:15px}

/* ━━━ HOMEPAGE CARDS ━━━ */
.section-title{
  font-size:1.4rem;font-weight:700;color:var(--gold);
  margin:30px 0 15px;padding-bottom:8px;
  border-bottom:2px solid var(--gold-dark);
  text-transform:uppercase;letter-spacing:1px;
}
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:15px;margin-bottom:25px;
}
.pasaran-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 15px;
  transition:all .25s;
  cursor:pointer;
  position:relative;overflow:hidden;
}
.pasaran-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-dark));
  opacity:0;transition:opacity .25s;
}
.pasaran-card:hover{
  border-color:var(--gold-dark);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.pasaran-card:hover::before{opacity:1}
.card-name{font-size:1rem;font-weight:700;color:var(--gold);margin-bottom:4px}
.card-date{font-size:.75rem;color:var(--text-muted);margin-bottom:10px}
.card-balls{display:flex;gap:6px;justify-content:center}
.card-ball{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1rem;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.card-status{
  font-size:.7rem;text-align:center;margin-top:8px;
  padding:2px 8px;border-radius:10px;display:inline-block;
}
.card-status.live{background:var(--green);color:#fff}
.card-status.empty{background:var(--border);color:var(--text-muted)}

/* ━━━ DIGIT COLORS (n0 - n9) ━━━ */
.n0{background:#E91E63;color:#fff}
.n1{background:#1E88E5;color:#fff}
.n2{background:#9C27B0;color:#fff}
.n3{background:#FF9800;color:#fff}
.n4{background:#43A047;color:#fff}
.n5{background:#F44336;color:#fff}
.n6{background:#3F51B5;color:#fff}
.n7{background:#795548;color:#fff}
.n8{background:#607D8B;color:#fff}
.n9{background:#00BCD4;color:#fff}
/* Text-only variants for table cells */
.n0t{color:#E91E63}.n1t{color:#1E88E5}.n2t{color:#9C27B0}
.n3t{color:#FF9800}.n4t{color:#43A047}.n5t{color:#F44336}
.n6t{color:#3F51B5}.n7t{color:#795548}.n8t{color:#607D8B}.n9t{color:#00BCD4}

/* ━━━ PAITO TABLE CONTROLS ━━━ */
.paito-controls{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-bottom:15px;padding:12px 15px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
}
.paito-controls label{font-size:.8rem;color:var(--text-secondary);margin-right:3px}
.paito-controls select{
  background:var(--bg-secondary);color:var(--text-primary);
  border:1px solid var(--border);border-radius:4px;
  padding:6px 10px;font-size:.85rem;cursor:pointer;
  appearance:auto;
}
.paito-controls select:focus{outline:none;border-color:var(--gold)}

/* ━━━ PAITO TABLE ━━━ */
.paito-table-wrap{overflow-x:auto;margin-bottom:15px;-webkit-overflow-scrolling:touch}
.paito-table{
  width:100%;border-collapse:collapse;
  font-size:.82rem;text-align:center;
  table-layout:fixed;
}
.paito-table th{
  background:var(--bg-secondary);color:var(--gold);
  padding:5px 4px;font-weight:600;font-size:.75rem;
  border:1px solid var(--border);
  position:sticky;top:0;z-index:2;
  white-space:nowrap;
}
.paito-table td{
  padding:4px 3px;border:1px solid var(--border);
  font-weight:700;font-size:.85rem;
  min-width:28px;
  transition:background .15s;
}
.paito-table td.digit-cell{cursor:default}
.paito-table td.x-cell{color:var(--text-muted);font-weight:400;font-size:.7rem}
.paito-table td.dot-cell{color:var(--gold);font-size:.9rem}
.paito-table tr.block-sep td{border-top:2px solid var(--gold-dark)}
.paito-table .row-label{
  background:var(--bg-secondary);color:var(--text-secondary);
  font-size:.7rem;font-weight:600;min-width:30px;
  position:sticky;left:0;z-index:1;
}
/* Highlight on hover */
.paito-table td.digit-cell:hover{
  outline:2px solid var(--gold);outline-offset:-2px;
  z-index:3;position:relative;
}

/* ━━━ DIGIT ROW FILTER BUTTONS ━━━ */
.digit-filter-wrap{
  display:flex;gap:8px;flex-wrap:wrap;
  margin:12px 0 20px;
}
.digit-filter-btn{
  padding:7px 18px;border:1px solid var(--border);
  border-radius:4px;background:var(--bg-card);
  color:var(--text-primary);font-size:.82rem;
  font-weight:600;cursor:pointer;transition:all .2s;
  text-transform:uppercase;
}
.digit-filter-btn:hover{border-color:var(--gold)}
.digit-filter-btn.active{background:var(--red);border-color:var(--red);color:#fff}

/* ━━━ ACCORDION (OLD DATA) ━━━ */
.accordion-toggle{
  display:block;width:100%;padding:10px 15px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--gold);
  font-size:.85rem;font-weight:600;cursor:pointer;
  text-align:center;margin-bottom:10px;transition:all .2s;
}
.accordion-toggle:hover{background:var(--bg-secondary);border-color:var(--gold)}
.accordion-toggle .arrow{transition:transform .3s;display:inline-block}
.accordion-toggle.open .arrow{transform:rotate(180deg)}
.accordion-content{display:none}
.accordion-content.open{display:block}

/* ━━━ LIVE RESULT TABLE ━━━ */
.live-result-table{
  width:100%;border-collapse:collapse;margin:20px 0;
  font-size:.85rem;
}
.live-result-table th{
  background:#1a1d25;color:var(--gold);
  padding:10px 12px;font-weight:600;
  border:1px solid var(--border);text-align:left;
}
.live-result-table td{
  padding:10px 12px;border:1px solid var(--border);
  background:var(--red);color:#fff;font-weight:600;
}

/* ━━━ SEO CONTENT ━━━ */
.seo-content{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:25px;margin:25px 0;
  line-height:1.8;color:var(--text-secondary);
}
.seo-content h1{font-size:1.5rem;color:var(--gold);margin-bottom:15px;line-height:1.3}
.seo-content h2{font-size:1.15rem;color:var(--gold-light);margin:20px 0 10px}
.seo-content h3{font-size:1rem;color:var(--text-primary);margin:15px 0 8px}
.seo-content p{margin-bottom:12px}
.seo-content ul,.seo-content ol{margin:10px 0 10px 20px}
.seo-content li{margin-bottom:5px}

/* ━━━ FAQ ━━━ */
.faq-section{margin:25px 0}
.faq-item{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:8px;overflow:hidden;
}
.faq-question{
  padding:12px 15px;cursor:pointer;font-weight:600;
  color:var(--text-primary);display:flex;justify-content:space-between;
  align-items:center;transition:background .2s;
}
.faq-question:hover{background:var(--bg-secondary)}
.faq-question .icon{color:var(--gold);font-size:1.2rem;transition:transform .3s}
.faq-question.open .icon{transform:rotate(45deg)}
.faq-answer{
  padding:0 15px;max-height:0;overflow:hidden;
  transition:max-height .3s,padding .3s;
  color:var(--text-secondary);font-size:.88rem;line-height:1.7;
}
.faq-answer.open{max-height:500px;padding:0 15px 15px}

/* ━━━ INTERNAL LINKS ━━━ */
.internal-links{
  display:flex;flex-wrap:wrap;gap:8px;margin:20px 0;
}
.internal-links a{
  padding:6px 14px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:4px;
  font-size:.8rem;color:var(--text-secondary);transition:all .2s;
}
.internal-links a:hover{border-color:var(--gold);color:var(--gold)}

/* ━━━ MONTH NAV ━━━ */
.month-nav{
  display:flex;justify-content:space-between;align-items:center;
  margin:15px 0;gap:10px;flex-wrap:wrap;
}
.month-nav a{
  padding:8px 16px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:4px;
  font-size:.82rem;color:var(--text-secondary);transition:all .2s;
}
.month-nav a:hover{border-color:var(--gold);color:var(--gold)}
.month-links{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0 20px;
}
.month-links a{
  padding:5px 10px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:3px;
  font-size:.75rem;color:var(--text-secondary);transition:all .2s;
}
.month-links a:hover,.month-links a.current{border-color:var(--gold);color:var(--gold)}

/* ━━━ ADMIN PANEL ━━━ */
.paitopcso-admin .button-primary{margin-right:5px}
.paitopcso-admin .log-box{
  background:#1d1f27;color:#a8b2c1;padding:15px;
  max-height:400px;overflow-y:auto;font-family:monospace;
  font-size:12px;border:1px solid #333;border-radius:4px;margin-top:10px;
}
.paitopcso-admin table.widefat td{vertical-align:middle}

/* ━━━ LOADING ━━━ */
.paito-loading{
  text-align:center;padding:40px;color:var(--text-muted);
}
.paito-loading::after{
  content:'';display:block;width:30px;height:30px;
  margin:10px auto;border:3px solid var(--border);
  border-top-color:var(--gold);border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ━━━ RESPONSIVE ━━━ */
@media(max-width:768px){
  html{font-size:14px}
  .cards-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
  .pasaran-card{padding:12px 10px}
  .card-ball{width:30px;height:30px;font-size:.85rem}
  .paito-controls{gap:6px;padding:10px}
  .paito-table{font-size:.75rem}
  .paito-table td{padding:3px 2px;min-width:24px}
  .digit-filter-btn{padding:5px 12px;font-size:.75rem}
  .seo-content{padding:15px}
  .seo-content h1{font-size:1.2rem}
  .site-header .container{justify-content:center;text-align:center}
}
@media(max-width:480px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .paito-controls{flex-direction:column;align-items:stretch}
  .paito-controls select{width:100%}
}