/**
 * Competitions.com.au - Tailwind Color Override System
 * 
 * WCAG AA Compliant Brand Colors (October 2025)
 * Uses standard Tailwind color names but with our brand colors
 * 
 * APPROACH: Override Tailwind's default color values with our WCAG-approved colors
 * BENEFIT: Standard Tailwind syntax works automatically with our brand colors
 * 
 * Color Mapping:
 * - Purple = CompBux/Browse (#8b4d94 → #a46ca8)
 * - Green = Surveys/Earnings (#5a9e16 → #73b832)  
 * - Red = Guessing Games (#c74444 → #e06a4a)
 * - Yellow = Spin & Win (#d9a521 → #e5b84f)
 * - Blue = Video Ads (#0891b2 → #06b6d4)
 * - Orange = CTA/Action (#ea580c → #f97316)
 * - Pink = Referrals (#c026d3 → #d946ef)
 */

:root {
    /* ============================================
       TAILWIND COLOR OVERRIDES - OUR WCAG BRAND COLORS
       ============================================ */
    
    /* Purple = CompBux/Browse (WCAG-approved: #8b4d94 → #a46ca8) */
    --purple-50: #faf5ff;      /* Light backgrounds */
    --purple-100: #f3e8ff;     /* Lighter backgrounds */
    --purple-200: #e9d5ff;     /* Borders */
    --purple-300: #d8b4fe;     /* Darker borders */
    --purple-400: #c084fc;     /* Medium shade */
    --purple-500: #a46ca8;     /* Our CompBux TO (WCAG-approved) */
    --purple-600: #8b4d94;     /* Our brand purple (WCAG-approved) */
    --purple-700: #7e22ce;     /* Hover states */
    --purple-800: #8b4d94;     /* Our CompBux FROM (WCAG-approved) */
    --purple-900: #581c87;     /* Dark text */
    
    /* Green = Surveys/Earnings (WCAG-approved: #5a9e16 → #73b832) */
    --green-50: #f0fdf4;       /* Light backgrounds */
    --green-100: #dcfce7;      /* Lighter backgrounds */
    --green-200: #bbf7d0;      /* Borders */
    --green-300: #86efac;      /* Darker borders */
    --green-400: #4ade80;      /* Medium shade */
    --green-500: #73b832;      /* Our Survey TO (WCAG-approved) */
    --green-600: #16a34a;      /* Text color (WCAG-approved) */
    --green-700: #15803d;      /* Hover states */
    --green-800: #5a9e16;      /* Our Survey FROM (WCAG-approved) */
    --green-900: #14532d;      /* Dark text */
    
    /* Red = Guessing Games (WCAG-approved: #c74444 → #e06a4a) */
    --red-50: #fef2f2;         /* Light backgrounds */
    --red-100: #fee2e2;        /* Lighter backgrounds */
    --red-200: #fecaca;        /* Borders */
    --red-300: #fca5a5;        /* Darker borders */
    --red-400: #f87171;        /* Medium shade */
    --red-500: #e06a4a;        /* Our Guessing TO (WCAG-approved) */
    --red-600: #dc2626;        /* Text color (WCAG-approved) */
    --red-700: #b91c1c;        /* Hover states */
    --red-800: #c74444;        /* Our Guessing FROM (WCAG-approved) */
    --red-900: #991b1b;        /* Dark text */
    
    /* Yellow = Spin & Win (WCAG-approved: #d9a521 → #e5b84f) */
    --yellow-50: #fffbeb;      /* Light backgrounds */
    --yellow-100: #fef3c7;     /* Lighter backgrounds */
    --yellow-200: #fde68a;     /* Borders */
    --yellow-300: #fcd34d;     /* Darker borders */
    --yellow-400: #fbbf24;     /* Medium shade */
    --yellow-500: #e5b84f;     /* Our Spin TO (WCAG-approved) */
    --yellow-600: #d97706;     /* Text color (WCAG-approved) */
    --yellow-700: #b45309;     /* Hover states */
    --yellow-800: #d9a521;     /* Our Spin FROM (WCAG-approved) */
    --yellow-900: #92400e;     /* Dark text */
    
    /* Blue = Video Ads (WCAG-approved: #0891b2 → #06b6d4) */
    --blue-50: #ecfeff;        /* Light backgrounds */
    --blue-100: #cffafe;       /* Lighter backgrounds */
    --blue-200: #a5f3fc;       /* Borders */
    --blue-300: #67e8f9;       /* Darker borders */
    --blue-400: #22d3ee;       /* Medium shade */
    --blue-500: #06b6d4;       /* Our Video TO (WCAG-approved) */
    --blue-600: #0891b2;       /* Text color (WCAG-approved) */
    --blue-700: #0e7490;       /* Hover states */
    --blue-800: #155e75;       /* Dark shade */
    --blue-900: #164e63;       /* Dark text */
    
    /* Cyan = Standard Tailwind cyan (used for various UI elements) */
    --cyan-50: #ecfeff;        /* Light backgrounds */
    --cyan-100: #cffafe;       /* Lighter backgrounds */
    --cyan-200: #a5f3fc;       /* Borders */
    --cyan-300: #67e8f9;       /* Darker borders */
    --cyan-400: #22d3ee;       /* Medium shade */
    --cyan-500: #06b6d4;       /* Standard cyan */
    --cyan-600: #0891b2;       /* Text color */
    --cyan-700: #0e7490;       /* Hover states */
    --cyan-800: #155e75;       /* Dark shade */
    --cyan-900: #164e63;       /* Dark text */
    
    /* Orange = CTA/Action (WCAG-approved: #ea580c → #f97316) */
    --orange-50: #fff7ed;      /* Light backgrounds */
    --orange-100: #ffedd5;     /* Lighter backgrounds */
    --orange-200: #fed7aa;     /* Borders */
    --orange-300: #fdba74;     /* Darker borders */
    --orange-400: #fb923c;     /* Medium shade */
    --orange-500: #f97316;     /* Our CTA TO (WCAG-approved) */
    --orange-600: #ea580c;     /* Text color (WCAG-approved) */
    --orange-700: #c2410c;     /* Hover states */
    --orange-800: #9a3412;     /* Dark shade */
    --orange-900: #7c2d12;     /* Dark text */
    
    /* Pink = Referrals (WCAG-approved: #c026d3 → #d946ef) */
    --pink-50: #fdf4ff;        /* Light backgrounds */
    --pink-100: #fae8ff;       /* Lighter backgrounds */
    --pink-200: #f5d0fe;       /* Borders */
    --pink-300: #f0abfc;       /* Darker borders */
    --pink-400: #e879f9;       /* Medium shade */
    --pink-500: #d946ef;       /* Our Referral TO (WCAG-approved) */
    --pink-600: #c026d3;       /* Text color (WCAG-approved) */
    --pink-700: #a21caf;       /* Hover states */
    --pink-800: #86198f;       /* Dark shade */
    --pink-900: #701a75;       /* Dark text */
    
    /* ============================================
       NEUTRAL COLORS (Keep standard Tailwind)
       ============================================ */
    
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* ============================================
       CATEGORY COLORS (For competition categories)
       ============================================ */
    
    /* Use existing Tailwind combinations with our overridden colors */
    --category-cars: var(--red-500);           /* Cars = Red */
    --category-cash: var(--green-500);         /* Cash = Green */
    --category-travel: var(--blue-500);        /* Travel = Blue */
    --category-electronics: var(--purple-500); /* Electronics = Purple */
    --category-home: var(--yellow-500);        /* Home = Yellow */
    --category-food: var(--pink-500);          /* Food = Pink */
    
    /* ============================================
       BADGE TIER COLORS (Bronze, Silver, Gold)
       WCAG AA Compliant - For Achievement Badges
       ============================================ */
    
    /* Bronze Tier - Warm copper/bronze tones */
    --badge-bronze-from: #cd7f32;      /* Classic bronze (darker) */
    --badge-bronze-to: #e8a864;        /* Light bronze/copper (lighter) */
    --badge-bronze-text: #8b5a2b;      /* Dark bronze text (WCAG AA on white) */
    --badge-bronze-border: #d4a574;    /* Medium bronze border */
    
    /* Silver Tier - Cool metallic silver tones */
    --badge-silver-from: #94a3b8;      /* Slate gray (darker) */
    --badge-silver-to: #cbd5e1;        /* Light slate (lighter) */
    --badge-silver-text: #475569;      /* Dark slate text (WCAG AA on white) */
    --badge-silver-border: #cbd5e1;    /* Light slate border */
    
    /* Gold Tier - Rich golden tones */
    --badge-gold-from: #eab308;        /* Deep gold (darker) */
    --badge-gold-to: #fde047;          /* Bright gold (lighter) */
    --badge-gold-text: #a16207;        /* Dark gold text (WCAG AA on white) */
    --badge-gold-border: #fde047;      /* Bright gold border */
}

