/**
 * Sportsbook Page Styles
 * 
 * Styles for the Betby sportsbook integration page
 * Includes responsive design and Betby-specific customizations
 * 
 * Author: Betby Integration Team
 * Created: 2024
 */


/* Per Betby Documentation: 
 * "Never use overflow for the sport container and any parent container (div, body, html)."
 * "Don't apply your own display, position and overflow properties for Betby application 
 * container and container higher in the DOM tree (parent div, body, html, etc) - they affect 
 * on elements inside Betby app."
 * 
 * We MUST NOT apply overflow, position, or display properties that interfere with Betby.
 * Betby handles betslip positioning automatically via offset parameters.
 */

/* Only adjust layout width/margin for sidebar - NO overflow/position/display overrides */
/* Per Betby docs: Ensure parent containers don't clip betslip (which needs to be sticky) */
body.sportsbook-page .content-wrapper,
.sportsbook-page .content-wrapper {
    width: calc(100vw - 68px);
    margin-left: 68px;
    max-width: none;
    padding: 0;
    margin-top: 0;
    padding-top: 0;
    /* Ensure betslip can be sticky - don't clip it */
    overflow-x: visible;
    overflow-y: visible;
}

body.sportsbook-page .sidebar.expanded ~ .content-wrapper,
body.sportsbook-page .sidebar.expanded ~ .content-wrapper {
    width: calc(100vw - 240px);
    margin-left: 240px;
}

@media (max-width: 991.98px) {
    body.sportsbook-page .content-wrapper,
    .sportsbook-page .content-wrapper {
        width: 100vw;
        margin-left: 0;
    }
}

body.sportsbook-page .main-content,
.sportsbook-page .main-content {
    max-width: none;
    margin: 0;
    padding: 0;
    margin-top: 0;
    padding-top: 0;
    width: 100%;
    /* Ensure betslip can be sticky - don't clip it */
    overflow-x: visible;
    overflow-y: visible;
}

body.sportsbook-page .container,
.sportsbook-page .container {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   Sportsbook Container
   ========================================================================== */

.sportsbook-container {
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 60px);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #ffffff;
    padding: 0;
    margin: 0;
    margin-top: 0;
    box-sizing: border-box;
    /* Ensure betslip can be sticky - don't clip it */
    overflow-x: visible;
    overflow-y: visible;
}

/* ==========================================================================
   Betby Container
   ========================================================================== */

/* Per Betby docs: Don't apply overflow, position, or display properties
   to Betby container or parent containers - they interfere with betslip positioning */

.betby-container {
    width: 100%;
    min-height: calc(100vh - 60px);
    margin: 0;
    padding: 0;
    margin-top: 0;
    padding-top: 0;
    /* Per Betby docs: Do NOT apply overflow, position, or display properties */
    /* Betby handles betslip positioning automatically via offset parameters */
    /* But we need visible overflow so betslip can be sticky */
    overflow-x: visible;
    overflow-y: visible;
}

/* Loading Spinner */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    color: #64b5f6;
}

.loading-spinner .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

.loading-spinner p {
    color: #90caf9;
    margin-top: 1rem;
    font-size: 1.1rem;
}

/* ==========================================================================
   Betby Customizations
   ========================================================================== */

/* 
 * These styles customize the Betby application appearance
 * to match the site's theme
 */

/* Betby root element inherits our background */
#betby-sportsbook {
    background: transparent;
    color: inherit;
    font-family: inherit;
}

/* Ensure Betby content is properly contained */
#betby-sportsbook > * {
    max-width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Mobile Styles */
@media (max-width: 768px) {
    .sportsbook-container {
        padding: 0;
    }
    
    .betby-container {
        min-height: calc(100vh - 60px);
    }
    
    .loading-spinner {
        height: 300px;
    }
    
    .loading-spinner .spinner-border {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .loading-spinner p {
        font-size: 1rem;
    }
}

/* ==========================================================================
   Alerts and Notifications
   ========================================================================== */

.sportsbook-container .alert.sportsbook-alert {
    margin: 0 2rem 1rem 2rem;
    margin-top: 0;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
    border-radius: 8px;
}

.sportsbook-container .alert.sportsbook-alert:first-child {
    margin-top: 0;
}

.sportsbook-container .alert-info {
    background: rgba(33, 150, 243, 0.1);
    border-color: rgba(33, 150, 243, 0.3);
    color: #64b5f6;
}

.sportsbook-container .alert-warning {
    background: rgba(255, 152, 0, 0.1);
    border-color: rgba(255, 152, 0, 0.3);
    color: #ffb74d;
}

.sportsbook-container .alert-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.sportsbook-container .alert-link:hover {
    color: #ffffff;
}

/* Mobile alert adjustments */
@media (max-width: 768px) {
    .sportsbook-container .alert {
        margin: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .loading-spinner .spinner-border {
        transition: none;
        animation: none;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .sportsbook-container {
        background: white !important;
        color: black !important;
    }
    
    .betby-container {
        display: none; /* Hide Betby content in print */
    }
    
    .loading-spinner {
        display: none;
    }
}

/* ==========================================================================
   Animation Keyframes
   ========================================================================== */

@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.loading-spinner {
    animation: pulse 2s infinite;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.betby-hidden {
    display: none !important;
}

.betby-visible {
    display: block !important;
}

.betby-text-center {
    text-align: center !important;
}

.betby-full-width {
    width: 100% !important;
}

/* ==========================================================================
   Dark Theme Specific Adjustments
   ========================================================================== */

/* These styles ensure proper theming when using Betby's dark themes */
.betby-container[data-theme="dark"] {
    background: #121212;
    color: #ffffff;
}

.betby-container[data-theme="dark"] .loading-spinner {
    color: #64b5f6;
}

/* ==========================================================================
   Error States
   ========================================================================== */

.betby-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 8px;
    margin: 2rem;
    color: #ef5350;
}

.betby-error i {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.betby-error h3 {
    margin: 0 0 0.5rem 0;
    color: #ef5350;
}

.betby-error p {
    margin: 0;
    color: #ffcdd2;
    text-align: center;
    max-width: 400px;
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

/* ==========================================================================
   Betslip Enhancement (Let Betby Handle Positioning)
   ========================================================================== */

/* Per Betby Documentation: Do NOT apply overflow, position, or display properties */
/* Betby handles betslip positioning automatically via offset parameters */
/* The betslip will be sticky bottom right - handled entirely by Betby */

#betby-sportsbook {
    min-height: calc(100vh - 60px);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    margin-top: 0;
    padding-top: 0;
    box-sizing: border-box;
    /* Ensure betslip can be sticky - don't clip it */
    overflow-x: visible;
    overflow-y: visible;
}