/* Полоса с предложением заказать и окно квиза.

   Полоса подсвечена намеренно ярче остального: это единственное место на
   главной, где что-то предлагают купить, и оно должно читаться как
   предложение, а не как ещё один раздел. Но подсветка сдержанная — тем же
   золотом бренда, без красных плашек и мигания: сайт про спокойствие, и
   кричащая реклама в нём выглядит чужой. */

.ordstrip {
  position: relative;
  z-index: 55;
  background:
    linear-gradient(100deg, rgba(227,192,138,.16) 0%, rgba(227,192,138,.05) 46%, transparent 78%),
    linear-gradient(180deg, rgba(14,18,32,.98), rgba(10,13,24,.98));
  border-bottom: 1px solid rgba(227,192,138,.22);
}
.ordstrip-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 13px;
  padding-bottom: 13px;
}

.ordstrip-text { flex: 1 1 auto; min-width: 0; }
.ordstrip-kicker {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold, #E3C08A);
  margin-bottom: 3px;
}
.ordstrip-line {
  margin: 0;
  font-size: 15px; line-height: 1.45;
  color: var(--txt, #DCE4FA);
}
.ordstrip-line b { color: var(--head, #F2F5FF); font-weight: 700; }

.ordstrip-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px;
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #F0D4A2 0%, var(--gold, #E3C08A) 55%, #C9A468 100%);
  color: #14100A;
  font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(227,192,138,.85);
  transition: transform .16s, filter .16s;
}
.ordstrip-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.ordstrip-btn:focus-visible { outline: 2px solid var(--gold, #E3C08A); outline-offset: 3px; }
.ordstrip-price {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(20,16,10,.16);
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .ordstrip-wrap { flex-wrap: wrap; gap: 12px; }
  .ordstrip-line { font-size: 14px; }
  .ordstrip-btn { width: 100%; justify-content: center; }
}

/* ---------- окно квиза ---------- */
.qz { position: fixed; inset: 0; z-index: 200; }
.qz-scrim {
  position: absolute; inset: 0;
  background: rgba(3,4,10,.82);
  backdrop-filter: blur(4px);
}
.qz-box {
  position: relative;
  max-width: 560px;
  margin: 5vh auto;
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px 28px 26px;
  border: 1px solid var(--brd2, rgba(170,190,255,.26));
  border-radius: 20px;
  background: linear-gradient(180deg, #131A2C 0%, #0C1120 100%);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.95);
}
.qz-x {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--brd, rgba(170,190,255,.13));
  border-radius: 50%;
  background: transparent; color: var(--muted, #8590B4);
  cursor: pointer;
}
.qz-x:hover { color: var(--head, #F2F5FF); border-color: var(--brd2, rgba(170,190,255,.26)); }
.qz-x svg { width: 15px; height: 15px; }

.qz-kicker {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold, #E3C08A);
  margin-bottom: 8px;
}
.qz-title {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500; font-size: 27px; line-height: 1.15;
  color: var(--head, #F2F5FF);
}
.qz-lede {
  margin: 0 0 20px;
  font-size: 14.5px; line-height: 1.6;
  color: var(--muted, #8590B4);
  max-width: 46ch;
}

.qz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qz-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qz-field.qz-wide { grid-column: 1 / -1; }
.qz-field > span {
  font-size: 12.5px; font-weight: 600; color: var(--txt, #DCE4FA);
}
.qz-field > span i { color: var(--gold, #E3C08A); font-style: normal; }
.qz-field small { font-size: 11.5px; color: var(--muted, #8590B4); line-height: 1.4; }
.qz-field input,
.qz-field select,
.qz-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--brd, rgba(170,190,255,.13));
  border-radius: 11px;
  background: rgba(6,9,18,.75);
  color: var(--head, #F2F5FF);
  font-family: inherit; font-size: 14.5px;
}
.qz-field textarea { resize: vertical; line-height: 1.5; }
.qz-field input:focus,
.qz-field select:focus,
.qz-field textarea:focus {
  outline: none;
  border-color: var(--gold, #E3C08A);
  box-shadow: 0 0 0 3px rgba(227,192,138,.12);
}
/* Календарь и часы в тёмной теме: без этого иконка выбора даты чёрная
   на чёрном и выглядит отсутствующей. */
.qz-field input[type="date"]::-webkit-calendar-picker-indicator,
.qz-field input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.55);
  cursor: pointer;
}

.qz-err {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(239,68,68,.32);
  border-radius: 11px;
  background: rgba(239,68,68,.09);
  color: #fca5a5;
  font-size: 13.5px; line-height: 1.5;
}

.qz-go {
  width: 100%;
  margin-top: 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px;
  border: 0; border-radius: 13px;
  background: linear-gradient(180deg, #F0D4A2 0%, var(--gold, #E3C08A) 55%, #C9A468 100%);
  color: #14100A;
  font-family: inherit; font-size: 16px; font-weight: 700;
  cursor: pointer;
  transition: transform .16s, filter .16s;
}
.qz-go:hover { transform: translateY(-1px); filter: brightness(1.06); }
.qz-go svg { width: 18px; height: 18px; }
.qz-go[disabled] { opacity: .6; cursor: default; transform: none; }

.qz-note {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px; line-height: 1.5;
  color: var(--muted, #8590B4);
}

.qz-auth { margin-top: 4px; }
.qz-alt {
  display: block;
  margin-top: 10px;
  padding: 12px 18px;
  border: 1px solid var(--brd, rgba(170,190,255,.13));
  border-radius: 13px;
  text-align: center;
  color: var(--txt, #DCE4FA);
  text-decoration: none;
  font-size: 14.5px; font-weight: 600;
}
.qz-alt:hover { border-color: var(--brd2, rgba(170,190,255,.26)); color: var(--head, #F2F5FF); }
.qz-alt-quiet { border: 0; color: var(--muted, #8590B4); font-weight: 500; font-size: 13.5px; }

@media (max-width: 560px) {
  .qz-box { margin: 0; max-height: 100vh; min-height: 100vh; border-radius: 0; border: 0; }
  .qz-grid { grid-template-columns: 1fr; }
  .qz-title { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .ordstrip-btn, .qz-go { transition: none; }
}