/* --- 1. GLOBAL CONTAINER & BASE RESET --- */
#fbuilder {
    font-family: 'Jost', sans-serif !important;
    color: #2B231F !important;
    background: #F7F0E3 !important;
    max-width: 580px !important;
    margin: 0 !important;
	border-radius: 20px;
	display: flex;
	align-items: flex-start !important;
}
@media(max-width:768px){
	#fbuilder {
		grid-row: auto !important;        
        grid-column: auto !important;     
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
/*         margin: 24px 0 0 0 !important; */
/*         padding: 24px !important; */
	}
}

#fbuilder #formheader_1 {
	display: none !important;
}
#fbuilder .pb0 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}
.cp_avoid_hidden {
	padding: 30px 24px !important;
}

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

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

/* --- 2. LABELS & INPUT FIELDS --- */
#fbuilder label, 
#fbuilder .fields label {
    color: #85786C !important; /* Taupe / Light Brown */
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 5px !important;
    display: block !important;
    text-align: left !important;
}

/* Field Inputs (Name, Phone, Select) */
#fbuilder input[type="text"], 
#fbuilder input[type="password"], 
#fbuilder select, 
#fbuilder textarea {
    width: 100% !important;
    background: #FAF6F0 !important; /* Cream Field Fill */
    border: 1px solid #E4D9C9 !important; /* Soft Tan Border */
    color: #2B231F !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
	margin-bottom: -24px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 15px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#fbuilder input[type="text"]::placeholder {
    color: rgba(179, 166, 152, 0.7) !important;
}
/* #fbuilder input::placeholder,
#fbuilder textarea::placeholder {
    color: rgba(179, 166, 152, 0.3) !important;
    opacity: 1 !important;
} */
#fbuilder input[type="text"]:focus, 
#fbuilder select:focus {
    border-color: #2B231F !important;
    background: #FFFFFF !important;
}

/* Custom Dropdown Arrow for Select Field */
#fbuilder select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="%232B231F" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    padding-right: 40px !important;
}
/* Error Message */ 
#fbuilder div.cpefb_error,
#fbuilder .cpefb_error {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #BE1A1A !important; /* Terracotta / Red color */
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 0 !important;
	padding-top: 6px !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    display: block !important;
    position: static !important;
    text-align: left !important;
    opacity: 1 !important;
}

#fbuilder div.cpefb_error[style*="none"] {
    display: none !important;
}
#fbuilder input.cpefb_error,
#fbuilder select.cpefb_error,
#fbuilder textarea.cpefb_error {
    border: 1px solid #BE1A1A !important; /* Terracotta red border */
/* 	margin-bottom: 1px !important; */
}
#fbuilder .cpefb_error::before,
#fbuilder .cpefb_error::after,
#fbuilder span.uh::before,
#fbuilder span.uh::after,
#fbuilder .dfield::before,
#fbuilder .dfield::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

#fbuilder .dfield:has(.slotsCalendar),
#fbuilder .dfield:has(.fieldCalendar) {
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Calendar grid & Time Slots stay at the top (Order 1) */
#fbuilder .dfield:has(.slotsCalendar) > .fieldCalendar,
#fbuilder .dfield:has(.slotsCalendar) > .slotsCalendar,
#fbuilder .dfield:has(.slotsCalendar) > .usedSlots {
    order: 1 !important;
}

/* 3. Error Message sits directly below the time slot buttons (Order 2) */
#fbuilder .dfield:has(.slotsCalendar) > div.cpefb_error {
    order: 2 !important;
    margin-top: 4px !important;
    margin-bottom:10px !important;
}

/* 4. Instruction text sits below the error message (Order 3) */
#fbuilder .dfield:has(.slotsCalendar) > span.uh {
    order: 3 !important;
    margin-top: 30px !important;
}
@media(min-width:968px){

	/* --- 3. TWO-COLUMN LAYOUT (NAME & PHONE) --- */
	#fbuilder .fields.column2,
	#fbuilder .two_column,
	#fbuilder #field_1-0,
	#fbuilder #field_1-1 {
		width: 48.5% !important;
		float: left !important;
		display: inline-block !important;
		margin-right: 3% !important;
		clear: none !important;
	}

	#fbuilder .fields.column2:nth-child(2n),
	#fbuilder .two_column:nth-child(2n),
	#fbuilder #field_1-1 {
		margin-right: 0 !important;
	}
}

