/**
 * SlotsGamblers Top 10 Casinos Sidebar - Frontend Styles
 * 
 * @package SlotsGamblersTop10CasinosSidebar
 * @version 1.1.0
 */

/* ========================================
   CSS Variables - SlotsGamblers Brand
   ======================================== */
:root {
    /* Brand Colors */
    --sgcstop10-purple: #9333EA;
    --sgcstop10-purple-dark: #6B21A8;
    --sgcstop10-purple-light: #F3E8FF;
    --sgcstop10-orange: #FF8C42;
    --sgcstop10-orange-light: #FFF4E6;
    --sgcstop10-green: #10B981;
    --sgcstop10-green-light: #D1FAE5;
    --sgcstop10-blue: #3B82F6;
    --sgcstop10-red: #EF4444;
    --sgcstop10-yellow: #F59E0B;
    --sgcstop10-white: #FFFFFF;
    --sgcstop10-gray-light: #F7F7F7;
    --sgcstop10-gray-medium: #E0E0E0;
    --sgcstop10-gray-dark: #6B7280;
    --sgcstop10-black: #1A1A1A;
    --sgcstop10-text-primary: #1A1A1A;
    --sgcstop10-text-secondary: #6B7280;
    --sgcstop10-text-muted: #9CA3AF;
    --sgcstop10-border-color: #E0E0E0;
    --sgcstop10-gradient: linear-gradient(135deg, #9333EA 0%, #FF8C42 100%);
    
    /* Spacing */
    --sgcstop10-space-xs: 0.25rem;
    --sgcstop10-space-sm: 0.5rem;
    --sgcstop10-space-md: 1rem;
    --sgcstop10-space-lg: 1.5rem;
    --sgcstop10-space-xl: 2rem;
    --sgcstop10-space-2xl: 3rem;
    
    /* Border Radius */
    --sgcstop10-radius-sm: 0.25rem;
    --sgcstop10-radius-md: 0.5rem;
    --sgcstop10-radius-lg: 0.75rem;
    --sgcstop10-radius-xl: 1rem;
    --sgcstop10-radius-2xl: 1.5rem;
}

/* ========================================
   Container - Full Width Support
   ======================================== */
.sgcstop10-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

/* ========================================
   Main Sidebar Widget
   ======================================== */
.sgcstop10-sidebar {
    background: var(--sgcstop10-white);
    border: 0.125rem solid var(--sgcstop10-border-color);
    border-radius: var(--sgcstop10-radius-xl);
    padding: var(--sgcstop10-space-lg);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
    height: fit-content;
    max-width: 26rem;
    width: 100%;
    margin: 0 auto;
}

/* ========================================
   Header Section
   ======================================== */
.sgcstop10-header {
    display: flex;
    align-items: center;
    gap: var(--sgcstop10-space-sm);
    margin-bottom: var(--sgcstop10-space-lg);
    padding-bottom: var(--sgcstop10-space-md);
    border-bottom: 0.125rem solid var(--sgcstop10-border-color);
}

.sgcstop10-header-icon {
    font-size: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--sgcstop10-purple);
}

.sgcstop10-header-icon svg {
    width: 100%;
    height: 100%;
}

.sgcstop10-header-title-wrapper {
    flex: 1;
}

.sgcstop10-header-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--sgcstop10-text-primary);
    line-height: 1.2;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sgcstop10-header-subtitle {
    font-size: 0.6875rem;
    color: var(--sgcstop10-text-secondary);
    margin-top: 0.125rem;
    margin-bottom: 0;
}

.sgcstop10-ads-disclosure {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    color: var(--sgcstop10-text-muted);
    padding: 0.125rem 0.375rem;
    background: var(--sgcstop10-gray-light);
    border-radius: var(--sgcstop10-radius-sm);
}

.sgcstop10-icon-inline {
    width: 0.75rem;
    height: 0.75rem;
    display: inline-block;
    vertical-align: middle;
}

/* ========================================
   Navigation Tabs
   ======================================== */
