/********************************************
  1) Hide default WooCommerce Add-to-Cart
********************************************/
form.cart {
  display: none !important;
}
.single_add_to_cart_button {
  display: none !important;
}

/********************************************
  2) Booking Module
********************************************/
.booking-module {
  background: #0A2640;
  color: #fff;
  padding: 35px;
  border-radius: 10px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}
/* top row: participants + date */
.booking-module .top-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.booking-module .inline-field {
  flex: 1 1 auto;
  position: relative !important;
  min-width: 300px;
}

/********************************************
  3) Time-section & Buttons
********************************************/
.time-section {
  display: none;
  margin-bottom: 15px;
}


/********************************************
  4) Price-section
********************************************/


.price-section .price-breakdown {
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.8;
  color: #fff;
}

/********************************************
  6) Participants & Date Inputs
********************************************/
#participants-input, #datepicker-input {
    width: 100% !important;
    border-radius: 15px !important;
    border: none !important;
    padding: 10px 12px;
    font-size: 16px !important;
    color: #192d59 !important;
    background-color: #fff !important;
    cursor: pointer !important;
    height: 50px;
    font-weight: 600;
}
#participants-input {
  padding-left: 42px !important;
}
#datepicker-input {
  padding-left: 42px !important;
}

/********************************************
  7) Icons & Drop-down Arrow
********************************************/
.icon-person {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background-image: url('https://staging.zastours.com/wp-content/uploads/2025/03/add-participants2.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
.icon-calendar {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background-image: url('https://staging.zastours.com/wp-content/uploads/2025/03/calendar.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
.drop-down-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 9px;
    background-image: url(../images/drop-down-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.drop-down-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    transform-origin: 50% 25%;
}

.drop-down-arrow.rotated {
  transform: rotate(180deg);
}

/********************************************
  8) Popup Panel for Participants
********************************************/
.flatpickr-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}









#participants-panel-body {
  margin-bottom: 25px;
  margin-top: 25px;
}
.person-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.person-row label {
  display: flex;
  flex: 1;
  margin-right: 10px;
  flex-direction: column;
}
.person-controls {
  display: flex;
  gap: 20px;
  align-items: center;
}
.minus-btn,
.plus-btn {
  background: #E2F3FA;
  color: #192E59;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  font-weight: 100;
  border: none;
  cursor: pointer;
  font-size: 24px;
  outline: none;
}
.minus-btn:hover,
.plus-btn:hover {
  background: #CCE2FF;
}
.count-span {
  min-width: 20px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
}
#participants-inline-save {
  display: block;
  width: 100%;
  background-color: #192E59;
  color: #fff;
  text-align: center;
  padding: 10px 15px;
  font-size: 19px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-weight: 200;
  margin-top: 35px;
  height: 55px;
}
#participants-inline-save:hover {
  background-color: #0069d9 !important;
}

/********************************************
  9) Fare-display & Loading Indicator
********************************************/
.fare-display {
  margin-top: 10px;
  font-size: 16px;
  display: none;
  color: #fff;
}
#loading-indicator {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}
#loading-indicator img {
  width: 50px;
  height: 50px;
}

/********************************************
  10) Flatpickr Overrides
********************************************/
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: #E2F3FA !important;
  border-color: #E2F3FA !important;
}
.flatpickr-day.selected {
  background: #192D59 !important;
  color: #fff !important;
}
@media (max-width: 768px) {
  .booking-module .top-row {
    flex-direction: column;
    align-items: stretch;
  }
  #participants-input,
  #datepicker-input {
    max-width: 100% !important;
    width: 100%;
  }
}



/********************************************
  11) Full-page overlay for Contact Details
********************************************/
    /*
.time-suffix-linktwist
{
	font-size: 13px;
    font-weight: 100;
    letter-spacing: 2px;
}	*/
	
.single-block-mode
{
	grid-template-columns: 1fr !important;
}	

		
		
.close-icon {
	stroke: #192C59; /* Default dark blue */
	transition: stroke 0.3s ease; /* Optional: nice fade effect */
		stroke-width: 0.5; /* Thicker for mobile */
}


