/*
Theme Name: SlotRich99 Casino
Theme URI: https://slotrich99.com
Description: Luxury Casino Dark & Gold — GeneratePress Child Theme
Author: SlotRich99
Template: generatepress
Version: 2.0.0
Text Domain: slotrich99
*/

/* ===== Variables ===== */
:root {
  --gold: #FFD700;
  --gold-dark: #C5A200;
  --gold-light: #FFEA80;
  --red: #E94560;
  --dark-1: #0A0A14;
  --dark-2: #0F0F1A;
  --dark-3: #1A1A2E;
  --dark-4: #16213E;
  --text: #F5F5F5;
  --text-dim: #9CA3AF;
  --glow: 0 0 20px rgba(255,215,0,0.25);
  --glow-lg: 0 0 40px rgba(255,215,0,0.35);
  --radius: 12px;
  --radius-lg: 20px;
  --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ===== Base ===== */
body {
  background: var(--dark-1) !important;
  color: var(--text) !important;
  font-family: 'Sarabun', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  margin: 0; padding: 0;
}

/* ===== GeneratePress Overrides ===== */
.site,
.site-content,
.content-area,
.main-navigation,
.inside-article,
.inside-page-header,
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
#page, #content, #primary, #secondary {
  background: transparent !important;
  color: var(--text) !important;
}

/* Remove GP default padding/borders */
.separate-containers .inside-article,
.separate-containers .comments-area,
.one-container .inside-article {
  border: none !important;
  box-shadow: none !important;
  padding: 40px 30px !important;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title,
.site-title {
  font-family: 'Noto Sans Thai', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.3;
}

p, li, td, th, label, input, textarea, select {
  font-family: 'Sarabun', sans-serif !important;
  color: var(--text) !important;
}

a { color: var(--gold) !important; text-decoration: none !important; transition: var(--transition); }
a:hover { color: var(--gold-dark) !important; }
::selection { background: var(--gold); color: var(--dark-1); }

/* ===== Header ===== */
.site-header {
  background: linear-gradient(180deg, rgba(10,10,20,0.98), rgba(15,15,26,0.95)) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,215,0,0.15) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
}
.site-title a, .main-title a {
  color: var(--gold) !important;
  font-family: 'Noto Sans Thai', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.7rem !important;
  text-shadow: 0 0 10px rgba(255,215,0,0.2);
}
.main-navigation a,
.main-navigation .main-nav ul li a,
.menu-toggle {
  color: var(--text) !important;
  font-family: 'Sarabun', sans-serif !important;
  transition: var(--transition);
}
.main-navigation a:hover,
.main-navigation .main-nav ul li a:hover {
  color: var(--gold) !important;
}
.main-navigation ul ul {
  background: var(--dark-3) !important;
  border: 1px solid rgba(255,215,0,0.1);
}

/* ===== Hero ===== */
.slot-hero {
  background: linear-gradient(160deg, var(--dark-1) 0%, var(--dark-3) 40%, var(--dark-4) 100%);
  padding: 80px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.slot-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,215,0,0.1), transparent 65%);
  pointer-events: none;
}
.slot-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to top, var(--dark-1), transparent);
  pointer-events: none;
}
.slot-hero > * { position: relative; z-index: 2; }
.slot-hero h1 {
  font-size: clamp(2.5rem, 7vw, 5rem) !important;
  color: var(--gold) !important;
  text-shadow: 0 0 40px rgba(255,215,0,0.3), 0 0 80px rgba(255,215,0,0.1);
  margin: 0 0 16px;
  letter-spacing: -0.03em;
}
.slot-hero .tagline {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--text-dim) !important;
  margin: 0 auto 32px;
  max-width: 550px;
  line-height: 1.6;
}

/* ===== Buttons ===== */
.btn-gold {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold), #FFC107) !important;
  color: var(--dark-1) !important;
  font-weight: 700 !important;
  padding: 14px 36px;
  border-radius: var(--radius);
  font-size: 1.15rem;
  box-shadow: var(--glow);
  transition: var(--transition);
  border: none; cursor: pointer;
}
.btn-gold:hover {
  box-shadow: var(--glow-lg);
  transform: translateY(-3px) scale(1.03);
  color: var(--dark-1) !important;
}
.btn-outline {
  display: inline-block;
  border: 2px solid var(--gold);
  color: var(--gold) !important;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: var(--radius);
  background: transparent !important;
  transition: var(--transition);
  font-size: 0.95rem;
}
.btn-outline:hover {
  background: var(--gold) !important;
  color: var(--dark-1) !important;
  box-shadow: var(--glow);
}

