@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800&display=swap");
:root {
  --vkus-bg: #FFFFFF;
  --vkus-surface: #F7F7FA;
  --vkus-surface-deep: #EFEFF3;
  --vkus-text: #1F1F22;
  --vkus-text-muted: #6E6E76;
  --vkus-text-subtle: #98989F;
  --vkus-border: #ECECF0;
  --vkus-accent: #D84A38;
  --vkus-accent-hover: #C03D2C;
  --vkus-red: #FF382C;
  --vkus-btn: #1F1F22;
  --vkus-btn-text: #FFFFFF;
  --vkus-success: #34A853;
  --vkus-overlay: rgba(31, 31, 34, 0.4);
  --vkus-shadow-sm: 0 1px 4px rgba(31, 31, 34, 0.05), 0 4px 16px rgba(31, 31, 34, 0.05);
  --vkus-shadow-md: 0 4px 12px rgba(31, 31, 34, 0.06), 0 20px 48px rgba(31, 31, 34, 0.10);
  --vkus-radius-md: 16px;
  --vkus-radius-lg: 24px;
  --vkus-radius-pill: 999px;
  --vkus-font: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

[data-theme=dark] {
  --vkus-bg: #161618;
  --vkus-surface: #222226;
  --vkus-surface-deep: #2C2C31;
  --vkus-text: #F2F2F4;
  --vkus-text-muted: #A0A0A8;
  --vkus-text-subtle: #6E6E76;
  --vkus-border: #2C2C31;
  --vkus-accent: #FF5A4E;
  --vkus-accent-hover: #E8473C;
  --vkus-red: #FF5A4E;
  --vkus-btn: #FFFFFF;
  --vkus-btn-text: #161618;
  --vkus-success: #4CC46E;
  --vkus-overlay: rgba(0, 0, 0, 0.6);
  --vkus-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --vkus-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

[data-theme=cream] {
  --vkus-bg: #FAF5EE;
  --vkus-surface: #F2EADD;
  --vkus-surface-deep: #E9DECC;
  --vkus-text: #2B241D;
  --vkus-text-muted: #7A6F63;
  --vkus-text-subtle: #A2968A;
  --vkus-border: #E8DFD2;
  --vkus-accent: #C4622D;
  --vkus-accent-hover: #A94F20;
  --vkus-red: #C4622D;
  --vkus-btn: #2B241D;
  --vkus-btn-text: #FAF5EE;
  --vkus-overlay: rgba(43, 36, 29, 0.4);
}

[data-theme=forest] {
  --vkus-bg: #FFFFFF;
  --vkus-surface: #F0F6F1;
  --vkus-surface-deep: #E3EFE6;
  --vkus-text: #1C2B21;
  --vkus-text-muted: #5F7367;
  --vkus-text-subtle: #8CA093;
  --vkus-border: #DFEAE2;
  --vkus-accent: #2E8B57;
  --vkus-accent-hover: #256F46;
  --vkus-red: #2E8B57;
  --vkus-btn: #1C2B21;
  --vkus-btn-text: #FFFFFF;
  --vkus-overlay: rgba(28, 43, 33, 0.4);
}

[data-theme=berry] {
  --vkus-bg: #FFFFFF;
  --vkus-surface: #F8F1F4;
  --vkus-surface-deep: #F0E3EA;
  --vkus-text: #291C22;
  --vkus-text-muted: #7A6470;
  --vkus-text-subtle: #A38E9A;
  --vkus-border: #ECDDE4;
  --vkus-accent: #C2185B;
  --vkus-accent-hover: #A2124C;
  --vkus-red: #C2185B;
  --vkus-btn: #291C22;
  --vkus-btn-text: #FFFFFF;
  --vkus-overlay: rgba(41, 28, 34, 0.4);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
}

body {
  font-family: var(--vkus-font);
  color: var(--vkus-text);
  background: var(--vkus-bg);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.welcome {
  display: grid;
  place-items: center;
  height: 100vh;
  background: var(--vkus-bg);
  text-align: center;
  padding: 40px;
}

.welcome__brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 48px;
}

.welcome__logo {
  height: 96px;
  width: auto;
  display: block;
}

.welcome__title {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  line-height: 1.05;
}

.welcome__title .accent {
  color: var(--vkus-accent);
}

.welcome__sub {
  font-size: 26px;
  color: var(--vkus-text-muted);
  margin-bottom: 64px;
}

.welcome__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 76px;
  border-radius: var(--vkus-radius-pill);
  min-height: 96px;
  background: var(--vkus-btn);
  color: var(--vkus-btn-text);
  font-weight: 700;
  font-size: 32px;
  border: none;
  box-shadow: var(--vkus-shadow-md);
  animation: pulse 2.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}
.kiosk-shell {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  height: 100vh;
  gap: 0;
}

.kiosk-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 36px;
  background: var(--vkus-bg);
  border-bottom: 1px solid var(--vkus-border);
}

