/* ==========================================================================
   Mkind Labs - mobile / tablet responsive layer
   --------------------------------------------------------------------------
   Loaded last on every page, after stylenew.css / desktop.css, so these
   rules win on specificity ties without needing !important everywhere.
   Desktop (>= 992px) layout is deliberately left alone apart from the two
   structural fixes in section 1, which are no-ops visually.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Page-width integrity
   -------------------------------------------------------------------------- */

/* #myTopnav is width:100% and position:sticky, but it also carries
   float:left, and nothing after the header clears it. From 768px up that
   uncleared full-width float pushes the first element that establishes its
   own formatting context (the breadcrumb .row, a flex container) out past
   the right edge, which stretches the layout viewport to ~878px and zooms
   the whole page out. The header is full-width and sticky, so the float
   contributes nothing - dropping it is visually identical. */
#myTopnav {
    float: none;
}

/* .container1 carries no horizontal padding, so Bootstrap's negative row
   gutters (-12px each side) spill past both edges of the viewport. Give the
   container the padding the negative margins expect. */
.container1 {
    padding-left: 12px;
    padding-right: 12px;
}

/* Long unbroken strings (URLs, ids, lab codes) must not widen the page. */
@media (max-width: 991px) {

    p,
    li,
    h1,
    h2,
    h3,
    h4,
    .title,
    .countprofile,
    td {
        overflow-wrap: break-word;
    }
}


/* --------------------------------------------------------------------------
   2. Test / package cards
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {

    /* The card image is forced into a 150px-tall box with object-fit:cover.
       The package artwork is a ~2:1 banner, so in a 171x150 box (1.14:1)
       roughly 45% of the width is cropped away - which is exactly where the
       package name and the MkindLabs logo sit. Keep a banner-shaped box so
       the artwork stays legible. */
    section.packeg.packegbg img.packageImage,
    .service.testing .field-content1 img.packageImage {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    /* Card titles are nowrap + ellipsis, which truncates most package names
       to one or two words on a phone. Two wrapped lines fit far more. */
    .title,
    .title a,
    p._test_name a {
        white-space: normal;
        max-width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* MRP / selling price / discount badge on one 171px-wide row overruns its
       box. Let it wrap and centre instead. */
    .rates.boxes,
    .home .rates {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 8px;
        font-size: 15px;
    }

    .rates del,
    .rates.boxes del {
        font-size: 14px;
    }

    .rates .blue {
        font-size: 15px;
    }

    .rates .sm.percentage_ {
        font-size: 11px;
        white-space: nowrap;
    }

    /* Equal-width Add / Book Now buttons that clear the 40px tap minimum. */
    .call-btn {
        gap: 8px;
    }

    .call-btn a {
        flex: 1 1 0;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 4px;
        letter-spacing: 0;
    }

    /* The compare checkbox renders at 13x13 - too small to hit reliably. */
    .addtoComparediv_ {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    input.__addToCompare {
        width: 18px;
        height: 18px;
        min-width: 18px;
        margin: 0;
    }
}

/* One card per row on narrow phones: two 171px columns leave no room for the
   price row or the two buttons. */
@media (max-width: 480px) {

    .__test_list_row>.col-6,
    .__test_list_row>.col-md-3.col-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    section.packeg.packegbg img.packageImage,
    .service.testing .field-content1 img.packageImage {
        aspect-ratio: 2 / 1;
    }

    .title,
    .title a {
        -webkit-line-clamp: 3;
        font-size: 16px;
    }

    .call-btn a {
        font-size: 13px;
    }
}


/* --------------------------------------------------------------------------
   3. Listing toolbar - heading, result count, sort, admin actions
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* float:end + a 148px select clips "Popular Tests & Packages" mid-word.
       Stack the label over a full-width control. */
    form.float-end.short {
        float: none !important;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin-bottom: 12px;
    }

    form.float-end.short label {
        flex: 0 0 auto;
        margin: 0;
        white-space: nowrap;
    }

    form.float-end.short select,
    select.form-select._sort_filter {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        /* 16px keeps iOS Safari from zooming the page on focus. */
        font-size: 16px;
        min-height: 44px;
    }

    /* Admin shortcuts on the public listing page. */
    .admin-add-bar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .admin-add-bar a {
        flex: 1 1 100%;
        text-align: center;
        min-height: 42px;
        line-height: 26px;
    }

    .home-section {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {

    form.float-end.short {
        flex-wrap: wrap;
    }

    form.float-end.short label {
        flex: 1 1 100%;
    }
}


/* --------------------------------------------------------------------------
   4. Header controls
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* Search / account / cart / menu render 29-30px wide - under the 40px
       tap minimum, and packed tightly together. */
    .topnav a#show-search-box.ndn,
    .topnav a.login-desk,
    .topnav a.crt,
    .topnav a.icon.ndn,
    .topnav a#carout.icon {
        min-width: 42px;
        text-align: center;
    }

    /* Small print in the header/nav and consent copy sits at 10px. */
    .viewall a,
    a.__book_a_test_link,
    label.form-check-label,
    [for="flexCheckDefault"] {
        font-size: 12px;
    }
}


/* --------------------------------------------------------------------------
   5. Forms
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* Any control under 16px makes iOS Safari zoom in on focus and leaves the
       user scrolled sideways on a page that was fine a moment ago. */
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    select,
    textarea,
    .custom-form-control-a,
    .form-select {
        font-size: 16px;
    }

    .custom-form-control-a,
    .form-item-a input,
    .form-item-a select {
        min-height: 44px;
    }

    .banner-form button[type="submit"],
    .banner-form .btn {
        min-height: 44px;
    }
}


