:root {

    --main-color-1: hsl(279, 75%, 25%);
    --main-color-2: hsl(279, 75%, 40%);
    --main-color-3: hsl(279, 75%, 55%);

    --secondary-color-1: hsl(0, 100%, 50%);
    --secondary-color-2: hsl(0, 100%, 65%);
    --secondary-color-3: hsl(0, 100%, 80%);


    /* https://app.usebraintrust.com */ 
    --elevation-1: 0 0 6px 0px hsl(279deg 75% 25% / 18%);
    --elevation-2: 0 0 12px 0px hsl(279deg 75% 25% / 18%);
    --elevation-3: 0 0 18px 0px hsl(279deg 75% 25% / 18%);


    --main-text-1:hsl(210, 3%, 15%);
    --main-text-2:hsl(210, 3%, 30%);
    --main-text-3:hsl(210, 3%, 45%);

    --text-1000: 4.5rem;
    --text-700: 1.953rem;
    --text-600: 1.563rem;
    --text-500: 1.25rem;
    --text-400: 1rem;
    --text-300: 0.8rem;
    --text-200: 0.64rem;
    
    --gap-1000: 5.653rem;
    --gap-800: 3.998rem;
    --gap-600: 2.827rem;
    --gap-400: 1.999rem;
    --gap-300: 1.414rem;
    --gap-200: 1rem;
    --gap-100: 0.707rem;
    --gap-50: 0.25rem;

    --code-color: #291b00;

    .orange {
        --code-color : #FFA500;
        --secondary-code-color: hsl(from var(--code-color) h s l / .25);
    }
    .violet {
        --code-color : #800080;
        --secondary-code-color: hsl(from var(--code-color) h s l / .25);
    }
    .rose {
        --code-color : #FFC0CB;
        --secondary-code-color: hsl(from var(--code-color) h s l / .5);
    }
    .vert {
        --code-color : #008000;
        --secondary-code-color: hsl(from var(--code-color) h s l / .25);
    }
    .blue {
        --code-color : #0000FF;
        --secondary-code-color: hsl(from var(--code-color) h s l / .25);

    }

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #f5f8fd;
    line-height: 1.5625;
    letter-spacing: .025rem;
    color: var(--main-text-1);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: column;
}

body ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px var(--transparent-bg-1);;
    background-color: var(--off-white-3);
    visibility: hidden
}

body ::-webkit-scrollbar-thumb {
    background-color: var(--gray-bg);
    visibility: hidden
}

body :hover::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px var(--transparent-bg-1);;
    background-color: transparent;
    visibility: visible
}

body ::-webkit-scrollbar {
    width: 6px;
    background-color: var(--off-white-3);
    visibility: visible
}

body :hover::-webkit-scrollbar-thumb {
    background-color: var(--main-text-1);
    visibility: visible
}

body *,
body :after,
body :before {
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
    vertical-align: top;
    max-width: 100%;
}

::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
::-moz-placeholder,
textarea::-moz-placeholder {
    color: var(--main-text-3);
    font-size: 1em;
    line-height: 1.6em
}

:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: var(--main-text-3);
    font-size: 1em;
    line-height: 1.6em;
    font-weight: 700
}

input:focus:enabled::-webkit-input-placeholder,
input:hover:enabled::-webkit-input-placeholder,
input:focus:enabled::-moz-placeholder,
input:hover:enabled::-moz-placeholder,
input:focus:enabled:-ms-input-placeholder,
input:hover:enabled:-ms-input-placeholder,
input:focus:enabled:-moz-placeholder,
input:hover:enabled:-moz-placeholder {
    color: var(--main-text-1)
}

img {
    object-fit: cover
}

dialog{
    margin: auto;
    cursor: auto;
    border: 5px;
    max-width: 60vw;
    background: transparent;
    &::backdrop {
        background-color: rgba(0, 0, 0, 0.5);
    }


    div{
        margin: auto;
        gap: var(--gap-200);

        span {
            display: flex;
            max-width: 20rem;
            gap: var(--gap-600);

            & > :is(a, button) {
                font-size: var(--text-400) !important;
            }
        }

    }
}

p, li {
    max-width: 50ch;
    text-wrap: pretty;
    overflow: hidden;

    
    & + p {
        margin-top: var(--gap-100);
    }

}

a,
a:active {
    text-decoration: none;
    color: inherit;
    text-underline-offset: .3em;
}

table{
    border-collapse: collapse;
    width: 100%;
    padding: 0;
    display: table;

    tr{
        width: 100%;
        position: relative;

        td, th{
            border: 1px solid var(--main-text-3);
            padding: .25rem .5rem;
        }

    }
   
}

button{
    all:unset;
    cursor: pointer;
    box-sizing: border-box;
}

