#availability-check {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    color: var(--primary);
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../media/resort-view.jpeg");
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 5rem;
    h1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 1em;
        z-index: 1;
        line-height: 80%;
        top: 50%;
        left: 50%;
        font-family: var(--heading);
        font-weight: 700;
        margin: 4rem 0 0 0;
        user-select: none;
        span {
            font-size: 1.36em;
            line-height: 80%;
        }
    }
    #search-inputs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1em 4em;
        font-size: 1rem;
        font-weight: 400;
        color: var(--secondary);
        background-color: var(--primary-dark);
        border-radius: 1em;
        padding: 1em 3em;
        width: 70%;
        margin-top: 5rem;
        div {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            gap: 1em 2em;
            span {
                display: flex;
                align-items: center;
                gap: 1em;
                input, select {
                    font-family: var(--regular);
                    font-size: 1em;
                    font-weight: 400;
                    height: 1.5em;
                    color: inherit;
                    background-color: inherit;
                    border: none;
                    line-height: 1.5em;
                }
                input:focus, select:focus {
                    outline: none;
                }
                input:hover, select:hover {
                    cursor: pointer;
                }
                label {
                    line-height: 1.5em;
                    height: 1.5em;
                }
            }
        }
        button {
            color: var(--primary);
            background-color: var(--secondary);
            border: none;
            font-size: 1.2rem;
            font-weight: 400;
            border: 0.1rem solid var(--secondary);
            border-radius: 0.5em;
            padding: 0.5em 1em;
            transition: transform 0.2s ease, opacity 0.1s ease-in-out;
        }
        button:hover {
            transform: scale(1.1);
            cursor: pointer;
        }
        button:active {
            transform: scale(1);
            cursor: pointer;
            opacity: 0.5;
        }
    }
}

#available-rooms {
    font-size: 1rem;
    background-color: var(--primary-dark);
    h2 {
        font-size: 2em;
        font-family: var(--heading);
        font-weight: 600;
        margin: 0;
        padding: 1em 0 0 0;
        text-align: center;
    }
    #room-cont {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2rem;
        padding: 2.5rem 7.5rem;
        p {
            font-weight: 400;
        }
        div {
            display: grid;
            grid-template-columns: auto auto;
            grid-template-rows: auto auto;
            align-items: center;
            gap: 0.1em 1em;
            color: var(--primary);
            background-color: var(--secondary);
            border-radius: 1em;
            padding: 1em 2em;
            text-align: center;
            transition: transform 0.2s ease, opacity 0.1s ease-in-out;
            p {
                margin: 0;
                font-weight: 400;
            }
            h3, h4 {
                font-weight: 600;
                margin: 0;
                font-family: var(--heading);
            }
            h3 {
                font-size: 3em;
                line-height: 1em;
                grid-row: 1/3;
                min-width: 2em;
            }
            h4 {
                font-size: 1.5em;
                line-height: 1em;
                min-width: 9em;
            }
        }
        div:hover {
            transform: scale(1.1);
            cursor: pointer;
        }
        div:active {
            transform: scale(1);
            opacity: 0.5;
        }
    }
}

#booking-form {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 2em;
    font-size: 1rem;
    font-weight: 400;
    min-height: 100vh;
    color: var(--secondary);
    background-color: var(--accent);
    padding: 3rem;
    h2 {
        font-family: var(--heading);
        font-size: 3em;
        font-weight: 600;
        margin: 1em 0;
    }
    fieldset {
        display: grid;
        align-items: center;
        gap: 0.5em;
        border: none;
        padding: 0;
        margin: 0;
        overflow: hidden;
        text-align: center;
        width: 100%;
        legend {
            text-align: left;
            font-family: var(--heading);
            font-size: 1.5em;
            font-weight: 600;
            color: inherit;
            background-color: inherit;
            border-radius: 1em 1em 0 0;
            padding: 0.25em 1.5em;
        }
        input {
            color: inherit;
            background-color: inherit;
            border: none;
            text-align: inherit;
            margin-bottom: 1em;
        }
    }
    #booking-details {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        color: var(--primary);
        background-color: var(--secondary);
        border-radius: 2em;
        padding: 2em 4em;
        input {
            color: inherit;
            background-color: inherit;
            font-size: 1.5em;
            font-weight: 600;
            font-family: var(--heading);
        }
        input:focus {
            outline: none;
        }
        input:hover {
            cursor: default;
        }
        label[for="total-price"] {
            font-size: 1.5em;
        }
        #total-price {
            font-size: 3em;
        }
    }
    #booker-info {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        padding: 2em 4em;
        legend {
            margin: 0 auto;
        }
        input {
            color: inherit;
            background-color: var(--primary-dark);
            border: 0.1em solid var(--secondary);
            font-size: 1em;
            padding: 0.25em 0.5em;
        }
        #card-number, #cvv {
            letter-spacing: 0.1em;
        }
    }
    input[type="submit"] {
        color: var(--primary);
        background-color: var(--secondary);
        border: none;
        font-family: var(--heading);
        font-size: 1.5rem;
        font-weight: 600;
        border: 0.1rem solid var(--secondary);
        border-radius: 0.5em;
        padding: 0.25em 1em;
        transition: transform 0.2s ease, opacity 0.1s ease-in-out;
    }
    input[type="submit"]:hover {
        transform: scale(1.1);
        cursor: pointer;
    }
    input[type="submit"]:active {
        transform: scale(1);
        cursor: pointer;
        opacity: 0.5;
    }
}


@media (min-width: 481px) and (max-width: 768px) {
    #booking-form {
        fieldset {
            text-align: left;
            input {
                margin: 0;
            }
        }
        #booking-details {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        #booker-info {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #booking-form {
        fieldset {
            text-align: left;
            input {
                margin: 0;
            }
        }
        #booking-details {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        #booker-info {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    #availability-check #search-inputs {
        width: 80%;
    }
    #booking-form {
        fieldset {
            text-align: left;
            input {
                margin: 0;
            }
        }
        #booking-details {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            label[for="total-price"] {
                grid-column: 2/3;
            }
            #total-price {
                grid-column: 3/4;
            }
        }
        #booker-info {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            input {margin-right: 2em;}
        }
    }
}