/**
 * SlotsGamblers Symbols Paytable - Frontend Styles
 * 
 * @package SlotsGamblersSymbolsPaytable
 * @version 1.2.7
 * @description Professional symbols paytable widget styles with full responsive support
 */

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
    --sgsp-color-purple: #9333EA;
    --sgsp-color-green: #10B981;
    --sgsp-color-white: #FFFFFF;
    --sgsp-text-primary: #1A1A1A;
    --sgsp-text-secondary: #6B7280;
    --sgsp-border-color: #E0E0E0;
    --sgsp-spacing-sm: 0.5rem;
    --sgsp-spacing-md: 1rem;
    --sgsp-spacing-lg: 1.5rem;
    --sgsp-spacing-xl: 2rem;
    --sgsp-radius-md: 0.5rem;
    --sgsp-radius-lg: 0.75rem;
    --sgsp-radius-xl: 1rem;
}

/* ============================================
   MAIN CONTAINER
   ============================================ */
.sgsp-symbols-section {
    background: var(--sgsp-color-white);
    border: 0.0625rem solid var(--sgsp-border-color);
    border-radius: var(--sgsp-radius-xl);
    padding: var(--sgsp-spacing-xl);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: var(--sgsp-text-primary);
    box-sizing: border-box;
}

/* Ensure full width utilization on large displays */
.elementor-widget-slotsgamblers-symbols-paytable {
    width: 100% !important;
    max-width: 100% !important;
}

.elementor-widget-slotsgamblers-symbols-paytable .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================
   SECTION HEADER BANNER STYLE
   ============================================ */
.sgsp-section-header-banner {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    padding: var(--sgsp-spacing-xl) var(--sgsp-spacing-lg);
    border-radius: var(--sgsp-radius-lg);
    margin-bottom: var(--sgsp-spacing-xl);
    position: relative;
    box-shadow: 0 0.25rem 0.75rem rgba(245, 158, 11, 0.25);
    border-bottom: 0.1875rem solid #F59E0B;
}

.sgsp-section-header-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
    border-radius: var(--sgsp-radius-lg);
    pointer-events: none;
}

/* ============================================
   SECTION TITLE
   ============================================ */
.sgsp-section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1A1A1A;
    text-shadow: 0 0.0625rem 0.125rem rgba(255, 255, 255, 0.5);
    margin-bottom: var(--sgsp-spacing-md);
    line-height: 1.2;
    margin-top: 0;
    position: relative;
    z-index: 1;
}

/* ============================================
   INTRODUCTION TEXT
   ============================================ */
.sgsp-symbols-intro {
    font-size: 0.9375rem;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    z-index: 1;
}

/* ============================================
   TABLE WRAPPER
   ============================================ */
.sgsp-symbols-table-wrapper {
    overflow-x: auto;
    border-radius: var(--sgsp-radius-lg);
    border: 0.0625rem solid var(--sgsp-border-color);
    margin-bottom: var(--sgsp-spacing-lg);
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* ============================================
   TABLE STRUCTURE
   ============================================ */
.sgsp-symbols-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--sgsp-color-white);
}

/* Table Header - SlotsGamblers Banner Style */
.sgsp-symbols-table thead {
    background: linear-gradient(135deg, #9333EA 0%, #10B981 100%);
    position: relative;
    box-shadow: 0 0.25rem 0.75rem rgba(147, 51, 234, 0.3);
}

.sgsp-symbols-table thead::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    pointer-events: none;
}

.sgsp-symbols-table th {
    padding: 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    border-bottom: 0.1875rem solid #10B981;
    white-space: nowrap;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Table Body Rows */
.sgsp-symbols-table tbody tr {
    border-bottom: 0.0625rem solid var(--sgsp-border-color);
    transition: all 0.3s ease;
}

.sgsp-symbols-table tbody tr:last-child {
    border-bottom: none;
}

.sgsp-symbols-table tbody tr:hover {
    background: #FFFBEB;
}

/* Table Cells */
.sgsp-symbols-table td {
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--sgsp-text-secondary);
    text-align: center;
}

/* ============================================
   SYMBOL ICON
   ============================================ */
.sgsp-symbol-icon {
    font-size: 2rem;
    text-align: center;
    line-height: 1;
}

/* ============================================
   SYMBOL NAME
   ============================================ */
.sgsp-symbol-name {
    font-weight: 600;
    color: var(--sgsp-text-primary);
    text-align: center;
}

/* ============================================
   TYPE BADGES
   ============================================ */
.sgsp-type-badge {
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
    color: var(--sgsp-color-white);
    white-space: nowrap;
}

.sgsp-type-high {
    background: var(--sgsp-color-purple);
}

.sgsp-type-medium {
    background: #3B82F6;
}

.sgsp-type-low {
    background: var(--sgsp-color-green);
}

.sgsp-type-special,
.sgsp-type-scatter {
    background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
}

/* ============================================
   PAYOUT CELLS
   ============================================ */
.sgsp-payout-cell {
    font-weight: 600;
    color: var(--sgsp-text-secondary);
}

