@font-face {
    font-family: "OpenSans";
    src: url("../resources/fonts/open_sans.ttf");
}

@font-face {
    font-family: "inter_regular";
    src: url("../resources/fonts/Inter_Regular.ttf");
}

@font-face {
    font-family: "inter_bold";
    src: url("../resources/fonts/Inter_Bold.ttf");
}

@font-face {
    font-family: "poppins_regular";
    src: url("../resources/fonts/Poppins_Regular.ttf");
}

@font-face {
    font-family: "poorich";
    src: url("../resources/fonts/POORICH.TTF");
}

:root {
    --colorBg: #ffffff;
    --colorText: #3F403F;
    --colorMain: #475841;
    --colorOther: #9FB8AD;

    --container: 120rem;
    --primary: hsl(201.43, 13.21%, 58.43%);
    --white: hsl(0, 0%, 100%);
    --white-light: hsl(0, 0%, 99%);
    --box-shadow: hsl(220, 7.32%, 91.96%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--colorBg);
}

.appointment-sec1-div1 {
    max-width: 1300px;
    margin: auto;
}

.appointment-sec1-div2 {
    width: 98%;
    column-gap: 1rem;
    display: flex;
    flex-direction: row;
    margin: auto;
}

.appointment-sec1-div3 {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    row-gap: 1rem;
}

.appointment-sec1-div4 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: fit-content;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
    border-radius: 15px;
    margin: auto;
}

.appointment-logo {
    width: 220px;
}

.appointment-sec1-div5 {
    width: 100%;
    height: fit-content;
    padding: 1rem;
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    border-radius: 15px;


}

.appointment-span1 {
    font-size: 1.5rem;
    font-family: "Font Awesome 5 Free";
}

.appointment-hr1 {
    width: 100%;
    margin: auto;
    border-top: dashed 1px #000000;
    background: transparent;
}

.appointment-sec1-div6 {
    column-gap: 1rem;
    margin: 1rem 0rem;
    width: 100%;
    display: flex;
}

.appointment-span2 {
    width: 50%;
    text-align: left;
}

.appointment-span3 {
    width: 50%;
    text-align: right;
}

.appointment-sec1-div7 {
    width: 75%;
}

.collapsible {
    overflow: hidden;
    margin-bottom: 1rem;
}

.collapsible .checkbox-input {
    display: none;
}

.appointment-expand {
    display: flex;
    flex-direction: row;
    width: 98%;
    margin: auto;
    padding: 0.5rem 0;
}

.appointment-expand-span {
    width: 90%;
    margin-left: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
    transition: color 0.2s ease;
}

.appointment-expand-span:hover {
    color: #028304;
}

.appointment-sec1-div8 {
    width: 10%;
    display: flex;
    justify-content: end;
    align-items: center;
}

.appointment-expand-img {
    width: 1.1rem;
    transition: transform 0.3s ease;
}

/* Rotate arrow when expanded */
.collapsible input:checked ~ .appointment-expand .appointment-expand-img {
    transform: rotate(180deg);
}

.appointment-hr2 {
    width: 100%;
    border-top: dashed 1px #000000;
    background: transparent;
    margin-bottom: 1rem;
}

.appointment-cards-search {
    width: 98%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 0;
    margin-bottom: 1rem;
}

.time-search {
    width: 16rem;
    padding: 0.45rem;
    border: 1px dashed rgba(2, 2, 2, 0.521);
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    background-color: #f5f7f131;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
    font-size: 0.9rem;
    opacity: 80%;
    transition: all 0.2s ease;
}

.time-search:focus {
    outline: none;
    border-color: #028304;
    opacity: 100%;
    background-color: rgba(255, 255, 255, 0.8);
}