/* ===== Features Strip ===== */
.slot-features {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 960px;
  margin: -30px auto 40px;
  padding: 28px 20px;
  background: var(--dark-3);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,215,0,0.08);
  position: relative; z-index: 3;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.slot-feature { text-align: center; min-width: 100px; flex: 1; }
.slot-feature .ico { font-size: 1.8rem; margin-bottom: 6px; }
.slot-feature .val { color: var(--gold) !important; font-weight: 700; font-size: 1rem; }
.slot-feature .lbl { color: var(--text-dim) !important; font-size: 0.8rem; }

/* ===== Section Title ===== */
.sec-title {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  color: var(--text) !important;
  margin: 48px 0 8px;
}
.sec-sub {
  text-align: center;
  color: var(--text-dim) !important;
  font-size: 1rem;
  margin: 0 0 32px;
}

/* ===== Cards ===== */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto 48px;
  padding: 0 20px;
}
.slot-card {
  background: var(--dark-3) !important;
  border: 1px solid rgba(255,215,0,0.06);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.slot-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: var(--transition);
}
.slot-card:hover {
  border-color: rgba(255,215,0,0.25);
  box-shadow: var(--glow);
  transform: translateY(-6px);
}
.slot-card:hover::before { opacity: 1; }
.slot-card h3 { color: var(--gold) !important; font-size: 1.25rem !important; margin: 0 0 8px; }
.slot-card p { color: var(--text-dim) !important; font-size: 0.9rem; line-height: 1.65; margin: 0 0 16px; }

