:root {

    --primary-color: #0891b2;

    --secondary-color: #f8f9fc;

    --accent-color: #2e59d9;

    --text-color: #5a5c69;

}



body {

    background-color: var(--secondary-color);

    color: var(--text-color); 

    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

}



.booking-container {

    max-width: 1000px;

   

    background: white;

    border-radius: 10px;

    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);

    overflow: hidden;

}



.booking-header {

    background: var(--primary-color);

    color: white;

    padding: 10px;

    text-align: center;

}



.booking-steps {

    display: flex;

    justify-content: space-between;

    padding: 20px;

    background-color: #f1f3f9;

}



.step {

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

    z-index: 1;

    margin-right: 20px;

}



.step-number {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background-color: #e0e0e0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    margin-bottom: 10px;

    transition: all 0.3s ease;

}



.step.active .step-number {

    background-color: var(--primary-color);

    color: white;

}



.step.completed .step-number {

    background-color: #28a745;

    color: white;

}



.step-title {

    font-size: 14px;

    text-align: center;

    color: #6c757d;

    transition: all 0.3s ease;

}



.step.active .step-title {

    color: var(--primary-color);

    font-weight: bold;

}



.step.completed .step-title {

    color: #28a745;

}



.booking-content {

    padding: 10px;

    min-height: 400px;

}





.booking-step {

    display: none;

    animation: fadeIn 0.5s ease;

}



.booking-step.active {

    display: block;

}



.booking-footer {

    padding: 20px;

    border-top: 1px solid #e3e6f0;

    display: flex;

    justify-content: space-between;

}



.category-card,

.service-card,

.employee-card {

    cursor: pointer;

    transition: all 0.3s ease;

    border: 2px solid transparent;

    margin-bottom: 20px;

    height: 100%;

}



.category-card:hover,

.service-card:hover,

.employee-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

}



.category-card.selected,

.service-card.selected,

.employee-card.selected {

    border-color: var(--primary-color);

    background-color: rgba(78, 115, 223, 0.1);

    border: 1px solid #4087ff !important;

}





.card-icon {

    font-size: 2rem;

    margin-bottom: 15px;

    color: var(--primary-color);

}



.summary-item {

    margin-bottom: 5px;

    padding-bottom: 5px;

    border-bottom: 1px solid #e3e6f0;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes slideIn {

    from {

        transform: translateX(50px);

        opacity: 0;

    }



    to {

        transform: translateX(0);

        opacity: 1;

    }

}



.animate-slide-in {

    animation: slideIn 0.5s ease forwards;

}



@media(min-width:720px)

{

    .booking-content {

    padding: 20px;

    min-height: 400px;

}



}