.cvw {
  --cvw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

.cvw-split { display: block; }
.cvw-main__inner { max-width: 30rem; margin-left: auto; margin-right: auto; }
.cvw-aside { border-bottom: 1px solid var(--color-bg-darker); }
.cvw-aside__note { display: none; }
.cvw-main { padding-top: var(--space-md); }

@media (min-width: 64rem) {
  .cvw-split { display: grid; grid-template-columns: minmax(17rem, 32%) 1fr; align-items: stretch; }
  .cvw-aside {
    border-bottom: 0;
    border-right: 1px solid var(--color-bg-darker);
    background: var(--color-bg);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    padding: var(--space-lg);
    display: flex; flex-direction: column;
  }
  .cvw-aside__note { display: block; margin-top: auto; padding-top: var(--space-lg); }
  .cvw-main { padding: var(--space-lg); display: flex; align-items: center; }
  .cvw-main__inner { width: 100%; }
}

.cvw__step { display: none; }
.cvw__step.is-active { display: block; animation: cvw-in 0.45s var(--cvw-ease) both; }

@keyframes cvw-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cvw__step.is-active { animation: none; }
}

.cvw-progress { display: flex; align-items: center; gap: 0; width: 100%; }
.cvw-progress__label { display: none; }
.cvw-progress__dot {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 700;
  background: var(--color-bg-dark);
  color: var(--color-contrast-medium);
  transition: all 0.35s var(--cvw-ease);
}
.cvw-progress__line {
  flex: 1 1 auto; height: 2px;
  background: var(--color-bg-darker);
  position: relative; overflow: hidden;
}
.cvw-progress__line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--color-primary);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.5s var(--cvw-ease);
}
.cvw-progress__step.is-done .cvw-progress__dot,
.cvw-progress__step.is-active .cvw-progress__dot {
  background: var(--color-primary); color: var(--color-white);
}
.cvw-progress__step.is-done .cvw-progress__line::after { transform: scaleX(1); }
.cvw-progress__step { display: contents; }

@media (min-width: 64rem) {
  .cvw-progress { flex-direction: column; align-items: stretch; }
  .cvw-progress__step {
    display: grid;
    grid-template-columns: 26px 1fr;
    column-gap: 12px;
    align-items: center;
  }
  .cvw-progress__dot { grid-column: 1; grid-row: 1; }
  .cvw-progress__label {
    display: block; grid-column: 2; grid-row: 1;
    font-size: var(--text-sm); color: var(--color-contrast-medium);
    transition: color 0.3s var(--cvw-ease);
  }
  .cvw-progress__step.is-active .cvw-progress__label { color: var(--color-contrast-higher); font-weight: 600; }
  .cvw-progress__step.is-done .cvw-progress__label { color: var(--color-contrast-high); }
  .cvw-progress__line {
    grid-column: 1; grid-row: 2;
    width: 2px; height: 22px; margin: 3px auto; flex: 0 0 auto;
  }
  .cvw-progress__line::after { transform: scaleY(0); transform-origin: center top; }
  .cvw-progress__step.is-done .cvw-progress__line::after { transform: scaleY(1); }
}

