/* Импорт шрифта */
@import url('https://fonts.googleapis.com/css2?family=Bad+Script&display=swap');

/* Переменные */
:root {
  --color-black-05: #2A2A2A;
  --color-black-06: #242424;
  --color-black-05-10: rgba(42, 42, 42, 0.10);
  
  --color-white-05: #EFEFEF;
  --color-white-05-10: rgba(239,239,239,0.10);
  --color-white-06: #CBCBCB;
  --color-white-04: #F2F2F2;
  --color-white-04-10: rgba(242,242,242,0.10);

  --color-pink-05: #EA038E;
  --color-pink-06: #C70379;
  
  --color-button-gray-hover: #656565;
  --color-menu-link: #A7A7A7;
  

  --color-border: var(--color-white-04);
  --color-text-black: var(--color-white-05);
  --color-text-black: var(--color-black-05);
  --color-overlay-light: var(--color-black-05-10);
  --color-accent: var(--color-pink-05);
  --color-accent-hover: var(--color-pink-06);
  --color-link-hover: var(--color-pink-06);
}

[data-bg="black-05-10"] {
    background: var(--color-black-05-10) !important;
}

/* Глобальные переопределения */
a {
    cursor: pointer;
}
a:hover {
    color: var(--color-link-hover) !important;
}

/* Шапка */
.uc-header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

.uc-header a:hover, .uc-footer a:hover {
    color: var(--color-menu-link) !important;
}

.header_body {
  background: var(--color-overlay-light);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Ручной текст в h1 */
div[data-handwritten="true"] h1 {
    position: relative;
}

div[data-handwritten="true"] h1 span {
  position: absolute;
  display: inline-block;
  transform: rotate(-4deg) translateY(0.08em) !important;
  transform-origin: center center;
  font-family: 'SunlessDay', cursive !important;
  line-height: 0.8 !important;
  letter-spacing: -0.06em !important;
  text-transform: none !important;
}

/* Отступы по краям в h2 */
@media (min-width: 640px) {
  div[data-tab-space="left"] h1 span, div[data-tab-space="left"] h2 span, div[data-tab-space="left"] h3 span {
    margin-left: -60px;
  }
  div[data-tab-space="right"] h1 span, div[data-tab-space="right"] h2 span, div[data-tab-space="right"] h3 span {
    margin-left: 95px;
  }
}

/* Квадратные скобки по бокам элементов */
*[data-brick="true"],
.t-input-block {
  position: relative;
  overflow: visible !important;
}

.t-input-block input {
  position: relative;
  z-index: 1;
}

/* общий стиль скобок */
*[data-brick="true"]::before,
*[data-brick="true"]::after,
form .t-input-group[data-field-type="nm"] .t-input-block::before,
form .t-input-group[data-field-type="ph"] .t-input-block::before,
form .t-input-group[data-field-type="nm"] .t-input-block::after,
form .t-input-group[data-field-type="ph"] .t-input-block::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15px;
  pointer-events: none;
  z-index: 20;
  background-color: var(--brick-stroke, --color-white-05);
  opacity: 0.5;
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 1H1V13.5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5V14H14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 15px 15px, 15px 15px;
  -webkit-mask-position: left top, left bottom;
  mask-image:
    url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 1H1V13.5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5V14H14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-repeat: no-repeat, no-repeat;
  mask-size: 15px 15px, 15px 15px;
  mask-position: left top, left bottom;
}

*[data-brick="true"]::before,
form .t-input-group[data-field-type="nm"] .t-input-block::before,
form .t-input-group[data-field-type="ph"] .t-input-block::before {
  left: 0;
}

*[data-brick="true"]::after,
form .t-input-group[data-field-type="nm"] .t-input-block::after,
form .t-input-group[data-field-type="ph"] .t-input-block::after {
  right: 0;
  transform: scaleX(-1);
}

/* цвет скобок для input */
.t-input-block {
  --brick-stroke: var(--color-black-05);
}

/* Инпуты */
.t-input-group_nm,
.t-input-group_ph {
    background-color: var(--color-black-05-10) !important;
}

.form-pink .t-input-group_nm,
.form-pink .t-input-group_ph {
    background-color: var(--color-black-05-10) !important;
}

/* цвета для обычных brick-элементов */
*[data-brick-color="light"] {
  --brick-stroke: var(--color-white-05);
}

*[data-brick-color="dark"] {
  --brick-stroke: var(--color-black-05);
}

/* чтобы контент не налезал на скобки */
.header_body > * {
  position: relative;
  z-index: 3;
}

/* Фон у кликабельных блоков с квадратными скобками */
*[data-clickable="true"]:hover .tn-molecule:first-child,
[data-branch-tab][data-active="true"] .tn-molecule:first-child {
    background: var(--color-pink-05) !important;
}
*[data-clickable="true"]:hover {
    cursor: pointer !important;
}

/* Бейдж */
.badge {
    background: var(--color-white-05-10);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 2px;
    border: 1px solid var(--color-white-04-10);
}
.badge-pink {
    background: var(--color-black-05-10);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 2px;
    border: 1px solid #A7A7A7;
}

/* Кнопка play на обложках видео */
[data-show-play="true"] {
  position: relative !important;
}

[data-show-play="true"] .tn-atom {
  position: relative !important;
}

[data-show-play="true"] .tn-atom::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-42%, -50%) !important;

  width: 0 !important;
  height: 0 !important;

  border-top: 14px solid transparent !important;
  border-bottom: 14px solid transparent !important;
  border-left: 22px solid var(--color-white-05) !important;

  pointer-events: none !important;
  z-index: 50 !important;
}
[data-show-play="true"]:hover .tn-atom::after {
    border-left: 22px solid #EA038E !important;
}

/* Показ 2-й картинки при наведении */
.two-images img:hover {
    opacity: 0;
}

/* Кнопки */
.button:hover .tn-molecule,
.t-submit:hover{
    cursor: pointer !important;
    background: var(--color-pink-06) !important;
}
.button[data-color="gray"]:hover .tn-molecule {
    cursor: pointer !important;
    background: var(--color-button-gray-hover) !important;
}