@font-face {
  font-family: Helveticaneuecyr;
  src: url("../fonts/HelveticaNeueCyr-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Helveticaneuecyr Roman;
  src: url("../fonts/HelveticaNeueCyr-Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Helveticaneuecyr;
  src: url("../fonts/HelveticaNeueCyr-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Helveticaneuecyr;
  src: url("../fonts/HelveticaNeueCyr-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

   :root {
  --_color---main: #111111;
  --_color---text: #f6f9fa;
  --_text---small: 16px;
  --height-large: 1.4em;
  --_text---ex-small: 14px;
  --_text---large: 40px;
  --height-exsmal: 1em;
  --_text---big-large: 72px;
  --_text---medium: 24px;
  --height-small: 1.1em;
  --_color---sub-text: #bfbfbf;
  --gray-3: whitesmoke;
  --height-medium: 1.3em;
  --_color---button: #cbaf9f;
  --_margins---section-exlarge: 120px;
  --_margins---section-small: 24px;
  --_margins---section-medium: 40px;
  --_margins---section-large: 80px;
  --_margins---ex-small: 16px;
  --_border-radius---button: 40px;
  --_color---btn-hover: #ce9975;
  --_margins---small: 20px;
  --_margins---exx-small: 8px;
  --_color---border: #3a3a3a;
  --bg: #111111;
  --_border-radius---medium: 16px;
  --_color---bg-block: #181818;
  --border: #3a3a3a;
  --black-2: #1e1e1e;
  --gray-6: #bfbfbf;
  --_border-radius---small: 8px;
  --orange: #ff4000;
  --white: white;
  --black: black;
  --btn: #0050b3;
  --purple: #722ed1;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helveticaneuecyr Roman', sans-serif;
    background-color: var(--bg);
    font-size: var(--_text---small);
    line-height: var(--height-medium);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: var(--_margins---section-medium);
    align-items: center;
    justify-content: center;
    color: var(--_color---sub-text);
    background-image: url(../images/img-calc.webp);
    background-position: 50% var(--_margins---section-medium);
    background-repeat: no-repeat;
    background-size: contain;
    font-weight: 400;
}

.quiz{
    padding: var(--_margins---ex-small);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--_margins---ex-small);
}

.quiz-container {
    background: var(--_color---bg-block);
    width: 100%;
    max-width: 800px;
    border-radius: var(--_border-radius---medium);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 550px;
    
}

/* Header & Progress Bar */
.quiz-header {
    background: var(--_color---bg-block);
    padding: var(--_margins---section-small) var(--_margins---section-medium);
    border-bottom: 1px solid var(--border);
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px; /* сохраняем, нет точной переменной */
}

.header-title {
    font-size: var(--_text---ex-small);
    
    color: var(--_color---sub-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.step-indicator {
    font-size: 12px; /* нет переменной */
    font-weight: 500;
    color: var(--bg);
    background: var(--_color---button); /* оставляем, нет замены */
    padding: 4px 12px;
    border-radius: 20px;
}

.progress-container {
    width: 100%;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--orange);
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 20%;
}

/* Form Content */
.quiz-form {
    flex: 1;
    padding: var(--_margins---section-medium);
    display: flex;
    flex-direction: column;
    justify-content: start;
    position: relative;
}

.step-content {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.step-content.active {
    display: block;
    opacity: 1;
}

.step-content.fade-out {
    opacity: 0;
}

.step-title {
    font-size: var(--_text---medium);
    font-weight: 400;
    margin-bottom: var(--_margins---section-small);
    line-height: var(--height-medium);
    color: var(--_color---text);
}

.step-hint {
    font-size: var(--_text---ex-small);
    color: var(--_color---sub-text);
    margin-bottom: var(--_margins---ex-small);
}

/* Option Cards */
.options-grid {
    display: flex;
    flex-direction: column;
    gap: var(--_margins---ex-small);
}

.options-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--_margins---ex-small);
}

.option-label {
    cursor: pointer;
    position: relative;
}

.option-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.option-card {
    padding: var(--_margins---section-small);
    border: 2px solid var(--border);
    border-radius: var(--_border-radius---medium);
    background: var(--_color---bg-block);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.option-card:hover {
    border-color: var(--border);
    background: var(--_color---main);
}

.option-label input[type="radio"]:checked + .option-card {
    border-color: var(--orange);
    background: var(--_color---bg-block); /* оставляем, нет точной замены */
}

.option-card-content {
    display: flex;
    flex-direction: column;
}

.option-title {
    font-size: var(--_text---small);
    color: var(--_color---sub-text);
    margin-bottom: 4px; /* нет переменной */
}

.option-subtitle {
    font-size: var(--_text---ex-small);
    color: var(--_color---sub-text);
}

/* Custom Radio Indicator */
.radio-indicator {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.radio-indicator-inner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--orange);
    display: none;
}

.option-label input[type="radio"]:checked + .option-card .radio-indicator-inner {
    display: block;
}

/* Recommendation Badge */
.recommendation-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: var(--purple); /* оставляем */
    color: var(--_color---text); /* оставляем */
    font-size: 12px;
    font-weight: 400;
    padding: 2px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.1px;
}

/* Platform Cards */
.platform-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    min-height: 160px;
}

.platform-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 700;
    overflow: hidden;
}

.platform-icon.wp {
    background: #dbeafe; /* оставляем */
    color: var(--btn);
}

.platform-icon.tilda {
    background: #fce7f3; /* оставляем */
    color: #db2777; /* оставляем */
}

.platform-icon.consult {
    
}

/* Checkbox Section */
.upsell-box {
    
    border: 1px solid var(--border); /* оставляем */
    border-radius: var(--_border-radius---medium);
    padding: var(--_margins---section-small);
}

.checkbox-label {
    position: relative;
    padding-left: 30px; /* место под кастомный чекбокс */
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: flex-start;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

/* Кастомный чекбокс */
.checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: var(--gray-3);
    border: 2px solid var(--gray-3);
    border-radius: var(--_border-radius---small); /* радиус */
    transition: background-color 0.2s, border-color 0.2s;
    box-sizing: border-box;
}

/* При наведении */
.checkbox-label:hover input ~ .checkmark {
    background-color: var(--_color---border);
    border-color: var(--_color---border);
}

/* Когда чекбокс отмечен */
.checkbox-label input:checked ~ .checkmark {
    background-color: var(--orange);
    border-color: var(--orange);
}

/* Галочка */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Показываем галочку при checked */
.checkbox-label input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-text {
    font-size: var(--_text---ex-small);
}

.checkbox-title {
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
    font-size: var(--_text---small);
}

.checkbox-subtitle {
    color: var(--_color---sub-text);
}

.ads-budget-container {
    display: none;
    margin-top: var(--_margins---ex-small);
    padding-top: var(--_margins---ex-small);
    border-top: 1px solid var(--border);
}

.ads-budget-container.visible {
    display: block;
}

.input-label {
    display: block;
    font-size: var(--_text---ex-small);
    font-weight: 500;
    color: var(--_color---sub-text);
    margin-bottom: var(--_margins---exx-small);
}

.input-wrapper {
    position: relative;
}

.input-currency {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--_color---sub-text);
    font-size: var(--_text---ex-small);
}

