.calculator {
    max-width: 79.92vw;
    margin: 0 auto;
    background-color: var(--white);
    border-radius: 1.066vw;
    box-shadow: 0 0.444vw 2.22vw rgba(0, 0, 0, 0.3);
    padding: 2.22vw;
    position: relative;
}

.calcheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.664vw;
    padding-bottom: 1.332vw;
    border-bottom: 0.089vw solid var(--bcgreen);
}

.calcheaderLeft {
    display: flex;
    gap: 0.666vw;
    border-radius: 0.888vw;
    background-color: var(--eco1);
    padding: 0.444vw;
    width: auto;
    min-width: fit-content;
    flex-shrink: 0;
    transition: width 0.3s ease;
}

.calcheaderLeft.single-button {
    width: 4.44vw;
}

.calcheaderLeft.double-button {
    width: 9.33vw;
}

#btn-right1{
    margin-left: 4.218vw;
}

#btn-left3{
    margin-right: 4.218vw;
}

.btn-left, .btn-right {
    background: var(--eco3);
    border: none;
    border-radius: 0.355vw;
    width: 3.552vw;
    height: 3.552vw;
    transition: all 0.3s ease;
    box-shadow: 0 1.776vw 3.552vw rgba(47, 73, 18, 0.2);
    flex-shrink: 0;
}

.btn-left:hover, .btn-right:hover {
    box-shadow: 0 2.664vw 5.328vw rgba(47, 73, 18, 0.3);
    background: var(--eco2);
}

.btn-left:hover{
    transform: translateX(-0.4vw);
}

.btn-right:hover{
    transform: translateX(0.4vw);
}

.btn-left:active, .btn-right:active {
    transform: translateY(0);
    box-shadow: 0 0.4vw 0.8vw rgba(47, 73, 18, 0.3);
}

.btn-left i, .btn-right i {
    color: var(--eco1);
    font-size: 1.332vw;
    transition: all 0.3s ease;
}

.btn-left:hover i, .btn-right:hover i {
    transform: scale(1.1);
    color: var(--eco3);
}

.btn-short {
    background-color: var(--eco5);
    color: var(--white);
    padding: 0.888vw 1.776vw;
    border: none;
    transition: all 0.3s ease;
    margin-left: 1.332vw;
    border-radius: 0.533vw;
    font-size: 1.332vw;
    flex-shrink: 0;
    white-space: nowrap;
}

.btn-short:hover {
    background-color: #fafafa;
    color: var(--eco5);
    box-shadow: 0 0 0 0.178vw rgb(127, 74, 44);
}

.btn-restart {
    background-color: var(--eco3);
    color: var(--white);
    padding: 0.888vw 1.776vw;
    border: none;
    transition: all 0.3s ease;
    margin-left: 1.332vw;
    border-radius: 0.533vw;
    font-size: 1.332vw;
    flex-shrink: 0;
    white-space: nowrap;
}

.btn-restart:hover {
    background-color: #fafafa;
    color: var(--eco3);
    box-shadow: 0 0 0 0.178vw rgb(152, 196, 50);
}

.category-title {
    text-align: center;
    color: var(--green);
    margin: 15vmin 0 6vmin;
    font-size: 4.8vmin;
    border-bottom: 0.4vmin solid var(--eco3);
    padding-bottom: 3vmin;
}

.question-number {
    font-size: 2.8vmin;
    color: var(--eco5);
    margin-bottom: 2vmin;
}

.question-container{
    margin-bottom: 10vmin;
}

.question {
    font-size: 3.6vmin;
    margin-bottom: 2vmin;
    color: var(--eco1);
}

.options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4vmin;
    margin-bottom: 5vmin;
}

.noAnswerOptions {
    display: flex;
    gap: 0.888vw;
    margin-bottom: 2.22vw;
}

.option, .noAnswerOption {
    padding: 1.332vw;
    background-color: var(--light-gray);
    border: 0.178vw solid transparent;
    border-radius: 0.711vw;
    cursor: pointer;
    transition: all 0.2s ease;
}

.option:hover, .noAnswerOption:hover {
    background-color: var(--bcgreen);
    border-color: var(--eco3);
}

.option.selected, .noAnswerOption.noAnswerSelected {
    background-color: var(--eco4);
    border-color: var(--eco2);
    color: var(--eco1);
}

.input-group {
    margin-bottom: 2vmin;
}

.input-label {
    display: block;
    margin-bottom: 1.6vmin;
    font-weight: 500;
}

.input-field, .input-field2 {
    width: 100%;
    padding: 2.4vmin;
    border: 0.2vmin solid #ddd;
    border-radius: 1.2vmin;
    font-size: 3.2vmin;
}

.input-field:focus {
    border-color: var(--eco3);
    outline: none;
    box-shadow: 0 0 0 0.6vmin rgba(152, 196, 50, 0.2);
}

.btn-next1, .btn-next2 {
    background: var(--eco3);
    color: #000;
    border: none;
    padding: 3vmin 8vmin; 
    border-radius: 10vmin; 
    font-size: 3.2vmin;
    cursor: pointer;
    transition: 0.4s ease-in-out;
    box-shadow: 0 0.8vmin 3vmin rgba(85, 127, 8, 0.3); 
    margin-bottom: 4vmin;
}

.btn-next1:hover, .btn-next2:hover {
    background: var(--eco5);
    color: var(--eco3);
    box-shadow: 0 1.2vmin 4vmin rgba(127, 74, 44, 0.6); 
}

