/*
Theme Name: ChickenRoadGang Child
Template: generatepress
Version: 1.0.0
*/

/* ═══════════════════════════════════════════════════════════════════════════════
   CHICKENROADGANG.COM - COMPLETE DESIGN SYSTEM
   
   "GANG GOLD" PALETTE
   
   ═══════════════════════════════════════════════════════════════════════════════
   DESIGN PRINCIPLES:
   
   1. Color Theory Applied
      - Perceptually balanced colors
      - Gang Gold as primary brand color
      - Deep charcoal backgrounds for contrast
   
   2. Hierarchy Through De-emphasis
      - Make things stand out by muting competitors
      - Text hierarchy: Primary (100%), Secondary (65%), Muted (45%)
   
   3. Light From Above
      - Top borders = lighter (highlight)
      - Bottom = shadow
      - Closer to user = lighter background
   
   4. Gestalt Principles
      - Scannable in 3 seconds
      - Group related elements
      - Consistent spacing scale
   
   5. CTA Hierarchy
      - Black for primary CTAs (maximum contrast)
      - Green for play/action CTAs
      - Gold for accents and premium indicators
   
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────────────────────────────────
     BACKGROUNDS
     Deep charcoal base with warm undertones
     ───────────────────────────────────────────────────────────────────────────── */
  --bg-dark: #1A1A1A;      /* Main background - deep charcoal */
  --bg-mid: #2A2A2A;       /* Cards, sections - slightly lighter */
  --bg-light: #333333;     /* Hovers, inputs, borders */
  --bg-lighter: #404040;   /* Active states */
  --bg-white: #FFFFFF;     /* Light sections */
  --bg-offwhite: #F5F5F5;  /* Alternate light sections */

  /* ─────────────────────────────────────────────────────────────────────────────
     TEXT HIERARCHY
     De-emphasis creates emphasis
     ───────────────────────────────────────────────────────────────────────────── */
  --text-primary: #FFFFFF;    /* Headings, key info (on dark) */
  --text-primary-dark: #1A1A1A; /* Headings (on light) */
  --text-secondary: #AAAAAA;  /* Body text (on dark) */
  --text-secondary-dark: #555555; /* Body text (on light) */
  --text-muted: #777777;      /* Labels, metadata */
  --text-disabled: #4D4D4D;   /* Disabled states */

  /* ─────────────────────────────────────────────────────────────────────────────
     BORDERS
     Two-tone system for depth (light from above)
     ───────────────────────────────────────────────────────────────────────────── */
  --border: #333333;          /* Standard borders (dark) */
  --border-light: #404040;    /* Top edges - highlight (dark) */
  --border-white: #E5E5E5;    /* Borders on light backgrounds */

  /* ─────────────────────────────────────────────────────────────────────────────
     PRIMARY ACCENT - Gang Gold
     Brand color, ratings, premium indicators
     ───────────────────────────────────────────────────────────────────────────── */
  --gold: #D4AF37;                /* Gang Gold */
  --gold-light: #E5C158;          /* Hover */
  --gold-dark: #B8982E;           /* Pressed */
  --gold-subtle: rgba(212, 175, 55, 0.12);  /* Backgrounds */

  /* ─────────────────────────────────────────────────────────────────────────────
     CTA PRIMARY - Black
     Maximum contrast, primary actions
     ───────────────────────────────────────────────────────────────────────────── */
  --cta-primary: #000000;         /* Black */
  --cta-primary-hover: #222222;   /* Hover */
  --cta-primary-text: #FFFFFF;    /* Text on black */

  /* ─────────────────────────────────────────────────────────────────────────────
     CTA SECONDARY - Green
     Play buttons, positive actions
     ───────────────────────────────────────────────────────────────────────────── */
  --cta-green: #16A34A;           /* Green */
  --cta-green-hover: #15803D;     /* Hover */
  --cta-green-text: #FFFFFF;      /* Text on green */

  /* ─────────────────────────────────────────────────────────────────────────────
     CTA TERTIARY - Orange
     Secondary accent, urgency
     ───────────────────────────────────────────────────────────────────────────── */
  --orange: #FF6B35;              /* Orange accent */
  --orange-hover: #FF5518;        /* Hover */

  /* ─────────────────────────────────────────────────────────────────────────────
     SUCCESS - Green
     Wins, fast payouts, positive indicators
     ───────────────────────────────────────────────────────────────────────────── */
  --success: #16A34A;             /* Success Green */
  --success-bright: #22C55E;      /* Hover */
  --success-subtle: rgba(22, 163, 74, 0.12);

  /* ─────────────────────────────────────────────────────────────────────────────
     STRATEGY COLORS
     Risk level indicators
     ───────────────────────────────────────────────────────────────────────────── */
  --risk-low: #4CAF50;            /* Safe - Green */
  --risk-medium: #FF9800;         /* Medium - Yellow/Orange */
  --risk-high: #F44336;           /* Aggressive - Red */

  /* ─────────────────────────────────────────────────────────────────────────────
     INFO - Blue
     Links, informational elements
     ───────────────────────────────────────────────────────────────────────────── */
  --info: #1976D2;                /* Blue */
  --info-subtle: rgba(25, 118, 210, 0.12);

  /* ─────────────────────────────────────────────────────────────────────────────
     DANGER/WARNING
     Responsible gambling, errors
     ───────────────────────────────────────────────────────────────────────────── */
  --danger: #EF4444;
  --warning: #F59E0B;

  /* ─────────────────────────────────────────────────────────────────────────────
     SHADOWS
     Layered for realistic depth
     ───────────────────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.25);
  --shadow-black: 0 6px 20px rgba(0, 0, 0, 0.3);

  /* ─────────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  
  /* Type scale (major third - 1.25) */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 2rem;       /* 32px */
  --text-4xl: 2.5rem;     /* 40px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.5rem;     /* 56px */

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* Letter spacing */
  --tracking-tight: -0.03em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.05em;

  /* ─────────────────────────────────────────────────────────────────────────────
     SPACING (4px base)
     ───────────────────────────────────────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ─────────────────────────────────────────────────────────────────────────────
     BORDER RADIUS
     ───────────────────────────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ─────────────────────────────────────────────────────────────────────────────
     TRANSITIONS
     ───────────────────────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* ─────────────────────────────────────────────────────────────────────────────
     CONTAINER
     ───────────────────────────────────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-padding: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--gold-light);
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 {
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
}

h2 {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  margin-bottom: var(--space-4);
}

h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

h4 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

p {
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: 700;
  color: var(--text-primary);
}

small {
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.crg-section {
  padding: var(--space-20) 0;
}

.crg-section-dark {
  background-color: var(--bg-dark);
  color: var(--text-secondary);
}

.crg-section-mid {
  background-color: var(--bg-mid);
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.crg-section-white {
  background-color: var(--bg-white);
  color: var(--text-secondary-dark);
}

.crg-section-white h2,
.crg-section-white h3,
.crg-section-white h4 {
  color: var(--text-primary-dark);
}

.crg-section-light {
  background-color: var(--bg-offwhite);
  color: var(--text-secondary-dark);
}

.crg-section-light h2,
.crg-section-light h3,
.crg-section-light h4 {
  color: var(--text-primary-dark);
}

/* Section Headers */
.crg-section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-12);
}

