/*
 * Form primitives for the public site. Every form in `templates/public/`
 * MUST use these classes — do NOT redefine inputs, labels, or submit
 * buttons per-page.
 *
 * Markup pattern:
 *   <form class="ub-form">
 *       <div class="ub-form__row">              ← optional, for side-by-side fields
 *           <div class="ub-form__field">
 *               <label class="ub-form__label" for="…">…</label>
 *               <input class="ub-form__input{{ error ? ' is-invalid' : '' }}">
 *               <p class="ub-form__hint">…</p>     ← optional
 *               <p class="ub-form__error">…</p>    ← only when invalid
 *           </div>
 *       </div>
 *       <button class="ub-btn ub-btn--primary">…</button>
 *   </form>
 *
 * Use modifier `--cols-4` on `.ub-form__row` for the dense 4-up layout
 * used by the memorial intake form (collapses to 2 cols on tablet,
 * 1 col on mobile).
 */

.ub-form {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-xl);
}

/* Row — places sibling fields side-by-side at ≥640px. */
.ub-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ub-space-l);
}

@media (min-width: 640px) {
    .ub-form__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Memorial-style 4-column dense row. */
@media (min-width: 1024px) {
    .ub-form__row--cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ub-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ub-form__field--full {
    grid-column: 1 / -1;
}

.ub-form__label {
    font-size: var(--ub-text-xs);
    font-weight: 600;
    color: var(--ub-color-heading);
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

/* Заавал бөглөх талбарын тэмдэглэгээ — `required` input-тэй хосолсон label дээр. */
.ub-form__label--required::after {
    content: ' *';
    color: var(--ub-color-danger);
}

.ub-form__input,
.ub-form__select,
.ub-form__textarea {
    width: 100%;
    height: var(--ub-input-height);
    padding: 8px 16px;
    background-color: var(--ub-input-bg);
    border: 1px solid var(--ub-color-nav-border);
    border-radius: var(--ub-radius-xs);
    font-family: var(--ub-font-body);
    font-size: var(--ub-text-sm);
    color: var(--ub-color-heading);
    line-height: 1.4;
    transition: border-color var(--ub-transition-fast),
                background-color var(--ub-transition-fast);
}

.ub-form__textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 16px;
    resize: vertical;
}

.ub-form__input::placeholder,
.ub-form__textarea::placeholder {
    color: var(--ub-color-placeholder);
}

.ub-form__input:focus,
.ub-form__select:focus,
.ub-form__textarea:focus {
    outline: none;
    border-color: var(--ub-color-brand);
    background-color: var(--ub-input-bg-focus);
}

.ub-form__input.is-invalid,
.ub-form__select.is-invalid,
.ub-form__textarea.is-invalid {
    border-color: var(--ub-color-danger);
}

/* Suppress native number-input spinners — design uses plain text fields. */
.ub-form__input[type='number']::-webkit-outer-spin-button,
.ub-form__input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ub-form__input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Custom <select> chevron. Wrap the <select> in `.ub-form__select-wrap`
   and place an SVG with `.ub-form__select-caret` as a sibling. */
.ub-form__select-wrap {
    position: relative;
}

.ub-form__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 44px;
    cursor: pointer;
}

.ub-form__select:invalid {
    color: var(--ub-color-placeholder);
}

.ub-form__select-caret {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: var(--ub-color-body);
    pointer-events: none;
}

.ub-form__hint {
    font-size: 0.75rem;
    color: var(--ub-color-body-muted);
    margin: 0;
    line-height: 1.4;
}

.ub-form__error {
    font-size: 0.75rem;
    color: var(--ub-color-danger-text);
    margin: 0;
    line-height: 1.4;
}

/* Inline checkbox row (terms acceptance, "remember me", etc.) */
.ub-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--ub-space-l);
    font-size: var(--ub-text-sm);
    color: var(--ub-color-body);
    line-height: 1.5;
    cursor: pointer;
}

.ub-form__checkbox input {
    margin-top: 2px;
    accent-color: var(--ub-color-brand);
}

.ub-form__checkbox a {
    color: var(--ub-color-brand);
    text-decoration: underline;
}