/* Badges */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.badge-hot { background: linear-gradient(135deg, var(--red), #FF6B6B); color: #fff !important; }
.badge-new { background: linear-gradient(135deg, #00C853, #69F0AE); color: var(--dark-1) !important; }
.badge-vip { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--dark-1) !important; }

/* ===== Footer ===== */
.site-footer,
.site-info {
  background: var(--dark-4) !important;
  border-top: 1px solid rgba(255,215,0,0.1) !important;
  color: var(--text-dim) !important;
}
.site-footer a, .site-info a { color: var(--text-dim) !important; }
.site-footer a:hover, .site-info a:hover { color: var(--gold) !important; }

/* ===== Sidebar ===== */
.widget, .inside-right-sidebar .widget {
  background: var(--dark-3) !important;
  border: 1px solid rgba(255,215,0,0.06);
  border-radius: var(--radius);
  padding: 20px !important;
}
.widget-title { color: var(--gold) !important; font-size: 1.1rem !important; }

/* ===== Article ===== */
.entry-content { max-width: 800px; }
.entry-content h2 { color: var(--gold) !important; margin-top: 2rem; }
.entry-content h3 { color: var(--text) !important; }
.entry-content img { border-radius: var(--radius); }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark-1); }
::-webkit-scrollbar-thumb { background: var(--dark-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .slot-hero { padding: 50px 16px; }
  .slot-features { margin-top: -20px; gap: 16px; padding: 20px 16px; }
  .slot-grid { grid-template-columns: 1fr; }
  .separate-containers .inside-article { padding: 24px 16px !important; }
}

/* ===== Full Width Overrides ===== */
.grid-container {
  max-width: 100% !important;
}
.site.grid-container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.content-area {
  width: 100% !important;
  max-width: 100% !important;
}
.inside-article {
  padding: 0 !important;
  margin: 0 !important;
}
.entry-content {
  max-width: 100% !important;
}

/* Header full width */
.inside-header.grid-container,
.inside-navigation.grid-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Content sections use their own max-width */
.slot-hero,
.slot-features,
.slot-grid {
  width: 100% !important;
  max-width: 100% !important;
}

/* One container mode */
.one-container .inside-article {
  padding: 0 !important;
  background: transparent !important;
}
.one-container .site-content {
  padding: 0 !important;
}

/* Remove entry header on homepage */
.page-id-5 .entry-header {
  display: none !important;
}

/* No sidebar on homepage */
.page-id-5 #right-sidebar,
.page-id-5 #left-sidebar,
.page-id-5 .sidebar {
  display: none !important;
}
.page-id-5 .content-area {
  width: 100% !important;
}

/* Remove GP default padding */
.separate-containers .inside-article,
.separate-containers .comments-area,
.one-container .inside-article {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}


/* ===== BLOG ARCHIVE PAGE ===== */
.page-header, .archive-header { background: linear-gradient(160deg, var(--dark-2) 0%, var(--dark-3) 100%) !important; padding: 48px 20px !important; text-align: center; border-bottom: 1px solid rgba(255,215,0,0.08); margin-bottom: 32px; }
.page-header h1, .archive-title { color: var(--gold) !important; font-size: clamp(1.8rem, 4vw, 2.5rem) !important; }
.blog .site-main, .archive .site-main { max-width: 1100px !important; margin: 0 auto !important; padding: 0 20px 48px !important; }
.blog article, .archive article, article.post { background: var(--dark-3) !important; border: 1px solid rgba(255,215,0,0.06) !important; border-radius: var(--radius-lg) !important; overflow: hidden; margin-bottom: 24px !important; transition: var(--transition); box-shadow: none !important; }
.blog article:hover, .archive article:hover { border-color: rgba(255,215,0,0.2) !important; box-shadow: var(--glow) !important; transform: translateY(-4px); }
article .post-image img { width: 100% !important; height: 220px !important; object-fit: cover; transition: var(--transition); }
article:hover .post-image img { transform: scale(1.05); }
.blog .inside-article, .archive .inside-article { padding: 24px !important; }
.blog .entry-title, .archive .entry-title { font-size: 1.3rem !important; margin: 0 0 8px !important; }
.blog .entry-title a { color: var(--text) !important; }
.blog .entry-title a:hover { color: var(--gold) !important; }
.entry-meta { color: var(--text-dim) !important; font-size: 0.82rem !important; margin-bottom: 12px; display: flex; gap: 16px; flex-wrap: wrap; }
.entry-meta a { color: var(--gold) !important; font-size: 0.82rem !important; }
.entry-summary { color: var(--text-dim) !important; font-size: 0.92rem; line-height: 1.7; margin-bottom: 16px; }
.read-more, a.read-more, .entry-content a.more-link { display: inline-block; color: var(--gold) !important; font-weight: 600; font-size: 0.9rem; padding: 8px 20px; border: 1.5px solid var(--gold); border-radius: var(--radius); transition: var(--transition); background: transparent !important; }
.read-more:hover, a.read-more:hover { background: var(--gold) !important; color: var(--dark-1) !important; box-shadow: var(--glow); }
.cat-links a, .tag-links a { background: rgba(255,215,0,0.1) !important; color: var(--gold) !important; font-size: 0.72rem !important; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.cat-links a:hover { background: var(--gold) !important; color: var(--dark-1) !important; }
.pagination, .paging-navigation { text-align: center; margin: 40px 0; display: flex; justify-content: center; gap: 8px; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; background: var(--dark-3) !important; color: var(--text) !important; border: 1px solid rgba(255,215,0,0.1); border-radius: var(--radius); font-weight: 600; }
.pagination .current { background: var(--gold) !important; color: var(--dark-1) !important; border-color: var(--gold) !important; }
.pagination a:hover { border-color: var(--gold) !important; color: var(--gold) !important; }


/* ===== SINGLE POST PAGE ===== */
.single .site-main { max-width: 860px !important; margin: 0 auto !important; padding: 0 20px 48px !important; }
.single .entry-title { font-size: clamp(1.8rem, 5vw, 2.8rem) !important; color: var(--text) !important; line-height: 1.3; margin: 0 0 16px !important; }
.single .entry-meta { color: var(--text-dim) !important; font-size: 0.85rem !important; padding-bottom: 20px; margin-bottom: 32px; border-bottom: 1px solid rgba(255,215,0,0.08); }
.single .post-image { margin-bottom: 32px; border-radius: var(--radius-lg); overflow: hidden; }
.single .post-image img { width: 100% !important; max-height: 480px; object-fit: cover; border-radius: var(--radius-lg); }
.single .entry-content { max-width: 100% !important; font-size: 1.05rem; line-height: 1.85; }
.single .entry-content h2 { color: var(--gold) !important; font-size: 1.6rem !important; margin: 48px 0 16px; padding-bottom: 10px; border-bottom: 2px solid rgba(255,215,0,0.15); position: relative; }
.single .entry-content h2::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 60px; height: 2px; background: var(--gold); }
.single .entry-content h3 { color: var(--text) !important; font-size: 1.3rem !important; margin: 32px 0 12px; }
.single .entry-content h4 { color: #FFEA80 !important; font-size: 1.1rem !important; margin: 24px 0 10px; }
.single .entry-content p { margin-bottom: 1.4rem; }
.single .entry-content strong, .single .entry-content b { color: var(--gold) !important; font-weight: 700; }
.single .entry-content blockquote { background: var(--dark-3) !important; border-left: 4px solid var(--gold) !important; border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 24px !important; margin: 24px 0; font-style: italic; }
.single .entry-content blockquote p { color: var(--text-dim) !important; margin-bottom: 0; }
.single .entry-content ul, .single .entry-content ol { padding-left: 24px; margin-bottom: 1.4rem; }
.single .entry-content li { margin-bottom: 8px; line-height: 1.7; }
.single .entry-content ul li::marker { color: var(--gold); }
.single .entry-content ol li::marker { color: var(--gold); font-weight: 700; }
.single .entry-content table { width: 100%; border-collapse: collapse; margin: 24px 0; background: var(--dark-3) !important; border-radius: var(--radius); overflow: hidden; }
.single .entry-content thead { background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,215,0,0.05)) !important; }
.single .entry-content th { color: var(--gold) !important; font-weight: 700; padding: 12px 16px; text-align: left; border-bottom: 1px solid rgba(255,215,0,0.1); }
.single .entry-content td { padding: 12px 16px; border-bottom: 1px solid rgba(255,215,0,0.05); }
.single .entry-content tr:hover td { background: rgba(255,215,0,0.03); }
.single .entry-content img { border-radius: var(--radius) !important; max-width: 100%; height: auto; }
.single .entry-content code { background: var(--dark-3) !important; color: var(--gold) !important; padding: 2px 8px; border-radius: 4px; font-size: 0.9em; }
.single .entry-content pre { background: var(--dark-3) !important; border: 1px solid rgba(255,215,0,0.06); border-radius: var(--radius); padding: 20px; overflow-x: auto; }
.entry-content .toc-box, .entry-content .wp-block-yoast-seo-table-of-contents { background: var(--dark-3) !important; border: 1px solid rgba(255,215,0,0.1); border-radius: var(--radius-lg); padding: 24px; margin: 24px 0; }
.author-info { background: var(--dark-3) !important; border: 1px solid rgba(255,215,0,0.08); border-radius: var(--radius-lg); padding: 24px; margin: 40px 0; display: flex; gap: 20px; align-items: center; }
.author-info .author-avatar img { border-radius: 50%; border: 2px solid var(--gold); }
.author-info .author-name { color: var(--gold) !important; font-weight: 700; }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0; }
.post-navigation a { background: var(--dark-3) !important; border: 1px solid rgba(255,215,0,0.08); border-radius: var(--radius); padding: 16px 20px !important; display: block; transition: var(--transition); }
.post-navigation a:hover { border-color: var(--gold) !important; box-shadow: var(--glow); }
.post-navigation .post-title { color: var(--text) !important; font-weight: 600; }
#breadcrumbs, .yoast-breadcrumbs { font-size: 0.82rem; color: var(--text-dim) !important; margin-bottom: 16px; }
#breadcrumbs a, .yoast-breadcrumbs a { color: var(--gold) !important; }
@media (max-width: 768px) {
  .single .site-main { padding: 0 16px 32px !important; }
  .single .entry-title { font-size: 1.6rem !important; }
  .post-navigation .nav-links { grid-template-columns: 1fr; }
  .author-info { flex-direction: column; text-align: center; }
}