/* style.css - Main Styles */
:root {
    --fifa-red: #FF0000;
    --fifa-black: #000000;
    --fifa-white: #FFFFFF;
    --fifa-gray: #F5F5F5;
    --fifa-success: #22C55E;
    --fifa-warning: #F59E0B;
}

body {
    background-color: var(--fifa-gray);
    color: var(--fifa-black);
}

.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.badge {
    font-weight: 500;
    padding: 0.4rem 0.8rem;
}

.badge.bg-danger { background-color: var(--fifa-red) !important; }
.badge.bg-success { background-color: var(--fifa-success) !important; }
.badge.bg-warning { background-color: var(--fifa-warning) !important; }

.btn-danger {
    background-color: var(--fifa-red);
    border-color: var(--fifa-red);
}

.btn-danger:hover {
    background-color: #cc0000;
    border-color: #cc0000;
}

.btn-outline-danger {
    color: var(--fifa-red);
    border-color: var(--fifa-red);
}

.btn-outline-danger:hover {
    background-color: var(--fifa-red);
    border-color: var(--fifa-red);
}

.hero-section {
    background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .display-1 { font-size: 2.5rem; }
    .lead { font-size: 1.25rem; }
    .container { padding: 0 12px; }
}