/* Mobile Optimizations for Offer Section */
@media (max-width: 768px) {
    .offer-box {
        border-radius: 15px;
        margin: 0 10px;
    }

    .offer-body {
        padding: 1.5rem;
    }

    .recap-list li {
        font-size: 0.95rem;
        padding: 0.6rem 0;
        flex-direction: row;
        /* Keep icon and text side-by-side */
        align-items: flex-start;
        /* Align to top if text wraps */
        text-align: left;
    }

    .recap-list i {
        margin-top: 3px;
        /* Adjust icon alignment */
        min-width: 20px;
        /* Prevent icon shrinking */
    }

    .current-price .value {
        font-size: 3.5rem !important;
        /* Smaller price font on mobile */
    }

    .comparison-text {
        font-size: 0.9rem !important;
    }

    /* Fix for Cartoon Titles on Mobile */
    .cartoon-title {
        font-size: 1.8rem !important;
        transform: none !important;
        display: block !important;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        white-space: normal;
        line-height: 1.2 !important;
    }

    /* Fix for Bonuses Section */
    .bonuses-section .container {
        padding: 0 20px;
        overflow: hidden;
        /* Prevent horizontal scroll */
    }

    .bonuses-section .section-header {
        text-align: center !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .bonuses-section .section-header p {
        padding: 0 10px;
        text-align: center !important;
        font-weight: 800;
        /* Make subtitle stronger */
        font-size: 1.1rem;
        color: #2d3436;
        margin-bottom: 2rem;
    }

    .bonus-card {
        margin: 0 5px;
        /* Add slight margin to cards */
    }
}