main .wizard {
    display: grid;
    align-items: center;
    padding-block: 50px 25px;
}
main .wizard form {
    gap: 8px;
    width: 100%;
    display: flex;
    min-height: 70vh;
    position: relative;
    padding: 100px 32px;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--color-neutral-500);
    border-radius: var(--border-radius-default);
    background: center / cover no-repeat url(../resource/svg/image-wizard.svg) var(--color-neutral-200);
}
main .wizard-title {
    text-align: center;
    margin-bottom: 4px;
}
main .wizard-info {
    display: block;
    text-align: center;
    margin-bottom: 40px;
    font: var(--font-body-2);
}
main .wizard-info a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--color-neutral-600);
}
main .wizard-step {
    gap: 8px;
    width: 100%;
    display: flex;
    max-width: 768px;
    align-items: center;
    margin-inline: auto;
}
main .wizard-package {
    display: none;
}
main .wizard-step select {
    width: 100%;
    position: relative;
    align-items: center;
    appearance: base-select;
    color: var(--color-neutral-800);
    background: var(--color-neutral-100);
    box-shadow: 0 4px 8px var(--color-neutral-800-shadow);
}
main .wizard-step select::picker(select) {
    border: none;
    position: relative;
    appearance: base-select;
    color: var(--color-neutral-800);
    background: var(--color-neutral-100);
    outline: 1px solid var(--color-neutral-600);
    border-radius: var(--border-radius-default);
    box-shadow: 0 4px 8px var(--color-neutral-800-shadow);
}
main .wizard-step select::picker(select) {
    width: 100%;
    margin-top: 8px;
    max-width: max-content;
}
main .wizard-step option {
    width: 100%;
    padding: 8px 16px;
}
main .wizard-step option:hover {
    cursor: pointer;
}
main .wizard-step option:first-of-type {
    padding-top: 12px;
}
main .wizard-step option:last-of-type {
    padding-bottom: 12px;
}
main .wizard-step option::checkmark {
    order: 1;
    width: 16px;
    content: "";
    height: 16px;
    margin-left: auto;
    background: center / contain no-repeat url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 22 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16016 9.76623L6.78312 15.3892L20.8405 1.33179' stroke='%2319213D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
main .wizard-step option[disabled]::checkmark {
    display: none;
}
main .wizard-step.wizard-user {
    gap: 16px;
    display: none;
    flex-wrap: wrap;
    align-items: center;
}
main .wizard-back {
    transform: scale(-1);
}
main .wizard-back:hover {
    transform: scale(-1) translateY(2px);
}
main .wizard-user label {
    width: 100%;
}
main .wizard-user input,
main .wizard-user textarea {
    width: 100%;
    box-shadow: 0 4px 8px var(--color-neutral-800-shadow);
}
main .wizard-user textarea {
    min-height: 180px;
}
main .wizard-user label {
    margin-bottom: 12px;
    display: inline-block;
    font-weight: var(--font-weight-medium);
}
main .wizard-user .input-group {
    width: 100%;
}
main .wizard-user .input-group:nth-of-type(1),
main .wizard-user .input-group:nth-of-type(2) {
    flex-basis: calc(50% - (16px / 2));
}
main .wizard-step:not(:last-of-type) button.button {
    min-width: 78px;
    font: var(--font-single-2);
    font-weight: var(--font-weight-bold);
}
main .button-group {
    gap: 8px;
}
main .wizard-user-message {
    width: 100%;
}
@media (max-width: 768px) {
    main .wizard {
        padding-top: 0;
    }
    main .wizard.container {
        padding-inline: 0;
    }
    main .wizard form {
        border-radius: 0;
    }
    main .wizard-step {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    main .wizard-step .wizard-back {
        order: 1;
        flex-basis: 50%;
    }
    main .wizard-step .wizard-next {
        order: 2;
    }
    main .wizard-user {
        flex-direction: column;
    }
}