/*
Theme Name:   Twenty Twenty-Four Child
Description:  Twenty Twenty-Four Child Theme
Author:       Sea Side Beach Tigaki
Author URI:   https://seasidebeachtigaki.gr/
Template:     twentytwentyfour
Version: 1.0 License: GNU General Public License v2 or later
License URI: http: //www.gnu.org/licenses/gpl-2.0.html
Text Domain:  twentytwentyfourchild
*/

/* Fix Order Details padding in bottom cart */
.wfs-cart-expanded-header-title {
	padding-left: 10px !important;
}

main {
	margin-top: 150px;
}

header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100;
}

header > div.wp-block-group {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	min-height: 50px;
}

body .wp-container-core-group-layout-1.wp-container-core-group-layout-1 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    margin-left: auto !important;
}

.woocommerce td.product-name dl.variation p {
    margin: 0;
}

.woocommerce-orders-table__cell-order-actions a {
	display: inline !important;
}

.wfs-cart-service-settings,
.wc-block-checkout__terms,
.wp-block-spacer.hidden-lg,
.wpcot-tip-value.wpcot-tip-value-none,
.wfs-sidebar-menu ul::-webkit-scrollbar,
.wp-block-woocommerce-cart-order-summary-shipping-block,
.wp-block-woocommerce-cart-order-summary-coupon-form-block,
.woocommerce-order-confirmation-address-wrapper,
.wc-block-components-checkout-return-to-cart-button {
	display: none !important;
}

#gt_float_wrapper { 
	position: fixed !important; 
	top: 3px !important; 
	right: 2px !important; 
	z-index: 1002 !important; /* Higher than assistance button */
}