.sgsp-payout-high {
    color: var(--sgsp-color-purple);
    font-weight: 700;
    font-size: 1rem;
}

/* ============================================
   RESPONSIVE - DESKTOP (Large Displays 32"+)
   ============================================ */
@media (min-width: 1920px) {
    .sgsp-symbols-section {
        max-width: 100% !important;
    }
}

@media (min-width: 1440px) {
    .sgsp-section-title {
        font-size: 1.625rem;
    }

    .sgsp-symbols-intro {
        font-size: 1rem;
    }
}

/* ============================================
   RESPONSIVE - LAPTOP/NOTEBOOK (1024px - 1439px)
   ============================================ */
@media (max-width: 1439px) and (min-width: 1024px) {
    .sgsp-section-title {
        font-size: 1.5rem;
    }

    .sgsp-symbols-intro {
        font-size: 0.9375rem;
    }
}

/* ============================================
   RESPONSIVE - TABLET (768px - 1023px)
   ============================================ */
@media (max-width: 1023px) and (min-width: 768px) {
    .sgsp-section-title {
        font-size: 1.375rem;
    }

    .sgsp-symbols-intro {
        font-size: 0.875rem;
    }

    .sgsp-symbols-table th,
    .sgsp-symbols-table td {
        padding: 0.875rem 0.625rem;
        font-size: 0.8125rem;
    }

    .sgsp-symbol-icon {
        font-size: 1.75rem;
    }
}

/* ============================================
   RESPONSIVE - MOBILE (up to 768px)
   FULL-WIDTH EDGE-TO-EDGE DESIGN
   ============================================ */
@media (max-width: 768px) {
    /* Full-width container breaking out of parent */
    .sgsp-symbols-section {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        padding: var(--sgsp-spacing-lg) var(--sgsp-spacing-md);
    }

    /* Header banner mobile adjustments */
    .sgsp-section-header-banner {
        border-radius: var(--sgsp-radius-lg) !important;
        padding: var(--sgsp-spacing-lg) var(--sgsp-spacing-md);
        margin-left: calc(-1 * var(--sgsp-spacing-md));
        margin-right: calc(-1 * var(--sgsp-spacing-md));
        margin-bottom: var(--sgsp-spacing-lg);
    }

    /* Override Elementor container constraints */
    .elementor-widget-slotsgamblers-symbols-paytable {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
    }

    .elementor-widget-slotsgamblers-symbols-paytable .elementor-widget-container {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Typography adjustments */
    .sgsp-section-title {
        font-size: 1.25rem;
        margin-bottom: var(--sgsp-spacing-md);
    }

    .sgsp-symbols-intro {
        font-size: 0.875rem;
        margin-bottom: var(--sgsp-spacing-md);
    }

    /* Table wrapper with horizontal scroll */
    .sgsp-symbols-table-wrapper {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #F59E0B #E5E7EB;
        border-radius: var(--sgsp-radius-md);
        margin-left: calc(-1 * var(--sgsp-spacing-md));
        margin-right: calc(-1 * var(--sgsp-spacing-md));
        padding: 0 var(--sgsp-spacing-md);
        padding-bottom: 0.75rem; /* Extra space for scrollbar */
    }

    /* Scroll progress indicator background */
    .sgsp-symbols-table-wrapper::before {
        content: '';
        position: sticky;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0.25rem;
        background: linear-gradient(to right, 
            #10B981 0%, 
            #10B981 var(--sgsp-scroll-progress, 0%), 
            transparent var(--sgsp-scroll-progress, 0%), 
            transparent 100%);
        display: block;
        z-index: 10;
        pointer-events: none;
    }

    /* Custom scrollbar styling - ENHANCED for better visibility */
    .sgsp-symbols-table-wrapper::-webkit-scrollbar {
        height: 0.625rem; /* Larger for better visibility */
    }

    .sgsp-symbols-table-wrapper::-webkit-scrollbar-track {
        background: #E5E7EB;
        border-radius: 0.5rem;
        margin: 0 0.5rem; /* Spacing from edges */
        box-shadow: inset 0 0 0.25rem rgba(0, 0, 0, 0.1);
    }

    .sgsp-symbols-table-wrapper::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(245, 158, 11, 0.4);
        transition: all 0.3s ease;
    }

    .sgsp-symbols-table-wrapper::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #D97706 0%, #EA580C 100%);
        box-shadow: 0 0.125rem 0.5rem rgba(245, 158, 11, 0.6);
        transform: scaleY(1.2);
    }

    .sgsp-symbols-table-wrapper::-webkit-scrollbar-thumb:active {
        background: linear-gradient(135deg, #B45309 0%, #C2410C 100%);
    }

    /* Swipe indicator */
    .sgsp-symbols-table-wrapper.sgsp-show-swipe-indicator::after {
        content: attr(data-swipe-text);
        position: sticky;
        left: 0;
        display: block;
        text-align: center;
        padding: var(--sgsp-spacing-sm);
        background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
        color: #D97706;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 0 0 var(--sgsp-radius-md) var(--sgsp-radius-md);
        animation: sgsp-pulse-indicator 2s ease-in-out infinite;
        margin-top: 0.5rem;
    }

    @keyframes sgsp-pulse-indicator {
        0%, 100% { 
            opacity: 1; 
        }
        50% { 
            opacity: 0.7; 
        }
    }

    /* Table minimum width for scrolling - dynamic based on column count */
    .sgsp-symbols-table {
        min-width: 42rem; /* Default for 5+ columns */
    }
    
    /* Two columns: much smaller min-width so both columns are visible */
    .sgsp-symbols-table[data-columns="2"] {
        min-width: 20rem;
    }
    
    /* Three columns: reduced min-width */
    .sgsp-symbols-table[data-columns="3"] {
        min-width: 24rem;
    }
    
    /* Four columns: moderate min-width */
    .sgsp-symbols-table[data-columns="4"] {
        min-width: 32rem;
    }

    /* Compact cell spacing */
    .sgsp-symbols-table th,
    .sgsp-symbols-table td {
        padding: 0.625rem 0.375rem;
        font-size: 0.75rem;
        white-space: nowrap !important;
    }
    
    /* Optimize column widths for 2-column tables on mobile */
    .sgsp-symbols-table[data-columns="2"] th,
    .sgsp-symbols-table[data-columns="2"] td {
        padding: 0.625rem 0.75rem;
        min-width: auto;
        width: 50%;
    }
    
    /* Optimize column widths for 3-column tables on mobile */
    .sgsp-symbols-table[data-columns="3"] th,
    .sgsp-symbols-table[data-columns="3"] td {
        padding: 0.625rem 0.5rem;
        min-width: auto;
        width: 33.333%;
    }
    
    /* Optimize column widths for 4-column tables on mobile */
    .sgsp-symbols-table[data-columns="4"] th,
    .sgsp-symbols-table[data-columns="4"] td {
        padding: 0.625rem 0.4375rem;
        min-width: auto;
        width: 25%;
    }

    /* Smaller icon size */
    .sgsp-symbol-icon {
        font-size: 1.375rem;
        white-space: nowrap !important;
    }

    /* Symbol name no wrap */
    .sgsp-symbol-name {
        white-space: nowrap !important;
    }

    /* Compact badges */
    .sgsp-type-badge {
        font-size: 0.625rem;
        padding: 0.1875rem 0.4375rem;
        white-space: nowrap !important;
    }

    /* Payout cells no wrap */
    .sgsp-payout-cell {
        white-space: nowrap !important;
    }
}

