/* ========================================

   MODERN VISIOLIST - ENHANCED STYLING

   ======================================== */



/* Import Modern Fonts */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');



/* ========================================

   FORM ERROR HANDLING STYLES

   ======================================== */

/* Error message styling - Extra forceful to override Bootstrap */
.invalid-feedback {
    display: block !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
    color: #dc3545 !important;
    font-weight: 600 !important;
    background-color: #ffeb3b !important;
    border: 1px solid #dc3545 !important;
    border-radius: 0.375rem !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* Ensure error messages are visible in all contexts */
.modern-form-group .invalid-feedback,
.invalid-feedback.text-danger,
div.invalid-feedback {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

.text-danger {
    color: #dc3545 !important;
}

.join_edit_error {
    color: #dc3545 !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Error input styling */
.is-invalid,
.has-error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.modern-form-input.is-invalid,
.modern-form-input.has-error,
.modern-form-textarea.is-invalid,
.modern-form-textarea.has-error {
    border-color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.05);
}

/* Error styling for form groups */
.modern-form-group.join_edit_error .modern-form-input,
.modern-form-group.join_edit_error .modern-form-textarea {
    border-color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.05);
}



/* ========================================

   ENHANCED COLOR VARIABLES

   ======================================== */

:root {

    /* Modern Color Palette */

    --primary-gradient: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);

    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

    --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

    --premium-gradient: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);

    

    /* Background Gradients */

    --header-gradient: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);

    --footer-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

    --card-gradient: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);

    --premium-card-gradient: linear-gradient(135deg, #fffbf0 0%, #fff8e1 100%);

    

    /* Shadow System */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);

    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);

    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);

    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

    --shadow-premium: 0 20px 40px rgba(255, 215, 0, 0.3), 0 10px 20px rgba(255, 215, 0, 0.2);

    

    /* Animation Curves */

    --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);

    --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);

    

    /* Spacing */

    --border-radius-modern: 12px;

    --border-radius-lg: 16px;

    --border-radius-xl: 20px;

}



/* ========================================

   MODERN TYPOGRAPHY

   ======================================== */

body {

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    font-weight: 400;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* ========================================

   ENHANCED HEADER STYLING

   ======================================== */

.modern-header {

    background: var(--header-gradient) !important;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.modern-brand {

    display: flex;

    align-items: center;

    font-weight: 600;

    color: white !important;

    text-decoration: none;

    transition: all 0.3s var(--ease-out-cubic);

}



.modern-brand:hover {

    transform: translateY(-2px);

    color: rgba(255, 255, 255, 0.9) !important;

}



.logo-image {

    border-radius: 8px;

    transition: all 0.3s var(--ease-out-cubic);

}



.brand-text {

    font-size: 1.25rem;

    font-weight: 700;

    background: linear-gradient(135deg, #ffffff 0%, #e3f2fd 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.modern-nav-link {

    position: relative;

    color: #e3f2fd !important;

    font-weight: 500;

    padding: 8px 16px !important;

    border-radius: 8px;

    transition: all 0.3s var(--ease-out-cubic);

    overflow: hidden;

}



/* Override any conflicting navbar styles from screen.css */

.navbar-nav .nav-link.modern-nav-link {

    color: #e3f2fd !important;

}



.modern-nav-link::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 8px;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.3s var(--ease-out-cubic);

    z-index: -1;

}



.modern-nav-link:hover::before {

    transform: scaleX(1);

}



.modern-nav-link:hover {

    color: #ffffff !important;

    transform: translateY(-1px);

}



/* Ensure hover state works for navbar links */

.navbar-nav .nav-link.modern-nav-link:hover {

    color: #ffffff !important;

    background-color: rgba(255, 255, 255, 0.1);

}



/* Additional specificity to override Bootstrap and screen.css styles */

.modern-header .navbar-nav .nav-link.modern-nav-link {

    color: #e3f2fd !important;

}



.modern-header .navbar-nav .nav-link.modern-nav-link:hover {

    color: #ffffff !important;

    background-color: rgba(255, 255, 255, 0.1) !important;

}



/* Alternative light grey color option - uncomment if needed */

/*

.modern-nav-link {

    color: #f5f5f5 !important;

}

.navbar-nav .nav-link.modern-nav-link {

    color: #f5f5f5 !important;

}

.modern-header .navbar-nav .nav-link.modern-nav-link {

    color: #f5f5f5 !important;

}

*/



.modern-nav-link i {

    transition: all 0.3s var(--ease-out-cubic);

}



.modern-nav-link:hover i {

    transform: scale(1.1);

}



/* Enhanced Search */

.search-container {

    position: relative;

    display: flex;

}



.modern-search {

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.2);

    color: white;

    border-radius: 25px 0 0 25px;

    padding: 8px 16px;

    transition: all 0.3s var(--ease-out-cubic);

}



.modern-search::placeholder {

    color: rgba(255, 255, 255, 0.7);

}



.modern-search:focus {

    background: rgba(255, 255, 255, 0.2);

    border-color: rgba(255, 255, 255, 0.4);

    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);

    color: white;

}



.btn-search {

    background: rgba(255, 255, 255, 0.2);

    border: 1px solid rgba(255, 255, 255, 0.2);

    color: white;

    border-radius: 0 25px 25px 0;

    padding: 8px 16px;

    transition: all 0.3s var(--ease-out-cubic);

}



.btn-search:hover {

    background: rgba(255, 255, 255, 0.3);

    color: white;

    transform: translateY(-1px);

}



/* ========================================

   ENHANCED MAIN CONTENT AREAS

   ======================================== */

body {

    background: linear-gradient(135deg, #f5f7ff 0%, #e8f2ff 100%);

}



.banner-section {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 249, 255, 0.8) 100%);

    backdrop-filter: blur(10px);

    padding: 0;

    margin-bottom: 2rem;

}



.main-content-area {

    min-height: calc(100vh - 200px);

    padding: 2rem 0 4rem;

}



.modern-content {

    background: var(--card-gradient);

    border-radius: var(--border-radius-lg);

    padding: 2rem;

    box-shadow: var(--shadow-md);

    border: 1px solid rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(10px);

}



.modern-sidebar {

    padding-left: 1rem;

}



.modern-sidebar-card {

    background: var(--card-gradient);

    border: 1px solid rgba(255, 255, 255, 0.2);

    box-shadow: var(--shadow-sm);

    transition: all 0.3s var(--ease-out-cubic);

    overflow: hidden;

}



.modern-sidebar-card:hover {

    box-shadow: var(--shadow-lg);

}



.modern-card-header {

    background: var(--primary-gradient) !important;

    color: white !important;

    border: none;

    font-weight: 600;

    padding: 1rem 1.5rem;

}



/* ========================================
   UNIFIED SIDEBAR LIST ITEM STYLING
   ======================================== */

/* Base styling for all sidebar interactive items */
.modern-list-item,
.category_menu li a,
ul.vistip.newmembers li,
.newest-members-card .list-group-item {
    border: none !important;
    background: transparent !important;
    color: #4a5568 !important;
    font-weight: 500;
    position: relative;
    padding: 1rem 1.5rem !important;
    transition: all 0.3s var(--ease-out-cubic);
    overflow: hidden;
    display: block;
    text-decoration: none;
}

/* Unified animated left border for all sidebar items */
.modern-list-item::before,
.category_menu li a::before,
ul.vistip.newmembers li::before,
.newest-members-card .list-group-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary-gradient);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s var(--ease-out-cubic);
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

/* Unified hover states */
.modern-list-item:hover::before,
.category_menu li a:hover::before,
ul.vistip.newmembers li:hover::before,
.newest-members-card .list-group-item:hover::before {
    transform: scaleY(1);
    transform-origin: top;
}

.modern-list-item:hover,
.category_menu li a:hover,
ul.vistip.newmembers li:hover,
.newest-members-card .list-group-item:hover {
    background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%) !important;
    color: #2d3748 !important;
    /* Removed translateX to prevent text jumping */
}

/* Special handling for nested elements in sidebar items */
.modern-list-item:hover .badge,
.category_menu li a:hover .badge,
ul.vistip.newmembers li:hover .badge,
.newest-members-card .list-group-item:hover .badge {
    background: rgba(102, 126, 234, 0.1) !important;
    color: #667eea !important;
    border: 1px solid rgba(102, 126, 234, 0.2) !important;
}

/* Image hover effects for newest members */
.newest-members-card .list-group-item:hover img,
ul.vistip.newmembers li:hover img {
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

/* Text color adjustments for specific child elements */
.modern-list-item:hover strong,
.category_menu li a:hover strong,
ul.vistip.newmembers li:hover strong,
ul.vistip.newmembers li:hover a strong {
    color: #667eea !important;
}

/* ========================================
   PREMIUM SIDEBAR STYLING
   ======================================== */

.premium-sidebar-item {
    /* Uses unified sidebar styling as base */
}

.premium-screenshot {
    width: 48px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.premium-screenshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s var(--ease-out-cubic);
}

.premium-sidebar-item:hover .premium-screenshot img {
    transform: scale(1.1);
}

.premium-title {
    line-height: 1.4;
}

.premium-title strong {
    color: #2d3748;
    font-size: 0.9rem;
    font-weight: 600;
}

.premium-badge {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #b8860b;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.premium-category {
    font-size: 0.8rem;
}

.category-link {
    color: #667eea;
    font-weight: 500;
}

/* Premium item hover states */
.premium-sidebar-item:hover .premium-title strong {
    color: #667eea !important;
}

.premium-sidebar-item:hover .premium-badge {
    background: var(--primary-gradient) !important;
    color: white !important;
}

.premium-sidebar-item:hover .category-link {
    color: #2d3748 !important;
}

/* ========================================
   OVERALL STATS PLUGIN STYLING
   ======================================== */

.modern-stats-container {
    padding: 2rem 0;
}

.stats-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-gradient);
    border-radius: var(--border-radius-modern);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: var(--shadow-md);
}

.stats-page-title {
    font-size: 2.5rem;
    font-weight: 700;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.stats-main-card {
    border: none;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--card-gradient);
}

.stats-card-header {
    background: transparent;
    border: none;
}

.stats-nav-pills {
    background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);
    border-radius: 0;
    padding: 0.5rem;
    margin: 0;
}

.stats-nav-link {
    background: transparent !important;
    border: none !important;
    color: #4a5568 !important;
    font-weight: 500;
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius-modern);
    transition: all 0.3s var(--ease-out-cubic);
    position: relative;
    overflow: hidden;
}

.stats-nav-link:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    color: #2d3748 !important;
    transform: translateY(-2px);
}

