/**
 * Responsive desktop overrides for mobile DTC pages.
 * Loaded after funnel CSS. Handles the mobile -> desktop transition.
 * Breakpoint: 992px (matches legacy 991px check-screen.js threshold)
 */

/* Override the hardcoded max-width: 600px on body */
@media (min-width: 992px) {
    body {
        max-width: 900px !important;
        margin: 0 auto !important;
        padding: 0 24px !important;
    }

    /* Wider content containers */
    .form-partial,
    #pagecontainer,
    [style*="max-width: 90%"],
    [style*="max-width: 95%"] {
        max-width: 100% !important;
    }

    /* Shipping form — name fields side by side */
    .shipping-form-wrapper {
        max-width: 720px;
        margin: 0 auto;
    }

    .shipping-form-wrapper .columns.form-holder {
        display: inline-block;
        width: 48%;
        vertical-align: top;
    }

    .shipping-form-wrapper .columns.form-holder:nth-child(even) {
        margin-left: 2%;
    }

    /* Wider inputs */
    .form-control {
        font-size: 16px !important;
        padding: 12px 14px !important;
    }

    /* Product selection cards — side by side on choose page */
    .choose-section .choose-wrapper,
    .choose-section .choose-container,
    .item-container {
        display: flex !important;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }

    .item-container > div,
    .choose-item {
        flex: 0 0 calc(33% - 12px);
        min-width: 240px;
    }

    /* Qualify page — center content wider */
    .qualify-wrapper,
    .quiz-content,
    #top-1 > .container {
        max-width: 720px;
        margin: 0 auto;
    }

    /* Payment form — card number full width, exp/cvv in a row */
    .payment-form-wrapper {
        max-width: 720px;
        margin: 0 auto;
    }

    /* CTA buttons — don't stretch full width on desktop */
    .ad-btn-once,
    .button-form,
    .payBtn,
    .button-order,
    [type="submit"].button-form {
        max-width: 480px !important;
        margin: 20px auto !important;
        display: block !important;
        font-size: 18px !important;
    }

    /* Testimonials row */
    .testimonials-section,
    .review-wrapper {
        display: flex;
        gap: 20px;
    }

    .testimonials-section > div,
    .testi-item {
        flex: 1;
    }

    /* Banner images scale */
    .header img,
    .banner img {
        max-height: 350px;
        object-fit: contain;
        width: 100%;
    }

    /* Breadcrumbs centered and wider */
    .breadcrumbs {
        max-width: 600px;
        margin: 0 auto;
    }

    /* Footer wider */
    #footer,
    .footer-in,
    .secure-in {
        max-width: 900px;
        margin: 0 auto;
    }

    /* Upsell — image and text side by side */
    .upsell-main {
        display: flex;
        align-items: flex-start;
        gap: 30px;
        max-width: 800px;
        margin: 0 auto;
    }

    .upsell-main > .upsell-img,
    .upsell-main > .product-image {
        flex: 0 0 35%;
    }

    .upsell-main > .upsell-text,
    .upsell-main > .product-info {
        flex: 1;
    }

    /* Thank you — order info in two columns */
    .order-details,
    .section-confirmation .center {
        max-width: 720px;
        margin: 0 auto;
    }

    .address-wrapper,
    .address-section {
        display: flex;
        gap: 30px;
    }

    .address-shipping,
    .address-billing {
        flex: 1;
    }

    /* Hide mobile-only elements on desktop */
    .mobile-only {
        display: none !important;
    }
}

/* Ultra-wide cap */
@media (min-width: 1400px) {
    body {
        max-width: 1060px !important;
    }
}

/* Mobile: hide desktop-only elements */
@media (max-width: 991px) {
    .desktop-only {
        display: none !important;
    }
}