/* --------------------------------------------------------------------------
   5b. "Schedule a Home Collection" card
       (homepage, contact-us, gurugramvv - wherever .banner-form appears)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* Both the card and its grid column are pinned to a fixed 260px while
       the card's own content measures ~300px+, so the consent row and the
       Submit button spill out of the bottom of the card and get painted
       over by the trust-badge section that follows in the document (it
       starts where the fixed-height column ends, so it visually covers
       whatever the card overflowed). Let both size to content. */
    section.banner-sec .d-flex-desk .col-md-4.col-sm-12 {
        height: auto !important;
    }

    .home .banner-form {
        height: auto !important;
        min-height: 0;
    }

    /* --- one control geometry for all three fields ---------------------
       Before: name/mobile inputs were 44px tall with a 5px radius and 11px
       text, while the select2 dropdown next to them was 42px with a 4px
       radius and 13px text - visibly a different control. Everything below
       is stated at matching weight because the base rules use !important. */
    .home .banner-form .form-item-a {
        margin-bottom: 12px;
    }

    .home .banner-form .form-item-a:last-of-type {
        margin-bottom: 14px;
    }

    .home .custom-form-control-a,
    .home .banner-form .custom-form-control-a {
        height: 48px !important;
        min-height: 48px;
        font-size: 16px !important;
        padding: 0 15px !important;
        margin: 0 !important;
        border-radius: 5px !important;
        line-height: normal;
    }

    /* select2 replaces the <select> with its own markup, so the visible
       control has to be matched to the inputs explicitly. */
    .home .banner-form .select2-container,
    .home .banner-form .select2 {
        width: 100% !important;
        display: block;
    }

    .home .banner-form .select2-selection--single {
        height: 48px !important;
        border: 1px solid #cccece !important;
        border-radius: 5px !important;
        background: #fff;
        display: flex;
        align-items: center;
    }

    .home .banner-form .select2-selection--single .select2-selection__rendered {
        flex: 1 1 auto;
        height: 46px;
        line-height: 46px;
        padding: 0 15px !important;
        font-size: 16px !important;
        color: #000;
    }

    .home .banner-form .select2-selection--single .select2-selection__placeholder {
        font-size: 16px !important;
        color: #6c757d !important;
        font-weight: 400 !important;
    }

    .home .banner-form .select2-selection--single .select2-selection__arrow {
        height: 46px !important;
        top: 0 !important;
        right: 8px !important;
        width: 24px;
    }

    /* --- consent + Submit ---------------------------------------------
       These two sit in one nowrap flex row, which on a phone squeezes the
       consent sentence into a narrow column beside the button. Stack them:
       consent on its own line, then a full-width primary action. */
    .home .banner-form .form-item-.formcon {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 12px;
        margin: 0;
    }

    .home .banner-form .formcon .form-check {
        margin: 0 !important;
        align-items: flex-start;
        gap: 8px;
    }

    .home .banner-form .formcon .form-check .form-check-input.checks {
        width: 18px;
        min-width: 18px;
        height: 18px;
        top: 0;
        margin-top: 1px !important;
    }

    .home .banner-form .formcon .form-check .form-check-label {
        font-size: 12px;
        line-height: 1.45;
        padding-left: 0;
    }

    /* The submit wrapper is .d-flex.justify-content-end - override to full
       width so the button is not a small right-aligned pill on mobile. */
    .home .banner-form .formcon>.d-flex {
        display: block !important;
        width: 100%;
    }

    .home .banner-form .banner-sub-btn {
        width: 100% !important;
        min-height: 48px;
        font-size: 16px;
        padding: 12px 16px !important;
    }
}


/* --------------------------------------------------------------------------
   6. Carousels
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* Prev/next hit areas are 32px wide and sit on top of the card edges. */
    .arrow.prev,
    .arrow.next {
        min-width: 40px;
    }

    /* Section heading + "View All" pill on one line pushes the pill against
       the viewport edge. */
    .b-part-sec .row .col-md-6+.col-md-6,
    .b-part-sec-disease .row .col-md-6+.col-md-6 {
        margin-top: 4px;
    }
}