.stats-nav-link.active {
    background: var(--primary-gradient) !important;
    color: white !important;
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.stats-nav-link i {
    font-size: 1rem;
}

.stats-card-body {
    padding: 2rem;
}

.stats-table-container {
    background: white;
    border-radius: var(--border-radius-modern);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.stats-table {
    margin: 0;
    font-size: 0.9rem;
}

.stats-table thead th {
    background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);
    border: none;
    padding: 1rem;
    font-weight: 600;
    color: #2d3748;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.stats-th-period {
    border-top-left-radius: var(--border-radius-modern);
    min-width: 140px;
    text-align: left;
}

.stats-th {
    border-top-right-radius: var(--border-radius-modern);
}

.stats-table tbody td {
    padding: 1rem;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    vertical-align: middle;
    text-align: center;
}

.stats-table tbody tr:hover {
    background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);
}

.stats-period-cell {
    font-weight: 600;
    color: #2d3748;
    text-align: left;
}

.stats-period-cell i {
    color: #667eea;
    font-size: 0.9rem;
}

.stats-number {
    text-align: center;
    font-weight: 500;
    font-family: 'Courier New', monospace;
    color: #4a5568;
    font-size: 0.95rem;
}

.stats-row-highlight {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 237, 78, 0.1) 100%);
}

.stats-row-highlight .stats-period-cell {
    color: #b8860b;
    font-weight: 700;
}

.stats-row-highlight .stats-number {
    color: #b8860b;
    font-weight: 600;
}

.stats-row-today {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(67, 90, 111, 0.1) 100%);
}

.stats-row-today .stats-period-cell {
    color: #667eea;
    font-weight: 700;
}

.stats-row-today .stats-number {
    color: #667eea;
    font-weight: 600;
}

.stats-overall {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2d3748 !important;
    text-align: center !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .stats-page-title {
        font-size: 2rem;
    }
    
    .stats-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .stats-nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    .stats-nav-link span {
        display: none;
    }
    
    .stats-card-body {
        padding: 1rem;
    }
    
    .stats-table thead th,
    .stats-table tbody td {
        padding: 0.75rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .stats-number {
        font-size: 0.85rem;
    }
}



/* ========================================

   MODERN RANKING CARDS

   ======================================== */

.modern-ranking-card {

    background: var(--card-gradient);

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: var(--border-radius-lg);

    box-shadow: var(--shadow-sm);

    transition: all 0.4s var(--ease-out-cubic);

    position: relative;

    overflow: hidden;

}



.modern-ranking-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 2px;

    background: var(--primary-gradient);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.4s var(--ease-out-cubic);

}



.modern-ranking-card:hover::before {

    transform: scaleX(1);

}



.modern-ranking-card:hover {

    box-shadow: var(--shadow-xl);

}



.rank-container {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.modern-rank {

    width: 60px;

    height: 60px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary-gradient);

    color: white;

    font-weight: 800;

    font-size: 1.4rem;

    box-shadow: 0 4px 12px rgba(71, 120, 255, 0.25);

    position: relative;

    transition: all 0.3s ease;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

    overflow: hidden;

}



.modern-rank::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);

    transform: rotate(-45deg);

    animation: shine 3s infinite;

}



@keyframes shine {

    0% { transform: translateX(-100%) translateY(-100%) rotate(-45deg); }

    50% { transform: translateX(100%) translateY(100%) rotate(-45deg); }

    100% { transform: translateX(-100%) translateY(-100%) rotate(-45deg); }

}



.modern-rank:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(71, 120, 255, 0.35);

}



.rank-number:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 24px rgba(71, 120, 255, 0.4);

}



/* Rank 1 - Gold - Regular table rows only */

.rank-1.modern-rank { 

    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);

    color: #333;

    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.35);

    text-shadow: none;

}



.rank-1.modern-rank:hover {

    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.45);

}



/* Rank 2 - Silver - Regular table rows only */

.rank-2.modern-rank { 

    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);

    color: #333;

    box-shadow: 0 4px 12px rgba(192, 192, 192, 0.35);

    text-shadow: none;

}



.rank-2.modern-rank:hover {

    box-shadow: 0 6px 20px rgba(192, 192, 192, 0.45);

}



/* Rank 3 - Bronze - Regular table rows only */

.rank-3.modern-rank { 

    background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%);

    color: white;

    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.35);

}



.rank-3.modern-rank:hover {

    box-shadow: 0 6px 20px rgba(205, 127, 50, 0.45);

}



/* Top ranking now uses standard modern-rank styling */



.rank-position-indicator {

    margin-top: 0.5rem;

    font-size: 0.75rem;

}



.modern-title {

    font-weight: 600;

    font-size: 1.25rem;

    margin-bottom: 0.5rem;

}



.title-link {

    color: #2d3748;

    text-decoration: none;

    transition: all 0.3s var(--ease-out-cubic);

    position: relative;

}



.title-link::after {

    content: '';

    position: absolute;

    bottom: -2px;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--primary-gradient);

    transition: width 0.3s var(--ease-out-cubic);

}



.title-link:hover::after {

    width: 100%;

}



.title-link:hover {

    color: #1a202c;

    transform: translateX(2px);

}



.modern-category-badge {

    background: var(--primary-gradient) !important;

    color: white !important;

    border: none;

    padding: 0.4rem 0.8rem;

    border-radius: 15px;

    font-weight: 500;

    font-size: 0.8rem;

}



.stats-link {

    color: #666;

    text-decoration: none;

    font-size: 0.85rem;

    font-weight: 500;

    transition: all 0.3s var(--ease-out-cubic);

}



.stats-link:hover {

    color: var(--primary-color);

    transform: translateX(2px);

}



.modern-description {

    color: #4a5568;

    line-height: 1.6;

    font-size: 0.9rem;

}



.site-stats-mini {

    margin-top: 1rem;

}



.stat-item {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1rem;

    background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);

    border-radius: 15px;

    font-size: 0.8rem;

    transition: all 0.3s var(--ease-out-cubic);

}



.stat-item:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-sm);

}



.stat-icon {

    color: var(--primary-color);

    font-size: 1rem;

}



.stat-label {

    color: #666;

    font-weight: 500;

}



.stat-value {

    color: #2d3748;

    font-weight: 600;

}



.btn-modern-vote {

    background: var(--primary-gradient);

    border: none;

    color: white;

    padding: 0.75rem 1.5rem;

    border-radius: 25px;

    font-weight: 600;

    transition: all 0.3s var(--ease-out-cubic);

    position: relative;

    overflow: hidden;

}



.btn-modern-vote:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-lg);

    color: white;

}



.vote-ripple {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.3);

    transform: translate(-50%, -50%);

    transition: all 0.6s var(--ease-out-cubic);

}



.btn-modern-vote:active .vote-ripple {

    width: 300px;

    height: 300px;

}



.card-accent {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: var(--primary-gradient);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.4s var(--ease-out-cubic);

}



.modern-ranking-card:hover .card-accent {

    transform: scaleX(1);

}



/* ========================================

   META INFORMATION STYLING

   ======================================== */

.site-meta {

    border-top: 1px solid rgba(0, 0, 0, 0.05);

    padding-top: 0.75rem;

}



.meta-item {

    transition: color 0.2s ease;

}



.meta-item i {

    opacity: 0.7;

    transition: opacity 0.2s ease;

}



.meta-separator {

    opacity: 0.3;

    font-size: 0.75rem;

}



a.meta-item:hover {

    color: var(--bs-primary) !important;

}



a.meta-item:hover i {

    opacity: 1;

}



/* ========================================

   ACTION BUTTONS STYLING

   ======================================== */

.action-buttons {

    align-items: stretch;

}



.btn-modern-primary,

.btn-modern-secondary {

    position: relative;

    padding: 0.625rem 1.25rem;

    font-weight: 600;

    border: none;

    border-radius: var(--border-radius);

    transition: all 0.3s var(--ease-out-cubic);

    overflow: hidden;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    white-space: nowrap;

}



.btn-modern-primary {

    background: var(--primary-gradient);

    color: white;

    box-shadow: 0 2px 8px rgba(71, 120, 255, 0.3);

}



.btn-modern-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 16px rgba(71, 120, 255, 0.4);

    color: white;

}



.btn-modern-secondary {

    background: white;

    color: var(--text-secondary);

    border: 2px solid var(--border-color);

}



.btn-modern-secondary:hover {

    background: var(--bg-secondary);

    color: var(--bs-primary);

    border-color: var(--bs-primary);

    transform: translateY(-2px);

}



.vote-form {

    margin: 0;

}



/* ========================================

   USER MENU STYLING

   ======================================== */

.modern-user-menu {

    background: white;

    border-bottom: 2px solid var(--border-color);

    padding: 0.5rem 0;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

}



.modern-user-nav {

    flex-wrap: wrap;

    gap: 0.25rem;

    padding: 0.5rem 0;

}



.modern-user-nav .nav-item {

    margin: 0;

}



.user-menu-link {

    color: var(--text-secondary) !important;

    padding: 0.5rem 1rem !important;

    border-radius: var(--border-radius);

    transition: all 0.2s ease;

    font-weight: 500;

    display: flex;

    align-items: center;

    white-space: nowrap;

}



.user-menu-link:hover {

    background: var(--bg-secondary);

    color: var(--bs-primary) !important;

    transform: translateX(2px);

}



.user-menu-link i {

    font-size: 1rem;

    opacity: 0.7;

    transition: opacity 0.2s ease;

}



.user-menu-link:hover i {

    opacity: 1;

}



/* Premium link special styling */

.premium-link {

    color: #b8860b !important;

}



.premium-link i {

    color: #ffd700;

}



.premium-link:hover {

    background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);

    color: #b8860b !important;

}



/* Logout link special styling */

.logout-link {

    color: #dc3545 !important;

}



.logout-link:hover {

    background: #ffe6e6;

    color: #dc3545 !important;

}



/* Mobile responsive */

@media (max-width: 768px) {

    .modern-user-nav {

        flex-direction: column;

        width: 100%;

    }

    

    .user-menu-link {

        width: 100%;

        justify-content: flex-start;

    }

}



/* ========================================

   MODERN FORM STYLING

   ======================================== */

.modern-form-container {

    max-width: 800px;

    margin: 0 auto;

    padding: 2rem 0;

}



.modern-edit-form,

.modern-join-form {

    background: white;

    border-radius: var(--border-radius-lg);

    box-shadow: var(--shadow-md);

    overflow: hidden;

}



.form-section {

    padding: 2rem;

    border-bottom: 1px solid var(--border-color);

}



.form-section:last-of-type {

    border-bottom: none;

}



.form-section-title {

    color: var(--text-primary);

    font-size: 1.25rem;

    font-weight: 600;

    margin-bottom: 1.5rem;

    display: flex;

    align-items: center;

}



.form-section-title i {

    color: var(--bs-primary);

    opacity: 0.8;

}



.form-label {

    color: var(--text-secondary);

    font-weight: 600;

    margin-bottom: 0.5rem;

    display: flex;

    align-items: center;

}



.form-label i {

    color: var(--bs-primary);

    opacity: 0.7;

    font-size: 0.9rem;

}



