/*
 * UMMIGO sign-in, scoped under .ugx so it can sit inside the POS, KDS, kiosk and waiter screens
 * without touching their own styles. Same layout, type and colours as the partner web sign-in
 * (components/ummigo-auth + auth-ui/styles.css + ummigo-brand.css).
 */
.ugx {
  --ugx-bg: #fafafa; --ugx-text: #111111; --ugx-muted: #525252;
  --ugx-divider: color-mix(in srgb, #111111 12%, transparent);
  --ugx-input: #f5f5f5; --ugx-link: #3f7d12;
  --ugx-t1: #f7fdea; --ugx-t2: #f1f5ff;
  --ugx-heading: 'Manrope', 'Geist', sans-serif; --ugx-body: 'Geist', 'Barlow', sans-serif;
  position: fixed; inset: 0; z-index: 9999; overflow-y: auto;
  font-family: var(--ugx-body); font-size: 15px; line-height: 1.55; font-weight: 400;
  color: var(--ugx-text); background: var(--ugx-bg); letter-spacing: normal; word-spacing: normal; text-transform: none;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; text-align: left;
}
.ugx.ugx-page { position: static; min-height: 100vh; overflow: visible; }
.ugx *, .ugx *::before, .ugx *::after { box-sizing: border-box; }
.ugx [hidden], .ugx [x-cloak] { display: none !important; }
.ugx input { -webkit-user-select: text; user-select: text; }

.ugx-grid { min-height: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.ugx.ugx-page .ugx-grid { min-height: 100vh; }
.ugx > .ugx-grid { width: 100%; }
.ugx-main {
  position: relative; padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; gap: 32px;
  background: radial-gradient(60% 50% at 0% 0%, var(--ugx-t1) 0%, transparent 70%), radial-gradient(50% 50% at 100% 100%, var(--ugx-t2) 0%, transparent 70%), var(--ugx-bg);
}
.ugx-logo { display: flex; align-self: flex-start; color: var(--ugx-text); text-decoration: none; }
.ugx-logo svg { height: 38px; width: auto; display: block; flex: none; }
.ugx-close {
  all: unset; position: absolute; top: 20px; right: 20px; cursor: pointer; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--ugx-divider); background: #ffffff; color: var(--ugx-text);
}
.ugx-close:hover { border-color: #111111; }
.ugx-body { margin: auto 0; width: 100%; max-width: 420px; align-self: center; display: flex; flex-direction: column; gap: 22px; }
.ugx-head { display: flex; flex-direction: column; gap: 8px; }
.ugx-title { font-family: var(--ugx-heading); font-weight: 700; font-size: 40px; line-height: 1.05; letter-spacing: -0.025em; margin: 0; color: var(--ugx-text); }
.ugx-sub { margin: 0; font-size: 16px; color: var(--ugx-muted); }
.ugx-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.ugx-field label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--ugx-text) 70%, transparent); font-weight: 400; text-transform: none; letter-spacing: 0; }
.ugx-input {
  display: block; width: 100%; min-height: 36px; padding: 6px 10px; margin: 0; font: inherit; font-size: 14px;
  color: var(--ugx-text); caret-color: #a3e635; background: var(--ugx-input);
  border: 1px solid var(--ugx-divider); border-radius: 8px; outline: none; box-shadow: none;
}
.ugx-input:hover { border-color: color-mix(in srgb, var(--ugx-text) 45%, transparent); }
.ugx-input:focus, .ugx-input:focus-visible { border-color: #a3e635; outline: none; box-shadow: none; }
.ugx-input::placeholder { color: #a3a3a3; }
.ugx-suffix { display: flex; align-items: stretch; }
.ugx-suffix .ugx-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ugx-suffix span { display: flex; align-items: center; padding: 0 10px; font-size: 13px; color: var(--ugx-muted); background: #ffffff; border: 1px solid var(--ugx-divider); border-left: 0; border-radius: 0 8px 8px 0; }
.ugx-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.ugx-check { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 14px; color: var(--ugx-text); cursor: pointer; }
.ugx-check input { width: auto; height: auto; margin: 0; accent-color: #111111; }
.ugx a, .ugx .ugx-link { color: var(--ugx-link); text-underline-offset: 3px; text-decoration: underline; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.ugx a:hover, .ugx .ugx-link:hover { color: #111111; }
.ugx-primary {
  all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: 14px; border-radius: 999px;
  background: #111111; color: #ffffff; font-weight: 600; font-size: 16px; font-family: var(--ugx-body);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ugx-primary:hover { background: #262626; }
.ugx-secondary {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px; border-radius: 999px; border: 1px solid var(--ugx-divider); background: var(--ugx-bg);
  font-weight: 500; font-size: 15px; color: var(--ugx-text); font-family: var(--ugx-body);
}
.ugx-secondary:hover { border-color: #111111; }
.ugx-primary[disabled], .ugx-secondary[disabled] { opacity: .6; cursor: wait; }
.ugx-or { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ugx-muted); }
.ugx-or::before, .ugx-or::after { content: ''; flex: 1; height: 1px; background: var(--ugx-divider); }
.ugx-err { margin: 0; font-size: 12.5px; font-weight: 600; color: #b3261e; }
.ugx-info { margin: 0; font-size: 13px; font-weight: 600; color: var(--ugx-muted); }
.ugx-foot { font-size: 13px; color: var(--ugx-muted); }
.ugx-note { margin: 0; font-size: 14px; color: var(--ugx-muted); }

.ugx-brand {
  position: relative; overflow: hidden; background: #111111; color: #fafafa; padding: clamp(32px, 5vw, 72px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; min-height: 420px;
}
.ugx-brand i { position: absolute; display: block; }
.ugx-brand i:nth-child(1) { right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 40px; background: #a3e635; transform: rotate(12deg); }
.ugx-brand i:nth-child(2) { right: 140px; top: 120px; width: 160px; height: 160px; border-radius: 32px; background: #2f6bff; transform: rotate(-8deg); }
.ugx-brand i:nth-child(3) { right: 40px; top: 240px; width: 120px; height: 120px; border-radius: 28px; background: #f6b73c; transform: rotate(18deg); }
.ugx-brand h2 { position: relative; font-family: var(--ugx-heading); font-weight: 700; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -0.025em; margin: 0; color: #fafafa; max-width: 520px; }
.ugx-brand p { position: relative; margin: 0; font-size: 16px; color: #d4d4d4; max-width: 460px; }
.ugx .ugx-code::placeholder { letter-spacing: normal; font-size: 16px; }

/* Phones: the same sign-in as the Partner App — dark hero with the brand shapes on top, the form
   in a rounded sheet below. Used by the console, POS, KDS and kiosk sign-in. Desktop is unchanged. */
.ugx-m-mark { display: none; }
@media (max-width: 640px) {
  .ugx.ugx-page, .ugx .ugx-grid { background: #111111; }
  .ugx .ugx-grid { display: flex; flex-direction: column; }
  .ugx .ugx-brand { order: -1; display: flex !important; flex-direction: column; justify-content: space-between; gap: 0; min-height: 306px; padding: 18px 24px 20px; }
  .ugx .ugx-brand i:nth-child(1) { right: -70px; top: -40px; width: 210px; height: 250px; border-radius: 0; }
  .ugx .ugx-brand i:nth-child(2) { right: 48px; top: 50px; width: 120px; height: 120px; border-radius: 24px; }
  .ugx .ugx-brand i:nth-child(3) { right: 6px; top: 138px; width: 88px; height: 88px; border-radius: 20px; }
  .ugx .ugx-brand h2 { font-size: 30px; line-height: 1.08; letter-spacing: -.035em; max-width: 300px; }
  .ugx .ugx-brand p { display: none; }
  .ugx .ugx-m-mark { display: flex; position: relative; align-items: center; gap: 8px; color: #fff; font-family: var(--ugx-heading); font-weight: 800; font-size: 19px; }
  .ugx .ugx-m-mark .ring { width: 26px; height: 26px; border-radius: 50%; background: #111111; border: 5px solid #a3e635; box-sizing: border-box; }
  .ugx .ugx-m-mark .badge { background: #a3e635; color: #111111; font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: 4px; }
  .ugx .ugx-main { flex: 1; background: #fafaf8; border-radius: 28px 28px 0 0; padding: 28px 24px 24px; gap: 20px; }
  .ugx .ugx-main > .ugx-logo { display: none; }
  .ugx .ugx-title { font-size: 28px; letter-spacing: -.03em; }
  .ugx .ugx-field label { font-size: 13px; font-weight: 700; }
  .ugx .ugx-input { min-height: 54px; padding: 0 16px; border-radius: 14px; background: #eff2f9; border: 1.5px solid #e1e4ec; font-size: 15px; }
  .ugx .ugx-input:focus, .ugx .ugx-input:focus-visible { background: #ffffff; border-color: #111111; }
  .ugx .ugx-primary { min-height: 56px; padding: 0 14px; font-weight: 700; }
}