@import "lib/SPEDIDAM/variables.css";

:root {
    font-size: 16px;
    font-family: 'DM Sans';
}

* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
}

h1 {
    font-family: "DM Sans";
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.showpricer-container {
    min-height: 958.16px;
}

#simulate-form {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;

    gap: 20px;
    padding: 16px 16px 30px 16px;
}

.sped-input {
    width: 100%;
    color: var(--grey-scale-600);
    justify-content: space-between !important;
    font-size: 1rem;

    input {
              font-size: 1rem;
    }

    input::placeholder {
        color: var(--grey-scale-600);
    }

    .controls {
        display: none !important;
    }

    .form-control-validation {
        display: none;
    }
}

.html-duration-picker-input-controls-wrapper {
    width: min-content !important;
}

.html-duration-picker-input-controls-wrapper .html-duration-picker {
    width: 100px !important;
    text-align: left !important;
    padding: 0 !important;
}

.checkbox-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.875rem;

    input[type="checkbox"] {
        appearance: none;
        width: 20px;
        aspect-ratio: 1 / 1;
        border: 1px solid var(--grey-scale-200);
        border-radius: 3px;
        position: relative;
        cursor: pointer;
        flex-shrink: 0;
    }

    input[type="checkbox"]:checked::after {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 14px;
    }
}

#select-performance-type,
::picker(select) {
    appearance: base-select;
}

#select-performance-type:hover,
#select-performance-type:focus {
    background-color: var(--grey-scale-200);
}

#select-performance-type::picker-icon {
    color: var(--grey-scale-black);
    transition: 0.4s rotate;
    display: inline-block;
}

#select-performance-type:open {
    border-radius: 6px 6px 0 0;
    border-bottom: none;
    outline: none;
}

#select-performance-type:open::picker-icon {
    rotate: 180deg;
}

::picker(select) {
    border: none;
    background-color: transparent;
}

#select-performance-type option {
    padding: 8px 16px;
    border-right: 1px solid var(--grey-scale-200);
    border-left: 1px solid var(--grey-scale-200);
    background-color: var(--grey-scale-white);
    cursor: pointer;

    &:last-of-type {
        border-bottom: 1px solid var(--grey-scale-200);
        border-radius: 0 0 6px 6px;
    }

    &:hover {
        background-color: var(--grey-scale-200);
    }

    &::checkmark {
        display: none;
    }

    &[value="default"] {
        display: none;
    }
}

#next-form .input-wrapper {
    margin-bottom: 25px;
}

#select-performance-type {
    selectedcontent {
        color: var(--grey-scale-black);

        .default {
            color: var(--grey-scale-600);
        }
    }
}

.sped-input:invalid,
.sped-input:has(> input:invalid) {
    border-color: var(--red-scale-500);
}

.sped-input:not(select):not(:placeholder-shown):valid,
.sped-input:not(select):has(> input:not(:placeholder-shown):valid) {
    border-color: green;
}


.form-separator {
    height: 1px;
    width: 100%;
    background-color: var(--grey-scale-200);
    margin-top: 10px;
    margin-bottom: 25px;
}

.simulation-result {
    width: 100%;
    height: fit-content;
    color: var(--grey-scale-white);
    border-radius: 12px;
    background-color: var(--red-scale-600);

    .result {
        padding: 20px;
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .price-label {
        font-size: 0.875rem;
        margin: 0;
        margin-bottom: 4px;
    }

    .price-label + p {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
    }

    .separator {
        width: 100%;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
    }

    .result-footer {
        height: 40px;
        background-repeat: no-repeat;
        background-size: 70%;
        border-radius: 0 0 12px 12px;
    }
}

.hidden {
    display: none;
}

.info {
    font-size: 0.75rem;
    margin-top: 30px;

    a {
        color: var(--grey-scale-black);
    }
}

@media (width > 375px) {
    .showpricer-container {
        min-height: 677.58px;
    }

    #simulate-form {
        width: 100%;
        padding: 30px;
    }

    .checkbox-wrapper {
        align-items: center;

        input[type="checkbox"]:checked::after {
            left: 2px;
            font-size: 18px;
        }
    }

    #next-form {
        display: grid;
        grid-template-areas: "duration-ost duration-ost"
            "duration-pho duration-pho"
            "total-rep already-played"
            "seats onstage-performers"
            "total-contract total-contract"
            "agreement agreement";
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: min-content;
        align-items: end;
        gap: 20px;

        &.Choregraphic {
            grid-template-areas: "duration-ost duration-ost"
                "duration-pho duration-pho"
                "total-rep already-played"
                "seats onstage-performers"
                "total-contract total-contract"
                "choregraphic choregraphic"
                "agreement agreement";
        }

        &.Diffusion {
            grid-template-areas: "duration-ost duration-ost"
                "sites commercial"
                "agreement copy";
        }

        .input-wrapper {
            margin-bottom: 0;
        }
    }

    .duration-ost {
        grid-area: duration-ost;
    }

    .duration-pho {
        grid-area: duration-pho;
    }

    .total-rep {
        grid-area: total-rep;
    }

    .already-played {
        grid-area: already-played;
    }

    .seats {
        grid-area: seats;
    }

    .onstage-performers {
        grid-area: onstage-performers;
    }

    .total-contract {
        grid-area: total-contract;
    }

    .choregraphic-form {
        grid-area: choregraphic;
    }

    .sites {
        grid-area: sites;
    }

    .agreement {
        grid-area: agreement;
    }

    .copy {
        grid-area: copy;
    }

    .commercial {
        grid-area: commercial;
        margin-bottom: 10px;
    }

    #contact-team-other,
    #contact-team {
        grid-column: 1 / 3
    }

    .simulation-result {
        .result {
            padding: 28px;
            display: grid;
            gap: 0 20px;
            grid-template-areas: "ht sep ttc"
                                 "footer footer footer";
            grid-template-columns: 1fr fit-content(100%) 1fr;
            grid-template-rows: auto;
        }

        .ht {
            grid-area: ht;
        }

        .ttc {
            grid-area: ttc;
        }

        .price-label {
            font-size: 1rem;
            margin-bottom: 4px;
        }

        .price-label + p {
            font-size: 2rem;
        }

        .separator {
            width: 1px;
            height: 100%;
            grid-area: sep;
        }

        .result-footer {
            background-repeat: no-repeat;
            background-size: 60%;
            grid-area: footer;
        }
    }

    .info {
        font-size: 0.875rem;
    }
}