/* General Form Styling */
#fbuilder {
    max-width: 800px; /* Reduce the width on larger screens */
    margin: 0 auto; /* Centre the form */
    background: #222; /* Dark theme background */
    padding: 20px;
    border-radius: 10px;
}

/* Improve Text Readability */
#fbuilder, #fbuilder label, 
#fbuilder span {
    color: #fff; /* White text for better contrast */
    font-size: 16px;
}

/* Improve Form Fields */
#fbuilder input[type=text], 
#fbuilder textarea, 
#fbuilder select { 
    border: 2px solid #555; /* Softer border */
    background: #333; /* Darker background */
    color: #fff; /* White text */
    padding: 8px;
    border-radius: 5px;
    width: 100%;
}

/* Submit Button */
#fbuilder .pbSubmit {
    background: #007bff;
    color: #fff;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#fbuilder .pbSubmit:hover {
    background: #0056b3;
}

/* Appointment Slots */
#fbuilder .timeslots button {
    background: #007bff;
    color: white;
    padding: 10px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#fbuilder .timeslots button.disabled {
    background: #444;
    color: #999;
}

/* Calendar Styling */
#fbuilder .calendar-container {
    text-align: center;
}

#fbuilder .calendar-container table {
    width: 100%;
}

#fbuilder .calendar-container td, 
#fbuilder .calendar-container th {
    padding: 10px;
    text-align: center;
}

#fbuilder .calendar-container .selected {
    background: #007bff;
    color: #fff;
    font-weight: bold;
}

/* Ensure Mobile is Unaffected */
@media (max-width: 768px) {
    #fbuilder {
        width: 100%;
    }
}

/* Available Slots - Improve Visibility */
#fbuilder .slots {
    background: #333; /* Darker background to blend with the theme */
    box-shadow: none;
}

#fbuilder .slots div {
    border: 0px;
}

#fbuilder .slots div a {
    background: #007bff; /* Bright blue for visibility */
    color: #fff; /* White text for contrast */
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
    transition: 0.3s;
}

#fbuilder .slots div a:hover {
    background: #0056b3; /* Slightly darker on hover */
}

/* Used Slots (Booked) */
#fbuilder .slots .htmlUsed a {
    text-decoration: line-through;
    background: #444;
    color: #888;
}

/* Selected Slots (Current Booking) */
#fbuilder .slots .currentSelection a {
    background: #3bb880;
    color: #000;
}

/* Selected Slot List Styling */
#fbuilder .ahb_list {
    margin: 10px 0px;
}

#fbuilder .ahb_list .ahb_list_time,
#fbuilder .ahb_list .ahb_list_service,
#fbuilder .ahb_list a {
    border: 0px;
    background: #3bb880;
    padding: 10px;
    margin-right: 10px;
    display: inline-block;
    color: #fff;
}