.btn-submit {
    background: var(--eco3);
    color: #000;
    border: none;
    padding: 3.75vmin 10vmin; 
    border-radius: 12.5vmin; 
    font-size: 4vmin;
    cursor: pointer;
    transition: 0.4s ease-in-out;
    box-shadow: 0 1vmin 3.75vmin rgba(85, 127, 8, 0.3); 
    margin-bottom: 5vmin;
}

.btn-submit:hover {
    background: var(--eco5);
    color: var(--eco3);
    box-shadow: 0 1.2vmin 4vmin rgba(127, 74, 44, 0.6); 
}

.results {
    text-align: center;
    padding: 6vmin;
}

.results h2 {
    color: var(--green);
    margin-bottom: 4vmin;
}

.score {
    font-size: 9.6vmin;
    font-weight: bold;
    color: var(--eco2);
    margin: 4vmin 0;
}

.score-text {
    font-size: 3.6vmin;
    margin-bottom: 5vmin;
    text-align: left;
}

.answer-list {
    text-align: left;
    margin-top: 4vmin;
}

.answer-category {
    margin-bottom: 3vmin;
    border-bottom: 0.2vmin solid var(--bcgreen);
    padding-bottom: 2vmin;
}

.answer-category h3 {
    color: var(--eco2);
    margin-bottom: 2vmin;
}

.answer-item {
    margin-bottom: 1.6vmin;
    padding-left: 3vmin;
}

.answer-object {
    margin-bottom: 6vmin;
    padding: 4vmin;
    background-color: var(--light-gray);
    border-radius: 1.6vmin;
    border: 0.2vmin solid var(--bcgreen);
}

.answer-object pre {
    background-color: var(--white);
    padding: 4vmin;
    border-radius: 1.2vmin;
    overflow-x: auto;
    font-size: 3vmin;
    border: 0.2vmin solid #ddd;
}

.answer-details {
    margin-top: 6vmin;
}

.select-field{
    width: 100%;
    padding: 2.4vmin;
    border: 0.2vmin solid #ddd;
    font-size: 3.2vmin;
}

.hide_element{
    display: none;
}

.quick-answers {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5vmin; 
    margin-top: 2vmin; 
}

.quick-answer-btn {
    padding: 2vmin 4vmin;
    border: 0.4vmin solid transparent;
    border-radius: 1.6vmin; 
    background-color: #f9f9f9;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-answer-btn:hover {
    background-color: var(--bcgreen);
    border-color: var(--eco3);
}

.quick-answer-btn.selected {
    background-color: var(--eco4);
    border-color: var(--eco2);
    color: var(--eco1);
}

















@media (max-width: 768px) {
    .calculator {
        max-width: 129.468vw;
        border-radius: 1.72692vw;
        box-shadow: 0 0.71928vw 3.5964vw rgba(0, 0, 0, 0.3);
        padding: 3.5964vw;
    }
    
    .calcheader {
        margin-bottom: 4.31568vw;
        padding-bottom: 2.15784vw;
        border-bottom: 0.14418vw solid var(--bcgreen);
    }
    
    .calcheaderLeft {
        gap: 1.07892vw;
        border-radius: 1.43856vw;
        padding: 0.71928vw;
    }
    
    .calcheaderLeft.single-button {
        width: 7.1928vw;
    }
    
    .calcheaderLeft.double-button {
        width: 15.1146vw;
    }
    
    #btn-right1 {
        margin-left: 6.83316vw;
    }
    
    #btn-left3 {
        margin-right: 6.83316vw;
    }
    
    .btn-left, .btn-right {
        border-radius: 0.5751vw;
        width: 5.75424vw;
        height: 5.75424vw;
        box-shadow: 0 2.87712vw 5.75424vw rgba(47, 73, 18, 0.2);
    }
    
    .btn-left:hover, .btn-right:hover {
        box-shadow: 0 4.31568vw 8.63136vw rgba(47, 73, 18, 0.3);
    }
    
    .btn-left:hover {
        transform: translateX(-1.43856vw);
    }
    
    .btn-right:hover {
        transform: translateX(1.43856vw);
    }
    
    .btn-left:active, .btn-right:active {
        box-shadow: 0 1.43856vw 2.87712vw rgba(47, 73, 18, 0.3);
    }
    
    .btn-left i, .btn-right i {
        font-size: 2.15784vw;
    }
    
    .btn-short {
        padding: 1.43856vw 2.87712vw;
        margin-left: 2.15784vw;
        border-radius: 0.86346vw;
        font-size: 2.15784vw;
    }
    
    .btn-short:hover {
        box-shadow: 0 0 0 0.28836vw rgb(127, 74, 44);
    }
    
    .btn-restart {
        padding: 1.43856vw 2.87712vw;
        margin-left: 2.15784vw;
        border-radius: 0.86346vw;
        font-size: 2.15784vw;
    }
    
    .btn-restart:hover {
        box-shadow: 0 0 0 0.28836vw rgb(152, 196, 50);
    }
}

.redInputShining{
    border-color: rgb(255, 0, 0);
    box-shadow: 0 0 0 0.6vmin rgba(206, 0, 0, 0.2);
}

.redSelectShining {
    background-color: rgba(206, 0, 0, 0.2);
    border-color: rgb(255, 0, 0);
    color: rgb(255, 0, 0);
}