/* =====================================================
   SHARED STYLES — buy.marge.ru
   Общие переменные, компоненты, утилиты
   ===================================================== */

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
}

/* ===================== ПЕРЕМЕННЫЕ ===================== */
:root {
  /* Размерные переменные — доступны всем элементам, включая динамически
     добавленные в body модалки (idle, cancel-session, connectivity). */
  --h: min(100vh, calc(100vw * 140 / 90));
  --w: calc(var(--h) * 90 / 140);
  --u: calc(var(--h) / 140);
  --col-w: calc(var(--u) * 60);
  --header-h: calc(var(--u) * 18);
  --bottom-h: calc(var(--u) * 78);
  --top-h: calc(var(--h) - var(--bottom-h) - var(--header-h));
  /* Цветовые переменные */
  --accent: rgb(100, 105, 130);
  --accent-overlay: rgba(100, 105, 130, 0.5);
  --accent-light: rgba(100, 105, 130, 0.12);
  --bg: #f7f9fc;
  --text: #1a1917;
  --text-muted: #555560;
  --text-ph: rgb(190, 193, 210);
  --key-bg: #eef0f5;
  --key-aux-bg: rgb(180, 183, 200);
  --radius-btn: calc(var(--u) * 2.5);
  --radius-key: 50%;
}

/* ===================== ЭКРАН (9:14) ===================== */
.screen {
  width: var(--w);
  height: var(--h);
  background: var(--bg);
  display: flex;
  position: relative;
  overflow: hidden;
}

/* ===================== КОЛОНКИ (15-60-15) ===================== */
.col-left {
  width: calc(var(--u) * 15);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(var(--u) * 3);
  flex-shrink: 0;
}
.col-mid {
  width: var(--col-w);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.col-right {
  width: calc(var(--u) * 15);
  flex-shrink: 0;
}

/* ===================== ЗОНЫ СТРАНИЦЫ ===================== */
.top-area {
  height: var(--top-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--u) * 4) 0 calc(var(--u) * 5);
  overflow: hidden;
}
.bottom-area {
  height: var(--bottom-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: calc(var(--u) * 4);
}

/* ===================== КНОПКА НАЗАД ===================== */
.btn-back {
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.13);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-back:active { transform: scale(0.88); box-shadow: none; }
.btn-back svg { width: 45%; height: 45%; }

/* ===================== КНОПКА ДЕЙСТВИЯ (внизу) ===================== */
.action-btn {
  margin-top: calc(var(--u) * 4);
  width: var(--col-w);
  height: calc(var(--u) * 9);
  border-radius: var(--radius-btn);
  background: var(--accent);
  border: none;
  color: #fff;
  font-size: calc(var(--u) * 3.2);
  font-weight: 400;
  font-family: Arial, sans-serif;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 4px 12px rgba(100,105,130,0.35);
  -webkit-tap-highlight-color: transparent;
}
.action-btn.active { opacity: 1; pointer-events: auto; }
.action-btn.active:active { transform: scale(0.97); box-shadow: none; }
.action-btn.always-active { opacity: 1; pointer-events: auto; }

/* ===================== ЦИФРОВОЙ ПАД ===================== */
.numpad {
  margin-top: calc(var(--u) * 7);
  display: grid;
  grid-template-columns: repeat(3, calc(var(--u) * 12));
  grid-template-rows: repeat(4, calc(var(--u) * 12));
  column-gap: calc(var(--u) * 6);
  row-gap: calc(var(--u) * 2);
  flex-shrink: 0;
}
.key {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u) * 6);
  font-weight: 700;
  font-family: Arial, sans-serif;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  border: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.key:active { transform: scale(0.88); box-shadow: none; }
.key-aux {
  background: var(--key-aux-bg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.07);
  font-size: calc(var(--u) * 3.5);
  font-weight: 600;
  color: #fff;
  opacity: 0.25;
  pointer-events: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
}
.key-aux.enabled { opacity: 1; pointer-events: auto; }

/* ===================== БУКВЕННАЯ КЛАВИАТУРА ===================== */
.alpha-keyboard {
  margin-top: calc(var(--u) * 4);
  display: none;
  flex-direction: column;
  gap: calc(var(--u) * 1.5);
  flex-shrink: 0;
}
.alpha-keyboard.visible { display: flex; }
.alpha-row {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 1.2);
}
.alpha-key {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6.5);
  border-radius: calc(var(--u) * 1);
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u) * 2.8);
  font-weight: 400;
  font-family: Arial, sans-serif;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  border: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.alpha-key:active { transform: scale(0.88); box-shadow: none; }
.alpha-key-wide {
  width: calc(var(--u) * 10);
  font-size: calc(var(--u) * 2.2);
  background: var(--key-aux-bg);
  color: #fff;
}

/* ===================== ЛОГОТИП ===================== */
.logo { flex-shrink: 0; }
.logo svg { width: 100%; height: 100%; }

/* ===================== ЕДИНАЯ ШАПКА С ЛОГОТИПОМ ===================== */
/* Фиксированная зона: одинаковая высота и позиция на всех страницах,
   начиная со страницы 0 (состояние Б). Логотип = 80% ширины --col-w. */
.page-header-logo {
  height: var(--header-h);
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: calc(var(--u) * 3);
  padding-bottom: calc(var(--u) * 2);
  box-sizing: border-box;
  width: 100%;
}
.page-header-logo img {
  width: calc(var(--col-w) * 0.8);
  max-height: 100%;
  object-fit: contain;
}

/* ===================== ЗАГОЛОВОК И ПОДЗАГОЛОВОК ===================== */
.page-title {
  margin-top: calc(var(--u) * 4);
  font-size: calc(var(--u) * 5.5);
  font-weight: 900;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
  width: 100%;
}
.page-subtitle {
  margin-top: calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 2.6);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
  width: 100%;
}

