.questions-form {
    overflow: hidden;
}

#myco-slider {
    display: flex;
    transition: transform 0.5s ease;
}

.myco-question {
    flex-shrink: 0;
    padding: 20px;
}

.myco-nav {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

/* Container for answer tiles, flex with wrap and gap */


/* Hidden input (radio/checkbox) */
.myco-input-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    /* hides input but accessible */
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Label styled as tile */
.myco-label-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #4c8a3d;
    border-radius: 10px;
    padding: 1rem 1.5rem;
    margin: 1rem 0 1rem 0;
    height: 75px;
    /* fixed height */
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
    text-align: center;
}

.myco-icon-placeholder {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #0d6efd;
}

.myco-label-text {
    font-weight: 600;
    text-align: center;
    font-size: 1rem;
}

.myco-answer-tile {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 1rem;
    width: 250px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

/* .card-glass {
    backdrop-filter: blur(16px) saturate(100%);
    -webkit-backdrop-filter: blur(16px) saturate(100%);
    background-color: rgb(61, 111, 97, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
    color: white;

} */

/* .card-glass:hover {
    backdrop-filter: blur(16px) saturate(100%);
    -webkit-backdrop-filter: blur(16px) saturate(100%);
    background-color: rgb(61, 111, 97, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
} */

.questions-form .btn {
    border: 0;
}

.questions-form .btn:hover {
    background-color: #dceed8;
}

.questions-form .btn:active {
    background-color: #dceed8 !important;
}

.myco-input-hidden:checked+.btn {
    background-color: #4c8a3c;
    color: white !important;
}


.myco-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #fff
}

.indicator-low-risk {
    color: #2e7d32
}

.indicator-medium-risk {
    color: #dd9116
}

.indicator-high-risk {
    color: #dd6401
}

.indicator-very-high-risk {
    color: #c62828
}

.indicator-unknown-risk {
    color: #b0b2b3
}


