:root {
  /* General Site Variables (from index (1).php) */
  --gold: #FFD700;
  --dark-bg: #0B0B0B;
  --mid-bg: #111;
  --main-bg: #0f0f0f;
  --text-color: #FFFFFF;
  --dim-text: #BEBEBE;
  --shadow-gold: 0 0 20px rgba(255,215,0,0.35);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Calendar Variables (from gali-satta-king-chart-2025.php, ensuring compatibility) */
  --color-black: #000000;
  --color-dark-grey: #1a1a1a;
  --color-golden: var(--gold); /* Use primary gold variable */
  --color-light-golden: #EEDD82;
  --color-red: #FF4500;
}

/* General Reset and Body Styling */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { 
    background: var(--main-bg); 
    color: var(--text-color); 
    font-size: 16px; 
    text-align:center;
    /* Use Poppins from :root, or fall back to Arial for Calendar styles */
    font-family: var(--font-family, "Poppins", Arial, sans-serif); 
}

/* --- General Site Components (Header, Ticker, Announcement, Results) --- */

/* Header */
.header-container {
  width: 100%;
  background: #222;
  border-bottom: 2px solid var(--gold);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 3%;
}
.logo-image { max-height: 80px; }
.site-title { color: var(--gold); font-size: 28px; font-weight: 700; text-shadow: 0 0 10px rgba(255,215,0,0.5); }

/* Ticker */
.css-ticker-wrapper {
  width: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, #0b0b0b, #1C1C1C);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  box-shadow: var(--shadow-gold);
  height: 45px;
  display: flex;
  align-items: center;
  color: var(--gold);
}
.css-ticker-content {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 18s linear infinite;
  padding-left: 100%;
  font-weight: 500;
}
@keyframes scroll-left { 0% {transform:translateX(0);} 100% {transform:translateX(-100%);} }
.css-ticker-wrapper:hover .css-ticker-content { animation-play-state: paused; }

/* Announcement */
.announcement-box {
  width: 100%;
  background: var(--dark-bg);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  box-shadow: inset 0 0 20px rgba(255,215,0,0.2);
  padding: 20px 8%;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}
.announcement-box b { color: var(--gold); font-weight: 700; text-shadow: 0 0 5px rgba(255,215,0,0.5); }

/* Live Results */
.live-results-section {
  width: 100%;
  background: var(--mid-bg);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  box-shadow: inset 0 0 25px rgba(255,215,0,0.1);
  padding: 40px 0;
  text-align: center;
}
.live-results-title {
  color: var(--gold);
  font-size: 26px;
  margin-bottom: 25px;
  text-shadow: 0 0 10px rgba(255,215,0,0.6);
}
.live-results-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
}
.result-card {
  background: #111;
  border: 1px solid var(--gold);
  border-radius: 8px;
  width: 220px;
  padding: 15px;
  box-shadow: 0 0 10px rgba(255,215,0,0.2);
  transition: 0.3s;
}
.result-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(255,215,0,0.4);
}
.result-card h3 { color: var(--gold); margin-bottom: 10px; font-size: 18px; }
.result-number { font-size: 34px; font-weight: 700; color: #fff; text-shadow: 0 0 10px rgba(255,215,0,0.6); }
.result-status {
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--gold);
  color: #000;
  font-size: 13px;
  border-radius: 6px;
  font-weight: 600;
}

/* Base Live Status (Awaiting Result, Blinking) */
.result-status.live {
  background: #28FFBF; /* Bright Cyan/Green - Original for Awaiting Result */
  animation: blink 1.2s infinite;
  color: #000;
  font-weight: 600;
}
@keyframes blink { 0%, 50%, 100% {opacity:1;} 25%,75% {opacity:0.4;} }

/* Full Results Section */
.result-box {
  width: 100%;
  background: linear-gradient(180deg,#0b0b0b 0%,#111 100%);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  padding: 40px 0;
  text-align: center;
}
.result-box h2 {
  color: var(--gold);
  font-size: 26px;
  text-shadow: 0 0 10px rgba(255,215,0,0.5);
  margin-bottom: 25px;
}
.result-box table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 25px;
}
.result-box td {
  width: 50%;
  border: 1px solid rgba(255,215,0,0.3);
  background: #111;
  padding: 25px 0;
  transition: 0.3s;
}
.result-box td:hover { background: #151515; box-shadow: 0 0 15px rgba(255,215,0,0.4); }
.result-box h3 { color: var(--gold); font-size: 20px; margin-bottom: 8px; }
.result-box .number {
  font-size: 36px;
  color: var(--gold);
  font-weight: 800;
  text-shadow: 0 0 10px rgba(255,215,0,0.7);
}
.result-box time { color: var(--dim-text); font-size: 14px; display: block; margin-top: 4px; }
.live { animation: blink 1.4s infinite; }


/* --- Calendar Chart Styles (from gali-satta-king-chart-2025.php) --- */

.calendar-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; 
    justify-content: center;
    margin: 10px 0.5% 10px 0.5%; 
}
        