button,
input, .input,
select,
textarea{
    background-color: #fff;
    color: inherit;
    font: inherit;
    line-height: 3rem;
    height: 3rem;
    width: min(100%, 15rem);
    font-size: var(--text-500);
    padding: var(--gap-50) var(--gap-100) ;
    border: 2px solid var(--main-color-2);
    border-radius: .5rem;
    outline: 0;
    transition: border .3s;
    

    &:is(:focus, :hover)
    {
        border-color: var(--main-text-1)
    }

    &:disabled{
        background-color: lightgray;
        color: gray;
        border-color: gray;
    }

    &.poctalCode{
        width: 8rem;
    }

    &:is(.input, button)
    {
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        width: max-content;
    }

    &:is(button) {
        background-color: rgb(16, 110, 190);
        color: #fff;
    }
    
    &:is(textarea) {
        min-height: 7rem;
        width: 50rem;
    }
    

}


.controlError {
    color: red;
    border: 2px solid red;
}

.error, .warning, .note, .success{
    padding: var(--gap-100);
    display: flex;
    flex-direction: column;
    max-width: 50rem;
    text-wrap: balance;
    border: 2px solid;
    border-radius: 5px;
    color: rgb(163, 0, 0);
    background-color: rgb(214 150 151);
}

.warning{
    color: rgb(89 0 0);
    background-color: rgb(255 177 144);
}

.note{
    color: rgb(0, 12, 146);
    background: rgb(184 203 255);
}

.success{
    color: rgb(13, 99, 0);
    background-color: rgb(112, 200, 130);
}

.displayNone{
    display: none;
}

form{

    display: flex;
    flex-flow: column;
    gap: var(--gap-400);

    fieldset {
        --this-padding: var(--gap-100);;
        display: flex;
        flex-flow: row wrap;

        gap: var(--gap-200);
        padding: var(--this-padding);
        background: #ecf5fe;
        border: none;

        &:last-of-type:has(button + *){
            justify-content: space-between;
        }

        > span{
            position: relative;
            place-self: start;
            display: flex;
            flex-direction: column;

            span {
                display: flex;
                gap: var(--gap-50);
            }

            .suggestions{
                position: absolute;
                z-index: 1;
                top: 100%;
                left: 0;
                background: #fff;
                display: flex;
                flex-direction: column;
                width: 100%;
                padding: var(--this-padding);

                &:empty{
                    opacity: 0;
                    pointer-events: none;
                }

                li{
                    margin: 0;
                    display: block;
                    padding: var(--gap-50);
                    font-weight: 500;
                    cursor: pointer;

                    &:hover, &:focus{
                        background-color: rgb(204, 149, 255);
                    }
                }
            }

        }

    }

    &.tinyVerticalForm{
        
        span {
            width: 100%;
        }
    }

}

.selected {
    color: inherit;
    font-weight: 400;
    transition: .4s ease-in
}

.active {
    background-color: #00a50052;
    border-color: green;
    pointer-events: none;
    font-weight: 900;
}

/* content style */

body > header {    

    display: flex;
    align-items: center;
    gap: var(--gap-300);
    padding: var(--gap-300);
    background: #dcf1ff;
    position: sticky;
    top: 0;
    z-index: 1;

    img{
        width: 12rem;
        margin-right: auto;
    }

    nav {

        flex: 1;
        display: flex;
        align-items: center;
        padding: var(--gap-300);
        gap: var(--gap-300);
        background: #006ab10a;
        height: 4rem;

        &:first-of-type{
            a:first-of-type{
                background-color: #009a0f;
                color: #fff;
            }    
        }

        a {
            ---nav-txt-clr: #006BB6;
            --bg-color: #fff;
            padding: var(--gap-50) var(--gap-200);
            border-radius: 5px;
            background-color: var(--bg-color);
            height: 3rem;
            line-height: 1;
            display: flex;
            align-items: center;
            color: var(---nav-txt-clr);
            font-weight: 600;
            box-shadow: var(--elevation-1);

            &:hover, &:focus{
                background-color: var(---nav-txt-clr);
                color: var(--bg-color);
            }
        }

        +nav{
            flex: 0;

            a{
                height: 2rem;
                font-size: var(--text-300);
                font-weight: 500;

                span{
                    max-width: 10rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: block;
                }
            }
        }

    }

}

main {
    width: min(80rem, 100%);
    padding: var(--gap-300);
    margin: 0 auto;
    min-height: 100vh;
    gap: var(--gap-400);
    display: flex;
    flex-direction: column;

    &.notSignedIn{
        /* padding: var(--gap-1000) max(calc((100vw - 80rem) / 2), var(--gap-1000)); */
    }
}

.rowFlex{
    display: flex;
    gap: var(--gap-400);
}

.gap{

    section {
        gap: var(--gap-200);
        display: flex;
        flex-direction: column;

        > header {
            background-color: #dcf1ff;
            display: flex;
            padding: var(--gap-100);
            justify-content: start;
            align-items: center;
            font-size: var(--text-300);
            gap: var(--gap-100);

            a{
                padding: var(--gap-100) var(--gap-200);
                border: 1px solid;
            }
        }
    }

}

.gapImageContainer{
    position: relative;

    div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}