/* --- 4. CALENDAR (jQuery UI Datepicker) --- */
#fbuilder .ui-datepicker, 
#fbuilder .ui-datepicker-inline {
    background: #FAF6F0 !important; /* Card background */
    border: 1px solid #E4D9C9 !important; 
    border-radius: 18px !important;
    padding: 0 0 20px 0 !important;
    margin-top: 50px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

/* Calendar Header Bar */
#fbuilder .ui-datepicker-header {
    background: #EFE4D3 !important; /* Header Darker Tan */
    padding: 16px !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
}

#fbuilder .ui-datepicker-title {
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #2B231F !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
}

/* Navigation Arrows */
/* 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: #2B231F !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;
}

/* Calendar Grid */
#fbuilder .ui-datepicker-calendar {
    width: 92% !important;
    margin: 0px auto 0 auto !important;
}

#fbuilder .ui-datepicker-calendar thead {
	border-bottom: 1px solid #EFE4D3 !important;
}
#fbuilder .ui-datepicker-calendar th {
    font-family: 'Jost', sans-serif !important;
    color: #2B231F !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 0 !important;
    background: #FAF6F0 !important;
}

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

/* Dates Standard State */
#fbuilder .ui-datepicker-calendar td a,
#fbuilder .ui-datepicker-calendar td span.ui-state-default {
    background: transparent !important;
    border: none !important;
    color: #2B231F !important;
    font-family: 'Jost', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !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;
}

/* Today's Outline State */
#fbuilder .ui-datepicker-calendar .ui-datepicker-today a {
    border: 2px solid #D3C3A6 !important;
    color: #2B231F !important;
}

/* Selected Date Circle */
#fbuilder .ui-datepicker-calendar .ui-datepicker-current-day .ui-state-active,
#fbuilder .ui-datepicker-calendar .ui-state-active {
    background: #3b2a1e !important;
    color: #FAF6F0 !important;
    font-weight: 600 !important
	outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-tap-highlight-color: transparent !important;;
}

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

/* Other Month / Disabled Dates */
#fbuilder .ui-datepicker-calendar .ui-state-disabled span.ui-state-default,
#fbuilder .ui-datepicker-calendar .ui-datepicker-other-month span.ui-state-default,
#fbuilder .ui-datepicker-calendar .ui-datepicker-other-month a {
    color: #D4C8B8 !important;
    opacity: 0.7 !important;
}

/* --- 5. TIME SLOTS SELECTION AREA --- */
#fbuilder .slots > span {
    width: 100% !important;         
    text-align: left !important; /* Left-aligned like image 2 */   
    font-family: 'Jost', sans-serif !important;
    font-size: 15px !important;     
    font-weight: 600 !important;     
    color: #2C221E !important; /* Rich Dark Brown */    
    margin-top: 0px !important;
    margin-bottom: 14px !important;  
    display: block !important;    
	flex: 0 0 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;   
}
/* Append " - Pick a time" after the date text */
#fbuilder .slots > span::after {
    content: " - Pick a time" !important;
	font-size: 15px !important; 
    font-weight: 600 !important;
    color: #2C221E !important; /* Taupe brown color */
}

#fbuilder .slots > div:empty,
#fbuilder .slots .ahb_slot_availability,
#fbuilder .slots .service_title,
#fbuilder .slots .hide,
#fbuilder .slots br {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* 2. Slots Container (Flexbox aligned to the left) */
#fbuilder .slots {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important; 
    gap: 10px !important;
}

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