.form-control-modern {

    border: 2px solid var(--border-color);

    border-radius: var(--border-radius);

    padding: 0.75rem 1rem;

    transition: all 0.3s ease;

    background: var(--bg-secondary);

}



.form-control-modern:focus {

    background: white;

    border-color: var(--bs-primary);

    box-shadow: 0 0 0 0.25rem rgba(71, 120, 255, 0.1);

}



.form-control-modern::placeholder {

    color: #adb5bd;

}



.readonly-field {

    background: #f8f9fa !important;

    cursor: not-allowed;

    opacity: 0.8;

}



.banner-preview {

    background: var(--bg-secondary);

    padding: 1rem;

    border-radius: var(--border-radius);

    border: 2px dashed var(--border-color);

    text-align: center;

    margin-top: 0.5rem;

}



.banner-preview img {

    max-width: 468px;

    max-height: 60px;

}



.modern-checkbox .form-check-input {

    width: 1.25rem;

    height: 1.25rem;

    border: 2px solid var(--border-color);

    cursor: pointer;

}



.modern-checkbox .form-check-input:checked {

    background-color: var(--bs-primary);

    border-color: var(--bs-primary);

}



.modern-checkbox .form-check-label {

    cursor: pointer;

    color: var(--text-secondary);

    font-weight: 500;

    padding-left: 0.5rem;

}



.form-actions {

    padding: 1.5rem 2rem;

    background: var(--bg-secondary);

    text-align: center;

}



.btn-modern-primary {

    background: var(--primary-gradient);

    color: white;

    border: none;

    padding: 0.75rem 2rem;

    font-weight: 600;

    border-radius: var(--border-radius);

    transition: all 0.3s ease;

    box-shadow: 0 2px 8px rgba(71, 120, 255, 0.3);

}



.btn-modern-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 16px rgba(71, 120, 255, 0.4);

    color: white;

}



.btn-modern-primary i {

    font-size: 1.1rem;

}



/* Categories menu styling */

select.form-control {

    appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 1rem center;

    background-size: 12px;

    padding-right: 2.5rem;

}



/* Security Section Styling */

.security-section {

    background: var(--bg-secondary);

    border: 2px solid var(--border-color);

    border-radius: var(--border-radius-lg);

    padding: 1.5rem;

    height: 100%;

}



.security-title {

    color: var(--text-primary);

    font-size: 1rem;

    font-weight: 600;

    margin-bottom: 1rem;

    display: flex;

    align-items: center;

}



.security-title i {

    color: var(--bs-success);

    opacity: 0.8;

}



/* Captcha styling */

.security-section .form-group {

    margin-bottom: 1rem;

}



.security-section input[type="text"] {

    max-width: 150px;

}



/* ========================================

   LINK CODE STYLING

   ======================================== */

.modern-link-code-wrapper {

    background: white;

    border-radius: var(--border-radius-lg);

    box-shadow: var(--shadow-md);

    overflow: hidden;

}



.modern-info-alert {

    background: #e3f2fd;

    border: 1px solid #90caf9;

    color: #1565c0;

    border-radius: var(--border-radius);

    padding: 1rem;

    margin-bottom: 1.5rem;

}



