/* INPROFIC form experience v2 — shared by internal and hosted storefront forms. */
.cf-field,
.inprofic-field-shell {
  position: relative;
}

.inprofic-control-wrap {
  position: relative;
  display: block;
}

.inprofic-control-wrap> :is(input, select, textarea) {
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
}

.inprofic-control-wrap[data-icon]> :is(input, select) {
  padding-left: 2.35rem !important;
}

.inprofic-input-icon {
  position: absolute;
  left: .72rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ui-surface-muted-text, #78716c);
  opacity: .72;
  transition: transform .22s ease, color .22s ease, opacity .22s ease;
}

.inprofic-control-wrap:focus-within .inprofic-input-icon {
  color: var(--ui-surface-text, #182433);
  opacity: 1;
  transform: translateY(-50%) scale(1.12);
}

.inprofic-input-icon path,
.inprofic-input-icon circle,
.inprofic-input-icon rect,
.inprofic-input-icon line {
  vector-effect: non-scaling-stroke;
}

.inprofic-control-wrap:focus-within .inprofic-input-icon [data-draw] {
  stroke-dasharray: 32;
  animation: inproficIconDraw .55s ease both;
}

@keyframes inproficIconDraw {
  from {
    stroke-dashoffset: 32
  }

  to {
    stroke-dashoffset: 0
  }
}

@keyframes inproficFieldInvalid {

  0%,
  100% {
    transform: translateX(0)
  }

  30% {
    transform: translateX(-3px)
  }

  60% {
    transform: translateX(3px)
  }
}

@keyframes inproficFieldValid {
  0% {
    transform: scale(.985)
  }

  65% {
    transform: scale(1.008)
  }

  100% {
    transform: scale(1)
  }
}

.inprofic-control-wrap.is-invalid> :is(input, select, textarea),
.field-has-error .inprofic-control-wrap> :is(input, select, textarea) {
  border-color: #e11d48 !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .10) !important;
  animation: inproficFieldInvalid .28s ease;
}

.inprofic-control-wrap.is-valid> :is(input, select, textarea) {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .08) !important;
  animation: inproficFieldValid .28s ease;
}

.inprofic-validation-mark {
  position: absolute;
  right: .72rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%) scale(.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .2s ease;
}