/* ===== CUSTOM GTRANSLATE BUTTON STYLING ===== */
/* Modern blue button with globe icon */
.gt_float_switcher {
	background: var(--wfs-primary-color, #267dc9) !important;
	border-radius: 25px !important;
	box-shadow: 0 4px 12px rgba(38, 125, 201, 0.3) !important;
	transition: all 0.3s ease !important;
	overflow: visible !important;
	position: relative !important;
	z-index: 1002 !important; /* Higher than assistance button */
}

.gt_float_switcher:hover {
	box-shadow: 0 6px 16px rgba(38, 125, 201, 0.4) !important;
}

/* Disable transform to prevent position shift */
.gt_float_switcher,
.gt_float_switcher:hover,
.gt_float_switcher:active,
.gt_float_switcher:focus {
	transform: none !important;
}

/* Ensure button stays in place */
.gt_float_switcher .gt-selected {
	transform: none !important;
}

/* Style the selected language display */
.gt_float_switcher .gt-selected {
	background-color: transparent !important;
	padding: 0 !important;
}

.gt_float_switcher .gt-selected .gt-current-lang {
	padding: 4px 16px !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 14px !important;
	letter-spacing: 0.5px !important;
	height: 28px !important;
}

/* Hide the flag image */
.gt_float_switcher .gt-selected img {
	display: none !important;
}

/* Add custom SVG globe icon before language code */
.gt_float_switcher .gt-selected .gt-lang-code::before {
	content: "";
	width: 28px;
	height: 28px;
	margin-right: 8px;
	display: inline-block;
	vertical-align: middle;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%23FFFFFF' d='M64,24c-22.1,0-40,17.9-40,40s17.9,40,40,40s40-17.9,40-40S86.1,24,64,24z M66,48c4.7-0.1,9.3-0.7,13.6-1.7C81,51,81.8,56.3,82,62H66V48z M66,44V28.2c5,1.2,9.4,6.5,12.3,14.2 C74.4,43.3,70.3,43.9,66,44z M62,28.2V44c-4.3-0.1-8.4-0.6-12.3-1.5C52.6,34.8,57,29.4,62,28.2z M62,48v14H46c0.2-5.7,1-11,2.4-15.7C52.7,47.3,57.3,47.8,62,48z M42,62H28 c0.4-7.7,3.2-14.7,7.7-20.3c2.6,1.4,5.5,2.6,8.7,3.6C43.1,50.2,42.2,55.9,42,62z M42,66c0.2,6.1,1,11.7,2.5,16.8c-3.2,1-6.1,2.2-8.7,3.6c-4.5-5.7-7.3-12.7-7.7-20.3H42V66z M46,66h16v14c-4.7,0.1-9.3,0.7-13.6,1.7C47,77,46.2,71.7,46,66z M62,84v15.7c-5-1.2-9.4-6.5-12.3-14.2C53.6,84.7,57.7,84.1,62,84z M66,99.8V84c4.3,0.1,8.4,0.6,12.3,1.5C75.4,93.2,71,98.6,66,99.8z M66,80V66h16c-0.2,5.7-1,11-2.4,15.7C75.3,80.7,70.7,80.2,66,80z M86,66h14c-0.4,7.7-3.2,14.7-7.7,20.3c-2.6-1.4-5.5-2.6-8.7-3.6C84.9,77.7,85.8,72.1,86,66z M86,62c-0.2-6.1-1-11.7-2.5-16.8c3.2-1,6.1-2.2,8.7-3.6c4.5,5.7,7.3,12.7,7.7,20.3L86,62L86,62z M89.5,38.6c-2.2,1.1-4.6,2.1-7.2,2.9c-1.7-4.6-3.9-8.5-6.6-11.5C80.9,31.8,85.6,34.8,89.5,38.6z M52.3,30c-2.6,2.9-4.8,6.8-6.6,11.5c-2.6-0.8-5-1.7-7.2-2.8C42.4,34.7,47.1,31.8,52.3,30z M38.5,89.4c2.2-1.1,4.6-2.1,7.2-2.9c1.7,4.6,3.9,8.5,6.6,11.5C47.1,96.2,42.4,93.2,38.5,89.4z M75.7,98c2.6-2.9,4.9-6.9,6.6-11.5c2.6,0.8,5,1.7,7.2,2.9C85.6,93.2,80.9,96.2,75.7,98z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Style the language code */
.gt_float_switcher .gt-selected .gt-lang-code {
	text-transform: uppercase !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	color: #ffffff !important;
	position: relative;
	top: 0 !important;
}

/* Style the down arrow */
.gt_float_switcher .gt-selected .gt_float_switcher-arrow {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 285 285'><path d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z' style='fill:%23ffffff'/></svg>") !important;
	filter: brightness(0) invert(1) !important;
	opacity: 0.9 !important;
	margin-left: 4px !important;
	transition: none !important;
}

/* Keep arrow pointing down when NOT bouncing */
.gt_float_switcher .gt-selected .gt_float_switcher-arrow:not(.bouncing) {
	transform: rotate(0deg) translateY(0) !important;
}

/* Arrow bounce animation when dropdown is open */
.gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow.bouncing,
span.gt_float_switcher-arrow.bouncing {
	animation: arrowBounce 0.8s ease-in-out infinite !important;
	animation-fill-mode: both !important;
}

@keyframes arrowBounce {
	0% { 
		transform: rotate(0deg) translateY(0px) !important; 
	}
	25% { 
		transform: rotate(0deg) translateY(-5px) !important; 
	}
	50% { 
		transform: rotate(0deg) translateY(0px) !important; 
	}
	75% { 
		transform: rotate(0deg) translateY(-3px) !important; 
	}
	100% { 
		transform: rotate(0deg) translateY(0px) !important; 
	}
}

/* Style the dropdown options */
.gt_float_switcher .gt_options {
	background: #ffffff !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
	margin-top: 8px !important;
	overflow-y: auto !important; /* Enable vertical scrolling */
	overflow-x: hidden !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	position: relative !important;
	z-index: 1002 !important; /* Same as parent, higher than assistance button */
	max-height: 400px !important; /* Set a max height for scrolling */
	overscroll-behavior: contain !important; /* Prevent scroll chaining to parent */
	-webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
	opacity: 1 !important; /* Force immediate visibility */
	transform: translateX(0px) !important; /* Force immediate position */
	transition: none !important; /* Remove transition delay */
}

/* Custom scrollbar for the dropdown */
.gt_float_switcher .gt_options::-webkit-scrollbar {
	width: 8px !important;
}

.gt_float_switcher .gt_options::-webkit-scrollbar-track {
	background: #f1f1f1 !important;
	border-radius: 10px !important;
}

.gt_float_switcher .gt_options::-webkit-scrollbar-thumb {
	background: #888 !important;
	border-radius: 10px !important;
}

.gt_float_switcher .gt_options::-webkit-scrollbar-thumb:hover {
	background: #555 !important;
}

.gt_float_switcher .gt_options a {
	color: #333333 !important;
	transition: all 0.2s ease !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.gt_float_switcher .gt_options a:last-child {
	border-bottom: none !important;
}

.gt_float_switcher .gt_options a:hover {
	background: var(--wfs-primary-color, #267dc9) !important;
	color: #ffffff !important;
}

/* Desktop adjustments - larger button for screens above 768px */
@media (min-width: 769px) {
	.gt_float_switcher .gt-selected .gt-current-lang {
		height: 32px !important;
		padding: 6px 18px !important;
	}
}

/* Mobile adjustments */
@media (max-width: 768px) {
	.gt_float_switcher .gt-selected .gt-current-lang {
		padding: 8px 14px !important;
		font-size: 13px !important;
	}
	
	.gt_float_switcher .gt-selected .gt-lang-code::before {
		font-size: 16px;
	}
}

.wp-block-navigation__responsive-container-close {
    position: absolute !important;
    left: auto !important;
    right: 0;
    top: 50px !important;
    z-index: 2 !important;
    text-align: right;
}

.wfs-store-close-msg-danger { 
	display: flex; 
	align-items: center;
	background-color: #f5cece; 
	padding: 12px 15px; 
	margin-bottom: 10px; 
	border-radius: 4px;
}

.wfs-store-close-msg-danger > span { 
	display: inline-block; 
	padding: 0; 
	margin: 0;
	line-height: 1.4;
}

.aloha-checkout-height {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}

.wfsmodal-body {
	margin-top: 40px;
}

/* Disable double-tap zoom inside the Food Store modal */
.wfsmodal,
.wfsmodal *,
.wfs-modal,
.wfs-modal * {
	touch-action: manipulation;
	-ms-touch-action: manipulation;
}

#wfs-sticky-sidebar {
	padding: 0px 10px;
	top: 50px;
	background-color: #267dc9;
	color: white;
	display: block;
	left: 0;
	right: 0;
	position: fixed;
	z-index: 99 !important;
	height: auto;
}

/* Ensure sticky category slider always stays above product overlays and other content */
#wfs-sticky-sidebar,
#wfs-sticky-sidebar .swiper {
    z-index: 99 !important;
}

.wfs-sidebar-menu ul {
	max-width: 1170px;
	margin: auto;
	display: none;
	flex-direction: row;
	justify-content: flex-start;
	list-style-type: none;
	padding: 0;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.wfs-sidebar-menu ul.slick-initialized {
	display: flex !important;
}

.wfs-sidebar-menu ul li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-bottom: 0;
    padding: 10px 0;
	max-width: 120px;
	min-width: 120px;
    text-align: center;
    overflow-wrap: break-word;
}

.wfs-sidebar-menu ul li a img {
	min-width: 50px;
}

button.slick-arrow {
    padding: 0;
    background: transparent;
    border: 0;
    appearance: none;
	color: #fff;
	width: 90px;
    font-size: 28px;
}

button.slick-arrow.slick-disabled {
    color: transparent;
}

.has-base-background-color {
	background-color: white !important;
}



.wfsmodal-footer .wfs-modal-add-to-cart a {
	height: auto;
	width: 100%;
}

/* Remove spinner on WooCommerce checkout page */
.woocommerce .blockUI.blockOverlay { 
	position: relative !important;  
	display: none !important;
}

.woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
    min-width: 25%;
}

.woocommerce-orders-table__cell-order-actions a:not(.view) {
	margin-left: 10px;
}

h3#order_review_heading:after {
    content: " summary";
}

