/* Mobile-First Fixes for Trading Plans Page */

@media screen and (max-width: 768px) {
    /* Ensure cards stack properly on mobile */
    .pricing-item-01 {
        margin-bottom: 2rem;
        width: 100%;
        min-height: auto;
    }
    
    /* Touch-friendly buttons */
    .berpo_btn {
        min-height: 56px;
        padding: 14px 28px;
        font-size: 16px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    /* Fix calculator form on mobile */
    .contactPageForm input,
    .contactPageForm select,
    .contactPageForm textarea {
        min-height: 48px;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px 16px;
        width: 100%;
    }
    
    /* Tables collapse into cards on mobile */
    @media screen and (max-width: 600px) {
        table {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        table thead {
            display: none;
        }
        
        table tbody {
            display: block;
            width: 100%;
        }
        
        table tr {
            display: block;
            margin-bottom: 1rem;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 1rem;
            background: #fff;
        }
        
        table td {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem 0;
            border: none;
            text-align: right;
        }
        
        table td:before {
            content: attr(data-label);
            font-weight: bold;
            text-align: left;
            padding-right: 1rem;
        }
    }
    
    /* Prevent horizontal overflow */
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .col-lg-4,
    .col-lg-6,
    .col-md-6,
    .col-md-12 {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        margin-bottom: 1rem;
    }
    
    /* Fix container overflow */
    .container,
    .largeContainer {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* TradingView widgets responsive */
    .tradingview-widget-container {
        width: 100% !important;
        max-width: 100%;
        overflow-x: auto;
    }
    
    /* Chart container responsive */
    #tradingview_e6cc1 {
        width: 100% !important;
        height: 400px !important;
        min-height: 300px;
    }
}

/* Extra small devices */
@media screen and (max-width: 480px) {
    .pricing-item-01 {
        padding: 1.5rem 1rem;
    }
    
    .berpo_btn {
        min-height: 48px;
        padding: 12px 24px;
        font-size: 15px;
    }
    
    /* Reduce font sizes for better mobile readability */
    .secTitle {
        font-size: 1.5rem;
    }
    
    .p-title {
        font-size: 1.25rem;
    }
    
    /* Ensure proper spacing */
    .pricingSection01 {
        padding: 2rem 0;
    }
}