.calendar-month {
    background-color: var(--color-dark-grey);
    border: 1px solid var(--color-golden);
    padding: 8px; 
    box-shadow: 0 0 10px var(--color-golden);
    width: 100%; 
    max-width: 380px; 
    box-sizing: border-box; 
}
        
.calendar-month h2 {
    text-align: center;
    color: var(--color-golden);
    margin-top: 0;
    font-size: 1.2em; 
    border-bottom: 2px solid var(--color-light-golden); 
    padding-bottom: 5px;
}
h1 { /* Used for the h1 in the page content */
    text-align: center;
    color: var(--color-golden);
    margin-top: 0;
    font-size: 1.2em; 
    padding-bottom: 5px;
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.calendar-table th, .calendar-table td {
    border: 1px solid var(--color-light-golden);
    text-align: center;
    padding: 0;
    height: 35px; 
    position: relative; 
}
        
.calendar-table th {
    background-color: var(--color-black);
    color: var(--color-golden);
    font-weight: bold;
    font-size: 0.7em; 
    padding: 4px 0;
}
        
.calendar-cell {
    background-color: var(--color-dark-grey); 
}
.empty-cell {
    background-color: var(--color-dark-grey);
    border: 1:px solid var(--color-dark-grey);
}
        
.date-number {
    position: absolute;
    top: 1px; 
    left: 2px;
    font-size: 0.6em; 
    color: var(--color-light-golden);
    font-weight: normal;
}
        
.game-number {
    display: block;
    font-size: 1.2em; 
    font-weight: bold;
    color: var(--color-golden);
    line-height: 35px; 
}

.red-number {
    color: var(--color-red) !important;
}

@media (min-width: 768px) {
    .calendar-container {
        margin: 20px auto; 
    }
    .calendar-month {
        width: 330px; 
    }
    .calendar-table td {
         height: 45px; 
    }
    .game-number {
        font-size: 1.5em; 
        line-height: 45px;
    }
}

/* --- Chart List/Filter Section Styles (from index (1).php) --- */

.chart-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 30px;
  background-color: #111;
  border: 2px solid #FFD700;
  border-radius: 10px;
  box-shadow: 0 0 20px #FFD70033;
}

.charts-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 20px;
}

.chart-container {
  flex: 1 1 300px;
  max-width: 500px;
  background-color: #111;
  border: 2px solid #FFD700;
  border-radius: 10px;
  box-shadow: 0 0 20px #FFD70033;
  padding: 30px;
  margin: 10px;
}

.chart-title {
  text-align: center;
  font-size: 2em;
  margin-bottom: 30px;
  color: aqua;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 2px solid #FFD70044;
  padding-bottom: 10px;
}

.chart-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.chart-list li {
  margin: 10px 0;
}

.chart-list a {
  color: #FFD700;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s, text-shadow 0.3s;
}

.chart-list a:hover {
  color: #FFF8DC;
  text-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700;
}

.chart-list a.latest {
  color: #00FFCC;
  font-size: 1.1em;
  padding: 8px 12px;
  background: #FFD70011;
  border: 1px solid #00FFCC;
  border-radius: 5px;
  display: inline-block;
  box-shadow: 0 0 10px #00FFCC99, 0 0 20px #FFD70033;
  text-shadow: 0 0 5px #00FFCC;
}

.chart-list a.latest:hover {
  color: #000;
  background: #00FFCC;
  text-shadow: none;
  box-shadow: 0 0 10px #00FFCC, 0 0 20px #00FFCC;
}

@media (max-width: 768px) {
  .chart-title { font-size: 1.6em; }
}

@media (max-width: 480px) {
  .chart-title { font-size: 1.3em; }
}

.section-header {
  text-align: center;
  font-size: 2.2em;
  margin: 15px 0;
  color: red;
  text-transform: uppercase;
  letter-spacing: 3px;
}

@media (max-width: 768px) {
  .section-header { font-size: 1.8em; }
}

@media (max-width: 480px) {
  .section-header { font-size: 1.5em; letter-spacing: 1px; }
}

/* Filter Section */
.chart-filter-section {
  background: gold;
  padding: 25px 15px;
  border-top: 3px solid gold;
  border-bottom: 3px solid gold;
  margin: 40px 0;
  box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.2);
}

.filter-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  color: gold;
  font-weight: bold;
}

.filter-group label {
  font-size: 1em;
}