@media (max-width: 992px) {
	#contact-fields-container
	{
		grid-column-gap: 15px !important;
	}

	.start_time_holder_link_twist
	{
		font-size: 18px !important;
	}

	.start_time_and_option_title_holder_div_linktwist
	{
	padding-bottom: 10px !important;
	}


	.label_total_price_linktwist, #overlay-total-price 
	{
		font-size: 20px !important;
	}

	.price_holder_linktwist
	{
	padding-bottom: 0px !important;
	}


	.why_book_overlay_linktwist li
	{
	font-size: 12px !important;
	}


	.why_book_overlay_linktwist li::before 
	{
	width: 14px !important;
	height: 16px !important;
	}
	
	
	#close-contact-details > svg
	{
		height: 15px !important;
		width: 15px !important;
	}
	
	#overlay-book-now
	{
		font-size: 18px !important;	
	}	
}

@media (max-width: 768px) 
{
	.time-suffix-linktwist
	{
	font-size: 16px !important;
	letter-spacing: 0px !important;
	}
	
	#close-contact-details > svg 
	{
		height: 28px !important;
        width: 28px !important;
        background: #fff;
        padding: 6px;
        border-radius: 10px;
		
    }
	.close-icon 
	{
		/*stroke: #ffffff !important; */
		stroke-width: 1.5 !important; /* Thicker for mobile */
	}
	
	
	
	.inner_overlay_price_holder_linktwist
	{
		height: 70px !important;
	}	
	
	.price_holder_linktwist
	{
	 align-items: flex-end !important;
	line-height: 1 !important;
	margin-bottom: 10px !important;
	}	
	
	.why_book_overlay_linktwist
	{
		gap: 1px !important;
		align-items: flex-start !important;
		flex-direction: column !important;
	}	
	
	#selected-option-name
	{
		width: 100% !important;
		text-align: left !important;
	}
	
	#selected-option-name::after
	{
		display: none !important; 	
	}	
	.start_time_and_option_title_holder_div_linktwist
	{
	flex-direction: column !important;	
	}
	
	.start_time_holder_link_twist
	{
	width: 100% !important;	
	}	
	
	.start_time_label_link_twist
	{
		margin-right: 0px !important;
	}
	
	.start_time_and_option_title_holder_div_linktwist
	{
		
		width: 100% !important;
		margin-bottom: 30px !important;	
		gap: 5px !important;
	}
	
	#contact-fields-container
	{
		grid-template-columns: 1fr !important;
	}
	
	.contact-details-content
	{
		width: 100% !important;
		margin: 0px !important;
	}
	
	.contact-details-content>#overlay-price-info
	{
			height: 120px !important;
			
	}		
	
	#overlay-price-info
	{
		margin-left: 0px !important;
		margin-right: 0px !important;
		width: 100% !important;
		box-shadow: 0px 0px 42px -11px rgba(0, 0, 0, 0.2);
	
	}

	.start_time_and_option_title_holder_div_linktwist
	{
		min-width: 20px !important;
	}
	
	#selected-option-name
	{
		font-size: 19px !important;
	}
	
	.start_time_holder_link_twist 
	{
        font-size: 16px !important;
    }
	
	.close-overlay-btn
	{
		top: 12px !important;
		right: 12px	!important;
	}
	
	.contact-details-content
	{
		height: 100% !important;
	}	
	
	.contact-details-content
	{
		border-radius: 0px !important;	
	}
	
	.label_total_price_linktwist
	{
        font-size: 15px !important;
    }
	
	#overlay-total-price 
	{
        font-size: 19px !important;
    }
	
	#overlay-book-now
	{
	padding: 5px 10px !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    text-align: center !important;
    letter-spacing: normal !important;
    font-size: 16px !important;
    height: 100% !important;
	}
	
}