/* ============================================
   BACKWARD COMPATIBILITY CLASSES
   These allow existing pages to work during transition
   ============================================ */

/* Guessing Games - Old semantic classes mapped to new system */
.bg-guessing-gradient { background: linear-gradient(to bottom right, var(--red-800), var(--red-500)); }
.bg-guessing-gradient-r { background: linear-gradient(to right, var(--red-800), var(--red-500)); }
.bg-guessing-gradient-br { background: linear-gradient(to bottom right, var(--red-800), var(--red-500)); }
.text-guessing { color: var(--red-600); }
.text-guessing-dark { color: var(--red-900); }

/* CompBux - Old semantic classes mapped to new system */
.bg-compbux-gradient { background: linear-gradient(to bottom right, var(--purple-800), var(--purple-500)); }
.bg-compbux-gradient-r { background: linear-gradient(to right, var(--purple-800), var(--purple-500)); }
.bg-compbux-gradient-br { background: linear-gradient(to bottom right, var(--purple-800), var(--purple-500)); }
.text-compbux { color: var(--purple-600); }
.text-compbux-dark { color: var(--purple-900); }

/* Survey - Old semantic classes mapped to new system */
.bg-survey-gradient { background: linear-gradient(to bottom right, var(--green-800), var(--green-500)); }
.bg-survey-gradient-r { background: linear-gradient(to right, var(--green-800), var(--green-500)); }
.bg-survey-gradient-br { background: linear-gradient(to bottom right, var(--green-800), var(--green-500)); }
.text-survey { color: var(--green-600); }
.text-survey-dark { color: var(--green-900); }

