/* =========================================
   ASHMAN COMPANY - BOOKING FORM STYLES
   ========================================= */

/* --- 1. Main Calendar Container --- */
#fbuilder .ui-datepicker-inline, 
#fbuilder .ui-datepicker {
    background-color: #1e1e1e !important; /* Dark Charcoal */
    border: 1px solid #333 !important;
    border-radius: 12px !important; /* Modern rounded corners */
    font-family: inherit !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important; /* Depth shadow */
    padding: 10px !important;
}

/* --- 2. Calendar Header (Month/Year) --- */
#fbuilder .ui-datepicker-header {
    background: transparent !important;
    border: none !important;
    padding-bottom: 10px !important;
}

#fbuilder .ui-datepicker-title {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 3. Weekday Names (Mo, Tu, We...) --- */
#fbuilder .ui-datepicker-calendar th {
    color: #888888 !important; /* Muted grey for headers */
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    padding-bottom: 5px !important;
}

/* --- 4. Arrows (Prev/Next) --- */
#fbuilder .ui-datepicker-prev, 
#fbuilder .ui-datepicker-next {
    cursor: pointer !important;
    border-radius: 50%;
    transition: background 0.3s ease;
}
#fbuilder .ui-datepicker-prev:hover, 
#fbuilder .ui-datepicker-next:hover {
    background-color: #333 !important;
}
#fbuilder .ui-datepicker-prev span, 
#fbuilder .ui-datepicker-next span {
    filter: invert(1); /* Keeps arrows white */
    opacity: 0.7;
}

/* --- 5. Day Numbers (The Grid) --- */
#fbuilder .ui-state-default, 
#fbuilder .ui-widget-content .ui-state-default {
    background: #2d2d2d !important;
    border: none !important;
    color: #e0e0e0 !important;
    text-align: center;
    border-radius: 6px !important;
    margin: 1px !important; 
    transition: all 0.2s ease-in-out !important;
}

/* Hover Effect on Days */
#fbuilder .ui-state-hover, 
#fbuilder .ui-widget-content .ui-state-hover {
    background: #333333 !important;
    color: #ffd700 !important; /* Gold text */
    box-shadow: inset 0 0 0 1px #ffd700 !important;
    cursor: pointer !important;
}

/* Selected Day (Active) */
#fbuilder .ui-state-active, 
#fbuilder .ui-widget-content .ui-state-active {
    background-color: #ffd700 !important; /* Gold Background */
    color: #000000 !important; /* Black text */
    font-weight: bold !important;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3) !important;
}

/* --- 6. Time Slots (FIXED) --- */
/* Targeting .availableSlot a to override global link colors */
#fbuilder .availableSlot a {
    background-color: #ffffff !important; /* White Background */
    color: #000000 !important; /* FORCE Black Text */
    border: 1px solid #cccccc !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    padding: 10px 15px !important;
    margin: 5px !important;
    display: inline-block !important;
    transition: all 0.2s ease;
}

/* Hover Effect for Time Slots */
#fbuilder .availableSlot a:hover {
    background-color: #e0e0e0 !important; /* Light Grey hover */
    color: #000000 !important;
    border-color: #999 !important;
    transform: translateY(-1px);
}

/* The Selected Time Slot */
#fbuilder .availableSlot a.selected, 
#fbuilder .availableSlot.selected a {
    background-color: #ffd700 !important; /* Gold Background */
    color: #000000 !important; /* Black Text */
    border-color: #ffd700 !important;
    font-weight: bold !important;
}

/* --- 7. Input Fields --- */
#fbuilder input[type="text"], 
#fbuilder input[type="email"], 
#fbuilder textarea, 
#fbuilder select {
    background-color: #ffffff !important;
    border: 1px solid #444 !important;
    border-radius: 6px !important;
    color: #262626 !important;
    padding: 12px !important;
    width: 100%;
    outline: none;
    transition: border 0.3s ease;
}

#fbuilder input:focus, 
#fbuilder textarea:focus, 
#fbuilder select:focus {
    border-color: #ffd700 !important;
    box-shadow: 0 0 0 1px #ffd700 !important;
}

/* --- 8. The Submit Button (FIXED SIZE) --- */
#fbuilder .pbSubmit {
    /* Sizing */
    width: auto !important; 
    min-width: 200px !important;
    display: block !important;
    
    /* Centering */
    margin: 30px auto 10px auto !important; 
    
    /* Style */
    background-color: #ffd700 !important;
    color: #000000 !important;
    border: none !important;
    padding: 15px 30px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
}

#fbuilder .pbSubmit:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    /*box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4) !important;*/
    transform: translateY(-2px);
    cursor: pointer;
}

/* --- 9. Container Constraint (Optional) --- */
/* Keeps the form from being too wide on desktops */
#fbuilder {
    max-width: 800px !important;
    margin: 0 auto !important;
}