@media (max-width: 480px) 
{
	
	.price_div_section_linktwist
	{
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
	}
	#overlay-price-info > div > div > div.why_book_link_twist_div > ul > li.includes_fees_overlay_linktwist
	{
	line-height: 1 !important;	
	}
	
	.price_holder_linktwist
	{
		flex-direction: column !important;
		gap: 2px !important;
		margin-bottom: 0px !important;
		align-items: flex-start !important;
		line-height: 1.8 !important;
	}	
	
	.why_book_overlay_linktwist li
	{
	font-size: 11px !important;
	padding-left: 14px !important;
	color: #1b83ad !important;
	}	
	
	.why_book_overlay_linktwist li::before {
        width: 11px !important;
        height: 11px !important;
    }
	
	
	#overlay-total-price
	{
		line-height: 1.2 !important;
		font-size: 27px !important;
	}	
	div.why_book_link_twist_div > ul > li.free-cancel_overlay_linktwist
	{
		display: none !important;
	}
	
	.label_total_price_linktwist
	{
		margin-right: 0px !important;
		font-size: 9px !important;
		text-transform: uppercase;
		margin-bottom: 1px; 
		
	}
	
	#overlay-book-now
	{
		font-size: 14px !important;
		font-weight: 600 !important;
	}
	
	#overlay-price-info
	{
	/*position: fixed !important;
top: calc(100% - 100px) !important;
z-index: 1000000000000 !important;
bottom: 0px !important;*/
	}
	
}






	

.start_time_holder_link_twist {
	display: flex;
	flex-wrap: nowrap; /* 👈 prevents wrapping */
	align-items: center; /* optional: vertically center */
	gap: 6px; /* optional: small space between the two elements */
}

.start_time_label_link_twist {
	white-space: nowrap; /* 👈 ensures "Start Time:" itself never breaks */
}


.price_div_section_linktwist
{
	width: 60%;
}



#overlay-book-now {
	display: block;
    padding: 15px 30px;
    font-size: 20px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    margin: 0 !important;
    width: 40% !important;
}
.price_holder_linktwist
{
	display:flex;
	margin-bottom: 5px;
}

.label_total_price_linktwist, #overlay-total-price
{

    font-size: 22px;
    color: #192C59;
}

.label_total_price_linktwist
{
	margin-right: 8px;
}

#overlay-total-price
{
	font-weight: 600;
}



#contact-details-panel {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.5); /* your overlay dimming */
	display: flex;
	justify-content: center;
	align-items: flex-end; /* if you're sliding up from bottom */
}


#contact-details-panel.contact-details-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.2s ease;
}
#contact-details-panel.open {
  visibility: visible;
  opacity: 1;
}
/*PREVENT BACKGROUND SCROLLING*/
body.modal-open {
  overflow: hidden;
}

.why_book_overlay_linktwist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px; /* space between items */
  align-items: center;
  flex-wrap: wrap; /* if you want to wrap on smaller screens */
}

.why_book_overlay_linktwist li {
  align-items: center;
    font-size: 14px;
    color: #192C59;
    position: relative;
    padding-left: 20px;
    font-weight: 500;
}

.why_book_overlay_linktwist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' viewBox='-1 -1 17 17' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'><circle cx='7.125' cy='7.125' r='6.75' style='fill:%23fff;stroke:%23007dc1;stroke-width:2px;'/><path d='M4.657,7.805l1.904,1.536l3.061,-4.327' style='fill:none;stroke:%23007dc1;stroke-width:1.5px;stroke-linecap:square;'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}



#overlay-price-info {
  position: fixed;
  bottom: -100px; /* start off-screen */
  background: #fff;
  width: calc(100% - 30px);
  left: 0;
  padding: 15px 30px 15px 30px;
  margin-left: 15px;
  margin-right: 15px;
  display: flex;
  transition: bottom 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1002; /* slightly above modal content */
  background: #F7F7F7;
  height: 100px !important;
}

#contact-details-panel.open #overlay-price-info {
  bottom: 0;
  transition-delay: 0.5s; /* nice little lag */
}

