form {
    width:min(1000px,100%);
    margin-inline:auto;
    background-color: var(--colour4);
    border-radius:var(--border_radius);
    overflow-x:hidden;
    margin-bottom:var(--global_block_padding);
}

form form {
    background-color:unset;
}

.package {
    padding:2rem 2rem 0;
    text-align: center;
}

.page {
    display:grid;
    align-items:center;
    text-align:center;
    float:left;
    width:100cqw;
    padding:var(--global_padding_inner);

    & p {
        margin-inline:auto;
    }

    & h3 {
        text-align: center;
        
        table + & {
            margin-top:0;
            margin-bottom:2lh;
        }
    }
}

fieldset {
    position:relative;
    padding:2rem;
    margin-bottom:1rem;
    border:none;
    border-radius:var(--border_radius);
    background-color:#fff;

    & legend {
        padding:1rem;
    }

    & p {
        font-size:0.8rem;
    }

}

.dots {
    position:relative;
    width:calc(100% - 8rem);
    margin-inline:4rem;
    height:1rem;

    &::after {
        content:'';
        position:absolute;
        width:100%;
        height:2px;
        left:0;
        top:calc(50% - 1px);
        background-color:var(--colour4);
    }

    & .dot {
        position:absolute;
        top:0;
        transform:translateX(-50%);
        width:1rem;
        height:1rem;
        background-color:var(--colour4);
        border-radius:100%;
        z-index:1;

        &.active {
            background-color:var(--colour1);
        }
    }
}

.result .dot:last-of-type {
    background-color:var(--accent);
}

.options {
    display:grid;
    grid-template-columns:1fr;
    gap:0.5rem;
    width:min(300px,100%);
    margin-inline:auto;

    & .option {
        position:relative;
        display:grid;
        border-radius:1rem;
        padding:1rem;
        color:var(--body_text);
        background-color:var(--colour4);
        text-align: center;
        /* box-shadow:0 5px 8px #0003; */
        align-items: center;

        &:has(input:checked){
            outline:2px solid var(--accent);

            & .tick {
                opacity:1;
            }
        }

        & p {
            font-size:1rem;
            line-height:1.2;
            margin:0;
            margin-inline:auto;
            padding-inline:1rem;
        }

        & .icon,
        & .image {
            height:4rem;
            margin-bottom:1rem;

            & img {
                display:block;
                max-height:100%;
                margin-inline:auto;
            }
        }

        & .image {
            height:unset;
            width:100%;
        }

        & input {
            position:absolute;
            inset:0;
            width:100%;
            height:100%;
            opacity:0;
            cursor:pointer;
        }

        & .tick {
            position:absolute;
            right:0.5rem;
            top:0.5rem;
            width:1rem;
            opacity:0;
        }
    }
}

.subq {
    display:none;
}

.help {
    position:absolute;
    right:2rem;
    top:2rem;
    width:2rem;
    height:2rem;
    text-align: center;
    padding:0.5rem;
    border-radius:100rem;
    background-color:var(--colour2);
    cursor:pointer;

    &:hover {
        background-color:var(--colour1);
        color:#fff;
    }

    & input {
        position: absolute;
        width:100%;
        height:100%;
        opacity:0;
        margin:0;
        padding:0;
        inset:0;
        cursor:pointer;
        color:#fff;
    }
}

.info {
    border:1px solid var(--colour2);
    padding:1rem;
    border-radius:1rem;
    display:none;
    width:min(500px,100%);
    margin-inline:auto;
    margin-block:2rem;

    & p:last-of-type {
        margin-bottom:0;
    }
}

.help:has(input:checked) + .info {
    display:block;
}


.controls {
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    justify-content: center; 
}

button {
    border:none;
    outline:none;
}

.next {
    opacity:0.5;
    pointer-events: none;
}

.page:has(input:not(.tcs):checked) .next {
    opacity:1;
    pointer-events: all;
}

.estimate {
    display:grid;
    gap:1rem;
    text-align: center;

    & div {
        clear:both;
    }

    & .calc-btn {
        position:relative;
        opacity:0.5;
        pointer-events: none;

        & span {
            font-size:1rem;
        }

        & .pre {
            transition:opacity 0.5s;
        }

        & .htmx-indicator {
            position:absolute;
            margin:0;
            inset:0;
            width:100%;
            height:100%;
            padding: 0.5rem 2.5rem;
        }
    }

    &:has(.email:user-valid,.email:valid):has(.tcs:valid){
        & .calc-btn {
            opacity:1;
            pointer-events: all;
        }
    }
        
}

.loading :is(h3,.dots,.options,.controls,.contact-details,table) {
    opacity:0.3;
    pointer-events: none;
}

.result {
    position: relative;

    & table {
        width:min(600px,100%);
        margin-inline: auto;

        & td {
            padding:0.75rem;
            text-align: left;

            & .tick {
                width:1rem;
            }

            &:last-of-type {
                text-align: center;
                vertical-align: top;
                width:70px;
            }
        }

        & tr:nth-of-type(2n+1) td {
            background-color:var(--colour2);

            &:first-of-type {
                border-top-left-radius: 0.5rem;
                border-bottom-left-radius: 0.5rem;
            }
            &:last-of-type {
                border-top-right-radius: 0.5rem;
                border-bottom-right-radius: 0.5rem;
            }
        }
    }
}

label:has(input){
    display:grid;
    grid-template-columns: 1rem 1fr;
    gap:1rem;
    width:fit-content;
    margin-inline:auto;
}

form :has(.dl-btn){
    margin-bottom:0;
}

.dl-btn {
    margin-top:4rem;
}

.htmx-indicator {
    position:absolute;
    left:50%;
    top:50%;
    padding:1rem;
    transform:translate(-50%,-50%);
    pointer-events: none;
    background-color:#fff;
    border-radius:100rem;
}

.htmx-swapping {
    & .htmx-indicator {
        opacity:1;
    }
}

.spin {
    width:2rem;
}

.contact-details {
    width:min(500px,100%);
    margin-inline:auto;

    & label {
        font-size:1rem;
        margin-bottom:0.25rem;
    }

    & input {
        width:100%;
        background-color:var(--colour4);
        border-radius:0.5rem;
        border:none;
        font-size:1rem;
        padding:0.75rem;
    }
}

.restart {
    display:none;
}

.page:has(.dl-btn) .restart{
    display:block;
}

@media screen and (min-width:2000px){
    form {
        width: min(2000px,100%);
    }

    .options {
        width: min(600px,100%);

        & .option {
            & p {
                font-size:1vw;
            }

            & .tick {
                width:1vw;

            }
        }
    }

    .result {
        & table {
            width: min(1000px,100%);
        }
    }
}