/* Modal container styling */
#bdwebhut_booking_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

/* Modal overlay styling */
.bdwebhut_modal_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

/* Modal content box styling */
.bdwebhut_modal_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    border-radius: 0;
    max-width: 90%;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 10000;
    width: 500px;
}

#bdwebhut_booking_modal input {
    background-color: #7A7A7A0D;
    padding: 10px 12px 10px 13px;
    border-style: solid;
    border-color: #7A7A7A21;
    border-radius: 0;
    width: 100%;
    margin-top: 5px;
	border-width:1px;
}

#bdwebhut_booking_modal button {
    padding: 7px 25px;
    margin-right: 11px;
}

button#bdwebhut_apply_button {
    background-color: var( --e-global-color-0bea0f6 );
    fill: var( --e-global-color-8b39283 );
    color: var( --e-global-color-8b39283 );
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var( --e-global-color-0bea0f6 );
    border-radius: 0px 0px 0px 0px;
    cursor: pointer;
    padding: 14px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    margin-left: 20px;
}

button#bdwebhut_apply_button:hover {
    background-color: transparent;
	color: var( --e-global-color-814ea13 );
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var( --e-global-color-0bea0f6 );
    border-radius: 0px 0px 0px 0px;
	cursor: pointer;
}


button#bdwebhut_cancel_button {
    background-color: transparent;
	color: var( --e-global-color-814ea13 );
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var( --e-global-color-0bea0f6 );
    border-radius: 0px 0px 0px 0px;
	cursor: pointer;
}
button#bdwebhut_cancel_button:hover{
	    background-color: var( --e-global-color-0bea0f6 );
    fill: var( --e-global-color-8b39283 );
    color: var( --e-global-color-8b39283 );
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var( --e-global-color-0bea0f6 );
    border-radius: 0px 0px 0px 0px;
	cursor: pointer;
}



#bdwebhut_booking_modal h3 {
    margin-top: 0;
}


span#bdwebhut_start_date_time, span#bdwebhut_end_date_time {
    padding: 10px 10px 9px 10px;
    border: 1px solid #c9c9c9;
    background: #FFFFFF center;
    background-size: 13px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease;
    position: relative;
    bottom: -2px;
	color: #787878;
}

div#bdwebhut_booking_display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* Positioning of i icon */
.jet-form-builder .where-did-hear-of-us .jet-form-builder__field-label span .bdwebhut-extra-info {
    margin-left: 4px;
    width: 20px;
    height: 20px;
    line-height: 16px;
    text-align: center;
    border-radius: 50% !important;
    border: 1px solid #777 !important;
    font-size: 15px;
    cursor: pointer !important;
    position: relative;
    background: #f5f5f5;
    color: #333;
    margin-top: 0px !important;
    padding: 0 4px !important;
    vertical-align: middle;
	display:flex; 
	justify-content:center;
	align-items:center;
}

/* Hidden tooltip */
.bdwebhut-tooltip-content {
    display: none;
    position: absolute;
    top: 22px;
    left: 0;
    z-index: 9999;
    background: #ffffff;
    color: #333;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: max-content;
    max-width: 220px;
    white-space: normal;
    box-shadow: 0 0 8px rgba(0,0,0,0.15);
    font-size: 12px;
}

/* Show on hover */
.bdwebhut-extra-info:hover .bdwebhut-tooltip-content {
    display: block;
}


.bdwebhut-slot {
    position: relative;
    margin: 0;
    padding: 15px 15px;
    border-radius: 0;
    border: 1px solid #ddd;
    cursor: pointer;
    font-size: 16px;
}
span#bdwebhut_time_slots_title {
    font-size: 20px;
    font-weight: 600;
}
.bdwebhut-slot:hover{
	border-color:black;
}

.bdwebhut-slot-normal {
    background: #fff;
}

.bdwebhut-slot-anfrage {
    background: #f5f5f5;
    border-color: #999;
}

.bdwebhut-slot-disabled {
    background: #eee;
    border-color: #ccc;
    color: #aaa;
    cursor: not-allowed;
}

/* Tooltip wrapper */
.bdwebhut-slot-tooltip {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    display: none;
    z-index: 9999;
    width: 100%;
    background-color: black;
    padding: 5px;
}