.inner_overlay_price_holder_linktwist
{
	width: 100%;
	display: flex;
	margin-right: auto;
    margin-left: auto;
	justify-content: space-between;
}

.contact-details-content {
  background: #fff;
  padding: 30px;
  position: relative;
  color: #333;
  height: calc(100% - 15px);
  overflow-y: auto;
  width: calc(100% - 30px);
  margin-left: 15px;
  margin-right: 15px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  bottom: -100%;
  transition: bottom 0.8s cubic-bezier(0.25, 1, 0.5, 1); /* smoother easing */
  z-index: 1001; /* make sure it's above the overlay background */
  overflow-y: auto;
}

#contact-details-panel.open .contact-details-content {
  bottom: 0;
}

#contact-fields-container
{
	display: grid;
grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
	 grid-row-gap: 20px;
    margin-bottom: 60px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;	
}	

#selected-option-name::after {
  content: '';
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  height: 60%; /* adjust as needed */
  width: 1px;
  background-color: #E8EAEE; /* light grey */	
}

.block_title_link_twist {
  display: flex;
  align-items: center;
  font-size: 18px;
  gap: 10px;
  color: #192e59; /* optional, matches SVG stroke */
      margin-bottom: 10px;
}

::placeholder {
  color: #192e59;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12-18 */
  color: #192e59;
}

.lt-activity-input
{
	margin-bottom: 14px;
    border-radius: 10px !important;
    background: #FFF7DF !important;
    min-height: 44px;
    border: 1px solid #FFF7DF !important;;
    padding-left: 20px !important;
	font-weight: 600;
}

.text-area-link-twist textarea
{
min-height: 100px;
    padding-top: 15px !important;
	color: #192C59 !important;
}

.error-message
{
	background-color: #fbeaea;
    color: #192d59;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 10px;
    margin-bottom: 20px;
    margin-top: -10px;
    font-weight: 600;
}


.text-area-link-twist input
{

	color: #192C59 !important;
}


.block_title_link_twist::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' viewBox='-4 -4 83 103' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'><circle cx='36.287' cy='21.413' r='19.163' style='fill:%23fff;stroke:%23192e59;stroke-width:8px;'/><path d='M28.78,92.263l17.095,0.25c28.5,-6.5 26.5,-14 26.5,-14l-0,-7.5c-1.25,-20.25 -26.5,-29.75 -26.5,-29.75l-17.095,-0.25c0,0 -25.25,9.5 -26.5,29.75l0,7.5c0,0 -2,7.5 26.5,14Z' style='fill:%23fff;stroke:%23192e59;stroke-width:8px;'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}


.close-overlay-btn {
	position: fixed;
    top: 30px;
    right: 30px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
	
	
	/* Fade-in effect */
	opacity: 0;
	pointer-events: none;
	transition-property: opacity !important;
	transition-duration: 0.8s !important;
	transition-timing-function: ease !important;
	transition-delay: 0.8s !important;
	
}




.contact-details-content {
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
	overflow-y: auto;
	/*transition: scrollbar-color 0.3s ease;*/
}



	.lt-activity-input:focus
	{
	box-shadow: none !important;
    background-color: #fff !important;
    border: solid 1px #e8eaee !important;
	}



.contact-details-content.scrolling {
	scrollbar-color: #cccccc80 transparent;
	scrollbar-width: thin;
}

/* WebKit */
.contact-details-content::-webkit-scrollbar {
	width: 6px;
}

.contact-details-content::-webkit-scrollbar-thumb {
	background-color: transparent;
	transition: background-color 0.3s ease;
}

.contact-details-content.scrolling::-webkit-scrollbar-thumb {
	background-color: #999;
}

#contact-details-panel.open .close-overlay-btn {
	opacity: 1;
	pointer-events: all;
	/*transition-delay: 0.8s; Matches modal slide-in time */
}

.close-overlay-btn:hover {
  color: #999;
}

#selected-option-name
{
	
    color: #192C59;
    font-size: 22px;
    font-weight: 600;
	position: relative;
	width:50%;
	text-align: right;
}	