/* Spin - Old semantic classes mapped to new system */
.bg-spin-gradient { background: linear-gradient(to bottom right, var(--yellow-800), var(--yellow-500)); }
.bg-spin-gradient-r { background: linear-gradient(to right, var(--yellow-800), var(--yellow-500)); }
.bg-spin-gradient-br { background: linear-gradient(to bottom right, var(--yellow-800), var(--yellow-500)); }
.text-spin { color: var(--yellow-600); }
.text-spin-dark { color: var(--yellow-900); }

/* Video - Old semantic classes mapped to new system */
.bg-video-gradient { background: linear-gradient(to bottom right, var(--blue-600), var(--blue-500)); }
.bg-video-gradient-r { background: linear-gradient(to right, var(--blue-600), var(--blue-500)); }
.bg-video-gradient-br { background: linear-gradient(to bottom right, var(--blue-600), var(--blue-500)); }
.text-video { color: var(--blue-600); }
.text-video-dark { color: var(--blue-900); }

/* Referral - Old semantic classes mapped to new system */
.bg-referral-gradient { background: linear-gradient(to bottom right, var(--pink-600), var(--pink-500)); }
.bg-referral-gradient-r { background: linear-gradient(to right, var(--pink-600), var(--pink-500)); }
.bg-referral-gradient-br { background: linear-gradient(to bottom right, var(--pink-600), var(--pink-500)); }
.text-referral { color: var(--pink-600); }
.text-referral-dark { color: var(--pink-900); }

/* CTA/Action - Old semantic classes mapped to new system */
.bg-cta-gradient { background: linear-gradient(to bottom right, var(--orange-600), var(--orange-500)); }
.bg-cta-gradient-r { background: linear-gradient(to right, var(--orange-600), var(--orange-500)); }
.bg-cta-gradient-br { background: linear-gradient(to bottom right, var(--orange-600), var(--orange-500)); }
.text-cta { color: var(--orange-600); }
.text-cta-dark { color: var(--orange-900); }

