/*
 * ESD Scoop theme from the ESD POS family brand (ESD POS Core brand/README.md): the Scoop accent
 * #D63A50 on light and #FF6F80 on dark, with the family graphite #1B1F25 as the second colour, on top
 * of the DreamsPOS restaurant-pos styles (loaded after style.css and the core's core.css).
 * Light: white text on the accent passes 4.5:1. Dark: the lighter accent with graphite text on buttons.
 */
:root {
  --scoop-accent: #D63A50;
  --scoop-accent-hover: #BC2F44;
  --scoop-accent-soft: #FBE3E6;
  --scoop-accent-wash: #FDF2F3;
  --scoop-graphite: #1B1F25;
  --scoop-graphite-hover: #2A3039;
  --scoop-graphite-ink: #FFFFFF;
  --scoop-graphite-soft: #EEF0F2;
  --scoop-page: #F7F7F8;
  --scoop-on-primary: #FFFFFF;

  --primary: var(--scoop-accent);
  --primary-hover: var(--scoop-accent-hover);
  --primary-100: var(--scoop-accent-soft);
  --primary-transparent: var(--scoop-accent-wash);
  --primary-rgb: 214, 58, 80;
  --secondary: var(--scoop-graphite);
  --secondary-hover: var(--scoop-graphite-hover);
  --secondary-transparent: var(--scoop-graphite-soft);
  --secondary-rgb: 27, 31, 37;
  --light: var(--scoop-page);

  --bs-primary: var(--scoop-accent);
  --bs-primary-rgb: 214, 58, 80;
  --bs-secondary: var(--scoop-graphite);
  --bs-secondary-rgb: 27, 31, 37;
  --bs-link-color: var(--scoop-accent);
  --bs-link-color-rgb: 214, 58, 80;
  --bs-link-hover-color: var(--scoop-accent-hover);
  --bs-link-hover-color-rgb: 188, 47, 68;
  --bs-primary-bg-subtle: var(--scoop-accent-soft);
  --bs-primary-text-emphasis: #7A1F2C;
  --bs-primary-border-subtle: #F1B3BC;
  --bs-focus-ring-color: rgba(214, 58, 80, 0.25);
}

:root[data-bs-theme=dark] {
  --scoop-accent: #FF6F80;
  --scoop-accent-hover: #FF8A98;
  --scoop-accent-soft: #3A161B;
  --scoop-accent-wash: #261014;
  --scoop-graphite: #D5D9DF;
  --scoop-graphite-hover: #E6E9ED;
  --scoop-graphite-ink: #1B1F25;
  --scoop-graphite-soft: #23272E;
  --scoop-on-primary: #1B1F25;

  /* The template's dark block sets these too, so they are restated here. */
  --primary: var(--scoop-accent);
  --primary-hover: var(--scoop-accent-hover);
  --primary-100: var(--scoop-accent-soft);
  --primary-transparent: var(--scoop-accent-wash);
  --secondary: var(--scoop-graphite);
  --secondary-hover: var(--scoop-graphite-hover);
  --secondary-transparent: var(--scoop-graphite-soft);
  --primary-rgb: 255, 111, 128;
  --secondary-rgb: 213, 217, 223;
  --light: #121418;
  --bs-primary-rgb: 255, 111, 128;
  --bs-link-color-rgb: 255, 111, 128;
  --bs-link-hover-color-rgb: 255, 138, 152;
  --bs-primary-text-emphasis: #FFB8C0;
  --bs-primary-border-subtle: #6B2630;
  --bs-focus-ring-color: rgba(255, 111, 128, 0.3);
}