.filter-group select {
  padding: 8px 10px;
  border: 1px solid gold;
  background-color: #222;
  color: gold;
  border-radius: 5px;
  font-weight: bold;
}

.filter-group select:focus {
  outline: none;
  box-shadow: 0 0 5px gold;
}

.view-btn {
  padding: 10px 20px;
  background-color: red;
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.view-btn:hover {
  background-color: brown;
}

@media (max-width: 600px) {
  .filter-controls { flex-direction: column; align-items: stretch; }
  .filter-group { flex-direction: row; justify-content: space-between; width: 100%; }
  .filter-group select { flex: 1; }
  .button-wrapper { margin-top: 15px; text-align: center; }
}

.year-button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.year-button {
    display: inline-block;
    padding: 10px 15px;
    background-color: #FFD700;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #CCA300;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s, transform 0.2s;
    font-size: 1em;
}

.year-button:hover {
    background-color: #FFE54C;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

/* --- Result Declared (Live) and Awaiting Result Statuses (Red/Waiting) --- */
.live-btn .result-status,
.wait-btn-in-status .result-status { /* 'Live' status when result is declared */
    background: #d9534f; /* Red color for Live (Result Declared) */
    animation: none; /* Disable blinking */
    color: white;
    box-shadow: 0 0 10px rgba(217, 83, 79, 0.5);
    cursor: pointer;
}
.live-btn .result-status:hover,
.wait-btn-in-status .result-status:hover { background: #c9302c; }


/* --- Play Now Link in Status Area (New Bright Green) --- */
.play-now-status-link {
    text-decoration: none;
    display: block; 
}
.play-now-status-link .result-status {
    background: #4CAF50; /* New Bright Green for Play Now */
    color: white;
    font-weight: 700;
    animation: none; 
    cursor: pointer;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}
.play-now-status-link:hover .result-status {
    background: #388E3C; /* Darker Green on hover */
}

/* --- Buy Result Link in Status Area (New Purple/Indigo) --- */
.buy-result-status-link {
    text-decoration: none;
    display: block; 
}
.buy-result-status-link .result-status {
    background: #5C6BC0; /* New Purple/Indigo for Buy Result */
    color: white;
    font-weight: 700;
    animation: none; 
    cursor: pointer;
    box-shadow: 0 0 10px rgba(92, 107, 192, 0.5);
}
.buy-result-status-link:hover .result-status {
    background: #3F51B5; /* Darker Indigo on hover */
}

/* --- Wait Button (for main results, XX) - Button in number area --- */
.wait-btn-in-number {
    display: block;
    background-color: #f0ad4e; /* Orange/Warning color */
    color: #000;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: 700;
    transition: background-color 0.3s;
    border: none;
    cursor: wait;
    line-height: normal; 
}
.wait-btn-in-number:hover { background-color: #ec971f; }

/* Override result-number styling for declared result number */
.result-card .result-number {
    font-size: 34px; 
    font-weight: 700; 
    color: var(--gold, #FFD700); 
    text-shadow: 0 0 10px rgba(255,215,0,0.7);
    margin-bottom: 10px;
}

/* Basic CSS for the dark theme footer design */
.main-footer {
    background-color: #0d0d0d; /* Very dark background */
    color: #cccccc;
    padding: 30px 20px 10px;
    font-family: 'Poppins', sans-serif;
    border-top: 3px solid var(--gold); /* Gold separator */
}

.footer-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
}

.footer-section {
    width: 100%;
    margin-bottom: 25px;
}

@media (min-width: 768px) {
    .footer-section {
        width: 30%; /* Three-column layout */
    }
}

.footer-heading {
    color: var(--gold);
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
}

/* List Styling */
.footer-links ul, .footer-legal ul {
    list-style: none;
    padding: 0;
}

.footer-links li, .footer-legal li {
    margin-bottom: 8px;
}

.footer-links a, .footer-legal a {
    color: #cccccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover, .footer-legal a:hover {
    color: var(--gold);
}

/* Disclaimer Link Highlight */
.disclaimer-link a {
    font-weight: 700;
    color: #dc3545; /* Red color for warning */
}

/* SEO Summary */
.footer-summary p {
    font-size: 0.9em;
    line-height: 1.6;
}

/* Social Links - (Need to replace 'f' and 't' with actual icons/styling) */
.social-links {
    margin-top: 15px;
}
.social-links a {
    display: inline-block;
    color: #0d0d0d;
    background-color: var(--gold);
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    text-decoration: none;
    font-weight: 700;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    padding-top: 10px;
    text-align: center;
    font-size: 0.8em;
}

.footer-bottom p {
    margin: 5px 0;
}

.copyright {
    color: var(--gold);
    font-weight: 500;
}
.final-disclaimer {
    color: #888;
}