tr.cart_item .product-name img {
    vertical-align: middle;
    margin-right: 10px;
}

.wfs-cart-purchase-actions-mobile > a i {
	font-size: 26px;
}

.wfs-order-history-mobile i {
	font-size: 26px !important;
}

.wfs-cart-overview-row {
	align-items: center;
	justify-content: space-between;
	margin-left: 0;
	padding: 0 10px;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
}

.custom-history-icon {
	margin-left: 5px;
	display: none; /* Hidden by default (for screens 768px and up) */
	padding: 0 !important;
	height: 100%;
	align-items: center;
}

.custom-history-icon > a {
	margin: 0 !important;
}

.wfs-cart-purchase-actions-mobile > a {
	position: relative;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wfs-cart-purchase-actions-mobile > a.wfs-proceed-to-checkout sup {
	background-color: #dd3333;
	color: #fff;
	border-radius: 50px;
	height: 15px;
	width: 15px;
	display: inline-block;
	text-align: center;
	font-size: 12px;
	line-height: 16px;
	position: absolute;
	top: -5px;
	right: -2px;
}

.attribute-label {
	text-transform: capitalize;
	color: #000;
	font-size: 18px;
	font-weight: 600;
	padding: 6px 0;
	margin: 0;
}

@media (max-width: 767px) {
	.wp-block-spacer.hidden-lg {
		display: block !important;
	}
	.wfs-sidebar-menu ul li a {
		max-width: 80px;
		min-width: 80px;
		overflow-wrap: anywhere;
		font-size: 12px;
	}
	/* Increase icon sizes for mobile */
	.wfs-cart-purchase-actions-mobile > a i {
		font-size: 28px;
	}
	.wfs-order-history-mobile i {
		font-size: 28px !important;
	}
	.wfs-cart-toggle a i {
		font-size: 28px;
	}
	.custom-history-icon {
		display: flex !important; /* Force display on all mobile screens */
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	/* Center the total amount */
	.wfs-cart-overview-row {
		position: relative;
	}
	
	/* Create a centered total */
	.fs-text-right.wfs-cart-purchase-actions-mobile {
		position: static !important;
	}
	
	.fs-text-right.wfs-cart-purchase-actions-mobile .wfs-cart-subtotal {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 50%;
		margin-top: -10px;
		font-size: 16px;
		font-weight: 500;
		white-space: nowrap;
		z-index: 1;
		width: auto;
		display: block !important;
		text-align: center;
		margin-left: -5px; /* Slight adjustment to account for any visual offset */
	}
	
	/* Make sure the history icon container is not affected by the static positioning */
	.custom-history-icon.wfs-cart-purchase-actions-mobile {
		position: absolute !important;
	}
	
	/* Make room for the centered total by adjusting the right icons */
	.wfs-cart-purchase-actions-mobile > a.wfs-clear-cart {
		margin-right: 5px;
	}
	
	/* Hide the total from its original container but keep the container for the icons */
	.wfs-cart-purchase-actions-mobile {
		position: relative;
	}
	
	/* Make sure the right icons stay on the right */
	.wfs-cart-purchase-actions-mobile > a {
		position: relative;
		z-index: 2;
	}
	.wfs-cart-toggle {
		width: auto;
		position: relative;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		height: 100%;
	}
	/* Position the history icon consistently */
	.custom-history-icon {
		margin: 0;
		padding: 0;
		position: absolute;
		left: 50px; /* Fixed position relative to the left edge, matching right-side spacing */
		z-index: 5; /* Ensure it stays above other elements */
	}
	.custom-history-icon a {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8px;
		height: 100%;
	}
	.wfs-cart-overview > div.fs-container {
		padding-right: 0;
		padding-left: 0;
		width: 100%;
	}
	/* Fix cart menu positioning on mobile */
	.wfs-cart-wrapper {
		width: 100% !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		position: fixed !important;
	}
	.wfs-cart-wrapper.mini-cart {
		width: 100% !important;
		right: 0 !important;
		left: 0 !important;
		max-width: 100% !important;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		background-color: #fff;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.1);
	}
	.wfs-cart-wrapper.mini-cart.active {
		right: 0 !important;
		left: 0 !important;
		transform: translateX(0);
	}
	
	/* Modern cart styling */
	.wfs-cart-wrapper .wfs-cart-item-container {
		padding: 15px;
		max-height: 60vh;
	}
	
	.wfs-cart-wrapper .wfs-cart-item {
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		padding: 12px 5px;
		margin-bottom: 8px;
		transition: all 0.2s ease;
	}
	
	.wfs-cart-wrapper .wfs-cart-item:hover {
		background-color: rgba(0, 0, 0, 0.02);
	}
	
	.wfs-cart-wrapper .wfs-cart-item-title p {
		font-weight: 500;
	}
	
	.wfs-cart-wrapper .wfs-cart-totals-container {
		padding: 15px;
		background-color: #f9f9f9;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
	}
	
	.wfs-cart-wrapper .wfs-cart-totals-item {
		padding: 12px 0 0;
	}
	
	.wfs-cart-wrapper .wfs-cart-totals-item.order-total {
		font-weight: 600;
		font-size: 18px;
		color: var(--wfs-primary-color, #267dc9);
	}
	
	.wfs-cart-wrapper .wfs-cart-header {
		padding: 15px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.wfs-cart-wrapper .wfs-cart-header h3 {
		margin: 0;
		font-size: 18px;
		font-weight: 600;
	}
	/* Fix dialogs that open from cart buttons */
	.wfsmodal {
		max-width: 100%;
		width: 100%;
		overflow-x: hidden;
	}
	.wfsmodal-content {
		width: 95% !important;
		max-width: 95% !important;
		margin: 0 auto;
		overflow-x: hidden;
	}
	.wfsmodal-body {
		padding: 15px;
		overflow-x: hidden;
	}
	/* Fix cart toggle icon positioning */
	.wfs-cart-toggle {
		position: relative;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		z-index: 102;
	}
	
	/* Responsive adjustments for out-of-stock ribbon on mobile */
	.wfs-food-item-container:has(.wfs-text-out-of-stock)::after {
		font-size: 10px;
		padding: 3px 30px;
		top: 15px;
		left: -30px;
	}
}

/* Out of Stock Product Styling */
/* Main container styling for out-of-stock products */
.wfs-food-item-container:has(.wfs-text-out-of-stock) {
    position: relative;
    filter: grayscale(1) opacity(0.8);
    pointer-events: none;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Create the overlay effect with blur */
.wfs-food-item-container:has(.wfs-text-out-of-stock)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(1px);
    z-index: 1;
    pointer-events: none;
}

/* Out of stock ribbon badge */
.wfs-food-item-container:has(.wfs-text-out-of-stock)::after {
    content: 'Out of Stock';
    position: absolute;
    top: 20px;
    left: -35px;
    background-color: #ff5252;
    color: white;
    padding: 5px 40px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    transform: rotate(-45deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

/* Hide the default out of stock text since we're using the ribbon */
.wfs-text-out-of-stock {
    display: none !important;
}

/* Ensure the product image remains visible but grayscale */
.wfs-food-item-container:has(.wfs-text-out-of-stock) img {
    filter: grayscale(1);
    opacity: 0.8;
}

/* Ensure the product card is non-clickable */
.wfs-food-item-container:has(.wfs-text-out-of-stock) .wfs-product-link {
    pointer-events: none;
    cursor: default;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 767px) {
    .wfs-food-item-container:has(.wfs-text-out-of-stock)::after {
        font-size: 10px;
        padding: 3px 30px;
        top: 15px;
        left: -30px;
    }
}

	.wfs-cart-toggle a {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8px;
	}

	.wfs-cart-toggle i {
		font-size: 20px;
	}

	/* Additional responsive fixes for the cart menu */
	.wfs-cart-wrapper:not(.mini-cart) {
		max-width: 100%;
		overflow-x: hidden;
	}

	.wfs-cart-wrapper.mini-cart {
		overflow: visible !important;
	}

	.wfs-cart-expanded {
		max-width: 100%;
		overflow-x: hidden;
	}

	.wfs-cart-content-area {
		max-width: 100%;
		overflow-x: hidden;
	}
	
	/* Prevent vertical scrolling in bottom cart overview while keeping buttons clickable */
	.wfs-cart-overview {
		overflow: hidden;
		touch-action: pan-x;
		user-select: none;
	}
	
	.wfs-cart-overview-row {
		overflow: hidden;
		touch-action: auto;
		-webkit-overflow-scrolling: none;
		height: auto;
		max-height: 60px;
		display: flex;
		align-items: center;
	}
	
	/* Ensure interactive elements in the cart are clickable */
	.wfs-cart-purchase-actions-mobile > a,
	.wfs-proceed-to-checkout,
	.wfs-clear-cart,
	.wfs-cart-toggle a,
	.custom-history-icon a {
		touch-action: auto;
		cursor: pointer;
		position: relative;
		z-index: 10;
	}

	/* Fix for modal dialogs */
	.wfsmodal-dialog {
		max-width: 100%;
		overflow-x: hidden;
	}

	/* Bigger icons and total in bottom cart */
	.wfs-cart-overview-row {
		padding: 10px 5px;
	}

	/* Make toggle button icon bigger */
	.wfs-cart-toggle a i {
		font-size: 30px !important;
	}

	/* Make all icons in the bottom cart bigger */
	.wfs-cart-purchase-actions-mobile > a i,
	.wfs-order-history-mobile i {
		font-size: 26px !important;
	}

	/* Make the total text bigger */
	.wfs-cart-subtotal {
		font-size: 18px !important;
		font-weight: 600 !important;
	}

	/* Ensure the notification bubble scales with the icon */
	.wfs-cart-purchase-actions-mobile > a.wfs-proceed-to-checkout sup {
		height: 18px;
		width: 18px;
		font-size: 13px;
		line-height: 18px;
		top: -8px;
		right: -5px;
	}

	/* Small screen adjustments */
	@media (max-width: 480px) {
		.wfs-cart-purchase-actions-mobile > a i {
			font-size: 20px;
		}
		
		.wfs-cart-purchase-actions-mobile > a {
			padding: 5px;
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
		
		.wfs-cart-purchase-actions-mobile > a.wfs-proceed-to-checkout {
			padding-right: 8px;
		}
		
		.wfs-cart-purchase-actions-mobile > a.wfs-proceed-to-checkout sup {
			top: -5px;
			right: -2px;
			z-index: 1;
		}
	}

	/* Very small screen adjustments */
	@media (max-width: 348px) {
		.wfs-cart-purchase-actions-mobile {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: flex-end;
			width: 100%;
		}
		
		.fs-text-right.wfs-cart-purchase-actions-mobile .wfs-cart-subtotal {
			font-size: 14px;
		}
		
		.wfs-cart-purchase-actions-mobile > a {
			padding: 3px;
		}
		
		/* Adjust icon sizes for very small screens - still larger than original but not too big */
		.wfs-cart-purchase-actions-mobile > a i {
			font-size: 24px;
		}
		.wfs-order-history-mobile i {
			font-size: 24px !important;
		}
		.wfs-cart-toggle a i {
			font-size: 24px;
		}
		
		/* Ensure consistent spacing between left icons on very small screens */
		.custom-history-icon {
			left: 50px; /* Adjust position for very small screens */
		}
		
		.custom-history-icon a {
			padding: 5px;
		}
		
		.wfs-order-history-mobile i {
			font-size: 24px !important; /* Keep consistent with the size defined above */
		}
		
		/* Remove duplicate rule */
		
		/* Fix modal positioning */
		.wfsmodal-content {
			width: 90% !important;
			max-width: 90% !important;
			margin: 10px auto;
		}
	}

.wfs-cart-overview-row {
	padding: 10px 5px;
	margin: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
}

/* Out of Stock Product Styling */
/* Main container styling for out-of-stock products */
.wfs-food-item-container:has(.wfs-text-out-of-stock) {
    position: relative;
    filter: grayscale(1) opacity(0.8);
    pointer-events: none;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Create the overlay effect with blur */
.wfs-food-item-container:has(.wfs-text-out-of-stock)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(1px);
    z-index: 1;
    pointer-events: none;
}

/* Out of stock ribbon badge */
.wfs-food-item-container:has(.wfs-text-out-of-stock)::after {
    content: 'Out of Stock';
    position: absolute;
    top: 20px;
    left: -35px;
    background-color: #ff5252;
    color: white;
    padding: 5px 40px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    transform: rotate(-45deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

/* Hide the default out of stock text since we're using the ribbon */
.wfs-text-out-of-stock {
    display: none !important;
}

/* Ensure the product image remains visible but grayscale */
.wfs-food-item-container:has(.wfs-text-out-of-stock) img {
    filter: grayscale(1);
    opacity: 0.8;
}

/* Ensure the product card is non-clickable */
.wfs-food-item-container:has(.wfs-text-out-of-stock) .wfs-product-link {
    pointer-events: none;
    cursor: default;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 767px) {
    .wfs-food-item-container:has(.wfs-text-out-of-stock)::after {
        font-size: 10px;
        padding: 3px 30px;
        top: 15px;
        left: -30px;
    }
}

/* Food Store Addon Styling */
.wfs-addon-category {
    position: relative;
    width: 100%;
}

.wfs-addon-category label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    box-sizing: border-box;
    position: relative;
}

.wfs-addon-name {
    flex-grow: 1;
    text-align: left;
    padding-right: 10px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.5;
}

.wfs-addon-price {
    position: absolute;
    right: 10px;
    white-space: nowrap;
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.5;
    top: 50%;
    transform: translateY(-50%);
    font-size: inherit;
    padding: 0;
}

/* Fix currency symbol alignment */
.wfs-addon-price .woocommerce-Price-currencySymbol {
    vertical-align: baseline;
    display: inline-block;
    line-height: 1;
}

body,
#page,
.site,
.site-content,
.site-main,
#primary,
#main,
.woocommerce {
    background-color: #ffffff !important;
}

/* Fix for WPC Order Tip buttons */
.wpcot-tip-value:not(.active) > span {
    color: inherit !important;
    background-color: #eeeeee !important;
}

.wpcot-tip-value:not(.active) {
    border-color: #dddddd !important;
}

/* Food Store Variation Layout Fix */
.wfs-variation-price-wrapper {
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    clear: both;
}

.wfs-variation-radio .wfs-variation-name {
    display: block;
    width: 100%;
}

/* Fix for variation dropdowns - Food Store specific */
.wfs-product-form .attribute-label {
    display: block;
    width: 100%;
    margin-bottom: 8px;
}

/* Custom Dropdown Styling */
.custom-dropdown {
    position: relative;
    width: 100%;
    margin-top: 5px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
}

.custom-dropdown-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    background-color: #ffffff;
    color: #333333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.custom-dropdown-selected svg {
    width: 16px;
    height: 16px;
    color: #333333;
    transition: transform 0.3s ease;
}

.custom-dropdown.open .custom-dropdown-selected svg {
    transform: rotate(180deg);
}

.custom-dropdown:hover .custom-dropdown-selected {
    border-color: #2ecc71;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.custom-dropdown:focus .custom-dropdown-selected,
.custom-dropdown.open .custom-dropdown-selected {
    outline: none;
    border-color: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.25);
}

/* Modal Dialog Styling */
.custom-dropdown-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

.custom-dropdown-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
}

.custom-dropdown-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.custom-dropdown-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.custom-dropdown-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333333;
}

.custom-dropdown-modal-close {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.custom-dropdown-modal-close:hover {
    color: #333333;
}

.custom-dropdown-modal-close svg {
    width: 20px;
    height: 20px;
}

.custom-dropdown-modal-body {
    padding: 10px 0;
    overflow-y: auto;
    max-height: 60vh;
}

.custom-dropdown-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.custom-dropdown-option:hover {
    background-color: #f8f8f8;
}

.custom-dropdown-option.selected {
    background-color: #f0f9f4;
}

.option-text {
    font-size: 16px;
    color: #333333;
}

.option-check {
    display: none;
    width: 20px;
    height: 20px;
    color: #2ecc71;
}

.custom-dropdown-option.selected .option-check {
    display: block;
}

/* Body class when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Hide original select elements */
.wfs-product-form select,
.wfs-product-form .wfs-attr-select,
.variations select,
.woocommerce div.product form.cart .variations select {
    display: none;
}

/* Navigation menu styling for screens 600px and above */
@media (min-width: 600px) {
    .wp-block-navigation__container.is-responsive.items-justified-right .wp-block-navigation-item__content {
        color: var(--wfs-primary-color, #267dc9);
    }
    
    /* Change "My orders" to "My Orders" */
    .wp-block-navigation__container a[href="/my-account/orders"] {
        font-size: 0;
    }
    
    .wp-block-navigation__container a[href="/my-account/orders"]::after {
        content: "My Orders";
        font-size: initial;
    }
}

/* Fix for attribute rows */
.wfs-product-form .wfs-attr-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

/* More specific selectors for Food Store variations */
.wfs-product-form label + select,
.wfs-product-form .attribute-label + .wfs-attr-select {
    margin-top: 8px;
    display: block;
    width: 100%;
}

/* Fix for the close (X) button in the bottom cart */
.wfs-close-cart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f0f0f0;
}

.wfs-close-cart-icon i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Modern styling for special notes field */
.wfs-special-instruction-wrapper {
    margin: 4px 0;
    padding: 4px 10px;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.wfs-special-instruction-wrapper:focus-within {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.wfs-special-note-label {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 3px;
    color: #333;
    display: flex;
    align-items: center;
}

.wfs-special-note-label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    background-color: var(--wfs-primary-color, #267dc9);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 111" preserveAspectRatio="xMidYMid meet"><g transform="translate(0,111) scale(0.1,-0.1)" fill="black" stroke="none"><path d="M770 1103 c-17 -6 -100 -84 -100 -94 0 -4 54 -55 120 -113 l120 -107 32 37 c76 85 75 126 -5 205 -68 68 -119 89 -167 72z"/><path d="M369 674 c-145 -163 -272 -307 -283 -321 -21 -28 -90 -333 -77 -346 4 -4 74 18 155 49 l147 57 261 295 c144 162 271 306 283 321 l22 26 -100 90 c-55 49 -110 97 -122 107 -22 17 -23 17 -286 -278z m-193 -409 c10 -37 14 -40 60 -50 45 -9 49 -13 52 -41 3 -31 1 -33 -75 -62 l-78 -30 -36 34 -36 35 14 67 c21 96 19 94 55 90 28 -3 34 -8 44 -43z"/></g></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 111" preserveAspectRatio="xMidYMid meet"><g transform="translate(0,111) scale(0.1,-0.1)" fill="black" stroke="none"><path d="M770 1103 c-17 -6 -100 -84 -100 -94 0 -4 54 -55 120 -113 l120 -107 32 37 c76 85 75 126 -5 205 -68 68 -119 89 -167 72z"/><path d="M369 674 c-145 -163 -272 -307 -283 -321 -21 -28 -90 -333 -77 -346 4 -4 74 18 155 49 l147 57 261 295 c144 162 271 306 283 321 l22 26 -100 90 c-55 49 -110 97 -122 107 -22 17 -23 17 -286 -278z m-193 -409 c10 -37 14 -40 60 -50 45 -9 49 -13 52 -41 3 -31 1 -33 -75 -62 l-78 -30 -36 34 -36 35 14 67 c21 96 19 94 55 90 28 -3 34 -8 44 -43z"/></g></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

#special_note {
    width: 100%;
    padding: 4px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fff;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.3;
    color: #333;
    resize: none;
    height: 50px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    caret-color: var(--wfs-primary-color, #267dc9); /* Makes the cursor more visible */
    overflow: hidden; /* Prevent scrolling */
}

#special_note:focus {
    border-color: var(--wfs-primary-color, #267dc9);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--wfs-primary-color-rgb, 38, 125, 201), 0.15);
    height: 50px; /* Keep consistent height when focused */
    caret-color: var(--wfs-primary-color, #267dc9);
}

#special_note::placeholder {
    color: #777;
    font-style: italic;
    font-size: 16px;
}

/* Toast notification positioning and sizing - fine-tuned */
.jq-toast-wrap {
    width: 280px; /* Slightly increased from default 250px */
}

.jq-toast-wrap.top-right {
    top: 20px;
    right: 30px !important; /* Moved even more to the right */
}

.jq-toast-wrap.bottom-right {
    bottom: 20px;
    right: 30px !important; /* Moved even more to the right */
}

.jq-toast-single {
    padding: 12px; /* Slightly increased padding */
    font-size: 13px; /* Slightly increased font size */
}

.jq-toast-single h2 {
    font-size: 15px; /* Slightly increased heading size */
    margin-bottom: 8px;
}

/* Make sure toast is visible on all screen sizes */
@media (max-width: 768px) {
    .jq-toast-wrap {
        width: auto;
        max-width: 90%;
        right: 25px !important; /* Moved even more to the right for mobile */
    }
    
    .jq-toast-single {
        width: 100%;
        font-size: 14px;
    }
}

/* Cart icon shake animation */
@keyframes cartShake {
    0% { transform: translateX(0); }
    15% { transform: translateX(-5px) rotate(-5deg); }
    30% { transform: translateX(5px) rotate(5deg); }
    45% { transform: translateX(-4px) rotate(-3deg); }
    60% { transform: translateX(4px) rotate(3deg); }
    75% { transform: translateX(-2px) rotate(-1deg); }
    90% { transform: translateX(2px) rotate(1deg); }
    100% { transform: translateX(0); }
}

/* Apply animation class */
.wfs-cart-shake {
    animation: cartShake 0.8s cubic-bezier(.36,.07,.19,.97) both;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .wfs-product-form select,
    .wfs-product-form .wfs-attr-select,
    .variations select,
    .woocommerce div.product form.cart .variations select {
        padding: 10px 12px;
        font-size: 14px;
        background-position: right 12px center;
    }
}

/* ===== FOOD STORE MODAL STICKY HEADER/FOOTER FIX ===== */
/* Fix modal layout to keep header and footer always visible */

/* Style special notes to match custom floating cart */
.wc-block-components-product-details__special-note {
    margin: 8px 0 !important;
    padding: 8px 12px !important;
    background: #fef3c7 !important;
    border-left: 3px solid #f59e0b !important;
    border-radius: 4px !important;
    clear: both !important;
    display: block !important;
    font-size: 14px !important;
    color: #92400e !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    line-height: 1.5 !important;
}

.wc-block-components-product-details__special-note::before {
    content: "- Special Note: ";
    font-weight: 600;
    display: inline;
}

.wc-block-components-product-details__special-note .wc-block-components-product-details__name {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 0 !important;
}

.wc-block-components-product-details__special-note .wc-block-components-product-details__value {
    display: inline !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}

.wc-block-components-product-details__special-note .wc-block-components-product-details__value::before {
    content: none !important;
}

/* Modal container - use flexbox column layout */
.wfsmodal-container {
    display: flex !important;
    flex-direction: column !important;
    max-height: 95% !important; /* Changed from 100% to 95% */
    height: auto !important;
    overflow: hidden !important; /* Prevent container from scrolling */
    background-color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    width: 600px;
    max-width: 90vw; /* Responsive width */
}

/* Header - always visible, never shrink */
.wfsmodal-header {
    flex-shrink: 0 !important; /* Never shrink */
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 0 1rem !important; /* No vertical padding - ultra minimal */
    border-bottom: 1px solid #e9ecef !important;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
    background-color: #fff; /* Ensure solid background */
    z-index: 10; /* Stay above body content */
}

/* Body - scrollable area */
.wfsmodal-body {
    flex: 1 !important; /* Take remaining space */
    overflow-y: auto !important; /* Allow vertical scrolling */
    overflow-x: hidden !important;
    padding: 1rem !important;
    position: relative;
    /* Custom scrollbar for better UX */
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--wfs-primary-color-rgb, 60, 59, 59), 0.3) transparent;
}

/* Webkit scrollbar styling for body */
.wfsmodal-body::-webkit-scrollbar {
    width: 6px;
}

.wfsmodal-body::-webkit-scrollbar-track {
    background: transparent;
}

.wfsmodal-body::-webkit-scrollbar-thumb {
    background-color: rgba(var(--wfs-primary-color-rgb, 60, 59, 59), 0.3);
    border-radius: 3px;
}

.wfsmodal-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--wfs-primary-color-rgb, 60, 59, 59), 0.5);
}

/* Footer - always visible, never shrink */
.wfsmodal-footer {
    flex-shrink: 0 !important; /* Never shrink */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 1rem !important;
    border-top: 1px solid #e9ecef !important;
    background-color: #fff; /* Ensure solid background */
    z-index: 10; /* Stay above body content */
    padding-left: 0;
    padding-right: 0;
}

/* Remove the problematic overflow from the dialog when open */
.wfsmodal.is-open .wfsmodal-dialog {
    overflow: hidden !important; /* Override the auto overflow */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .wfsmodal-dialog {
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 80px !important; /* Leave space for mobile bottom cart */
    }
    
    .wfs-scroll-hint {
        padding: 8px 14px;
        font-size: 12px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .wfsmodal-dialog {
        top: 5px !important;
        left: 5px !important;
        right: 5px !important;
        bottom: 70px !important; /* Leave space for mobile bottom cart */
    }
    
    .wfsmodal-header {
        padding: 0 0.5rem !important; /* No vertical padding - ultra minimal */
    }
    
    .wfsmodal-body,
    .wfsmodal-footer {
        padding: 0.5rem !important;
    }
}

/* ===== FOOD STORE MODAL BODY SCROLL LOCK ===== */
/* Prevent background scrolling when modal is open */

.wfs-modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

/* Ensure modal content can still scroll */
.wfs-modal-open .wfsmodal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Prevent iOS bounce scrolling on modal backdrop */
.wfs-modal-open .wfsmodal,
.wfs-modal-open .wfsmodal-dialog {
    -webkit-overflow-scrolling: auto !important;
    overflow: hidden !important;
}

/* Additional mobile fixes */
@media (max-width: 768px) {
    .wfs-modal-open {
        position: fixed !important;
        overflow: hidden !important;
        -webkit-overflow-scrolling: auto !important;
    }
    
    /* Ensure modal body scrolling works on mobile */
    .wfs-modal-open .wfsmodal-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
}