.cvw-seg {
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--color-bg-dark);
  border-radius: 50px;
}
.cvw-seg__btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 0.5em 1.1em; border-radius: 50px;
  font-family: inherit; font-size: var(--text-sm);
  color: var(--color-contrast-medium);
  background: transparent;
  transition: all 0.3s var(--cvw-ease);
  white-space: nowrap;
}
.cvw-seg__btn:hover { color: var(--color-contrast-higher); }
.cvw-seg__btn.is-active {
  background: var(--color-bg);
  color: var(--color-contrast-higher);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.cvw-plate {
  display: flex; align-items: stretch;
  background: var(--color-white);
  border: 2px solid var(--color-contrast-higher);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.25s var(--cvw-ease), border-color 0.25s var(--cvw-ease);
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}
.cvw-plate:focus-within { box-shadow: 0 0 0 3px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.18); }
.cvw-plate.has-error { border-color: var(--color-error); }
.cvw-plate__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: inherit; font-weight: 700;
  font-size: 1.7rem; letter-spacing: 0.06em;
  text-transform: uppercase; text-align: center;
  padding: 0.35em 0.2em;
  color: var(--color-black);
}
.cvw-plate__input::placeholder { color: var(--color-contrast-lower); font-weight: 700; }
.cvw-plate__region {
  flex: 0 0 auto; width: 84px;
  border-left: 2px solid var(--color-contrast-higher);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 0.3em 0.3em 0.35em;
  background: var(--color-white);
}
.cvw-plate__region-input {
  width: 100%; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: inherit; font-weight: 700;
  font-size: 1.25rem; letter-spacing: 0.04em;
  text-align: center; padding: 0;
  color: var(--color-black);
}
.cvw-plate__region-input::placeholder { color: var(--color-contrast-lower); font-weight: 700; }
.cvw-plate__rus { display: flex; align-items: center; gap: 4px; }
.cvw-plate__region span { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; color: var(--color-black); }
.cvw-plate__flag { display: flex; width: 20px; height: 7px; border: 1px solid hsla(0,0%,0%,0.25); }
.cvw-plate__flag i { flex: 1; }
.cvw-plate__flag i:nth-child(1) { background: #fff; }
.cvw-plate__flag i:nth-child(2) { background: #0039a6; }
.cvw-plate__flag i:nth-child(3) { background: #d52b1e; }

.cvw-select { position: relative; display: block; }
.cvw-select select {
  appearance: none; -webkit-appearance: none;
  width: 100%; padding-right: 2.2em; cursor: pointer;
}
.cvw-select select:disabled { cursor: not-allowed; }
.cvw-select::after {
  content: ""; position: absolute; right: 0.9em; top: 50%;
  width: 7px; height: 7px; pointer-events: none;
  border-right: 2px solid var(--color-contrast-medium);
  border-bottom: 2px solid var(--color-contrast-medium);
  transform: translateY(-70%) rotate(45deg);
}

.cvw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cvw-chip { position: relative; }
.cvw-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.cvw-chip span {
  display: inline-block; cursor: pointer;
  padding: 0.5em 1em; border-radius: 50px;
  font-size: var(--text-sm);
  background: var(--color-bg-dark);
  color: var(--color-contrast-high);
  border: 1px solid transparent;
  transition: all 0.25s var(--cvw-ease);
  user-select: none;
}
.cvw-chip span:hover { background: var(--color-bg-darker); }
.cvw-chip input:checked + span {
  background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary);
}
.cvw-chip input:focus-visible + span { box-shadow: 0 0 0 3px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2); }

.cvw-teaser { position: relative; overflow: hidden; }
.cvw-teaser__value {
  filter: blur(11px);
  opacity: 0.55;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.cvw-lock {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-contrast-higher); color: var(--color-bg);
  flex: 0 0 auto;
}
.cvw-lock svg { width: 15px; height: 15px; fill: currentColor; }

.cvw-price {
  font-size: clamp(2.1rem, 7vw, 3.1rem);
  line-height: 1.05; font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cvw-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding: 0.62em 0; }
.cvw-row + .cvw-row { border-top: 1px solid var(--color-bg-darker); }
.cvw-row__dots { flex: 1 1 auto; border-bottom: 1px dotted var(--color-contrast-lower); transform: translateY(-0.25em); }

.cvw-spinner {
  width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.35);
  border-top-color: var(--color-white);
  animation: cvw-spin 0.7s linear infinite;
}
@keyframes cvw-spin { to { transform: rotate(360deg); } }
.cvw-btn-loading .cvw-btn-label { opacity: 0.6; }

.cvw-skeleton {
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--color-bg-dark) 25%, var(--color-bg-darker) 37%, var(--color-bg-dark) 63%);
  background-size: 400% 100%;
  animation: cvw-shimmer 1.3s ease infinite;
}
@keyframes cvw-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.cvw-link {
  color: var(--color-primary); cursor: pointer; font-family: inherit;
  text-decoration: underline; text-underline-offset: 2px;
  transition: opacity 0.2s var(--cvw-ease);
}
.cvw-link:hover { opacity: 0.7; }
.cvw-error { color: var(--color-error); }
.cvw-note { border-left: 2px solid var(--color-bg-darker); padding-left: 0.9em; }
.cvw-fade-in { animation: cvw-in 0.5s var(--cvw-ease) both; }

.cvw-picked {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8em;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--color-bg-dark); border: 0;
  border-radius: var(--radius-xl);
  padding: 0.6em 1.2em;
  font-family: inherit; color: inherit;
  transition: background 0.2s var(--cvw-ease);
  animation: cvw-in 0.35s var(--cvw-ease) both;
}
.cvw-picked:hover { background: var(--color-bg-darker); }
.cvw-picked__label { font-size: var(--text-xs); color: var(--color-contrast-medium); display: block; }
.cvw-picked__value { font-weight: 700; }
.cvw-picked__edit { font-size: var(--text-xs); color: var(--color-primary); flex: 0 0 auto; }

