/* Mobile-specific styles */
@media (max-width: 768px) {
    /* Ensure logo and text don't wrap */
    .container > header > a {
        white-space: nowrap;
    }

    /* 3. Product cards - remove padding, shadow, and hover (except bg-body-secondary) */
    .product-card:not(.bg-body-secondary) {
        box-shadow: none !important;
        border: none !important;
    }

    .product-card:not(.bg-body-secondary) .card-body {
        padding: 1rem !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .product-card:not(.bg-body-secondary):hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .product-card.coming-soon:not(.bg-body-secondary):hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* 4. Increase main container padding on mobile */
    body > .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Additional mobile optimizations */
    .section-spacing {
        padding: 2rem 0;
    }

    /* Fix spacing in value props section */
    #why-different .col-md-4 {
        margin-bottom: 2rem;
    }

    #why-different .col-md-4:last-child {
        margin-bottom: 0;
    }
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    /* Even smaller text for very small screens */
    .hero-section h1.display-3 {
        font-size: 2.2rem !important;
    }
}

/* Mobile-friendly pricing table */
@media (max-width: 768px) {
    /* Table wrapper for horizontal scroll */
    .table-responsive {
        position: relative;
        -webkit-overflow-scrolling: touch;
    }

    /* Make first column sticky */
    #pricing .table th:first-child,
    #pricing .table td:first-child {
        position: sticky;
        left: 0;
        z-index: 10;
        background-color: var(--bs-body-bg);
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }

    /* Ensure header first cell has higher z-index */
    #pricing .table thead th:first-child {
        z-index: 11;
    }

    /* Prevent text wrapping in table cells */
    #pricing .table th,
    #pricing .table td {
        white-space: nowrap;
        min-width: 100px;
    }

    /* Give more width to first column */
    #pricing .table th:first-child,
    #pricing .table td:first-child {
        min-width: 160px;
        font-weight: 600;
    }

    /* Add some padding to non-first cells for readability */
    #pricing .table th:not(:first-child),
    #pricing .table td:not(:first-child) {
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
    }

    /* Visual indicator - sticky to right edge */
    #pricing .table-responsive::after {
        content: '';
        position: sticky;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        margin-left: -30px;
        height: 100%;
        display: inline-block;
        background: linear-gradient(to right, transparent, rgba(0,0,0,0.05));
        pointer-events: none;
        z-index: 5;
    }

    /* Dark mode support */
    [data-bs-theme="dark"] #pricing .table th:first-child,
    [data-bs-theme="dark"] #pricing .table td:first-child {
        background-color: var(--bs-body-bg);
        box-shadow: 2px 0 5px rgba(255,255,255,0.1);
    }

    [data-bs-theme="dark"] #pricing .table-responsive::after {
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.05));
    }
}

/* Additional enhancement for very small screens */
@media (max-width: 575px) {
    #pricing .table {
        font-size: 0.875rem;
    }

    #pricing .table th:first-child,
    #pricing .table td:first-child {
        min-width: 140px;
        font-size: 0.8rem;
    }

    #pricing .table th:not(:first-child),
    #pricing .table td:not(:first-child) {
        min-width: 80px;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}