/* ---------------------------------Navbar----------------------------------------- */

nav {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1em;
    z-index: 1;
}

nav .qr-logo {
    width: 3em;
    cursor: pointer;
}

.links-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

.links {
    /* display: grid; */
    display: flex;
    /* grid-template-columns: repeat(var(--items), 1fr); */
    position: relative;
    justify-items: center;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    text-align: center;
    margin: 0 1em;
}

.links>span {
    /* padding: .5em; */
    text-align: center;
    text-decoration: none;
    transition: all .25s;
}

.links>span:hover {
    background: #ffffff06;
    color: #adf;
}

.links>.line {
    background: var(--accent);
    height: 5px;
    pointer-events: none;
}

.links span {
    text-decoration: none;
    transition: all 0.2s linear;
    color: var(--text);
    font-weight: 500;
    text-align: center;
    /* width: 5em; */
    /* cursor: pointer; */
}

.links span a {
    display: block;
    width: 5em;
    padding: 0.5em;
}

.links>.line {
    opacity: 0;
    transition: all .25s;
    position: absolute;
    bottom: 0;
    left: var(--left, calc(100% / var(--items) * (var(--index) - 1)));
    width: var(--width, calc(100% / var(--items)));
    --index: 0;
    border-radius: 20em;
}

.links>span:hover~.line {
    opacity: 1;
}

.links>span:nth-of-type(1):hover~.line {
    --index: 1;
}

.links>span:nth-of-type(2):hover~.line {
    --index: 2;
}

.links>span:nth-of-type(3):hover~.line {
    --index: 3;
}

.links>span:nth-of-type(4):hover~.line {
    --index: 4;
}

.links>span:nth-of-type(5):hover~.line {
    --index: 5;
}

.links>span:nth-of-type(6):hover~.line {
    --index: 6;
}

.links>span:nth-of-type(7):hover~.line {
    --index: 7;
}

.links>span:nth-of-type(8):hover~.line {
    --index: 8;
}

.links>span:nth-of-type(9):hover~.line {
    --index: 9;
}

.links>span:nth-of-type(10):hover~.line {
    --index: 10;
}

.links>span:last-of-type:hover~.line {
    --index: var(--items);
}

.btn-wrapper {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-top: 1em;
}

nav .btn-wrapper {
    margin: 0;
}

.mobile-menu {
    display: none;
}

@media screen and (max-width: 660px) {
    nav {
        padding: 1em;
        /* justify-items: center; */
        align-items: center;
    }
    nav .qr-logo {
        width: 15%;
        z-index: 11;
    }
    .line {
        display: none;
    }
    .links span {
        border: 1px solid transparent;
    }
    .links span:hover,
    .links span:focus-visible,
    .links span:active {
        border: 1px solid var(--accent);
        border-radius: 20em;
    }
    .mobile-menu {
        display: block;
        font-size: 2em;
        z-index: 10;
    }
    .mobile-menu.close-menu {
        display: none;
    }
    .links-wrapper,
    .links,
    .btn-wrapper {
        flex-direction: column;
        row-gap: 2em;
    }
    .links-wrapper {
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 10;
        padding: 1em;
        background: var(--background);
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        justify-content: center;
        transition: all 0.2s ease-in;
    }
}


/* -------------------------------QR OPTIONS ----------------------------------- */

.container {
    width: 100%;
}

.container section {
    width: 95%;
    margin: 1em auto;
}

.container section#qrGenerator {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.container section#qrGenerator .options-container {
    width: 70%;
    padding: 1em;
}

.container section#qrGenerator .options-container .options-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.container section#qrGenerator .options-container .options-wrapper .options-btn-wrapper {
    padding: 0;
    background: var(--bg-color);
    border-radius: 2em;
    margin: 0.5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.container section#qrGenerator .options-container .options-wrapper .options-btn-wrapper label {
    background: var(--background);
    padding: 0.5em 1em;
    border-radius: 1em;
    margin: 0.75em;
    transition: all 0.2s ease-out;
    cursor: pointer;
    outline: 1px solid transparent;
}

.container section#qrGenerator .options-container .options-wrapper .options-btn-wrapper label:has(.qr-radio:checked) {
    background: var(--accent);
    transition: all 0.2s ease-in;
}

.container section#qrGenerator .options-container .options-wrapper .options-btn-wrapper label:hover {
    outline: 1px solid var(--accent);
}

