.sg-booking-form {max-width: 600px;margin: auto;font-family: Arial, sans-serif;}
.sg-booking-form h2 {color: #333;font-size: 20px;margin-bottom: 10px;}
.sg-booking-form input, .sg-booking-form select, .sg-booking-form textarea {width: 100%;padding: 10px;margin-bottom: 15px;border: 1px solid #ccc;border-radius: 5px;}
.sg-booking-form button {background-color: #000;color: #fff;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;width: 100%;}
.sg-booking-form button:hover {background-color: #444;}
.sg-booking-form p {font-size: 12px;color: #666;}
.sg-booking-form .form-group {display: flex;justify-content: space-between;margin-bottom: 15px;}
.sg-booking-form .form-group input {width: 48%;}
*{margin: 0;padding: 0;box-sizing: border-box;}
.sg-calendar-wrapper{background: #fff;border-radius: 10px;border: solid 1px #000000;}
.sg-calendar-wrapper header{display: flex;align-items: center;padding: 25px 30px 10px;justify-content: space-between;}
header .icons{display: flex;}
header .icons span {height: 38px;width: 38px;margin: 0 1px;cursor: pointer;color: #878787;text-align: center;line-height: 38px;font-size: 1.9rem;user-select: none;border-radius: 50%;justify-content: center;display: flex;}
.material-symbols-rounded i, .material-symbols-rounded svg {font-size: 18px;color: currentColor;transition: all 0.3s ease;width: 18px;}
.icons span:last-child{margin-right: -10px;}
header .icons span:hover{background: #f2f2f2;}
header .current-date{font-size: 1.45rem;font-weight: 500;}
.calendar{padding: 20px;}
.calendar ul{display: flex;flex-wrap: wrap;list-style: none;text-align: center;}
.calendar .days{margin-bottom: 20px;}
.calendar li{color: #333;width: calc(100% / 7);font-size: 1.07rem;}
.calendar .weeks li{font-weight: 500;cursor: default;}
.calendar .days li{z-index: 1;cursor: pointer;position: relative;margin-top: 30px;}
.days li.inactive{color: #aaa;}
.days li.active{color: #fff;}
.days li::before{position: absolute;content: "";left: 50%;top: 50%;height: 40px;width: 40px;z-index: -1;border-radius: 50%;transform: translate(-50%, -50%);}
.days li.active::before{background: #337157;}
.days li:not(.active):hover::before{background: #f2f2f2;}
#booking-spinner {border: 4px solid #f3f3f3;border-top: 4px solid #337157;border-radius: 50%;margin-top: 10px;width: 20px;height: 20px;animation: spin 2s linear infinite;}
@keyframes spin {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
#booking-message {margin-top: 10px;color: green;font-size: 16px;}
.error-message {margin-top: 10px;color: red;font-weight: bold;font-size: 16px;}