:root {
  color-scheme: light;
  --accent: #1a7a3e;
  --accent-bg: #e4f5ea;
  --border: #dcdcdc;
  --muted: #8a8a8a;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

/* Скрытое — скрыто всегда. Без этого .days {display:flex/grid} и .tables {display:flex}
   перебивали атрибут hidden: после брони на экране оставались дни и расписание
   (поймано на скриншоте 01.10.2026). */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  padding: 12px;
  background: #fafafa;
  color: #1c1c1c;
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Поля и кнопки сами шрифт страницы не наследуют: в движке Safari поля
   выходили шрифтом с засечками (поймано прогоном в WebKit 02.10.2026). */
input,
button {
  font-family: inherit;
}

h1 {
  font-size: 18px;
  margin: 0 0 4px;
}

.head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 12px;
}

.logo {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
}

.head-text {
  min-width: 0;
}

.venue {
  margin: 0;
  font-size: 13px;
  color: #555;
}

.venue a {
  color: var(--accent);
}

.how {
  margin: 20px 0 0;
  font-size: 13px;
  color: #444;
}

.how summary {
  cursor: pointer;
  color: var(--accent);
}

.how ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.how li {
  margin-bottom: 4px;
}

.my {
  margin: 0 0 14px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-size: 14px;
}

.my h2 {
  margin: 0 0 8px;
  font-size: 15px;
}

.my-row {
  padding: 8px 0;
  border-top: 1px solid #eee;
}

.my-row:first-of-type {
  border-top: none;
}

.my-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  align-items: center;
}

.btn-secondary,
.btn-danger,
.btn-primary {
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-danger {
  border-color: #b3261e;
  color: #b3261e;
}


.nearest {
  margin-top: 12px;
  font-size: 14px;
}

.price-note {
  margin: -8px 0 14px;
  color: #555;
  font-size: 14px;
}

.selection .selection-total {
  font-weight: 600;
}

.stale-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #fff6e0;
  border: 1px solid #e0b64a;
  border-radius: 10px;
  font-size: 13px;
  color: #6b4e00;
}

.days {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 14px;
  -webkit-overflow-scrolling: touch;
}

.day-btn {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}

.day-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

/* «Сегодня» / «Завтра» над датой; у остальных дней строка пустая — высота одна. */
.day-top {
  font-size: 11px;
  color: var(--muted);
  min-height: 1.2em;
}

.day-btn[aria-selected="true"] .day-top {
  color: #e4f5ea;
}

.two-tables {
  margin: -4px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

/* Круглый значок без рамки и подпись под ним — как кнопки в приложениях
   (владелец, 01.10.2026: «поизящней»). */
.share-btn {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: flex-start;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
}

.share-btn svg {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 10px;
  border-radius: 50%;
  background: var(--accent-bg);
  transition: background 0.15s;
}

.share-btn:hover svg,
.share-btn:active svg {
  background: #cdebd7;
}

.share-label {
  font-size: 11px;
  color: #555;
}

.nowrap {
  white-space: nowrap;
}

.share-note {
  font-size: 13px;
  color: var(--accent);
}

.day-btn.empty {
  color: #aaa;
  background: #f3f3f3;
}

.day-btn.request {
  border-style: dashed;
}

.day-btn[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.tables {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (min-width: 640px) {
  .tables {
    flex-direction: row;
  }
  .table-block {
    flex: 1;
  }
}

.table-block h2 {
  font-size: 15px;
  margin: 0 0 8px;
}

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
}

.slot-btn {
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}

.slot-btn:disabled {
  background: #f0f0f0;
  color: var(--muted);
  border-color: #eee;
  cursor: not-allowed;
}

.slot-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.loading,
.error {
  color: var(--muted);
}

.error {
  color: #b3261e;
}

/* Не прилипает к низу экрана: на телефоне закрывала получасы, которые клиент ещё
   выбирает (замечание владельца 01.10.2026). Стоит под расписанием. */
.selection {
  margin-top: 16px;
  padding: 12px;
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-size: 14px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.selection p {
  margin: 0 0 10px;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #333;
}

.form label.consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

/* Поля крупные: на iPhone текст в узких полях упирался в края (владелец, 01.10.2026),
   а шрифт меньше 16 px iOS увеличивает с прыжком страницы. */
.form input[type="text"],
.form input[type="tel"] {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
  background: #fff;
}

.form input[type="checkbox"] {
  margin-top: 1px;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.form button {
  min-height: 48px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.form button:disabled {
  background: var(--muted);
  cursor: not-allowed;
}

.form-message {
  margin: 4px 0 0;
  font-size: 13px;
}

.form-message.ok {
  color: var(--accent);
}

.form-message.error {
  color: #b3261e;
}

button {
  font: inherit;
}

.hint {
  margin: -4px 0 12px;
  font-size: 13px;
  color: #555;
}

.selection-line {
  white-space: pre-line;
}

.range-label {
  margin-left: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.confirmation {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-size: 15px;
}

.confirmation h2 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--accent);
}

.confirmation p {
  margin: 0 0 8px;
}

.confirmation p:last-child {
  margin-bottom: 0;
  color: #555;
  font-size: 13px;
}

.link-box {
  display: flex;
  gap: 8px;
  margin: 6px 0 10px;
}

.link-box input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
}

.confirmation .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
}

.confirmation a.btn-secondary {
  text-decoration: none;
  display: inline-block;
}

.consent .optional {
  color: #666;
}

/* Правила принимаются кнопкой — строка под ней мелко, но читаемо, ссылки видны. */
.accept-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #666;
}

.accept-note a {
  color: inherit;
  text-decoration: underline;
}

/* Вопрос о рассылке на экране подтверждения — отдельной плашкой, не мешает главному. */
.marketing-ask {
  margin: 16px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.marketing-ask p {
  margin: 0 0 10px;
}

/* ПК и планшет (владелец, 01.10.2026: на ПК было мелко и вытянуто по горизонтали).
   Колонка ограничена по ширине и стоит по центру, шрифт крупнее, лента дней —
   две строки по неделе вместо прокрутки. */
@media (min-width: 700px) {
  body {
    padding: 24px;
    font-size: 16px;
  }

  #app {
    max-width: 840px;
    margin: 0 auto;
  }

  .logo {
    width: 64px;
    height: 64px;
  }

  h1 {
    font-size: 24px;
  }

  .venue,
  .price-note,
  .how,
  .hint {
    font-size: 15px;
  }

  .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    overflow: visible;
    gap: 8px;
  }

  .day-btn {
    padding: 10px 6px;
    font-size: 14px;
  }

  .table-block h2 {
    font-size: 17px;
  }

  .slots {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
  }

  .slot-btn {
    padding: 10px 4px;
    font-size: 14px;
  }

  .selection,
  .confirmation,
  .my {
    font-size: 15px;
  }

  .selection .form,
  .confirmation {
    max-width: 560px;
  }

  .selection {
    padding: 16px 20px;
  }
}