/* Hero & Light Backgrounds - Subtle backgrounds for hero sections */
.bg-guessing-hero { background: linear-gradient(to bottom right, var(--red-50), white); }
.bg-guessing-light { background: var(--red-50); }
.bg-compbux-hero { background: linear-gradient(to bottom right, var(--purple-50), white); }
.bg-compbux-light { background: var(--purple-50); }
.bg-survey-hero { background: linear-gradient(to bottom right, var(--green-50), white); }
.bg-survey-light { background: var(--green-50); }
.bg-spin-hero { background: linear-gradient(to bottom right, var(--yellow-50), white); }
.bg-spin-light { background: var(--yellow-50); }
.bg-video-hero { background: linear-gradient(to bottom right, var(--blue-50), white); }
.bg-video-light { background: var(--blue-50); }
.bg-cta-hero { background: linear-gradient(to bottom right, var(--orange-50), white); }
.bg-cta-light { background: var(--orange-50); }
.bg-referral-hero { background: linear-gradient(to bottom right, var(--pink-50), white); }
.bg-referral-light { background: var(--pink-50); }

/* ============================================
   USAGE GUIDE
   ============================================ */

/*
STANDARD TAILWIND SYNTAX NOW WORKS WITH YOUR BRAND COLORS:

Feature Examples (MODERATE GRADIENTS - RECOMMENDED):
- CompBux: bg-gradient-to-r from-purple-600 to-purple-500, text-purple-600
- Surveys: bg-gradient-to-r from-green-600 to-green-500, text-green-600  
- Guessing: bg-gradient-to-r from-red-600 to-red-500, text-red-600
- Spin: bg-gradient-to-r from-yellow-600 to-yellow-500, text-yellow-600
- Video: bg-gradient-to-r from-blue-600 to-blue-500, text-blue-600
- CTA: bg-gradient-to-r from-orange-600 to-orange-500, text-orange-600
- Referral: bg-gradient-to-r from-pink-600 to-pink-500, text-pink-600

Light Backgrounds:
- bg-gradient-to-br from-purple-50 to-purple-100 (CompBux)
- bg-gradient-to-br from-green-50 to-green-100 (Survey)
- bg-gradient-to-br from-red-50 to-red-100 (Guessing)
- bg-gradient-to-br from-yellow-50 to-yellow-100 (Spin)

Borders:
- border-purple-200, border-green-200, border-red-200, etc.

All Gradient Directions Available:
- bg-gradient-to-r (horizontal)
- bg-gradient-to-br (diagonal)  
- bg-gradient-to-b (vertical)
- bg-gradient-to-t, bg-gradient-to-tr, bg-gradient-to-bl, etc.

BENEFITS:
✅ All existing text-purple-600, bg-green-500 references work automatically
✅ Standard Tailwind syntax familiar to all developers
✅ Full gradient system with all directions
✅ WCAG AA compliant colors maintained
✅ No refactoring needed for existing code

COLOR MAPPING:
Purple = CompBux/Browse
Green = Surveys/Earnings  
Red = Guessing Games
Yellow = Spin & Win
Blue = Video Ads
Orange = CTA/Action
Pink = Referrals
*/

/* ============================================
   CENTRALIZED BUTTON SYSTEM
   Control all gradients from ONE place!
   ============================================ */

