/**
 * SlotsGamblers Top Casinos Widget - Frontend Styles
 * 
 * @package SlotsGamblers_Top_Casinos_Widget
 * @version 1.0.9
 */

/* =====================================================
   CSS VARIABLES - Widget-Specific
   ===================================================== */
.sgtopcasinos-widget {
    --sgtopcasinos-color-purple: #9333EA;
    --sgtopcasinos-color-orange: #FF8C42;
    --sgtopcasinos-color-orange-light: #FFF4E6;
    --sgtopcasinos-color-green: #10B981;
    --sgtopcasinos-color-white: #FFFFFF;
    --sgtopcasinos-text-primary: #1F2937;
    --sgtopcasinos-text-secondary: #4B5563;
    --sgtopcasinos-border-color: #E5E7EB;
    --sgtopcasinos-bg-main: #F9FAFB;
    --sgtopcasinos-spacing-sm: clamp(0.5rem, 0.6vw, 0.75rem);
    --sgtopcasinos-spacing-md: clamp(0.75rem, 0.9vw, 1rem);
    --sgtopcasinos-spacing-lg: clamp(1rem, 1.2vw, 1.5rem);
    --sgtopcasinos-radius-sm: clamp(0.375rem, 0.4vw, 0.5rem);
    --sgtopcasinos-radius-md: clamp(0.5rem, 0.6vw, 0.75rem);
    --sgtopcasinos-radius-lg: clamp(0.75rem, 0.9vw, 1rem);
    --sgtopcasinos-radius-xl: clamp(1rem, 1.2vw, 1.5rem);
}

/* =====================================================
   CONTAINER - Full-Width Support for Large Screens
   ===================================================== */
.sgtopcasinos-container {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Full container width on 32" displays and above */
@media (min-width: 1920px) {
    .sgtopcasinos-container {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* =====================================================
   WIDGET MAIN CONTAINER
   ===================================================== */
.sgtopcasinos-widget {
    background: var(--sgtopcasinos-color-white);
    border: 0.0625rem solid #E0E0E0;
    border-radius: var(--sgtopcasinos-radius-xl);
    padding: var(--sgtopcasinos-spacing-lg);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.sgtopcasinos-widget:hover {
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.12);
    border-color: #D0D0D0;
}

/* =====================================================
   WIDGET HEADER
   ===================================================== */
.sgtopcasinos-widget-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--sgtopcasinos-spacing-lg);
    padding-bottom: var(--sgtopcasinos-spacing-md);
    border-bottom: 0.0625rem solid #E0E0E0;
}

.sgtopcasinos-widget-icon {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.sgtopcasinos-widget-title {
    font-size: clamp(1.125rem, 1.1vw + 0.4rem, 1.375rem);
    font-weight: 800;
    color: var(--sgtopcasinos-text-primary);
    margin: 0;
    line-height: 1.3;
}

/* P tag as heading style - when P is selected in SEO settings */
.sgtopcasinos-widget-header p.sgtopcasinos-widget-title {
    font-size: clamp(1.125rem, 1.1vw + 0.4rem, 1.375rem);
    font-weight: 800;
    color: var(--sgtopcasinos-text-primary);
    margin: 0;
    line-height: 1.3;
    display: block;
}

/* =====================================================
   CASINOS LIST GRID
   ===================================================== */
.sgtopcasinos-casinos-list {
    display: grid;
    gap: var(--sgtopcasinos-spacing-md);
    grid-template-columns: 1fr;
}

/* =====================================================
   CASINO ITEM CARD
   ===================================================== */
.sgtopcasinos-casino-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--sgtopcasinos-spacing-sm);
    align-items: center;
    padding: var(--sgtopcasinos-spacing-md);
    background: var(--sgtopcasinos-color-white);
    border-radius: var(--sgtopcasinos-radius-lg);
    border: 0.125rem solid var(--sgtopcasinos-border-color);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
}

.sgtopcasinos-casino-item:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.12);
    border-color: var(--sgtopcasinos-color-orange);
}

/* =====================================================
   CASINO LOGO
   ===================================================== */
.sgtopcasinos-casino-logo {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--sgtopcasinos-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 900;
    color: var(--sgtopcasinos-color-white);
    text-align: center;
    flex-shrink: 0;
    line-height: 1.2;
    position: relative;
    overflow: hidden;
    border: 0.125rem solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
}

.sgtopcasinos-casino-logo-text {
    position: relative;
    z-index: 1;
    text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
}

/* =====================================================
   CASINO INFO
   ===================================================== */
.sgtopcasinos-casino-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
    text-align: center;
    align-items: center;
}

.sgtopcasinos-casino-name {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--sgtopcasinos-text-primary);
    line-height: 1.3;
    margin: 0;
}

/* P tag as heading style - when P is selected for casino name */
p.sgtopcasinos-casino-name {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--sgtopcasinos-text-primary);
    line-height: 1.3;
    margin: 0;
    display: block;
}

.sgtopcasinos-casino-bonus {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sgtopcasinos-text-primary);
    line-height: 1.4;
    margin: 0;
}

/* P tag styling for bonus text */
p.sgtopcasinos-casino-bonus {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sgtopcasinos-text-primary);
    line-height: 1.4;
    margin: 0;
    display: block;
}