.crg-section-header h2 {
  margin-bottom: var(--space-3);
}

.crg-section-header p {
  font-size: var(--text-lg);
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GRID SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-grid {
  display: grid;
  gap: var(--space-6);
}

.crg-grid-2 { grid-template-columns: repeat(2, 1fr); }
.crg-grid-3 { grid-template-columns: repeat(3, 1fr); }
.crg-grid-4 { grid-template-columns: repeat(4, 1fr); }
.crg-grid-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
  .crg-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .crg-grid-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .crg-grid-2 { grid-template-columns: 1fr; }
  .crg-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .crg-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .crg-grid-6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .crg-grid-3 { grid-template-columns: 1fr; }
  .crg-grid-4 { grid-template-columns: 1fr; }
  .crg-grid-6 { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  text-decoration: none;
}

.crg-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.crg-btn:active {
  transform: translateY(0);
}

/* Primary - Black */
.crg-btn-primary {
  background-color: var(--cta-primary);
  color: var(--cta-primary-text);
  box-shadow: var(--shadow-black);
}

.crg-btn-primary:hover {
  background-color: var(--cta-primary-hover);
  color: var(--cta-primary-text);
}

/* Secondary - Green (Play Now) */
.crg-btn-green {
  background-color: var(--cta-green);
  color: var(--cta-green-text);
}

.crg-btn-green:hover {
  background-color: var(--cta-green-hover);
  color: var(--cta-green-text);
}

/* Tertiary - Orange */
.crg-btn-orange {
  background-color: var(--orange);
  color: #fff;
}

.crg-btn-orange:hover {
  background-color: var(--orange-hover);
  color: #fff;
}

/* Outline - Dark backgrounds */
.crg-btn-outline {
  background-color: transparent;
  color: var(--text-primary);
  border: 2px solid var(--border-light);
}

.crg-btn-outline:hover {
  background-color: var(--bg-light);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

/* Outline on light backgrounds */
.crg-btn-outline-dark {
  background-color: transparent;
  color: var(--text-primary-dark);
  border: 2px solid var(--text-primary-dark);
}

.crg-btn-outline-dark:hover {
  background-color: var(--text-primary-dark);
  color: var(--bg-white);
}

/* Outline White - For dark sections */
.crg-btn-outline-white {
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
}

.crg-btn-outline-white:hover {
  background-color: #fff;
  color: var(--bg-dark);
}

/* Ghost */
.crg-btn-ghost {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  background-color: transparent;
}

.crg-btn-ghost:hover {
  color: var(--text-primary);
  background-color: var(--bg-light);
}

/* Sizes */
.crg-btn-sm {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
}

.crg-btn-lg {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-lg);
}

.crg-btn-block {
  display: flex;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-card {
  background-color: var(--bg-mid);
  border: 1px solid var(--border);
  border-top-color: var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: all var(--duration-normal) var(--ease-out);
}

.crg-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Card on light background */
.crg-card-light {
  background-color: var(--bg-white);
  border: 1px solid var(--border-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) var(--ease-out);
}

.crg-card-light:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Featured Card */
.crg-card-featured {
  border-color: var(--gold);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--gold);
}

/* Flat Card (no hover) */
.crg-card-flat {
  background-color: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CASINO CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-casino-card {
  background-color: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) var(--ease-out);
  border: 2px solid transparent;
}

.crg-casino-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
}

