/* Кастомная гугл-капча — демо
   Стили перенесены как есть с daytag.ru: reCAPTCHA v2 остаётся настоящей,
   поверх неё лежит рисованный слой.

   Как это устроено: сам виджет — чужой iframe, его нельзя перекрасить изнутри.
   Поэтому он накрывается белой подложкой, а сверху рисуется своё — кривой
   квадратик, надпись, дуга ожидания, галочка и стикер вместо логотипа. Нажатия
   проходят сквозь слои: у всех них pointer-events: none, клик попадает в
   настоящий чекбокс.

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

.captcha {
  --paper:      #f2f0e8;
  --sheet:      #ffffff;
  --ink:        #1c1b19;
  --ink-soft:   #6b675f;
  --ink-faint:  #a9a59b;
  --green:      #2f7d4f;
  --green-deep: #235f3c;
  --miss:       #b8402e;
  --hand: "Caveat", "Segoe Script", "Bradley Hand", cursive;
}








/* Без карточки: содержимое лежит прямо на бумажном фоне. */






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








/* Подпись НАД капчей: стрелка переворачивается и смотрит вниз, на то, что под
   ней. Поворот стоит снаружи переворота — внутри него наклон читался бы
   зеркально. */
.mirror--top { margin: 6px 0 2px; }
.mirror--top .mirror__arrow { transform: translateY(3px) rotate(12deg) scaleY(-1); }
.mirror--top .mirror__text { transform: translateY(-5px); }

/* Подпись ПОД капчей: стрелку не переворачиваем — в исходном виде она уже
   смотрит вверх, на капчу над собой. */
.mirror:not(.mirror--top) .mirror__text { transform: translate(-5px, 4px); }



/* --------------------------------------------------- перенесено с daytag */

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/caveat-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/caveat-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The challenge only appears once the credentials pass, so it needs room but
   must not shift the card while hidden. */
/* Left-aligned with the inputs above it, not centred in the card. */
/* Top margin must exceed the field's own 16px, otherwise the two collapse and
   the block does not move. The 0.6px asymmetry compensates for the tilted
   input and button, so the two visible gaps come out equal. */
.captcha { margin: 20px 0 20.6px; min-height: 80px; display: flex; justify-content: flex-start; }

/* The widget itself is a cross-origin iframe, so its grey border cannot be
   restyled - it is clipped away instead, and this wrapper draws the same
   hand-drawn contour the inputs use. */
/* Sized so its content box is exactly the 304x78 widget. Nothing overflows, so
   no clipping is needed - and with no `overflow: hidden` the frame can no
   longer shave its own rounded corners. */
.captcha__frame {
  position: relative;
  /* Never let flex shrink this: the widget inside is a fixed 304px, so a
     squeezed frame pushes it out past the corners. Narrow screens scale the
     whole frame down instead, below. */
  flex: 0 0 auto;
  /* Fluid instead of scaled. Any transform on the element that owns Google's
     cross-origin iframe stops the browser delivering a tap into it - measured:
     with a rotate or a scale the press is never dispatched, with none it lands
     and focus moves into the widget. That is why the checkbox was dead in
     Chrome on Android. So the frame narrows rather than shrinks, and the fixed
     304px widget is clipped on its right - the part our cover and sticker
     already hide anyway. The checkbox sits at the left and stays whole. */
  width: min(306px, 100%);
  height: 80px;
  background: var(--sheet);
  border: 0;
  border-radius: 205px 18px 235px 16px / 16px 225px 18px 210px;
}

/* The contour is a layer of its own, painted after every overlay inside the
   frame. Drawn as a plain border it sat *under* the white cover, which reaches
   further into the corners than the rounded edge does and rubbed the stroke
   away there - the frame looked snipped at all four corners. */
/* The tilt lives here, on the drawn contour, and nowhere else.

   It used to sit on .captcha__frame - which holds Google's cross-origin iframe.
   Chromium will not deliver a press into a frame whose owner carries a rotation:
   it cannot hit-test the rotated box against the out-of-process frame, so the
   tap is dropped and the checkbox simply never responds. That is what made it
   dead in Chrome on Android. This layer takes no pointer events and contains no
   frame, so it can lean as much as it likes. */
.captcha__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--ink);
  border-radius: inherit;
  transform: rotate(-0.35deg);
  pointer-events: none;
}