.sgtopcasinos-casino-bonus-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sgtopcasinos-color-purple);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.sgtopcasinos-casino-bonus-link:hover {
    color: var(--sgtopcasinos-color-orange);
}

/* =====================================================
   CASINO RATING BADGE
   ===================================================== */
.sgtopcasinos-casino-rating {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0;
    z-index: 2;
}

.sgtopcasinos-casino-rating-badge {
    background: var(--sgtopcasinos-color-orange-light);
    color: var(--sgtopcasinos-color-orange);
    padding: 0.32rem 0.64rem;
    border-radius: 0.4rem;
    font-weight: 800;
    font-size: 0.8rem;
    border: 0.1rem solid var(--sgtopcasinos-color-orange);
    box-shadow: 0 0.1rem 0.4rem rgba(255, 140, 66, 0.3);
}

/* =====================================================
   CASINO ACTIONS
   ===================================================== */
.sgtopcasinos-casino-actions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: stretch;
    align-self: flex-end;
    margin-top: 0.5rem;
}

.sgtopcasinos-casino-play-btn {
    background: linear-gradient(135deg, #FF4757 0%, #E63946 100%);
    color: var(--sgtopcasinos-color-white);
    padding: 0.53rem 1.7rem;
    border-radius: 0.4rem;
    font-weight: 800;
    font-size: 0.74rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    transition: all 0.3s ease;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 0.2rem 0.6rem rgba(255, 71, 87, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 0.1rem solid rgba(255, 255, 255, 0.2);
}

.sgtopcasinos-casino-play-btn:hover {
    background: linear-gradient(135deg, #E63946 0%, #D62839 100%);
    transform: translateY(-0.1rem);
    box-shadow: 0 0.3rem 0.8rem rgba(255, 71, 87, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
}

/* =====================================================
   MOBILE RESPONSIVE - 2 Column Grid
   ===================================================== */
@media (max-width: 48rem) {
    .sgtopcasinos-widget {
        padding: var(--sgtopcasinos-spacing-sm);
    }

    .sgtopcasinos-casinos-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .sgtopcasinos-casino-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0.625rem;
        gap: 0.375rem;
        position: relative;
    }

    .sgtopcasinos-casino-logo {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 0.625rem;
        position: relative;
        flex-shrink: 0;
    }

    .sgtopcasinos-casino-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.25rem;
        width: 100%;
    }

    .sgtopcasinos-casino-rating {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        margin-bottom: 0;
        z-index: 2;
    }

    .sgtopcasinos-casino-rating-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        box-shadow: 0 0.125rem 0.5rem rgba(255, 140, 66, 0.4);
        border: 0.0625rem solid var(--sgtopcasinos-color-orange);
    }

    .sgtopcasinos-casino-name {
        font-size: 0.875rem;
        font-weight: 900;
        line-height: 1.2;
    }

    .sgtopcasinos-casino-bonus {
        font-size: 0.6875rem;
        color: var(--sgtopcasinos-text-primary);
        font-weight: 700;
        line-height: 1.3;
    }

    .sgtopcasinos-casino-actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        align-items: center;
        margin-top: 0.25rem;
    }

    .sgtopcasinos-casino-play-btn {
        width: 100%;
        padding: 0.625rem 1rem;
        font-size: 0.75rem;
        font-weight: 800;
    }

    .sgtopcasinos-casino-bonus-link {
        font-size: 0.6875rem;
        text-align: center;
        display: inline-block;
        font-weight: 600;
    }
}

/* =====================================================
   MOBILE FULL-WIDTH LAYOUT
   Using calc(-50vw + 50%) Technique + Elementor Override
   ===================================================== */
@media (max-width: 768px) {
    .sgtopcasinos-mobile-fullwidth {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        position: relative !important;
    }

    /* Override Elementor container constraints */
    .elementor-element .sgtopcasinos-mobile-fullwidth {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
    }

    .elementor-widget-container .sgtopcasinos-mobile-fullwidth {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
    }

    /* Ensure widget content has proper padding on mobile */
    .sgtopcasinos-mobile-fullwidth .sgtopcasinos-widget {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

/* =====================================================
   ELEMENTOR EDITOR COMPATIBILITY - Preview iframe only
   Ensures widget is visible in preview, NOT in editor panel
   ===================================================== */
#elementor-preview-iframe .sgtopcasinos-widget {
    min-height: 100px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#elementor-preview-iframe .sgtopcasinos-container {
    display: block !important;
    visibility: visible !important;
    min-height: 200px !important;
}

/* =====================================================
   ULTRA SAFE LAYOUT FORMULA FOR MOBILE
   Prevents overflow issues
   ===================================================== */
@media (max-width: 768px) {
    .sgtopcasinos-container,
    .sgtopcasinos-widget,
    .sgtopcasinos-casinos-list {
        overflow: hidden !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
    }
}

/* =====================================================
   ACCESSIBILITY & FOCUS STATES
   ===================================================== */
.sgtopcasinos-casino-play-btn:focus,
.sgtopcasinos-casino-bonus-link:focus {
    outline: 2px solid var(--sgtopcasinos-color-purple);
    outline-offset: 2px;
}

/* =====================================================
   PRINT STYLES
   ===================================================== */
@media print {
    .sgtopcasinos-widget {
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .sgtopcasinos-casino-item {
        page-break-inside: avoid;
    }
}