.container section#qrGenerator .options-container .options-wrapper .options-btn-wrapper .qr-radio {
    display: none;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form {
    display: none;
    background: var(--bg-color);
    border-radius: 2em;
    padding: 1em;
    width: 100%;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form.active,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form.active {
    display: block;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form .form-title,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form .form-title {
    /* font-size: 1.5em; */
    margin: 0 0 0.5em 0.5em;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form {
    /* display: flex; */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form div.social-wrapper,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form div.social-wrapper {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form div.options-input-wrapper,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form div.options-input-wrapper {
    display: flex;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form div.options-input-wrapper.full-width,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form div.options-input-wrapper.full-width {
    grid-column: 1 / 3;
    flex-direction: column;
    gap: 0.5em;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form div.options-input-wrapper.full-width.row,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form div.options-input-wrapper.full-width.row {
    flex-direction: row;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form div.options-input-wrapper.full-width.business-hours-container,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form div.options-input-wrapper.full-width.business-hours-container {
    /* display: flex; */
    /* flex-direction: row; */
    gap: 0.5em;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form div.options-input-wrapper.full-width.business-hours-container .day-container,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form div.options-input-wrapper.full-width.business-hours-container .day-container {
    display: grid;
    grid-template-columns: 0.5fr 1fr 3fr;
    grid-gap: 1em;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form div.options-input-wrapper.full-width.business-hours-container .day-container .hours-section .hours-row,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form div.options-input-wrapper.full-width.business-hours-container .day-container .hours-section .hours-row {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form div.options-input-wrapper label,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form div.options-input-wrapper label {
    /* min-width: 0; */
    width: -webkit-fill-available;
    overflow-x: auto;
    margin: 0;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form div.options-input-wrapper label .options-form-input,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form div.options-input-wrapper label .options-form-input {
    width: -webkit-fill-available;
    min-width: 0;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form label,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form label {
    width: 100%;
    margin: 0;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form label:has(.input-full),
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form label:has(.input-full) {
    grid-column: 1/3;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form .options-form-input,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form .options-form-input {
    min-width: 20em;
    width: 100%;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form label,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label {
    display: inline-block;
    margin: 0.5em;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form label.file-input-label,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label.file-input-label {
    text-align: center;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form label:has(.input-full),
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label:has(.input-full) {
    width: -webkit-fill-available;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form label .options-form-input,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label .options-form-input {
    width: max-content;
    min-width: 15em;
    border: none;
    background: var(--background);
    border-radius: 2em;
    padding: 0.5em;
    text-indent: 0.5em;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form label .options-form-input:focus-visible,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label .options-form-input:focus-visible {
    outline: none;
    border: none;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form label .options-form-input.input-full,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label .options-form-input.input-full {
    width: -webkit-fill-available;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form label .options-form-input:read-only,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label .options-form-input:read-only {
    background: var(--bg-color);
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form label .select2-container--default .select2-selection--single,
.container section#qrGenerator .options-container .options-form-wrapper .options-form form label .select2-container .select2-selection--single .select2-selection__rendered,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label .select2-container--default .select2-selection--single,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label .select2-container .select2-selection--single .select2-selection__rendered {
    min-width: 0;
    width: 10em;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form label textarea.options-form-input,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label textarea.options-form-input {
    resize: vertical;
    padding: 1em;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form label .options-radio-span,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label .options-radio-span {
    background: var(--background);
    padding: 0.5em 1em;
    border-radius: 2em;
    transition: all 0.2s linear;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form label .options-form-radio,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label .options-form-radio {
    display: none;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form label .options-form-radio:checked+.options-radio-span,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label .options-form-radio:checked+.options-radio-span {
    background: var(--accent);
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form label.full-input-label,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label.full-input-label {
    display: block;
    width: -webkit-fill-available;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form label.options-radio-label,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label.options-radio-label {
    cursor: pointer;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form fieldset,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form fieldset {
    border: none;
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 0.5em;
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form fieldset label,
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form fieldset label {
    padding: 0.5em 1em;
    cursor: pointer;
    background: var(--background);
    border-radius: 2em;
    font-size: 0.8em;
    border: 2px solid var(--background);
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form fieldset label:has(input[type="checkbox"]:checked),
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form fieldset label:has(input[type="checkbox"]:checked) {
    border: 2px solid var(--accent);
}

.container section#qrGenerator .options-container .options-form-wrapper .options-form form fieldset label input[type="checkbox"],
.container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form fieldset label input[type="checkbox"] {
    display: none;
}

@media screen and (max-width: 1200px) {
    .container section#qrGenerator {
        flex-direction: column;
    }
    .container section#qrGenerator .options-container {
        width: auto;
    }
    .container section#qrGenerator .qr-container {
        margin: auto;
    }
}

@media screen and (max-width: 60em) {
    .container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form div.options-input-wrapper label,
    .container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form div.options-input-wrapper label {
        font-size: 0.8em;
    }
    .container section#qrGenerator .qr-container {
        width: 50%;
    }
}

@media screen and (max-width: 660px) {
    .container section#qrGenerator .options-container .options-form-wrapper .options-form form,
    .container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form {
        text-align: center;
    }
    .container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form,
    .container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form {
        grid-template-columns: 1fr;
    }
    .container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form div.options-input-wrapper.full-width,
    .container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form div.options-input-wrapper.full-width {
        grid-column: 1 / 1;
    }
    .container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form div.options-input-wrapper.full-width.business-hours-container .day-container,
    .container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form div.options-input-wrapper.full-width.business-hours-container .day-container {
        grid-template-columns: 1fr;
    }
    .container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form div.options-input-wrapper.full-width .social-wrapper,
    .container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form div.options-input-wrapper.full-width .social-wrapper {
        grid-template-columns: 1fr;
        gap: 0.5em;
        margin: 1em 0;
    }
    .container section#qrGenerator .options-container .options-form-wrapper .options-form form.long-form label:has(.input-full),
    .container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form.long-form label:has(.input-full) {
        grid-column: 1 / 1;
    }
    .container section#qrGenerator .options-container .options-form-wrapper .options-form form label,
    .container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label {
        width: -webkit-fill-available;
    }
    .container section#qrGenerator .options-container .options-form-wrapper .options-form form label .options-form-input,
    .container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label .options-form-input {
        width: 100%;
    }
    .container section#qrGenerator .options-container .options-form-wrapper .options-form form label .select2.select2-container.select2-container--default,
    .container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label .select2.select2-container.select2-container--default {
        width: -webkit-fill-available !important;
    }
    .container section#qrGenerator .options-container .options-form-wrapper .options-form form label .select2-container--default .select2-selection--single,
    .container section#qrGenerator .options-container .options-form-wrapper .options-form form label .select2-container .select2-selection--single .select2-selection__rendered,
    .container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label .select2-container--default .select2-selection--single,
    .container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label .select2-container .select2-selection--single .select2-selection__rendered {
        width: -webkit-fill-available;
    }
    .container section#qrGenerator .options-container .options-form-wrapper .options-form form label.options-radio-label,
    .container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form label.options-radio-label {
        width: max-content;
        display: inline-flex;
    }
    .container section#qrGenerator .options-container .options-form-wrapper .options-form form fieldset,
    .container section#qrGenerator .options-container .options-form-wrapper .options-radio-form form fieldset {
        grid-template-columns: 1fr 1fr;
        grid-column: 1 / 1;
    }
    .container section#qrGenerator .qr-container {
        width: 90%;
    }
    .container section#qrGenerator .qr-container .btn-wrapper {
        flex-direction: row;
    }
}


/* ---------------------------------QR FORM--------------------------------------- */

label.options-radio-label>input.options-form-input:checked {
    background: var(--accent);
}

.select2-container--default .select2-selection--single,
.select2-container .select2-selection--single .select2-selection__rendered {
    width: max-content;
    min-width: 15em;
    /* margin: 1em; */
    border: none;
    background: var(--background) !important;
    border-radius: 2em;
    /* padding: 0.5em; */
    text-indent: 0.5em;
}

.select2.select2-container.select2-container--default {
    width: max-content !important;
}

.select2-container--default .select2-selection--single {
    border: none !important;
    background-color: transparent !important;
    width: max-content;
}

.select2-dropdown {
    background: var(--background) !important;
    border-radius: 2em !important;
    padding: 0.5em;
    border: none !important;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--bg-color);
    border-radius: 2em;
    text-indent: 0.5em;
    border: none !important;
}

.select2-results__option--selectable {
    border-radius: 2em;
    padding-left: 1em !important;
}


/* -----------------------------QR GENERATOR-------------------------------------------- */

.qr-container {
    width: 30%;
    background: var(--bg-color);
    padding: 1em;
    border-radius: 2em;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    height: fit-content;
}

.qr-code {
    width: 100%;
    height: 0;
    background: var(--background);
    transition: height 0.2s;
    border-radius: 2em;
}

#qrSVG {
    width: 100% !important;
    height: 100% !important;
}

#map {
    height: 500px;
    width: 100%;
}

#mapInput {
    display: none;
}