/* The reference's TikTok family includes Cyrillic; Poppins does not.
   Use the already bundled TikTok glyphs only for missing Cyrillic characters. */
@font-face {
  font-family: Poppins;
  src: url("./assets/bb838488d1-TikTokSans_24pt_Semi.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0400-052F;
}
@font-face {
  font-family: Poppins;
  src: url("./assets/80ac42c421-TikTokSans_24pt_Semi.woff") format("woff");
  font-style: normal;
  font-weight: 500;
  unicode-range: U+0400-052F;
}
@font-face {
  font-family: Poppins;
  src: url("./assets/3b27411456-TikTokSans_24pt_Semi.woff") format("woff");
  font-style: normal;
  font-weight: 600;
  unicode-range: U+0400-052F;
}
@font-face {
  font-family: Poppins;
  src: url("./assets/d8a8a0c3ad-TikTokSans_24pt_Semi.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  unicode-range: U+0400-052F;
}
#training-info {
  box-sizing: border-box;
  width: min(600px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 48px 32px 32px;
  border: 0;
  border-radius: 24px;
  background: #eef0f2;
  color: #111520;
  font-family: TikTok, sans-serif;
}
#training-info::backdrop { background: rgb(17 21 32 / 60%); }
#training-info[open] { animation: training-info-in .38s cubic-bezier(.2,.7,.2,1) both; }
#training-info[open]::backdrop { animation: training-info-fade .38s ease both; }
#training-info.is-closing { animation: training-info-out .22s ease both; }
#training-info.is-closing::backdrop { animation: training-info-fade .22s ease reverse both; }
@keyframes training-info-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes training-info-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes training-info-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #training-info[open], #training-info[open]::backdrop, #training-info.is-closing, #training-info.is-closing::backdrop { animation: none; }
}
#rec1961920041 [data-elem-id="1772016869885000002"] a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#rec1961920041 [data-elem-id="1772016869885000002"] a:hover { opacity: .75; }
#training-info h2 { margin: 0 0 16px; font-size: 28px; line-height: 1.15; font-weight: 500; }
#training-info p { margin: 0 0 24px; font-size: 16px; line-height: 1.55; }
.training-info-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 32px TikTok, sans-serif;
  cursor: pointer;
}
.training-info-action {
  display: inline-block;
  border-radius: 6px;
  padding: 14px 18px;
  background: #111520;
  color: #fff !important;
  font-size: 15px;
  text-decoration: none;
}
#training-info :focus-visible { outline: 2px solid #ff7920; outline-offset: 4px; }

/* Квиз «Бесплатный тест-драйв» */
.training-quiz { display: grid; gap: 18px; margin: 0 0 8px; }
.training-quiz[hidden], #training-info a[hidden], .tq-error[hidden] { display: none !important; }
.tq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tq-field { display: grid; gap: 6px; font-size: 13px; color: #4b5563; }
.tq-field input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #cfd5dc; border-radius: 10px; background: #fff; color: #111520; font: 16px TikTok, sans-serif; }
.tq-field input:focus { border-color: #111520; outline: none; }
.tq-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.tq-group legend { padding: 0; margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: #111520; }
.tq-options { display: flex; flex-wrap: wrap; gap: 8px; }
.tq-options label { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.tq-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tq-options span { display: inline-block; padding: 10px 14px; border-radius: 100px; border: 1px solid #cfd5dc; background: #fff; font-size: 14px; line-height: 1.2; color: #111520; transition: background .12s, border-color .12s, color .12s; }
.tq-options label:hover span { border-color: #111520; }
.tq-options input:checked + span { background: #111520; border-color: #111520; color: #fff; }
.tq-options input:focus-visible + span { outline: 2px solid #ff7920; outline-offset: 2px; }
.tq-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: #4b5563; cursor: pointer; }
.tq-consent input { margin: 3px 0 0; width: 16px; height: 16px; flex: none; accent-color: #111520; }
.tq-error { margin: 0 !important; padding: 10px 14px; border-radius: 10px; background: #fde7ec; color: #a1123a; font-size: 14px !important; line-height: 1.4 !important; }
.tq-submit { border: 0; cursor: pointer; font-family: TikTok, sans-serif; justify-self: start; }
.tq-submit:disabled { opacity: .6; cursor: default; }
#training-info h2:focus { outline: none; }
@media (max-width: 560px) {
  #training-info { padding: 44px 20px 24px; }
  .tq-row { grid-template-columns: 1fr; }
  .tq-options span { font-size: 13px; padding: 9px 12px; }
}
.tq-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
