/* The client's order form: a page of its own, outside the manager, made first for a phone.
   Every size is in rem: order-scale.js keeps it phone-sized when the browser's "desktop site" is on. */
:root {
  --bg: #f1f4f9; --panel: #fff; --text: #111827; --muted: #5b6577; --line: #d7dde6; --primary: #1d4ed8; --primary-soft: #eaf0ff;
  --red: #b91c1c; --red-soft: #fdecec; --green: #15803d; --hair: .0625rem;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.45 "Noto Sans Georgian", Arial, sans-serif; }
.hidden { display: none !important; }
.top { display: flex; align-items: baseline; gap: .625rem; padding: .875rem 1rem; background: var(--primary); color: #fff; }
.top b { font-size: 1.25rem; }
.top span { font-size: .875rem; opacity: .9; }
main { width: 100%; max-width: 38.75rem; margin: 0 auto; padding: 1rem; }
.panel { margin-bottom: .875rem; padding: 1rem; border: var(--hair) solid var(--line); border-radius: .75rem; background: var(--panel); }
h2 { margin: 0 0 .625rem; font-size: 1rem; font-weight: 650; }
label { display: block; margin: .75rem 0 .25rem; color: var(--muted); font-size: .875rem; font-weight: 550; }
input, select, textarea { width: 100%; min-height: 2.875rem; padding: .625rem .75rem; border: var(--hair) solid var(--line); border-radius: .5625rem; background: #fff; color: var(--text); font: inherit; }
input:focus, select:focus, textarea:focus { outline: .125rem solid var(--primary); outline-offset: -.0625rem; border-color: var(--primary); }
.invalid { border-color: var(--red); }
.name-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .625rem; }
.hint { display: block; margin: .375rem 0 0; color: var(--muted); font-size: .8125rem; }
.hint.is-ok { color: var(--green); }
.center { text-align: center; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn { min-height: 2.875rem; padding: .625rem .875rem; border: var(--hair) solid var(--line); border-radius: .5625rem; background: #fff; color: var(--text); font: 600 .9375rem "Noto Sans Georgian", Arial, sans-serif; cursor: pointer; white-space: nowrap; }
.btn.primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.btn.wide { width: 100%; min-height: 3.25rem; font-size: 1.0625rem; }
.btn:disabled { opacity: .6; cursor: default; }
.chosen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.chosen div { padding: .625rem .75rem; border-radius: .5625rem; background: var(--primary-soft); }
.chosen span { display: block; color: var(--muted); font-size: .8125rem; }
.chosen b { font-size: 1rem; }
.choices { display: grid; gap: .5rem; }
.choice { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr) auto; align-items: center; gap: .25rem .625rem; margin: 0; padding: .75rem; border: var(--hair) solid var(--line); border-radius: .625rem; color: var(--text); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.choice input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; accent-color: var(--primary); }
.choice b { font-weight: 650; }
.choice .price { font-weight: 700; white-space: nowrap; }
.choice small { grid-column: 2 / -1; color: var(--muted); font-size: .8125rem; font-weight: 400; }
.find-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.find-row input { flex: 1 1 15rem; width: auto; min-width: 0; }
.find-row .btn { flex: 1 1 5rem; }
.found { margin-top: .5rem; border: var(--hair) solid var(--line); border-radius: .5625rem; overflow: hidden; }
.found button { display: block; width: 100%; min-height: 2.75rem; padding: .625rem .75rem; border: 0; border-bottom: var(--hair) solid var(--line); background: #fff; color: var(--text); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.found button:last-child { border-bottom: 0; }
.map { height: 20rem; margin-top: .625rem; border: var(--hair) solid var(--line); border-radius: .625rem; z-index: 0; }
.map .leaflet-bar a, .map.leaflet-touch .leaflet-bar a { width: 1.875rem; height: 1.875rem; line-height: 1.875rem; font-size: 1.25rem; }
.error { margin: .5rem 0 .875rem; padding: .75rem .875rem; border: var(--hair) solid var(--red); border-radius: .625rem; background: var(--red-soft); color: var(--red); font-weight: 550; }
#message { padding: 1.75rem 1.125rem; text-align: center; font-size: 1.0625rem; }
#message b { display: block; margin-bottom: .375rem; font-size: 1.25rem; }
/* the picture is square, with the logo in a band across its middle: only the band is shown */
#message .logo { display: block; width: 13rem; height: 6.5rem; max-width: 100%; margin: 0 auto 1rem; object-fit: cover; object-position: center 55%; }
/* faint, like a copyright line (the owner's wish) */
.contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: .125rem 1rem; margin-top: 1.5rem; font-size: .8125rem; }
.contacts a { color: var(--muted); opacity: .75; text-decoration: none; white-space: nowrap; }
.contacts span { margin-right: .25rem; }