/**
 * Responsive CSS - SoccerTips Clone
 * 响应式样式补丁
 * 
 * 针对移动端和平板设备的样式优化
 */

/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* Mobile: < 768px */
/* Tablet: 768px - 991px */
/* Desktop: >= 992px */

/* ==========================================================================
   Global Responsive
   ========================================================================== */

@media (max-width: 991px) {
    /* Container */
    .container {
        max-width: 100%;
        padding: 0 20px;
    }
    
    /* Header */
    .main-header {
        flex-wrap: wrap;
    }
    
    .logo {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }
    
    .logo img {
        margin: 0 auto;
    }
    
    .main-menu {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* Mobile Menu Icon */
    .menu-icon {
        display: block !important;
    }
    
    /* Navigation */
    nav.onepage {
        display: none;
        width: 100%;
        margin-top: 20px;
    }
    
    nav.onepage ul {
        flex-direction: column;
    }
    
    nav.onepage li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    nav.onepage a {
        padding: 15px 20px;
    }
    
    nav.onepage .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-left: 3px solid var(--sct-primary);
        margin-left: 20px;
        margin-top: 10px;
    }
    
    /* Top Menu */
    .col-top-menu,
    .col-profile-menu {
        justify-content: center;
    }
    
    .top-menu .row {
        flex-direction: column;
    }
    
    .top-menu .col-sm-8,
    .top-menu .col-sm-4 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    
    .timezone {
        margin: 0 auto 15px;
    }
    
    .timezone-popup {
        left: 50%;
        transform: translateX(-50%);
        width: 280px;
    }
}

