main {
    width: 100%;
    max-width: 900px;
    height: fit-content;
    margin: 0 auto;
    
    padding: 3rem 2rem;
    background-color: var(--cream);

    & .page-toggler{
        margin: 2rem 0;
    }
}

.main-container{
    width: 100%;
    height: fit-content;
}

.appointment-container{
    display: none;

    --gap: 1.5rem;
    gap: var(--gap);

    width: 100%;
    height: auto;

    & .appointment-actions{
        grid-area: actions;

        display: flex;
        flex-direction: column;
        align-items: center;

        & span{
            text-align: center;
        }

        & .btn-default{
            width: 100%;
            margin-bottom: .75rem;
        }
    }

    & .left-panel{
        grid-area: left;
    }
    & .right-panel{
        grid-area: right;
    }
}

#appointment-online{
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
    grid-template-areas:
        "right"
        "left"
    ;

    @media (width > 670px) {
        grid-template-columns: 55% auto;
        grid-template-rows: auto;
        grid-template-areas: "left right";
    }

    & .right-panel{
        @media (width > 670px) {
            position: sticky;
            top: calc(var(--header-height) + var(--gap));
        }
    }
}

#appointment-studio{
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "left"
        "right"
        "actions"
    ;

    @media (width > 670px) {
        grid-template-columns: 55% auto;
        grid-template-rows: auto auto;
        grid-template-areas: 
            "left right"
            "actions right"
        ;
    }

    & .right-panel{
        & > :first-child {
            @media (width > 670px) {
                position: sticky;
                top: calc(var(--header-height) + var(--gap));
            }
        }
    }
}

.appointment-container--shown{
    display: grid;

    & .left-panel{
        animation: fadeUp 0.5s ease 0.1s both;
    }
    & .right-panel{
        animation: fadeUp 0.5s ease 0.15s both;
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.appointment-note{
    margin-top: 22px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
    line-height: 1.6;

    & strong{
        color: rgba(255, 255, 255, 0.55);
        font-weight: 600;
    }
}