@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
:root {
    /* Font */
    --font-family: 'Karla', system-ui, -apple-system, sans-serif;

    /* Logo */
    --logo-url: url(/custom/logo/ram-logo.png);

    /* Colors */
    --brand-select: #d0003e;
    --brand-progress: #d0003e;
    --brand-question: #000000;
    --brand-button: #d0003e;
    --bg-color: #ffffff;
    
    /* Option box */
    --option-shadow: 0 5px 10px 0 rgba(0, 0, 0, .08);
    --option-border: none;

    --radius-option: 6px;
    --radius-nav-button: 8px;
    --radius-input: 10px;
    --radius-circle: 100px;

    /* Number box */
    --number-shadow: 0 5px 10px 0 rgba(0, 0, 0, .08);
    --number-border: 0;
    --number-radius: 6px;

    /* Form inputs */
    --input-border: none;
    --input-radius: 6px;
    --input-shadow: 0 5px 10px 0 rgba(0, 0, 0, .08);
    --input-outline: var(--brand-select);
}

.header {
    position: relative;
}

.header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: #d0003e;
}

.ram .multiple__row {
    display: flex;
    gap: 24px;
}

.ram .multiple__inputs {
    justify-content: flex-start;
}

.ram .multiple__no-answer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.ram .multiple__no-answer-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 0;
}
.ram .multiple__row .multiple__no-answer-label::before {
    position: relative;
    left: 0;
}

.ram .multiple__row .multiple__no-answer-input:checked ~ .multiple__no-answer-label::after {
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
}

.ram .multiple__label {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: url(../svg/ram-star-empty.svg) no-repeat center;
    background-size: contain;
}

.ram .multiple__box:hover .multiple__label {
    background: url(../svg/ram-star-hovered.svg) no-repeat center;
    background-size: contain;
}
.ram .multiple__inputs:has(.multiple__box:hover) .multiple__label {
    background: url(../svg/ram-star-hovered.svg) no-repeat center;
    background-size: contain;
}
.ram .multiple__box:hover ~ .multiple__box .multiple__label {
    background: url(../svg/ram-star-empty.svg) no-repeat center;
    background-size: contain;
}

.ram .multiple__row .multiple__input:checked + .multiple__label {
    background: url(../svg/ram-star-full.svg) no-repeat center;
    background-size: contain;
}

.ram .multiple__inputs:has(.multiple__box .multiple__input:checked) .multiple__label {
    background: url(../svg/ram-star-full.svg) no-repeat center;
    background-size: contain;
}
.ram .multiple__box:has(.multiple__input:checked) ~ .multiple__box .multiple__label {
    background: url(../svg/ram-star-empty.svg) no-repeat center;
    background-size: contain;
}
.ram .multiple__box:has(.multiple__input:checked) ~ .multiple__box:hover .multiple__label {
    background: url(../svg/ram-star-hovered.svg) no-repeat center;
    background-size: contain;
}
.ram .multiple__inputs:has(.multiple__input:checked) ~ .multiple__box:hover .multiple__label {
    background: url(../svg/ram-star-hovered.svg) no-repeat center;
    background-size: contain;
}

.multiple__row .multiple__box:last-of-type .multiple__label {
    border: 0;
}


.ram .multiple__label::before, .ram .multiple__row .multiple__input:checked ~ .multiple__label::after {
    content: none;
}

.ram .multiple__row[data-row="numbers"] {
    display: none;
}


@media (max-width: 768px) {
    .ram .multiple__no-answer {
        justify-content: flex-start;
    }
    .ram .multiple__inputs {
        flex-wrap: wrap;
    }
    .ram .multiple__no-answer-label {
        padding-left: 0;
        margin-block-start: 24px;
    }
    .ram .multiple__row .multiple__label {
        border: 0;
        font-size: 0;
    }
}