.kiosk-topbar__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  font-size: 24px;
}

.kiosk-topbar__logo {
  height: 36px;
  width: auto;
  display: block;
}

.kiosk-topbar__tenant {
  color: var(--vkus-text-muted);
  font-weight: 500;
  font-size: 20px;
}

.kiosk-topbar__cart {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 32px;
  border-radius: var(--vkus-radius-pill);
  background: var(--vkus-btn);
  color: var(--vkus-btn-text);
  font-weight: 600;
  font-size: 21px;
  min-height: 68px;
  border: none;
}

.kiosk-topbar__cart:disabled {
  opacity: 0.35;
  cursor: default;
}

.kiosk-topbar__cart-count {
  background: var(--vkus-red);
  min-width: 34px;
  padding: 4px 10px;
  border-radius: var(--vkus-radius-pill);
  font-weight: 700;
  text-align: center;
}

.kiosk-categories {
  display: flex;
  gap: 12px;
  padding: 18px 36px;
  overflow-x: auto;
  background: var(--vkus-bg);
  border-bottom: 1px solid var(--vkus-border);
  scrollbar-width: none;
}

.kiosk-categories::-webkit-scrollbar {
  display: none;
}

.kiosk-categories button {
  flex: 0 0 auto;
  padding: 16px 32px;
  min-height: 64px;
  border-radius: var(--vkus-radius-pill);
  border: none;
  background: var(--vkus-surface);
  color: var(--vkus-text);
  font-weight: 600;
  font-size: 19px;
  white-space: nowrap;
  transition: background 0.12s;
}

.kiosk-categories button.is-active {
  background: var(--vkus-btn);
  color: var(--vkus-btn-text);
}

.kiosk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: max-content;
  gap: 20px;
  padding: 24px 36px;
  overflow-y: auto;
  background: var(--vkus-bg);
}

.kiosk-tile {
  background: var(--vkus-surface);
  border-radius: var(--vkus-radius-lg);
  overflow: hidden;
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  text-align: left;
  color: var(--vkus-text);
  transition: transform 0.08s;
}

.kiosk-tile:active {
  transform: scale(0.98);
}

.kiosk-tile__img {
  aspect-ratio: 4/3;
  background: var(--vkus-surface-deep);
  display: grid;
  place-items: center;
  font-size: 72px;
}

.kiosk-tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kiosk-tile__body {
  padding: 18px 20px 8px;
}

.kiosk-tile__name {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.kiosk-tile__desc {
  font-size: 15px;
  color: var(--vkus-text-muted);
  min-height: 38px;
  line-height: 1.4;
}

.kiosk-tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 20px;
  gap: 12px;
}

.kiosk-tile__price {
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
}

.kiosk-tile__add {
  padding: 14px 26px;
  border-radius: var(--vkus-radius-pill);
  border: none;
  background: var(--vkus-accent);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 17px;
  min-height: 52px;
  transition: background 0.12s;
}

.kiosk-tile__add:active {
  background: var(--vkus-accent-hover);
}

.kiosk-bottombar {
  padding: 16px 36px;
  background: var(--vkus-bg);
  border-top: 1px solid var(--vkus-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.kiosk-back {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  min-height: 64px;
  border-radius: var(--vkus-radius-pill);
  background: var(--vkus-surface);
  border: none;
  font-weight: 600;
  font-size: 19px;
  color: var(--vkus-text);
}

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--vkus-overlay);
  display: none;
  place-items: center;
  padding: 40px;
}

.cart-drawer.is-open {
  display: grid;
}

.cart-drawer__panel {
  background: var(--vkus-bg);
  border-radius: 28px;
  width: 720px;
  max-width: calc(100vw - 80px);
  max-height: 92vh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
  box-shadow: var(--vkus-shadow-md);
}

.cart-drawer__head {
  padding: 28px 32px;
  border-bottom: 1px solid var(--vkus-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-drawer__head h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cart-drawer__close {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--vkus-surface);
  border: none;
  font-size: 24px;
  font-weight: 600;
  color: var(--vkus-text-muted);
}

.cart-drawer__items {
  overflow-y: auto;
  padding: 8px 0;
}

.cart-drawer__row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 18px 32px;
  border-bottom: 1px solid var(--vkus-border);
  gap: 8px;
}

.cart-drawer__row:last-child {
  border-bottom: none;
}

.cart-drawer__row-name {
  font-weight: 700;
  font-size: 20px;
}