.start_time_holder_link_twist
{
display: flex;
    
    color: #192C59;
    font-size: 22px;
	width: 50%;
}	

.start_time_label_link_twist
{
margin-right: 8px;	
}

#selected-option-time
{
font-weight: 600;
}	

.start_time_and_option_title_holder_div_linktwist
{
	margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    width: fit-content;
    margin-bottom: 60px;
    border-bottom: solid 1px #E8EAEE;
    min-width: 600px;
    justify-content: center;
    padding-bottom: 20px;
	gap: 60px;
}

.spacer_must_equal_height_of_price_overlay_linktwist
{
display: block;
height: 100px;	
}	



#overlay-book-now:hover {
  background: #FFC600;
}
#overlay-book-now:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}




/* TAKEN FROM PRODUCT PAGE CSS FROM CAPTAIN BOOK - PROBABLY SOME DUPLICATION */

.button-disabled {
  pointer-events: none;
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 380px) {
    .time-section .custom-button {
        font-size: 14px !important;
    }
}
.auto-selected {
    border-color: #ffffff !important;
    pointer-events: none !important;
    border-radius: 5px !important;
}
.price_and_label_holder {
    padding-bottom: 6px;
}
.label-taxes-fees::before,
.label-free-cancel::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
    background: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' viewBox='-1 -1 17 17' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'><circle cx='7.125' cy='7.125' r='6.75' style='fill:%23fff;stroke:%23007dc1;stroke-width:2px;'/><path d='M4.657,7.805l1.904,1.536l3.061,-4.327' style='fill:none;stroke:%23007dc1;stroke-width:1.5px;stroke-linecap:square;'/></svg>")
        no-repeat center;
    background-size: contain;
}
#participants-inline-panel {
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#participants-inline-panel.visible {
    opacity: 1;
    transform: translateY(0);
}
div.participants-breakdown > div {
    font-size: 13px !important;
    padding-right: 10px;
}
.participants-breakdown {
    position: absolute;
    top: 94px;
    display: flex;
    display: flex;
    flex-wrap: wrap;
}
div.participants-breakdown > div:first-child::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    vertical-align: middle;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 17 17' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'><circle cx='7.125' cy='7.125' r='6.75' fill='%23fff' stroke='%23ffffff' stroke-width='2'/><path d='M4.657,7.805l1.904,1.536l3.061,-4.327' fill='none' stroke='%230A2640' stroke-width='1.5' stroke-linecap='square'/></svg>")
        no-repeat center;
    background-size: contain;
    margin-top: -4px;
} /* Devices smaller than 768px (e.g. tablets) */
@media (max-width: 768px) {
	
	#participants-inline-panel
	{
		
	border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;	
	}
	
    .participants-breakdown {
        position: relative !important;
        width: 100% !important;
        top: 0px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .price-section {
        margin-top: 30px !important;
    }
    #field-date {
        margin-top: 20px;
    }
    .booking-module .top-row {
        padding-bottom: 0px !important;
    }
    .opt-label::after {
        content: ":";
        margin-left: 1px;
    }
    span.opt-places > span.places-left {
        padding-left: 2px !important;
        font-weight: 400 !important;
    }
    span.opt-time > span.start-time {
        padding-left: 2px !important;
    }
    .booking-module {
        padding: 30px 20px 80px 20px !important;
    }
    .booking-module .top-row {
        gap: 0px !important;
        flex-direction: column;
    }
    #participants-inline-panel h3 {
        display: block !important;
    }
    .time-section .custom-button .opt-places {
        position: absolute;
        bottom: 20px;
        font-size: 14px !important;
    }
    .time-section .custom-button .opt-time {
        font-weight: 400 !important;
        margin-bottom: 10px !important;
        border-right: none !important;
        justify-content: left !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-right: -10px;
        height: 26px !important;
        border-left: none !important;
        flex: 0 0 auto !important;
    }
    .time-section .custom-button .opt-label {
        margin-bottom: 10px !important;
        justify-content: flex-start !important;
        padding-right: 4px !important;
        flex: 0 1 auto !important;
        text-align: left !important;
        white-space: normal !important;
        display: inline-block !important;
    }
    #custom-book-now {
        width: calc(100% - 40px) !important;
        font-weight: 500 !important;
    }
    .time-section .custom-button {
        padding: 17px 20px 36px 20px !important;
        position: relative;
        justify-content: start !important;
    }
    .opt-places::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 14px;
        margin-right: 6px;
        vertical-align: middle;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 26' fill='none' stroke='%230A2640' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M15.973,23.599c0,-5.625 -7.432,-5.625 -7.432,-11.25c-0,-5.625 7.432,-5.625 7.432,-11.25l-14.865,-0c-0,5.625 7.433,5.625 7.433,11.25c-0,5.625 -7.433,5.625 -7.433,11.25l-0.009,0.341l14.865,0' fill='%23fff'/><path d='M1.208,1.47l15.026,0l-8.009,8.402l-7.017,-8.402Z' fill='%230A2640'/></svg>")
            no-repeat center;
        background-size: contain;
    }
}
@media (min-width: 769px) {
    #participants-inline-panel h3 {
        display: none;
    }
} /******************************************** 1) Hide default WooCommerce Add-to-Cart ********************************************/
form.cart {
    display: none !important;
}
.single_add_to_cart_button {
    display: none !important;
} /******************************************** 2) Booking Module Wrapper ********************************************/
.booking-module {
    background: #0a2640; /* Σκούρο μπλε */
    color: #fff;
    padding: 35px 35px 75px 35px;
    border-radius: 10px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
} /* top row: participants + date */
.booking-module .top-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 15px;
}
.booking-module .inline-field {
    flex: 1 !important;
    position: relative !important;
}
.time-section {
    display: none;
} /******************************************** 3) Time-section & Custom Buttons ********************************************/
.time-section {
    margin-bottom: 15px !important;
} /* Κουμπιά επιλογών */
.time-section .custom-button {
    display: flex;
    justify-content: space-between;
    background-color: #e2f3fa;
    color: #0a2640;
    border-radius: 20px;
    border: none;
    font-size: 16px;
    padding: 22px 10px 20px 10px;
    width: 100%;
    cursor: pointer;
    border: 4px solid #e2f3fa;
    flex-wrap: wrap;
}
.time-section .custom-button:hover {
    background-color: #ffffff !important;
}
.time-section .custom-button.selected {
    background-color: #fff !important;
    border-color: #ffb900;
} /* Τα 3 «κομμάτια» μέσα στο κουμπί */
.time-section .custom-button .opt-label {
    font-weight: 600;
    padding-right: 10px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}