.link-code-sections {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.link-code-item {

    background: var(--bg-secondary);

    border: 2px solid var(--border-color);

    border-radius: var(--border-radius-lg);

    padding: 1.5rem;

    transition: all 0.3s ease;

}



.link-code-item:hover {

    border-color: var(--bs-primary);

    box-shadow: 0 0 0 3px rgba(71, 120, 255, 0.1);

}



.link-code-title {

    color: var(--text-primary);

    font-size: 1.1rem;

    font-weight: 600;

    margin-bottom: 1rem;

    display: flex;

    align-items: center;

}



.link-code-title i {

    color: var(--bs-primary);

    opacity: 0.8;

}



.link-preview {

    background: white;

    padding: 1rem;

    border-radius: var(--border-radius);

    border: 1px solid var(--border-color);

    margin-bottom: 1rem;

    text-align: center;

    min-height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.code-container {

    position: relative;

}



.code-textarea {

    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;

    font-size: 0.875rem;

    background: white;

    border: 2px solid var(--border-color);

    border-radius: var(--border-radius);

    padding: 0.75rem;

    resize: none;

    margin-bottom: 0.5rem;

}



.code-textarea:focus {

    border-color: var(--bs-primary);

    box-shadow: 0 0 0 0.25rem rgba(71, 120, 255, 0.1);

}



.btn-copy {

    position: absolute;

    top: 0.5rem;

    right: 0.5rem;

    background: var(--bs-primary);

    color: white;

    border: none;

    padding: 0.25rem 0.75rem;

    border-radius: var(--border-radius);

    transition: all 0.2s ease;

}



.btn-copy:hover {

    background: #5a7fff;

    transform: translateY(-1px);

}



.btn-copy.copied {

    background: var(--bs-success);

}



.btn-copy.copied i::before {

    content: "\f633"; /* Bootstrap check icon */

}



/* ========================================

   TOP RANKING ITEM STYLING

   ======================================== */

.top-ranking-item {

    background: white;

    border-radius: var(--border-radius-lg);

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

    overflow: hidden;

    border-left: 4px solid var(--bs-primary);

    transition: all 0.3s ease;

}



.top-ranking-item:hover {

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

}



/* Top Header Section */

.top-rank-header {

    background: linear-gradient(135deg, var(--bg-secondary) 0%, #f8f9fa 100%);

    padding: 1rem 1.5rem;

    border-bottom: 1px solid var(--border-color);

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.rank-title-section {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    flex: 1;

    min-width: 0;

}



/* Rank container in top row */

.top-ranking-item .rank-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    flex-shrink: 0;

}



.title-beside-rank {

    flex: 1;

    min-width: 0;

}



.top-title-inline {

    font-size: 1.5rem;

    font-weight: 700;

    margin: 0;

    line-height: 1.3;

}



.top-title-inline a {

    color: var(--text-primary);

    text-decoration: none;

    transition: color 0.3s ease;

}



.top-title-inline a:hover {

    color: var(--bs-primary);

}



/* Top ranking uses standard modern-rank styling */



.rank-crown {

    font-size: 1.5rem;

}



.rank-badge.rank-1 .rank-crown {

    color: #ffd700;

}



.rank-badge.rank-2 .rank-crown {

    color: #c0c0c0;

}



.rank-badge.rank-3 .rank-crown {

    color: #cd7f32;

}



.top-ranking-item .rank-movement {

    font-size: 0.9rem;

    color: var(--text-muted);

    font-weight: 600;

    white-space: nowrap;

    padding-left: 1rem;

}



/* Content Section */

.top-content-section {

    padding: 1.5rem;

}



.top-screenshot {

    border-radius: var(--border-radius);

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    transition: transform 0.3s ease;

}



.top-screenshot:hover {

    transform: translateY(-2px);

}



/* Site Info */

.top-title {

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: 0.5rem;

}



.top-title a {

    color: var(--text-primary);

    text-decoration: none;

    transition: color 0.3s ease;

}



.top-title a:hover {

    color: var(--bs-primary);

}



.top-meta {

    display: flex;

    align-items: center;

    gap: 1rem;

    flex-wrap: wrap;

}



.top-category {

    background: var(--bs-primary);

    color: white;

    padding: 0.25rem 0.75rem;

    border-radius: 50px;

    font-size: 0.85rem;

    font-weight: 600;

}



.top-stats-link {

    color: var(--bs-primary);

    text-decoration: none;

    font-weight: 600;

    font-size: 0.9rem;

    padding: 0.25rem 0.5rem;

    border-radius: var(--border-radius);

    transition: all 0.3s ease;

}



.top-stats-link:hover {

    background: var(--bg-secondary);

    color: var(--bs-primary);

}



.top-description {

    color: var(--text-secondary);

    line-height: 1.6;

    font-size: 1rem;

}



/* Stats & Actions */

.top-stats-actions {

    background: var(--bg-secondary);

    padding: 1rem;

    border-radius: var(--border-radius);

    border: 1px solid var(--border-color);

}



.top-stat-item {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 0.75rem;

    background: white;

    border-radius: var(--border-radius);

    border: 1px solid var(--border-color);

    font-size: 0.9rem;

}



.top-stat-item i {

    font-size: 1.1rem;

}



.stat-value {

    font-weight: 700;

    color: var(--text-primary);

}



.stat-label {

    color: var(--text-muted);

    font-size: 0.8rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.btn-top-vote {

    background: var(--primary-gradient);

    color: white;

    border: none;

    padding: 0.5rem 1.25rem;

    font-weight: 600;

    border-radius: var(--border-radius);

    transition: all 0.3s ease;

    box-shadow: 0 2px 8px rgba(71, 120, 255, 0.3);

}



.btn-top-vote:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 16px rgba(71, 120, 255, 0.4);

    color: white;

}



/* Banner */

.top-banner {

    text-align: center;

    padding-top: 1rem;

    border-top: 1px solid var(--border-color);

}



/* Responsive */

@media (max-width: 768px) {

    .top-rank-header {

        padding: 0.75rem 1rem;

    }

    

    .rank-title-section {

        gap: 1rem;

        flex-direction: column;

        align-items: flex-start;

    }

    

    .top-ranking-item .rank-number {

        width: 60px;

        height: 60px;

        font-size: 1.5rem;

    }

    

    .rank-crown {

        font-size: 1.25rem;

    }

    

    .top-title-inline {

        font-size: 1.25rem;

    }

    

    .top-content-section {

        padding: 1rem;

    }

    

    .top-stats-actions .row {

        gap: 0.5rem;

    }

    

    .top-stat-item {

        font-size: 0.8rem;

        padding: 0.4rem 0.6rem;

    }

}



/* ========================================

   PREMIUM MEMBER STYLING

   ======================================== */

.premium-member-modern {

    background: var(--premium-card-gradient);

    border: 2px solid transparent;

    background-clip: padding-box;

    position: relative;

}



.premium-member-modern::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    border-radius: var(--border-radius-lg);

    padding: 2px;

    background: var(--premium-gradient);

    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    mask-composite: exclude;

    z-index: 0;

}



.premium-glow {

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    background: var(--premium-gradient);

    border-radius: var(--border-radius-lg);

    opacity: 0;

    transition: opacity 0.3s var(--ease-out-cubic);

    z-index: -1;

    filter: blur(10px);

}



.premium-member-modern:hover .premium-glow {

    opacity: 0.7;

}



.premium-ribbon {

    position: absolute;

    top: 15px;

    right: -8px;

    z-index: 10;

}



.premium-ribbon span {

    display: block;

    background: var(--premium-gradient);

    color: #333;

    text-align: center;

    font-weight: 700;

    font-size: 0.7rem;

    text-transform: uppercase;

    padding: 0.3rem 2rem;

    transform: rotate(35deg);

    box-shadow: var(--shadow-md);

    letter-spacing: 0.5px;

    position: relative;

}



.premium-ribbon span::before,

.premium-ribbon span::after {

    content: '';

    position: absolute;

    top: 100%;

    width: 0;

    height: 0;

    border-style: solid;

}



.premium-rank {

    background: var(--premium-gradient);

    color: #333;

    box-shadow: var(--shadow-premium);

    position: relative;

}



.rank-crown {

    position: absolute;

    top: -1px;

    right: 8px;

    background: #ffd700;

    color: #333;

    border-radius: 0%;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.90rem;

    box-shadow: var(--shadow-sm);

}



.premium-title-link {

    background: linear-gradient(135deg, #333 0%, #666 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-weight: 700;

}



.premium-badge-modern {

    background: var(--premium-gradient);

    color: #333;

    padding: 0.25rem 0.75rem;

    border-radius: 12px;

    font-weight: 700;

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    box-shadow: var(--shadow-sm);

}



.premium-category-badge {

    background: var(--premium-gradient) !important;

    color: #333 !important;

}



.premium-stats-link {

    color: #b8860b;

    font-weight: 600;

}



.premium-stats-link:hover {

    color: #daa520;

}



.premium-description {

    color: #5a5a5a;

    font-weight: 500;

}



.premium-banner-modern {

    background: linear-gradient(135deg, #fff8e1 0%, #fffbf0 100%);

    border-radius: var(--border-radius-modern);

    padding: 1rem;

    border: 2px solid #ffd700;

}



.premium-stat {

    background: linear-gradient(135deg, #fff8e1 0%, #ffd700 5%, #fff8e1 100%);

    border: 1px solid #ffd700;

}



.btn-premium-vote {

    background: var(--premium-gradient);

    border: none;

    color: #333;

    font-weight: 700;

    box-shadow: var(--shadow-premium);

    position: relative;

    overflow: hidden;

}



.btn-premium-vote:hover {

    color: #333;

    transform: translateY(-3px);

    box-shadow: 0 20px 40px rgba(255, 215, 0, 0.4);

}



.premium-vote-sparkle {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 1px);

    background-size: 20px 20px;

    opacity: 0;

    animation: sparkle 2s infinite;

}



@keyframes sparkle {

    0%, 100% { opacity: 0; transform: scale(0.8); }

    50% { opacity: 1; transform: scale(1.2); }

}



.btn-premium-outline {

    border: 2px solid #ffd700;

    color: #b8860b;

    background: transparent;

    transition: all 0.3s var(--ease-out-cubic);

}



.btn-premium-outline:hover {

    background: var(--premium-gradient);

    color: #333;

    transform: translateY(-2px);

}



.premium-card-accent {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: var(--premium-gradient);

}



.premium-sparkles {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    pointer-events: none;

    overflow: hidden;

}



.sparkle {

    position: absolute;

    width: 4px;

    height: 4px;

    background: #ffd700;

    border-radius: 50%;

    animation: float 3s infinite ease-in-out;

}



.sparkle-1 {

    top: 10%;

    left: 10%;

    animation-delay: 0s;

}



.sparkle-2 {

    top: 20%;

    right: 15%;

    animation-delay: 1s;

}



.sparkle-3 {

    bottom: 15%;

    left: 80%;

    animation-delay: 2s;

}



@keyframes float {

    0%, 100% { transform: translateY(0px) scale(1); opacity: 0.7; }

    50% { transform: translateY(-10px) scale(1.2); opacity: 1; }

}



/* ========================================

   MODERN FORM STYLING

   ======================================== */

.modern-login-section,

.modern-form-card {

    background: var(--card-gradient);

    border: 1px solid rgba(255, 255, 255, 0.3);

    box-shadow: var(--shadow-md);

    border-radius: var(--border-radius-lg);

    overflow: hidden;

}



.modern-registration-container {

    max-width: 800px;

    margin: 0 auto;

}



.registration-progress {

    background: white;

    border-radius: var(--border-radius-lg);

    padding: 2rem;

    box-shadow: var(--shadow-sm);

    margin-bottom: 2rem;

}



.progress-steps {

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: relative;

}



.progress-steps::before {

    content: '';

    position: absolute;

    top: 25px;

    left: 25px;

    right: 25px;

    height: 2px;

    background: #e2e8f0;

    z-index: 1;

}



.step {

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

    z-index: 2;

}



.step-number {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: #e2e8f0;

    color: #a0aec0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 600;

    font-size: 1.1rem;

    transition: all 0.3s var(--ease-out-cubic);

    margin-bottom: 0.5rem;

}



.step.active .step-number {

    background: var(--primary-gradient);

    color: white;

    box-shadow: var(--shadow-md);

}



.step-label {

    font-size: 0.9rem;

    font-weight: 500;

    color: #a0aec0;

    transition: all 0.3s var(--ease-out-cubic);

}



.step.active .step-label {

    color: #2d3748;

    font-weight: 600;

}



.form-step {

    display: none !important;

    opacity: 0;

    transform: translateX(20px);

    transition: all 0.3s ease;

}



.form-step.active {

    display: block !important;

    opacity: 1;

    transform: translateX(0);

    animation: slideIn 0.5s var(--ease-out-cubic);

}



/* Debug styling to ensure steps are visible when active */

.form-step.active .card {

    opacity: 1 !important;

    transform: none !important;

    visibility: visible !important;

}



.form-step.active {

    visibility: visible !important;

    height: auto !important;

    position: relative !important;

}



/* Ensure form navigation buttons are visible */

.form-navigation {

    position: relative;

    z-index: 100;

    margin-top: 2rem;

}



.form-navigation .btn {

    min-width: 120px;

}



/* Make sure all form elements in active steps are visible */

.form-step.active .form-control,

.form-step.active .form-label,

.form-step.active .form-text,

.form-step.active .card-body {

    visibility: visible !important;

    opacity: 1 !important;

}



/* Stronger rules for step visibility  */

.form-step[data-step="2"].active,

.form-step[data-step="3"].active {

    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;

    position: relative !important;

    z-index: 1 !important;

}



/* Form step styling - clean version */



@keyframes slideIn {

    from {

        opacity: 0;

        transform: translateX(30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



.input-group-text {

    background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);

    border-color: rgba(102, 126, 234, 0.2);

    color: var(--primary-color);

}



.form-control:focus {

    border-color: rgba(102, 126, 234, 0.5);

    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);

}



.password-strength {

    margin-top: 0.5rem;

}



.strength-bar {

    height: 4px;

    background: #e2e8f0;

    border-radius: 2px;

    overflow: hidden;

    margin-bottom: 0.25rem;

}



.strength-fill {

    height: 100%;

    width: 0%;

    background: var(--primary-gradient);

    transition: all 0.3s var(--ease-out-cubic);

}



.strength-text {

    font-size: 0.75rem;

    color: #666;

}



.form-navigation {

    background: white;

    padding: 2rem;

    border-radius: var(--border-radius-lg);

    box-shadow: var(--shadow-sm);

}



/* ========================================

   ENHANCED FOOTER

   ======================================== */

.modern-footer {

    background: var(--footer-gradient) !important;

    margin-top: 4rem;

    position: relative;

    overflow: hidden;

}



.modern-footer::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

}



.footer-section {

    position: relative;

    z-index: 2;

}



.footer-title {

    color: white;

    font-weight: 600;

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 1rem;

    position: relative;

    padding-bottom: 0.5rem;

}



.footer-title::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 40px;

    height: 2px;

    background: var(--primary-gradient);

}



.footer-stats li {

    display: flex;

    align-items: center;

    margin-bottom: 0.75rem;

    color: rgba(255, 255, 255, 0.8);

    transition: all 0.3s var(--ease-out-cubic);

}



.footer-stats li:hover {

    color: white;

    transform: translateX(5px);

}



.stat-icon {

    color: rgba(102, 126, 234, 0.8);

    margin-right: 0.5rem;

}



.stat-label {

    margin-right: 0.5rem;

}



.stat-value {

    color: #000;

    font-weight: 600;

}



.footer-divider {

    border-color: rgba(255, 255, 255, 0.1);

    margin: 2rem 0 1rem;

}



.footer-brand {

    margin-bottom: 1rem;

}



.footer-logo {

    border-radius: 8px;

    opacity: 0.9;

    transition: all 0.3s var(--ease-out-cubic);

}



.footer-logo:hover {

    opacity: 1;

    transform: scale(1.05);

}



.footer-credits {

    color: white !important;

    font-size: 0.85rem;

}



/* Enhanced Footer Navigation Links */

.modern-footer .footer-section ul.nav {

    list-style: none !important;

    padding: 0 !important;

    margin: 0 !important;

}



.modern-footer .footer-section ul.nav li {

    margin-bottom: 0.5rem !important;

    width: 100% !important;

    display: block !important;

}



.modern-footer .footer-section a {

    color: #b3d4fc !important;

    text-decoration: none !important;

    transition: all 0.3s ease !important;

    display: block !important;

    width: 100% !important;

    padding: 0.5rem 0.75rem !important;

    border-radius: 6px !important;

    border-left: 3px solid transparent !important;

    background: rgba(255, 255, 255, 0.05) !important;

    font-weight: 500 !important;

    box-sizing: border-box !important;

}



.modern-footer .footer-section a:hover {

    color: #ffffff !important;

    background: var(--primary-gradient) !important;

    border-left-color: #ffffff !important;

    transform: translateX(3px) !important;

    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3) !important;

}



/* Standardize All Footer Headings */

.modern-footer .footer-section h3,

.modern-footer .footer-section h4,

.modern-footer .footer-section h5 {

    color: #ffffff !important;

    font-size: 1.1rem !important;

    font-weight: 600 !important;

    margin-bottom: 1rem !important;

    padding-bottom: 0.5rem !important;

    text-transform: uppercase !important;

    letter-spacing: 0.5px !important;

}



/* Remove icons from headings that already have them in HTML */

.modern-footer .footer-section h5.footer-title {

    display: flex !important;

    align-items: center !important;

}



/* Add icons only to headings without them */

.modern-footer .footer-section h3:not(.footer-title) {

    display: flex !important;

    align-items: center !important;

}



.modern-footer .footer-section h3:not(.footer-title)::before {

    font-family: "bootstrap-icons" !important;

    margin-right: 0.5rem !important;

    color: #3498db !important;

}







/* Featured Member Section Styling */

.modern-footer .featured-section h4 {

    font-size: 1rem !important;

    margin-top: 1rem !important;

    margin-bottom: 0.5rem !important;

    border: none !important;

    padding-bottom: 0 !important;

}



.modern-footer .featured-section h4::before {

    content: none !important;

}



.modern-footer .featured-section h4 a {

    color: #3498db !important;

    text-decoration: none !important;

    font-weight: 600 !important;

}



.modern-footer .featured-section h4 a:hover {

    color: #ffffff !important;

}



.modern-footer .featured-section p {

    color: #b3d4fc !important;

    margin-bottom: 1rem !important;

    line-height: 1.5 !important;

}



.modern-footer .featured-section .badge {

    background: var(--primary-gradient) !important;

    color: white !important;

    padding: 0.4rem 0.8rem !important;

    border-radius: 20px !important;

    text-decoration: none !important;

    font-size: 0.8rem !important;

    font-weight: 500 !important;

    transition: all 0.3s ease !important;

}



.modern-footer .featured-section .badge:hover {

    transform: translateY(-2px) !important;

    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4) !important;

}



/* Newest Members List Styling */

.modern-footer .footer-section ul:not(.nav):not(.footer-stats) {

    list-style: none !important;

    padding: 0 !important;

    margin: 0 !important;

}



.modern-footer .footer-section ul:not(.nav):not(.footer-stats) li {

    margin-bottom: 0.5rem !important;

    width: 100% !important;

    display: block !important;

}



.modern-footer .footer-section ul:not(.nav):not(.footer-stats) li a {

    color: #b3d4fc !important;

    text-decoration: none !important;

    transition: all 0.3s ease !important;

    display: block !important;

    width: 100% !important;

    padding: 0.5rem 0.75rem !important;

    border-radius: 6px !important;

    border-left: 3px solid transparent !important;

    background: rgba(255, 255, 255, 0.05) !important;

    font-weight: 500 !important;

    box-sizing: border-box !important;

}



.modern-footer .footer-section ul:not(.nav):not(.footer-stats) li a:hover {

    color: #ffffff !important;

    background: var(--primary-gradient) !important;

    border-left-color: #ffffff !important;

    transform: translateX(3px) !important;

    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3) !important;

}