/* ===================== МОДАЛЬНЫЕ ОКНА ===================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--accent-overlay);
  justify-content: center;
  align-items: center;
  z-index: 100;
}
.modal-overlay.visible { display: flex; }

.modal {
  background: #fff;
  border-radius: calc(var(--u) * 3);
  width: calc(var(--u) * 58);
  padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 2.5);
  box-shadow: 0 8px 32px rgba(100,105,130,0.25);
  position: relative;
}
.modal-close {
  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;
  font-weight: 400;
  transition: transform 0.12s ease;
}
.modal-close:active { transform: scale(0.9); }
.modal-icon {
  font-size: calc(var(--u) * 7);
  line-height: 1;
}
.modal-title {
  font-size: calc(var(--u) * 3.8);
  font-weight: 400;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
  width: 100%;
  padding-right: calc(var(--u) * 4);
}
.modal-btn {
  width: 100%;
  height: calc(var(--u) * 10);
  border-radius: var(--radius-btn);
  border: none;
  font-size: calc(var(--u) * 3);
  font-weight: 400;
  font-family: Arial, sans-serif;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(100,105,130,0.2);
}
.modal-btn:active { transform: scale(0.97); }
.modal-btn svg { width: calc(var(--u) * 4); height: calc(var(--u) * 4); flex-shrink: 0; }
.modal-btn-light {
  background: #eef0f5;
  color: var(--text);
  box-shadow: none;
}
.modal-btn-pair {
  display: flex;
  gap: calc(var(--u) * 3);
  width: 100%;
}
.modal-btn-pair .modal-btn { flex: 1; }
.modal-btn.cooldown {
  opacity: 0.45;
  pointer-events: none;
}
.cooldown-timer {
  font-size: calc(var(--u) * 2.4);
  opacity: 0.7;
}

/* =====================================================
   СТРАНИЦА 2 — Список гостей
   ===================================================== */

/* Скролл-зона списка */
.guests-scroll {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  padding: 0 calc(var(--u) * 2);
}
.guests-scroll::-webkit-scrollbar { display: none; }

/* Карточка гостя */
.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 ease;
  cursor: pointer;
  position: relative;
}
.guest-card.dimmed { opacity: 0.25; pointer-events: none; }
.guest-card.editing {
  box-shadow: 0 0 0 calc(var(--u) * 0.5) var(--accent), 0 4px 16px rgba(100,105,130,0.2);
  z-index: 10;
  background: #fff;
  opacity: 1;
  pointer-events: auto;
}

/* Чекбокс */
.guest-checkbox {
  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-checkbox.checked {
  background: var(--accent);
  border-color: var(--accent);
}
.guest-checkbox svg { width: 60%; height: 60%; }

/* Иконка пола/возраста */
.guest-icon {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guest-icon svg { width: 100%; height: 100%; }

/* Имя и возраст */
.guest-info { flex: 1; min-width: 0; }
.guest-name {
  font-size: calc(var(--u) * 3.2);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guest-age {
  font-size: calc(var(--u) * 2.4);
  color: var(--text-muted);
  margin-top: calc(var(--u) * 0.3);
}

/* Иконка редактирования */
.guest-edit-btn {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: var(--key-bg);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.guest-edit-btn:active { transform: scale(0.88); }
.guest-edit-btn svg { width: 55%; height: 55%; }

/* Кнопка добавить */
.guest-add {
  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: var(--accent-light);
  margin-bottom: calc(var(--u) * 1.5);
  cursor: pointer;
  border: none;
  width: 100%;
}
.guest-add-icon {
  width: calc(var(--u) * 5.5);
  height: calc(var(--u) * 5.5);
  border-radius: calc(var(--u) * 1.2);
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: calc(var(--u) * 4);
  line-height: 1;
}
.guest-add-label {
  font-size: calc(var(--u) * 3.2);
  color: var(--accent);
  font-weight: 400;
}

/* Затемнение списка при редактировании */
.guests-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--accent-overlay);
  z-index: 5;
}
.guests-overlay.visible { display: block; }

/* Иконки пола в режиме редактирования */
.gender-icons {
  display: flex;
  gap: calc(var(--u) * 2);
}
.gender-icon-btn {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  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;
  transition: border-color 0.15s, background 0.15s;
}
.gender-icon-btn.selected {
  border-color: var(--accent);
  background: var(--accent-light);
}
.gender-icon-btn svg { width: 60%; height: 60%; }

/* Кнопки удалить/сохранить в карточке */
.card-actions {
  display: flex;
  gap: calc(var(--u) * 1.5);
}
.card-action-btn {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.card-action-btn:active { transform: scale(0.88); }
.card-action-delete { background: #fde8e8; }
.card-action-save { background: var(--accent); }
.card-action-btn svg { width: 55%; height: 55%; }

/* Поле ввода в карточке */
.card-input {
  background: var(--key-bg);
  border: calc(var(--u) * 0.4) solid transparent;
  border-radius: calc(var(--u) * 1);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 3.2);
  font-family: Arial, sans-serif;
  color: var(--text);
  width: 100%;
  outline: none;
  cursor: pointer;
}
.card-input:focus { border-color: var(--accent); }

/* ===================== ИКОНКИ ПОЛА ===================== */
.gender-btn {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  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;
  transition: border-color 0.15s, background 0.15s;
  padding: calc(var(--u) * 1.2);
  flex-shrink: 0;
}
.gender-btn svg {
  width: 100%;
  height: 100%;
  fill: var(--text-ph);
  transition: fill 0.15s;
}
.gender-btn.selected {
  border-color: var(--accent);
  background: var(--accent-light);
}
.gender-btn.selected svg {
  fill: var(--accent);
}