/* ------------------------------------------------------------------
   Mortgage / Monthly-Payment calculator — mobile responsiveness.
   The React bundle's Tailwind CSS is purged, so some width/responsive
   utility classes (w-28, w-32, sm:w-*) are not present in the compiled
   stylesheet. This file targets stable ids added to the modal and its
   label/input rows so the dialog behaves on small screens.
   ------------------------------------------------------------------ */

/* Never let the dialog or its contents push past the viewport. */
#mortgage-calc-modal {
    width: 100%;
    max-width: 42rem;      /* matches max-w-2xl */
}

#mortgage-calc-modal input[type="number"] {
    min-width: 0;
    max-width: 100%;
}

/* Swap the Down Payment inputs so the % field comes before the $ field. */
#calc-hdr-down > div > div:nth-child(1) { order: 2; }
#calc-hdr-down > div > div:nth-child(2) { order: 1; }

/* Make the Down Payment $ and % signs the same size as the Home Purchase Price $ (text-sm). */
#calc-hdr-down > div > div > span { font-size: 0.875rem; }

/* Phones / small tablets. */
@media (max-width: 640px) {
    /* Tighten the generous desktop padding so content has room. */
    #mortgage-calc-modal {
        padding: 1.25rem;
    }

    /* Let the "label  +  input(s)" rows wrap instead of overflowing. */
    #calc-hdr-price,
    #calc-hdr-down {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    /* The input group drops onto its own full-width line below the label. */
    #calc-hdr-price > div,
    #calc-hdr-down > div {
        width: 100%;
    }

    /* Home Purchase Price: single input fills the line. */
    #calc-hdr-price > div {
        justify-content: flex-end;
    }
    #calc-hdr-price input[type="number"] {
        flex: 1 1 auto;
        width: auto;
    }

    /* Down Payment: the $ and % inputs share the line, spread apart. */
    #calc-hdr-down > div {
        justify-content: space-between;
        gap: 0.5rem;
    }
    #calc-hdr-down input[type="number"] {
        width: 6.5rem;
    }
}

/* Very narrow phones (≈320px): stack the two Down Payment inputs. */
@media (max-width: 360px) {
    #calc-hdr-down > div {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    #calc-hdr-down > div > div {
        justify-content: space-between;
        width: 100%;
    }
    #calc-hdr-down input[type="number"] {
        width: 100%;
    }
}