/**
 * Affiliates Landing Page Styles
 * Style: Clean, minimal, grayscale (matching eligibility-test)
 * 
 * @version 2.0.0
 */

/* Typography — inherits Axiforma from fonts.css */

/* ===== LUCIDE ICONS ===== */
.lucide {
    stroke-width: 1.5px;
}

/* ===== SMOOTH SCROLL ===== */
html {
    scroll-behavior: smooth;
}

/* ===== FEATURE CARD STYLES ===== */
.feature-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.feature-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* ===== TIER CARD STYLES ===== */
.tier-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tier-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ===== HERO SECONDARY LINK (matches partners "How it works") ===== */
.affiliates-hero-how-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #9ca3af;
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #9ca3af;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.affiliates-hero-how-link:hover {
    color: #6b7280;
    border-color: #6b7280;
}

.affiliates-hero-how-link i {
    color: #d1d5db;
}

.affiliates-hero-how-link:hover i {
    color: #9ca3af;
}

/* ===== BUTTON STATES ===== */
button,
a.inline-flex {
    transition: background-color 0.15s ease, transform 0.1s ease;
}

button:active,
a.inline-flex:active {
    transform: scale(0.98);
}

/* ===== COPY BUTTON FEEDBACK ===== */
.copy-success {
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* ===== FADE ANIMATION ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease forwards;
}

/* ===== CHANNEL CHIPS - Click on icon+text, no visible checkbox ===== */
.channel-chip input[type="checkbox"]:checked + div {
    border-color: #111827;
    background-color: #f9fafb;
}

.channel-chip input[type="checkbox"]:checked + div i,
.channel-chip input[type="checkbox"]:checked + div svg {
    color: #111827;
}

.channel-chip input[type="checkbox"]:checked + div span {
    color: #111827;
}

/* ===== APPLICATION FORM - Two-column layout ===== */
#affiliateApplicationForm .affiliate-form-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    #affiliateApplicationForm .affiliate-form-layout {
        flex-direction: row;
        gap: 2rem;
        align-items: flex-start;
    }
    #affiliateApplicationForm .affiliate-form-layout .affiliate-login-col {
        width: 20rem;
        flex-shrink: 0;
    }
    #affiliateApplicationForm .affiliate-form-layout .affiliate-login-col .affiliate-login-sticky {
        position: sticky;
        top: 6rem;
    }
    #affiliateApplicationForm .affiliate-form-layout .affiliate-register-col {
        flex: 1;
        min-width: 0;
    }
}
@media (min-width: 1280px) {
    #affiliateApplicationForm .affiliate-form-layout .affiliate-login-col {
        width: 24rem;
    }
}

/* ===== APPLICATION FORM ===== */
#affiliateApplicationForm input:focus,
#affiliateApplicationForm select:focus,
#affiliateApplicationForm textarea:focus {
    border-color: transparent;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
.animate-spin {
    animation: spin 1s linear infinite;
}