/* Footer Stats Styling */

.footer-stats {

    color: white !important;

}



.footer-stats .stat-label {

    color: #e3f2fd !important;

    font-weight: 500 !important;

}



.footer-stats .stat-value {

    color: #ffffff !important;

    font-weight: 600 !important;

}



.footer-stats .stat-icon {

    color: #60a5fa !important;

    opacity: 0.8 !important;

}



/* Footer List Styling */

.modern-footer ul {

    padding: 0 !important;

    margin: 0 !important;

}



.modern-footer ul li {

    list-style: none !important;

    margin-bottom: 0.5rem !important;

}



.modern-footer ul li a {

    color: #b3d4fc !important;

    text-decoration: none !important;

    transition: all 0.3s ease !important;

    padding: 0.25rem 0 !important;

    display: block !important;

}



.modern-footer ul li a:hover {

    color: #ffffff !important;

    padding-left: 0.5rem !important;

    border-left: 2px solid #3498db !important;

}



/* Footer Text Colors */

.modern-footer,

.modern-footer .footer-section,

.modern-footer p,

.modern-footer div {

    color: #e3f2fd !important;

}



.modern-footer .text-light,

.modern-footer .text-muted {

    color: #b3d4fc !important;

}



/* ========================================

   RESPONSIVE ENHANCEMENTS

   ======================================== */

@media (max-width: 768px) {

    .modern-sidebar {

        padding-left: 0;

        margin-top: 2rem;

    }

    

    .modern-rank {

        width: 50px;

        height: 50px;

        font-size: 1rem;

    }

    

    .modern-ranking-card {

        margin-bottom: 1rem;

    }

    

    .modern-content {

        padding: 1.5rem;

    }

    

    .progress-steps {

        flex-direction: column;

        gap: 1rem;

    }

    

    .progress-steps::before {

        display: none;

    }

    

    .vote-section {

        margin-top: 1rem;

        margin-left: 0 !important;

    }

}



@media (max-width: 576px) {

    .brand-text {

        display: none;

    }

    

    .modern-nav-link span {

        display: none;

    }

    

    .search-container {

        width: 100%;

    }

    

    .modern-content {

        padding: 1rem;

    }

}



/* ========================================

   SIDEBAR NEW MEMBERS STYLING

   ======================================== */

ul.vistip.newmembers {

    list-style: none;

    padding: 0;

    margin: 0;

    background: var(--card-gradient);

    border-radius: var(--border-radius-lg);

    box-shadow: var(--shadow-sm);

    border: 1px solid rgba(255, 255, 255, 0.2);

    overflow: hidden;

}



/* Removed individual styling - now uses unified sidebar styling */



ul.vistip.newmembers li:last-child {

    border-bottom: none;

}



/* Removed individual hover styling - now uses unified sidebar styling */



ul.vistip.newmembers li.center {

    text-align: left;

}



ul.vistip.newmembers li a {

    text-decoration: none;

    transition: all 0.3s var(--ease-out-cubic);

}



ul.vistip.newmembers li a strong {

    color: #2d3748;

    font-weight: 600;

    font-size: 1.1rem;

    display: inline-block;

    margin-bottom: 0.25rem;

    transition: all 0.3s var(--ease-out-cubic);

}



ul.vistip.newmembers li a:hover strong {

    color: #667eea;

}



ul.vistip.newmembers li br + text,

ul.vistip.newmembers li br ~ text {

    color: #666;

    font-size: 0.9rem;

    font-weight: 500;

}



ul.vistip.newmembers li a[href*="category"] {

    color: #667eea;

    font-weight: 500;

    text-decoration: none;

    padding: 0.25rem 0.5rem;

    border-radius: 12px;

    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);

    transition: all 0.3s var(--ease-out-cubic);

    display: inline-block;

    margin-top: 0.5rem;

}



ul.vistip.newmembers li a[href*="category"]:hover {

    background: var(--primary-gradient);

    color: white;

    transform: translateY(-1px);

    box-shadow: var(--shadow-sm);

}



/* Enhanced new member indicator */

ul.vistip.newmembers::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 2px;

    background: var(--primary-gradient);

}



ul.vistip.newmembers li::after {

    content: '🆕';

    position: absolute;

    top: 0.75rem;

    right: 1rem;

    font-size: 0.8rem;

    opacity: 0.7;

    transition: all 0.3s var(--ease-out-cubic);

}



ul.vistip.newmembers li:hover::after {

    opacity: 1;

    transform: scale(1.1);

}



/* ========================================

   TABLE ROW TEMPLATE ENHANCEMENTS

   ======================================== */

.ranking-item .rank-container {

    min-width: 80px;

}



.ranking-item .site-title {

    font-size: 1.2rem;

    line-height: 1.3;

    margin-bottom: 0.75rem;

}



.ranking-item .site-title .title-link {

    color: #2d3748;

    transition: all 0.3s var(--ease-out-cubic);

    font-weight: 600;

}



.ranking-item .site-title .title-link:hover {

    color: #667eea;

}



.ranking-item .site-meta {

    gap: 0.75rem;

}



.ranking-item .site-description {

    font-size: 0.95rem;

    line-height: 1.6;

    color: #4a5568;

}



.ranking-item .vote-section {

    min-width: 120px;

}



.ranking-item .btn-modern-vote,

.ranking-item .btn-premium-vote {

    min-width: 100px;

    font-weight: 600;

    border-radius: 25px;

}



.ranking-item .site-actions {

    margin-top: 0.75rem;

}



.ranking-item .stat-item {

    font-size: 0.85rem;

    padding: 0.4rem 0.8rem;

    border-radius: 12px;

    background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);

    border: 1px solid rgba(102, 126, 234, 0.1);

}



/* Premium Template Specific Styles */

.premium-member-modern .site-title {

    font-size: 1.25rem;

}



.premium-member-modern .premium-badge-modern {

    font-size: 0.7rem;

    padding: 0.3rem 0.7rem;

    border-radius: 12px;

    background: var(--premium-gradient);

    color: #333;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    box-shadow: var(--shadow-sm);

}