.cvw-list {
  max-height: 268px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--color-bg-darker);
  border-radius: var(--radius-md);
  animation: cvw-in 0.3s var(--cvw-ease) both;
}
.cvw-list__item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; font-family: inherit; font-size: inherit;
  color: var(--color-contrast-high);
  padding: 0.7em 0.9em;
  transition: background 0.15s var(--cvw-ease);
}
.cvw-list__item + .cvw-list__item { border-top: 1px solid var(--color-bg-dark); }
.cvw-list__item:hover, .cvw-list__item.is-focused { background: var(--color-bg-dark); color: var(--color-contrast-higher); }
.cvw-list__empty { padding: 1.1em 0.9em; font-size: var(--text-sm); color: var(--color-contrast-medium); text-align: center; }

.cvw-list--grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.cvw-list--grid .cvw-list__item { text-align: center; border-top: 0; padding: 0.75em 0.2em; }
.cvw-list--grid .cvw-list__item:nth-child(n+5) { border-top: 1px solid var(--color-bg-dark); }
.cvw-list--grid .cvw-list__item:not(:nth-child(4n)) { border-right: 1px solid var(--color-bg-dark); }

.cvw-list__skeleton { padding: 0.55em 0.9em; }
.cvw-list__skeleton i { display: block; height: 12px; border-radius: 50px;
  background: linear-gradient(90deg, var(--color-bg-dark) 25%, var(--color-bg-darker) 37%, var(--color-bg-dark) 63%);
  background-size: 400% 100%; animation: cvw-shimmer 1.3s ease infinite; }

.cvw-loader, .cvw-fail {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  border-radius: inherit;
  background: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.88);
  opacity: 0; visibility: hidden;
  transition: opacity 0.32s var(--cvw-ease), visibility 0.32s var(--cvw-ease);
}
.cvw-loader.is-on, .cvw-fail.is-on { opacity: 1; visibility: visible; }

.cvw-loader__spin {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid var(--color-bg-darker);
  border-top-color: var(--color-primary);
  animation: cvw-spin 0.7s linear infinite;
}

.cvw-fail__box { text-align: center; max-width: 22rem; padding: var(--space-md); }
.cvw-fail__icon {
  width: 56px; height: 56px; margin: 0 auto var(--space-sm);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--color-bg-dark); color: var(--color-primary);
}
.cvw-fail__icon svg { width: 28px; height: 28px; fill: currentColor; }
.cvw-fail__title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-xxxs); letter-spacing: -0.01em; }
.cvw-fail__text { font-size: var(--text-sm); color: var(--color-contrast-medium); margin-bottom: var(--space-md); }
.cvw-fail__box .btn { min-width: 12rem; }

@media (prefers-reduced-motion: reduce) {
  .cvw-loader, .cvw-fail { transition: none; }
  .cvw-loader__spin { animation-duration: 1.2s; }
}

.cvw, .cvw *:not(.btn){ border-radius:0; }
.cvw .btn{ border-radius: var(--btn-radius); }
.cvw .cvw-progress__dot, .cvw .cvw-lock, .cvw .cvw-spinner, .cvw .cvw-loader__spin, .cvw .cvw-fail__icon{ border-radius:50%; }

.cvw [data-consents]{ margin-bottom: var(--space-sm); }

.cvw-aside{ background: var(--color-primary) !important; border-color: transparent !important; }
.cvw-aside, .cvw-aside h2, .cvw-aside p, .cvw-aside .cvw-progress__label{ color: var(--color-white) !important; }
.cvw-aside .cvw-progress__dot{ background: hsla(var(--color-white-h),var(--color-white-s),var(--color-white-l),.22); color: var(--color-white); }
.cvw-aside .cvw-progress__step.is-active .cvw-progress__dot,
.cvw-aside .cvw-progress__step.is-done .cvw-progress__dot{ background: var(--color-white); color: var(--color-primary); }
.cvw-aside .cvw-progress__line{ background: hsla(var(--color-white-h),var(--color-white-s),var(--color-white-l),.28); }
.cvw-aside .cvw-progress__line::after{ background: var(--color-white); }

@media (max-width: 63.99rem){
  .cvw-split{ display:flex; flex-direction:column-reverse; }
}