/* Platform Brand Colors & Styles
 * Estilos elegantes y representativos para cada plataforma
 */

/* ============================================
   PLATFORM BRAND COLORS
   ============================================ */
:root {
    /* Swagbucks - Verde/Morado */
    --swagbucks-primary: #00a651;
    --swagbucks-secondary: #7c2d9d;
    --swagbucks-bg: linear-gradient(135deg, #00a651 0%, #7c2d9d 100%);
    
    /* Survey Junkie - Azul */
    --survey-junkie-primary: #3867d6;
    --survey-junkie-secondary: #4b7bec;
    --survey-junkie-bg: linear-gradient(135deg, #3867d6 0%, #4b7bec 100%);
    
    /* Branded Surveys - Naranja */
    --branded-surveys-primary: #ff6b35;
    --branded-surveys-secondary: #f7931e;
    --branded-surveys-bg: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    
    /* Freecash - Morado Oscuro */
    --freecash-primary: #7b2d9d;
    --freecash-secondary: #a855f7;
    --freecash-bg: linear-gradient(135deg, #7b2d9d 0%, #a855f7 100%);
    
    /* InboxDollars - Verde */
    --inboxdollars-primary: #5cb85c;
    --inboxdollars-secondary: #449d44;
    --inboxdollars-bg: linear-gradient(135deg, #5cb85c 0%, #449d44 100%);
    
    /* Opinion Outpost - Azul Claro */
    --opinion-outpost-primary: #00b4d8;
    --opinion-outpost-secondary: #0077b6;
    --opinion-outpost-bg: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%);
    
    /* Toluna - Rojo */
    --toluna-primary: #e63946;
    --toluna-secondary: #d62828;
    --toluna-bg: linear-gradient(135deg, #e63946 0%, #d62828 100%);
    
    /* Pinecone Research - Verde Pino */
    --pinecone-research-primary: #2d6a4f;
    --pinecone-research-secondary: #40916c;
    --pinecone-research-bg: linear-gradient(135deg, #2d6a4f 0%, #40916c 100%);
    
    /* MyPoints - Azul Marino */
    --mypoints-primary: #1d3557;
    --mypoints-secondary: #457b9d;
    --mypoints-bg: linear-gradient(135deg, #1d3557 0%, #457b9d 100%);
    
    /* LifePoints - Morado */
    --lifepoints-primary: #8b5cf6;
    --lifepoints-secondary: #a78bfa;
    --lifepoints-bg: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    
    /* PrizeRebel - Rojo/Naranja */
    --prizerebel-primary: #ff4757;
    --prizerebel-secondary: #ff6b81;
    --prizerebel-bg: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    
    /* YouGov - Azul Corporativo */
    --yougov-primary: #003087;
    --yougov-secondary: #0066cc;
    --yougov-bg: linear-gradient(135deg, #003087 0%, #0066cc 100%);
    
    /* Respondent - Verde Azulado */
    --respondent-primary: #06b6d4;
    --respondent-secondary: #0891b2;
    --respondent-bg: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    
    /* User Interviews - Morado Vibrante */
    --user-interviews-primary: #8b5cf6;
    --user-interviews-secondary: #6d28d9;
    --user-interviews-bg: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

/* ============================================
   PLATFORM LOGO CONTAINER STYLES
   ============================================ */
.platform-logo {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.platform-logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 1;
}

.platform-card:hover .platform-logo {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ============================================
   BRAND-SPECIFIC LOGO BACKGROUNDS
   ============================================ */
.platform-card[data-slug="swagbucks"] .platform-logo {
    background: var(--swagbucks-bg);
}

.platform-card[data-slug="survey-junkie"] .platform-logo {
    background: var(--survey-junkie-bg);
}

.platform-card[data-slug="branded-surveys"] .platform-logo {
    background: var(--branded-surveys-bg);
}

.platform-card[data-slug="freecash"] .platform-logo {
    background: var(--freecash-bg);
}

.platform-card[data-slug="inboxdollars"] .platform-logo {
    background: var(--inboxdollars-bg);
}

.platform-card[data-slug="opinion-outpost"] .platform-logo {
    background: var(--opinion-outpost-bg);
}

.platform-card[data-slug="toluna"] .platform-logo {
    background: var(--toluna-bg);
}

.platform-card[data-slug="pinecone-research"] .platform-logo {
    background: var(--pinecone-research-bg);
}

.platform-card[data-slug="mypoints"] .platform-logo {
    background: var(--mypoints-bg);
}

.platform-card[data-slug="lifepoints"] .platform-logo {
    background: var(--lifepoints-bg);
}

.platform-card[data-slug="prizerebel"] .platform-logo {
    background: var(--prizerebel-bg);
}

.platform-card[data-slug="yougov"] .platform-logo {
    background: var(--yougov-bg);
}

.platform-card[data-slug="respondent"] .platform-logo {
    background: var(--respondent-bg);
}

.platform-card[data-slug="user-interviews"] .platform-logo {
    background: var(--user-interviews-bg);
}

/* ============================================
   PLATFORM LANDING PAGE HERO LOGOS
   ============================================ */
.landing-hero[data-platform="swagbucks"] .landing-logo {
    background: var(--swagbucks-bg);
    box-shadow: 0 8px 30px rgba(0, 166, 81, 0.4);
}

.landing-hero[data-platform="survey-junkie"] .landing-logo {
    background: var(--survey-junkie-bg);
    box-shadow: 0 8px 30px rgba(56, 103, 214, 0.4);
}

.landing-hero[data-platform="branded-surveys"] .landing-logo {
    background: var(--branded-surveys-bg);
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.4);
}

.landing-hero[data-platform="freecash"] .landing-logo {
    background: var(--freecash-bg);
    box-shadow: 0 8px 30px rgba(123, 45, 157, 0.4);
}

.landing-hero[data-platform="inboxdollars"] .landing-logo {
    background: var(--inboxdollars-bg);
    box-shadow: 0 8px 30px rgba(92, 184, 92, 0.4);
}

.landing-hero[data-platform="opinion-outpost"] .landing-logo {
    background: var(--opinion-outpost-bg);
    box-shadow: 0 8px 30px rgba(0, 180, 216, 0.4);
}

.landing-hero[data-platform="toluna"] .landing-logo {
    background: var(--toluna-bg);
    box-shadow: 0 8px 30px rgba(230, 57, 70, 0.4);
}

.landing-hero[data-platform="pinecone-research"] .landing-logo {
    background: var(--pinecone-research-bg);
    box-shadow: 0 8px 30px rgba(45, 106, 79, 0.4);
}

.landing-hero[data-platform="mypoints"] .landing-logo {
    background: var(--mypoints-bg);
    box-shadow: 0 8px 30px rgba(29, 53, 87, 0.4);
}

.landing-hero[data-platform="lifepoints"] .landing-logo {
    background: var(--lifepoints-bg);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);
}

.landing-hero[data-platform="prizerebel"] .landing-logo {
    background: var(--prizerebel-bg);
    box-shadow: 0 8px 30px rgba(255, 71, 87, 0.4);
}

.landing-hero[data-platform="yougov"] .landing-logo {
    background: var(--yougov-bg);
    box-shadow: 0 8px 30px rgba(0, 48, 135, 0.4);
}

.landing-hero[data-platform="respondent"] .landing-logo {
    background: var(--respondent-bg);
    box-shadow: 0 8px 30px rgba(6, 182, 212, 0.4);
}

.landing-hero[data-platform="user-interviews"] .landing-logo {
    background: var(--user-interviews-bg);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);
}

/* ============================================
   OPTIONAL: ACCENT BORDERS FOR FEATURED
   ============================================ */
.platform-card.featured[data-slug="swagbucks"]::before {
    border-color: var(--swagbucks-primary);
}

.platform-card.featured[data-slug="survey-junkie"]::before {
    border-color: var(--survey-junkie-primary);
}

.platform-card.featured[data-slug="branded-surveys"]::before {
    border-color: var(--branded-surveys-primary);
}

/* ============================================
   HOVER GLOW EFFECTS
   ============================================ */
.platform-card:hover[data-slug="swagbucks"] {
    box-shadow: 0 12px 35px rgba(0, 166, 81, 0.25);
}

.platform-card:hover[data-slug="survey-junkie"] {
    box-shadow: 0 12px 35px rgba(56, 103, 214, 0.25);
}

.platform-card:hover[data-slug="branded-surveys"] {
    box-shadow: 0 12px 35px rgba(255, 107, 53, 0.25);
}

.platform-card:hover[data-slug="freecash"] {
    box-shadow: 0 12px 35px rgba(123, 45, 157, 0.25);
}

/* ============================================
   RESPONSIVE LOGO STYLES
   ============================================ */
@media (max-width: 768px) {
    .platform-logo {
        border-radius: 12px;
    }
    
    .landing-logo {
        border-radius: 16px;
    }
}

/* ============================================
   LOGO IMAGE CONSISTENCY
   ============================================ */
.platform-logo img,
.landing-logo img {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
    transition: filter 0.3s ease;
}

.platform-card:hover .platform-logo img,
.landing-hero:hover .landing-logo img {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}