/* vid.css — как выглядит Титан Мини. Одна страница, крупно, без украшений. */

:root {
  --fon: #f6f5f2;
  --karta: #ffffff;
  --tekst: #1b1b1a;
  --tishe: #6b6b66;
  --ramka: #ddddd6;
  --glavnyy: #1f6f4a;
  --glavnyy-temnee: #17573a;
  --beda: #a4302a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 16px 64px;
  background: var(--fon);
  color: var(--tekst);
  font: 17px/1.55 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.list {
  max-width: 620px;
  margin: 0 auto;
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 14px;
  padding: 28px 26px 30px;
}

h1 { font-size: 27px; line-height: 1.2; margin: 0 0 6px; }
h2 { font-size: 19px; margin: 30px 0 10px; }
.podzagolovok { color: var(--tishe); margin: 0 0 24px; }

label { display: block; margin: 16px 0 0; font-weight: 600; }
label .poyasnenie { display: block; font-weight: 400; color: var(--tishe); font-size: 15px; }

input[type="text"], input[type="tel"], input[type="time"], select {
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--ramka);
  border-radius: 9px;
}
input:focus, select:focus { outline: 2px solid var(--glavnyy); outline-offset: 1px; }

.dni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dni label {
  margin: 0;
  font-weight: 500;
  border: 1px solid var(--ramka);
  border-radius: 9px;
  padding: 8px 12px;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.dni input { margin-inline-end: 6px; }
.dni label:has(input:checked) { border-color: var(--glavnyy); background: #eaf3ee; }

.chasy { display: flex; gap: 12px; align-items: flex-end; }
.chasy > div { flex: 1; }

button {
  margin-top: 26px;
  width: 100%;
  padding: 14px;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--glavnyy);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
button:hover { background: var(--glavnyy-temnee); }
button[disabled] { opacity: .55; cursor: default; }

.beda {
  margin-top: 18px;
  padding: 11px 13px;
  border: 1px solid var(--beda);
  border-radius: 9px;
  color: var(--beda);
  background: #fdf3f2;
}

.ssylka-korobka {
  margin-top: 10px;
  padding: 12px 13px;
  background: #f2f4f2;
  border: 1px solid var(--ramka);
  border-radius: 9px;
  word-break: break-all;
  font-size: 15px;
}
.ssylka-korobka a { color: var(--glavnyy-temnee); }

.pusto {
  margin-top: 14px;
  padding: 26px 18px;
  text-align: center;
  color: var(--tishe);
  border: 1px dashed var(--ramka);
  border-radius: 11px;
}

textarea {
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--ramka);
  border-radius: 9px;
  resize: vertical;
}
textarea:focus { outline: 2px solid var(--glavnyy); outline-offset: 1px; }

.obrashchenie {
  border: 1px solid var(--ramka);
  border-radius: 11px;
  padding: 13px 15px;
  margin-top: 10px;
}
.obrashchenie .kto { font-weight: 600; }
.obrashchenie .tekst { margin: 6px 0 10px; white-space: pre-wrap; }
.obrashchenie .kogda { color: var(--tishe); font-size: 15px; }

.metka-klient {
  margin-inline-start: 8px;
  font-weight: 400;
  font-size: 14px;
  color: var(--tishe);
}

/* Строка времени. Пометка «не разобрано» — часть строки: она не всплывает,
   не гаснет и никуда не уезжает. Защита, переехавшая на глаз человека,
   держится только на этом. */
.obrashchenie .vremya {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f2f4f2;
  font-size: 15px;
}
.obrashchenie .vremya .imya { color: var(--tishe); display: inline-block; min-width: 78px; }
.obrashchenie .vremya .slovami { font-style: italic; }
.obrashchenie .vremya.bez-vremeni { background: #fdf6ec; border: 1px solid #e8d3ac; }
.obrashchenie .vremya .metka {
  display: block;
  margin-top: 3px;
  color: #8a5a12;
  font-size: 14px;
}

.svodka { margin: 0; }
.svodka div { padding: 9px 0; border-bottom: 1px solid var(--ramka); }
.svodka div:last-child { border-bottom: 0; }
.svodka .imya { color: var(--tishe); display: inline-block; min-width: 140px; }

.nizhe { margin-top: 26px; color: var(--tishe); font-size: 15px; }
.nizhe a { color: var(--tishe); }

/* Иврит и арабский пишутся справа налево, и страница разворачивается целиком
   (`dir=rtl` на корне документа) — поэтому отступы здесь названы НАЧАЛОМ и
   КОНЦОМ строки, а не левым и правым краем: у правостороннего письма они
   меняются местами сами.

   Числа стороны не меняют: телефон и часы работы посреди правостороннего
   письма остаются как написаны, иначе «09:00–19:00» показалось бы наоборот. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

[hidden] { display: none !important; }