/* Styles definition here */

#fbuilder {
    font-family: 'Jost', sans-serif !important;
    color: #F7EFE3 !important;
}

#fbuilder *, #fbuilder ::after, #fbuilder ::before {
    box-sizing: border-box;
}

.clearer { clear: both; }
#fbuilder .hide, #fbuilder .ignore, .adminonly, .ahb_slot_availability { display: none !important; }

/* --- 2. TEXT FIELDS, SELECTS, & LABELS --- */
#fbuilder label, #fbuilder .fields label {
    color: #E8D8C2 !important; /* Warm Sand Label */
    font-family: 'Fraunces', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    margin-bottom: 5px;
    display: inline-block;
}

#fbuilder input[type="text"], 
#fbuilder input[type="password"], 
#fbuilder select, 
#fbuilder textarea {
    width: 100% !important;
    background: rgba(247, 239, 227, 0.06) !important; /* Frosted Glass Input */
    border: 1px solid rgba(247, 239, 227, 0.5) !important;
    color: #F7EFE3 !important;
    border-radius: 12px !important;
    padding: 14px 15px !important;
	margin-bottom: -15px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 15px !important;
    transition: all 0.25s ease !important;
    box-shadow: none !important;
}

#fbuilder input[type="text"]:focus, #fbuilder select:focus {
    outline: none !important;
    border-color: #B45427 !important; /* Brand Terracotta Accent */
    background: rgba(247, 239, 227, 0.1) !important;
}

/* Dropdown */
#fbuilder select option {
    background-color: #F7EFE3 !important; 
    color: #4B2F22!important;          
    padding: 10px !important;            
}
/* --- 3. THE CALENDAR OVERHAUL (jQuery UI Datepicker) --- */

#fbuilder .ui-datepicker, 
#fbuilder .ui-datepicker-inline {
    background: rgba(247, 239, 227, 0.1) !important; 
    border: 1px solid rgba(247, 239, 227, 0.3) !important; 
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45) !important; 
    padding: 24px !important;
	margin-top: 30px !important;
}

/* Give the header title section a clean solid grounding anchor */
#fbuilder .ui-datepicker-header {
    background: rgba(0, 0, 0, 0.3) !important; 
    padding: 12px !important;
    border-radius: 8px 8px 0px 0px !important;
    border-bottom: none !important;
}
#fbuilder .ui-datepicker-title {
    font-family: 'Fraunces', serif !important;
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    color: #F7EFE3 !important;
    text-align: center;
}

/* Custom Arrows styling */
#fbuilder .ui-datepicker-header {
    position: relative !important;
    padding: 16px 0 !important;
}

/* Force arrows onto the exact same horizontal line as the title text */
#fbuilder .ui-datepicker-prev,
#fbuilder .ui-datepicker-next {
    position: absolute !important;
    top: 50% !important;
	transform: translateY(-50%) !important;   
	width: 36px !important;
    height: 26px !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    text-indent: 0 !important; 
    cursor: pointer !important;
	margin: auto 0 !important;
} 

/* Move them comfortably inward from the card edges */
#fbuilder .ui-datepicker-prev { left: 5px !important; }
#fbuilder .ui-datepicker-next { right: 5px !important; }

#fbuilder .ui-datepicker-prev::before,
#fbuilder .ui-datepicker-next::before {
    font-family: Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #F7EFE3 !important; /* Brand Cream */
    display: block !important;
    text-align: center !important;
    height: 32px !important;
    line-height: 26px !important; /* Slightly offset line-height to correct font baseline dip */
}

#fbuilder .ui-datepicker-prev::before { content: "‹" !important; }
#fbuilder .ui-datepicker-next::before { content: "›" !important; }

#fbuilder .ui-datepicker-next-hover,
#fbuilder .ui-datepicker-prev-hover {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
}

#fbuilder .ui-datepicker-next-hover {
    right: 5px !important;
    left: auto !important;
}

#fbuilder .ui-datepicker-prev-hover {
    left: 5px !important;
    right: auto !important;
}

/* Grid Table & Days */
#fbuilder .ui-datepicker-calendar {
    width: 100% !important;
    margin-top: 10px !important;
}

