/* Owner-selected Figma glass login: 206:14 panel, 206:2/3 inputs, 206:8 action.
   Login and its PIN overlays; artwork is also reused by account pages. Never override .page visibility, shared
   dialogs, authentication behavior, customer/admin surfaces or global tokens. */
/* Safari can reveal the document canvas beyond the login wrapper while pulling
   at a scroll boundary or resizing its browser chrome. Paint that canvas only
   while login is active; do not lock scrolling or alter the logged-in theme. */
html:has(#page-pin-login.active),
html:has(#page-pin-login.active) body {
  background: #202224;
  overscroll-behavior-y: none;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) {
  --login-kit-action: #202224;
  --login-kit-ink: #fff;
  --login-kit-field-ink: #27292b;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-wrap {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding: 40px 20px;
  isolation: isolate;
  background: radial-gradient(ellipse 58.43% 103.88% at 56.74% 50%, #56585b 0%, #202224 100%);
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-wrap::before,
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-wrap::after { content: none; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup, .auth-kit-scene) .login-kit-art {
  position: absolute;
  width: 1366px;
  height: 768px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: luminosity;
  pointer-events: none;
  user-select: none;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup, .auth-kit-scene) .login-kit-art img { position: absolute; max-width: none; }
/* Original SVG viewBoxes include effects, but not ancestor clipping. Preserve
   Figma's luminosity blend against the neutral page and the rotated group's origin. */
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup, .auth-kit-scene) .login-art-10074 { left: 295.967px; top: 564.272px; width: 162.748px; height: 107.839px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup, .auth-kit-scene) .login-art-11077 { left: 312.758px; top: 456.831px; width: 262.812px; height: 262.684px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup, .auth-kit-scene) .login-art-12080 { left: 423.993px; top: 88.763px; width: 145.047px; height: 145.087px; transform: rotate(-114.316352deg); transform-origin: 0 0; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup, .auth-kit-scene) .login-art-13083 { left: 681.577px; top: 78.933px; width: 475.468px; height: 442.880px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup, .auth-kit-scene) .login-art-14125 { left: 274.068px; top: 328.851px; width: 110.839px; height: 60.129px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup, .auth-kit-scene) .login-art-15128 { left: 965.199px; top: 576.911px; width: 125.370px; height: 40.333px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup, .auth-kit-scene) .login-art-16131 { left: 895.015px; top: 521.241px; width: 146.776px; height: 61.614px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup, .auth-kit-scene) .login-art-17134 { left: -182.845px; top: 482.133px; width: 475.468px; height: 442.880px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup, .auth-kit-scene) .login-art-18137 { left: 1160.389px; top: 636.444px; width: 514.404px; height: 165.484px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup, .auth-kit-scene) .login-art-19140 { left: 287.692px; top: 209.135px; width: 195.303px; height: 115.631px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-box {
  box-sizing: border-box;
  width: 410px;
  max-width: 100%;
  margin: 0;
  padding: 40px 78px;
  border: 2.134px solid rgba(138, 140, 143, .49);
  border-radius: 28.458px;
  background: rgba(138, 140, 143, .28);
  backdrop-filter: blur(8.893px);
  -webkit-backdrop-filter: blur(8.893px);
  color: var(--login-kit-ink);
  box-shadow: none;
  text-align: left;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-logo { margin: 0 0 32px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-logo-img {
  width: 220px;
  height: 48.686px;
  max-width: 100%;
  object-fit: contain;
  content: url('/tmplogo/haccp-selo-logo-dark.png');
  filter: none;
  animation: none;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) #userLoginSection { animation: none; opacity: 1; transform: none; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .pin-title { color: var(--login-kit-ink); font-size: 24px; line-height: 1.4; font-weight: 700; margin: 0 0 8px; letter-spacing: 0; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-description { color: var(--login-kit-ink); font-size: 12px; line-height: 1.6; margin-bottom: 24px; word-break: keep-all; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-fields { display: grid; gap: 8px; margin-bottom: 16px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-fields label { color: var(--login-kit-ink); font-size: 13px; line-height: 1.5; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-fields label:not(:first-child) { margin-top: 8px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-fields input {
  /* Existing dark-theme input rules read these variables with priority.
     Override the values on these two inputs only, not the global rule. */
  --in-bg: #fff;
  --in-line: #bcbec0;
  --gray4: var(--login-kit-field-ink);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 8px 16px;
  border: .711px solid #bcbec0;
  border-radius: 5px;
  background: #fff;
  color: var(--login-kit-field-ink);
  caret-color: var(--login-kit-action);
  font: inherit;
  font-size: 14px;
  box-shadow: none;
  color-scheme: light;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-fields input::placeholder { color: #696b6e; opacity: 1; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-fields input:focus-visible,
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) button:focus-visible,
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) input[type="checkbox"]:focus-visible {
  /* Restore keyboard focus against legacy input:focus { outline:none !important }. */
  outline: 2px solid #fff !important;
  outline-offset: 3px;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-options { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 24px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-options label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--login-kit-ink); cursor: pointer; min-height: 24px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-options input { width: 14px; height: 14px; margin: 0; accent-color: var(--login-kit-action); color-scheme: light; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .btn-login {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  margin: 0;
  border: 0;
  border-radius: 7.115px;
  background: var(--login-kit-action);
  color: var(--login-kit-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: none;
  opacity: 1;
  transform: none;
  cursor: pointer;
  transition: background-color 140ms ease;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .btn-login:hover { background: #17191b; transform: none; box-shadow: none; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .btn-login:active { background: #101112; transform: none; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .btn-login:disabled { opacity: .6; cursor: wait; }
/* Display is owned by existing install eligibility code, never this stylesheet. */
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) #pwaLoginInstallButton {
  margin-top: 12px;
  border: 1px solid rgba(222, 223, 225, .6);
  background: rgba(32, 34, 36, .3);
  color: var(--login-kit-ink);
  font-size: 14px;
  font-weight: 500;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) #pwaLoginInstallButton:hover { background: rgba(32, 34, 36, .5); }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) #pwaLoginInstallButton:active { background: rgba(32, 34, 36, .65); }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 20px; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-links button {
  width: auto;
  min-height: 32px;
  padding: 4px 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: var(--login-kit-ink);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: none;
  cursor: pointer;
  text-underline-offset: 4px;
}
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-links button:hover { text-decoration: underline; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-copy { margin-top: 20px; padding-top: 0; border: 0; font-size: 10px; line-height: 1.7; text-align: center; color: var(--login-kit-ink); }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-copy strong { color: var(--login-kit-ink); font-size: 11px; font-weight: 400; }
:is(#page-pin-login, #adminPinOverlay, #adminPinSetup) ::selection { background: #202224; color: #fff; }
@media (max-width: 480px) {
  :is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-wrap { padding: 24px 16px; }
  :is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-box { width: 360px; padding: 32px 28px; }
}
@media (pointer: coarse) {
  :is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-fields input { height: 44px; font-size: 16px; }
  :is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .btn-login, :is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-links button, :is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .login-kit-options label { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#page-pin-login, #adminPinOverlay, #adminPinSetup) .btn-login { transition: none; }
}

/* Existing code owns display:none/flex and every PIN input event. */
:is(#adminPinOverlay, #adminPinSetup).login-kit-pin {
  position: fixed;
  inset: 0;
  flex-direction: column;
  z-index: 99999;
  overflow-y: auto;
  overscroll-behavior: contain;
}
:is(#adminPinOverlay, #adminPinSetup) .login-wrap { width: 100%; flex-shrink: 0; }
:is(#adminPinOverlay, #adminPinSetup) .login-box { flex-shrink: 0; }
:is(#adminPinOverlay, #adminPinSetup) .login-kit-pin-digits {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
:is(#adminPinOverlay, #adminPinSetup) .login-kit-pin-digits input {
  height: 60px;
  padding: 8px 0;
  border-radius: 8px;
  text-align: center;
  font-size: 22px;
}
/* Native password fields may briefly reveal their last character on phones.
   Keep their value/type/keyboard untouched, but paint only a separate empty dot.
   :placeholder-shown tracks typing, backspace, autofill and script-owned resets. */
:is(#adminPinOverlay, #adminPinSetup) .login-pin-digit { display: block; position: relative; min-width: 0; }
:is(#adminPinOverlay, #adminPinSetup) .login-pin-digit input {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: transparent;
  text-shadow: none;
}
:is(#adminPinOverlay, #adminPinSetup) .login-pin-digit input:-webkit-autofill { -webkit-text-fill-color: transparent !important; }
:is(#adminPinOverlay, #adminPinSetup) .login-pin-digit::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: var(--login-kit-field-ink);
  background: currentColor;
  pointer-events: none;
  opacity: 0;
}
:is(#adminPinOverlay, #adminPinSetup) .login-pin-digit:has(input:not(:placeholder-shown))::after { opacity: 1; }
@media (forced-colors: active) {
  :is(#adminPinOverlay, #adminPinSetup) .login-pin-digit input { forced-color-adjust: none; background: Canvas !important; border-color: CanvasText; }
  :is(#adminPinOverlay, #adminPinSetup) .login-pin-digit::after { forced-color-adjust: none; color: CanvasText; background: CanvasText; }
}
:is(#adminPinOverlay, #adminPinSetup) .login-kit-pin-label { color: #fff; font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
:is(#adminPinOverlay, #adminPinSetup) .login-kit-pin-error { color: #fff; font-size: 13px; line-height: 20px; min-height: 20px; margin-bottom: 16px; overflow-wrap: anywhere; }
/* Keep error text legible on glass; existing scripts still own clearing/retry. */
:is(#adminPinOverlay, #adminPinSetup):has(.login-kit-pin-error:not(:empty)) .login-kit-pin-digits input { border-color: #202224; }

/* Purchased kit Notification / No icon: 1135:2644, inner 1135:2645.
   Same single-message variant as the approved admin UI, without optional copy,
   actions, close or shadow. Existing message, position and timer are unchanged. */
html body:has(#page-pin-login.active) #toast.toast {
  width: 400px !important;
  max-width: calc(100vw - 32px) !important;
  min-width: 0 !important;
  box-sizing: border-box;
  padding: 16px !important;
  border: 1px solid rgba(0, 0, 0, .1) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #171717 !important;
  box-shadow: none !important;
  font: 600 14px/20px var(--font-body) !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  z-index: 100001;
}
html body:has(#page-pin-login.active) #toast.toast.toast-error { color: #e00000 !important; }
html body:has(#page-pin-login.active) #toast.toast:not(.show) { visibility: hidden; pointer-events: none; }
html body:has(#page-pin-login.active) #toast.toast.show { visibility: visible; }