/* ============================================
   RESPONSIVE - SMALL MOBILE (up to 480px)
   ============================================ */
@media (max-width: 480px) {
    .sgsp-section-title {
        font-size: 1.125rem;
    }

    .sgsp-symbols-table th,
    .sgsp-symbols-table td {
        padding: 0.5rem 0.25rem;
        font-size: 0.6875rem;
        white-space: nowrap !important;
    }

    .sgsp-symbol-icon {
        font-size: 1.25rem;
        white-space: nowrap !important;
    }

    .sgsp-type-badge {
        font-size: 0.5625rem;
        padding: 0.125rem 0.375rem;
        white-space: nowrap !important;
    }

    /* Larger scrollbar for small mobile */
    .sgsp-symbols-table-wrapper::-webkit-scrollbar {
        height: 0.75rem; /* Even larger on small screens */
    }

    .sgsp-symbols-table-wrapper::-webkit-scrollbar-thumb {
        box-shadow: 0 0.1875rem 0.375rem rgba(245, 158, 11, 0.5);
    }
}

/* ============================================
   ELEMENTOR EDITOR COMPATIBILITY
   ============================================ */
.elementor-editor-active .sgsp-symbols-section {
    min-height: 20rem;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.sgsp-symbols-table-wrapper:focus {
    outline: 0.125rem solid #F59E0B;
    outline-offset: 0.125rem;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .sgsp-symbols-table tbody tr,
    .sgsp-symbols-table-wrapper.sgsp-show-swipe-indicator::after {
        animation: none;
        transition: none;
    }
}

/* ============================================
   FOOTER SECTION
   ============================================ */
.sgsp-footer-section {
    margin-top: var(--sgsp-spacing-lg);
    padding-top: var(--sgsp-spacing-lg);
    border-top: 0.0625rem solid var(--sgsp-border-color);
}

.sgsp-footer-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sgsp-text-primary);
    margin-bottom: 0.75rem;
    margin-top: 0;
    line-height: 1.3;
}

.sgsp-footer-description {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: rgb(107, 114, 128);
    line-height: 1.6875;
    margin: 0;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .sgsp-symbols-section {
        border: 0.0625rem solid #000;
        box-shadow: none;
    }

    .sgsp-symbols-table-wrapper {
        overflow: visible;
    }

    .sgsp-symbols-table-wrapper.sgsp-show-swipe-indicator::after {
        display: none;
    }
}