.input-currency-right {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--_color---sub-text);
    font-size: var(--_text---ex-small);
}

.text-input {
    width: 100%;
    padding: 12px; /* вертикаль оставляем, горизонталь 40px можно заменить на --_margins---section-medium? нет, не подходит */
    border: 1px solid var(--border);
    border-radius: var(--_border-radius---small);
    font-size: var(--_text---ex-small);
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--_color---bg-block);
    color: var(--_color---text);
}

.text-input:focus {
    outline: none;
    border-color: var(--btn);
    box-shadow: 0 0 0 3px rgba(0, 80, 179, 0.1);
}

.select-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--_border-radius---small);
    font-size: var(--_text---ex-small);
    font-family: inherit;
    background: var(--_color---bg-block);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: var(--_color---text);
}

.select-input:focus {
    outline: none;
    border-color: var(--btn);
    box-shadow: 0 0 0 3px rgba(0, 80, 179, 0.1);
}

/* Contact Fields */
.contact-fields {
    display: flex;
    flex-direction: column;
    gap: var(--_margins---ex-small);
    margin-bottom: var(--_margins---section-small);
}

.form-group {
    display: flex;
    flex-direction: column;
}

/* Footer Navigation */
.quiz-footer {
    background: var(--_color---bg-block);
    padding: var(--_margins---section-small) var(--_margins---section-medium);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn {
    padding: 12px 32px; /* вертикаль оставляем, горизонталь 32px нет переменной */
    font-size: var(--_text---small);
    border-radius: var(--_border-radius---small);
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-family: inherit;
}

.btn-prev {
    background: transparent;
    color: var(--_color---sub-text);
    padding: 12px var(--_margins---ex-small);
}

.btn-prev:hover {
    color: var(--_color---main);
    background: var(--_color---btn-hover);
}

.btn-next {
    background: var(--_color---button);
    color: var(--bg);
    
}

.btn-next:hover {
    background: var(--_color---btn-hover); /* оставляем, нет точной замены */
    
}

.btn-next:active {
    transform: scale(0.98);
}

.btn-submit {
    background: var(--_color---button); /* оставляем, нет переменной */
    color: var(--_color---main);
   
}

.btn-submit:hover {
    background: var(--_color---btn-hover); /* оставляем */
    
}

.btn-submit:active {
    transform: scale(0.98);
}

.btn:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

.btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-prev.hidden + .btn-next {
    margin-left: auto;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: none;
}

.spinner.visible {
    display: block;
}

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

.hidden {
    display: none !important;
}

/* Success Screen */
.success-screen {
    position: absolute;
    inset: 0;
    background: var(--_color---bg-block);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--_margins---section-medium);
    z-index: 10;
}

.success-screen.visible {
    display: flex;
}

.success-icon {
    width: 80px;
    height: 80px;
    background: var(--orange); /* оставляем */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--_margins---section-small);
}

.success-icon svg {
    width: 40px;
    height: 40px;
    color: var(--_color---main); /* оставляем */
}

.success-title {
    font-size: var(--_text---medium);
    font-weight: 700;
    margin-bottom: var(--_margins---exx-small);
}

.success-text {
    font-size: var(--_text---small);
    color: var(--_color---sub-text);
    margin-bottom: var(--_margins---section-small);
    max-width: 400px;
}

.success-link {
    color: var(--_color---button);
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    font-size: var(--_text---small);
    font-family: inherit;
}

.success-link:hover {
    color:var(--_color---btn-hover); /* оставляем */
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 640px) {
    .quiz-container {
        min-height: 72vh;
        border-radius: 0;
    }

    .quiz-header,
    .quiz-form,
    .quiz-footer {
        padding: var(--_margins---small);
    }

    .step-title {
        font-size: 20px;
    }

    .options-grid-3 {
        grid-template-columns: 1fr;
    }

    .platform-card {
        min-height: 120px;
    }
}