/*
 * HospiEdge guest experience contract v1.
 * Runtime copies are intentionally identical in POS and Table so each mounted
 * app remains self-contained while sharing one verified interaction language.
 * All selectors are scoped to .he-guest; staff and register surfaces are out.
 */

.he-guest {
  --he-guest-canvas: #f5f7fb;
  --he-guest-surface: #ffffff;
  --he-guest-surface-raised: #ffffff;
  --he-guest-ink: #172033;
  --he-guest-muted: #5f6b7c;
  --he-guest-border: #d9e0ea;
  --he-guest-border-strong: #b8c3d2;
  --he-guest-brand: #1f6feb;
  --he-guest-brand-strong: #1557b8;
  --he-guest-brand-soft: #eaf2ff;
  --he-guest-accent: #c65b2e;
  --he-guest-success: #177a4b;
  --he-guest-success-soft: #e9f7ef;
  --he-guest-warning: #94520b;
  --he-guest-warning-soft: #fff5df;
  --he-guest-danger: #b42318;
  --he-guest-danger-soft: #fff0ee;
  --he-guest-focus: #7cb4ff;
  --he-guest-radius-sm: 10px;
  --he-guest-radius: 16px;
  --he-guest-radius-lg: 24px;
  --he-guest-shadow-sm: 0 1px 2px rgba(23, 32, 51, .06);
  --he-guest-shadow: 0 12px 32px rgba(23, 32, 51, .10);
  --he-guest-content: 1280px;
  --he-guest-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--he-guest-ink);
  font-family: var(--he-guest-font);
  accent-color: var(--he-guest-brand);
}

.he-guest.he-guest--booking,
.he-guest[data-he-theme="dark"] {
  --he-guest-canvas: #08101d;
  --he-guest-surface: #101b2d;
  --he-guest-surface-raised: #142237;
  --he-guest-ink: #f4f7fb;
  --he-guest-muted: #bdc8d8;
  --he-guest-border: #2d3d54;
  --he-guest-border-strong: #50647e;
  --he-guest-brand: #55b7ff;
  --he-guest-brand-strong: #8ad0ff;
  --he-guest-brand-soft: #15344f;
  --he-guest-accent: #f28a57;
  --he-guest-success: #62d497;
  --he-guest-success-soft: #123a2b;
  --he-guest-warning: #f4bd62;
  --he-guest-warning-soft: #3d2c13;
  --he-guest-danger: #ff8f86;
  --he-guest-danger-soft: #451c22;
  --he-guest-focus: #86c8ff;
  --he-guest-shadow-sm: 0 1px 2px rgba(0, 0, 0, .24);
  --he-guest-shadow: 0 18px 46px rgba(0, 0, 0, .32);
}

.he-guest *,
.he-guest *::before,
.he-guest *::after {
  box-sizing: border-box;
}

.he-guest .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.he-guest :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--he-guest-focus);
  outline-offset: 3px;
  box-shadow: none;
}

.he-guest :where(button, .btn, .button-link, .timebtn, .ordering-suggested-time-btn) {
  min-height: 44px;
  font-family: inherit;
}

.he-guest :where(button, .btn, .button-link)[disabled],
.he-guest :where(button, .btn, .button-link)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .62;
  transform: none;
}

.he-guest :where(.he-guest-header, .ordering-app-topbar, .book-header) {
  border-color: var(--he-guest-border);
  background: color-mix(in srgb, var(--he-guest-surface) 92%, transparent);
  color: var(--he-guest-ink);
  box-shadow: var(--he-guest-shadow-sm);
}

.he-guest :where(.he-guest-brand, .ordering-app-brand, .logo) {
  color: var(--he-guest-ink);
  text-decoration: none;
}

.he-guest :where(.ordering-app-brand-mark, .mark) {
  background: linear-gradient(135deg, var(--he-guest-brand), var(--he-guest-accent));
  color: #fff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--he-guest-brand) 22%, transparent);
}

.he-guest :where(.he-guest-kicker, .ordering-pane-label, .page-kicker) {
  color: var(--he-guest-muted);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.he-guest :where(.he-guest-card, .ordering-pane-card, .ordering-workspace-panel, .ordering-product-card, .card, .wait-card) {
  border: 1px solid var(--he-guest-border);
  border-radius: var(--he-guest-radius);
  background: var(--he-guest-surface);
  color: var(--he-guest-ink);
  box-shadow: var(--he-guest-shadow-sm);
}

.he-guest :where(.he-guest-card, .ordering-pane-card, .card) :where(p, small, .muted, .fine, .ordering-pane-note) {
  color: var(--he-guest-muted);
}

.he-guest :where(.he-guest-field, .ordering-field, label) {
  color: var(--he-guest-muted);
  font-weight: 650;
}

.he-guest :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .stg-input, .stg-select, .stg-textarea, .order-chat__input) {
  min-height: 46px;
  border: 1px solid var(--he-guest-border-strong);
  border-radius: var(--he-guest-radius-sm);
  background: var(--he-guest-surface-raised);
  color: var(--he-guest-ink);
  font: inherit;
}

.he-guest :where(input, select, textarea)::placeholder {
  color: color-mix(in srgb, var(--he-guest-muted) 78%, transparent);
}

.he-guest :where(input, select, textarea):focus {
  border-color: var(--he-guest-brand);
}

.he-guest :where(.he-guest-button, .btn, .button-link, button.primary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--he-guest-border-strong);
  border-radius: var(--he-guest-radius-sm);
  padding: 10px 16px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease;
}

