/* SaraHome — Form core mobile (extracted from style.css 2026-08-11)
   Form section/group/input mobile-friendly + optional-tag + size-conversion-hint.
   分拆規則: 必須 link 喺 style.css 之後、mobile.css 之前 (對位 §R-N+146 後寫後贏). */

/* §R-N+266 選填標籤樣式 (§R-N+26xx QW-2 AA contrast fix: #94a3b8 2.8:1 → token 4.7:1) */
.optional-tag {
    color: var(--sarahome-v3-color-text-secondary);
    font-size: 0.85em;
    font-weight: 400;
    margin-left: 0.4em;
}

/* §R-N+26xx QW-1: .required-mark orphan class definition
   對位 §R-N+372.10 + §R-N+23xx+1 markup — 10+ templates 用 span.required-mark 但 0 CSS rule
   對位 framework rule §R-N+73 anti-fraud (orphan 防呆) */
.required-mark {
    color: var(--sarahome-v3-color-error);
    margin-left: 0.15em;
    font-weight: 600;
}


/* §R-N+267 mobile-friendly audit */
/* 1. Form section padding 增加 tap-friendly spacing */
.form-section {
    padding: 1.5rem 1.25rem;
    margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
    .form-section {
        padding: 2rem 1.75rem;
    }
}

/* 2. Form-group 加大 mobile spacing */
.form-group {
    margin-bottom: 1.25rem;
}
@media (max-width: 768px) {
    .form-row-flex {
        flex-direction: column;
        gap: 1.25rem;
    }
}

/* 3. Input tap-friendly 加大 (R68 elderly-friendly 18px mobile) */
@media (max-width: 768px) {
    .input-xl {
        font-size: var(--sarahome-v3-font-md);
        padding: 0.875rem 1rem;
        min-height: 3rem;
    }
    select.input-xl {
        min-height: 3rem;
    }
    label {
        font-size: 1rem;
        margin-bottom: 0.5rem;
        display: block;
    }
}

/* 4. Step indicator mobile wrap-friendly */
@media (max-width: 768px) {
    .form-step-indicator {
        flex-wrap: wrap;
        gap: var(--sarahome-v3-space-2);
    }
    .form-step-label {
        font-size: 0.875rem;
    }
}


/* §R-N+270 size conversion hint (對位 CEO verdict 呎² ⇄ m² 換算 reference) */
.size-conversion-hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--sarahome-v3-color-text-secondary-aa);
    line-height: 1.6;
    padding: var(--sarahome-v3-space-2) var(--sarahome-v3-space-3);
    background-color: var(--sarahome-v3-surface-section-alt);
    border-left: 3px solid var(--sarahome-v3-color-info-blue);
    border-radius: 4px;
}


/* §R-N+23xx+1 Phase 1.6 (2026-08-20) — form validation error UX 統一
   login/register/forgot-password per-field inline error.
   對位 §R-N+290 style consistency: token 用 --sarahome-v3-color-error (#DC2626),
   唔另起新色。a11y: role=alert + aria-describedby 對位 (template 層),
   此處只供視覺。 */
.form-error-text {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--sarahome-v3-color-error);
}
.form-error-text svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}
.form-group .form-input-error,
.form-group .form-input-error:focus {
    border-color: var(--sarahome-v3-color-error);
    outline-color: var(--sarahome-v3-color-error);
    background-color: #FEF2F2;  /* 淡紅底, 錯誤欄位 1 秒內可掃視 */
}