@font-face{
  font-family: 'Bebas Neue Cyrillic';
  src: url('assets/fonts/BebasNeueCyrillic.woff2') format('woff2'),
       url('assets/fonts/BebasNeueCyrillic.woff') format('woff'),
       url('assets/fonts/BebasNeueCyrillic.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*{ box-sizing: border-box; }
html,body{
  margin: 0;
  background: #00020b;
  overflow-x: hidden;
}
body{ font-family: 'Alumni Sans SC', sans-serif; }
img{
  max-width: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-touch-callout: none;
}

#header-fixed-wrapper{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  pointer-events: none;
  overflow: visible;
}
#header-fixed-inner{
  position: relative;
  width: 1905px;
  height: 195px;
  transform-origin: top left;
}
#header-fixed-inner .hit,
#header-fixed-inner .courses-dropdown{
  pointer-events: auto;
}

#canvas-wrapper{
  width: 100%;
  overflow: hidden;
  position: relative;
}
/* only when the min-scale floor below actually kicks in (narrow screens) —
   at the normal fit-to-width scale this stays overflow:hidden exactly like
   before, so nothing changes on desktop/wide tablets. */
#canvas-wrapper.is-clamped{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#canvas-wrapper.is-clamped::-webkit-scrollbar{ display: none; }
#canvas{
  position: relative;
  transform-origin: top left;
  background: #00020b;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -moz-user-select: none;
}
#canvas *{ -webkit-user-drag: none; }
.el{ position: absolute; }
.el-text{ white-space: pre; margin: 0; }
.el-img{ display: block; }

/* real form controls stay selectable/editable */
.form-field, .form-checkbox{
  -webkit-user-select: text;
  user-select: text;
}

/* interactive overlay controls: invisible hit-areas + real form fields */
.hit{
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 40;
  display: block;
}