/* 3. Time Slot Pills Default State */
#fbuilder .slots div a, 
.ahbfield_time {
    background: #F7F0E3 !important; 
    border: 1px solid #E4D9C9 !important; 
    color: #2C221E !important;
    border-radius: 50px !important;
    padding: 10px 22px !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    text-decoration: none !important;
    width: auto !important;
    display: inline-block !important;
    text-align: center !important;
}

/* Hover State */
#fbuilder .slots div a:hover {
    background: #EFE4D3 !important;
    border-color: #D8CBB7 !important;
}

/* 4. Selected Active Time Slot State (Solid Dark Brown) */
#fbuilder .slots .currentSelection a,
.ahb_bt_selected a,
.ahb_bt_selected a:hover{
    background: #2C221E !important; 
    border-color: #2C221E !important;
    color: #FAF6F0 !important; 
    font-weight: 500 !important;
}

/* 5. Disabled / Unavailable Time Slot State (Muted Light State) */
#fbuilder .slots .ahb_unavailable a,
#fbuilder .slots div.disabled a,
#fbuilder .slots div[style*="pointer-events: none"] a {
    background: #FAF6F0 !important;
    border-color: #E4D9C9 !important;
    color: #C8BCAC !important; /* Pale Grey/Tan Text */
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}
/* #fbuilder .slots div a, .ahbfield_time {
    background: #F7F0E3 !important;
    border: 1px solid #D3C3A6 !important;
    color: #3b2a1e !important;
    border-radius: 100px !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;
} */



/* --- 6. SELECTED APPOINTMENT SUMMARY CARDS --- */
.ahb_m6 #fbuilder .usedSlots .ahb_list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #EFE4D3 !important; 
	border: none !important;
    margin: 15px 0px;
    position: relative;
    box-shadow: none !important;
}
@media(max-width:768px){
	#fbuilder .usedSlots .ahb_list {
		text-align: left !important;
		align-items: flex-start !important;
/* 		padding-left: 14px !important; */
		padding-right: 16px !important;
	}

	/* 2. Left-align the date and time line */
/* 	#fbuilder .usedSlots .ahb_list_time {
		text-align: left !important;
		justify-content: flex-start !important;
		display: block !important;
		width: 100% !important;
	} */

	/* 3. Left-align the service name line */
	#fbuilder .usedSlots .ahb_list_service {
		display: flex !important;
		flex-direction: row !important;
	flex-wrap: nowrap !important; /* Strictly prevents dropping to line 2 */ 
		align-items: center !important;
		justify-content: flex-start !important;
		width: 100% !important;
		margin-top: 3.5px !important;
		margin-right: 2px !important;
		white-space: nowrap !important;
		
/* 		display: block !important;
		flex-wrap: nowrap !important;
    text-align: left !important;
    width: 100% !important;
    margin-top: 6px !important;
    line-height: 1.4 !important; */
	}

	/* 4. Ensure green badge stays inline and left-aligned */
	#fbuilder .usedSlots .duration-badge {
		display: inline-flex !important;
		float: none !important;
		clear: none !important;
		margin-left: 0px !important;
		white-space: nowrap !important;
/* 		flex-shrink: 0 !important; */
	}
}
.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: #2C221E !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;
} 
@media(min-width:1200px){
	.ahb_m6 #fbuilder .usedSlots .ahb_list,
	#fbuilder .usedSlots .ahb_list {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: left !important;
		justify-content: flex-start !important;
		background-color: #EFE4D3 !important; 
		border: none !important;
		border-radius: 18px !important; 
		padding: 16px 24px !important;
		margin: 12px 0 !important;
		gap: 5px !important; /* Clean space between Date/Time and Service Name */
		box-shadow: none !important;
		box-sizing: border-box !important;
	}

	/* 2. Force inner wrappers onto a single line */
	#fbuilder .usedSlots .ahb_list div,
	#fbuilder .usedSlots .ahb_list span,
	#fbuilder .usedSlots .ahb_list p {
		display: inline-block !important;
		margin: 0 !important;
		padding: 0 !important;
		color: #2C221E !important; /* Dark warm brown text */
		font-family: 'Jost', sans-serif !important;
		font-size: 15px !important;
		line-height: 1.2 !important;
	}
	#fbuilder .usedSlots .ahb_list .ahb_list_time {
		display: inline-flex !important;
		gap: 8px !important;
		margin: 0 !important;
		flex-shrink: 0 !important;
		white-space: nowrap !important;
		z-index: 99 !important;
	}

	#fbuilder .usedSlots .ahb_list .ahb_list_service {
		margin-left: -280px !important;      /* Pulls service back to the left */
		margin-right: 2px !important;   /* Pushes ONLY the close button to the far right */
		white-space: nowrap !important;
		display: inline-block !important;
		margin-top: 1px !important;
	}
}