.search-btn {
    display: flex;
    justify-content: start;
    align-items: center;
    border: none;
    padding: 0.1rem;
    background-color: #f5f7f131;
    box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-btn:hover {
    background-color: rgba(2, 131, 4, 0.1);
}

.search-btn-img {
    width: 1.3rem;
    margin: 0.4rem;
}

/* Enhanced collapsible cards with smooth animations */
.appointment-cards {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    
    /* Default collapsed state - controlled by JavaScript */
    max-height: 0;
    opacity: 0;
    
    /* Smooth transitions */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease-out,
                padding 0.3s ease;
    
    /* Prevent content from showing during collapse */
    padding: 0;
}

/* Expanded state - applied by JavaScript */
.appointment-cards.expanded {
    max-height: 600px;
    opacity: 1;
    padding: 1rem 0;
}

/* Custom scrollbar for cards container when needed */
.appointment-cards::-webkit-scrollbar {
    width: 6px;
}

.appointment-cards::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.appointment-cards::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.appointment-cards::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Individual appointment card styling */
.appointment-card {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 20px;
    min-width: 200px;
    max-width: 220px;
    overflow: hidden;
    margin: 15px 15px;
    
    /* Smooth transitions for search filtering */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

/* Card hover effect */
.appointment-card:hover {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transform: translateY(-2px);
}

/* Search animation states */
.appointment-card.search-hidden {
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
    pointer-events: none;
}

.appointment-card.search-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: all;
}

.appointment-status {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 7rem;
    height: 0.5rem;
    background-color: #028304;
    top: 0;
    border-radius: 20px;
}

.appointment-status1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 7rem;
    height: 0.5rem;
    background-color: #ff0000;
    top: 0;
    border-radius: 20px;
}

.appointment-card-details {
    padding: 1rem;
}

.appointment-details {
    display: flex;
    flex-direction: column;
    margin: 0.5rem;
}

.appointment-card-span1 {
    color: #767676;
    font-size: small;
}

.appointment-card-span2 {
    color: #028304;
    font-weight: 600;
}

.appointment-btn1 {
    width: 100%;
    background-color: #028304;
    border: none;
    padding: 0.5rem 1.5rem;
    color: white;
    font-weight: bold;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-content: center;
    margin-top: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.appointment-btn1:hover:not(:disabled) {
    background-color: #026a03;
    transform: translateY(-1px);
}

.appointment-btn1:disabled {
    background-color: #02830431;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Enhanced modal styling */
.model-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    opacity: 0;
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease;
    z-index: 5;
}

.model-container.show {
    pointer-events: auto;
    opacity: 1;
}

.model {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    padding: 30px 50px;
    width: 1200px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.7);
    transition: transform 0.3s ease;
}

.model-container.show .model {
    transform: scale(1);
}

.model-div1 {
    width: 100%;
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
    margin-bottom: 2rem;
}

.model-div2 {
    width: 92%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 1rem;
    border-radius: 10px;
}

