.container-time-slot-picker {
     max-width: 1250px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 600px 1fr;
     gap: 20px;
     align-items: start;
 }
@media (max-width: 767px) {
    .container-time-slot-picker {
        grid-template-columns: 1fr;
    }
}
 .card {
     background: #fff;
     backdrop-filter: blur(10px);
     border-radius: 15px;
     padding: 20px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .calendar-section h2,
 .form-section h2 {
     color: #2d3748;
     margin-bottom: 15px;
     font-size: 20px;
     font-weight: 600;
 }

 #calendar {
     margin-bottom: 15px;
     max-width: 600px;
 }

 .fc {
     border: none;
 }

 .fc-theme-standard .fc-scrollgrid {
     border: 1px solid #e2e8f0;
     border-radius: 12px;
     overflow: hidden;
 }

 .fc-button-primary {
     background: #DCC5B7;
     border: none;
     border-radius: 6px;
     padding: 6px 12px;
     font-weight: 500;
     font-size: 12px;
 }

 .fc .fc-toolbar-title {
    font-size: 16px !important;
 }

 .fc-button-primary:hover {
     background: #DCC5B7;
 }

 .fc-daygrid-day.available-day {
     background-color: #fff;
     cursor: pointer;
 }

 .fc-daygrid-day.selected-day {
     background-color: #28323B !important;
     color: white;
 }

 .fc-daygrid-day.selected-day .fc-daygrid-day-number {
     color: white;
 }

 .time-slots {
     /* margin-top: 15px; */
 }

 .time-slots h3 {
     color: #28323B;
     margin-bottom: 12px;
     font-size: 16px;
 }

 .time-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 8px;
 }

 .time-slot {
     padding: 8px 12px;
     border: 2px solid #e2e8f0;
     border-radius: 8px;
     background: white;
     text-align: center;
     cursor: pointer;
     font-weight: 500;
     font-size: 14px;
     transition: all 0.3s ease;
 }

 .time-slot:hover {
     border-color: #28323B;
     background: #f7fafc;
 }

 .time-slot.selected {
     background: #28323B;
     color: white;
     border-color: #28323B;
 }

 .form-section h2 {
     color: #2d3748;
     margin-bottom: 15px;
     font-size: 20px;
     font-weight: 600;
 }

 .form-group {
     margin-bottom: 15px;
 }

 .form-group label {
     display: block;
     margin-bottom: 6px;
     color: #4a5568;
     font-weight: 500;
     font-size: 14px;
 }

.iti {
    width: 100%;
}

 .form-group input,
 .form-group textarea {
     width: 100%;
     padding: 10px 12px;
     border: 2px solid #e2e8f0;
     border-radius: 8px;
     font-size: 14px;
     transition: border-color 0.3s ease;
     background: white;
 }

 .form-group input:focus,
 .form-group textarea:focus {
     outline: none;
     border-color: #28323B;
 }

 .phone-input {
     display: flex;
     align-items: center;
 }

 .country-code {
     display: flex;
     align-items: center;
     padding: 10px 12px;
     background: #f7fafc;
     border: 2px solid #e2e8f0;
     border-right: none;
     border-radius: 8px 0 0 8px;
     font-weight: 500;
     font-size: 14px;
 }

 .flag {
     width: 20px;
     height: 15px;
     margin-right: 8px;
     background: linear-gradient(to bottom, #00732f 33%, white 33%, white 66%, #ce1126 66%);
     border-radius: 2px;
 }

 .phone-number {
     flex: 1;
     border-radius: 0 8px 8px 0 !important;
 }

 .error-message {
     color: #e53e3e;
     font-size: 12px;
     margin-top: 4px;
 }

 .book-btn {
     width: 100%;
     padding: 12px;
     background: #DCC5B7;
     color: white;
     border: none;
     border-radius: 10px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 }

 .book-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
 }

 .book-btn:disabled {
     background: #cbd5e0;
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
 }

 .bank-details {
     background: #f7fafc;
     border: 2px solid #e2e8f0;
     border-radius: 10px;
     padding: 15px;
     margin-top: 15px;
 }

 .bank-details h3 {
     color: #2d3748;
     margin-bottom: 12px;
     font-size: 16px;
     font-weight: 600;
 }

 .bank-info {
     display: grid;
     gap: 6px;
 }

 .bank-info div {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .bank-info strong {
     color: #4a5568;
     min-width: 100px;
     font-size: 13px;
 }

 .bank-info span {
     color: #2d3748;
     font-family: 'Courier New', monospace;
     font-size: 13px;
 }

 .selected-datetime {
     background: #e6fffa;
     border: 2px solid #38b2ac;
     border-radius: 10px;
     padding: 12px;
     margin-bottom: 15px;
     display: none;
 }

 .selected-datetime.show {
     display: block;
 }

 .selected-datetime h4 {
     color: #2d3748;
     margin-bottom: 6px;
     font-size: 14px;
 }

 .selected-datetime p {
     color: #4a5568;
     font-weight: 500;
     font-size: 14px;
 }

 @media (max-width: 768px) {
     .container {
         grid-template-columns: 1fr;
         gap: 15px;
         max-width: 100%;
     }

     .card {
         padding: 15px;
     }

     .time-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }