/* ============================================================
   HOUSBE — Standardized mobile form spacing & sizing
   ------------------------------------------------------------
   Single source of truth for compact, consistent forms on
   phones (<= 768px). Every form page currently defines its own
   field sizing in a page-local <style> block (four different
   conventions), which is why forms feel bulky and inconsistent
   on mobile.

   This layer is loaded LAST (via inc/footer.php, at the end of
   <body>) so it wins the cascade over those inline blocks, and
   uses !important at matching-or-higher specificity to override
   the heavy per-page !important usage.

   Design tokens (Balanced density):
     field padding    11px 14px
     field font-size  16px   (>=16px prevents iOS focus-zoom)
     grid gap         14px
     label            13px
     card padding     18px 14px
     submit padding   13px

   Scope: main user app only. Admin / landing / support areas use
   their own inc/ includes and are intentionally NOT affected.
   Desktop (> 768px) is untouched.
   ============================================================ */

@media (max-width: 768px) {

    /* --- Card / form containers: trim bulky padding ------------------ */
    .form-container,
    .form-wrapper,
    .property-form-container,
    .form-account {
        padding: 18px 14px !important;
    }

    /* --- Vertical rhythm between fields ------------------------------ */
    .form-grid {
        gap: 14px !important;
        margin-bottom: 20px !important;
    }

    .form-group,
    .form-group-custom {
        gap: 6px !important;
        margin-bottom: 14px !important;
    }

    /* When the grid controls spacing via gap, kill stacked field margins */
    .form-grid .form-group {
        margin-bottom: 0 !important;
    }

    /* --- Fields: one consistent compact size ------------------------- */
    /* 16px font-size is deliberate: iOS Safari zooms the viewport when a
       focused field is < 16px. Padding is form-scoped (not a bare `input`
       selector) so non-form inputs (search bars, filters) are left alone. */
    .form-container input,
    .form-container select,
    .form-container textarea,
    .form-grid input,
    .form-grid select,
    .form-grid textarea,
    .form-control,
    .custom-input,
    .form-control-custom {
        padding: 11px 14px !important;
        font-size: 16px !important;
    }

    /* Selects with a custom dropdown chevron keep room on the right */
    select.form-control {
        padding-right: 40px !important;
    }

    /* Fixed-height field variants: let padding define the height instead
       of a tall fixed box, but keep a comfortable tap target */
    .form-control-custom {
        height: auto !important;
        min-height: 44px !important;
    }

    /* Textareas must stay multi-line */
    .form-container textarea,
    .form-grid textarea,
    textarea.form-control,
    textarea.form-control-custom,
    .bio-textarea-custom {
        height: auto !important;
        min-height: 96px !important;
    }

    /* --- Labels ------------------------------------------------------ */
    .form-group label,
    .form-group-custom label,
    .form-container label {
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }

    /* --- Primary submit button --------------------------------------- */
    .submit-btn {
        padding: 13px !important;
        font-size: 15px !important;
        margin-top: 6px !important;
    }

    /* --- Form header block ------------------------------------------- */
    .form-header {
        margin-bottom: 20px !important;
    }

    .form-header h1 {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }
}