.crg-casino-logo {
  font-size: 2rem;
  margin-bottom: var(--space-3);
}

.crg-casino-badge {
  display: inline-block;
  background-color: var(--gold);
  color: var(--bg-dark);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.crg-casino-name {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary-dark);
  margin-bottom: var(--space-4);
}

.crg-casino-stat {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-white);
  font-size: var(--text-sm);
}

.crg-casino-stat:last-of-type {
  border-bottom: none;
}

.crg-casino-stat-label {
  color: var(--text-muted);
}

.crg-casino-stat-value {
  font-weight: 600;
  color: var(--text-primary-dark);
}

.crg-casino-rating {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--gold);
  margin: var(--space-4) 0;
}

.crg-casino-link {
  display: block;
  text-align: center;
  margin-top: var(--space-3);
  color: var(--gold);
  font-weight: 600;
  font-size: var(--text-sm);
}

.crg-casino-link:hover {
  color: var(--gold-light);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GAME CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-game-card {
  background-color: var(--bg-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) var(--ease-out);
}

.crg-game-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.crg-game-img {
  height: 110px;
  background: linear-gradient(135deg, var(--bg-mid) 0%, var(--bg-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.crg-game-body {
  padding: var(--space-5);
}

.crg-game-badge {
  display: inline-block;
  background-color: var(--gold);
  color: var(--bg-dark);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.crg-game-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary-dark);
  margin-bottom: 4px;
}

.crg-game-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.crg-game-rating {
  color: var(--gold);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.crg-game-link {
  color: var(--gold);
  font-weight: 600;
  font-size: var(--text-sm);
}

.crg-game-link:hover {
  color: var(--gold-light);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STRATEGY CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-strategy-card {
  background-color: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) var(--ease-out);
  border-left: 6px solid transparent;
}

.crg-strategy-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.crg-strategy-card.safe { border-left-color: var(--risk-low); }
.crg-strategy-card.medium { border-left-color: var(--risk-medium); }
.crg-strategy-card.aggressive { border-left-color: var(--risk-high); }

.crg-strategy-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}

.crg-strategy-card h3 {
  font-size: var(--text-xl);
  color: var(--text-primary-dark);
  margin-bottom: var(--space-4);
}

.crg-strategy-stats {
  font-size: var(--text-sm);
  color: var(--text-secondary-dark);
  margin-bottom: var(--space-4);
  line-height: 1.8;
}

.crg-strategy-stats strong {
  color: var(--text-primary-dark);
}

.crg-strategy-card p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BLOG CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-blog-card {
  background-color: var(--bg-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) var(--ease-out);
}

.crg-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.crg-blog-img {
  height: 160px;
  background: linear-gradient(135deg, var(--bg-mid) 0%, var(--bg-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.crg-blog-body {
  padding: var(--space-6);
}

.crg-blog-cat {
  display: inline-block;
  background-color: var(--orange);
  color: #fff;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.crg-blog-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary-dark);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.crg-blog-excerpt {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  line-height: var(--leading-normal);
}

.crg-blog-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TESTIMONIAL CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-testimonial-card {
  background-color: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) var(--ease-out);
}

.crg-testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.crg-testimonial-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto var(--space-4);
}

.crg-testimonial-name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary-dark);
  margin-bottom: 4px;
}

.crg-testimonial-country {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.crg-testimonial-stat {
  background-color: var(--bg-offwhite);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: var(--space-4);
}

.crg-testimonial-quote {
  font-style: italic;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.crg-testimonial-rating {
  color: var(--gold);
  font-size: var(--text-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   VALUE PROPOSITION CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-value-card {
  background-color: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  border: 2px solid var(--border-white);
  transition: all var(--duration-normal) var(--ease-out);
}

.crg-value-card:hover {
  border-color: var(--gold);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.crg-value-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}

.crg-value-card h3 {
  font-size: var(--text-xl);
  color: var(--text-primary-dark);
  margin-bottom: var(--space-3);
}

.crg-value-card p {
  color: var(--text-muted);
  font-size: var(--text-base);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FEATURED CONTENT CARDS (4-step)
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-featured-card {
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  transition: all var(--duration-normal) var(--ease-out);
  border: 2px solid transparent;
  display: block;
  text-decoration: none;
}

.crg-featured-card:hover {
  transform: scale(1.05);
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

.crg-featured-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
}

.crg-featured-card h3 {
  font-size: var(--text-xl);
  color: var(--text-primary-dark);
  margin-bottom: var(--space-2);
}

.crg-featured-card p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.crg-featured-link {
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Card colors */
.crg-featured-card.card-play { background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); }
.crg-featured-card.card-learn { background: linear-gradient(135deg, #FFF9C4 0%, #FFF59D 100%); }
.crg-featured-card.card-win { background: linear-gradient(135deg, #C8E6C9 0%, #A5D6A7 100%); }
.crg-featured-card.card-earn { background: linear-gradient(135deg, #FFCCBC 0%, #FFAB91 100%); }

/* ═══════════════════════════════════════════════════════════════════════════════
   BADGES & TAGS
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.crg-badge-gold {
  background-color: var(--gold-subtle);
  color: var(--gold);
}

.crg-badge-success {
  background-color: var(--success-subtle);
  color: var(--success);
}

.crg-badge-neutral {
  background-color: var(--bg-light);
  color: var(--text-muted);
}

.crg-badge-solid {
  background-color: var(--gold);
  color: var(--bg-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-input {
  width: 100%;
  padding: var(--space-4);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--duration-fast) var(--ease-out);
}

.crg-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-subtle);
}

.crg-input::placeholder {
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-20) var(--container-padding);
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-mid) 100%);
  position: relative;
  overflow: hidden;
}

.crg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(255, 107, 53, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.crg-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.crg-hero-badge {
  display: inline-block;
  background: var(--gold-subtle);
  border: 2px solid var(--gold);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  color: var(--gold);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.crg-hero h1 {
  margin-bottom: var(--space-5);
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.crg-hero-sub {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  margin-bottom: var(--space-10);
  line-height: var(--leading-normal);
}

.crg-hero-btns {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

.crg-hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.crg-hero-stat {
  text-align: center;
}

.crg-hero-stat-num {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--gold);
}

.crg-hero-stat-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   WIN TICKER
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-ticker {
  background-color: var(--bg-mid);
  padding: var(--space-8) 0;
  overflow: hidden;
}

.crg-ticker-label {
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  text-align: center;
  letter-spacing: var(--tracking-wide);
}

.crg-ticker-track {
  overflow: hidden;
}

.crg-ticker-content {
  display: flex;
  gap: var(--space-6);
  animation: tickerScroll 30s linear infinite;
}

.crg-ticker-item {
  flex-shrink: 0;
  background: var(--gold-subtle);
  border-left: 4px solid var(--gold);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
}

.crg-ticker-item .amt {
  color: var(--gold);
  font-weight: 700;
}

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CTA SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-cta {
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-mid) 100%);
  padding: var(--space-20) var(--container-padding);
  text-align: center;
  border-top: 4px solid var(--gold);
  border-bottom: 4px solid var(--gold);
}

.crg-cta h2 {
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.crg-cta p {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.crg-cta-btns {
  display: flex;
  gap: var(--space-5);
  justify-content: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════════ */

.crg-footer {
  background-color: var(--bg-dark);
  color: var(--text-secondary);
  padding: var(--space-20) var(--container-padding) var(--space-8);
}

.crg-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-10);
  max-width: var(--container-max);
  margin: 0 auto var(--space-12);
}

@media (max-width: 768px) {
  .crg-footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .crg-footer-grid { grid-template-columns: 1fr; }
}

.crg-footer-col h4 {
  color: var(--gold);
  font-weight: 700;
  margin-bottom: var(--space-5);
  font-size: var(--text-base);
}

.crg-footer-col p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.crg-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.crg-footer-col li {
  margin-bottom: var(--space-3);
}

.crg-footer-col a {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.crg-footer-col a:hover {
  color: var(--gold);
  text-decoration: none;
}

/* Social Links */
.crg-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.crg-social a {
  width: 40px;
  height: 40px;
  background: var(--gold-subtle);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: var(--text-lg);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.crg-social a:hover {
  background: var(--gold);
  color: var(--bg-dark);
  transform: scale(1.1);
}

/* Newsletter */
.crg-newsletter {
  display: flex;
  margin-top: var(--space-4);
}

.crg-newsletter input {
  flex: 1;
  padding: var(--space-3);
  border: none;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  font-size: var(--text-sm);
}

.crg-newsletter button {
  padding: var(--space-3) var(--space-5);
  background: var(--cta-green);
  color: #fff;
  border: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.crg-newsletter button:hover {
  background: var(--cta-green-hover);
}

/* Footer Bottom */
.crg-footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
  text-align: center;
  max-width: var(--container-max);
  margin: 0 auto;
}

.crg-footer-links {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.crg-footer-links a {
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

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

.crg-footer-copy {
  color: var(--text-disabled);
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITIES - Text
   ═══════════════════════════════════════════════════════════════════════════════ */

.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-success { color: var(--success) !important; }
.text-gold { color: var(--gold) !important; }
.text-dark { color: var(--text-primary-dark) !important; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITIES - Backgrounds
   ═══════════════════════════════════════════════════════════════════════════════ */

.bg-dark { background-color: var(--bg-dark) !important; }
.bg-mid { background-color: var(--bg-mid) !important; }
.bg-light { background-color: var(--bg-light) !important; }
.bg-white { background-color: var(--bg-white) !important; }
.bg-offwhite { background-color: var(--bg-offwhite) !important; }
.bg-gold-subtle { background-color: var(--gold-subtle) !important; }
.bg-success-subtle { background-color: var(--success-subtle) !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITIES - Flexbox
   ═══════════════════════════════════════════════════════════════════════════════ */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITIES - Spacing
   ═══════════════════════════════════════════════════════════════════════════════ */

.m-0 { margin: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITIES - Borders
   ═══════════════════════════════════════════════════════════════════════════════ */

.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  :root {
    --container-padding: 24px;
  }
  
  .crg-section {
    padding: var(--space-16) 0;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
  }
  
  .crg-section {
    padding: var(--space-12) 0;
  }
  
  .crg-hero {
    min-height: auto;
    padding: var(--space-16) var(--container-padding);
  }
  
  .crg-hero-stats {
    gap: var(--space-8);
  }
  
  .crg-hero-stat-num {
    font-size: var(--text-3xl);
  }
  
  .crg-btn {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
  }
  
  .crg-btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
  }
  
  .crg-cta {
    padding: var(--space-16) var(--container-padding);
  }
  
  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-mid);
}

::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SELECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

::selection {
  background-color: var(--gold);
  color: var(--bg-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GENERATEPRESS OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Remove default GP footer */
.site-footer {
  display: none !important;
}

/* Full width pages */
body.page .site-content,
body.page .content-area,
body.page .site-main,
body.page .inside-article,
body.page .entry-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 5 !important;
  margin: 0 !important;
}

/* Remove article padding */
body.page article {
  padding: 0 !important;
}

/* Links - no underline */
a {
  text-decoration: none !important;
}

a:hover {
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BUTTON FIXES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Center all button containers */
.crg-center {
  text-align: center;
}

.crg-center .crg-btn {
  margin: 0 auto;
}

/* Fix outline buttons on light/white backgrounds */
.crg-btn-outline {
  background-color: transparent;
  color: #1A1A1A;
  border: 2px solid #1A1A1A;
}

.crg-btn-outline:hover {
  background-color: #1A1A1A;
  color: #FFFFFF;
  border-color: #1A1A1A;
}

/* Strategy card buttons specifically */
.crg-strategy-card .crg-btn-outline {
  background-color: transparent;
  color: #1A1A1A;
  border: 2px solid #1A1A1A;
  display: flex;
  width: 100%;
  justify-content: center;
}

.crg-strategy-card .crg-btn-outline:hover {
  background-color: #1A1A1A;
  color: #FFFFFF;
}

/* Outline buttons on DARK backgrounds only */
.crg-section-dark .crg-btn-outline,
.crg-cta .crg-btn-outline-white {
  color: #FFFFFF;
  border-color: #FFFFFF;
}

.crg-section-dark .crg-btn-outline:hover,
.crg-cta .crg-btn-outline-white:hover {
  background-color: #FFFFFF;
  color: #1A1A1A;
}

/* Primary button (black) */
.crg-btn-primary {
  background-color: #000000;
  color: #FFFFFF;
  border: none;
}

.crg-btn-primary:hover {
  background-color: #222222;
  color: #FFFFFF;
}

/* Green button (Play Now) */
.crg-btn-green {
  background-color: #16A34A;
  color: #FFFFFF;
  border: none;
}

.crg-btn-green:hover {
  background-color: #15803D;
  color: #FFFFFF;
}

/* Block buttons - full width and centered */
.crg-btn-block {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Casino card Play Now button */
.crg-casino-card .crg-btn {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Fix button text visibility */
.crg-btn {
  font-weight: 700;
  text-decoration: none !important;
}

.crg-btn:hover {
  text-decoration: none !important;
}

/* Space between cards and buttons below */
.crg-center.crg-mt-md {
  margin-top: 48px;
}

.crg-grid + .crg-center {
  margin-top: 48px;
}

/* Or more specifically */
.crg-mt-md {
  margin-top: 48px !important;
}

.content-area,
#primary,
.site-content,
.site-main,
.inside-article,
.entry-content,
article {
    background-color: var(--bg-dark, #1A1A1A) !important;
}

/* 2-column tables - no scroll needed */
.cgang-table-wrapper.cols-2 .cgang-table-scroll-indicator {
    display: none !important;
}

.cgang-table-wrapper.cols-2 .cgang-table {
    min-width: 0;
}

.cgang-table-wrapper.cols-2 .cgang-table th:first-child,
.cgang-table-wrapper.cols-2 .cgang-table td:first-child {
    position: static;
    box-shadow: none;
}

/* Optional: better spacing for 2-col tables */
.cgang-table-wrapper.cols-2 .cgang-table th,
.cgang-table-wrapper.cols-2 .cgang-table td {
    width: 50%;
}

/* ═══════════════════════════════════════════════════════════
   CHICKENGANG SPECS TABLE (Horizontal Headers)
   ═══════════════════════════════════════════════════════════ */
.cgang-specs-wrapper {
    margin: var(--space-8, 2rem) 0;
}

.cgang-specs-title {
    font-size: var(--text-lg, 1.125rem);
    font-weight: 700;
    color: var(--text-primary, #FFFFFF);
    margin-bottom: var(--space-4, 1rem);
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.cgang-specs-title::before {
    content: "📋";
}

.cgang-specs {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-mid, #2A2A2A);
    border: 1px solid var(--border, #333333);
    border-top-color: var(--border-light, #404040);
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
}

.cgang-specs tr {
    border-bottom: 1px solid var(--border, #333333);
}

.cgang-specs tr:last-child {
    border-bottom: none;
}

.cgang-specs tr:hover {
    background: var(--bg-light, #333333);
}

.cgang-specs th {
    width: 40%;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    text-align: left;
    font-weight: 600;
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-muted, #777777);
    background: rgba(0, 0, 0, 0.2);
    vertical-align: middle;
    border-right: 1px solid var(--border, #333333);
}

.cgang-specs td {
    width: 60%;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    text-align: left;
    font-weight: 600;
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-primary, #FFFFFF);
    vertical-align: middle;
}

/* Cell helpers */
.cgang-specs .highlight {
    color: var(--gold, #D4AF37);
}

.cgang-specs .success {
    color: var(--success, #16A34A);
}

.cgang-specs .warning {
    color: var(--warning, #F59E0B);
}

.cgang-specs .danger {
    color: var(--danger, #EF4444);
}

.cgang-specs .muted {
    color: var(--text-muted, #777777);
    font-weight: 400;
}

/* Badge in specs */
.cgang-specs-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    border-radius: var(--radius-sm, 6px);
    margin-left: var(--space-2, 0.5rem);
}

.cgang-specs-badge.gold {
    background: var(--gold-subtle, rgba(212, 175, 55, 0.12));
    color: var(--gold, #D4AF37);
}

.cgang-specs-badge.success {
    background: var(--success-subtle, rgba(22, 163, 74, 0.12));
    color: var(--success, #16A34A);
}

/* Compact variant */
.cgang-specs.compact th,
.cgang-specs.compact td {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    font-size: var(--text-xs, 0.75rem);
}

/* Borderless variant */
.cgang-specs.borderless th {
    border-right: none;
    background: transparent;
}

/* Mobile */
@media (max-width: 640px) {
    .cgang-specs th,
    .cgang-specs td {
        padding: var(--space-3, 0.75rem);
        font-size: var(--text-xs, 0.75rem);
    }

    .cgang-specs th {
        width: 45%;
    }

    .cgang-specs td {
        width: 55%;
    }
}