@media (max-width: 767px) {
    /* Typography */
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }
    
    .sec-title h1,
    .sec-title h2 {
        font-size: 20px;
    }
    
    /* Spacing */
    .midd-container {
        padding: 20px 0;
    }
    
    .style-2 {
        padding: 20px;
        margin-top: 0;
    }
    
    /* Blockquote */
    blockquote {
        padding: 20px;
    }
    
    blockquote p {
        font-size: 14px;
    }
    
    /* Tables */
    .table_wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table_series_tips {
        min-width: 800px;
    }
    
    .table_series_tips th,
    .table_series_tips td {
        padding: 10px 8px;
        font-size: 12px;
    }
    
    /* Hide columns on mobile */
    .table_series_tips .hide_mb {
        display: none !important;
    }
    
    /* Show mobile columns */
    .table_series_tips .show_mb {
        display: table-cell !important;
    }
    
    /* Series number */
    .series_num {
        font-size: 14px;
    }
    
    .time_in_series_num {
        font-size: 10px;
    }
    
    /* Match info */
    .match .home,
    .match .away {
        font-size: 12px;
    }
    
    .match .vs {
        font-size: 10px;
    }
    
    /* Tips */
    .tips {
        font-size: 12px;
    }
    
    /* Stake */
    .stake {
        font-size: 11px;
        padding: 3px 8px;
    }
    
    /* Status badge */
    .status {
        font-size: 10px;
        padding: 3px 8px;
    }
    
    /* Profit */
    .total_profit {
        font-size: 12px;
    }
    
    /* Stat cards */
    .stat-card {
        margin-bottom: 15px;
    }
    
    /* Pricing cards */
    .pricing-plan-card {
        margin-bottom: 20px;
    }
    
    /* Footer */
    .footer-1 {
        padding: 40px 0 20px;
    }
    
    .footer-box-1,
    .footer-box-2 {
        text-align: center;
    }
    
    .widget__wrap {
        margin-bottom: 30px;
    }
    
    .widget__wrap .widget-title:after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .widget__wrap .menu {
        text-align: center;
    }
    
    .contact-widget .soccertips-contact-box li {
        justify-content: center;
    }
    
    /* Gallery sponsors */
    .gallery-columns-6 .gallery-item {
        width: 33.33%;
    }
    
    /* Floating contact buttons */
    .button-contact {
        bottom: 80px;
        right: 15px;
    }
    
    .button-contact:last-child {
        bottom: 20px;
    }
    
    /* Breadcrumbs */
    .breadcrumbs {
        padding: 15px 0;
    }
    
    .rank-math-breadcrumb p {
        font-size: 12px;
    }
    
    /* How to play section */
    .sc-howplay {
        padding: 20px;
    }
    
    .sc-header__title {
        font-size: 20px;
    }
    
    .sc-header__sub,
    .sc-header__sub2,
    .sc-header__sub3 {
        font-size: 14px;
    }
    
    .howplay__item {
        padding: 20px;
    }
    
    .howplay__item .-text {
        font-size: 24px;
    }
    
    .howplay__item .-money {
        font-size: 18px;
    }
    
    /* Testimonials */
    .sc-feedback-carousel .slider-item {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .slider-item__thumb img {
        margin: 0 auto 15px;
    }
    
    /* FAQ */
    .accordion .card-header a {
        font-size: 14px;
        padding: 15px;
    }
    
    .accordion .card-body {
        padding: 15px;
        font-size: 13px;
    }
    
    /* Forms */
    .contact-form,
    .login-form,
    .register-form {
        padding: 25px;
    }
    
    /* Buttons */
    .btn {
        padding: 12px 24px;
        font-size: 13px;
    }
    
    /* Period selector */
    .period-selector .btn {
        margin-bottom: 10px;
    }
    
    /* Chart section */
    .chart-section {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    /* Extra small devices */
    .container {
        padding: 0 15px;
    }
    
    .style-2 {
        padding: 15px;
    }
    
    /* Stat cards grid */
    .row .col-sm-3,
    .row .col-sm-4,
    .row .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* Table font size */
    .table_series_tips th,
    .table_series_tips td {
        font-size: 11px;
    }
    
    /* Logo size */
    .logo img {
        max-width: 180px;
    }
    
    /* Menu font size */
    nav.onepage a {
        font-size: 13px;
    }
}

/* ==========================================================================
   Tablet Specific (768px - 991px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991px) {
    .table_series_tips {
        font-size: 12px;
    }
    
    .pricing-plan-card {
        margin-bottom: 20px;
    }
    
    .col-sm-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ==========================================================================
   Desktop Specific (>= 992px)
   ========================================================================== */

@media (min-width: 992px) {
    .hide_mb {
        display: table-cell !important;
    }
    
    .show_mb {
        display: table-cell !important;
    }
    
    .d-none {
        display: none !important;
    }
    
    .d-md-block {
        display: block !important;
    }
}

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

@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    
    .wrapper > header,
    .top-menu,
    .footer-1,
    .button-contact,
    .breadcrumbs {
        display: none !important;
    }
    
    .table_series_tips {
        background: #ffffff !important;
    }
    
    .table_series_tips th {
        background: #f0f0f0 !important;
        color: #000000 !important;
    }
    
    .table_series_tips td {
        color: #000000 !important;
    }
    
    .status {
        border: 1px solid #000000 !important;
    }
    
    a {
        text-decoration: underline;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

/* ==========================================================================
   Utility Classes - Responsive
   ========================================================================== */

/* Text alignment */
@media (max-width: 767px) {
    .text-sm-center {
        text-align: center !important;
    }
    
    .text-sm-left {
        text-align: left !important;
    }
    
    .text-sm-right {
        text-align: right !important;
    }
}

/* Spacing */
@media (max-width: 767px) {
    .mb-sm-0 { margin-bottom: 0 !important; }
    .mb-sm-3 { margin-bottom: 1rem !important; }
    .mb-sm-4 { margin-bottom: 1.5rem !important; }
    
    .mt-sm-0 { margin-top: 0 !important; }
    .mt-sm-3 { margin-top: 1rem !important; }
    
    .p-sm-2 { padding: 0.5rem !important; }
    .p-sm-3 { padding: 1rem !important; }
}

/* Display */
@media (max-width: 767px) {
    .d-xs-none { display: none !important; }
    .d-xs-block { display: block !important; }
    .d-xs-flex { display: flex !important; }
}

/* ==========================================================================
   High DPI / Retina Display
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    .gallery-item img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .status.live {
        animation: none;
        opacity: 1;
    }
}

/* ==========================================================================
   Dark Mode Support (Future Enhancement)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* Already dark theme, no changes needed */
}

/* ==========================================================================
   Landscape Orientation (Mobile)
   ========================================================================== */

@media (max-width: 767px) and (orientation: landscape) {
    .midd-container {
        padding: 15px 0;
    }
    
    .table_wrap {
        max-height: 60vh;
        overflow-y: auto;
    }
    
    .stat-card {
        padding: 15px;
    }
    
    .stat-number {
        font-size: 24px !important;
    }
}