/* Localsewa v32.9.8 — shadcn-compatible forms & selection system
   Semantic contracts + safe adapters for existing compiled Customer/Provider UI.
   Business logic and route behavior are intentionally unchanged. */
:root {
  --ls-ui-selection-bg: #edf8f1;
  --ls-ui-selection-fg: #0f6f3d;
  --ls-ui-selection-hover: #f5faf7;
  --ls-ui-control-border: var(--input, #cddbd2);
  --ls-ui-control-ring: var(--ring, #69be89);
  --ls-ui-menu-shadow: 0 18px 52px rgb(8 28 17 / .16), 0 4px 14px rgb(8 28 17 / .06);
}

/* Select */
.ls-ui-select-trigger {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  height: var(--ls-ui-control-h, 2.75rem);
  align-items: center;
  justify-content: space-between;
  gap: .625rem;
  padding: 0 .875rem;
  border: 1px solid var(--ls-ui-control-border);
  border-radius: var(--ls-ui-radius-md, .875rem);
  background: var(--card, #fff);
  color: var(--foreground, #10231a);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  text-align: left;
  outline: none;
  transition: border-color 140ms var(--ls-ui-ease), box-shadow 140ms var(--ls-ui-ease), background-color 140ms var(--ls-ui-ease);
}
.ls-ui-select-trigger:focus-visible,
.ls-ui-select-trigger[aria-expanded="true"] {
  border-color: var(--ls-ui-control-ring);
  box-shadow: var(--ls-ui-focus-ring);
}
.ls-ui-select-trigger:disabled { cursor: not-allowed; opacity: .55; }
.ls-ui-select-content,
.ls-ui-dropdown-menu,
.ls-ui-command {
  min-width: 10rem;
  max-width: min(24rem, calc(100vw - 1.5rem));
  max-height: min(20rem, 48dvh);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--ls-ui-menu-shadow);
  padding: .375rem;
  scrollbar-gutter: stable;
}
.ls-ui-select-item,
.ls-ui-dropdown-item,
.ls-ui-command-item {
  display: flex;
  min-height: 2.5rem;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: .5rem;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  color: var(--foreground);
  padding: .5rem .75rem;
  font: inherit;
  font-size: .875rem;
  line-height: 1.35;
  font-weight: 550;
  text-align: left;
  outline: none;
  cursor: pointer;
}
.ls-ui-select-item:hover,
.ls-ui-select-item:focus-visible,
.ls-ui-dropdown-item:hover,
.ls-ui-dropdown-item:focus-visible,
.ls-ui-command-item:hover,
.ls-ui-command-item:focus-visible { background: var(--ls-ui-selection-hover); }
.ls-ui-select-item[aria-selected="true"],
.ls-ui-select-item[data-state="checked"],
.ls-ui-dropdown-item[data-state="checked"],
.ls-ui-command-item[aria-selected="true"] {
  background: var(--ls-ui-selection-bg);
  color: var(--ls-ui-selection-fg);
  font-weight: 650;
}
.ls-ui-select-item:disabled,
.ls-ui-dropdown-item:disabled,
.ls-ui-command-item:disabled { pointer-events: none; opacity: .45; }

/* DropdownMenu */
.ls-ui-dropdown-label { padding: .5rem .75rem .375rem; color: var(--muted-foreground); font-size: .6875rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.ls-ui-dropdown-shortcut { margin-left: auto; color: var(--muted-foreground); font-size: .6875rem; }

/* Command / combobox */
.ls-ui-command-input-wrap { display: flex; min-height: 2.75rem; align-items: center; gap: .5rem; border-bottom: 1px solid var(--border); padding: 0 .75rem; }
.ls-ui-command-input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: .875rem; outline: none; }
.ls-ui-command-input::placeholder { color: #83958a; }
.ls-ui-command-group { padding: .375rem 0; }
.ls-ui-command-heading { padding: .375rem .75rem; color: var(--muted-foreground); font-size: .6875rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.ls-ui-command-empty { padding: 1.5rem .875rem; color: var(--muted-foreground); font-size: .8125rem; text-align: center; }

/* Tabs */
.ls-ui-tabs-list {
  display: inline-grid;
  min-width: 0;
  align-items: center;
  gap: .25rem;
  border-radius: 1rem;
  background: var(--muted);
  padding: .25rem;
}
.ls-ui-tabs-trigger {
  display: inline-flex;
  min-width: 0;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  color: var(--muted-foreground);
  padding: .5rem .75rem;
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: background-color 140ms var(--ls-ui-ease), color 140ms var(--ls-ui-ease), box-shadow 140ms var(--ls-ui-ease);
}
.ls-ui-tabs-trigger:focus-visible { box-shadow: var(--ls-ui-focus-ring); }
.ls-ui-tabs-trigger[aria-selected="true"],
.ls-ui-tabs-trigger[data-state="active"] { background: var(--card); color: var(--primary); box-shadow: var(--ls-ui-shadow-sm); }
.ls-ui-tabs-trigger:disabled { pointer-events: none; opacity: .5; }

/* Input OTP */
.ls-ui-input-otp { display: flex; align-items: center; gap: .5rem; }
.ls-ui-input-otp-group { display: flex; align-items: center; gap: .375rem; }
.ls-ui-input-otp-slot {
  display: inline-flex;
  width: 2.625rem;
  height: 2.875rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ls-ui-control-border);
  border-radius: .75rem;
  background: var(--card);
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.ls-ui-input-otp-slot[data-active="true"] { border-color: var(--ls-ui-control-ring); box-shadow: var(--ls-ui-focus-ring); }
.ls-ui-input-otp-separator { color: var(--muted-foreground); }

/* Checkbox */
.ls-ui-checkbox {
  appearance: none;
  display: inline-grid;
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  place-content: center;
  border: 1px solid var(--ls-ui-control-border);
  border-radius: .3125rem;
  background: var(--card);
  color: var(--primary-foreground);
  outline: none;
  cursor: pointer;
}
.ls-ui-checkbox::after { content: ""; width: .55rem; height: .3rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) scale(0); transform-origin: center; }
.ls-ui-checkbox:checked,
.ls-ui-checkbox[aria-checked="true"],
.ls-ui-checkbox[data-state="checked"] { border-color: var(--primary); background: var(--primary); }
.ls-ui-checkbox:checked::after,
.ls-ui-checkbox[aria-checked="true"]::after,
.ls-ui-checkbox[data-state="checked"]::after { transform: rotate(-45deg) scale(1); }
.ls-ui-checkbox:focus-visible { box-shadow: var(--ls-ui-focus-ring); }
.ls-ui-checkbox:disabled { cursor: not-allowed; opacity: .5; }

/* RadioGroup */
.ls-ui-radio-group { display: grid; gap: .625rem; }
.ls-ui-radio {
  appearance: none;
  display: inline-grid;
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  place-content: center;
  border: 1px solid var(--ls-ui-control-border);
  border-radius: 9999px;
  background: var(--card);
  outline: none;
  cursor: pointer;
}
.ls-ui-radio::after { content: ""; width: .55rem; height: .55rem; border-radius: 9999px; background: var(--primary); transform: scale(0); }
.ls-ui-radio:checked,
.ls-ui-radio[aria-checked="true"],
.ls-ui-radio[data-state="checked"] { border-color: var(--primary); }
.ls-ui-radio:checked::after,
.ls-ui-radio[aria-checked="true"]::after,
.ls-ui-radio[data-state="checked"]::after { transform: scale(1); }
.ls-ui-radio:focus-visible { box-shadow: var(--ls-ui-focus-ring); }
.ls-ui-radio:disabled { cursor: not-allowed; opacity: .5; }

/* Safe migration adapters for controls that already exist in the compiled app. */
.ls-services-sort-control {
  border-color: var(--ls-ui-control-border) !important;
  border-radius: var(--ls-ui-radius-md) !important;
  background: var(--card) !important;
  color: var(--foreground) !important;
  box-shadow: var(--ls-ui-shadow-sm) !important;
}
.ls-services-sort-control:focus-visible,
.ls-services-sort-control[aria-expanded="true"] {
  border-color: var(--ls-ui-control-ring) !important;
  box-shadow: var(--ls-ui-focus-ring) !important;
}
.ui-dropdown-layer[role="listbox"] {
  border-color: var(--border) !important;
  border-radius: 1rem !important;
  background: var(--popover) !important;
  color: var(--popover-foreground) !important;
  box-shadow: var(--ls-ui-menu-shadow) !important;
  padding: .375rem !important;
}
.ui-dropdown-layer[role="listbox"] [role="option"] {
  min-height: 2.5rem !important;
  border-radius: .75rem !important;
  padding: .5rem .75rem !important;
  font-weight: 600 !important;
}
.ui-dropdown-layer[role="listbox"] [role="option"][aria-selected="true"] {
  background: var(--ls-ui-selection-bg) !important;
  color: var(--ls-ui-selection-fg) !important;
}
.ls-search-results {
  border-color: var(--border) !important;
  border-radius: 1rem !important;
  background: var(--popover) !important;
  box-shadow: var(--ls-ui-menu-shadow) !important;
  padding: .375rem !important;
}
.ls-search-results [role="option"] { border-radius: .75rem !important; }
@media (hover: hover) and (pointer: fine) {
  .ls-search-results [role="option"]:hover { background: var(--ls-ui-selection-hover) !important; }
}
.ls-booking-filter-tab {
  border-radius: .75rem !important;
  transition: background-color 140ms var(--ls-ui-ease), color 140ms var(--ls-ui-ease), box-shadow 140ms var(--ls-ui-ease) !important;
}
.ls-booking-filter-tab:focus-visible { outline: none !important; box-shadow: var(--ls-ui-focus-ring) !important; }

/* Existing single-field OTP controls keep their logic but share the new focus language. */
input[autocomplete="one-time-code"] {
  font-variant-numeric: tabular-nums;
  caret-color: var(--primary);
}
input[autocomplete="one-time-code"]:focus-visible {
  outline: none;
  border-color: var(--ls-ui-control-ring) !important;
  box-shadow: var(--ls-ui-focus-ring) !important;
}

@media (max-width: 639.98px) {
  .ls-ui-select-content,
  .ls-ui-dropdown-menu,
  .ls-ui-command { max-width: calc(100vw - 1rem); }
  .ls-ui-input-otp { gap: .375rem; }
  .ls-ui-input-otp-group { gap: .25rem; }
  .ls-ui-input-otp-slot { width: 2.375rem; height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-ui-select-trigger,
  .ls-ui-tabs-trigger { transition-duration: 0.01ms !important; }
}