.time-section .custom-button .opt-time {
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap; /*border-right: 1px solid #0a2640; border-left: 1px solid #0a2640;*/
    flex: none;
    padding-left: 20px;
    padding-right: 20px;
}
.start-time,
.places-left {
    font-weight: 600;
    padding-left: 2px;
}
.custom-button-container .custom-button:not(:first-of-type) {
    margin-top: 14px !important;
}
.time-section .custom-button .opt-places {
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    flex: 1;
}
.fare-display {
    display: flex;
    flex-direction: column;
}
.fare-value {
    font-size: 26px;
    padding-left: 4px;
    font-weight: 600;
}
.label-booking-cost {
    font-weight: 200;
    font-size: 18px;
} /******************************************** 4) Price-section & Participants Breakdown ********************************************/
.price-section {
    display: none;
    justify-content: space-between;
    align-items: flex-start;
}
.price-section .price-breakdown {
    font-size: 12px !important;
    display: block !important;
    margin-top: 4px !important;
    opacity: 0.8 !important;
    color: #fff !important;
} /******************************************** 5) Book Now button ********************************************/
#custom-book-now {
    position: absolute;
    bottom: -30px;
    color: #fff;
    text-align: center;
    font-size: 20px;
    font-weight: 200;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
    height: 70px;
    line-height: 1.4;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 70px);
}
.option-title {
    font-size: 20px;
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    margin-top: 30px;
}
#custom-book-now:disabled {
    pointer-events: none;
}
#custom-book-now:hover {
    background: #ffc600;
} /******************************************** 6) Participants & Date inputs ********************************************/
#participants-input,
#datepicker-input {
    width: 100% !important;
    border-radius: 15px !important;
    border: none !important;
    padding: 10px 12px;
    font-size: 16px !important;
    color: #192d59 !important;
    background-color: #fff !important;
    cursor: pointer !important;
    height: 50px;
    font-weight: 600;
}
#participants-input {
    padding-left: 42px !important;
}
#datepicker-input {
    padding-left: 42px !important;
}
#participants-input:focus,
#datepicker-input:focus {
    outline: 2px solid #007dc1;
}
.icon-person {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-image: url("../images/add-participants-icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}
.drop-down-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    transform-origin: 50% 25%; /* Ensure it rotates around its center */
}
.drop-down-arrow.rotated {
    transform: rotate(180deg);
}
.drop-down-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 9px;
    background-image: url("../images/drop-down-arrow.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}
.icon-calendar {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-image: url("../images/calendar-icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}
.person-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}
small {
    display: block;
    margin-top: 5px;
    font-size: 13px !important;
}
.person-row label {
    display: flex;
    flex: 1;
    margin-right: 10px;
    flex-direction: column;
}
.person-controls {
    display: flex;
    gap: 20px;
    align-items: center;
}
.minus-btn {
    width: 30px;
    height: 30px;
    border: none;
}
.plus-btn {
    width: 30px;
    height: 30px;
    border: none;
}
.person-row strong {
    display: block;
    margin-bottom: -4px;
    font-size: 18px;
} /******************************************** 7) Popup panel for participants ********************************************/
#participants-inline-panel {
    box-shadow: 0px 0px 42px -11px rgba(0, 0, 0, 0.5);
    background: #fff;
    color: #182d57;
    padding: 20px 35px 35px 35px;
    position: absolute;
    background: #fff;
    border: none;
    border-radius: 20px;
    z-index: 9999; /* width:723px; Controlled with JS now to match booking element*/
    margin-top: 87px;
}
#participants-inline-panel h3 {
    /* margin: 0 0 10px 0 !important;*/
    font-size: 18px !important;
    text-align: center;
    width: 100%;
    font-weight: 600;
    font-size: 18px;
    border-bottom: 1px solid #e8eaee;
    padding-bottom: 18px;
    color: #192d59;
}
#participants-panel-body {
    margin-bottom: 25px;
    margin-top: 25px;
}
.minus-btn,
.plus-btn {
    background: #e2f3fa;
    color: #192e59;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    font-weight: 100 !important; /* Αφαιρούμε το border */
    border: none;
    cursor: pointer;
    font-size: 24px;
    outline: none; /* αν θες να μην εμφανίζεται outline στο focus */
}
.minus-btn:hover,
.plus-btn:hover {
    background: #cce2ff !important;
} /* Το span που δείχνει τον αριθμό */
.count-span {
    min-width: 20px; /* Για σταθερό φάρδος */
    text-align: center;
    display: inline-block;
    font-size: 16px; /* Αν θέλεις λίγο μεγαλύτερο */
} /******************************************** 8) Fare-display & Loading Indicator ********************************************/
.fare-display {
    margin-top: 10px !important;
    font-size: 16px !important;
    display: none; /* Χωρίς !important, για να μπορεί το JS να κάνει .show() */
    color: #fff !important;
}
#loading-indicator {
    display: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 100 !important;
}
#loading-indicator img {
    width: 50px !important;
    height: 50px !important;
}
#participants-inline-save {
    display: block;
    width: 100%;
    background-color: #192e59;
    color: #fff;
    text-align: center;
    padding: 10px 15px;
    font-size: 19px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-weight: 200;
    margin-top: 35px;
    height: 55px;
    margin-bottom: 10px;
}
#participants-inline-save:hover {
    background-color: #0069d9 !important;
}