#fbuilder .ui-datepicker-calendar th {
    font-family: 'Jost', sans-serif !important;
    color: rgba(247, 239, 227, 0.4) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 10px 0 !important;
    white-space: nowrap;
	margin-bottom: 10px;
	background: transparent !important;
}

#fbuilder .ui-datepicker-calendar thead,
#fbuilder .ui-datepicker-calendar thead tr,
#fbuilder .ui-datepicker-calendar th {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

#fbuilder .ui-datepicker-calendar td {
    padding: 4px 0 !important;
    text-align: center;
}

/* Individual Day Item States */
#fbuilder .ui-datepicker-calendar td a,
#fbuilder .ui-datepicker-calendar td span.ui-state-default {
    background: transparent !important;
    border: none !important;
    color: #F7EFE3 !important;
    font-weight: 400 !important;
    line-height: 36px !important;
    height: 36px !important;
    width: 36px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: 50% !important;
    text-shadow: none !important;
    transition: all 0.2s ease;
}

/* Hover Day States */
#fbuilder .ui-datepicker-calendar td a:hover {
    background: rgba(247, 239, 227, 0.14) !important;
}

/* Today's Marker Outline */
#fbuilder .ui-datepicker-calendar .ui-datepicker-today a {
    border: 1px solid #E8D8C2 !important;
    color: #E8D8C2 !important;
	box-shadow: 0 0 14px rgba(247, 239, 227, 0.75) !important;
}

/* Current Selected Active Day (Terracotta) */
#fbuilder .ui-datepicker-calendar .ui-datepicker-current-day .ui-state-active {
    background: #B45427 !important;
    color: #F7EFE3 !important;
    font-weight: 600 !important;
}

/* Dead/Disabled Slots styling */
#fbuilder .ui-datepicker-calendar .ui-state-disabled span.ui-state-default,
#fbuilder .ui-datepicker-calendar .ui-datepicker-other-month span.ui-state-default {
    color: rgba(247, 239, 227, 0.15) !important;
    text-decoration: none !important;
}

#fbuilder .slots > span {
    grid-column: 1 / -1 !important;
    width: 100% !important;         
    text-align: center !important;   
    font-size: 15px !important;      
    font-weight: 500 !important;     
    color: #E8A87C !important;    
    margin-top: 20px;
    margin-bottom: 10px !important;  
    display: block !important;       
}
/* --- 4. TIME SLOTS SELECTION AREA --- */
#fbuilder .slots {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
/* 	justify-items: left; */
	gap: 10px;
}


#fbuilder .slots div {
    border: none !important;
    margin: 0 !important;
	margin-bottom: 10px !important;
    padding: 0 !important;
}


#fbuilder .slots div a, .ahbfield_time {
    background: rgba(247, 239, 227, 0.06) !important;
    border: 1px solid rgba(247, 239, 227, 0.5) !important;
    color: #F7EFE3 !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.25s ease !important;
    box-shadow: none !important;
    text-decoration: none !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
}

#fbuilder .slots div a:hover {
    background: rgba(247, 239, 227, 0.25) !important;
    border-color: rgba(247, 239, 227, 0.4) !important;
}

/* Selected Active Time Slot State */
#fbuilder .slots .currentSelection a,
.ahb_bt_selected a,
.ahb_bt_selected a:hover {
    background: #B45427 !important;
    border-color: #B45427 !important;
    color: #F7EFE3 !important;
    font-weight: 500 !important;
}

/* --- 5. ACTION CTA / SUBMIT BUTTONS --- */
#fbuilder .pbSubmit, 
#fbuilder .pbNext, 
#fbuilder .pbPrevious,
#fbuilder .pbSubmit:hover {
    background: #B45427 !important; /* Brand Terracotta */
    color: #F7EFE3 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 16px 36px !important;
    border-radius: 100px !important;
    border: none !important;
    margin: 20px auto 0 auto !important;
    transition: background 0.3s, transform 0.3s !important;
    box-shadow: none !important;
}

#fbuilder .pbSubmit:hover, #fbuilder .pbNext:hover {
    background: #9A4520 !important; /* Deep Terracotta */
    transform: translateY(-2px);
}