.premium-member-modern .premium-banner-modern {

    background: linear-gradient(135deg, #fff8e1 0%, #fffbf0 100%);

    border-radius: var(--border-radius-modern);

    padding: 1rem;

    border: 2px solid rgba(255, 215, 0, 0.3);

    box-shadow: inset 0 1px 3px rgba(255, 215, 0, 0.1);

}



.premium-member-modern .stat-item.premium-stat {

    background: linear-gradient(135deg, #fff8e1 0%, #ffd700 5%, #fff8e1 100%);

    border: 1px solid rgba(255, 215, 0, 0.3);

    color: #8b5a00;

}



.premium-member-modern .stat-item.premium-stat .stat-icon {

    color: #b8860b;

}



/* Responsive Improvements */

@media (max-width: 768px) {

    .ranking-item .vote-section {

        margin-top: 1rem;

        min-width: unset;

        width: 100%;

    }

    

    .ranking-item .vote-section .d-flex {

        flex-direction: row;

        justify-content: space-between;

        align-items: center;

    }

    

    .ranking-item .btn-modern-vote,

    .ranking-item .btn-premium-vote {

        min-width: 80px;

        padding: 0.5rem 1rem;

    }

    

    .ranking-item .site-title {

        font-size: 1.1rem;

    }

}



/* ========================================

   MODERN CATEGORY MENU STYLING

   ======================================== */

.category_menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Fix double padding issue - remove card-body padding for categories */
.modern-sidebar-card .card-body:has(.category_menu) {
    padding: 0 !important;
}

/* Fallback for browsers that don't support :has() */
.modern-sidebar-card .card-body {
    padding: 1rem 0;
}

.modern-sidebar-card .card-body:not(:has(.category_menu)) {
    padding: 1rem 1.5rem;
}



.category_menu li {

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    transition: all 0.3s var(--ease-out-cubic);

}



.category_menu li:last-child {

    border-bottom: none;

}



/* Individual category styling removed - now uses unified sidebar styling */



/* Individual category before/hover styling removed - now uses unified sidebar styling */



.category_menu li a:active {

    background: var(--primary-gradient);

    color: white;

}



/* Add icon support for category menu if needed */

.category_menu li a::after {

    content: '›';

    position: absolute;

    right: 1.5rem;

    top: 50%;

    transform: translateY(-50%);

    color: #a0adb8;

    font-weight: 600;

    transition: all 0.3s var(--ease-out-cubic);

}



.category_menu li a:hover::after {

    color: #667eea;

    transform: translateY(-50%) translateX(3px);

}



/* ========================================

   STATS PAGE LAYOUT FIXES

   ======================================== */



/* Fix breadcrumb alignment issues */

.modern-breadcrumb .breadcrumb-item + .breadcrumb-item::before {

    content: "/";

    color: #6c757d;

    float: none !important;

    padding-right: 0.5rem;

    vertical-align: middle !important;

    line-height: inherit;

    display: inline-block;

}



.breadcrumb-link {

    display: inline !important;

    vertical-align: middle !important;

}



/* Ensure proper 2-column layout works with Bootstrap grid */

.main-content-area {

    padding-top: 2rem;

}



/* Force Bootstrap grid to work properly on large screens */

@media (min-width: 992px) {

    .main-content-area .col-lg-9 {

        flex: 0 0 75%;

        max-width: 75%;

    }



    .main-content-area .col-lg-3 {

        flex: 0 0 25%;

        max-width: 25%;

    }

}



/* Responsive behavior for smaller screens */

@media (max-width: 991.98px) {

    .main-content-area .col-lg-9,

    .main-content-area .col-lg-3 {

        flex: 0 0 100%;

        max-width: 100%;

    }

}



/* Proper 2-column layout for stats page */

.stats-page-layout {

    display: flex;

    gap: 2rem;

    align-items: flex-start;

    margin-top: 2rem;

}



.stats-main-content {

    flex: 1;

    min-width: 0; /* Prevent flex item from growing beyond container */

}



.stats-sidebar-content {

    flex: 0 0 300px; /* Fixed width sidebar */

    position: sticky;

    top: 2rem;

}



/* Ensure proper responsive behavior for stats layout */

@media (max-width: 991.98px) {

    .stats-page-layout {

        flex-direction: column;

        gap: 2rem;

    }

    

    .stats-sidebar-content {

        flex: none;

        width: 100%;

        position: static;

    }

}



/* Statistics cards should be properly contained */

.stats-metrics-row {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    margin-bottom: 2rem;

}



.stats-metrics-row .col-sm-6.col-lg-3 {

    flex: 0 0 calc(25% - 0.75rem);

    min-width: 200px;

    max-width: calc(25% - 0.75rem);

}



@media (max-width: 991.98px) {

    .stats-metrics-row .col-sm-6.col-lg-3 {

        flex: 0 0 calc(50% - 0.5rem);

        max-width: calc(50% - 0.5rem);

    }

}



@media (max-width: 575.98px) {

    .stats-metrics-row .col-sm-6.col-lg-3 {

        flex: 0 0 100%;

        max-width: 100%;

    }

}



/* Ensure cards don't extend beyond container */

.stats-container,

.stats-dashboard {

    max-width: 100%;

    overflow-x: hidden;

}



/* Override any full-width sections that should be contained */

.stats-header-card,

.stats-info-card,

.stats-screenshot-card,

.stats-reviews-card,

.stats-table-card,

.stats-navigation-card {

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;

}



/* ========================================

   UTILITY CLASSES

   ======================================== */

.text-gradient {

    background: var(--primary-gradient);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.hover-lift {

    transition: transform 0.3s var(--ease-out-cubic);

}



.hover-lift:hover {

    transform: translateY(-4px);

}



.glass-effect {

    background: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

}



/* ========================================

   MODERN FORM ELEMENTS STYLING

   ======================================== */



/* Form Group Container */

.modern-form-group {

    margin-bottom: 2rem;

    position: relative;

}



/* Modern Form Labels */

.modern-form-label {

    font-weight: 600;

    color: #495057;

    margin-bottom: 0.75rem;

    display: block;

    font-size: 0.95rem;

    transition: all 0.3s ease;

}



.modern-fieldset-label {

    font-size: 1rem;

    margin-bottom: 1rem;

    padding-bottom: 0.5rem;

    border-bottom: 2px solid rgba(102, 126, 234, 0.1);

}



.label-indicator {

    color: #dc3545;

    margin-left: 0.25rem;

    font-weight: 400;

}



/* Input Wrappers */

.modern-input-wrapper,

.modern-select-wrapper {

    position: relative;

    display: block;

}



/* Modern Text Inputs */

.modern-form-input,

.modern-form-textarea {

    width: 100%;

    padding: 1rem 1.25rem;

    border: 2px solid #e9ecef;

    border-radius: var(--border-radius-modern);

    font-size: 1rem;

    font-weight: 400;

    line-height: 1.5;

    color: #495057;

    background: #ffffff;

    transition: all 0.3s var(--ease-out-cubic);

    box-shadow: var(--shadow-xs);

    position: relative;

    z-index: 1;

}



.modern-form-input:focus,

.modern-form-textarea:focus {

    outline: none;

    border-color: #667eea;

    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), var(--shadow-sm);

    background: #ffffff;

    transform: translateY(-1px);

}



.modern-form-textarea {

    resize: vertical;

    min-height: 120px;

}



/* Focus Line Animation */

.input-focus-line {

    position: absolute;

    bottom: 0;

    left: 50%;

    width: 0;

    height: 2px;

    background: var(--primary-gradient);

    transition: all 0.3s var(--ease-out-cubic);

    transform: translateX(-50%);

    z-index: 2;

}



.modern-form-input:focus + .input-focus-line,

.modern-form-textarea:focus + .input-focus-line,

.modern-form-select:focus + .select-arrow + .input-focus-line {

    width: 100%;

}



/* Modern Select Styling */

.modern-select-wrapper {

    position: relative;

}



.modern-form-select {

    width: 100%;

    padding: 1rem 3rem 1rem 1.25rem;

    border: 2px solid #e9ecef;

    border-radius: var(--border-radius-modern);

    font-size: 1rem;

    font-weight: 400;

    color: #495057;

    background: #ffffff;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    cursor: pointer;

    transition: all 0.3s var(--ease-out-cubic);

    box-shadow: var(--shadow-xs);

    position: relative;

    z-index: 1;

}



.modern-form-select:focus {

    outline: none;

    border-color: #667eea;

    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), var(--shadow-sm);

    transform: translateY(-1px);

}



.select-arrow {

    position: absolute;

    right: 1rem;

    top: 50%;

    transform: translateY(-50%);

    color: #6c757d;

    pointer-events: none;

    transition: all 0.3s ease;

    z-index: 2;

}



.modern-form-select:focus + .select-arrow {

    color: #667eea;

    transform: translateY(-50%) rotate(180deg);

}



/* Checkbox Styling */

.modern-checkbox-group,

.modern-radio-group {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.modern-checkbox-option,

.modern-radio-option {

    position: relative;

    transition: all 0.3s ease;

}



.modern-checkbox-input,

.modern-radio-input {

    position: absolute;

    opacity: 0;

    cursor: pointer;

    height: 0;

    width: 0;

}



.modern-checkbox-label,

.modern-radio-label {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    cursor: pointer;

    padding: 0.75rem 1rem;

    border-radius: var(--border-radius-modern);

    background: #ffffff;

    border: 2px solid #e9ecef;

    transition: all 0.3s var(--ease-out-cubic);

    position: relative;

    font-weight: 500;

    color: #495057;

}



.modern-checkbox-label:hover,

.modern-radio-label:hover {

    border-color: rgba(102, 126, 234, 0.3);

    background: rgba(102, 126, 234, 0.02);

    transform: translateY(-1px);

    box-shadow: var(--shadow-sm);

}



/* Custom Checkbox */

.checkbox-custom {

    width: 20px;

    height: 20px;

    border: 2px solid #d1d5db;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s var(--ease-out-cubic);

    background: #ffffff;

    flex-shrink: 0;

}



.checkbox-check {

    opacity: 0;

    transform: scale(0.5);

    transition: all 0.3s var(--ease-out-cubic);

    color: white;

    font-size: 0.75rem;

}



.modern-checkbox-input:checked + .modern-checkbox-label .checkbox-custom {

    background: var(--primary-gradient);

    border-color: #667eea;

    transform: scale(1.05);

}



.modern-checkbox-input:checked + .modern-checkbox-label .checkbox-check {

    opacity: 1;

    transform: scale(1);

}



.modern-checkbox-input:checked + .modern-checkbox-label {

    border-color: #667eea;

    background: rgba(102, 126, 234, 0.05);

}



/* Custom Radio Button */

.radio-custom {

    width: 20px;

    height: 20px;

    border: 2px solid #d1d5db;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s var(--ease-out-cubic);

    background: #ffffff;

    flex-shrink: 0;

    position: relative;

}



.radio-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: white;

    transform: scale(0);

    transition: all 0.3s var(--ease-out-cubic);

}



.modern-radio-input:checked + .modern-radio-label .radio-custom {

    background: var(--primary-gradient);

    border-color: #667eea;

    transform: scale(1.05);

}



.modern-radio-input:checked + .modern-radio-label .radio-dot {

    transform: scale(1);

}



.modern-radio-input:checked + .modern-radio-label {

    border-color: #667eea;

    background: rgba(102, 126, 234, 0.05);

}



/* Form Help Text */

.form-help-text {

    font-size: 0.875rem;

    color: #6c757d;

    margin-top: 0.5rem;

    opacity: 0;

    transform: translateY(-5px);

    transition: all 0.3s ease;

}



.modern-form-input:focus ~ .form-help-text,

.modern-form-textarea:focus ~ .form-help-text,

.modern-form-select:focus ~ .form-help-text {

    opacity: 1;

    transform: translateY(0);

}



/* Error States */

.modern-form-input.is-invalid,

.modern-form-textarea.is-invalid,

.modern-form-select.is-invalid {

    border-color: #dc3545;

    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);

}



.modern-checkbox-input.is-invalid + .modern-checkbox-label,

.modern-radio-input.is-invalid + .modern-radio-label {

    border-color: #dc3545;

    background: rgba(220, 53, 69, 0.05);

}



/* Form Button Styling */

.modern-form-submit {

    background: var(--primary-gradient);

    border: none;

    border-radius: var(--border-radius-modern);

    padding: 1rem 2rem;

    color: white;

    font-weight: 600;

    font-size: 1rem;

    cursor: pointer;

    transition: all 0.3s var(--ease-out-cubic);

    box-shadow: var(--shadow-sm);

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    text-decoration: none;

    border: none;

}



.modern-form-submit:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);

    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);

    color: white;

    text-decoration: none;

}



.modern-form-submit:active {

    transform: translateY(0);

    box-shadow: var(--shadow-xs);

}



.modern-form-submit:disabled {

    opacity: 0.6;

    cursor: not-allowed;

    transform: none;

    box-shadow: var(--shadow-xs);

}



/* Mobile Responsiveness for Forms */

@media (max-width: 768px) {

    .modern-form-group {

        margin-bottom: 1.5rem;

    }

    

    .modern-form-input,

    .modern-form-textarea,

    .modern-form-select {

        padding: 0.875rem 1rem;

        font-size: 16px; /* Prevents zoom on iOS */

    }

    

    .modern-checkbox-label,

    .modern-radio-label {

        padding: 0.875rem;

    }

    

    .modern-form-submit {

        width: 100%;

        justify-content: center;

        padding: 1rem;

    }

}



@media (max-width: 576px) {

    .modern-checkbox-group,

    .modern-radio-group {

        gap: 0.75rem;

    }

    

    .modern-form-label {

        font-size: 0.9rem;

    }

    

    .checkbox-custom,

    .radio-custom {

        width: 18px;

        height: 18px;

    }

    

    .checkbox-check {

        font-size: 0.7rem;

    }

    

    .radio-dot {

        width: 6px;

        height: 6px;

    }

}



/* Accessibility Improvements for Forms */

