/* Custom styles for EuroSportBet.fr */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #121212;
    color: #ffffff;
}

/* Age Gate Modal */
#ageGate {
    z-index: 100;
}

#ageGate .backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

/* Header */
header {
    background-color: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(10px);
}

/* Hero Carousel */
.carousel-dot.active {
    background-color: #FFD700;
}

/* Live Events Bar */
.live-events-bar {
    background: linear-gradient(90deg, #e53e3e, #c53030);
}

/* News Cards */
.news-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* Video Thumbnails */
.video-thumbnail:hover img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.video-thumbnail img {
    transition: transform 0.3s ease;
}

/* Tables */
table {
    border-collapse: collapse;
}

table th,
table td {
    padding: 12px 16px;
}

table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: #1e1e1e;
    border-radius: 8px;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .hero-section {
        height: 400px;
    }
    
    .live-events-bar div {
        overflow-x: auto;
        white-space: nowrap;
    }
    
    table th,
    table td {
        padding: 8px 12px;
    }
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1e1e1e;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* Focus states for accessibility */
a:focus,
button:focus {
    outline: 2px solid #FFD700;
    outline-offset: 2px;
}