.he-guest :where(.btn-primary, .button-link--primary, button.primary, .he-guest-button--primary) {
  border-color: var(--he-guest-brand);
  background: var(--he-guest-brand);
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--he-guest-brand) 22%, transparent);
}

.he-guest :where(.btn-primary, .button-link--primary, button.primary, .he-guest-button--primary):hover {
  border-color: var(--he-guest-brand-strong);
  background: var(--he-guest-brand-strong);
  color: #fff;
  transform: translateY(-1px);
}

.he-guest :where(.btn-secondary, .btn-ghost, .button-link--ghost, .he-guest-button--secondary) {
  background: var(--he-guest-surface-raised);
  color: var(--he-guest-ink);
}

.he-guest :where(.btn-secondary, .btn-ghost, .button-link--ghost, .he-guest-button--secondary):hover {
  border-color: var(--he-guest-brand);
  color: var(--he-guest-brand-strong);
  text-decoration: none;
}

.he-guest :where(.he-guest-message, .ordering-summary-note, .msg, .wait-alert) {
  border: 1px solid var(--he-guest-border);
  border-radius: var(--he-guest-radius-sm);
  background: var(--he-guest-brand-soft);
  color: var(--he-guest-ink);
  padding: 12px 14px;
  line-height: 1.55;
}

.he-guest :where(.he-guest-message--success, .msg.ok) {
  border-color: color-mix(in srgb, var(--he-guest-success) 42%, var(--he-guest-border));
  background: var(--he-guest-success-soft);
  color: var(--he-guest-success);
}

.he-guest :where(.he-guest-message--warning, .ordering-summary-note--warning) {
  border-color: color-mix(in srgb, var(--he-guest-warning) 42%, var(--he-guest-border));
  background: var(--he-guest-warning-soft);
  color: var(--he-guest-warning);
}

.he-guest :where(.he-guest-message--error, .msg.err) {
  border-color: color-mix(in srgb, var(--he-guest-danger) 42%, var(--he-guest-border));
  background: var(--he-guest-danger-soft);
  color: var(--he-guest-danger);
}

.he-guest :where(.he-guest-menu-card, .ordering-product-card) {
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.he-guest :where(.he-guest-menu-card, .ordering-product-card):hover {
  border-color: color-mix(in srgb, var(--he-guest-brand) 55%, var(--he-guest-border));
  box-shadow: var(--he-guest-shadow);
  transform: translateY(-2px);
}

.he-guest :where(.he-guest-menu-card, .ordering-product-card).is-unavailable {
  opacity: .72;
  transform: none;
}

.he-guest :where(.he-guest-menu-card__image, .ordering-product-image img, .ordering-cart-line-thumb img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--he-guest-brand-soft);
}

.he-guest :where(.he-guest-summary, .ordering-total-box, .ordering-cart-metrics, .summary) {
  border-radius: var(--he-guest-radius);
  background: var(--he-guest-surface-raised);
  color: var(--he-guest-ink);
}

.he-guest :where(.he-guest-summary__total, .ordering-total-box .is-total, .ordering-cart-metric.total) {
  border-top: 1px solid var(--he-guest-border);
  color: var(--he-guest-ink);
  font-size: 1.05rem;
}

.he-guest :where(.he-guest-slot, .timebtn, .ordering-suggested-time-btn) {
  border: 1px solid var(--he-guest-border-strong);
  border-radius: 999px;
  background: var(--he-guest-surface-raised);
  color: var(--he-guest-ink);
  padding: 10px 15px;
  font-weight: 750;
}

.he-guest :where(.he-guest-slot, .timebtn, .ordering-suggested-time-btn):hover {
  border-color: var(--he-guest-brand);
  color: var(--he-guest-brand-strong);
}

.he-guest :where(.he-guest-slot, .timebtn, .ordering-suggested-time-btn)[aria-pressed="true"],
.he-guest :where(.he-guest-slot, .timebtn, .ordering-suggested-time-btn).is-selected {
  border-color: var(--he-guest-brand);
  background: var(--he-guest-brand);
  color: #fff;
}

.he-guest :where(.he-guest-dialog, dialog, [role="dialog"]) {
  border: 1px solid var(--he-guest-border);
  border-radius: var(--he-guest-radius-lg);
  background: var(--he-guest-surface);
  color: var(--he-guest-ink);
  box-shadow: var(--he-guest-shadow);
}

.he-guest :where(.he-guest-dialog, dialog)::backdrop {
  background: rgba(6, 14, 27, .62);
  backdrop-filter: blur(3px);
}

.he-guest [hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .he-guest {
    --he-guest-radius: 14px;
    --he-guest-radius-lg: 18px;
  }

  .he-guest :where(.he-guest-button, .btn, .button-link, button.primary) {
    min-height: 46px;
  }

  .he-guest :where(.he-guest-dialog, dialog, [role="dialog"]) {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-radius: var(--he-guest-radius-lg) var(--he-guest-radius-lg) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .he-guest *,
  .he-guest *::before,
  .he-guest *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .he-guest :where(.btn, .button-link, button, input, select, textarea, .card, .ordering-pane-card, .ordering-product-card) {
    border: 1px solid CanvasText;
  }
}

/* Explicit high-frequency guest actions retain their larger touch targets. */
.he-guest.he-guest .ui-target-touch.ui-target-touch {
  min-width: 48px;
  min-height: 48px;
}

.he-guest.he-guest .ui-target-rush.ui-target-rush {
  min-width: 56px;
  min-height: 56px;
}