.modern-form-input:focus-visible,

.modern-form-textarea:focus-visible,

.modern-form-select:focus-visible {

    outline: 2px solid #667eea;

    outline-offset: 2px;

}



.modern-checkbox-input:focus-visible + .modern-checkbox-label,

.modern-radio-input:focus-visible + .modern-radio-label {

    outline: 2px solid #667eea;

    outline-offset: 2px;

}



/* Success State */

.modern-form-input.is-valid,

.modern-form-textarea.is-valid,

.modern-form-select.is-valid {

    border-color: #28a745;

    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);

}



.modern-checkbox-input.is-valid + .modern-checkbox-label,

.modern-radio-input.is-valid + .modern-radio-label {

    border-color: #28a745;

    background: rgba(40, 167, 69, 0.05);

}



/* ========================================

   ENHANCED MOBILE OPTIMIZATION

   ======================================== */



/* Touch-Friendly Sizing */

@media (pointer: coarse) {

    .modern-form-input,

    .modern-form-textarea,

    .modern-form-select,

    .modern-search-input {

        min-height: 48px; /* Minimum touch target size */

        padding: 0.875rem 1rem;

    }

    

    .modern-checkbox-label,

    .modern-radio-label {

        min-height: 48px;

        padding: 0.875rem 1rem;

    }

    

    .modern-search-btn,

    .btn-vote,

    .btn-rate,

    .modern-form-submit {

        min-height: 48px;

        padding: 0.875rem 1.5rem;

    }

    

    .stats-nav .nav-link {

        min-height: 48px;

        padding: 0.875rem 1rem;

    }

}



/* Mobile-First Responsive Improvements */

@media (max-width: 991.98px) {

    /* Search improvements */

    .modern-search-form {

        padding: 1.25rem;

    }

    

    .search-input-group {

        flex-direction: column;

        gap: 1rem;

    }

    

    .modern-search-btn {

        width: 100%;

        justify-content: center;

    }

    

    /* Statistics dashboard mobile improvements */

    .stats-header-card {

        padding: 1.5rem;

        text-align: center;

    }

    

    .site-title {

        font-size: 1.8rem;

    }

    

    .stats-nav {

        flex-direction: column;

        gap: 0.5rem;

    }

    

    .stats-nav .nav-link {

        width: 100%;

        justify-content: center;

        margin: 0;

    }

    

    /* Form improvements */

    .modern-form-group {

        margin-bottom: 1.5rem;

    }

    

    .modern-checkbox-group,

    .modern-radio-group {

        gap: 0.75rem;

    }

}



/* Tablet Specific Optimizations */

@media (min-width: 768px) and (max-width: 1199px) {

    .stats-metric-card {

        padding: 1.25rem;

    }

    

    .metric-value {

        font-size: 1.6rem;

    }

    

    .modern-search-form {

        padding: 1.75rem;

    }

    

    .stats-table {

        font-size: 0.9rem;

    }

}



/* Large Mobile Devices */

@media (max-width: 767.98px) {

    /* Improved touch targets */

    .advanced-link {

        padding: 0.75rem 1.5rem;

        margin: 0.5rem 0;

    }

    

    .breadcrumb-link {

        padding: 0.5rem;

        margin: 0.25rem;

    }

    

    /* Better spacing for mobile */

    .stats-dashboard {

        margin-top: 1.5rem;

    }

    

    .dashboard-header {

        margin-bottom: 1.5rem;

    }

    

    .stats-metric-card {

        padding: 1rem;

        text-align: center;

    }

    

    .metric-icon {

        margin: 0 auto 0.5rem;

    }

    

    /* Improved table readability */

    .stats-table-card {

        margin: 0 -0.5rem;

    }

    

    .stats-table thead th,

    .stats-table tbody td {

        padding: 0.75rem 0.5rem;

        font-size: 0.85rem;

    }

    

    /* Form optimizations */

    .modern-form-label {

        font-size: 0.95rem;

        margin-bottom: 0.5rem;

    }

    

    .form-help-text {

        font-size: 0.8rem;

    }

}



/* Small Mobile Devices */

@media (max-width: 575.98px) {

    /* Search form mobile optimization */

    .modern-search-form {

        padding: 1rem;

        margin: 1rem 0;

    }

    

    .modern-search-input {

        font-size: 16px; /* Prevents zoom on iOS */

        padding: 0.875rem 1rem 0.875rem 2.5rem;

    }

    

    .search-icon {

        left: 0.75rem;

    }

    

    /* Statistics mobile optimization */

    .site-title {

        font-size: 1.5rem;

        line-height: 1.3;

    }

    

    .dashboard-title {

        font-size: 1.4rem;

    }

    

    .dashboard-subtitle {

        font-size: 0.9rem;

    }

    

    /* Metric cards mobile layout */

    .stats-metric-card {

        flex-direction: column;

        text-align: center;

        padding: 1rem 0.75rem;

    }

    

    .metric-icon {

        margin-bottom: 0.75rem;

        width: 40px;

        height: 40px;

        font-size: 1rem;

    }

    

    .metric-value {

        font-size: 1.4rem;

    }

    

    .metric-label,

    .metric-sublabel {

        text-align: center;

    }

    

    /* Table mobile optimization */

    .stats-table-card .table-responsive {

        font-size: 0.8rem;

    }

    

    .period-label {

        font-size: 0.8rem;

    }

    

    .stats-number {

        font-size: 0.85rem;

    }

    

    /* Form mobile optimization */

    .modern-form-input,

    .modern-form-textarea,

    .modern-form-select {

        font-size: 16px; /* Prevents zoom on iOS */

        padding: 0.875rem;

    }

    

    .modern-select-wrapper .select-arrow {

        right: 0.75rem;

    }

    

    .modern-checkbox-label,

    .modern-radio-label {

        padding: 0.75rem;

        font-size: 0.9rem;

    }

    

    .checkbox-custom,

    .radio-custom {

        width: 18px;

        height: 18px;

    }

    

    .checkbox-check {

        font-size: 0.65rem;

    }

    

    .radio-dot {

        width: 6px;

        height: 6px;

    }

    

    /* Button mobile optimization */

    .modern-form-submit,

    .btn-vote,

    .btn-rate {

        width: 100%;

        justify-content: center;

        padding: 1rem;

        font-size: 0.95rem;

    }

}



/* iOS Specific Optimizations */

@supports (-webkit-touch-callout: none) {

    .modern-form-input,

    .modern-form-textarea,

    .modern-form-select,

    .modern-search-input {

        -webkit-appearance: none;

        border-radius: var(--border-radius-modern);

    }

    

    .modern-form-select {

        background-image: none;

    }

}



/* Android Specific Optimizations */

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {

    .modern-form-input,

    .modern-form-textarea,

    .modern-form-select {

        outline: none;

    }

}



/* High DPI Display Optimizations */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

    .rating-image,

    .screenshot-container img {

        image-rendering: -webkit-optimize-contrast;

        image-rendering: crisp-edges;

    }

}



/* Landscape Mobile Optimization */

@media (max-width: 896px) and (orientation: landscape) {

    .stats-header-card {

        padding: 1rem 1.5rem;

    }

    

    .site-title {

        font-size: 1.6rem;

    }

    

    .modern-search-form {

        padding: 1rem 1.5rem;

    }

    

    .search-input-group {

        flex-direction: row;

        align-items: center;

    }

    

    .modern-search-btn {

        width: auto;

        min-width: 120px;

    }

    

    .stats-nav {

        flex-direction: row;

        flex-wrap: wrap;

        justify-content: center;

    }

    

    .stats-nav .nav-link {

        width: auto;

        flex: 1;

        min-width: 120px;

    }

}



/* Touch and Hover State Improvements */

@media (hover: hover) and (pointer: fine) {

    /* Enhanced hover effects for desktop */

    .modern-search-form:hover {

        transform: translateY(-1px);

    }

    

    .stats-metric-card:hover .metric-icon {

        transform: scale(1.1);

    }

    

    .modern-checkbox-label:hover .checkbox-custom,

    .modern-radio-label:hover .radio-custom {

        transform: scale(1.05);

    }

}



@media (hover: none) and (pointer: coarse) {

    /* Remove hover effects on touch devices */

    .modern-search-form:hover {

        transform: none;

    }

    

    .stats-header-card:hover,

    .stats-info-card:hover,

    .stats-screenshot-card:hover,

    .stats-reviews-card:hover {

        transform: none;

    }

    

    .stats-metric-card:hover {

        transform: none;

    }

    

    .modern-checkbox-label:hover,

    .modern-radio-label:hover {

        transform: none;

    }

    

    /* Add active states for touch feedback */

    .modern-search-btn:active,

    .btn-vote:active,

    .btn-rate:active,

    .modern-form-submit:active {

        transform: scale(0.95);

        transition: transform 0.1s ease;

    }

    

    .modern-checkbox-label:active,

    .modern-radio-label:active {

        background: rgba(102, 126, 234, 0.1);

        transform: scale(0.98);

    }

    

    .stats-nav .nav-link:active {

        transform: scale(0.95);

        transition: transform 0.1s ease;

    }

}



/* Reduced Motion Support */

@media (prefers-reduced-motion: reduce) {

    * {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

    

    .input-focus-line,

    .checkbox-check,

    .radio-dot {

        transition: none;

    }

    

    .tab-pane {

        transition: none;

        opacity: 1;

        transform: none;

    }

}



/* Dark Mode Mobile Optimizations */

@media (prefers-color-scheme: dark) and (max-width: 768px) {

    .modern-search-form,

    .stats-header-card,

    .stats-info-card,

    .stats-screenshot-card,

    .stats-reviews-card,

    .stats-table-card {

        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);

        border-color: rgba(255, 255, 255, 0.1);

    }

    

    .modern-breadcrumb {

        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);

        border-color: rgba(255, 255, 255, 0.1);

    }

}



/* Print Optimizations for Mobile */

@media print {

    .modern-search-container,

    .stats-navigation-card,

    .modern-breadcrumb-container {

        display: none;

    }

    

    .stats-header-card,

    .stats-info-card,

    .stats-table-card {

        box-shadow: none;

        border: 1px solid #ccc;

        break-inside: avoid;

    }

    

    .stats-metric-card {

        width: 48%;

        display: inline-block;

        vertical-align: top;

        margin: 1%;

    }

    

    .tab-pane {

        display: block !important;

        opacity: 1 !important;

        page-break-inside: avoid;

    }

}



/* ========================================

   ENHANCED ANIMATIONS & MICRO-INTERACTIONS

   ======================================== */



