/*form*/
label,
.form__field > p{
    font-size: var(--font-size-s);
    text-transform: uppercase;
}

.form__field--filter {
    text-transform: lowercase;
}

label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs)
}

.form__field > p {
    margin-bottom: var(--spacing-xs);
}

.radio {
    display: flex;
    flex-direction: row;
}

input,
textarea {
    border: solid var(--color-black) 2px;
    background-color: var(--color-bg);

    padding: var(--spacing-xxs);

    font-size: var(--font-size-xxs);
}

.radio input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.radio label {
    text-transform: none;

    border: solid var(--color-black) 2px;
    padding: var(--spacing-xs);
}

.radio input:checked+label {
    background-color: var(--color-black);
    color: var(--color-bg);
    font-weight: 700;
}

.radio--persons label {
    min-height: var(--spacing-xl);
    min-width: var(--spacing-xl);

    text-align: center;
}

.form__field+.form__field {
    margin-top: var(--spacing-l);
}

/* --- review ---*/
.form {
    margin-top: var(--spacing-xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: max-content;
    gap: var(--spacing-xxl);
}

.form__field>input {
    justify-self: start;
}

.review__form {
    display: grid;
    justify-items: left;
}

.form>.section__img {
    background-color: var(--color-primary);
}

.section__img--restaurantbezoeker {
    display: grid;
    align-items: end;
    padding-top: var(--spacing-xl);
}

.radio .star__label {
    text-transform: none;

    border: none;
    padding: var(--spacing-xxs);
}

.radio .input__star:checked+label {
    background-color: transparent;
}

.star__svg {
    fill: var(--color-bg) !important;
}

.star__svg--black {
    fill: var(--color-black) !important;
}

.input__star:checked+label>svg>.star__svg,
.input__star:hover+label>svg>.star__svg {
    fill: var(--color-black) !important;
}

.radio--stars:hover .input__star+label>svg>.star__svg {
    fill: var(--color-black) !important;
}

.input__star:hover~.input__star+label>svg>.star__svg {
    fill: var(--color-bg) !important;
}


.buttons__form {
    justify-self: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: end;
}

.buttons__form>.button {
    justify-self: start;
}

.error {
    color: var(--color-button);

    font-family: forma-djr-text, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-size-xs);
    line-height: var(--line-height);

    text-transform: none;
}

.form__name {
    display: flex;
    gap: var(--spacing-l);
}

.form__name .form__field {
    margin: 0;
}

.reservation__extra-info {
    margin-top: var(--spacing-xs);
}

.radio--persons {
    gap: var(--spacing-xs);
}

.moment {
    display: flex;
    align-items: end;
    gap: var(--spacing-xl);
    justify-content: center;
    margin-bottom: var(--spacing-xl);
    transform: rotate(-1deg);
}

.moment .form__field {
    margin-top: 0;
}

.date__input {
    padding: var(--spacing-s);
    margin-top: var(--spacing-s);
}

.radio--time {
    margin-top: var(--spacing-xs);
    display: grid;
    grid-template-columns: repeat(4, max-content);
    grid-template-rows: repeat(4, max-content);

    justify-content: center;

    gap: var(--spacing-s);

    text-align: center;
}

.time__label {
    font-family: forma-djr-text, sans-serif;
    font-size: var(--font-size-xs);
}

.radio .time__label {
    border: none;
}

.time__label:hover {
    background-color: var(--color-button-secondary);
}

.radio input:checked+.time__label {
    background-color: var(--color-button);
}

.reservation>.test__question>.test__title {
    font-size: var(--font-size-xxxl);
}

.reservation>.test__question {
    justify-items: center;
}

.reservation>.test__question .button {
    margin-top: var(--spacing-xxl);
}