/* css/forms.css — keyboard-safe, top-aligned/full-screen forms */

.full-form {
  display: flex; flex-direction: column; gap: .9em;
  padding: 1.2em 1.2em calc(2em + env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
  overflow-y: auto;
}
.scroll-form { overflow-y: auto; -webkit-overflow-scrolling: touch; }

.form-head { display: flex; justify-content: space-between; align-items: center; }
.form-head-group { display: flex; flex-direction: column; gap: .4em; }
.form-title { font-size: 1.3em; margin-top: .2em; }
.form-note { color: var(--muted); font-size: .9em; }

.full-form label {
  display: flex; flex-direction: column; gap: .35em;
  font-size: .85em; color: var(--muted);
}

.primary-btn {
  background: var(--gold);
  color: #14140f;
  font-weight: 600;
  border-radius: 999px;
  padding: .85em 1.4em;
  text-align: center;
  transition: filter var(--ease);
}
.primary-btn:hover, .primary-btn:focus-visible { filter: brightness(1.08); }
.primary-btn:disabled { opacity: .5; }

.secondary-btn {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .8em 1.3em;
  text-align: center;
  color: var(--text);
}

.check-row {
  display: flex; align-items: center; gap: .6em;
  padding: .5em 0; font-size: .95em;
}
.check-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); }

.split-fieldset {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8em 1em; margin: 0;
}
.split-fieldset legend { color: var(--muted); font-size: .85em; padding: 0 .3em; }

.fab {
  position: fixed; right: 1em; z-index: 6;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.fab.primary-btn { bottom: calc(1.1em + env(safe-area-inset-bottom, 0px)); }
.fab.secondary-btn { bottom: calc(4.4em + env(safe-area-inset-bottom, 0px)); }

.payment-detail-row { display: flex; justify-content: center; align-items: center; gap: 1em; margin: .6em 0; }
.payment-detail-amt { text-align: center; font-size: 1.6em; font-weight: 600; margin-bottom: .6em; }
.tick-row { display: flex; flex-direction: column; gap: .5em; margin-bottom: 1em; }
.tick-item { display: flex; align-items: center; gap: .5em; color: var(--muted); }