/* Quiz */
.quiz-step[hidden] { display: none !important; }

.quiz-step {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
}

.quiz-progress {
   display: flex;
   align-items: center;
   gap: .75rem;
   margin-bottom: .25rem;
}

.quiz-progress__bar {
   flex: 1;
   height: 4px;
   background: #e8e8e8;
   border-radius: 2px;
   overflow: hidden;
}

.quiz-progress__fill {
   height: 100%;
   background: #c53030;
   border-radius: 2px;
   width: 16.67%;
   transition: width .4s ease;
}

.quiz-progress__label {
   font-size: .75rem;
   font-weight: 600;
   color: #aaa;
   white-space: nowrap;
}

.quiz-options {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: .625rem;
}

@media (max-width: 48rem) {
   .quiz-options { grid-template-columns: 1fr; }
}

.quiz-option {
   border: 1.5px solid #e0e0e0;
   border-radius: .75rem;
   padding: .875rem 1rem;
   text-align: left;
   font-size: .9375rem;
   font-weight: 500;
   color: #222;
   background: #fff;
   cursor: pointer;
   line-height: 1.3;
   transition: border-color .2s, background .2s, color .2s;
}

.quiz-option:hover { border-color: #c53030; }

.quiz-option.--selected {
   border-color: #c53030;
   background: #c53030;
   color: #fff;
}

.quiz-custom-input,
.quiz-text-input {
   margin-top: .25rem;
}

.quiz-nav {
   display: flex;
   align-items: center;
   gap: .75rem;
   margin-top: .25rem;
}

.button.--back-plain {
   background: transparent !important;
   color: #747474 !important;
   border: 1.5px solid #e0e0e0 !important;
}

.button.--back-plain:hover {
   border-color: #aaa !important;
}

.quiz-next:disabled {
   opacity: .4;
   cursor: not-allowed;
   pointer-events: none;
}

.form-consultation__bottom {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: .75rem;
}

/* Vacancy select */
.form-consultation__select {
   appearance: none;
   -webkit-appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23747474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 1rem center;
   padding-right: 2.5rem;
   cursor: pointer;
}

.form-consultation__select option[value=""] { color: #aaa; }

/* Vacancies */
.vacancies__container {
   margin: 0 auto;
   max-width: 102.25rem;
   padding-left: .9375rem;
   padding-right: .9375rem;
}

.page__vacancies {
   padding: 6.25rem 0;
}

.vacancies__title {
   margin-bottom: 2.5rem;
}

.vacancies__list {
   display: flex;
   flex-direction: column;
   gap: .75rem;
}

.vacancy-item {
   border: 1.5px solid #e8e8e8;
   border-radius: 1rem;
   overflow: hidden;
   background: #fff;
   transition: border-color .25s ease, box-shadow .25s ease;
}

.vacancy-item[open] {
   border-color: #c53030;
   box-shadow: 0 4px 24px rgba(197, 48, 48, .08);
}

.vacancy-item__head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 1.5rem 2rem;
   cursor: pointer;
   list-style: none;
   user-select: none;
}

.vacancy-item__head::-webkit-details-marker { display: none; }

.vacancy-item__info {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: .5rem 1.25rem;
   flex: 1;
}

.vacancy-item__title {
   font-size: 1.125rem;
   font-weight: 700;
   color: #222;
   line-height: 1.3;
}

.vacancy-item__salary {
   font-size: .875rem;
   font-weight: 600;
   color: #c53030;
   background: rgba(197, 48, 48, .08);
   padding: .25rem .75rem;
   border-radius: 2rem;
   white-space: nowrap;
}

.vacancy-item__arrow {
   flex-shrink: 0;
   width: 2.25rem;
   height: 2.25rem;
   border-radius: 50%;
   border: 1.5px solid #e8e8e8;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: border-color .25s, background .25s, transform .25s;
   position: relative;
}

.vacancy-item__arrow::before,
.vacancy-item__arrow::after {
   content: '';
   position: absolute;
   background: #747474;
   border-radius: 2px;
   transition: background .25s, transform .25s;
}

.vacancy-item__arrow::before {
   width: .625rem;
   height: 1.5px;
   transform: translateX(-2px) rotate(-45deg);
}

.vacancy-item__arrow::after {
   width: .625rem;
   height: 1.5px;
   transform: translateX(2px) rotate(45deg);
}

.vacancy-item[open] .vacancy-item__arrow {
   border-color: #c53030;
   background: #c53030;
   transform: rotate(180deg);
}

.vacancy-item[open] .vacancy-item__arrow::before,
.vacancy-item[open] .vacancy-item__arrow::after {
   background: #fff;
}

.vacancy-item__body {
   padding: 0 2rem 2rem;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

.vacancy-item__section {
   display: flex;
   flex-direction: column;
   gap: .625rem;
}

.vacancy-item__section-title {
   font-size: .875rem;
   font-weight: 700;
   color: #222;
   text-transform: uppercase;
   letter-spacing: .04em;
}

.vacancy-item__list {
   display: flex;
   flex-direction: column;
   gap: .375rem;
   padding-left: 1.25rem;
}

.vacancy-item__list li {
   list-style: disc;
   font-size: 1rem;
   color: #747474;
   line-height: 1.5;
}

.vacancy-item__button {
   align-self: flex-start;
   margin-top: .5rem;
}

@media (max-width: 48rem) {
   .page__vacancies { padding: 3.75rem 0; }
   .vacancy-item__head { padding: 1.25rem; }
   .vacancy-item__body { padding: 0 1.25rem 1.5rem; }
   .vacancy-item__title { font-size: 1rem; }
}