.inprofic-control-wrap.is-valid .inprofic-validation-mark[data-state="valid"],
.inprofic-control-wrap.is-invalid .inprofic-validation-mark[data-state="invalid"] {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.inprofic-validation-mark[data-state="valid"] {
  color: #059669
}

.inprofic-validation-mark[data-state="invalid"] {
  color: #e11d48
}

.inprofic-control-wrap.has-validation-mark> :is(input, select) {
  padding-right: 2.25rem !important;
}

/* Password show/hide toggle (form-experience.js). Sits at the right edge; the valid/invalid
   mark moves left of it so the two never overlap. */
.inprofic-control-wrap.has-password-toggle>input {
  padding-right: 3.9rem !important;
}

.inprofic-control-wrap.has-password-toggle .inprofic-validation-mark {
  right: 2.5rem;
}

.inprofic-password-toggle {
  position: absolute;
  right: .3rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: .45rem;
  background: transparent;
  color: var(--ui-surface-muted-text, #78716c);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.inprofic-password-toggle:hover,
.inprofic-password-toggle[aria-pressed="true"] {
  color: var(--ui-surface-text, #182433);
}

.inprofic-password-toggle:focus-visible {
  outline: 2px solid var(--tenant-button, #D14900);
  outline-offset: 1px;
}

.inprofic-password-toggle-icon {
  width: 1.1rem;
  height: 1.1rem;
  pointer-events: none;
}

.inprofic-password-toggle-icon path,
.inprofic-password-toggle-icon circle {
  vector-effect: non-scaling-stroke;
}

/* Hide the browser's own reveal control so only one eye shows. */
.inprofic-control-wrap>input[type="password"]::-ms-reveal,
.inprofic-control-wrap>input[type="password"]::-ms-clear {
  display: none;
}

.inprofic-client-message {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  color: #be123c;
  font-size: .68rem;
  line-height: 1rem;
  transition: max-height .18s ease, opacity .18s ease, margin .18s ease;
}

.inprofic-client-message[data-visible="true"] {
  max-height: 2.5rem;
  opacity: 1;
  margin-top: .28rem;
}

@media (prefers-reduced-motion: reduce) {

  .inprofic-control-wrap> :is(input, select, textarea),
  .inprofic-input-icon,
  .inprofic-validation-mark,
  .inprofic-client-message {
    transition: none !important;
    animation: none !important
  }
}

/* Shared toggle skin for standalone/hosted pages that do not load workspace.css. */
/* Shared switch: the neutral track stays fixed; only the active thumb uses accent. */
.cf-switch { position:relative; display:inline-flex; height:1.65rem; width:3rem; align-items:center; vertical-align:middle; flex-shrink:0; }
.cf-switch>input[type="checkbox"] { position:absolute!important; inset:0!important; z-index:2; width:100%!important; height:100%!important; margin:0!important; cursor:pointer; opacity:0!important; }
.cf-switch-track { position:absolute; inset:0; border-radius:999px; background:#d6d3d1; box-shadow:inset 0 0 0 1px rgba(87,83,78,.12); }
.cf-switch-thumb { position:absolute; left:.2rem; top:.2rem; width:1.25rem; height:1.25rem; border-radius:999px; background:#fff; color:#57534e; box-shadow:0 2px 6px rgba(0,0,0,.22); transition:transform .18s ease, background-color .18s ease; }
.cf-switch-thumb::after { content:""; position:absolute; inset:.2rem; background:currentColor; mask:var(--cf-switch-icon) center/contain no-repeat; -webkit-mask:var(--cf-switch-icon) center/contain no-repeat; }
.cf-switch-track { --cf-switch-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%206%2012%2012M6%2018%2018%206%22%2F%3E%3C%2Fsvg%3E"); }
.cf-switch>input[type="checkbox"]:checked+.cf-switch-track .cf-switch-thumb { transform:translateX(1.35rem); background:var(--ui-accent,var(--tenant-button,var(--brand,#D14900))); color:var(--ui-accent-contrast,var(--tenant-button-contrast,#fff)); --cf-switch-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m7%2012%205%205L22%207M2%2012l5%205m5-5%205-5%22%2F%3E%3C%2Fsvg%3E"); }
.cf-switch>input[type="checkbox"]:focus-visible+.cf-switch-track { outline:3px solid color-mix(in srgb,var(--ui-accent,var(--tenant-button,#D14900)) 45%,transparent); outline-offset:2px; }
.cf-switch:has(>input:disabled) { opacity:.55; }
.cf-switch>input:disabled { cursor:not-allowed; }
@media(prefers-reduced-motion:reduce) { .cf-switch-thumb { transition:none; } }
@media(forced-colors:active) { .cf-switch-track { background:Canvas; outline:1px solid ButtonText; } .cf-switch-thumb { background:ButtonFace; color:ButtonText; } .cf-switch>input:checked+.cf-switch-track .cf-switch-thumb { background:Highlight; color:HighlightText; } }

/* Horizontal form tables should reveal real values instead of compressing controls.
   The table can scroll; controls should remain comfortably readable. */
.overflow-x-auto table :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  min-width: 10.5rem;
}

.overflow-x-auto table input[type="number"] {
  min-width: 8.75rem;
}

.overflow-x-auto table textarea {
  min-width: 14rem;
}

.overflow-x-auto table .cf-switch input[type="checkbox"] {
  min-width: 0;
}

/* Helper copy is promoted into the info popover by form-experience.js.
   Hide the source node immediately so it never flashes inline or inherits an
   uppercase label treatment while the deferred script initializes. */
form :is(.helptext, .help-text, [data-form-help-text]) {
  display: none !important;
}

/* Shared field-help popover. This lives with the shared form renderer so it
   behaves the same in the workspace, login/signup, hosted storefront and POS. */
.form-help-tip {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  vertical-align: middle;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.form-help-tip__trigger {
  display: inline-grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent !important;
  color: var(--ui-local-muted, var(--ui-muted, #78716c)) !important;
  cursor: help;
  font: inherit;
  line-height: 1;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.form-help-tip__trigger:hover,
.form-help-tip__trigger:focus-visible,
.form-help-tip.is-open .form-help-tip__trigger {
  color: var(--ui-local-text, var(--ui-surface-text, #182433)) !important;
}

.form-help-tip__trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tenant-button, #8f172d) 35%, transparent);
  outline-offset: 2px;
}

.form-help-tip__trigger svg {
  width: .95rem;
  height: .95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.form-help-tip__bubble {
  /* Fixed + JS-placed (placeHelpTip in form-experience.js) so it is clamped to
     the visible viewport on phones. It is read-only, so it must never catch
     taps meant for the switches/inputs it can overlap. */
  position: fixed;
  left: 0;
  top: 0;
  z-index: 120;
  pointer-events: none;
  width: min(18rem, calc(100vw - 2rem));
  border: 1px solid var(--ui-border, #e7dfcc);
  border-radius: .7rem;
  background: var(--ui-surface, #fffdf8);
  color: var(--ui-surface-text, #211d1a) !important;
  box-shadow: var(--ui-shadow-raised, 0 14px 34px rgba(33, 29, 26, .16));
  padding: .65rem .75rem;
  font-size: .72rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
  white-space: normal;
}

.form-help-tip__bubble--portal {
  z-index: 1000;
}

.form-help-tip__bubble--portal:not([hidden]) {
  display: block !important;
  max-height: min(70vh, 24rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}

.form-help-tip__detail {
  display: block;
}

.form-help-tip__detail--continued {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid color-mix(in srgb, var(--ui-border, #e7dfcc) 72%, transparent);
}

.form-help-tip__list {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.form-help-tip__list-item+.form-help-tip__list-item {
  border-top: 1px solid color-mix(in srgb, var(--ui-border, #e7dfcc) 72%, transparent);
  padding-top: .5rem;
}

.form-help-tip__list-title,
.form-help-tip__list-detail {
  display: block;
}

.form-help-tip__list-title {
  color: var(--ui-surface-text, #211d1a);
  font-weight: 750;
}

.form-help-tip__list-detail {
  margin-top: .12rem;
}

.form-help-tip__bubble[hidden] {
  display: none !important;
}

.form-help-tip.is-open .form-help-tip__bubble {
  display: block !important;
}

@media (hover: none),
(pointer: coarse) {
  .form-help-tip__trigger {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
  }
}

@media (hover: hover) and (pointer: fine) {

  /* Portal tips are opened and closed by JS only: their bubble is moved to
     <body> so it can sit above sticky table cells and clip-free containers.
     Revealing the in-place copy via :hover/:focus-within would show it inside
     the table's stacking context (behind the rows) after a click leaves the
     trigger focused. */
  .form-help-tip:not(.form-help-tip--portal):hover .form-help-tip__bubble[hidden],
  .form-help-tip:not(.form-help-tip--portal):focus-within .form-help-tip__bubble[hidden] {
    display: block !important;
  }
}

/* In-page replacement for native <datalist> suggestions (see datalist-combobox.js). */
.dl-combobox {
  position: fixed;
  z-index: 200;
  margin: 0;
  padding: .25rem;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ui-border, #e7dfcc);
  border-radius: .7rem;
  background: var(--ui-surface, #fffdf8);
  color: var(--ui-surface-text, #211d1a);
  box-shadow: var(--ui-shadow-raised, 0 14px 34px rgba(33, 29, 26, .16));
}

.dl-combobox[hidden] {
  display: none !important;
}

.dl-combobox li {
  padding: .6rem .7rem;
  border-radius: .5rem;
  font-size: .85rem;
  line-height: 1.3;
  cursor: pointer;
}

.dl-combobox li:hover,
.dl-combobox li.is-active {
  background: color-mix(in srgb, var(--tenant-button, #8f172d) 10%, transparent);
}

/* Multi-select dropdown (see multiselect-dropdown.js). Theme variables only. */
.ms-dd {
  position: relative;
}

.ms-dd__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: var(--ui-control-height, 2.6rem);
  padding: .55rem .8rem;
  text-align: left;
  border: 1px solid var(--ui-border, #e7dfcc);
  border-radius: var(--ui-radius, .7rem);
  background: var(--ui-surface, #fffdf8);
  color: var(--ui-surface-muted-text, #78716c);
  font-size: .875rem;
}

.ms-dd.has-value .ms-dd__trigger {
  color: var(--ui-surface-text, #211d1a);
}

.ms-dd__trigger:focus-visible,
.ms-dd__search:focus-visible {
  outline: 2px solid var(--ui-accent, #8f172d);
  outline-offset: 1px;
}

.ms-dd__summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-dd__caret {
  flex: none;
  transition: transform .15s ease;
}

.ms-dd__trigger[aria-expanded="true"] .ms-dd__caret {
  transform: rotate(180deg);
}

.ms-dd__panel {
  position: absolute;
  z-index: 90;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-width: 100%;
  border: 1px solid var(--ui-border, #e7dfcc);
  border-radius: var(--ui-radius, .7rem);
  background: var(--ui-surface, #fffdf8);
  color: var(--ui-surface-text, #211d1a);
  box-shadow: var(--ui-shadow-raised, 0 14px 34px rgba(33, 29, 26, .16));
  overflow: hidden;
}

.ms-dd__panel[hidden] {
  display: none;
}

.ms-dd.is-up .ms-dd__panel {
  top: auto;
  bottom: calc(100% + 4px);
}

.ms-dd__search {
  display: block;
  width: 100%;
  padding: .55rem .8rem;
  border: 0;
  border-bottom: 1px solid var(--ui-border, #e7dfcc);
  background: transparent;
  color: inherit;
  font-size: .85rem;
}

.ms-dd__list {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .25rem;
}

.ms-dd__opt {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .55rem .6rem;
  border-radius: .5rem;
  font-size: .8rem;
  line-height: 1.35;
  cursor: pointer;
}

.ms-dd__opt:hover {
  background: color-mix(in srgb, var(--ui-accent, #8f172d) 8%, transparent);
}

.ms-dd__opt input {
  margin-top: .15rem;
  flex: none;
  accent-color: var(--ui-accent, #8f172d);
}

.ms-dd__opt.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}

.ms-dd__empty {
  padding: .8rem;
  font-size: .8rem;
  color: var(--ui-surface-muted-text, #78716c);
}

.ms-dd__foot {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .45rem .6rem;
  border-top: 1px solid var(--ui-border, #e7dfcc);
}

.ms-dd__clear,
.ms-dd__done {
  padding: .35rem .7rem;
  border-radius: .5rem;
  font-size: .8rem;
  font-weight: 600;
}

.ms-dd__clear {
  color: var(--ui-surface-muted-text, #78716c);
}

.ms-dd__done {
  background: var(--ui-accent, #8f172d);
  color: var(--ui-accent-contrast, #fff);
}