/* Buttons and fills */
.btn-primary,
.btn-primary:focus {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
  color: var(--scoop-on-primary);
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show {
  color: var(--scoop-on-primary);
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: var(--scoop-on-primary);
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-secondary,
.btn-secondary:focus {
  color: var(--scoop-graphite-ink);
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active {
  color: var(--scoop-graphite-ink);
  background-color: var(--secondary-hover);
  border-color: var(--secondary-hover);
}
.bg-primary,
.text-bg-primary {
  background-color: var(--primary) !important;
  color: var(--scoop-on-primary) !important;
}
.bg-secondary,
.text-bg-secondary {
  background-color: var(--secondary) !important;
  color: var(--scoop-graphite-ink) !important;
}
.text-primary,
.link-primary {
  color: var(--primary) !important;
}
.border-primary {
  border-color: var(--primary) !important;
}
.badge-soft-primary {
  background-color: var(--primary-transparent) !important;
  color: var(--primary) !important;
}
.badge-soft-secondary {
  background-color: var(--secondary-transparent) !important;
  color: var(--scoop-graphite-ink) !important;
}
:root[data-bs-theme=dark] .badge-soft-secondary {
  color: var(--scoop-graphite) !important;
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--primary-rgb), 0.6);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15);
}
.page-link.active,
.active > .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--scoop-on-primary);
}
.nav-tabs.nav-bordered-primary .nav-item .nav-link.active,
.nav-tabs.nav-bordered-primary .nav-item .nav-link:hover,
.nav-tabs.nav-bordered-primary .nav-item .nav-link:focus {
  color: var(--primary);
  border-color: var(--primary);
}
.nav-tabs.nav-solid-primary li a.active,
.nav-tabs.nav-solid-primary li a:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--scoop-on-primary);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--primary);
  color: var(--scoop-on-primary);
}
.progress-bar {
  background-color: var(--primary);
}

/* The template paints muted text in its secondary colour; keep it a readable grey. */
.text-muted,
.text-secondary {
  color: var(--body-color) !important;
}

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Frame */
.scoop .sidebar-twocol .twocol-mini {
  border-right: 1px solid rgba(var(--primary-rgb), 0.12);
}
.scoop .sidebar-twocol .sidebar-left .nav-link.active {
  background-color: var(--primary-transparent);
  color: var(--primary);
}
.scoop .logo .core-brand-text,
.scoop .sidebar-logo .core-brand-text {
  color: var(--primary);
}
.scoop .logo img,
.scoop .logo-small img {
  max-height: 34px;
  width: auto;
}
.scoop .logo-small img {
  max-height: 32px;
}
.scoop-business-name {
  max-width: 220px;
}
.scoop .avatar.bg-primary {
  color: var(--scoop-on-primary) !important;
}
.scoop-page-header h3 {
  font-weight: 700;
}

/* Sign-in */
.scoop-auth-brand img {
  max-height: 44px;
  width: auto;
}
.scoop-auth-panel {
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 255, 255, 0.18) 0 120px, transparent 121px),
    radial-gradient(circle at 10% 92%, rgba(214, 58, 80, 0.9) 0 160px, transparent 161px),
    radial-gradient(circle at 92% 88%, rgba(247, 247, 248, 0.22) 0 90px, transparent 91px),
    linear-gradient(160deg, #1B1F25 0%, #2A3039 100%) !important;
}
.scoop-auth-mark {
  width: 260px;
  max-width: 80%;
  height: auto;
}
.scoop-auth-panel h1 {
  font-size: 2rem;
  font-weight: 700;
}

/* Customer-facing display ("Now serving") */
.scoop-display {
  background-color: var(--light);
  color: var(--body-color);
}
.scoop-display-header {
  border-bottom: 4px solid var(--primary);
  background-color: var(--white);
}
.scoop-display-mark {
  height: 48px;
  width: auto;
}
.scoop-display-business {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
}
.scoop-display-title {
  font-size: 1.5rem;
  font-weight: 600;
}
.scoop-display-clock {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--body-color);
}
.scoop-display .scoop-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.5rem;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.scoop-display .scoop-token-ready {
  background-color: var(--primary);
  color: var(--scoop-on-primary);
}
.scoop-display .scoop-token-preparing {
  background-color: var(--scoop-graphite-soft);
  color: var(--scoop-graphite);
}
.scoop-display .scoop-display-column h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .scoop * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Till: modifier picks under a cart line */
.scoop-line-meta {
  min-width: 10rem;
  white-space: normal;
}