.cart-drawer__row-price {
  font-weight: 500;
  font-size: 16px;
  color: var(--vkus-text-muted);
  margin-top: 4px;
}

.cart-drawer__row-total {
  font-weight: 800;
  font-size: 22px;
  align-self: center;
}

.cart-drawer__qty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.cart-drawer__qty button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--vkus-surface);
  font-size: 26px;
  font-weight: 700;
  color: var(--vkus-text);
}

.cart-drawer__qty .v {
  min-width: 40px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
}

.cart-drawer__empty {
  padding: 80px 40px;
  text-align: center;
  color: var(--vkus-text-muted);
  font-size: 22px;
}

.cart-drawer__upsell {
  padding: 16px 32px;
  background: var(--vkus-surface);
  border-bottom: 1px solid var(--vkus-border);
}

.cart-drawer__upsell h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--vkus-text-muted);
}

.cart-drawer__upsell-pitch {
  background: var(--vkus-bg);
  border-radius: var(--vkus-radius-md);
  padding: 14px 18px;
  font-size: 16px;
  color: var(--vkus-text);
}
.cart-drawer__upsell-pitch + .cart-drawer__upsell-pitch {
  margin-top: 8px;
}

.cart-drawer__foot {
  padding: 28px 32px;
  border-top: 1px solid var(--vkus-border);
}

.cart-drawer__sum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.cart-drawer__sum-label {
  font-size: 22px;
  color: var(--vkus-text-muted);
}

.cart-drawer__sum-total {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cart-drawer__pay {
  width: 100%;
  padding: 26px;
  border-radius: var(--vkus-radius-pill);
  border: none;
  background: var(--vkus-accent);
  color: #FFFFFF;
  font-size: 26px;
  font-weight: 700;
  min-height: 84px;
  transition: background 0.12s;
}

.cart-drawer__pay:active {
  background: var(--vkus-accent-hover);
}

.cart-drawer__pay:disabled {
  opacity: 0.35;
  cursor: default;
}

.done-screen {
  display: grid;
  place-items: center;
  height: 100vh;
  background: var(--vkus-bg);
  text-align: center;
  padding: 40px;
}

.done-screen__check {
  width: 144px;
  height: 144px;
  border-radius: 50%;
  background: var(--vkus-success);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 84px;
  font-weight: 800;
  margin: 0 auto 36px;
}

.done-screen__title {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.done-screen__sub {
  font-size: 26px;
  color: var(--vkus-text-muted);
  margin-bottom: 12px;
}

.done-screen__number {
  font-size: 80px;
  font-weight: 800;
  color: var(--vkus-accent);
  margin: 16px 0 40px;
  letter-spacing: -0.02em;
}

.pay-screen {
  display: grid;
  place-items: center;
  height: 100vh;
  background: var(--vkus-bg);
  padding: 40px;
}

.pay-screen__panel {
  text-align: center;
  max-width: 640px;
  width: 100%;
}

.pay-screen__title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.pay-screen__sum {
  font-size: 56px;
  font-weight: 800;
  color: var(--vkus-accent);
  margin-bottom: 32px;
  letter-spacing: -0.02em;
}

.pay-screen__qr {
  width: 340px;
  height: 340px;
  margin: 0 auto 28px;
  background: #FFFFFF;
  border-radius: var(--vkus-radius-lg);
  padding: 20px;
  box-shadow: var(--vkus-shadow-md);
}
.pay-screen__qr svg {
  width: 100%;
  height: 100%;
  display: block;
}

.pay-screen__hint {
  font-size: 22px;
  color: var(--vkus-text-muted);
  line-height: 1.45;
  margin-bottom: 28px;
}

.pay-screen__status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 40px;
}

.pay-screen__spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--vkus-border);
  border-top-color: var(--vkus-accent);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.pay-screen__cancel {
  padding: 18px 40px;
  min-height: 64px;
  border-radius: var(--vkus-radius-pill);
  background: var(--vkus-surface);
  border: none;
  font-weight: 600;
  font-size: 19px;
  color: var(--vkus-text-muted);
}

.kiosk-error {
  margin: 0 36px;
  padding: 16px 24px;
  background: rgba(216, 74, 56, 0.1);
  color: var(--vkus-accent);
  border-radius: var(--vkus-radius-md);
  font-weight: 600;
  font-size: 18px;
}

.welcome__logo--custom {
  max-width: min(480px, 80vw);
  max-height: 140px;
  height: auto;
  object-fit: contain;
}

.kiosk-topbar__logo--custom {
  max-width: 220px;
  max-height: 48px;
  height: auto;
  object-fit: contain;
}