/* ===== PAGE 0 ===== */
.p0-screen { flex-direction: column; align-items: center; justify-content: center; }
#stateA { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; padding: calc(var(--u)*4) 0 calc(var(--u)*3); }
.p0-a-title { font-size: calc(var(--u)*5.5); font-weight: 900; color: var(--text); text-align: center; margin-bottom: calc(var(--u)*1); flex-shrink: 0; }
.p0-a-subtitle { font-size: calc(var(--u)*2.8); color: var(--text-muted); text-align: center; margin-bottom: calc(var(--u)*4); flex-shrink: 0; }
.p0-cards { display: flex; flex-direction: column; gap: calc(var(--u)*1.5); width: var(--col-w); flex: 1; overflow-y: auto; padding-bottom: calc(var(--u)*2); }
.p0-cards::-webkit-scrollbar { width: 0; }
.p0-card-logo { width: 55%; max-height: calc(var(--u)*10); height: auto; object-fit: contain; flex-shrink: 0; }
.p0-card-logo.first { width: 55%; }
.p0-card { background: #fff; border-radius: calc(var(--u)*2.5); box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; flex-direction: column; align-items: center; padding: calc(var(--u)*2.2) calc(var(--u)*3) calc(var(--u)*2); cursor: pointer; border: calc(var(--u)*0.3) solid #e5e7eb; transition: transform 0.12s ease, box-shadow 0.12s ease; -webkit-tap-highlight-color: transparent; gap: calc(var(--u)*0.8); flex-shrink: 0; }
.p0-card:active { transform: scale(0.97); box-shadow: 0 1px 4px rgba(0,0,0,0.07); }
.p0-card-desc { font-size: calc(var(--u)*2.4); color: var(--text-muted); text-align: center; line-height: 1.3; }

#stateB { display: none; flex-direction: column; align-items: center; width: 100%; height: 100%; padding-bottom: calc(var(--u)*4); }
.p0-b-desc { margin-top: calc(var(--u)*1.5); font-size: calc(var(--u)*2.8); color: var(--text-muted); text-align: center; flex-shrink: 0; }
.p0-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.p0-prices { width: var(--col-w); background: #fff; border-radius: calc(var(--u)*3); box-shadow: 0 4px 16px rgba(100,105,130,0.10); padding: calc(var(--u)*3) calc(var(--u)*4); }
.p0-prices-title { font-size: calc(var(--u)*2.4); color: var(--text-muted); margin-bottom: calc(var(--u)*2); }
.p0-price-row { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u)*1.8) 0; border-bottom: 1px solid #f0eee9; }
.p0-price-row:last-child { border-bottom: none; }
.p0-price-label { font-size: calc(var(--u)*2.8); color: var(--text); }
.p0-price-val { font-size: calc(var(--u)*3.2); font-weight: 700; color: var(--text); }
.p0-b-bottom { flex-shrink: 0; width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--u)*4); }
.p0-status { display: none; width: var(--col-w); font-size: calc(var(--u)*2.4); text-align: center; line-height: 1.4; margin-bottom: calc(var(--u)*1.8); }
.p0-status.warning { color: #b45309; font-weight: 600; }
.p0-status.blocked { color: #c53030; font-weight: 600; }

/* ===== PAGE 1 ===== */
.phone-display { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 5); font-weight: 700; pointer-events: none; user-select: none; letter-spacing: 0.02em; }
.phone-display .typed { color: var(--accent); }
.phone-display .ph { color: var(--text-ph); }
.key-bare { background: transparent; box-shadow: none; color: var(--text-muted); opacity: 0.3; pointer-events: none; transition: opacity 0.2s ease, transform 0.12s ease; }
.key-bare svg { width: 45%; height: 45%; }
.key-bare.enabled { opacity: 1; pointer-events: auto; }
.key-bare:active { transform: scale(0.85); }
.code-area { margin-top: calc(var(--u) * 4); display: none; flex-direction: row; align-items: center; gap: calc(var(--u) * 3); }
.code-field { width: calc(var(--u) * 11); height: calc(var(--u) * 12); border-radius: calc(var(--u) * 1.5); background: var(--key-bg); border: calc(var(--u) * 0.4) solid transparent; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 5); font-weight: 400; color: var(--accent); transition: border-color 0.15s ease; }
.code-field.active { border-color: var(--accent); }
.col-right { display: flex; align-items: flex-start; justify-content: center; padding-top: calc(var(--u) * 3); }