/* Tooltip content */
.bdwebhut-slot-tooltip-inner {
    color: #fff;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: normal;
    max-width: 220px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Show tooltip on hover of slot */
.bdwebhut-slot-anfrage:hover .bdwebhut-slot-tooltip {
    display: block;
}
/* Center the Flatpickr popup */
/* .flatpickr-calendar.bdwebhut-calendar-center {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 99999;
} */

.bdwebhut-booking-inline {
    display: flex;
	gap:20px;
}

.bdwebhut-booking-inline button {
    background-color: transparent;
    appearance: none;
    border: 1px solid black;
    font-size: 16px;
    color: #787878;
    border-style: solid;
    border-color: #C9C9C9;
    border-radius: 0px 0px 0px 0px;
    padding: 10px 10px 9px 10px;
    line-height: 26px;
}

div#bdwebhut_date_range_wrapper {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: -99999px;
}

div#bdwebhut_booking_container {
    margin-top: -44px !important;
}
.bdwebhut-booking-inline button {
    background-color: transparent;
    appearance: none;
    border: 1px solid black;
    font-size: 16px;
    color: #787878;
    border-style: solid;
    border-color: #C9C9C9;
    border-radius: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    line-height: 26px;
    width: 133px;
	cursor:pointer;
}

.bdwebhut-booking-inline button:hover{
	border-color:#000000;
}

#bdwebhut_ui_start_time, #bdwebhut_ui_end_time {
    margin-left: -20px;
    border-left: none;
}

div#bdwebhut_time_slots_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
	margin-top: 11px;
}

div#bdwebhut_time_slots_wrapper {
    width: 100%;
    background-color: white;
    box-shadow: 0px 4px 11px 0px #00000040;
    padding: 20px;
    position: absolute;
    z-index: 999999;
}


/* dark overlay for calendar */
#bdwebhut_calendar_overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 99998;
}

/* center flatpickr in viewport */
/* Center the flatpickr calendar in viewport */
.flatpickr-calendar.bdwebhut-calendar-center{
    position: fixed !important;
    top: 60% !important;
    left: 60% !important;
    transform: translate(-60%, -60%) !important;
    margin: 0 !important;
    z-index: 99999 !important;
	scale:1.4;
}

div#bdwebhut_time_slots_wrapper {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 999999 !important;
	width:500px;
	height:400px;
	overflow-y:scroll;
	display:none;
}

/* Ensure slot is positioning context */
.bdwebhut-slot {
    position: relative;
}

/* Base tooltip positioning */
.bdwebhut-slot-tooltip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    /* remove fixed height if possible, or keep max-height + auto */
    max-width: 260px;
    /* optional: allow wrapping */
    white-space: normal;
}

/* Default: below the slot */
.bdwebhut-slot-tooltip.bdwebhut-tip-below {
    top: 100%;
    bottom: auto;
    margin-top: 6px;
}

/* Flipped: above the slot */
.bdwebhut-slot-tooltip.bdwebhut-tip-above {
    bottom: 100%;
    top: auto;
    margin-bottom: 6px;
}


.bdwebhut-booking-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}


.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {
    border-radius: 0px 4px 4px 0px;
}


html[lang="de-DE"] button.bdwebhut-slot.bdwebhut-slot-anfrage:after {
	content: "Anfrage";
}
html[lang="pt-PT"] button.bdwebhut-slot.bdwebhut-slot-anfrage:after {
	content: "Investigação";
}
html[lang="en-US"] button.bdwebhut-slot.bdwebhut-slot-anfrage:after {
	content: "Inquiry";
}
button.bdwebhut-slot.bdwebhut-slot-anfrage:after {
    font-size: 12px;
    display: block;
    color: gray;
}
div#bdwebhut_booking_container {
    display: flex;
    align-items: flex-end;
}

button#bdwebhut_apply_button[disabled] {
    cursor: not-allowed;
    background-color: #eb101078;
    border-color: #eb101078;
    color: #ffffffa8;
}

@media screen and (max-width:768px){
	.bdwebhut-booking-inline {
    flex-direction: row;
    width: 100% !important;
    flex-wrap: wrap;
		gap: 0px;
}
	div#bdwebhut_booking_container {
    margin-top: 0px !important;
}
	div#bdwebhut_booking_container {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}
	.bdwebhut-booking-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 50%;
		margin-top: 10px;
}
	.bdwebhut-booking-inline button {

    width: 100%;
}
	#bdwebhut_ui_start_time, #bdwebhut_ui_end_time {
    margin-left: 0px;
}
	button#bdwebhut_apply_button {
    width: 100%;
    margin-top: 13px;
}
	.flatpickr-calendar.bdwebhut-calendar-center{
	scale:1;
	top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
	div#bdwebhut_time_slots_wrapper {
	width:90%;
	height:400px;
}
}

/* missing = normal, filled = red */
.bdwebhut-ui-field.bdwebhut-filled {
  border: 1px solid red !important;
}