#fbuilder .pbreak .pbPrevious {
    background: transparent !important;
    border: 1px solid rgba(247, 239, 227, 0.3) !important;
    color: #E8D8C2 !important;
}
#fbuilder .pbreak .pbPrevious:hover {
    border-color: #F7EFE3 !important;
    background: rgba(247, 239, 227, 0.05) !important;
}
/* Refine the selected appointment summary container to match the frosted dark-mode theme */
.ahb_m6 #fbuilder .usedSlots .ahb_list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid rgba(247, 239, 227, 0.16) !important;
    background-color: rgba(247, 239, 227, 0.05) !important; /* Translucent frosted glass canvas */
    border-radius: 12px !important;
    padding: 16px 50px 16px 16px;
    margin: 15px 0px;
    position: relative;
    box-shadow: none !important;
}

/* Force all text elements inside the summary box to use warm cream brand colors */
.ahb_m6 #fbuilder .usedSlots .ahb_list,
.ahb_m6 #fbuilder .usedSlots .ahb_list div,
.ahb_m6 #fbuilder .usedSlots .ahb_list span,
.ahb_m6 #fbuilder .usedSlots .ahb_list p,
.ahb_m6 #fbuilder .usedSlots .ahb_list text {
    color: #F7EFE3 !important; /* Warm Cream text replacement */
    font-family: 'Jost', sans-serif !important;
	font-size: 15px;
}

#fbuilder .ahb_list_service,
#fbuilder .slots .service,
#fbuilder .slots .service_title {
    padding-left: 0 !important;
    margin-left: 0 !important;
} 
/* Restyle the accent pills and utility circles (quantity counters, delete/close buttons) */
.ahb_m6 #fbuilder .usedSlots .ahb_list a,
.ahb_m6 #fbuilder .usedSlots .ahb_list [class*="quantity"],
.ahb_m6 #fbuilder .usedSlots .ahb_list [class*="remove"],
.ahb_m6 #fbuilder .usedSlots .ahb_list [class*="close"],
.ahb_m6 #fbuilder .usedSlots .ahb_list [class*="delete"] {
    background: rgba(247, 239, 227, 0.12) !important;
    border: 1px solid rgba(247, 239, 227, 0.2) !important;
    color: #F7EFE3 !important;
    text-shadow: none !important;
    transition: all 0.2s ease;
}

/* Interactivity: Turn the clear button/pill to brand Terracotta when hovered */
.ahb_m6 #fbuilder .usedSlots .ahb_list a:hover {
    background: #B45427 !important; 
    border-color: #B45427 !important;
    color: #F7EFE3 !important;
}

#fbuilder span.uh,
#fbuilder .uh,
#fbuilder .instructions {
    font-size: 15px !important;       /* Increases the font scaling from the tiny default */
    color: #E8D8C2 !important;          /* Swaps out to warm brand Sand text for an elegant read */
    line-height: 1.6 !important;       /* Spreads the lines vertically for improved breathing room */
    text-align: center !important;     /* Centers the block cleanly beneath the form elements */
    margin-top: 15px !important;       /* Adds a balanced top margin cushion */
    display: block !important;
}
/* --- 6. ORIGINAL CORE RESPONSIVE LAYOUT FRAMEWORK --- */
#fbuilder .fields, #fbuilder .fform { padding: 5px 0px; }
#fbuilder .small { width: 25% !important; }
#fbuilder .medium { width: 50% !important; }
#fbuilder .large { width: 100% !important; }

@media screen and (min-width: 740px){
    #fbuilder .fields.column2 { float: left; width: 49.9%; }
    #fbuilder .fields.column3 { float: left; width: 33.3%; }
    #fbuilder .fields.column4 { float: left; width: 24.9%; }
}
@media screen and (max-width: 640px){
    #fbuilder .small, #fbuilder .medium { width: 98% !important; }
}

#fbuilder .two_column { float: left; width: 48%; }
#fbuilder .three_column { float: left; width: 30%; }
#fbuilder .side_by_side { float: left; }
#fbuilder .dfield { position: relative; }
#fbuilder .center_aligned * { text-align: center; }