/* Page Load Animations */

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeInLeft {

    from {

        opacity: 0;

        transform: translateX(-30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes fadeInRight {

    from {

        opacity: 0;

        transform: translateX(30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes scaleIn {

    from {

        opacity: 0;

        transform: scale(0.9);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}



@keyframes slideDown {

    from {

        opacity: 0;

        transform: translateY(-20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Apply animations to elements */

.modern-breadcrumb-container {

    animation: fadeInUp 0.6s var(--ease-out-cubic);

}



.stats-header-card {

    animation: scaleIn 0.8s var(--ease-out-cubic);

}



.stats-info-card {

    animation: fadeInLeft 0.8s var(--ease-out-cubic) 0.2s both;

}



.stats-screenshot-card {

    animation: fadeInRight 0.8s var(--ease-out-cubic) 0.4s both;

}



.stats-reviews-card {

    animation: fadeInUp 0.8s var(--ease-out-cubic) 0.6s both;

}



.modern-search-container {

    animation: slideDown 0.6s var(--ease-out-cubic) 0.3s both;

}



.stats-metric-card:nth-child(1) {

    animation: fadeInUp 0.6s var(--ease-out-cubic) 0.1s both;

}



.stats-metric-card:nth-child(2) {

    animation: fadeInUp 0.6s var(--ease-out-cubic) 0.2s both;

}



.stats-metric-card:nth-child(3) {

    animation: fadeInUp 0.6s var(--ease-out-cubic) 0.3s both;

}



.stats-metric-card:nth-child(4) {

    animation: fadeInUp 0.6s var(--ease-out-cubic) 0.4s both;

}



.stats-table-card {

    animation: fadeInUp 0.8s var(--ease-out-cubic) 0.5s both;

    background: #ffffff !important;

    border: 1px solid #e9ecef !important;

    border-radius: 12px !important;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;

}



/* Enhanced Metric Cards */

.stats-metric-card {

    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;

    border: 1px solid #e9ecef !important;

    border-radius: 16px !important;

    padding: 1.5rem !important;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

    position: relative !important;

    overflow: hidden !important;

}



.stats-metric-card:hover {

    transform: translateY(-2px) !important;

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;

}



.stats-metric-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, #2c3e50, #3498db, #5dade2);

    border-radius: 16px 16px 0 0;

}



.stats-metric-today::before {

    background: linear-gradient(90deg, #10b981, #34d399) !important;

}



.stats-metric-yesterday::before {

    background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;

}



.stats-metric-average::before {

    background: linear-gradient(90deg, #3b82f6, #60a5fa) !important;

}



.stats-metric-peak::before {

    background: linear-gradient(90deg, #ef4444, #f87171) !important;

}



.metric-content {

    text-align: center !important;

    padding-top: 0.5rem !important;

}



.metric-label {

    font-size: 0.875rem !important;

    font-weight: 600 !important;

    color: #6b7280 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.05em !important;

    margin-bottom: 0.5rem !important;

}



.metric-value {

    font-size: 2rem !important;

    font-weight: 700 !important;

    color: #111827 !important;

    line-height: 1 !important;

    margin-bottom: 0.25rem !important;

}



.metric-sublabel {

    font-size: 0.75rem !important;

    color: #9ca3af !important;

    font-weight: 500 !important;

}



/* Responsive metric cards */

@media (max-width: 768px) {

    .stats-metric-card {

        padding: 1.25rem !important;

    }

    

    .metric-value {

        font-size: 1.75rem !important;

    }

    

    .metric-icon {

        width: 40px !important;

        height: 40px !important;

        font-size: 1.125rem !important;

    }

}



.stats-navigation-card {

    animation: fadeInUp 0.6s var(--ease-out-cubic) 0.4s both;

}



/* Button Press Animations */

@keyframes buttonPress {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(0.95);

    }

    100% {

        transform: scale(1);

    }

}



.modern-search-btn:active,

.btn-vote:active,

.btn-rate:active,

.modern-form-submit:active {

    animation: buttonPress 0.2s ease-out;

}



/* Loading Pulse Animation */

@keyframes pulse {

    0% {

        opacity: 1;

        transform: scale(1);

    }

    50% {

        opacity: 0.7;

        transform: scale(1.05);

    }

    100% {

        opacity: 1;

        transform: scale(1);

    }

}



.loading-pulse {

    animation: pulse 1.5s ease-in-out infinite;

}



/* Checkbox/Radio Check Animation */

@keyframes checkScale {

    0% {

        transform: scale(0);

        opacity: 0;

    }

    50% {

        transform: scale(1.2);

        opacity: 0.8;

    }

    100% {

        transform: scale(1);

        opacity: 1;

    }

}



.modern-checkbox-input:checked + .modern-checkbox-label .checkbox-check {

    animation: checkScale 0.3s var(--ease-out-cubic);

}



.modern-radio-input:checked + .modern-radio-label .radio-dot {

    animation: checkScale 0.3s var(--ease-out-cubic);

}



/* Focus Ring Animation */

@keyframes focusRing {

    0% {

        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);

    }

    100% {

        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);

    }

}



.modern-form-input:focus,

.modern-form-textarea:focus,

.modern-form-select:focus {

    animation: focusRing 0.3s ease-out;

}



/* Card Hover Glow Effect */

@keyframes cardGlow {

    0% {

        box-shadow: var(--shadow-md);

    }

    100% {

        box-shadow: var(--shadow-lg), 0 0 20px rgba(102, 126, 234, 0.15);

    }

}



.stats-header-card:hover,

.stats-info-card:hover,

.stats-screenshot-card:hover,

.stats-reviews-card:hover {

    animation: cardGlow 0.3s ease-out forwards;

}



/* Metric Value Counter Animation */

@keyframes countUp {

    from {

        opacity: 0;

        transform: translateY(20px) scale(0.8);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



.metric-value {

    animation: countUp 0.8s var(--ease-out-cubic);

}



/* Search Input Typing Animation */

@keyframes typingGlow {

    0% {

        border-color: #e9ecef;

        box-shadow: var(--shadow-xs);

    }

    50% {

        border-color: rgba(102, 126, 234, 0.3);

        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);

    }

    100% {

        border-color: #667eea;

        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), var(--shadow-sm);

    }

}



.modern-search-input:focus {

    animation: typingGlow 0.4s ease-out;

}



/* Tab Transition Animations */

@keyframes tabSlideIn {

    from {

        opacity: 0;

        transform: translateX(20px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



.tab-content .tab-pane.active {

    animation: tabSlideIn 0.4s var(--ease-out-cubic);

}



/* Statistics Table Row Highlight Animation */

@keyframes rowHighlight {

    0% {

        background: transparent;

        transform: translateX(0);

    }

    50% {

        background: rgba(102, 126, 234, 0.1);

        transform: translateX(5px);

    }

    100% {

        background: rgba(102, 126, 234, 0.05);

        transform: translateX(0);

    }

}



.stats-table tbody tr:hover {

    animation: rowHighlight 0.3s ease-out;

}



/* Form Success Animation */

@keyframes successPulse {

    0% {

        border-color: #28a745;

        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);

    }

    100% {

        border-color: #28a745;

        box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.1);

    }

}



.modern-form-input.is-valid,

.modern-form-textarea.is-valid,

.modern-form-select.is-valid {

    animation: successPulse 0.5s ease-out;

}



/* Error Shake Animation */

@keyframes errorShake {

    0%, 100% {

        transform: translateX(0);

    }

    25% {

        transform: translateX(-5px);

    }

    75% {

        transform: translateX(5px);

    }

}



.modern-form-input.is-invalid,

.modern-form-textarea.is-invalid,

.modern-form-select.is-invalid {

    animation: errorShake 0.5s ease-out;

}



/* Loading Spinner for Buttons */

@keyframes buttonSpin {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}



.modern-search-btn.loading::after,

.modern-form-submit.loading::after {

    animation: buttonSpin 1s linear infinite;

}



/* Progressive Enhancement: Only animate if supported */

@supports (animation: fadeInUp 1s) {

    .stats-container > * {

        opacity: 0;

        animation: fadeInUp 0.6s var(--ease-out-cubic) forwards;

    }

    

    .stats-container > *:nth-child(1) { animation-delay: 0.1s; }

    .stats-container > *:nth-child(2) { animation-delay: 0.2s; }

    .stats-container > *:nth-child(3) { animation-delay: 0.3s; }

    .stats-container > *:nth-child(4) { animation-delay: 0.4s; }

    .stats-container > *:nth-child(5) { animation-delay: 0.5s; }

}



/* Advanced Micro-interactions */

.modern-checkbox-label,

.modern-radio-label {

    position: relative;

    overflow: hidden;

}



.modern-checkbox-label::before,

.modern-radio-label::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    background: rgba(102, 126, 234, 0.1);

    border-radius: 50%;

    transform: translate(-50%, -50%);

    transition: width 0.3s ease, height 0.3s ease;

    z-index: 0;

}



.modern-checkbox-input:checked + .modern-checkbox-label::before,

.modern-radio-input:checked + .modern-radio-label::before {

    width: 100%;

    height: 100%;

}



/* Stagger Animation Utility */

.stagger-animation > * {

    opacity: 0;

    transform: translateY(20px);

    animation: fadeInUp 0.6s var(--ease-out-cubic) forwards;

}



.stagger-animation > *:nth-child(1) { animation-delay: 0.1s; }

.stagger-animation > *:nth-child(2) { animation-delay: 0.2s; }

.stagger-animation > *:nth-child(3) { animation-delay: 0.3s; }

.stagger-animation > *:nth-child(4) { animation-delay: 0.4s; }

.stagger-animation > *:nth-child(5) { animation-delay: 0.5s; }



/* Performance Optimizations */

.modern-search-form,

.stats-header-card,

.stats-info-card,

.stats-screenshot-card,

.stats-reviews-card,

.stats-table-card,

.stats-metric-card,

.modern-form-input,

.modern-form-textarea,

.modern-form-select,

.modern-checkbox-label,

.modern-radio-label {

    will-change: transform, opacity;

}



/* Reduce animations on low-performance devices */

@media (prefers-reduced-motion: reduce) {

    .modern-breadcrumb-container,

    .stats-header-card,

    .stats-info-card,

    .stats-screenshot-card,

    .stats-reviews-card,

    .modern-search-container,

    .stats-metric-card,

    .stats-table-card,

    .stats-navigation-card {

        animation: none;

        opacity: 1;

        transform: none;

    }

    

    .tab-content .tab-pane.active {

        animation: none;

    }

    

    .stats-container > * {

        opacity: 1;

        animation: none;

    }

}



/* ========================================

   NEWEST MEMBERS PLUGIN STYLING

   ======================================== */

/* Individual newest-members styling removed - now uses unified sidebar styling */



/* Individual newest-members hover styling removed - now uses unified sidebar styling */



.newest-members-card .list-group-item:hover img {

    transform: scale(1.05);

    box-shadow: var(--shadow-sm);

}



.newest-members-card img {

    transition: all 0.3s var(--ease-out-cubic);

    border: 2px solid rgba(255, 255, 255, 0.8);

}



.newest-members-card .text-muted:hover {

    color: var(--primary-color) !important;

}