/* import font Garamond & Josefin */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

/* custom variable */
:root { 
    --essential-blue: #001D68;
    --essential-brown: #3d2a25;
}

/* custom default  */
* {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;  
}
h1,h2,h3,h4,h5,h6 {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal; 
}

p {
    font-family: "Josefin Sans", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
a {
    color : var(--essential-brown) !important;
}

/* Webkit browsers (Chrome, Safari, etc.) */
::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04); /* Color of the track */
    border-radius: 10px; /* Rounded corners of the track */
}

::-webkit-scrollbar-thumb {
    /* background: var(--essential-brown); Color of the thumb */
    border-radius: 10px; /* Rounded corners of the thumb */
}

::-webkit-scrollbar-thumb:hover {
    /* background: var(--essential-brown); Color of the thumb on hover */
}


/* custom bootstrap  */
.nav-link.active {
    background-color: var(--essential-brown) !important;
    color: white !important;
}
.card-header { 
    /* margin : 1rem; */
    padding : 1rem; 
    background-color: white;
    box-shadow: var(--bs-box-shadow) !important;
    border-radius: .5rem !important;
}
.card-header * {
    margin : 0px !important;
}

.input-group-text { 
    background-color: transparent !important;
    border: 0px;
    border-bottom: 1px solid var(--essential-brown);
}


/* additional class  */
.es-garamond {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.es-josefin {
    font-family: "Josefin Sans", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.bg-es-blue {
    background-color:var(--essential-brown) !important;
}
.text-es-blue { 
    color: var(--essential-brown) !important;
}
.btn-outline-es-blue { 
    background-color: white !important;
    border: 1px solid var(--essential-brown);
    color: var(--essential-brown);
    transition-duration: 0.9ms;
    padding-left: 1rem;
    padding-right: 1rem;
    font-weight: bold;
}
.btn-outline-es-blue:hover { 
    background-color: var(--essential-brown) !important;
    color: white !important;
}
.btn-outline-es-blue:active { 
    background-color: var(--essential-brown) !important;
    color: white !important;
}
.btn-outline-es-blue:focus { 
    background-color: var(--essential-brown) !important;
    color: white !important;
}

.btn-es-blue { 
    background-color: var(--essential-brown);
    color: white !important;
    transition-duration: 0.9ms;
    padding-left: 1rem;
    padding-right: 1rem;
    font-weight: bold;
}
.btn-es-blue:hover { 
    background-color: var(--essential-brown);
    color: white !important;
}
.btn-es-blue:active { 
    background-color: var(--essential-brown);
    color: white !important;
}
.btn-es-blue:focus { 
    background-color: var(--essential-brown);
    color: white !important;
}

.btn-es-blue:disabled { 
    cursor: not-allowed;
}
.btn-es-blue.active { 
    background-color: var(--essential-brown);
    color: white !important;
}


/* component  */

.treatments-card { 
    /* margin-top:-3rem; */
}

.treatments-price-badge{
    background-color:var(--essential-brown);
    color : white;
    padding : .5rem 1rem;
    font-size : 16px;
    position : absolute;
    top: -15px;
    right: 10px;
    z-index: 9;
}

.treatments-book  {
    display: flex;
    align-self: center;
    align-items: center;
    justify-self: end;
    justify-content: end;
    /* margin-bottom: -2.5rem; */
    z-index: 9;
    gap: 1rem;
}
.treatments-book.added {
    background-color: var(--essential-brown) !important;
    color: white !important;
    border: 1px solid white;
}
.treatments-book.added:hover  { 
    background-color: var(--essential-brown) !important;
    color: white !important;
}
 
.iti.iti--allow-dropdown.iti--show-flags {
    width: 100%;
}
.choices__list--dropdown {
    height: 0;
  }
  
  .choices__list--dropdown.is-active {
    height: auto;
  }
.choices__inner {
    background-color: transparent;
    border: 0px;
    border-bottom: 1px solid black;
    font-size: 16px;
}
.form-control { 
    border: 0px;
    border-bottom: 1px solid black;
    border-radius: 0px;
    background-color: transparent;
}
.form-control:focus { 
    background-color: transparent;
    box-shadow: none;
}
.form-floating label::after { 
    background-color: transparent !important;
}


/* calendar  */
.prev-btn  { 
    height:  fit-content;
}
.next-btn { 
    height: fit-content;
}
.calendar { 
    max-width:100%;
    margin: auto;
    border: 0px ;
    padding :1rem;
}
.weekdays, .days {
    justify-content: space-between;
    width : 100%;
    margin : auto;
    margin-bottom : 10px
}
.weekdays { 
    border : 1px solid var(--essential-brown);
    border-radius : 10px;
    background-color: white;
}
.weekdays .day {
    width :calc(100% / 7 - 10px);
    margin:5px;
    font-size: 13px;
    padding: 0px;
}

.days .day {
    width: calc(100% / 7 - 10px);
    height: 50px;
    font-size: 14px;
    padding : 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 10px;
    margin: 5px;
    background-color :white;
    border: 1px solid var(--essential-brown);
    color: black;
    transition-duration: 0.3s;
}
@media (min-width : 768px) {
    .weekdays .day { 
        width :calc(100% / 7 - 15px );
        margin:5px;
        font-size : 14px
        
    }
    .days .day { 
        width : calc(100% / 7 - 15px);
        margin : 5px;
        height : 60px
    }
}
.days .day:hover { 
    cursor: no-drop;
}
.days .day:not(.prev):not(.next):not(.sold):hover {
    background-color: var(--essential-brown);
    color: white;
    cursor: pointer;
}

.days .day.prev {
    color : var(--bs-gray-500);
    border-color: var(--bs-gray-500);
}
.days .day.next {
    color : var(--bs-gray-500);
    border-color: var(--bs-gray-500);
}

.days .day.sold { 
    color : var(--bs-danger);
    border-color : var(--bs-gray-500);
}

.days .day.selected { 
    color : white;
    background-color: var(--essential-brown);
}

.treatment-item { 
    background:white;
    padding : 1rem;
}