/* 3. Date & Time Styling */
#fbuilder .usedSlots .ahb_list_date,
#fbuilder .usedSlots .ahb_list_time {
    font-weight: 600 !important;
}

/* 4. Service Name Styling (Normal weight) */
#fbuilder .usedSlots .ahb_list_service,
#fbuilder .usedSlots .ahb_service_title {
    font-weight: 400 !important;
}

/* 5. Hide the "(1)" Quantity Badge */
#fbuilder .usedSlots .ahb_list [class*="quantity"],
#fbuilder .usedSlots .ahb_list .ahb_quantity {
    display: none !important;
}

/* 6. Convert [Cancel]x to a clean single "✕" on the far right */
.ahb_m6 #fbuilder .usedSlots .ahb_list a,
#fbuilder .usedSlots .ahb_list a,
#fbuilder .usedSlots .ahb_list [class*="remove"],
#fbuilder .usedSlots .ahb_list [class*="close"],
#fbuilder .usedSlots .ahb_list [class*="delete"] {
    font-size: 0 !important; /* Hides default "[Cancel]" text */
    color: transparent !important;
    text-decoration: none !important;
    margin-left: auto !important; /* Pushes the X icon to the far right */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
	margin-top: -5px;
}

/* Draw the clean ✕ character */
.ahb_m6 #fbuilder .usedSlots .ahb_list a::after,
#fbuilder .usedSlots .ahb_list a::after,
#fbuilder .usedSlots .ahb_list [class*="remove"]::after {
    content: "✕" !important;
    font-size: 16px !important;
    font-family: Arial, sans-serif !important;
    font-weight: 400 !important;
    color: #2C221E !important;
    display: inline-block !important;
}

/* Hover state for ✕ button */
.ahb_m6 #fbuilder .usedSlots .ahb_list a:hover::after {
    color: #B94F26 !important; /* Turns terracotta on hover */
}

.duration-badge {
/*      background-color: #D2E3C8 !important;  */
    color: #2C3E2E !important;            /* Dark olive text */
    padding: 6px 8px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: inline-block !important;
    margin-left: 0px !important;
	margin-top: 0px !important;
    vertical-align: middle !important;
}
@media(min-width:1200px){
	#fbuilder .usedSlots .ahb_list .ahb_list_service .duration-badge {
		font-family: 'Jost', sans-serif !important;
		font-size: 14px !important;
		padding: 6px 4px !important;
		margin-left: 0px !important;
		margin-top: 0px !important;
	}
}

/* --- 7. INSTRUCTION TEXT & SUBMIT BUTTON --- */
#fbuilder span.uh,
#fbuilder .uh,
#fbuilder .instructions {
    font-size: 15px !important;
	font-weight: 400;
    color: #2B231F !important;
    line-height: 1.5 !important;
    text-align: left !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
    display: block !important;
}

/* Full Width Rust Orange Button */
#fbuilder .pbSubmit, 
#fbuilder .pbNext, 
#fbuilder .pbPrevious,
#fbuilder .pbSubmit:hover {
    background: #B45427 !important; /* Brand Terracotta */
    color: #F7EFE3 !important;
    display: block !important;
	width: 100%;
    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:0px 24px !important;
    border-radius: 100px !important;
    border: none !important;
    margin: 0 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);
}