.appointmentSection{

    > * {
        display: flex;
        gap: var(--gap-400);
        grid-column: 1 / -1;
    }

    > section {
        display: flex;
        gap: var(--gap-200);

        div {
            display: flex;
            gap: var(--gap-600);
            padding: var(--gap-100);
            background-color: #e5edfe;
            background-color: var(--secondary-code-color);

            span {
                display: flex;
                flex-direction: column;
                gap: var(--gap-50);
                min-width: 20rem;
                padding: var(--gap-50);
                background-color: #ffffff69;

                em {
                    font-weight: 700;
                    color: #514a4a;
                }
            }
        }

    }

    > article {
        flex-direction: column;

        > div {
            display: flex;
            flex-direction: column;
            gap: var(--gap-200);
            width: 50rem;
            margin: auto;
            background: var(--secondary-code-color);
            padding: var(--gap-200);

            header, footer{
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #00000047;
                padding: var(--gap-100);

            }

            footer {
                background-color: transparent;
                button {
                    font-size: var(--text-400);
                }  
            }
        }

        > aside {
            position: relative;

            > button {
                font-size: var(--text-300);
                height: 2rem;
                width: max-content;
                position: absolute;
                right: 1rem;
                border-width: 1px;

                &:hover{
                    background-color: red;
                    color: #fff;
                    border-color: red;
                }
            }

        }

        > header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            padding: var(--gap-100);
            background-color: #fff;

            sup{
                font-weight: 300;
                width: 100%;
            }

            div{
                display: flex;
                font-size: var(--text-200);
                gap: var(--gap-100);

                a {
                    font-size: var(--text-300);
                    height: 2rem;
                    width: max-content;
                    border-width: 1px;
                    box-shadow: var(--elevation-1);

                    &:hover {
                        background-color: rgb(255, 1, 1);
                        color: white
                    }
                }
            }
        }

        > section {

            border: 2px solid var(--code-color);
            background: #fff;
            border-radius: 5px;
            overflow: hidden;

            > * {
                display: flex;
                flex-direction: column;
                padding: var(--gap-100) var(--gap-200);
                gap: var(--gap-100);
            }

            > header {

                background: #fff1f1;

                h3{
                    display: flex;
                    gap: var(--gap-100);

                    sup {
                        color: #fff;
                        background-color: #00d900;
                        font-weight: bold;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: var(--text-200);
                        padding: 0 var(--gap-100);
                        border-radius: 5px;
                    }
                }

                div {
                    display: flex;
                    gap: var(--gap-100);

                    em {
                        all: unset;
                        font-weight: 700;
                        aspect-ratio: 1;
                        place-self: center;
                        width: 5ch;
                        font-size: var(--text-400);
                        background: #ffdedd;
                        border: 2px solid #ffb0ad;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                        padding: var(--gap-50);
                        line-height: 1;
                        color: #650400;
                        span{
                            font-size: .8em;
                            font-weight: 500;
                        }
                    }

                    strong {
                        font-weight: 500;
                        display: flex;
                    }
                }
            }

            > footer {

                > span {
                    background-color: #d5ffcc;
                    display: flex;
                    gap: var(--gap-100);
                    padding: var(--gap-100);
                    align-items: center;
                    width: max-content;
    
                    em{
                        font-weight: bold;
                    }
                }

                div {
                    gap: var(--gap-200);
                    display: flex;
                    flex-wrap: wrap;
                    
                    a {
                        border: 1px solid gray;
                        padding: var(--gap-50) var(--gap-200);
                        border-radius: 5px;
                        box-shadow: var(--elevation-1);
    
                        &:hover, &:focus{
                            color: #fff;
                            background-color: var(--code-color);
                        }
                    }

                }

            }
    
        }

    }

}

.callBack{

    table {

        .appointmentAvailable{
            background: #dcf5e3;
            color: #02a202;
            font-weight: 500;

            a::after {
                content: '';
                position: absolute;
                inset: 0;
            }
        }

        em{
            display: block;
            font-size: var(--text-300);
        }

        td em{
            display: block;
            font-size: var(--text-300);
        }
    }
}


.bookedSection{

    > section {
        display: grid;
        grid-template-columns: 1fr auto;
        margin: var(--gap-400) auto;
        gap: var(--gap-300);
        padding: var(--gap-300);

        > * {
            grid-column: 1 / 2;
            gap: var(--gap-200);
            padding: var(--gap-200);
            display: flex;
            flex-direction: column;
            background: #0000000d;
        }

        > header {

            font-size: var(--text-600);
            font-weight: 500;
            justify-content: center;
            align-items: center;
            background-color: #ffffff2f;
            width: max-content;
            margin: var(--gap-400) auto;
            border-radius: 1rem;
            
            em{
                font-weight: bolder;
            }
        }

        > article {

            header{
                font-size: var(--text-500);
                font-weight: 400;
            }

        }

        > aside {
            grid-column: 2 / 3;
            grid-row: 1 / 4;
            background: #ffffff0b;

        }
    }
}