/* ===== PAGE 2 ===== */
.p2-screen { flex-direction: column; overflow: hidden; }
.p2-header { flex-shrink: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
.p2-back { position: absolute; left: calc(var(--u)*3); top: calc(var(--u)*3); }
.p2-exit { position: absolute; right: calc(var(--u)*3); top: calc(var(--u)*3); }
.p2-title { font-size: calc(var(--u)*5); font-weight: 900; color: var(--text); text-align: center; margin-top: calc(var(--u)*4); width: var(--col-w); }
.p2-subtitle { font-size: calc(var(--u)*2.6); color: var(--text-muted); text-align: center; margin-top: calc(var(--u)*1); width: var(--col-w); }
.p2-list-wrap { flex: 1; overflow: hidden; position: relative; margin-top: calc(var(--u)*2); display: flex; justify-content: center; }
.p2-list { width: var(--col-w); height: 100%; overflow-y: auto; padding: 0 0 calc(var(--u)*2); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.p2-list::-webkit-scrollbar { width: calc(var(--u)*0.8); }
.p2-list::-webkit-scrollbar-thumb { background: var(--accent-light); border-radius: 4px; }
.p2-footer { flex-shrink: 0; display: flex; justify-content: center; padding: calc(var(--u)*2) 0 calc(var(--u)*4); }
.p2-footer .action-btn { margin-top: 0; width: var(--col-w); }
.p2-overlay { display: none; position: absolute; inset: 0; background: var(--accent-overlay); z-index: 5; }
.p2-overlay.visible { display: block; }
.guest-card { display: flex; align-items: center; gap: calc(var(--u)*2); padding: calc(var(--u)*2.5) calc(var(--u)*2); border-radius: calc(var(--u)*2); background: #fff; margin-bottom: calc(var(--u)*1.5); box-shadow: 0 2px 6px rgba(0,0,0,0.07); transition: opacity 0.2s, background 0.15s, border-color 0.15s; cursor: pointer; -webkit-tap-highlight-color: transparent; border: calc(var(--u)*0.4) solid transparent; }
.guest-card.selected-card { background: var(--accent-5); border-color: var(--accent); }
.guest-cb { width: calc(var(--u)*5.5); height: calc(var(--u)*5.5); border-radius: calc(var(--u)*1.2); border: calc(var(--u)*0.4) solid var(--text-ph); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, border-color 0.15s; }
.guest-cb.checked { background: var(--accent); border-color: var(--accent); }
.guest-cb svg { width: 60%; height: 60%; }
.guest-icon { width: calc(var(--u)*6); height: calc(var(--u)*6); flex-shrink: 0; }
.guest-info { flex: 1; min-width: 0; }
.guest-name { font-size: calc(var(--u)*3.2); font-weight: 400; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.15s, font-weight 0.15s; }
.guest-name.active-name { font-weight: 700; color: var(--text); }
.guest-age { font-size: calc(var(--u)*2.4); color: var(--text-muted); margin-top: calc(var(--u)*0.3); }
.guest-age.active-age { font-weight: 700; color: var(--text); }
.edit-list-btn { display: flex; align-items: center; gap: calc(var(--u)*1.5); padding: calc(var(--u)*1.5) calc(var(--u)*2); border-radius: calc(var(--u)*2); background: transparent; margin-bottom: calc(var(--u)*1.5); cursor: pointer; border: none; width: 100%; }
.edit-list-icon svg { width: calc(var(--u)*3.5); height: calc(var(--u)*3.5); }
.edit-list-label { font-size: calc(var(--u)*2.6); color: var(--text-muted); font-family: Arial, sans-serif; flex: 1; text-align: left; }
.edit-list-arrow svg { width: calc(var(--u)*3); height: calc(var(--u)*3); }
.edit-modal { width: calc(var(--u)*62); padding: calc(var(--u)*5) calc(var(--u)*4) calc(var(--u)*3); gap: calc(var(--u)*3); }
.edit-mode-main { display: flex; flex-direction: column; gap: calc(var(--u)*3); width: 100%; }
.edit-mode-date { display: none; flex-direction: column; gap: calc(var(--u)*2.5); width: 100%; }
.edit-top-row { display: flex; align-items: center; gap: calc(var(--u)*3); }
.edit-gender-btns { display: flex; gap: calc(var(--u)*2); flex-shrink: 0; }
.gender-btn { width: calc(var(--u)*9); height: calc(var(--u)*9); border-radius: 50%; border: calc(var(--u)*0.4) solid var(--text-ph); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: calc(var(--u)*1.5); transition: border-color 0.15s, background 0.15s; }
.gender-btn.selected { border-color: var(--accent); background: var(--accent-5); }
.date-pill { flex: 1; background: var(--key-bg); border-radius: calc(var(--u)*2); padding: calc(var(--u)*1.5) calc(var(--u)*2); border: none; cursor: pointer; font-family: Arial, sans-serif; display: flex; align-items: center; gap: calc(var(--u)*1.5); }
.date-pill-icon svg { width: calc(var(--u)*3.5); height: calc(var(--u)*3.5); }
.date-pill-label { font-size: calc(var(--u)*2); color: var(--text-muted); display: block; }
.date-pill-value { font-size: calc(var(--u)*2.8); color: var(--text); display: block; }
.date-pill-value.ph { color: var(--text-ph); }
.date-pill-arrow svg { width: calc(var(--u)*3); height: calc(var(--u)*3); }
.edit-name-display { font-size: calc(var(--u)*4.5); font-weight: 700; color: var(--accent); min-height: calc(var(--u)*7); padding: calc(var(--u)*1) 0; border-bottom: calc(var(--u)*0.4) solid var(--accent); width: 100%; }
.edit-name-cursor { display: inline-block; width: 2px; height: calc(var(--u)*4.5); background: var(--accent); vertical-align: middle; margin-left: 1px; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.edit-alpha-kb { display: flex; flex-direction: column; gap: calc(var(--u)*1); }
.edit-alpha-row { display: flex; justify-content: center; gap: calc(var(--u)*0.8); }
.edit-alpha-key { width: calc(var(--u)*5.5); height: calc(var(--u)*5.8); border-radius: calc(var(--u)*1); background: var(--key-bg); display: flex; align-items: center; justify-content: center; font-size: calc(var(--u)*2.5); color: var(--text); cursor: pointer; border: none; user-select: none; transition: transform 0.1s; }
.edit-alpha-key:active { transform: scale(0.88); }
.edit-alpha-wide { width: calc(var(--u)*9); background: var(--key-aux-bg); color: #fff; }
.edit-alpha-wide.disabled { opacity: 0.3; pointer-events: none; }
.edit-alpha-wide svg { width: calc(var(--u)*3.5); height: calc(var(--u)*3.5); }
.edit-actions-row { display: flex; gap: calc(var(--u)*2); width: 100%; }
.edit-del-btn { flex: 1; height: calc(var(--u)*9); border-radius: var(--radius-btn); border: none; background: #fde8e8; color: #c53030; font-size: calc(var(--u)*3); font-family: Arial, sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: calc(var(--u)*1.5); }
.edit-del-btn svg { width: calc(var(--u)*3.5); height: calc(var(--u)*3.5); flex-shrink: 0; }
.edit-save-btn { flex: 2; height: calc(var(--u)*9); border-radius: var(--radius-btn); border: none; background: var(--accent); color: #fff; font-size: calc(var(--u)*3); font-family: Arial, sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: calc(var(--u)*1.5); }
.edit-save-btn svg { width: calc(var(--u)*3.5); height: calc(var(--u)*3.5); flex-shrink: 0; }
.edit-save-btn.disabled { opacity: 0.4; pointer-events: none; }
.date-picker-tabs { display: flex; gap: calc(var(--u)*1.5); }
.date-tab { flex: 1; height: calc(var(--u)*8); border-radius: calc(var(--u)*1.5); border: none; font-size: calc(var(--u)*2.6); font-family: Arial, sans-serif; cursor: pointer; background: var(--key-bg); color: var(--text-muted); transition: background 0.15s, color 0.15s; }
.date-tab.active { background: var(--accent); color: #fff; }
.date-tab.disabled { opacity: 0.35; pointer-events: none; }
.date-picker-grid { display: grid; gap: calc(var(--u)*1.2); }
.date-picker-grid.cols4 { grid-template-columns: repeat(4, 1fr); }
.date-picker-grid.cols5 { grid-template-columns: repeat(5, 1fr); }
.date-picker-grid.cols7 { grid-template-columns: repeat(7, 1fr); }
.date-cell { height: calc(var(--u)*7); border-radius: calc(var(--u)*1.5); border: none; font-size: calc(var(--u)*2.6); font-family: Arial, sans-serif; cursor: pointer; background: var(--key-bg); color: var(--text); transition: background 0.12s, color 0.12s; display: flex; align-items: center; justify-content: center; }
.date-cell:active { transform: scale(0.95); }
.date-cell.selected { background: var(--accent); color: #fff; }
.date-year-nav { display: flex; align-items: center; justify-content: space-between; }
.date-nav-btn { width: calc(var(--u)*8); height: calc(var(--u)*8); border-radius: 50%; border: none; background: var(--key-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.date-nav-btn.disabled { opacity: 0.3; pointer-events: none; }
.date-nav-btn svg { width: 45%; height: 45%; }
.date-nav-label { font-size: calc(var(--u)*2.8); color: var(--text-muted); }
.guestlist-modal { width: calc(var(--u)*62); padding: calc(var(--u)*5) calc(var(--u)*4) calc(var(--u)*3); gap: calc(var(--u)*2); max-height: calc(var(--h)*0.8); }
.guestlist-scroll { overflow-y: auto; width: 100%; flex: 1; -webkit-overflow-scrolling: touch; }
.guestlist-item { display: flex; align-items: center; gap: calc(var(--u)*2); padding: calc(var(--u)*2) calc(var(--u)*1); border-bottom: 1px solid #f0f0f5; cursor: pointer; }
.guestlist-item:last-child { border-bottom: none; }
.guestlist-item-icon { width: calc(var(--u)*6); height: calc(var(--u)*6); flex-shrink: 0; }
.guestlist-item-name { font-size: calc(var(--u)*3.2); font-weight: 700; color: var(--text); }
.guestlist-item-age { font-size: calc(var(--u)*2.4); color: var(--text-muted); }
.guestlist-edit-btn { width: calc(var(--u)*7); height: calc(var(--u)*7); border-radius: 50%; background: var(--key-bg); border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.guestlist-edit-btn svg { width: 55%; height: 55%; }
.guestlist-add-btn { width: 100%; height: calc(var(--u)*9); border-radius: var(--radius-btn); border: none; background: var(--accent); color: #fff; font-size: calc(var(--u)*3); font-family: Arial, sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: calc(var(--u)*1.5); flex-shrink: 0; margin-top: calc(var(--u)*1); }
.guestlist-add-btn svg { width: calc(var(--u)*3.5); height: calc(var(--u)*3.5); }
.p2-orders-list { display: flex; flex-direction: column; gap: calc(var(--u)*1.5); width: 100%; }
.p2-order-modal { width: calc(var(--u)*62); align-items: stretch; }
.p2-order-modal .modal-title { text-align: left; padding-right: 0; font-size: calc(var(--u)*4); }
.p2-order-section { display: flex; flex-direction: column; gap: calc(var(--u)*1); width: 100%; }
.p2-order-row { display: flex; justify-content: space-between; gap: calc(var(--u)*2); font-size: calc(var(--u)*2.8); color: var(--text); width: 100%; }
.p2-order-divider { width: 100%; height: 1px; background: #f0eee9; }
.p2-order-summary { font-weight: 700; font-size: calc(var(--u)*3.2); align-items: center; }
.p2-order-status.paid { color: #16794a; }
.p2-order-status.pending { color: #b45309; }
.p2-order-actions { display: flex; flex-direction: column; gap: calc(var(--u)*1.5); margin-top: calc(var(--u)*3); width: 100%; }
.p2-order-actions .modal-btn { margin: 0; width: 100%; }

/* ===== PAGE 3 (Consent) ===== */
.p3-screen { flex-direction: column; overflow: hidden; }
.p3-header { flex-shrink: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
.p3-back { position: absolute; left: calc(var(--u)*3); top: calc(var(--u)*3); }
.p3-exit { position: absolute; right: calc(var(--u)*3); top: calc(var(--u)*3); }
.p3-title { font-size: calc(var(--u)*5); font-weight: 900; color: var(--text); text-align: center; margin-top: calc(var(--u)*4); width: var(--col-w); }
.p3-subtitle { font-size: calc(var(--u)*2.8); font-weight: 400; color: var(--text-muted); text-align: center; margin-top: calc(var(--u)*1.5); width: var(--col-w); }

.p3-content { flex: 1; overflow: hidden; display: flex; justify-content: center; margin-top: calc(var(--u)*3); }
.p3-inner { width: var(--col-w); display: flex; flex-direction: column; gap: calc(var(--u)*2); }

/* Пункты */
.p3-item { display: flex; align-items: flex-start; gap: calc(var(--u)*2); }
.p3-bullet { flex-shrink: 0; width: calc(var(--u)*1.5); height: calc(var(--u)*1.5); border-radius: 50%; background: var(--accent); margin-top: calc(var(--u)*1.2); }
.p3-item-text { font-size: calc(var(--u)*2.8); color: var(--text); line-height: 1.5; font-family: Arial, sans-serif; }
.p3-item-link { color: var(--accent); text-decoration: underline; cursor: pointer; }

.p3-footer { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u)*2); padding: calc(var(--u)*3) 0 calc(var(--u)*4); }
.p3-cb-row { width: var(--col-w); display: flex; align-items: flex-start; gap: calc(var(--u)*2.5); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.p3-cb { width: calc(var(--u)*6); height: calc(var(--u)*6); border-radius: calc(var(--u)*1.2); border: calc(var(--u)*0.4) solid var(--text-ph); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: calc(var(--u)*0.2); transition: background 0.15s, border-color 0.15s; }
.p3-cb.checked { background: var(--accent); border-color: var(--accent); }
.p3-cb svg { width: 65%; height: 65%; }
.p3-cb-label { font-size: calc(var(--u)*2.6); color: var(--text); line-height: 1.5; font-family: Arial, sans-serif; }
.p3-footer .action-btn { margin-top: 0; width: var(--col-w); }

/* Модалка */
.fulltext-modal {
  width: calc(var(--u)*64);
  height: calc(var(--h)*0.82);
  padding: calc(var(--u)*5) calc(var(--u)*4) 0;
  gap: 0;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.modal-close-circle {
  position: absolute; top: calc(var(--u)*2); right: calc(var(--u)*2);
  width: calc(var(--u)*7); height: calc(var(--u)*7);
  border-radius: 50%; background: #f0f0f5; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--u)*2.8); color: var(--text-muted); font-family: Arial, sans-serif;
  transition: transform 0.12s;
  z-index: 2; flex-shrink: 0;
}
.modal-close-circle:active { transform: scale(0.9); }

.fulltext-pages-wrap { flex: 1; overflow: hidden; position: relative; min-height: 0; }
.fulltext-pages { height: 100%; overflow: hidden; }
.fulltext-page { display: none; height: 100%; flex-direction: column; }
.fulltext-page.active { display: flex; }
.fulltext-page-content {
  flex: 1; overflow: hidden; position: relative;
  font-size: calc(var(--u)*2.3); color: var(--text); line-height: 1.6;
  font-family: Arial, sans-serif; white-space: pre-wrap;
}
.fulltext-page-inner {
  position: absolute; inset: 0;
  overflow-y: auto; padding: 0 calc(var(--u)*1) calc(var(--u)*12) 0;
  scrollbar-width: none;
}
.fulltext-page-inner::-webkit-scrollbar { display: none; }
.fulltext-doc-title { font-weight: 700; margin-bottom: calc(var(--u)*1.5); display: block; }

.fulltext-fade {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: calc(var(--u)*12);
  background: linear-gradient(transparent, #fff);
  pointer-events: none; transition: opacity 0.3s;
}
.fulltext-fade.hidden { opacity: 0; }

.fulltext-bottom { flex-shrink: 0; padding: calc(var(--u)*2) 0 calc(var(--u)*3); display: flex; flex-direction: column; gap: calc(var(--u)*1.5); width: 100%; align-self: stretch; }
.fulltext-progress { display: flex; gap: calc(var(--u)*1); justify-content: center; }
.fulltext-dot-tap { display: flex; align-items: center; justify-content: center; padding: calc(var(--u)*1.5) calc(var(--u)*0.8); cursor: pointer; }
.fulltext-dot { width: calc(var(--u)*2); height: calc(var(--u)*2); border-radius: 50%; background: #d0ccc8; transition: background 0.2s, width 0.2s; }
.fulltext-dot.active { background: var(--accent); width: calc(var(--u)*6); border-radius: calc(var(--u)*1); }
.fulltext-nav-btn { width: 100%; height: calc(var(--u)*9); border-radius: var(--radius-btn); border: none; background: var(--accent); color: #fff; font-size: calc(var(--u)*3.2); font-family: Arial, sans-serif; cursor: pointer; transition: transform 0.12s; box-sizing: border-box; }
.fulltext-nav-btn:active { transform: scale(0.97); }
.fulltext-nav-btn.close-btn { background: #f0f0f5; color: var(--text-muted); }

.modal.fulltext-modal { width: calc(var(--u)*64); align-items: stretch; }

/* ===== PAGE 4 (Tickets) ===== */
.p4-screen { flex-direction: column; overflow: hidden; }

.p4-header { flex-shrink: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
.p4-back { position: absolute; left: calc(var(--u)*3); top: calc(var(--u)*3); }
.p4-exit { position: absolute; right: calc(var(--u)*3); top: calc(var(--u)*3); }
.p4-title { font-size: calc(var(--u)*5); font-weight: 900; color: var(--text); text-align: center; margin-top: calc(var(--u)*4); width: var(--col-w); }
.p4-subtitle { font-size: calc(var(--u)*2.6); color: var(--text-muted); text-align: center; margin-top: calc(var(--u)*1); width: var(--col-w); }

.p4-content { flex: 1; overflow: hidden; display: flex; justify-content: center; margin-top: calc(var(--u)*3); }
.p4-inner { width: var(--col-w); display: flex; flex-direction: column; gap: calc(var(--u)*0); overflow-y: auto; scrollbar-width: none; }
.p4-inner::-webkit-scrollbar { display: none; }

.p4-footer { flex-shrink: 0; display: flex; justify-content: center; padding: calc(var(--u)*2) 0 calc(var(--u)*4); }
.p4-footer .action-btn { margin-top: 0; width: var(--col-w); }

/* ===== ТАРИФЫ ===== */
.tariff-row { display: flex; gap: calc(var(--u)*2); margin-bottom: calc(var(--u)*3); }
.tariff-btn {
  flex: 1; border-radius: calc(var(--u)*2);
  border: calc(var(--u)*0.5) solid #ccc8c0;
  box-sizing: border-box;
  background: #fff; cursor: pointer;
  padding: calc(var(--u)*2.5) calc(var(--u)*2);
  font-family: Arial, sans-serif;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.10);
  -webkit-tap-highlight-color: transparent;
}
.tariff-btn.selected {
  border-color: var(--accent);
  border-width: calc(var(--u)*0.5);
  background: var(--accent-5);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.tariff-btn:active { transform: scale(0.97); }
.tariff-name { font-size: calc(var(--u)*3.2); font-weight: 400; color: var(--text); margin-bottom: calc(var(--u)*2.2); }
.tariff-total { font-size: calc(var(--u)*4.5); font-weight: 400; color: var(--text-muted); }
.tariff-btn.selected .tariff-name { font-weight: 700; color: var(--text); }
.tariff-btn.selected .tariff-total { font-weight: 700; color: var(--text); }
.tariff-calc { width: 100%; font-size: calc(var(--u)*2.4); color: var(--text-muted); text-align: center; margin-bottom: calc(var(--u)*0.3); }

/* ===== ДОПЫ ===== */
.items-block { margin-bottom: calc(var(--u)*2); }
.item-row {
  display: flex; align-items: center;
  padding: calc(var(--u)*1.8) 0;
  border-bottom: 1px solid #f0eee9;
  gap: calc(var(--u)*2);
}
.item-row:last-child { border-bottom: none; }
.item-info { flex: 1; min-width: 0; }
.item-name { font-size: calc(var(--u)*2.8); font-weight: 400; color: var(--text); }
.item-price { font-size: calc(var(--u)*2.2); color: var(--text-muted); margin-top: calc(var(--u)*0.2); }

.counter { display: flex; align-items: center; gap: calc(var(--u)*1.5); flex-shrink: 0; }
.counter-btn {
  width: calc(var(--u)*5.5); height: calc(var(--u)*5.8); border-radius: calc(var(--u)*1);
  background: var(--key-bg); box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--u)*3.5); font-weight: 400; color: var(--text); cursor: pointer; border: none;
  font-family: Arial, sans-serif; line-height: 1;
  transition: transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.counter-btn:active { transform: scale(0.88); }
.counter-val { font-size: calc(var(--u)*3); font-weight: 400; color: var(--text-muted); min-width: calc(var(--u)*4); text-align: center; }
.item-total { font-size: calc(var(--u)*3); font-weight: 400; color: var(--text-muted); min-width: calc(var(--u)*10); text-align: right; flex-shrink: 0; }

/* ===== СКИДКА / ПРОМОКОД ===== */
.discount-row {
  display: flex; align-items: center;
  padding: calc(var(--u)*2) 0;
  border-bottom: 1px solid #f0eee9;
  cursor: pointer; gap: calc(var(--u)*2);
  -webkit-tap-highlight-color: transparent;
}
.discount-label { flex: 1; font-size: calc(var(--u)*2.8); font-weight: 400; color: var(--text); }
.discount-value { font-size: calc(var(--u)*3); font-weight: 400; color: var(--text-muted); }
.discount-value.applied { color: #c53030; }
.discount-arrow { color: var(--text-muted); display: flex; align-items: center; }
.discount-arrow svg { width: calc(var(--u)*3.5); height: calc(var(--u)*3.5); }

/* ===== МОДАЛКА СКИДКИ ===== */
.discount-modal .modal-btn, .promo-modal .modal-btn { height: calc(var(--u)*9); }
.discount-modal { width: calc(var(--u)*62); padding: calc(var(--u)*5) calc(var(--u)*4) calc(var(--u)*3); gap: calc(var(--u)*2); }
.radio-option {
  display: flex; align-items: center; gap: calc(var(--u)*2.5);
  padding: calc(var(--u)*2) calc(var(--u)*2);
  border-radius: calc(var(--u)*2); cursor: pointer;
  background: #fff; border: calc(var(--u)*0.4) solid #e8e4df;
  transition: border-color 0.12s, background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.radio-option.selected { border-color: var(--accent); background: rgba(100,105,130,0.06); }
.radio-circle {
  width: calc(var(--u)*5); height: calc(var(--u)*5); border-radius: 50%;
  border: calc(var(--u)*0.4) solid #ccc;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: border-color 0.12s;
}
.radio-circle.checked { border-color: var(--accent); }
.radio-dot { width: calc(var(--u)*2.5); height: calc(var(--u)*2.5); border-radius: 50%; background: var(--accent); }
.radio-label { font-size: calc(var(--u)*3); color: var(--text); font-weight: 400; flex: 1; }
.radio-pct { font-size: calc(var(--u)*2.8); color: var(--text-muted); }

/* ===== МОДАЛКА ПРОМОКОДА ===== */
.promo-modal { width: calc(var(--u)*62); padding: calc(var(--u)*5) calc(var(--u)*4) calc(var(--u)*3); gap: calc(var(--u)*2.5); }
.promo-display { font-size: calc(var(--u)*4.5); font-weight: 700; color: var(--accent); min-height: calc(var(--u)*7); padding: calc(var(--u)*1) 0; border-bottom: calc(var(--u)*0.4) solid var(--accent); width: 100%; }
.promo-cursor { display: inline-block; width: 2px; height: calc(var(--u)*4.5); background: var(--accent); vertical-align: middle; margin-left: 1px; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.promo-error { font-size: calc(var(--u)*2.6); color: #c53030; min-height: calc(var(--u)*3.5); }
.promo-alpha-kb { display: flex; flex-direction: column; gap: calc(var(--u)*1); }
.promo-alpha-row { display: flex; justify-content: center; gap: calc(var(--u)*0.8); }
.promo-alpha-key { width: calc(var(--u)*5.5); height: calc(var(--u)*5.8); border-radius: calc(var(--u)*1); background: var(--key-bg); display: flex; align-items: center; justify-content: center; font-size: calc(var(--u)*2.5); color: var(--text); cursor: pointer; border: none; user-select: none; transition: transform 0.1s; }
.promo-alpha-key:active { transform: scale(0.88); }
.promo-alpha-wide { width: calc(var(--u)*9); background: var(--key-aux-bg); color: #fff; }
.promo-alpha-wide svg { width: calc(var(--u)*3.5); height: calc(var(--u)*3.5); }
.promo-btn-row { display: flex; gap: calc(var(--u)*2); width: 100%; }

/* ===== PAGE 5 (Payment) ===== */
.p5-screen { flex-direction: column; overflow: hidden; --p5-gap: calc(var(--u)*3); }
.p5-header { flex-shrink: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
.p5-back { position: absolute; left: calc(var(--u)*3); top: calc(var(--u)*3); }

.p5-body {
  flex: 1; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  margin-top: calc(var(--u)*2);
}

/* ===== СОСТОЯНИЕ А: QR ===== */
.p5-stateA {
  width: var(--col-w);
  display: flex; flex-direction: column; align-items: center;
}
.p5-qr-wrap {
  width: calc(var(--col-w)*0.85);
  height: calc(var(--col-w)*0.85);
  background: #fff;
  border-radius: calc(var(--u)*2);
  padding: calc(var(--u)*1.5);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
.p5-qr-wrap img {
  width: 100%; height: 100%;
  image-rendering: pixelated;
}
/* Номер заказа под QR на стр. оплаты картой — легче и меньше, чем на page6 */
.p5-qr-code {
  margin-top: calc(var(--u)*1.5);
  font-size: calc(var(--u)*6);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: calc(var(--u)*0.3);
  line-height: 1;
  text-align: center;
}
.p5-qr-code-label {
  font-size: calc(var(--u)*2.2);
  color: var(--text-muted);
  font-weight: 400;
  display: block;
  margin-bottom: calc(var(--u)*0.3);
  letter-spacing: 0;
}
.p5-qr-timer {
  margin-top: calc(var(--u)*2);
  font-size: calc(var(--u)*2.4);
  color: var(--text-muted);
  text-align: center;
}
.p5-qr-timer-val { color: var(--text); font-weight: 700; }
.p5-qr-hint {
  margin-top: calc(var(--u)*1.5);
  font-size: calc(var(--u)*2.5);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}

.p5-cashier-link {
  margin-top: calc(var(--u)*2.5);
  background: #fff;
  border: calc(var(--u)*0.35) solid #e5e7eb;
  border-radius: calc(var(--u)*2.2);
  cursor: pointer;
  display: flex; align-items: center; gap: calc(var(--u)*1.5);
  padding: calc(var(--u)*1.7) calc(var(--u)*2.2);
  color: var(--text-muted);
  font-size: calc(var(--u)*2.6);
  font-family: Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}
.p5-cashier-link:active { opacity: 0.6; transform: scale(0.97); }
.p5-cashier-icon { display: flex; flex-shrink: 0; }
.p5-cashier-icon svg { width: calc(var(--u)*3.4); height: calc(var(--u)*3.4); display: block; }
.p5-cashier-label { white-space: nowrap; }
.p5-cashier-arrow { display: flex; flex-shrink: 0; opacity: 0.55; margin-left: calc(var(--u)*0.3); }
.p5-cashier-arrow svg { width: calc(var(--u)*3); height: calc(var(--u)*3); display: block; }

/* ===== СОСТОЯНИЕ Б: ошибка оплаты ===== */
.p5-stateB {
  width: var(--col-w);
  display: none; flex-direction: column; align-items: center;
  margin: auto 0;
}
.p5-fail-icon {
  width: calc(var(--u)*17); height: calc(var(--u)*17);
  border-radius: 50%;
  background: #fde8e8;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: calc(var(--u)*3.5);
  flex-shrink: 0;
}
.p5-fail-icon svg { width: 42%; height: 42%; }
.p5-fail-title {
  font-size: calc(var(--u)*4.4);
  font-weight: 900;
  color: var(--text);
  text-align: center;
  line-height: 1.25;
}
.p5-fail-desc {
  margin-top: calc(var(--u)*1.8);
  font-size: calc(var(--u)*2.6);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.45;
}
.p5-fail-actions {
  margin-top: calc(var(--u)*5.5);
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.p5-fail-actions .action-btn { margin-top: 0; }

/* ===== СОСТОЯНИЕ В: ожидание (через кассира) ===== */
.p5-stateC {
  width: var(--col-w);
  display: none; flex-direction: column; align-items: center;
  margin: auto 0; text-align: center;
}
.p5-cashier-icon-big {
  width: calc(var(--u)*17); height: calc(var(--u)*17);
  border-radius: 50%;
  background: var(--accent-5);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: calc(var(--u)*3.5);
  flex-shrink: 0;
}
.p5-cashier-icon-big svg { width: 42%; height: 42%; }

/* ===== PAGE 6 (Complete) ===== */
.p6-screen { flex-direction: column; align-items: center; overflow: hidden; }

.p6-header { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }

.p6-body {
  flex: 1; overflow: hidden;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.p6-code-card {
  background: var(--accent-light);
  border-radius: calc(var(--u)*4);
  padding: calc(var(--u)*4) calc(var(--u)*3) calc(var(--u)*4);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.p6-qr {
  width: calc(var(--col-w)*0.85);
  height: calc(var(--col-w)*0.85);
  background: #fff;
  border-radius: calc(var(--u)*2);
  padding: calc(var(--u)*1.5);
  margin-bottom: calc(var(--u)*3);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.p6-qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.p6-code {
  font-size: calc(var(--u)*10);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: calc(var(--u)*0.5);
  line-height: 1;
}
.p6-status {
  margin-top: calc(var(--u)*2);
  font-size: calc(var(--u)*2.8);
  font-weight: 700;
  color: var(--accent);
}
.p6-status--paid { color: #16794a; }
.p6-status--pending { color: #b45309; }

.p6-instruction {
  margin-top: calc(var(--u)*4);
  font-size: calc(var(--u)*2.8);
  color: var(--text);
  text-align: center;
  line-height: 1.5;
  width: var(--col-w);
}

.p6-home-btn {
  margin-top: calc(var(--u)*5);
  background: #fff;
  border: calc(var(--u)*0.3) solid #e5e7eb;
  border-radius: calc(var(--u)*2.2);
  padding: calc(var(--u)*2) calc(var(--u)*4);
  font-size: calc(var(--u)*2.6);
  font-family: Arial, sans-serif;
  color: var(--text-muted);
  cursor: pointer;
  display: none;
  align-items: center;
  gap: calc(var(--u)*1.5);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease;
}
.p6-home-btn:active { opacity: 0.6; }
.p6-home-btn-val { font-weight: 700; color: var(--text-muted); min-width: calc(var(--u)*7); display: inline-block; text-align: left; }

/* ===== LOADER ===== */
.kiosk-loader {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
}
.kiosk-loader-spinner {
  width: calc(var(--u)*10); height: calc(var(--u)*10);
  border: calc(var(--u)*0.8) solid #e5e7eb;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: kiosk-spin 0.7s linear infinite;
}
@keyframes kiosk-spin { to { transform: rotate(360deg); } }

/* ===== PAGE 5 extras ===== */
.p5-cashier-icon-big {
  width: calc(var(--u)*17); height: calc(var(--u)*17);
  border-radius: 50%; background: var(--accent-5);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: calc(var(--u)*3.5); flex-shrink: 0;
}
.p5-cashier-icon-big svg { width: 42%; height: 42%; }
.p5-stateC {
  width: var(--col-w); display: none; flex-direction: column; align-items: center;
  margin: auto 0; text-align: center;
}