/* Task-first ordering and compact controls, shared by web and native. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.uyali-item-details{display:grid;grid-template-columns:minmax(64px,.75fr) minmax(72px,.8fr) minmax(104px,1.25fr);gap:8px;width:100%;padding:0 2px 8px}
.uyali-item-details label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:11px;color:var(--text-secondary,#71717a)}
.uyali-item-details .form-input{width:100%;min-width:0;padding:9px 8px;font-size:13px;border-radius:9px}
.uyali-substitution-label{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--text-secondary,#71717a);width:100%}
.uyali-substitution-label select{max-width:100%;flex:1;font-size:12px;padding:9px;min-height:36px}
.item-row{flex-wrap:wrap}.item-row .item-main{min-width:0;width:100%}.item-main .item-input{min-width:0;flex:1}
.uyali-local-reference{width:100%;padding:4px 2px 6px;font-size:11px;color:var(--text-secondary,#71717a)}
.uyali-local-reference summary{cursor:pointer;padding:5px 0;min-height:28px}.uyali-local-reference .login-legal{font-size:11px;line-height:1.5;margin:6px 0}
.uyali-list-tools{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.uyali-list-tools button{font-size:12px;padding:8px 10px;border:1px solid var(--border-color,#e4e4e7);border-radius:8px;min-height:36px}
.uyali-saved-entry{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-color,#e4e4e7)}
.uyali-checkout-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;list-style:none;padding:0;margin:0 0 20px;counter-reset:none}
.uyali-checkout-steps li{padding:10px 4px;font-size:12px;text-align:center;border-bottom:2px solid var(--border-color,#e4e4e7);color:var(--text-secondary,#71717a)}
.uyali-checkout-steps li[aria-current=step]{border-color:var(--accent,#10b981);font-weight:700;color:var(--text-primary,#18181b)}
[data-checkout-step] h3{font-size:18px;line-height:1.4;margin:0 0 10px}[data-checkout-step] .form-input{margin-bottom:8px}
.uyali-pin-summary{padding:12px;border:1px solid var(--border-color,#e4e4e7);border-radius:10px;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
#uyali-action-modal .modal-footer{gap:8px;flex-wrap:wrap}#uyali-action-modal .modal-footer button{flex:1;min-width:72px}
.uyali-runner-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}.uyali-runner-facts div{padding:10px;border:1px solid var(--border-color,#e4e4e7);border-radius:9px;display:flex;flex-direction:column;gap:4px}.uyali-runner-facts span{font-size:11px;color:var(--text-secondary,#71717a)}.uyali-runner-facts strong{font-size:14px}
[dir=rtl] .uyali-item-details,[dir=rtl] .uyali-checkout-steps{direction:rtl}[dir=rtl] input[type=number]{direction:ltr;text-align:right}
@media(max-width:600px){.uyali-item-details{gap:6px}.uyali-list-tools{margin-bottom:12px}.uyali-action-dialog .modal-body{padding:18px 16px}.uyali-action-dialog .modal-footer{padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.uyali-item-fieldset{padding:12px}.uyali-action-dialog{max-height:calc(100dvh - 24px)}[data-checkout-step] h3{font-size:17px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/*!
 * Checkbox and choice-tile adaptations from Uiverse:
 * https://uiverse.io/uiverse-astronaut/odd-dodo-45
 * https://uiverse.io/Yaya12085/silent-liger-85
 * Copyright - 2026 uiverse-astronaut (Astronaut)
 * Copyright - 2026 Yaya12085 (Yaya Mohamed)
 * MIT License
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

/* Keep real, focusable inputs. The label is the full touch target, including wrapped text. */
.uyali-check {
  position: relative;
  display: block;
  min-height: 52px;
  margin-block: 16px;
  padding: 13px 14px;
  padding-inline-start: 50px;
  border: 1px solid var(--border-subtle, #e4e4e7);
  border-radius: 12px;
  background: var(--bg-card, #fff);
  color: var(--text-primary, #18181b);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.uyali-check input:is([type="checkbox"], [type="radio"]) {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 14px;
  display: grid;
  place-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--uyali-control-border, #81788f);
  border-radius: 6px;
  background: var(--bg-card, #fff);
  cursor: inherit;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.uyali-check input[type="checkbox"]::after {
  content: "";
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--uyali-checkmark, #fff);
  border-bottom: 2px solid var(--uyali-checkmark, #fff);
  transform: translateY(-1px) rotate(45deg) scale(0);
}
.uyali-check input[type="checkbox"]:checked {
  background: var(--uyali-brand, #6d28d9);
  border-color: var(--uyali-brand, #6d28d9);
}
.uyali-check input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }
.uyali-check input[type="checkbox"]:indeterminate {
  background: var(--uyali-brand, #6d28d9);
  border-color: var(--uyali-brand, #6d28d9);
}
.uyali-check input[type="checkbox"]:indeterminate::after {
  width: 10px;
  height: 0;
  border-right: 0;
  transform: none;
}
.uyali-check input[type="radio"] { border-radius: 50%; }
.uyali-check input[type="radio"]::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--uyali-brand, #6d28d9);
  transform: scale(0);
}
.uyali-check input[type="radio"]:checked { border-color: var(--uyali-brand, #6d28d9); }
.uyali-check input[type="radio"]:checked::after { transform: scale(1); }
.uyali-check:has(input:checked) { border-color: var(--uyali-brand, #6d28d9); background: var(--uyali-brand-soft, #f5f3ff); }
.uyali-check:has(input:disabled) { color: var(--text-secondary, #71717a); cursor: not-allowed; background: var(--bg-input, #f4f4f5); }
.uyali-check input:disabled { opacity: .65; cursor: not-allowed; }
.uyali-check a { text-decoration: underline; text-underline-offset: 3px; }

/* Compact, readable fields with a deliberate spacing rhythm. */
.uyali-item-details { gap: 10px; padding-block-end: 12px; }
.uyali-item-details label { font-size: 12px; line-height: 1.4; }
.uyali-item-details .form-input { min-height: 44px; font-size: 14px; border-radius: 10px; }
.uyali-substitution-label { gap: 10px; line-height: 1.5; }
.uyali-substitution-label select, .uyali-list-tools button { min-height: 44px; }
.uyali-list-tools { gap: 10px; }
.uyali-list-tools button { padding-inline: 12px; }
.uyali-local-reference summary { min-height: 44px; display: flex; align-items: center; gap: 8px; }
.uyali-local-reference summary::before { content: "+"; font-size: 17px; font-weight: 600; }
.uyali-local-reference[open] summary::before { content: "−"; }
.uyali-checkout-steps { gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-end: 24px; }
.uyali-checkout-steps li {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 10px 6px;
  border: 1px solid var(--border-subtle, #e4e4e7);
  border-radius: 10px;
  background: var(--bg-hover, #fafafa);
  line-height: 1.4;
}
.uyali-checkout-steps li[aria-current="step"] {
  border-color: var(--uyali-brand, #6d28d9);
  box-shadow: inset 0 -2px 0 var(--uyali-brand, #6d28d9);
  color: var(--uyali-brand-text, #5b21b6);
  background: var(--uyali-brand-soft, #f5f3ff);
}
[data-checkout-step] h3 { font-size: 19px; line-height: 1.35; margin-block-end: 10px; }
[data-checkout-step] > .id-step-desc { margin-block: 0 20px; }
.uyali-item-fieldset { margin-block: 20px; padding: 16px; border-radius: 14px; }
.uyali-item-fieldset > legend { padding-inline: 5px; max-width: 100%; overflow-wrap: anywhere; }
.uyali-pin-summary { padding: 14px; border-radius: 12px; background: var(--bg-hover, #fafafa); font-size: 13px; color: var(--text-secondary, #71717a); }
.uyali-money-summary { padding: 18px; border-radius: 14px; }
.uyali-money-summary .uyali-total-line { border-top-width: 2px; }
#uyali-point-dialog .form-input { min-height: 48px; font-size: 16px; }
#uyali-point-dialog .uyali-secondary-button { margin: 0; }
#uyali-point-dialog::backdrop { background: rgb(24 24 27 / .55); }

@media (hover: hover) {
  .uyali-check:not(:has(input:disabled)):hover { border-color: var(--uyali-brand, #6d28d9); }
  .uyali-list-tools button:not(:disabled):hover { border-color: var(--uyali-brand, #6d28d9); background: var(--uyali-brand-soft, #f5f3ff); }
}
@media (max-width: 600px) {
  .uyali-item-details { gap: 6px; }
  .uyali-item-details .form-input { font-size: 16px; padding-inline: 8px; }
  .uyali-substitution-label select { font-size: 16px; }
  .uyali-checkout-steps { gap: 6px; margin-block-end: 20px; }
  .uyali-checkout-steps li { font-size: 12px; }
  [data-checkout-step] h3 { font-size: 18px; }
  .uyali-item-fieldset, .uyali-money-summary { padding: 14px; }
  #uyali-action-modal .modal-footer button { min-height: 48px; min-width: 0; }
}
@media (forced-colors: active) {
  .uyali-check input:is([type="checkbox"], [type="radio"]) { appearance: auto; -webkit-appearance: auto; forced-color-adjust: auto; }
  .uyali-check input::after { display: none; }
  .uyali-check:has(input:checked), .uyali-checkout-steps li[aria-current="step"] { border: 2px solid Highlight; }
}

/* The home list uses the same visible field affordance as the review dialog. */
.uyali-item-details .form-input {
  border: 1px solid var(--uyali-control-border, #81788f);
  background: var(--bg-input, #f4f4f5);
  color: var(--text-primary, #18181b);
  line-height: 1.4;
  padding: 10px;
}
.uyali-item-details select.form-input { padding-inline-end: 24px; }
.uyali-item-details .form-input:focus { border-color: var(--uyali-brand, #6d28d9); }
.uyali-action-dialog .modal-title { overflow-wrap: anywhere; }
.uyali-action-dialog .modal-close-btn { flex: 0 0 44px; }
.uyali-action-dialog :is(input, select, textarea, button) { scroll-margin-block: 16px; }
.uyali-checkout-steps {
  font-size: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7em), 1fr));
}
.uyali-checkout-steps li { min-width: 0; font-size: inherit; overflow-wrap: anywhere; }
#uyali-action-modal .modal-footer button { flex: 1 1 5.5em; white-space: normal; overflow-wrap: anywhere; }

/* One scrolling body and an always-visible action row for manual pin selection.
   Important overrides replace the original JS inline geometry; native dialog
   focus handling, cancel behavior, and the existing IDs remain intact. */
#uyali-point-dialog {
  inset: 0;
  margin: auto;
  width: min(620px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-color: var(--border-primary, #d4d4d8) !important;
  background: var(--bg-card, #fff) !important;
}
#uyali-point-dialog[open] { display: flex; flex-direction: column; }
#uyali-point-dialog > form {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: inherit;
  gap: 0 !important;
  overflow: hidden;
}
.uyali-point-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 20px;
  padding: 20px;
  font-size: 14px;
  line-height: 1.5;
}
#uyali-point-title { font-size: 22px; line-height: 1.35; overflow-wrap: anywhere; }
#uyali-point-help { color: var(--text-secondary, #52525b); }
#uyali-point-dialog [data-point-label]:empty { display: none; }
#uyali-point-map { height: clamp(180px, 30dvh, 240px) !important; min-height: 180px !important; }
.uyali-point-coordinates {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12ch), 1fr));
  gap: 12px;
}
.uyali-point-coordinates > label { min-width: 0 !important; font-weight: 600; }
.uyali-point-coordinates input { direction: ltr; text-align: start; font-weight: 400; }
#uyali-point-dialog .form-input {
  border-style: solid;
  background: var(--bg-input, #f4f4f5);
  color: var(--text-primary, #18181b);
  padding: 12px;
  min-width: 0;
  line-height: 1.4;
}
.uyali-point-actions {
  flex: none;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle, #e4e4e7);
  background: var(--bg-card, #fff);
}
.uyali-point-actions > button { flex: 1 1 8em; min-width: 0; min-height: 48px; white-space: normal; overflow-wrap: anywhere; }
.uyali-point-gps { white-space: normal; min-height: 48px; line-height: 1.4; }
#uyali-point-dialog :is(input, button) { scroll-margin-block: 16px; }

@media (max-width: 420px) {
  .uyali-item-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .uyali-item-details > label:last-child { grid-column: 1 / -1; }
  .uyali-point-body { padding: 16px; }
  .uyali-point-actions { padding: 12px 16px; }
}

/* Quantity + unit share a row; the MAD limit gets its own full-width row so
   values are never clipped in the 360 px desktop side panel or on phones. */
.uyali-item-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.uyali-item-details > label:nth-child(3) { grid-column: 1 / -1; }

/* Handover code shown to the other person: large, high contrast, easy to read aloud. */
.uyali-handover-code { margin: 16px 0 8px; padding: 18px 12px; border-radius: 14px; background: var(--bg-input); color: var(--text-primary);
  font: 800 40px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .28em; text-align: center; font-variant-numeric: tabular-nums; }