.sgcstop10-nav {
    display: flex;
    gap: 0.375rem;
    margin-bottom: var(--sgcstop10-space-md);
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
}

.sgcstop10-nav::-webkit-scrollbar {
    height: 0.25rem;
}

.sgcstop10-nav::-webkit-scrollbar-track {
    background: var(--sgcstop10-gray-light);
    border-radius: var(--sgcstop10-radius-sm);
}

.sgcstop10-nav::-webkit-scrollbar-thumb {
    background: var(--sgcstop10-gray-medium);
    border-radius: var(--sgcstop10-radius-sm);
}

.sgcstop10-nav-tab {
    padding: 0.375rem 0.75rem;
    border: 0.0625rem solid var(--sgcstop10-border-color);
    border-radius: var(--sgcstop10-radius-md);
    background: var(--sgcstop10-white);
    color: var(--sgcstop10-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    user-select: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sgcstop10-nav-tab:hover {
    background: var(--sgcstop10-purple-light);
    border-color: var(--sgcstop10-purple);
    color: var(--sgcstop10-purple);
    transform: translateY(-0.0625rem);
}

.sgcstop10-nav-tab.active {
    background: var(--sgcstop10-purple);
    color: var(--sgcstop10-white);
    border-color: var(--sgcstop10-purple);
    box-shadow: 0 0.125rem 0.375rem rgba(147, 51, 234, 0.3);
}

/* ========================================
   Casino Cards List
   ======================================== */
.sgcstop10-casino-list {
    display: flex;
    flex-direction: column;
    gap: var(--sgcstop10-space-sm);
}

.sgcstop10-casino-card {
    background: var(--sgcstop10-white);
    border: 0.125rem solid var(--sgcstop10-border-color);
    border-radius: var(--sgcstop10-radius-lg);
    padding: var(--sgcstop10-space-md);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: none;
}

.sgcstop10-casino-card.sgcstop10-visible {
    display: block;
}

.sgcstop10-casino-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0.25rem;
    height: 100%;
    background: var(--sgcstop10-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sgcstop10-casino-card:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.5rem 1rem rgba(147, 51, 234, 0.15);
    border-color: var(--sgcstop10-purple);
}

.sgcstop10-casino-card:hover::before {
    opacity: 1;
}

/* Badge Styles */
.sgcstop10-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--sgcstop10-radius-sm);
    z-index: 10;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sgcstop10-badge-top {
    background: linear-gradient(135deg, #FF1744 0%, #F50057 100%);
    color: var(--sgcstop10-white);
}

.sgcstop10-badge-exclusif {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: var(--sgcstop10-black);
}

.sgcstop10-badge-nouveau {
    background: linear-gradient(135deg, #7C4DFF 0%, #651FFF 100%);
    color: var(--sgcstop10-white);
}

/* ========================================
   Casino Card Top Section
   ======================================== */
.sgcstop10-casino-card-top {
    display: flex;
    align-items: center;
    gap: var(--sgcstop10-space-sm);
    margin-bottom: var(--sgcstop10-space-sm);
}

.sgcstop10-casino-rank {
    width: 2rem;
    height: 2rem;
    background: var(--sgcstop10-gradient);
    color: var(--sgcstop10-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 0.125rem 0.5rem rgba(147, 51, 234, 0.3);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sgcstop10-casino-logo {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%);
    border-radius: var(--sgcstop10-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 0.0625rem solid var(--sgcstop10-border-color);
    position: relative;
    overflow: hidden;
}

.sgcstop10-casino-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sgcstop10-casino-info {
    flex: 1;
    text-align: left;
    padding-left: 1.25rem;
}

.sgcstop10-casino-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--sgcstop10-text-primary);
    line-height: 1.3;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ========================================
   Rating Section
   ======================================== */
.sgcstop10-casino-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.125rem;
}

.sgcstop10-rating-stars {
    display: flex;
    gap: 0.0625rem;
    font-size: 0.625rem;
}

.sgcstop10-star {
    width: 0.75rem;
    height: 0.75rem;
    display: inline-block;
}

.sgcstop10-rating-value {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sgcstop10-text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sgcstop10-rating-max {
    font-size: 0.6875rem;
    color: var(--sgcstop10-text-muted);
}

/* ========================================
   Bonus Section
   ======================================== */
.sgcstop10-casino-bonus {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--sgcstop10-purple);
    background: var(--sgcstop10-purple-light);
    padding: 0.5rem 0.75rem;
    border-radius: var(--sgcstop10-radius-md);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ========================================
   Payment Icons
   ======================================== */
.sgcstop10-payment-icons {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    justify-content: center;
    padding: 0.375rem 0;
}

.sgcstop10-payment-icon {
    width: 1.75rem;
    height: 1.25rem;
    background: var(--sgcstop10-white);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.125rem solid var(--sgcstop10-border-color);
    box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.06);
    color: var(--sgcstop10-text-secondary);
}

.sgcstop10-more-payments {
    font-size: 0.625rem;
    color: var(--sgcstop10-text-secondary);
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ========================================
   Feature Badges
   ======================================== */
.sgcstop10-features {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-bottom: var(--sgcstop10-space-sm);
}

.sgcstop10-feature-badge {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    border-radius: var(--sgcstop10-radius-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sgcstop10-feature-providers {
    background: var(--sgcstop10-purple-light);
    color: var(--sgcstop10-purple);
}

.sgcstop10-feature-games {
    background: var(--sgcstop10-orange-light);
    color: var(--sgcstop10-orange);
}

.sgcstop10-feature-license {
    background: var(--sgcstop10-green-light);
    color: var(--sgcstop10-green);
}

/* ========================================
   Action Buttons
   ======================================== */
.sgcstop10-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sgcstop10-play-btn {
    background: var(--sgcstop10-purple);
    color: var(--sgcstop10-white);
    padding: 0.625rem 1.5rem;
    border-radius: var(--sgcstop10-radius-md);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 0.125rem 0.5rem rgba(147, 51, 234, 0.3);
    border: none;
    cursor: pointer;
    flex: 1;
    display: inline-block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sgcstop10-play-btn:hover {
    background: var(--sgcstop10-purple-dark);
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.25rem 0.75rem rgba(147, 51, 234, 0.4);
    color: var(--sgcstop10-white);
    text-decoration: none;
}

.sgcstop10-review-link {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--sgcstop10-text-secondary);
    text-decoration: underline;
    text-align: right;
    transition: color 0.3s ease;
    white-space: nowrap;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sgcstop10-review-link:hover {
    color: var(--sgcstop10-purple);
}

/* ========================================
   Animations
   ======================================== */
@keyframes sgcstop10FadeIn {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sgcstop10-casino-card.sgcstop10-animate {
    animation: sgcstop10FadeIn 0.4s ease-in forwards;
}

/* ========================================
   Responsive - Large Desktop (32" displays)
   ======================================== */
@media (min-width: 1920px) {
    .sgcstop10-container {
        max-width: 100% !important;
    }
    
    .sgcstop10-sidebar {
        max-width: 28rem;
    }
}

/* ========================================
   Responsive - Desktop & Laptop
   ======================================== */
@media (min-width: 1200px) {
    .sgcstop10-sidebar {
        max-width: 26rem;
    }
}

/* ========================================
   Responsive - Tablet
   ======================================== */
@media (min-width: 768px) and (max-width: 1199px) {
    .sgcstop10-sidebar {
        max-width: 100%;
    }
}

/* ========================================
   Responsive - Mobile (Full-Width Edge-to-Edge)
   ======================================== */
@media (max-width: 767px) {
    .sgcstop10-container {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(-50vw + 50%) !important;
        position: relative;
    }
    
    .elementor-element .sgcstop10-container {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(-50vw + 50%) !important;
    }
    
    .sgcstop10-sidebar {
        max-width: 100% !important;
        margin: 0 auto !important;
        border: 0.125rem solid var(--sgcstop10-border-color) !important;
        border-radius: 0.875rem !important;
        padding: 0.875rem !important;
        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08) !important;
    }
    
    /* Header - Mobile Goldilocks */
    .sgcstop10-header {
        gap: 0.5rem !important;
        margin-bottom: 0.75rem !important;
        padding-bottom: 0.625rem !important;
    }
    
    .sgcstop10-header-icon {
        font-size: 1.375rem !important;
    }
    
    .sgcstop10-header-title {
        font-size: 1.0625rem !important;
        line-height: 1.25 !important;
    }
    
    .sgcstop10-header-subtitle {
        font-size: 0.6875rem !important;
    }
    
    /* Navigation - Mobile */
    .sgcstop10-nav {
        margin-bottom: 0.75rem !important;
        gap: 0.375rem !important;
    }
    
    .sgcstop10-nav-tab {
        padding: 0.4375rem 0.75rem !important;
        font-size: 0.6875rem !important;
    }
    
    /* Casino Cards - Mobile */
    .sgcstop10-casino-list {
        gap: 0.625rem !important;
    }
    
    .sgcstop10-casino-card {
        padding: 0.75rem !important;
    }
    
    .sgcstop10-casino-card-top {
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .sgcstop10-casino-rank {
        width: 1.75rem !important;
        height: 1.75rem !important;
        font-size: 0.8125rem !important;
    }
    
    .sgcstop10-casino-logo {
        width: 2.75rem !important;
        height: 2.75rem !important;
    }
    
    .sgcstop10-casino-name {
        font-size: 0.8125rem !important;
    }
    
    .sgcstop10-rating-value {
        font-size: 0.8125rem !important;
    }
    
    .sgcstop10-casino-bonus {
        font-size: 0.875rem !important;
    }
    
    .sgcstop10-feature-badge {
        font-size: 0.5625rem !important;
        padding: 0.1875rem 0.375rem !important;
    }
    
    .sgcstop10-play-btn {
        font-size: 0.75rem !important;
        padding: 0.625rem 1.5rem !important;
    }
    
    .sgcstop10-review-link {
        font-size: 0.6875rem !important;
    }
}

/* ========================================
   Responsive - Small Mobile
   ======================================== */
@media (max-width: 479px) {
    .sgcstop10-sidebar {
        padding: 0.75rem !important;
    }
    
    .sgcstop10-header {
        gap: 0.4375rem !important;
        margin-bottom: 0.625rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    .sgcstop10-header-icon {
        font-size: 1.25rem !important;
    }
    
    .sgcstop10-header-title {
        font-size: 1rem !important;
    }
    
    .sgcstop10-header-subtitle {
        font-size: 0.625rem !important;
    }
    
    .sgcstop10-nav-tab {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.625rem !important;
    }
    
    .sgcstop10-casino-card {
        padding: 0.625rem !important;
    }
    
    .sgcstop10-casino-rank {
        width: 1.625rem !important;
        height: 1.625rem !important;
        font-size: 0.75rem !important;
    }
    
    .sgcstop10-casino-logo {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    .sgcstop10-casino-name {
        font-size: 0.75rem !important;
    }
    
    .sgcstop10-rating-value {
        font-size: 0.75rem !important;
    }
    
    .sgcstop10-casino-bonus {
        font-size: 0.8125rem !important;
        padding: 0.4375rem 0.625rem !important;
    }
    
    .sgcstop10-payment-icon {
        width: 1.625rem !important;
        height: 1.125rem !important;
    }
    
    .sgcstop10-feature-badge {
        font-size: 0.53125rem !important;
        padding: 0.15625rem 0.3125rem !important;
    }
    
    .sgcstop10-play-btn {
        font-size: 0.6875rem !important;
        padding: 0.5625rem 1.25rem !important;
    }
    
    .sgcstop10-review-link {
        font-size: 0.625rem !important;
    }
}