/* Base button styles */
.btn-base {
    color: white;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-base:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Feature-specific button classes - STRONG SHINE */
.btn-spin {
    background: linear-gradient(to right, #d9a521, #e5b84f);
    color: white;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-compbux {
    background: linear-gradient(to right, #8b4d94, #a46ca8);
    color: white;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-survey {
    background: linear-gradient(to right, #5a9e16, #73b832);
    color: white;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-guessing {
    background: linear-gradient(to right, #c74444, #e06a4a);
    color: white;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-video {
    background: linear-gradient(to right, var(--blue-600), var(--blue-500));
    color: white;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-cta {
    background: linear-gradient(to right, var(--orange-600), var(--orange-500));
    color: white;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-referral {
    background: linear-gradient(to right, var(--pink-600), var(--pink-500));
    color: white;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

/* Button hover effects */
.btn-spin:hover, .btn-compbux:hover, .btn-survey:hover, 
.btn-guessing:hover, .btn-video:hover, .btn-cta:hover, .btn-referral:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Button size variants */
.btn-lg {
    padding: 16px 32px;
    font-size: 18px;
}

.btn-xl {
    padding: 20px 40px;
    font-size: 20px;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

/* Full width buttons */
.btn-full {
    width: 100%;
}

/* Icon/badge classes - small gradients - STRONG SHINE */
.icon-spin {
    background: linear-gradient(to right, #d9a521, #e5b84f);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.icon-compbux {
    background: linear-gradient(to right, #8b4d94, #a46ca8);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.icon-survey {
    background: linear-gradient(to right, #5a9e16, #73b832);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.icon-guessing {
    background: linear-gradient(to right, #c74444, #e06a4a);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.icon-video {
    background: linear-gradient(to right, var(--blue-600), var(--blue-500));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.icon-referral {
    background: linear-gradient(to right, var(--pink-600), var(--pink-500));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Card background classes - subtle gradients */
.card-spin {
    background: linear-gradient(to bottom right, var(--yellow-50), white);
    border: 1px solid var(--yellow-200);
}

.card-compbux {
    background: linear-gradient(to bottom right, var(--purple-200), white);
    border: 1px solid var(--purple-200);
}

.card-survey {
    background: linear-gradient(to bottom right, var(--green-50), white);
    border: 1px solid var(--green-200);
}

.card-guessing {
    background: linear-gradient(to bottom right, var(--red-50), white);
    border: 1px solid var(--red-200);
}

.card-video {
    background: linear-gradient(to bottom right, var(--blue-50), var(--blue-100));
    border: 1px solid var(--blue-200);
}

/* Card panel classes - darker backgrounds for main info displays */
.card-panel-spin {
    background: linear-gradient(to bottom right, var(--yellow-600), var(--yellow-500));
    color: white;
}

.card-panel-compbux {
    background: linear-gradient(to bottom right, var(--purple-600), var(--purple-500));
    color: white;
}

.card-panel-survey {
    background: linear-gradient(to bottom right, var(--green-600), var(--green-500));
    color: white;
}

.card-panel-guessing {
    background: linear-gradient(to bottom right, var(--red-600), var(--red-500));
    color: white;
}

.card-panel-video {
    background: linear-gradient(to bottom right, var(--blue-600), var(--blue-500));
    color: white;
}

/* ============================================
   USAGE EXAMPLES - CENTRALIZED APPROACH
   ============================================ */

/*
INSTEAD OF:
<button class="bg-gradient-to-r from-yellow-600 to-yellow-500 text-white font-bold py-3 px-6 rounded-xl hover:opacity-90 transition-all shadow-lg">

USE:
<button class="btn-spin">Spin Now</button>
<button class="btn-spin btn-lg">Large Spin Button</button>
<button class="btn-spin btn-full">Full Width Spin</button>

OTHER EXAMPLES:
<button class="btn-compbux">Redeem CompBux</button>
<button class="btn-survey btn-lg">Start Survey</button>
<button class="btn-guessing btn-xl">Make Guess</button>
<button class="btn-video">Watch Video</button>

ICONS/BADGES:
<div class="icon-spin" style="width: 32px; height: 32px;">🎯</div>
<div class="icon-compbux" style="width: 40px; height: 40px;">💰</div>

CARDS:
<div class="card-spin p-6 rounded-xl">Spin content</div>
<div class="card-survey p-4 rounded-lg">Survey content</div>

BENEFITS:
✅ Change ALL gradients from ONE place (just edit the CSS variables!)
✅ Consistent styling across entire site  
✅ No more scattered "bg-gradient-to-r from-yellow-600 to-yellow-500" everywhere
✅ Easy to update intensity globally
✅ Shorter, cleaner HTML
✅ Better maintainability

TO CHANGE ALL GRADIENTS SITE-WIDE:
1. Want softer? Change --yellow-600 to --yellow-500 in the CSS variables
2. Want bolder? Change --yellow-600 to --yellow-700 in the CSS variables
3. ONE change affects EVERY button/icon/card using that color!

MIGRATION PLAN:
1. Replace long gradient classes with btn-[feature] classes
2. All gradients controlled from this ONE file
3. Easy global changes without touching HTML
*/

/* Animations */
@keyframes slideUp {
    0%, 45% { transform: translateY(0); }
    55%, 95% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

/* ============================================
   ACHIEVEMENT BADGE TIER CLASSES
   Bronze, Silver, Gold tier colors for badges
   ============================================ */

/* Bronze Badge */
.badge-bronze {
    background: linear-gradient(to right, var(--badge-bronze-from), var(--badge-bronze-to));
    color: white;
}

.badge-bronze-text {
    color: var(--badge-bronze-text);
}

.badge-bronze-border {
    border-color: var(--badge-bronze-border);
}

.badge-bronze-light {
    background-color: #f9ede4;
}

/* Silver Badge */
.badge-silver {
    background: linear-gradient(to right, var(--badge-silver-from), var(--badge-silver-to));
    color: white;
}

.badge-silver-text {
    color: var(--badge-silver-text);
}

.badge-silver-border {
    border-color: var(--badge-silver-border);
}

.badge-silver-light {
    background-color: #f1f5f9;
}

/* Gold Badge */
.badge-gold {
    background: linear-gradient(to right, var(--badge-gold-from), var(--badge-gold-to));
    color: white;
}

.badge-gold-text {
    color: var(--badge-gold-text);
}

.badge-gold-border {
    border-color: var(--badge-gold-border);
}

.badge-gold-light {
    background-color: #fefce8;
}

/* ============================================
   GRADIENT TEXT UTILITIES
   ============================================ */

/* Survey gradient text (green) */
.text-gradient-survey {
    background: linear-gradient(to right, var(--green-800), var(--green-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* CompBux gradient text (purple) */
.text-gradient-compbux {
    background: linear-gradient(to right, var(--purple-800), var(--purple-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Guessing gradient text (red) */
.text-gradient-guessing {
    background: linear-gradient(to right, var(--red-800), var(--red-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Spin gradient text (yellow) */
.text-gradient-spin {
    background: linear-gradient(to right, var(--yellow-800), var(--yellow-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* CTA gradient text (orange) */
.text-gradient-cta {
    background: linear-gradient(to right, var(--orange-600), var(--orange-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Referral gradient text (pink) */
.text-gradient-referral {
    background: linear-gradient(to right, var(--pink-600), var(--pink-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   PRIMARY GRADIENT (Purple to Pink - Site CTA)
   ============================================ */

/* Primary gradient background */
.bg-gradient-primary {
    background: linear-gradient(to right, #9333ea, #ec4899);
}

.bg-gradient-primary-br {
    background: linear-gradient(to bottom right, #9333ea, #ec4899);
}

/* Primary gradient button */
.btn-primary {
    background: linear-gradient(to right, #9333ea, #ec4899);
    color: white;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Primary gradient text */
.text-gradient-primary {
    background: linear-gradient(to right, #9333ea, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.animate-slide-up {
    animation: slideUp 4s infinite;
}

/* ============================================
   RATE LIMITING VISUAL EFFECTS
   ============================================ */

/* Cooling overlay effect for rate limited buttons */
#cooling-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3), rgba(255,255,255,0.1));
    background-size: 200% 200%;
    animation: cooling-shimmer 2s ease-in-out infinite;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@keyframes cooling-shimmer {
    0% { background-position: -200% 0; }
    50% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Progress bar styling for rate limit modal */
#rate-limit-progress {
    height: 8px;
    background: linear-gradient(to right, var(--red-500), var(--red-400));
    border-radius: 4px;
    transition: width 1s ease-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Rate limit modal enhancements */
.rate-limit-modal-content {
    position: relative;
    overflow: hidden;
}

/* Prevent third-party scripts from adding inline height styles to main tag */
main {
    height: initial !important;
    min-height: initial !important;
}