/**
 * Index Page Styles - Optimized
 * Uses utility classes and CSS variables from main.css
 */

/* Logout Confirmation Modal */
.logout-confirmation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logout-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    max-width: 400px;
    margin: var(--space-md);
    overflow: hidden;
    animation: slideIn 0.2s ease-out;
}

.logout-header {
    background: var(--sobie-gradient);
    color: white;
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
}

.logout-body {
    padding: var(--space-lg);
}

.logout-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.logout-actions button {
    flex: 1;
}

@keyframes slideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Mobile Navigation - Hide text, show only icons */
@media (max-width: 768px) {
    .nav-button-hover span:not(.badge),
    .nav-link-hover span:not(.badge) {
        display: none;
    }
    
    /* Ensure icons are properly sized on mobile */
    .nav-button-hover i,
    .nav-link-hover i {
        font-size: 1.25rem;
    }
    
    /* Keep badge positioning correct */
    .nav-button-hover .badge {
        top: -5px;
        right: -8px;
    }
}

/* Venue link hover effects */
.venue-hover {
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 0.25rem 0.4rem !important;
    display: inline-block;
}

.venue-hover:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
}

.venue-hover:hover i {
    color: #fbbf24;
}