.courses-dropdown{
  position: absolute;
  background: #1f1f20;
  border-radius: 26px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 340px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: .2s ease;
  z-index: 60;
}
.courses-dropdown.is-open{ opacity: 1; visibility: visible; transform: translateY(0); }
.courses-dropdown a,
.courses-dropdown .dd-item{
  color: #fff;
  text-decoration: none;
  font-family: 'Alumni Sans SC', sans-serif;
  font-weight: 600;
  font-size: 28px;
  padding: 14px 18px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  white-space: nowrap;
  cursor: default;
}
.courses-dropdown a{ cursor: pointer; }
.courses-dropdown a:hover,
.courses-dropdown .dd-item:hover{ background: #2a2a2b; color: #9e61ff; }
.courses-dropdown .dd-item{ position: relative; }
.courses-dropdown .dd-item .chevron{ opacity: .5; font-size: 24px; }
.courses-dropdown .dd-item:hover .chevron{ opacity: 1; }

.courses-dropdown .submenu{
  position: absolute;
  left: 100%;
  top: -18px;
  margin-left: 10px;
  background: #1f1f20;
  border-radius: 26px;
  padding: 18px;
  min-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: .15s ease;
}
.courses-dropdown .dd-item:hover .submenu{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.exam-indicator{
  position: absolute;
  background: #9e61ff;
  border-radius: 60px;
  z-index: 20;
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
  pointer-events: none;
}

.form-field{
  position: absolute;
  z-index: 40;
  background: #e2e2e2;
  border: none;
  border-radius: 60px;
  padding: 0 24px;
  font-family: 'Alumni Sans SC', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #000;
  outline: none;
}
.form-field::placeholder{ color: #8e8e8e; }
select.form-field{ appearance: none; }
select.form-field:invalid,
select.form-field.is-empty{ color: #8e8e8e; }

.form-submit{
  position: absolute;
  z-index: 40;
  background: linear-gradient(90deg, #9c06e0 0%, #9e61ff 50%, #9c06e0 100%);
  color: #fff;
  border: none;
  border-radius: 60px;
  font-family: 'Bebas Neue Cyrillic', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 50px;
  letter-spacing: -0.28px;
  cursor: pointer;
}
.form-submit:active{ transform: scale(.98); }

.form-checkbox{
  position: absolute;
  z-index: 40;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
  accent-color: #9e61ff;
}

.score-range{
  position: absolute;
  z-index: 50;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.score-range::-webkit-slider-runnable-track{ background: transparent; height: 100%; }
.score-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 56px; height: 56px;
  margin-top: -18px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
}
.score-range::-moz-range-track{ background: transparent; height: 100%; }
.score-range::-moz-range-thumb{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* score slider: reproduces the "шкала баллов" reference states —
   thin fill bar growing to the active tick, small ticks filled once
   passed, a big dot on the current tick. */
.score-fill{
  position: absolute;
  background: #4e065d;
  border-radius: 50px;
  z-index: 30;
  pointer-events: none;
  transition: width .2s ease;
}
.score-tick{
  position: absolute;
  background: #ffffff;
  border-radius: 50px;
  z-index: 31;
  pointer-events: none;
  transition: background .2s ease;
}
.score-tick.is-passed{ background: #4e065d; }
.calc-tooltip{
  position: absolute;
  z-index: 45;
  background: #d1d1d1;
  color: #4a4a4a;
  border-radius: 24px;
  padding: 16px 24px;
  font-family: 'Alumni Sans SC', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}
.calc-tooltip.is-open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filter-dropdown{
  position: absolute;
  background: #1d1d1d;
  color: #fff;
  border-radius: 28px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 300px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: .2s ease;
  z-index: 55;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.filter-dropdown.is-open{ opacity: 1; visibility: visible; transform: translateY(0); }
.filter-dropdown a{
  display: block;
  color: #fff;
  text-decoration: none;
  font-family: 'Bebas Neue Cyrillic', sans-serif;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.5px;
  padding: 14px 20px;
  border-radius: 18px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-dropdown a:hover, .filter-dropdown a.is-active{ background: #9e61ff; color: #fff; }

.tutor-bar-anim{
  transition: top .4s ease, height .4s ease;
}
.cart-item{ transition: transform .3s ease, opacity .2s ease; }
.cart-remove-btn{ transition: background .15s ease; }
.cart-remove-btn:hover{ background: rgba(220,220,220,1.0) !important; }
.score-dot{
  position: absolute;
  background: #4e065d;
  border-radius: 50%;
  z-index: 40;
  pointer-events: none;
  transition: left .2s ease, top .2s ease;
}

/* ---- cookie consent banner ---- */
.cookie-banner{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2000;
  background: #131314;
  border-top: 1px solid rgba(158,97,255,.35);
  box-shadow: 0 -16px 44px rgba(0,0,0,.5);
  padding: 22px 40px;
  transform: translateY(120%);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.cookie-banner.is-visible{ transform: translateY(0); }
.cookie-banner-inner{
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cookie-banner-text{
  flex: 1;
  min-width: 260px;
  margin: 0;
  color: #cfcfd2;
  font-family: 'Alumni Sans SC', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.45;
}
.cookie-banner-link{
  color: #b98bff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-banner-link:hover{ color: #9e61ff; }
.cookie-banner-accept{
  flex-shrink: 0;
  background: linear-gradient(90deg, #9c06e0 0%, #9e61ff 50%, #9c06e0 100%);
  color: #fff;
  border: none;
  border-radius: 60px;
  font-family: 'Bebas Neue Cyrillic', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: .3px;
  padding: 15px 46px;
  cursor: pointer;
}
.cookie-banner-accept:active{ transform: scale(.98); }
@media (max-width: 720px){
  .cookie-banner{ padding: 18px 20px; }
  .cookie-banner-inner{ gap: 14px; }
  .cookie-banner-text{ font-size: 18px; }
  .cookie-banner-accept{ width: 100%; text-align: center; padding: 15px 0; }
}