/* Pulled in by a pixel on every side so the iframe's own frame falls outside. */
.captcha__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.captcha__clip > #captcha-widget {
  position: absolute;
  top: 0;
  left: 0;
}

/* Google's checkbox and label live inside the iframe and cannot be restyled, so
   they are covered and redrawn. Clicks pass through to the real control. */
/* Covers the whole widget, so nothing of Google's own chrome shows through -
   neither the spinner while it verifies nor the stock logo. Everything visible
   is drawn below. */
/* Square on purpose: a rounded cover leaves the widget's own grey showing in
   the corners. It spills past the contour onto the card, which is the same
   white, so the overhang is invisible. */
.captcha__cover {
  position: absolute;
  inset: 0;
  /* Повторяет контур рамки: без этого белый прямоугольник подложки торчал за
     скруглениями, и на бумажном фоне были видны углы спрятанного виджета. */
  border-radius: inherit;
  /* Pure white, not Google's #f9f9f9: the sticker carries an opaque white
     square, and on an off-white ground it showed as a visible box. */
  background: #fff;
  pointer-events: none;
}

.captcha__box {
  position: absolute;
  left: 15px;
  /* Чуть ниже, чем на daytag: 22px -> 25px. */
  top: 25px;
  width: 31px;
  height: 31px;
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 12px 3px 10px 4px / 4px 10px 3px 12px;
  pointer-events: none;
  /* The tick deliberately runs past the square. */
  overflow: visible;
}

/* The widget is a cross-origin iframe: its own spinner is hidden under our
   cover, so pressing the box produced no visible response at all until the
   verdict came back. The square takes a short press, then a drawn arc turns
   while the answer is on its way. */
.captcha__spin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 21px;
  height: 21px;
  margin: -10.5px 0 0 -10.5px;
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 2.1;
  stroke-linecap: round;
  opacity: 0;
  pointer-events: none;
}

.captcha__frame.is-pending .captcha__spin {
  opacity: 1;
  animation: captcha-spin .75s linear infinite;
}

@keyframes captcha-spin { to { transform: rotate(360deg); } }

.captcha__frame.is-pending .captcha__box {
  animation: captcha-press .2s ease-out;
}

@keyframes captcha-press {
  40% { transform: scale(0.88); }
  100% { transform: scale(1); }
}

/* Answered: the arc goes before the tick is drawn. */
.captcha__frame.is-solved .captcha__spin {
  opacity: 0;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .captcha__frame.is-pending .captcha__spin { animation: none; }
  .captcha__frame.is-pending .captcha__box { animation: none; }
}

/* Drawn like a pen stroke: the line paints itself on, and rewinds the same way
   when the challenge is reset. */
.captcha__tick {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 38px;
  height: 30px;
  overflow: visible;
  fill: none;
  stroke: var(--green);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* The dash length is animated rather than the offset. Opacity is toggled too:
   a zero-length dash with a round cap still paints a dot, which showed up as a
   green speck in the empty box. */
.captcha__tick path {
  stroke-dasharray: 0 2;
  opacity: 0;
  transition: stroke-dasharray .5s ease-out, opacity .08s linear .42s;
}

.captcha__frame.is-solved .captcha__tick path {
  stroke-dasharray: 1 2;
  opacity: 1;
  transition: stroke-dasharray .5s ease-out, opacity .08s linear;
}

.captcha__label {
  position: absolute;
  left: 54px;
  top: 20px;
  width: 150px;
  height: 38px;
  display: flex;
  align-items: center;
  background: #fff;
  font-family: var(--hand);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: .01em;
  pointer-events: none;
}

/* Stowed rather than display:none - reCAPTCHA needs a real box to render into,
   so it is parked off-screen and pre-rendered before anyone needs it. */
.captcha.is-stowed {
  position: absolute;
  left: -10000px;
  top: 0;
  margin: 0;
}

/* The stock badge is hidden with the rest of the widget, so it is redrawn here.
   Google's terms require the branding to stay visible, hence the mark, the
   name and the policy links. */
.captcha__logo {
  position: absolute;
  right: 10px;
  /* Sits a little above centre in the 76px-tall widget. */
  top: 50%;
  transform: translateY(-71%);
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: none;
  /* Multiply drops the sticker's white backing entirely against the white
     ground, so no square shows even where alpha WebM is unsupported. */
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Демо показывает капчу сразу, без ожидания ввода. */
.captcha { margin-top: 4px; }