/* ================================================================
   Mobile layout for the payment pages
   (paynow.html, paynow-hbl.html, paynow-ubl.html)
   Only applies on screens up to 760px wide - desktop is unchanged.
   ================================================================ */
@media (max-width: 760px) {

    html, body { overflow-x: hidden; }
    img { max-width: 100%; }

    /* ---------- Header pictures: scale to the screen width ---------- */
    table[width="951"] { width: 100% !important; }
    table[width="951"] td { height: auto !important; }
    table[width="951"] tr:first-child td { height: 4px !important; }
    table[width="951"] td:nth-child(1) { width: 21.77% !important; }
    table[width="951"] td:nth-child(2) { width: 25.76% !important; }
    table[width="951"] td:nth-child(3) { width: 29.13% !important; }
    table[width="951"] td:nth-child(4) { width: 23.34% !important; }
    table[width="951"] img { display: block; width: 100% !important; height: auto !important; }

    /* ---------- Top menu: centred, wraps, easy to tap ---------- */
    td[bgcolor="#6fa2a3"] { height: auto !important; padding: 6px 8px; }
    td[bgcolor="#6fa2a3"] td { text-align: center !important; line-height: 2; }
    td[bgcolor="#6fa2a3"] td[width="40"] { display: none; }
    td[bgcolor="#6fa2a3"] table { width: 100% !important; }

    /* ---------- Main area: form first, side column below it ---------- */
    tr:has(> td.left-col) { display: flex; flex-direction: column; }
    tr:has(> td.left-col) > td { display: block; width: 100% !important; }
    td.left-col { order: 2; padding: 0 12px; box-sizing: border-box; }
    td.left-col img[src*="big.gif"] { display: none; }
    td.left-col td[height="23"], td.left-col td[height="20"] { height: 0 !important; font-size: 0; line-height: 0; }
    .side-panels { max-width: none !important; }

    .fill-h { height: auto !important; }
    td.col-divider { display: none !important; }
    .fill-h td[width="15"], .fill-h td[width="30"] { width: 0 !important; padding: 0; font-size: 0; }
    .fill-h td[width="12"] { width: 12px !important; }
    .fill-h td[height="27"] { height: 12px !important; }
    .fill-h td[width="30"]:last-child { width: 12px !important; }

    /* ---------- Form ---------- */
    .paynow-header, .epg-checkout .card, .pay-choice { max-width: none !important; }
    .epg-checkout .card { padding: 18px 14px !important; border-radius: 10px; }
    .epg-checkout input[type=text],
    .epg-checkout input[type=email],
    .epg-checkout input[type=tel],
    .epg-checkout input[type=number],
    .epg-checkout select,
    .epg-checkout textarea { font-size: 16px !important; }       /* stops iPhone zooming in */
    .epg-checkout .address-block { padding: 14px 12px; }
    .epg-checkout .summary .row, .epg-checkout .fx-summary .fx-row { flex-wrap: wrap; }
    .epg-checkout button { font-size: 17px; padding: 15px; }

    /* ---------- Footer: stacked and centred ---------- */
    td[bgcolor="#7aadca"] { display: block; width: 100% !important; height: auto !important; text-align: center; padding: 8px 0; }
    td[bgcolor="#7aadca"] table { width: 100% !important; }
    td[bgcolor="#7aadca"] tr { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
    td[bgcolor="#7aadca"] td { display: block; width: auto !important; height: auto !important; text-align: center !important; }
    td[bgcolor="#7aadca"] td[width="10"] { display: none; }
    td[bgcolor="#7aadca"] img[src*="footer.gif"] { display: none; }
    td[bgcolor="#7aadca"] .copy_right { width: 100% !important; }
}