/* mobile-form.css
 * Shared responsive baseline for the shop auth / form pages (index, forgot_password,
 * pay, dashboard, admin). Tailwind's smallest text utilities are 12px by default;
 * this raises supporting copy to a readable minimum on high-DPI mobile screens.
 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Support text and compact labels must remain readable on normal and high-DPI screens. */
.text-xs,
.text-\[8px\], .text-\[9px\], .text-\[10px\], .text-\[11px\], .text-\[12px\] {
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.6 !important;
}

button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

@media (max-width: 640px) {
    /* Auth card breathing room */
    .login-card { margin: 0.75rem !important; }

    /* Headings keep a clear visual hierarchy without becoming oversized. */
    .text-2xl { font-size: 1.35rem !important; line-height: 1.9rem !important; }
    .text-3xl { font-size: 1.65rem !important; line-height: 2.2rem !important; }

    /* Brand logo badge */
    .w-20 { width: 4rem  !important; } /* 64px (was 80px) */
    .h-20 { height: 4rem !important; }
    .w-10 { width: 2rem  !important; } /* 32px (was 40px) */
    .h-10 { height: 2rem !important; }

    /* Card padding — tighter */
    .p-6 { padding: 1rem !important; }       /* 16px (was 24px) */
    .p-8 { padding: 1.25rem !important; }    /* 20px */
    .p-5 { padding: 0.875rem !important; }   /* 14px */

    /* Inputs / buttons vertical padding */
    .py-3   { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; } /* 10px */
    .py-3\.5 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }  /* 12px */

    /* Vertical rhythm between fields */
    .mb-8 { margin-bottom: 1.5rem !important; }
    .mb-6 { margin-bottom: 1rem   !important; }
    .mb-5 { margin-bottom: 1rem   !important; }
    .mt-6 { margin-top: 1.25rem   !important; }

    /* Captcha image — keep readable but trim width */
    .h-12 { height: 2.75rem !important; } /* 44px */
    .w-28 { width: 6.5rem !important; }   /* 104px */
    .gap-3 { gap: 0.5rem !important; }

    /* Slightly tighter radii */
    .rounded-2xl { border-radius: 1rem !important; }

    /* Avoid clipped text in compact cards, chips and action buttons. */
    .whitespace-nowrap { white-space: normal !important; }
    input, select, textarea { min-height: 44px; }
}