/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* Footer link rows render around 15px tall - hard to hit accurately. */
    .footer a,
    .bottomfooter a {
        display: inline-block;
        padding: 6px 0;
        font-size: 13px;
    }

    .footer .row.footer-list>[class*="col-"] {
        margin-bottom: 14px;
    }
}

/* --------------------------------------------------------------------------
   8. Fixed bottom "Call Me Back" bar
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* #jumpButton is injected 5s after load as a fixed, full-width bar at
       bottom:0 with z-index 9999, so it permanently covers the last ~70px of
       the page. Reserve that space inside the footer (rather than on body, so
       the footer's own background fills it) and keep the bar clear of the
       home indicator on notched phones. */
    section.bottomfooter {
        padding-bottom: 80px;
    }

    #jumpButton {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    /* The close affordance sits 48px in from the right, which reads as part of
       the layout rather than a dismiss control, and is only 28px tall. */
    #jumpButton .close-btn {
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        min-width: 44px;
        min-height: 44px;
        line-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   9. Remaining small text and tap targets
   Each of these loses to a more specific or !important rule elsewhere, so
   it is re-stated at matching weight here.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* .desk-head-view .viewall > a pins 10px !important text into a 30px pill
       with line-height:8px, so the label sits off-centre and unreadable. */
    .desk-head-view .viewall>a,
    .topnav .viewall>a {
        font-size: 12px !important;
        height: 34px;
        line-height: 34px !important;
        text-indent: 0;
        max-width: 140px !important;
        padding: 0 14px;
    }

    /* Login popup labels and consent copy sit at 10px. */
    #showLoginPopup .input-section label,
    #showLoginPopup .input-section span {
        font-size: 12px;
    }

    /* PACKAGES / TESTS toggle renders 38px tall. */
    .taeb,
    .taeb.active {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Breadcrumb links are 14px tall with no vertical padding. */
    .home-section p,
    .home-section a {
        padding: 4px 0;
    }

    /* Admin-only "Edit" overlay on each card image. */
    a.admin-edit-badge {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        padding: 0 12px;
        font-size: 12px;
    }
}

/* --------------------------------------------------------------------------
   10. Carousel arrows hanging off the page edge
   -------------------------------------------------------------------------- */

/* The .items sliders (Top Wellness Packages, Most Prescribed Tests) park
   .slick-prev at left:-25px and .slick-next at right:-25px, but .row.items
   spans the full viewport width, so the next arrow sits 25px past the right
   edge and gives the whole page a horizontal scrollbar. Scoped to >=768px
   because below that the arrows are repositioned below the track. */
@media (min-width: 768px) {

    .row.items>.slick-prev {
        left: 0;
    }

    .row.items>.slick-next {
        right: 0;
    }
}

/* --------------------------------------------------------------------------
   11. PACKAGES / TESTS tab switch, and page gutter alignment
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* main .wrapper (the yellow track) is width:85%, so the toggle sat 27px
       inside the page gutter while the breadcrumb, the condition slider, the
       sort control and the container all sit at 12px. Three different left
       edges stacked down the page. Put the track on the same gutter. */
    main .wrapper,
    .col-lg-4 main .wrapper {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        /* keep the sliding pill inside the track's rounded ends */
        overflow: hidden;
    }

    /* Both halves exactly 50%, same box, label optically centred. */
    .taeb-switch {
        justify-content: flex-start;
        align-items: stretch;
        width: 100%;
    }

    .taeb-switch .taeb,
    .taeb-switch .taeb.active {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
        text-align: center;
        text-indent: 0;
        font-size: 13px;
        letter-spacing: 0.02em;
    }

    /* The active pill is an ::after inset to 0 on the active half. Make sure
       it tracks the half exactly and never pokes past the track. */
    .taeb-switch .taeb.active::after {
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        height: auto !important;
    }

    /* The label has to sit above the pill. */
    .taeb-switch .taeb {
        position: relative;
        z-index: 1;
    }

    .taeb-switch .taeb.active::after {
        z-index: -1;
    }
}

/* Card grid on the same 12px gutter as everything else. Bootstrap's
   container/row/col gutter maths lands the card edges at 24px here because
   .container1 already carries the page inset, so drive the columns with a
   flex gap instead - the edges then match the controls above them. */
@media (max-width: 991px) {

    .container1 {
        padding-left: 0;
        padding-right: 0;
    }

    .container1>.row.__test_list_row {
        margin-left: 0;
        margin-right: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .container1>.row.__test_list_row>[class*="col-"] {
        padding-left: 0;
        padding-right: 0;
        flex: 0 0 auto;
        width: calc((100% - 12px) / 2);
        max-width: calc((100% - 12px) / 2);
    }
}

@media (max-width: 480px) {

    .container1>.row.__test_list_row>[class*="col-"],
    .__test_list_row>.col-6,
    .__test_list_row>.col-md-3.col-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
}