/**
 * VoteSecured Country-Specific Color Themes
 * Custom color palettes for international pages
 */

/* ==========================================
   CANADA THEME - Red & White (Maple Leaf)
   ========================================== */
.theme-canada {
    --state-primary: #FF0000;     /* Canadian Red */
    --state-secondary: #FFFFFF;   /* White */
    --state-accent: #000000;      /* Black */
    --state-light: #FF4D4D;       /* Light Red */
    
    --accent-blue: #FF0000;
    --accent-cyan: #FF4D4D;
    --accent-purple: #8B0000;
}

.theme-canada .gradient-text {
    background: linear-gradient(135deg, #FF0000, #FF4D4D, #FFFFFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
}

.theme-canada .btn-primary {
    background: linear-gradient(135deg, #FF0000, #8B0000);
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.3);
}

.theme-canada .hero {
    background: linear-gradient(135deg, #FF0000 0%, #8B0000 50%, #000000 100%);
}

/* ==========================================
   BRAZIL THEME - Green, Yellow & Blue
   ========================================== */
.theme-brazil {
    --state-primary: #009B3A;     /* Brazil Green */
    --state-secondary: #FEDF00;   /* Brazil Yellow */
    --state-accent: #002776;      /* Brazil Blue */
    --state-light: #00C853;       /* Light Green */
    
    --accent-blue: var(--state-accent);
    --accent-cyan: var(--state-secondary);
    --accent-purple: var(--state-primary);
}

.theme-brazil .gradient-text {
    background: linear-gradient(135deg, #009B3A, #FEDF00, #002776);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
}

.theme-brazil .btn-primary {
    background: linear-gradient(135deg, #009B3A, #002776);
    box-shadow: 0 4px 20px rgba(0, 155, 58, 0.3);
}

.theme-brazil .hero {
    background: linear-gradient(135deg, #009B3A 0%, #FEDF00 33%, #002776 66%, #000000 100%);
}

.theme-brazil .state-banner {
    background: linear-gradient(90deg, #009B3A 33%, #FEDF00 33%, #FEDF00 66%, #002776 66%);
}

/* ==========================================
   INDIA THEME - Saffron, White & Green
   ========================================== */
.theme-india {
    --state-primary: #FF9933;     /* Saffron */
    --state-secondary: #138808;   /* India Green */
    --state-accent: #000080;      /* Navy Blue (Chakra) */
    --state-light: #FFA64D;       /* Light Saffron */
    
    --accent-blue: var(--state-accent);
    --accent-cyan: var(--state-primary);
    --accent-purple: var(--state-secondary);
}

.theme-india .gradient-text {
    background: linear-gradient(135deg, #FF9933, #FFFFFF, #138808);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
}

.theme-india .btn-primary {
    background: linear-gradient(135deg, #FF9933, #138808);
    box-shadow: 0 4px 20px rgba(255, 153, 51, 0.3);
}

.theme-india .hero {
    background: linear-gradient(135deg, #FF9933 0%, #FFFFFF 33%, #138808 66%, #000080 100%);
}

.theme-india .state-banner {
    background: linear-gradient(180deg, #FF9933 33%, #FFFFFF 33%, #FFFFFF 66%, #138808 66%);
}

/* ==========================================
   EUROPEAN UNION THEME - Blue & Yellow
   ========================================== */
.theme-eu {
    --state-primary: #003399;     /* EU Blue */
    --state-secondary: #FFCC00;   /* EU Yellow/Gold */
    --state-accent: #FFD700;      /* Gold */
    --state-light: #4169E1;       /* Royal Blue */
    
    --accent-blue: var(--state-primary);
    --accent-cyan: var(--state-secondary);
    --accent-purple: var(--state-light);
}

.theme-eu .gradient-text {
    background: linear-gradient(135deg, #003399, #4169E1, #FFCC00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
}

.theme-eu .btn-primary {
    background: linear-gradient(135deg, #003399, #FFCC00);
    box-shadow: 0 4px 20px rgba(0, 51, 153, 0.3);
}

.theme-eu .hero {
    background: linear-gradient(135deg, #003399 0%, #4169E1 50%, #000033 100%);
}

/* ==========================================
   SWITZERLAND THEME - Red & White (Cross)
   ========================================== */
.theme-switzerland {
    --state-primary: #DA291C;     /* Swiss Red */
    --state-secondary: #FFFFFF;   /* White */
    --state-accent: #C8102E;      /* Dark Red */
    --state-light: #E84A3D;       /* Light Red */
    
    --accent-blue: var(--state-primary);
    --accent-cyan: var(--state-light);
    --accent-purple: var(--state-accent);
}

.theme-switzerland .gradient-text {
    background: linear-gradient(135deg, #DA291C, #E84A3D, #FFFFFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
}

.theme-switzerland .btn-primary {
    background: linear-gradient(135deg, #DA291C, #C8102E);
    box-shadow: 0 4px 20px rgba(218, 41, 28, 0.3);
}

.theme-switzerland .hero {
    background: linear-gradient(135deg, #DA291C 0%, #C8102E 50%, #000000 100%);
}

/* ==========================================
   NIGERIA THEME - Green & White
   ========================================== */
.theme-nigeria {
    --state-primary: #008751;     /* Nigeria Green */
    --state-secondary: #FFFFFF;   /* White */
    --state-accent: #006B3F;      /* Dark Green */
    --state-light: #00A86B;       /* Light Green */
    
    --accent-blue: var(--state-primary);
    --accent-cyan: var(--state-light);
    --accent-purple: var(--state-accent);
}

.theme-nigeria .gradient-text {
    background: linear-gradient(135deg, #008751, #00A86B, #FFFFFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
}

.theme-nigeria .btn-primary {
    background: linear-gradient(135deg, #008751, #006B3F);
    box-shadow: 0 4px 20px rgba(0, 135, 81, 0.3);
}

.theme-nigeria .hero {
    background: linear-gradient(135deg, #008751 0%, #006B3F 50%, #000000 100%);
}

.theme-nigeria .state-banner {
    background: linear-gradient(90deg, #008751 33%, #FFFFFF 33%, #FFFFFF 66%, #008751 66%);
}

/* ==========================================
   UNITED KINGDOM THEME - Red, White & Blue
   ========================================== */
.theme-uk {
    --state-primary: #00247D;     /* UK Blue */
    --state-secondary: #CF142B;   /* UK Red */
    --state-accent: #FFFFFF;      /* White */
    --state-light: #4169E1;       /* Royal Blue */
    
    --accent-blue: var(--state-primary);
    --accent-cyan: var(--state-light);
    --accent-purple: var(--state-secondary);
}

.theme-uk .gradient-text {
    background: linear-gradient(135deg, #00247D, #CF142B, #FFFFFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
}

.theme-uk .btn-primary {
    background: linear-gradient(135deg, #00247D, #CF142B);
    box-shadow: 0 4px 20px rgba(0, 36, 125, 0.3);
}

.theme-uk .hero {
    background: linear-gradient(135deg, #00247D 0%, #CF142B 50%, #000033 100%);
}

/* ==========================================
   AUSTRALIA THEME - Blue, Red & White
   ========================================== */
.theme-australia {
    --state-primary: #00008B;     /* Dark Blue */
    --state-secondary: #FF0000;   /* Red */
    --state-accent: #FFFFFF;      /* White */
    --state-light: #4169E1;       /* Royal Blue */
    
    --accent-blue: var(--state-primary);
    --accent-cyan: var(--state-light);
    --accent-purple: var(--state-secondary);
}

.theme-australia .gradient-text {
    background: linear-gradient(135deg, #00008B, #4169E1, #FF0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
}

.theme-australia .btn-primary {
    background: linear-gradient(135deg, #00008B, #FF0000);
    box-shadow: 0 4px 20px rgba(0, 0, 139, 0.3);
}

.theme-australia .hero {
    background: linear-gradient(135deg, #00008B 0%, #4169E1 50%, #000033 100%);
}

/* ==========================================
   JAPAN THEME - Red & White (Rising Sun)
   ========================================== */
.theme-japan {
    --state-primary: #BC002D;     /* Japan Red */
    --state-secondary: #FFFFFF;   /* White */
    --state-accent: #8B0000;      /* Dark Red */
    --state-light: #DC143C;       /* Crimson */
    
    --accent-blue: var(--state-primary);
    --accent-cyan: var(--state-light);
    --accent-purple: var(--state-accent);
}

.theme-japan .gradient-text {
    background: linear-gradient(135deg, #BC002D, #DC143C, #FFFFFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
}

.theme-japan .btn-primary {
    background: linear-gradient(135deg, #BC002D, #8B0000);
    box-shadow: 0 4px 20px rgba(188, 0, 45, 0.3);
}

.theme-japan .hero {
    background: linear-gradient(135deg, #FFFFFF 0%, #BC002D 50%, #8B0000 100%);
}

/* ==========================================
   SOUTH KOREA THEME - Red, Blue & White
   ========================================== */
.theme-southkorea {
    --state-primary: #0047A0;     /* Korea Blue */
    --state-secondary: #CD2E3A;   /* Korea Red */
    --state-accent: #FFFFFF;      /* White */
    --state-light: #4169E1;       /* Royal Blue */
    
    --accent-blue: var(--state-primary);
    --accent-cyan: var(--state-light);
    --accent-purple: var(--state-secondary);
}

.theme-southkorea .gradient-text {
    background: linear-gradient(135deg, #0047A0, #CD2E3A, #FFFFFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
}

.theme-southkorea .btn-primary {
    background: linear-gradient(135deg, #0047A0, #CD2E3A);
    box-shadow: 0 4px 20px rgba(0, 71, 160, 0.3);
}

.theme-southkorea .hero {
    background: linear-gradient(135deg, #0047A0 0%, #CD2E3A 50%, #000033 100%);
}

/* ==========================================
   MEXICO THEME - Green, White & Red
   ========================================== */
.theme-mexico {
    --state-primary: #006847;     /* Mexico Green */
    --state-secondary: #CE1126;   /* Mexico Red */
    --state-accent: #FFFFFF;      /* White */
    --state-light: #00A86B;       /* Light Green */
    
    --accent-blue: var(--state-primary);
    --accent-cyan: var(--state-light);
    --accent-purple: var(--state-secondary);
}

.theme-mexico .gradient-text {
    background: linear-gradient(135deg, #006847, #FFFFFF, #CE1126);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
}

.theme-mexico .btn-primary {
    background: linear-gradient(135deg, #006847, #CE1126);
    box-shadow: 0 4px 20px rgba(0, 104, 71, 0.3);
}

.theme-mexico .hero {
    background: linear-gradient(135deg, #006847 0%, #FFFFFF 33%, #CE1126 66%, #000000 100%);
}

.theme-mexico .state-banner {
    background: linear-gradient(90deg, #006847 33%, #FFFFFF 33%, #FFFFFF 66%, #CE1126 66%);
}

/* ==========================================
   SHARED COUNTRY THEME PATTERNS
   ========================================== */
[class*="theme-"] .nav-category-header.expanded {
    border-color: var(--state-primary);
    color: var(--state-light);
}

[class*="theme-"] .nav-item.active {
    background: linear-gradient(135deg, 
        rgba(var(--state-primary-rgb, 59, 130, 246), 0.15), 
        rgba(var(--state-secondary-rgb, 139, 92, 246), 0.15)
    );
    border-color: var(--state-primary);
}

[class*="theme-"] .card-section::before {
    background: linear-gradient(180deg, var(--state-primary), var(--state-light));
}

[class*="theme-"] .btn-primary:hover {
    box-shadow: 0 8px 30px rgba(var(--state-primary-rgb, 59, 130, 246), 0.4);
}

/* ==========================================
   FLAG BANNER PATTERNS (for countries without custom)
   ========================================== */
.country-banner {
    width: 100%;
    height: 6px;
    margin-bottom: 2rem;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--state-primary), var(--state-secondary));
}