.model-div3 {
    width: 8%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.model-div3:hover {
    background-color: #f5f5f5;
}

.model-span1 {
    font-size: 1.5rem;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
}

.close-btn {
    width: 20px;
    transition: transform 0.2s ease;
}

.close-btn:hover {
    transform: scale(1.1);
}

.model-div4 {
    width: 100%;
    display: grid;
    grid-template-columns: 69% 30%;
    column-gap: 1rem;
}

.model-div5 {
    width: 100%;
    margin: auto;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 1rem;
    border-radius: 10px;
}

.model-div6 {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.model-span2 {
    color: #028304;
    font-size: 1.3rem;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
}

.model-div7 {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;

}

.model-div8 {
    width: 100%;
    display: flex;
    flex-direction: row;
    column-gap: 0.5rem;
    /* background-color: #027204; */
}

.model-div9 {
    width: 60%;
    display: flex;
    flex-direction: row;
    column-gap: 0.5rem;
    /* background-color: #000000; */
}

.model-div10 {
    width: 20%;
    display: flex;
    flex-direction: column;
    /* background-color: #000000; */

}

.model-div11 {
    width: 80%;
    display: flex;
    flex-direction: column;
}

.model-label {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}


.model-input1 {
    padding: 0.5rem;
    border-radius: 5px;
    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    border: solid #028304 1px;

}

.model-input1:focus {
    border: 2px solid #028304;
    /* Change to your desired color */
    outline: none;
    /* Remove default browser outline */
}

select::placeholder {
    font-size: 0.8rem;
    padding: 0.5rem;
}

input::placeholder {
    font-size: 0.8rem;
    padding: 0.5rem;
}

.model-div12 {
    width: 40%;
    display: flex;
    flex-direction: column;
    /* background-color: #9FB8AD; */

}

.model-div13 {
    width: 60%;
    display: flex;
    flex-direction: column;
    /* background-color: #ff0000; */

}

.model-div14 {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.model-input2 {
    height: 6rem;
    padding: 0.2rem;
    border-radius: 5px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border: solid #028304 1px;
}

.model-input2:focus {
    border: 2px solid #028304;
    /* Change to your desired color */
    outline: none;
    /* Remove default browser outline */
}


textarea::placeholder {
    font-size: 0.8rem;
    padding: 0.5rem;



}




.model-div15 {
    width: 100%;
    height: fit-content;
    margin: auto;
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 1rem;
    border-radius: 10px; */


}

.model-div16 {
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 1rem;
    border-radius: 10px;
}

.model-div20 {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.model-div17 {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.model-div18 {
    width: 50%;
    display: flex;
    flex-direction: row;
}

.model-div19 {
    width: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
}

.model-span3 {
    font-size: 0.9rem;
}

.model-span4 {
    font-size: 0.9rem;
    font-weight: bold;
}

.model-span5 {
    font-size: 1.2rem;
    font-weight: bold;
}

.model-span6 {
    font-size: 1.2rem;
    font-weight: bold;
}

.model-div21 {
    width: 100%;
    padding: 1rem 0rem 0rem 0rem;
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.model-btn1 {
    width: 100%;
    padding: 0.6rem;
    background-color: #028304;
    border: solid #028304;
    color: white;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: bold;
}

.model-btn1:hover {
    cursor: pointer;
    background-color: #027204;
    border: solid #027204;
    transition: ease-out 1s;
}


.model-btn2 {
    width: 100%;
    padding: 0.6rem;
    background-color: #ffffff;
    color: #028304;
    border: solid #028304;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: bold;
}

.model-btn2:hover {
    cursor: pointer;
    color: #ff0303;
    border: solid #ff0000;
    transition: ease-out 1s;

}

.model-hr {
    width: 100%;
    /* margin: auto; */
    border-top: dashed 1px #000000;
    background: transparent;
}

@media screen and (min-width:300px) and (max-width:449px) {
    .model-container {
        align-items: flex-start;
        height: 100vh;
        width: 100vw;
        padding: 80px 0;
        overflow-y: auto;
       

    }

    .model {
        padding: 20px 0px;
        min-width: 300px;
        max-width: 100%;
        margin: auto;
        min-height: fit-content;

    }

    .model-div4 {
        width: 99%;
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .model-div5 {
    width: 96%;
    padding: 0.5rem;

}


  
.model-div15 {
    width: 96%;

}


    .model-div8 {
        width: 100%;
        flex-direction: column;
        row-gap: 0.8rem;
    }

    .model-div9 {
        width: 100%;
        display: flex;
        flex-direction: row;
        column-gap: 0.5rem;
        /* background-color: #000000; */
    }

    .model-div10 {
        width: 20%;
        display: flex;
        flex-direction: column;
        /* background-color: #000000; */

    }

    .model-div11 {
        width: 80%;
        display: flex;
        flex-direction: column;
    }

    .model-div12 {
        width: 100%;
    }

    .model-div13 {
        width: 100%;
    }

    .model-div1 {
        width: 96%;
        display: flex;
        flex-direction: row;
        column-gap: 0.5rem;
        margin: auto;

    }

    .model-div2 {
        width: 85%;
        padding: 0.7rem;

    }

    .model-div3 {
        width: 15%;
        padding: 0.7rem;

    }
}

@media screen and (min-width:450px) and (max-width:699px) {
    .model-container {
        align-items: flex-start;
        height: 100vh;
        width: 100vw;
        padding: 10px 0;
        overflow-y: auto;
        padding: 20px 0;

    }

    .model {
        padding: 20px 30px;
        width: 1200px;
        max-width: 95%;
        margin: auto;
        min-height: fit-content;

    }

    .model-div4 {
        width: 98%;
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .model-div8 {
        width: 100%;
        flex-direction: column;
        row-gap: 0.8rem;
    }

    .model-div9 {
        width: 100%;
        display: flex;
        flex-direction: row;
        column-gap: 0.5rem;
        /* background-color: #000000; */
    }

    .model-div10 {
        width: 20%;
        display: flex;
        flex-direction: column;
        /* background-color: #000000; */

    }

    .model-div11 {
        width: 80%;
        display: flex;
        flex-direction: column;
    }

    .model-div12 {
        width: 100%;
    }

    .model-div13 {
        width: 100%;
    }

    .model-div1 {
        width: 100%;
        display: flex;
        flex-direction: row;
        column-gap: 1rem;

    }

    .model-div2 {
        width: 85%;
        padding: 0.7rem;

    }

    .model-div3 {
        width: 15%;
        padding: 0.7rem;

    }
}

@media screen and (min-width:700px) and (max-width:880px) {
    .model-div4 {
        width: 98%;
        display: grid;
        grid-template-columns: 50% 50%;
        column-gap: 1rem;
    }

    .model-div8 {
        width: 100%;
        flex-direction: column;
        row-gap: 0.8rem;
    }

    .model-div9 {
        width: 100%;
        display: flex;
        flex-direction: row;
        column-gap: 0.5rem;
        /* background-color: #000000; */
    }

    .model-div10 {
        width: 20%;
        display: flex;
        flex-direction: column;
        /* background-color: #000000; */

    }

    .model-div11 {
        width: 80%;
        display: flex;
        flex-direction: column;
    }

    .model-div12 {
        width: 100%;
    }

    .model-div13 {
        width: 100%;
    }

     .model-div15 {
       margin: 0%;
    }


    .model-div1 {
        width: 100%;
        display: flex;
        flex-direction: row;
        column-gap: 1rem;

    }

    .model-div2 {
        width: 90%;
        padding: 0.8rem;

    }

    .model-div3 {
        width: 10%;
        padding: 0.8rem;

    }

}

@media screen and (min-width:881px) and (max-width:954px) {
    .model-div4 {
        width: 100%;
        display: grid;
        grid-template-columns: 59% 40%;
        column-gap: 1rem;
    }

    .model-div9 {
        width: 58%;
        display: flex;
        flex-direction: row;
        column-gap: 0.5rem;
    }



}


@media screen and (min-width:300px) and (max-width:450px) {

    .appointment-sec1-div2 {

        flex-direction: column;

        row-gap: 1.5rem;

    }



    .appointment-sec1-div3 {

        width: 96%;

        flex-direction: column;

        margin: auto;

        /* row-gap: 0.5rem; */



    }



    .appointment-sec1-div4 {

        width: 100%;

        display: none;

    }



    .appointment-sec1-div5 {

        width: 100%;

    }



    .appointment-sec1-div7 {

        width: 96%;



    }



    .appointment-card {

        min-width: 150px;

        margin: 10px 10px;







    }





}



@media screen and (min-width:451px) and (max-width:950px) {

    .appointment-sec1-div2 {

        flex-direction: column;

        row-gap: 2rem;

    }



    .appointment-sec1-div3 {

        width: 96%;

        flex-direction: row;

        column-gap: 0.5rem;

        margin: auto;



    }



    .appointment-sec1-div4 {

        width: 50%;

        padding: 0.5rem 1rem;





    }



    .appointment-logo {

        width: 175px;

    }



    .appointment-sec1-div5 {

        width: 50%;

    }



    .appointment-span1 {

        font-size: 1.3rem;





    }





    .appointment-sec1-div6 {

        column-gap: 1rem;

        margin: 1rem 0rem;

        width: 100%;

        display: flex;

    }



    .appointment-span2 {

        width: 50%;

        text-align: left;

        font-size: 0.9rem;



    }



    .appointment-span3 {

        width: 50%;

        text-align: right;

        font-size: 0.9rem;

    }



    .appointment-sec1-div7 {

        width: 98%;



    }



    .appointment-card {

        min-width: 150px;

        margin: 10px 10px;







    }





}



@media screen and (min-width:951px) and (max-width:1150px) {

    .appointment-sec1-div2 {

        row-gap: 2rem;



    }



    .appointment-sec1-div3 {

        width: 30%;

        flex-direction: column;

        row-gap: 1.5rem;



    }



    .appointment-sec1-div4 {

        width: 100%;

        padding: 0.5rem 1rem;





    }



    .appointment-logo {

        width: 175px;

    }



    .appointment-sec1-div5 {

        width: 100%;

    }



    /* .appointment-span1 {

        font-size: 1.3rem;





    } */





    .appointment-sec1-div6 {

        column-gap: 1rem;

        margin: 1rem 0rem;

        width: 100%;

        display: flex;

    }



    /* .appointment-span2 {

        width: 50%;

        text-align: left;

        font-size: 0.9rem;



    }



    .appointment-span3 {

        width: 50%;

        text-align: right;

        font-size: 0.9rem;

    } */



    .appointment-sec1-div7 {

        width: 70%;



    }



    .appointment-card {

        min-width: 150px;

        margin: 10px 10px;







    }

}