/* ================================================
   responsive-fixes.css
   Add this AFTER your existing CSS files in App.razor / index.html
   It overrides the specific rules causing overflow issues.
   ================================================ */

/* ── QUESTIONNAIRE FIXES ── */

/* Remove the fixed min-width that causes horizontal overflow */
.mmrx-wrap {
    padding: 0 16px 80px !important;
    overflow: visible !important;
}

.mmrx-card {
    min-width: unset !important;
    max-width: 650px !important;
    width: 100% !important;
    padding: 32px 28px 28px !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
    /* Ensure shadow has room to breathe */
    width: calc(100% - 8px) !important;
}

.questionnaire-footer-disclaimer {
    min-width: unset !important;
    max-width: 650px !important;
    width: 100% !important;
}



.progress-track {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 680px) {
    .mmrx-wrap {
        padding: 0 20px 80px !important;
    }

    .mmrx-card {
        width: calc(100% - 8px) !important;
        margin-left: 4px !important;
        margin-right: 4px !important;
    }

    .field-row.cols-3 {
        grid-template-columns: 1fr 1fr !important;
    }

    .field-row.cols-2 {
        grid-template-columns: 1fr !important;
    }

    .opt-grid.two-col {
        grid-template-columns: 1fr 1fr !important;
    }

    .card-title {
        font-size: 1.25rem !important;
    }

    .progress-labels span {
        font-size: .58rem !important;
    }
}

@media (max-width: 420px) {
    .mmrx-card {
        padding: 20px 14px 18px !important;
    }

    .field-row.cols-3,
    .field-row.cols-2 {
        grid-template-columns: 1fr !important;
    }

    .opt-grid.two-col {
        grid-template-columns: 1fr !important;
    }

    .card-title {
        font-size: 1.1rem !important;
    }

    .progress-labels {
        display: none !important; /* too cramped at 420px, hide labels keep bar */
    }
}


/* ── HOME PAGE FIXES ── */

/* Testimonials — kill the min-width that causes overflow */
.testimonials-wrap {
    min-width: unset !important;
    max-width: 100% !important;
    width: 100%;
}

/* Hero — prevent stats from overflowing */
.hero-stats {
    flex-wrap: wrap !important;
    gap: 24px 36px !important;
    justify-content: center;
}

.hero {
    padding: 80px 5vw 60px !important;
    overflow-x: hidden;
}

/* Trust bar — wrap on small screens */
.trust-bar {
    gap: 16px 32px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* Footer grid — prevent overflow on mid-size */
@media (max-width: 1000px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 32px !important;
    }
}

@media (max-width: 700px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px !important;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

/* Why section outer grid */
@media (max-width: 900px) {
    .why-section-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .why-grid {
        grid-template-columns: 1fr 1fr !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 480px) {
    .why-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Products grid */
@media (max-width: 600px) {
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* Steps grid */
@media (max-width: 700px) {
    .steps-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Stats grid */
@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 380px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Perks row */
@media (max-width: 600px) {
    .perks-row {
        flex-direction: column !important;
    }

    .perk {
        min-width: unset !important;
        border-right: none !important;
        border-bottom: 1px solid #E2ECF0 !important;
    }
}

/* How-steps horizontal layout on mobile */
@media (max-width: 600px) {
    .how-steps {
        grid-template-columns: 1fr !important;
    }

    .how-connector {
        width: 2px !important;
        height: 24px !important;
        margin: 0 auto !important;
    }

    .how-step {
        flex-direction: row !important;
        text-align: left !important;
        gap: 16px !important;
    }

    .how-step-box {
        flex: 1 !important;
    }
}

/* Microdosing / Doctor sections */
@media (max-width: 700px) {
    .microdose-wrap,
    .doctor-wrap {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* Why medical rows */
@media (max-width: 600px) {
    .why-medical-row,
    .why-medical-row.reverse {
        grid-template-columns: 1fr !important;
        direction: ltr !important;
    }

    .why-medical-img {
        min-height: 200px !important;
    }

    .why-medical-content {
        padding: 28px 20px !important;
    }
}

/* Global section padding on mobile */
@media (max-width: 480px) {
    section {
        padding: 48px 16px !important;
    }

    .testimonials-bg {
        padding: 60px 16px !important;
    }

    .why-medical-bg {
        padding: 60px 16px !important;
    }

    .cta-strip {
        padding: 52px 16px !important;
    }
}

/* Prevent any element from causing horizontal scroll */
body {
    overflow-x: hidden !important;
}

.hero,
footer,
.trust-bar,
.how-bg,
.products-bg,
.stats-bg,
.testimonials-bg,
.cta-strip {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Testimonial card min-width on very small screens */
@media (max-width: 360px) {
    .t-card {
        min-width: 200px !important;
        max-width: 200px !important;
    }
}