/* Import Google Fonts Updated */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Roboto:wght@400;500&display=swap');

/* Existing Styles */

/* Adjust margin for radio button containers */
div#rsform_3_page_0.formContainer div.row div.col-md-12 div.mb-3.rsform-block.rsform-block-marquee-type.rsform-type-radiogroup div.formControls div.form-check.form-check-inline {
	margin-left: -30px;
}

/* Hide the default radio buttons */
.rsform-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Style the labels to look like Material Design cards */
.rsform-radio + .form-check-label {
	display: block;
	padding: 20px;
	margin: 10px;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	background-color: #fff;
	color: #333;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
	text-align: center;
	position: relative; /* Ensure pseudo-elements are positioned relative to the label */
	overflow: hidden; /* Prevent pseudo-elements from overflowing */
	font-family: 'Montserrat', sans-serif; /* Modern, clean font */
	font-size: 18px; /* Increased font size */
	font-weight: 500; /* Medium weight */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle text shadow */
}

/* Add an image inside the radio button label */
.rsform-radio + .form-check-label::before {
	content: "";
	display: block;
	width: 100%;
	max-width: 300px;
	aspect-ratio: 1 / 1;
	height: auto;
	margin: 0 auto 10px; /* Center the image and add space below */
	background-size: cover; /* Ensure image covers the area */
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Prevent image repetition */
	position: relative; /* Position relative to label */
	transition: filter 0.3s; /* Smooth transition for grayscale effect */
}

/* Specific styles for each radio button's image */
#Marquee_Type0 + .form-check-label::before {
	background-image: url('/images/virtuemart/product/resized/Clear_Marquee_360x340.jpg');
}

#Marquee_Type1 + .form-check-label::before {
	background-image: url('/images/virtuemart/product/resized/15M_Clear_Span_Frame_Wedding2_360x340.jpg'); /* Replace with actual URL */
}

#Marquee_Type2 + .form-check-label::before {
	background-image: url('/images/virtuemart/product/resized/Festoons_across_marquee_ridge88_360x340.jpg'); /* Replace with actual URL */
}

#Marquee_Type3 + .form-check-label::before {
	background-image: url('/images/virtuemart/product/resized/7.5mx10.5m_chino_stretch_tent_2_sides_down_360x340.jpg'); /* Replace with actual URL */
}

#Marquee_Type4 + .form-check-label::before {
	background-image: url('/images/virtuemart/product/resized/Traditional_Pole_Marquee_360x340.jpg'); /* Replace with actual URL */
}

#Marquee_Type5 + .form-check-label::before {
	background-image: url('images/fairytale-logo-builder.png'); /* Replace with actual URL */
}

/* Hover effects */
.rsform-radio + .form-check-label:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
	color: #4943ac; /* Changed from #007bff to #4943ac */
}

/* Change appearance when the radio button is selected */
.rsform-radio:checked + .form-check-label {
	border: 2px solid #4943ac; /* Changed from #007bff to #4943ac */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	transform: translateY(-4px);
	color: #4943ac; /* Changed from #007bff to #4943ac */
	font-weight: 700; /* Bold text for selected option */
}

/* Container for the radio button labels */
.formControls {
	display: grid;
	gap: 15px; /* Space between buttons */
}

/* Desktop: 3 buttons per row */
@media (min-width: 1200px) {
	.formControls {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Set max-width for buttons on desktop */
	.formControls.btn-group .btn {
		max-width: 15rem; /* Set maximum width to 15rem */
	}

	/* Apply max-width to "Back" and "Build Marquee" buttons */
	.formControls.btn-group .rsform-type-submitbutton input[type="submit"],
	.formControls.btn-group .rsform-type-pagebreak input[type="button"] {
		max-width: 15rem;
		width: 100%; /* Ensure full width within container */
	}
}

/* Tablet: 2 buttons per row */
@media (min-width: 768px) and (max-width: 1023px) {
	.formControls {
		grid-template-columns: repeat(2, 1fr); /* 2 buttons per row */
	}
}

/* Mobile: 1 button per row */
@media (max-width: 767px) {
	.formControls {
		grid-template-columns: 1fr; /* 1 button per row */
	}

	/* Reduce padding and font size for mobile to fit content better */
	.rsform-radio + .form-check-label {
		padding: 10px;
		font-size: 16px;
	}

	/* Ensure buttons are responsive on mobile */
	.formControls.btn-group .btn,
	.formControls.btn-group .rsform-type-submitbutton input[type="submit"],
	.formControls.btn-group .rsform-type-pagebreak input[type="button"] {
		width: 100%;
		max-width: none; /* Remove max-width on mobile */
	}
}

.formControls:not(.btn-group) {
	display: grid;
}

/* Apply flex to dropdowns container specifically */
.formControls > .dropdown-wrapper {
	display: flex;
	flex-direction: column;
}

.dropdown-wrapper select.rsform-select-box {
	flex: 1;
	width: 100%;
	box-sizing: border-box;
}

/* Ensure form container takes full height */
main {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Style for form buttons container */
.formControls.btn-group {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: white; /* Optional: Add a background for better visibility */
	padding: 10px;
	box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow effect */
	z-index: 1000; /* Make sure it's above other content */
	display: flex;
	flex-direction: column; /* Default to column layout for small screens */
	gap: 10px; /* Add spacing between buttons */
	justify-content: center;
	align-items: center;
}

/* Ensure buttons are responsive */
.formControls .btn {
	width: 100%;
	max-width: 300px; /* Existing max-width */
}

/* On larger screens, show buttons side by side */
@media (min-width: 768px) {
	.formControls.btn-group {
		flex-direction: row; /* Change to row layout */
	}

	.formControls .btn {
		width: auto;
		max-width: none; /* Allow buttons to take their natural width */
	}
}

/* Mobile-specific styles */
@media (max-width: 767px) {
	.formControls.btn-group {
		flex-direction: row; /* Ensure buttons are side by side on mobile */
		align-items: stretch; /* Make sure buttons stretch to full width */
		gap: 10px; /* Add spacing between buttons */
		padding: 10px; /* Add padding to ensure buttons have space around them */
	}

	.formControls .btn {
		flex: 1; /* Ensure buttons take up equal space */
		width: 100%; /* Ensure each button is full width within its container */
	}
}

/* ===================== */
/* New Styles Start Here */
/* ===================== */

/* Position the label relative to contain pseudo-elements */
.rsform-radio + .form-check-label {
	position: relative;
}

/* Add a checkmark overlay when selected */
.rsform-radio + .form-check-label::after {
	content: "✓"; /* Checkmark symbol */
	position: absolute;
	top: 50%; /* Center vertically */
	left: 50%; /* Center horizontally */
	transform: translate(-50%, -50%); /* Adjust position to center */
	font-size: 48px; /* Make the checkmark larger */
	color: #28a745; /* Change color to a nicer color, e.g., green */
	background-color: rgba(255, 255, 255, 0.7); /* Optional: semi-transparent background for better visibility */
	border-radius: 50%; /* Make it circular */
	width: 60px;
	height: 60px;
	display: none; /* Hidden by default */
	align-items: center;
	justify-content: center;
	z-index: 2; /* Ensure it appears above the image */
}

/* Show the checkmark when selected */
.rsform-radio:checked + .form-check-label::after {
	display: flex; /* Show the checkmark */
}

/* Apply grayscale filter to the image when selected */
.rsform-radio:checked + .form-check-label::before {
	filter: grayscale(100%);
}

/* Adjust the label to have enough padding at the bottom if needed */
.rsform-radio + .form-check-label {
	padding-bottom: 20px; /* Adjust as needed */
}

/* ===================== */
/* New Styles End Here   */
/* ===================== */

/* ===================== */
/* Additional Custom Styles */
/* ===================== */

/* Apply .custom-btn styles to Submit and Back buttons */

.formControls.btn-group .rsform-type-submitbutton input[type="submit"],
.formControls.btn-group .rsform-type-pagebreak input[type="button"] {
	/* Inherit styles from .custom-btn */
	display: inline-block;
	padding: 0.75rem 1.25rem;
	margin: 0.5rem;
	font-size: 1rem;
	font-weight: 400;
	color: #fff; /* Button text color */
	background-color: #4943ac; /* Button background color */
	border: none;
	border-radius: 0.375rem; /* 6px */
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.3s, transform 0.3s;
	max-width: 15rem; /* Max width as per previous requirement */
	width: 100%; /* Full width within container */
	box-sizing: border-box;
	position: relative; /* For positioning background images */
	background-repeat: no-repeat;
	background-size: 1.5rem 1.5rem; /* Adjust icon size */
}

/* Specific Styles for "Back" Button */
.formControls.btn-group .rsform-type-pagebreak input[type="button"] {
	background-image: url('https://www.fairytalemarquees.co.uk/images/arrow-left-solid-white.svg'); /* Left arrow URL (white arrow) */
	background-position: 15px center; /* Position icon 15px from the left */
	padding-left: 2.5rem; /* Ensure space for the icon */
	text-align: left; /* Align text to the left to prevent overlap */
}

/* Specific Styles for "AnnexesPrev" Button */
#AnnexesPrev,
#LightingPrev,
#FurniturePrev,
#Power_Supplies_PagePrev,
#Dance_Floors_and_StagesPrev,
#Other_ItemsPrev,
#Venue_InformationPrev,
#Customer_DetailsPrev,
#Build_My_MarqueePrev {
	/* Background Image */
	background-image: url('https://www.fairytalemarquees.co.uk/images/arrow-left-solid-white.svg'); /* Left arrow URL (white arrow) */
	background-repeat: no-repeat;
	background-size: 1.5rem 1.5rem; /* Adjust icon size as needed */
	background-position: 15px center; /* Position icon 15px from the left and vertically centered */

	/* Padding to Prevent Text Overlap */
	padding-left: 2.5rem; /* Space for the icon */

	/* Text Alignment */
	text-align: left; /* Align text to the left */

	/* Button Appearance */
	background-color: #4943ac; /* Button background color */
	color: #fff; /* Button text color */

	/* Other Styles */
	border: none;
	border-radius: 0.375rem; /* 6px */
	cursor: pointer;
	transition: background-color 0.3s, transform 0.3s;

	/* Ensure the button has sufficient height */
	height: 3rem; /* Adjust based on your design */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Specific Styles for "AnnexesNext" Button */
#Marquee_OptionsNext,
#AnnexesNext,
#LightingNext,
#FurnitureNext,
#Power_Supplies_PageNext,
#Dance_Floors_and_StagesNext,
#Other_ItemsNext,
#Venue_InformationNext,
#Customer_DetailsNext,
#Build_My_Marquee
 {
	/* Background Image */
	background-image: url('https://www.fairytalemarquees.co.uk/images/arrow-right-solid-white.svg'); /* Right arrow URL (white arrow) */
	background-repeat: no-repeat;
	background-size: 1.5rem 1.5rem; /* Adjust icon size as needed */
	background-position: calc(100% - 15px) center; /* Position icon 15px from the right and vertically centered */

	/* Padding to Prevent Text Overlap */
	padding-right: 2.5rem; /* Space for the icon */

	/* Text Alignment */
	text-align: right; /* Align text to the right */

	/* Button Appearance */
	background-color: #4943ac; /* Button background color */
	color: #fff; /* Button text color */

	/* Other Styles */
	border: none;
	border-radius: 0.375rem; /* 6px */
	cursor: pointer;
	transition: background-color 0.3s, transform 0.3s;

	/* Ensure the button has sufficient height */
	height: 3rem; /* Adjust based on your design */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Hover States
.formControls.btn-group .rsform-type-submitbutton input[type="submit"]:hover,
.formControls.btn-group .rsform-type-pagebreak input[type="button"]:hover,
#Marquee_OptionsNext:hover,
#AnnexesPrev:hover,
#AnnexesNext:hover,
#LightingNext:hover,
#LightingPrev:hover,
#Venue_InformationPrev:hover,
#Venue_InformationNext:hover,
#Customer_DetailsPrev:hover,
#Customer_DetailsNext:hover,
#Build_My_MarqueePrev:hover,
#Build_My_Marquee:hover {
	background-color: #3a34a3;
	transform: translateY(-2px);
}
*/


/* Active States */
.formControls.btn-group .rsform-type-submitbutton input[type="submit"]:active,
.formControls.btn-group .rsform-type-pagebreak input[type="button"]:active,
#Marquee_OptionsNext:active,
#AnnexesPrev:active,
#AnnexesNext:active,
#LightingNext:active,
#LightingPrev:active,
#Venue_InformationPrev:active,
#Venue_InformationNext:active,
#Customer_DetailsPrev:active,
#Customer_DetailsNext:active,
#Build_My_MarqueePrev:active,
#Build_My_Marquee:active {
	background-color: #352f93; /* Even darker on active */
	transform: translateY(0); /* Remove movement */
}

/* Disabled States */
.formControls.btn-group .rsform-type-submitbutton input[type="submit"]:disabled,
.formControls.btn-group .rsform-type-pagebreak input[type="button"]:disabled,
#Marquee_OptionsNext:disabled,
#AnnexesPrev:disabled,
#AnnexesNext:disabled,
#LightingNext:disabled,
#LightingPrev:disabled,
#Venue_InformationPrev:disabled,
#Venue_InformationNext:disabled,
#Customer_DetailsPrev:disabled,
#Customer_DetailsNext:disabled,
#Build_My_MarqueePrev:disabled,
#Build_My_Marquee:disabled {
	background-color: #a0a0a0; /* Greyed out when disabled */
	cursor: not-allowed;
}

/* Focus State for Accessibility */
#Marquee_OptionsNext:focus,
#AnnexesPrev:focus,
#AnnexesNext:focus,
#LightingNext:focus,
#LightingPrev:focus,
#Venue_InformationPrev:focus,
#Venue_InformationNext:focus,
#Customer_DetailsPrev:focus,
#Customer_DetailsNext:focus,
#Build_My_MarqueePrev:focus,
#Build_My_Marquee:focus {
	outline: 3px solid #4943ac; /* Outline color matching the button's background */
	outline-offset: 2px; /* Space between the outline and the button */
}

.mb-3.rsform-block.rsform-block-marquee-type.rsform-type-radiogroup {
	margin-bottom: 5rem!important;
}


/* 1. Reset Box Sizing for Consistency */
*, *::before, *::after {
	box-sizing: border-box;
}

/* 2. Main Form Container */
.rsform-block-build-my-marquee {
	/* No need for Flexbox on the main container when fixing buttons */
	position: relative; /* Establish a positioning context if needed */
	max-width: 800px; /* Optional: Adjust based on your design */
	margin: 0 auto; /* Center the form horizontally */
	padding: 1rem; /* Adjust as needed */
}

/* 3. Form Content (excluding formControls) */
.rsform-block-build-my-marquee .formContent {
	/* Ensure the form content doesn't interfere with the fixed buttons */
	padding-bottom: 4rem; /* Space to prevent overlap with fixed buttons */
}

/* 4. Fixing formControls to the Bottom Center of the Viewport */
.rsform-block-build-my-marquee .formControls {
	position: fixed;
	bottom: 0px; /* Distance from the bottom of the viewport */
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center; /* Center buttons horizontally */
	gap: 0.5rem; /* Space between buttons */
			/* Padding around the buttons */
	background-color: rgba(255, 255, 255, 1); /* White background */
	border-radius: 8px; /* Rounded corners */
	z-index: 100000; /* Ensure it stays above other elements */
	min-width: 100vw;
	border-top: 3px color(srgb 0.941 0.941 0.941) solid;
}

button#Build_My_Marquee {
	padding-left: 3rem;
	padding-right: 4rem;
	min-width: 13rem;
	margin-bottom: 0.6rem;
	margin-top: 0.6rem;
	max-width: 13vw;

}

button#Build_My_MarqueePrev {
	padding-left: 3.4rem;
	padding-right: 2.5rem;
	min-width: 13rem;
	margin-top: 0.6rem;
	max-width: 13vw;
}

/* 5. Base Styles for All Buttons within formControls */
.rsform-block-build-my-marquee .formControls .btn {
	display: inline-block;
	padding: 0.75rem 1.25rem;
	font-size: 1rem;
	font-weight: 400;
	color: #fff; /* Button text color */
	background-color: #4943ac; /* Match existing buttons' background color */
	border: none;
	border-radius: 0.375rem; /* 6px */
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.3s, transform 0.3s;
	max-width: 15rem; /* Consistent max width */
	width: auto; /* Allow buttons to size based on content */
	box-sizing: border-box;
	position: relative; /* For positioning background images */
	background-repeat: no-repeat;
	background-size: 1.5rem 1.5rem; /* Icon size */
	padding-left: 2.5rem; /* Space for left icon */
	padding-right: 2.5rem; /* Space for right icon */
}

/* 6. Specific Styles for "Back" Buttons */
.rsform-block-build-my-marquee .formControls .btn.rsform-button-prev,
.rsform-block-build-my-marquee .formControls .btn.rsform-type-pagebreak {
	background-image: url('https://www.fairytalemarquees.co.uk/images/arrow-left-solid-white.svg'); /* Left arrow icon */
	background-position: 15px center; /* Position icon 15px from the left */
	background-repeat: no-repeat;
	text-align: left; /* Align text to the left */
	padding-left: 2.5rem; /* Space for the icon */
	padding-right: 1.25rem; /* Reduce right padding to prevent extra space */
}

/* 7. Specific Styles for "Next" Buttons */
.rsform-block-build-my-marquee .formControls .btn.rsform-submit-button,
.rsform-block-build-my-marquee .formControls .btn.rsform-button-next {
	background-image: url('https://www.fairytalemarquees.co.uk/images/arrow-right-solid-white.svg'); /* Right arrow icon */
	background-position: calc(100% - 15px) center; /* Position icon 15px from the right */
	background-repeat: no-repeat;
	text-align: right; /* Align text to the right */
	padding-right: 2.5rem; /* Space for the icon */
	padding-left: 1.25rem; /* Reduce left padding to prevent extra space */
}

/* 8. Hover Effects */
/* .rsform-block-build-my-marquee .formControls .btn:hover {
	background-color: #3a34a3; /* Darker shade on hover */
	transform: translateY(-2px); /* Slight upward movement */ */
}

/* 9. Active States */
.rsform-block-build-my-marquee .formControls .btn:active {
	background-color: #352f93; /* Even darker on active */
	transform: translateY(0); /* Remove movement */
}

/* 10. Disabled States */
.rsform-block-build-my-marquee .formControls .btn:disabled {
	background-color: #a0a0a0; /* Greyed out when disabled */
	cursor: not-allowed;
}

/* 11. Focus State for Accessibility */
.rsform-block-build-my-marquee .formControls .btn:focus {
	outline: 3px solid #4943ac; /* Outline color matching the button's background */
	outline-offset: 2px; /* Space between the outline and the button */
}

/* 12. Optional: Specific Button Adjustments */
.rsform-block-build-my-marquee .formControls .rsform-button-prev.btn-warning {
	background-color: #ffc107; /* Bootstrap warning color */
	background-image: url('https://www.fairytalemarquees.co.uk/images/arrow-left-solid-white.svg'); /* Ensure correct icon */
}

.rsform-block-build-my-marquee .formControls .rsform-submit-button.btn-primary {
	background-color: #4943ac; /* Match existing buttons */
	background-image: url('https://www.fairytalemarquees.co.uk/images/arrow-right-solid-white.svg'); /* Ensure correct icon */
}

/* 13. Responsive Adjustments */
@media (max-width: 600px) {
/* 	.rsform-block-build-my-marquee .formControls {
		flex-direction: column; /* Stack buttons vertically on small screens */
		align-items: center; /* Center buttons */
		padding: 0.5rem 1rem; /* Adjust padding for smaller screens */
		bottom: 10px; /* Adjust distance from bottom */ */
	}

	.rsform-block-build-my-marquee .formControls .btn {
		max-width: none; /* Remove max-width for full-width buttons */
		width: 100%;
		padding-left: 1.5rem; /* Adjust padding for icons */
		padding-right: 1.5rem;
		text-align: center; /* Center text on small screens */
		background-position: center; /* Center icons */
		background-size: 1.5rem 1.5rem; /* Maintain icon size */
	}

	/* Adjust icon positions for stacked buttons */
	.rsform-block-build-my-marquee .formControls .btn.rsform-button-prev,
	.rsform-block-build-my-marquee .formControls .btn.rsform-type-pagebreak {
		background-position: 15px center; /* Left icon remains */
		padding-left: 2rem; /* Slightly reduce padding */
		padding-right: 1.5rem; /* Slightly reduce padding */
	}

	.rsform-block-build-my-marquee .formControls .btn.rsform-submit-button,
	.rsform-block-build-my-marquee .formControls .btn.rsform-button-next {
		background-position: calc(100% - 15px) center; /* Right icon remains */
		padding-right: 2rem; /* Slightly reduce padding */
		padding-left: 1.5rem; /* Slightly reduce padding */
	}
}


/* =========================================
   1. CSS Variables for Consistent Colors
   ========================================= */
:root {
	--primary-color: #007bff; /* Blue for interactive elements */
	--current-date-bg: #28a745; /* Green for current date */
	--weekend-color: #d9534f; /* Red for weekends */
	--hover-bg: #007bff; /* Light blue on hover */
	--hover-text: #fff; /* White text on hover */
}

/* =========================================
   2. Enlarge Date Cells
   ========================================= */

/* Target individual date cells */
.xdsoft_date {
	width: 50px;                    /* Increased width */
	height: 50px;                   /* Increased height */
	line-height: 50px;              /* Center the date number vertically */
	font-size: 16px;                /* Larger font size */
	border-radius: 4px;             /* Rounded corners */
	transition: background-color 0.3s, color 0.3s; /* Smooth transitions */
}

/* =========================================
   3. Enlarge Day Labels
   ========================================= */

/* Target day labels in the calendar header */
.xdsoft_calendar thead th {
	font-size: 16px;                /* Increased font size */
	padding: 12px 0;                /* Balanced padding */
	text-transform: uppercase;      /* Uppercase for clarity */
	font-weight: bold;              /* Bold font for emphasis */
	color: #555;                    /* Darker color for contrast */
}

/* =========================================
   4. Maintain Overall Clean Design
   ========================================= */

/* Ensure date cells maintain alignment and spacing */
.xdsoft_datepicker .xdsoft_calendar {
	margin-top: 10px;               /* Slight margin to separate from month/year picker */
}

/* =========================================
   5. Interactive Enhancements
   ========================================= */

/* Hover effect for date cells */
.xdsoft_date:hover {
	background-color: var(--hover-bg);      /* Light blue on hover */
	color: var(--hover-text);                /* White text on hover */
	cursor: pointer;                         /* Indicate that the date is clickable */
}

/* Highlight the current date */
.xdsoft_date.xdsoft_current {
	background-color: var(--current-date-bg); /* Green background for the current date */
	color: var(--hover-text);                 /* White text for contrast */
}

/* Style weekends differently */
.xdsoft_date.xdsoft_weekend {
	color: var(--weekend-color);             /* Red color for weekends */
}

/* =========================================
   6. Save Selected Button Enhancements
   ========================================= */

/* Style the Save Selected button */
.xdsoft_save_selected {
	font-size: 16px;                    /* Larger text */
	padding: 10px 20px;                 /* Increased padding */
	background-color: #28a745;          /* Green background */
	color: #fff;                        /* White text */
	border: none;                       /* Remove default borders */
	border-radius: 4px;                 /* Rounded corners */
	cursor: pointer;                    /* Indicate interactivity */
	transition: background-color 0.3s;  /* Smooth hover transition */
	margin-top: 15px;                   /* Space above the button */
}

.xdsoft_save_selected:hover {
	background-color: #218838;          /* Darker green on hover */
}

/* =========================================
   7. Typography Consistency
   ========================================= */

/* Use a consistent font family */
body, .xdsoft_datetimepicker {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Clean, readable font */
}

/* =========================================
   8. Smooth Transitions for Interactive Elements
   ========================================= */

/* Apply smooth transitions to interactive elements */
.xdsoft_prev,
.xdsoft_next,
.xdsoft_date,
.xdsoft_save_selected,
.xdsoft_time_variant .xdsoft_time {
	transition: background-color 0.3s, color 0.3s;
}



	/* Wrapper for the compact progress component */
	.compact-progress-wrapper {
	  width: 100%;
	  max-width: 500px; /* Adjust as needed */
	  margin: 15px auto;
	  font-family: 'Arial', sans-serif;
	}

	/* Container for info and percentage */
	.compact-progress-info {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 5px;
	  font-size: 14px;
	  color: #444;
	}

	/* Container for the progress bar */
	.compact-progress-container {
	  background-color: #f5f5f5;
	  border-radius: 10px;
	  overflow: hidden;
	  height: 10px; /* Reduced height for compactness */
	  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	  position: relative;
	}

	/* The actual progress bar */
	.compact-progress-bar {
	  height: 100%;
	  background-color: #3a34a3; /* Solid color for simplicity */
	  transition: width 0.3s ease;
	}

	/* Optional: Tooltip */
	.compact-progress-container::after {
	  content: attr(data-tooltip);
	  position: absolute;
	  top: -25px;
	  left: 50%;
	  transform: translateX(-50%);
	  background-color: #333;
	  color: #fff;
	  padding: 3px 8px;
	  border-radius: 4px;
	  font-size: 12px;
	  opacity: 0;
	  transition: opacity 0.3s ease;
	  pointer-events: none;
	}

	.compact-progress-container:hover::after {
	  opacity: 1;
	}






/*****************************************************
 * Lighting Options - "Marquee Type" Inspired Style
 * (No Conflict with Existing Marquee Radio CSS)
*****************************************************/

/* 1) Scope everything to the Lighting Options container */
.mb-3.rsform-block.rsform-block-lighting-options.rsform-type-checkboxgroup {
  /* Optional bottom margin, if desired */
  margin-bottom: 5rem !important;
}

/* 2) Hide native checkboxes (similar to your .rsform-radio approach) */
.mb-3.rsform-block.rsform-block-lighting-options.rsform-type-checkboxgroup
  .rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 3) Lay out the checkboxes in a grid, with breakpoints for Desktop/Tablet/Mobile */
.mb-3.rsform-block.rsform-block-lighting-options.rsform-type-checkboxgroup .formControls {
  display: grid;
  gap: 15px; /* Space between “cards” */
}

/* Desktop: 3 columns */
@media (min-width: 1200px) {
  .mb-3.rsform-block.rsform-block-lighting-options.rsform-type-checkboxgroup .formControls {
	grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .mb-3.rsform-block.rsform-block-lighting-options.rsform-type-checkboxgroup .formControls {
	grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
  .mb-3.rsform-block.rsform-block-lighting-options.rsform-type-checkboxgroup .formControls {
	grid-template-columns: 1fr;
  }

  /* Optional: Slightly smaller font or padding on mobile, if needed */
  /*
  .mb-3.rsform-block.rsform-block-lighting-options.rsform-type-checkboxgroup
	.rsform-checkbox + .form-check-label {
	font-size: 16px;
	padding: 15px;
  }
  */
}

/* 4) Card-like style for each label (matching marquee style) */
.mb-3.rsform-block.rsform-block-lighting-options.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif; /* Matches marquee style */
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5) Show an image in the label using ::before (300x300 to match marquee style) */
.mb-3.rsform-block.rsform-block-lighting-options.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label::before {
  content: "";
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: filter 0.3s;
}

/* -- Example images: assign them to each #Lighting_OptionsX + .form-check-label::before -- */
/* Antique brass chandelier - Large (12 arm) */
#Lighting_Options0 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/antique-brass-chandelier-large-12-arm.jpg');
}
/* Disco ball with pin spot */
#Lighting_Options1 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/disco-ball-with-pin-spot.jpg');
}
/* Exterior festoon lighting around marquee perimeter */
#Lighting_Options2 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Exterior_Festoons_2.jpg');
}
/* Exterior festoon lighting fitted to shepherds' crooks (60' length) */
#Lighting_Options3 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Festoons-and-fairy-lights.jpg');
}
/* Fairy lights throughout marquee ceiling (1.5M spacing) */
#Lighting_Options4 + .form-check-label::before {
  background-image: url('/images/clear_roof_with_fairy_lights.jpg');
}
/* Fairy lights wrapped around venue tree */
#Lighting_Options5 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/fairy-lights-wrapped-around-venue-tree.jpg');
}
/* Floodlight */
#Lighting_Options6 + .form-check-label::before {
  background-image: url('/images/Flood_light.jpg');
}
/* Fluorescent tube strip lighting */
#Lighting_Options7 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/fluorescent-tube-strip-lighting.jpg');
}
/* Interior festoon lighting */
#Lighting_Options8 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Petal_pole_40x100_interior.jpg');
}
/* Spiral Pendant chandelier - Large */
#Lighting_Options9 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/resized/Spiral_Pendant_Chandelier_360x340.jpg');
}
/* White body uplighter unit */
#Lighting_Options10 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/white_body_uplighter.jpg');
}

/* 6) Hover effect: bounce the card, change text color */
.mb-3.rsform-block.rsform-block-lighting-options.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac; /* same color used in marquee style */
}

/* 7) Checked state: purple border, bigger box-shadow, raised card, bold text */
.mb-3.rsform-block.rsform-block-lighting-options.rsform-type-checkboxgroup
  .rsform-checkbox:checked + .form-check-label {
  border: 2px solid #4943ac;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac;
  font-weight: 700;
}

/* 8) Green checkmark overlay and grayscale image on check (like marquee) */
.mb-3.rsform-block.rsform-block-lighting-options.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: #28a745; /* green check */
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: none; /* hidden unless checked */
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.mb-3.rsform-block.rsform-block-lighting-options.rsform-type-checkboxgroup
  .rsform-checkbox:checked + .form-check-label::after {
  display: flex;
}

.mb-3.rsform-block.rsform-block-lighting-options.rsform-type-checkboxgroup
  .rsform-checkbox:checked + .form-check-label::before {
  filter: grayscale(100%);
}












/* =========================================
   Hard Flooring Sections
========================================= */

/* 1. Scope All Hard Flooring Sections (1 to 6) */
.mb-3.rsform-block[class*="rsform-block-hard-flooring-type"][class*="rsform-type-checkboxgroup"] {
  /* Optional: Add any specific margin or padding if needed */
/*   margin-bottom: 5rem !important; /* Consistent with Lighting Options */ */
}

/* 2. Hide Native Checkboxes */
.mb-3.rsform-block[class*="rsform-block-hard-flooring-type"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 3. Layout Checkboxes in a Grid with Responsive Breakpoints */
.mb-3.rsform-block[class*="rsform-block-hard-flooring-type"][class*="rsform-type-checkboxgroup"] .formControls {
  display: grid;
  gap: 15px; /* Space between “cards” */
}

/* Desktop: 3 Columns */
@media (min-width: 1200px) {
  .mb-3.rsform-block[class*="rsform-block-hard-flooring-type"][class*="rsform-type-checkboxgroup"] .formControls {
	grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet: 2 Columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .mb-3.rsform-block[class*="rsform-block-hard-flooring-type"][class*="rsform-type-checkboxgroup"] .formControls {
	grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 Column */
@media (max-width: 767px) {
  .mb-3.rsform-block[class*="rsform-block-hard-flooring-type"][class*="rsform-type-checkboxgroup"] .formControls {
	grid-template-columns: 1fr;
  }

  /* Optional: Adjust padding and font size on mobile */
  .mb-3.rsform-block[class*="rsform-block-hard-flooring-type"][class*="rsform-type-checkboxgroup"]
	.rsform-checkbox + .form-check-label {
	padding: 15px;
	font-size: 16px;
  }
}

/* 4. Card-like Style for Each Label (Matching Lighting Style) */
.mb-3.rsform-block[class*="rsform-block-hard-flooring-type"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox + .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif; /* Consistent font */
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Add an Image Inside the Label Using ::before */
.mb-3.rsform-block[class*="rsform-block-hard-flooring-type"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox + .form-check-label::before {
  content: "";
  display: block;
  width: 300px; /* Fixed width to match Lighting */
  height: 300px; /* Fixed height to match Lighting */
  margin: 0 auto 10px; /* Center the image and add space below */
  background-size: cover; /* Ensure image covers the area */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent image repetition */
  position: relative;
  transition: filter 0.3s;
}

/* 6. Assign Specific Images to Each Hard Flooring Option */
/* Repeat this block for Hard Flooring Types 1 to 6 with respective IDs */

#Hard_Flooring_Type_10 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Cassette_floor_ice_rink.jpg'); /* Clear Roof Frame Marquee - Cassette */
}

#Hard_Flooring_Type_11 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/resized/Marquee-interlocking-floor_360x340.jpg'); /* Clear Roof Frame Marquee - Interlocking boarded wooden floor (BLACK) */
}


#Hard_Flooring_Type_20 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Cassette_floor_ice_rink.jpg'); /* Clear Roof Frame Marquee - Cassette */
}

#Hard_Flooring_Type_21 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/resized/Marquee-interlocking-floor_360x340.jpg'); /* Clear Roof Frame Marquee - Interlocking boarded wooden floor (BLACK) */
}

#Hard_Flooring_Type_30 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/resized/Marquee-interlocking-floor_360x340.jpg'); /* Petal Pole Marquee - Interlocking boarded wooden floor (BLACK) */
}

#Hard_Flooring_Type_40 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/resized/Marquee-interlocking-floor_360x340.jpg'); /* Stretch Tent - Interlocking boarded wooden floor (BLACK) */
}

#Hard_Flooring_Type_50 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/resized/Marquee-interlocking-floor_360x340.jpg'); /* Traditional Pole Marquee - Interlocking boarded wooden floor (BLACK) */
}

#Hard_Flooring_Type_60 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Cassette_floor_ice_rink.jpg'); /* Accessories Only - Cassette */
}

#Hard_Flooring_Type_61 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/resized/Marquee-interlocking-floor_360x340.jpg'); /* Accessories Only - Interlocking boarded wooden floor (BLACK) */
}

/* Add similar blocks for Hard_Flooring_Type_12 to Hard_Flooring_Type_15 */

/* Example for Hard_Flooring_Type_12 */
#Hard_Flooring_Type_12 + .form-check-label::before {
  background-image: url('https://www.example.com/path/to/hardflooring3.jpg'); /* Replace with actual URL */
}

/* Continue similarly for all Hard Flooring Types */

/* 7. Hover Effects */
.mb-3.rsform-block[class*="rsform-block-hard-flooring-type"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox + .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac; /* Consistent color with marquee and lighting */
}

/* 8. Checked State Styles */
.mb-3.rsform-block[class*="rsform-block-hard-flooring-type"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox:checked + .form-check-label {
  border: 2px solid #4943ac; /* Purple border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac; /* Consistent color */
  font-weight: 700; /* Bold text */
}

/* 9. Checkmark Overlay and Grayscale Image on Check */
.mb-3.rsform-block[class*="rsform-block-hard-flooring-type"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox + .form-check-label::after {
  content: "✓"; /* Checkmark symbol */
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position to center */
  font-size: 48px; /* Make the checkmark larger */
  color: #28a745; /* Green checkmark */
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
  border-radius: 50%; /* Circular background */
  width: 60px;
  height: 60px;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2; /* Ensure it appears above the image */
}

.mb-3.rsform-block[class*="rsform-block-hard-flooring-type"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox:checked + .form-check-label::after {
  display: flex; /* Show the checkmark when checked */
}

.mb-3.rsform-block[class*="rsform-block-hard-flooring-type"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox:checked + .form-check-label::before {
  filter: grayscale(100%); /* Grayscale image when checked */
}



/* =========================================
   Marquee Lining Sections - Styles to Match Lighting and Hard Flooring
========================================= */

/* 1. Scope All Marquee Lining Sections (1 and 2) */
.mb-3.rsform-block[class*="rsform-block-marquee-lining"][class*="rsform-type-checkboxgroup"] {
  margin-bottom: 5rem !important; /* Consistent with Lighting and Hard Flooring */
}

/* 2. Hide Native Checkboxes */
.mb-3.rsform-block[class*="rsform-block-marquee-lining"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 3. Layout Checkboxes in a Grid with Responsive Breakpoints */
.mb-3.rsform-block[class*="rsform-block-marquee-lining"][class*="rsform-type-checkboxgroup"] .formControls {
  display: grid;
  gap: 15px; /* Space between “cards” */
}

/* Desktop: 3 Columns */
@media (min-width: 1200px) {
  .mb-3.rsform-block[class*="rsform-block-marquee-lining"][class*="rsform-type-checkboxgroup"] .formControls {
	grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet: 2 Columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .mb-3.rsform-block[class*="rsform-block-marquee-lining"][class*="rsform-type-checkboxgroup"] .formControls {
	grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 Column */
@media (max-width: 767px) {
  .mb-3.rsform-block[class*="rsform-block-marquee-lining"][class*="rsform-type-checkboxgroup"] .formControls {
	grid-template-columns: 1fr;
  }

  /* Optional: Adjust padding and font size on mobile */
  .mb-3.rsform-block[class*="rsform-block-marquee-lining"][class*="rsform-type-checkboxgroup"]
	.rsform-checkbox + .form-check-label {
	padding: 15px;
	font-size: 16px;
  }
}

/* 4. Card-like Style for Each Label (Matching Lighting and Hard Flooring) */
.mb-3.rsform-block[class*="rsform-block-marquee-lining"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox + .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif; /* Consistent font */
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Add an Image Inside the Label Using ::before */
.mb-3.rsform-block[class*="rsform-block-marquee-lining"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox + .form-check-label::before {
  content: "";
  display: block;
  width: 300px; /* Fixed width to match Lighting and Hard Flooring */
  height: 300px; /* Fixed height to match Lighting and Hard Flooring */
  margin: 0 auto 10px; /* Center the image and add space below */
  background-size: cover; /* Ensure image covers the area */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent image repetition */
  position: relative;
  transition: filter 0.3s;
}

/* 6. Assign Specific Images to Each Marquee Lining Option */
/* Replace the URLs with actual images for each option */

#Marquee_Lining_10 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Marquee_Star_Cloth5.jpg'); /* Black-out Star Cloth */
}

#Marquee_Lining_11 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/9M_Frame_Marquee_wedding_2.jpg'); /* Pleated Ivory Lining */
}

#Marquee_Lining_12 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/clear-span-frame-reveal-curtain.jpg'); /* Reveal Curtain */
}

/* 7. Hover Effects */
.mb-3.rsform-block[class*="rsform-block-marquee-lining"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox + .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac; /* Consistent color with marquee, lighting, and hard flooring */
}

/* 8. Checked State Styles */
.mb-3.rsform-block[class*="rsform-block-marquee-lining"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox:checked + .form-check-label {
  border: 2px solid #4943ac; /* Purple border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac; /* Consistent color */
  font-weight: 700; /* Bold text */
}

/* 9. Checkmark Overlay and Grayscale Image on Check */
.mb-3.rsform-block[class*="rsform-block-marquee-lining"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox + .form-check-label::after {
  content: "✓"; /* Checkmark symbol */
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position to center */
  font-size: 48px; /* Make the checkmark larger */
  color: #28a745; /* Green checkmark */
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
  border-radius: 50%; /* Circular background */
  width: 60px;
  height: 60px;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2; /* Ensure it appears above the image */
}

.mb-3.rsform-block[class*="rsform-block-marquee-lining"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox:checked + .form-check-label::after {
  display: flex; /* Show the checkmark when checked */
}

.mb-3.rsform-block[class*="rsform-block-marquee-lining"][class*="rsform-type-checkboxgroup"]
  .rsform-checkbox:checked + .form-check-label::before {
  filter: grayscale(100%); /* Grayscale image when checked */
}

/* =========================================
   Styles for Carpet Checkbox Group
========================================= */

/* 1. Scoped Styling for Carpet Group */
.rsform-type-checkboxgroup.rsform-block-carpet .formControls {
  display: grid !important; /* Ensure grid layout takes precedence */
  gap: 15px; /* Space between “cards” */
}

/* 2. Responsive Grid Layout */
@media (min-width: 1200px) {
  .rsform-type-checkboxgroup.rsform-block-carpet .formControls {
	grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .rsform-type-checkboxgroup.rsform-block-carpet .formControls {
	grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .rsform-type-checkboxgroup.rsform-block-carpet .formControls {
	grid-template-columns: 1fr !important;
  }

  /* Adjust padding and font size on mobile */
  .rsform-type-checkboxgroup.rsform-block-carpet .form-check-label {
	padding: 15px;
	font-size: 16px;
  }
}

/* 3. Hide Native Checkboxes */
.rsform-type-checkboxgroup.rsform-block-carpet input[type="checkbox"].rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 4. Card-like Style for Each Label */
.rsform-type-checkboxgroup.rsform-block-carpet .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif; /* Consistent font */
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Add an Image Inside the Label Using ::before */
.rsform-type-checkboxgroup.rsform-block-carpet .form-check-label::before {
  content: "";
  display: block;
  width: 300px; /* Updated width to match other sections */
  height: 300px; /* Updated height to match other sections */
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  transition: filter 0.3s;
}

/* 6. Assign Specific Images to Each Carpet Option */

#Carpet0 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/new-corded-carpet-anthracite.jpg'); /* New corded carpet - Anthracite */
}

#Carpet1 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/new-corded-carpet-black.jpg'); /* New corded carpet - Black */
}

#Carpet2 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/new-corded-carpet-blue.jpg'); /* New corded carpet - Blue */
}

#Carpet3 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/new-corded-carpet-coffee.jpg'); /* New corded carpet - Coffee */
}

#Carpet4 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/new-corded-carpet-cream.jpg'); /* New corded carpet - Cream */
}

#Carpet5 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/new-corded-carpet-green.jpg'); /* New corded carpet - Green */
}

#Carpet6 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/new-corded-carpet-pink.jpg'); /* New corded carpet - Pink */
}

#Carpet7 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/new-corded-carpet-purple.jpg'); /* New corded carpet - Purple */
}

#Carpet8 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/new-corded-carpet-red.jpg'); /* New corded carpet - Red */
}

/* 7. Hover Effects */
.rsform-type-checkboxgroup.rsform-block-carpet .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac; /* Consistent color with other sections */
}

/* 8. Selected (Checked) State Styles */
.rsform-type-checkboxgroup.rsform-block-carpet input[type="checkbox"]:checked + .form-check-label {
  border: 2px solid #4943ac; /* Purple border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac; /* Consistent color */
  font-weight: 700; /* Bold text */
}

/* 9. Checkmark Overlay and Grayscale Image on Check */
.rsform-type-checkboxgroup.rsform-block-carpet .form-check-label::after {
  content: "✓"; /* Checkmark symbol */
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position to center */
  font-size: 48px; /* Make the checkmark larger */
  color: #28a745; /* Green checkmark */
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
  border-radius: 50%; /* Circular background */
  width: 60px;
  height: 60px;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2; /* Ensure it appears above the image */
}

.rsform-type-checkboxgroup.rsform-block-carpet input[type="checkbox"]:checked + .form-check-label::after {
  display: flex; /* Show the checkmark when checked */
}

.rsform-type-checkboxgroup.rsform-block-carpet input[type="checkbox"]:checked + .form-check-label::before {
  filter: grayscale(100%); /* Grayscale image when checked */
}

/* =========================================
   Styles for Annexes Checkbox Group
========================================= */

/* 1. Scoped Styling for Annexes Group */
.rsform-type-checkboxgroup.rsform-block-annexes-1 .formControls {
  display: grid !important; /* Ensure grid layout takes precedence */
  gap: 15px; /* Space between “cards” */
}

/* 2. Responsive Grid Layout for Annexes */
@media (min-width: 1200px) {
  .rsform-type-checkboxgroup.rsform-block-annexes-1 .formControls {
	grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .rsform-type-checkboxgroup.rsform-block-annexes-1 .formControls {
	grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .rsform-type-checkboxgroup.rsform-block-annexes-1 .formControls {
	grid-template-columns: 1fr !important;
  }

  /* Adjust padding and font size on mobile */
  .rsform-type-checkboxgroup.rsform-block-annexes-1 .form-check-label {
	padding: 15px;
	font-size: 16px;
  }
}

/* 3. Hide Native Checkboxes in Annexes */
.rsform-type-checkboxgroup.rsform-block-annexes-1 input[type="checkbox"].rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 4. Card-like Style for Each Label in Annexes */
.rsform-type-checkboxgroup.rsform-block-annexes-1 .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif; /* Consistent font */
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Add an Image Inside the Label Using ::before for Annexes */
.rsform-type-checkboxgroup.rsform-block-annexes-1 .form-check-label::before {
  content: "";
  display: block;
  width: 300px; /* Consistent width */
  height: 300px; /* Consistent height */
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  transition: filter 0.3s;
}

/* 6. Assign Specific Images to Each Annexes Option */
#Annexes_10 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/band-bar-annex-6x3.jpg'); /* Band Annex */
}

#Annexes_11 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/band-bar-annex-6x3.jpg'); /* Bar Annex */
}

/* Add more image assignments if there are more Annexes options */

/* 7. Hover Effects for Annexes */
.rsform-type-checkboxgroup.rsform-block-annexes-1 .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac; /* Consistent color with other sections */
}

/* 8. Selected (Checked) State Styles for Annexes */
.rsform-type-checkboxgroup.rsform-block-annexes-1 input[type="checkbox"]:checked + .form-check-label {
  border: 2px solid #4943ac; /* Purple border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac; /* Consistent color */
  font-weight: 700; /* Bold text */
}

/* 9. Checkmark Overlay and Grayscale Image on Check for Annexes */
.rsform-type-checkboxgroup.rsform-block-annexes-1 .form-check-label::after {
  content: "✓"; /* Checkmark symbol */
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position to center */
  font-size: 48px; /* Make the checkmark larger */
  color: #28a745; /* Green checkmark */
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
  border-radius: 50%; /* Circular background */
  width: 60px;
  height: 60px;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2; /* Ensure it appears above the image */
}

.rsform-type-checkboxgroup.rsform-block-annexes-1 input[type="checkbox"]:checked + .form-check-label::after {
  display: flex; /* Show the checkmark when checked */
}

.rsform-type-checkboxgroup.rsform-block-annexes-1 input[type="checkbox"]:checked + .form-check-label::before {
  filter: grayscale(100%); /* Grayscale image when checked */
}

/* =========================================
   Styles for Catering Annex Checkbox Group
========================================= */

/* 1. Scoped Styling for Catering Annex Group */
.rsform-type-checkboxgroup.rsform-block-catering-annex .formControls {
  display: grid !important; /* Ensure grid layout takes precedence */
  gap: 15px; /* Space between “cards” */
}

/* 2. Responsive Grid Layout for Catering Annex */
@media (min-width: 1200px) {
  .rsform-type-checkboxgroup.rsform-block-catering-annex .formControls {
	grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .rsform-type-checkboxgroup.rsform-block-catering-annex .formControls {
	grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .rsform-type-checkboxgroup.rsform-block-catering-annex .formControls {
	grid-template-columns: 1fr !important;
  }

  /* Adjust padding and font size on mobile */
  .rsform-type-checkboxgroup.rsform-block-catering-annex .form-check-label {
	padding: 15px;
	font-size: 16px;
  }
}

/* 3. Hide Native Checkboxes in Catering Annex */
.rsform-type-checkboxgroup.rsform-block-catering-annex input[type="checkbox"].rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 4. Card-like Style for Each Label in Catering Annex */
.rsform-type-checkboxgroup.rsform-block-catering-annex .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif; /* Consistent font */
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Add an Image Inside the Label Using ::before for Catering Annex */
.rsform-type-checkboxgroup.rsform-block-catering-annex .form-check-label::before {
  content: "";
  display: block;
  width: 300px; /* Consistent width */
  height: 300px; /* Consistent height */
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  transition: filter 0.3s;
}

/* 6. Assign Specific Images to Each Catering Annex Option */
#Catering_Annex0 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/catering-annex.jpg'); /* Replace with actual URL */
}

#Catering_Annex1 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/catering-annex.jpg'); /* Replace with actual URL */
}

#Catering_Annex2 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/catering-annex.jpg'); /* Replace with actual URL */
}

#Catering_Annex3 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/catering-annex.jpg'); /* Replace with actual URL */
}

/* Add more image assignments if there are more Catering Annex options */

/* 7. Hover Effects for Catering Annex */
.rsform-type-checkboxgroup.rsform-block-catering-annex .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac; /* Consistent color with other sections */
}

/* 8. Selected (Checked) State Styles for Catering Annex */
.rsform-type-checkboxgroup.rsform-block-catering-annex input[type="checkbox"]:checked + .form-check-label {
  border: 2px solid #4943ac; /* Purple border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac; /* Consistent color */
  font-weight: 700; /* Bold text */
}

/* 9. Checkmark Overlay and Grayscale Image on Check for Catering Annex */
.rsform-type-checkboxgroup.rsform-block-catering-annex .form-check-label::after {
  content: "✓"; /* Checkmark symbol */
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position to center */
  font-size: 48px; /* Make the checkmark larger */
  color: #28a745; /* Green checkmark */
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
  border-radius: 50%; /* Circular background */
  width: 60px;
  height: 60px;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2; /* Ensure it appears above the image */
}

.rsform-type-checkboxgroup.rsform-block-catering-annex input[type="checkbox"]:checked + .form-check-label::after {
  display: flex; /* Show the checkmark when checked */
}

.rsform-type-checkboxgroup.rsform-block-catering-annex input[type="checkbox"]:checked + .form-check-label::before {
  filter: grayscale(100%); /* Grayscale image when checked */
}

/* =========================================
   Styles for Entrance Porch Checkbox Group
========================================= */

/* 1. Scoped Styling for Entrance Porch Group */
.rsform-type-checkboxgroup.rsform-block-entrance-porch .formControls {
  display: grid !important; /* Ensure grid layout takes precedence */
  gap: 15px; /* Space between “cards” */
}

/* 2. Responsive Grid Layout for Entrance Porch */
@media (min-width: 1200px) {
  .rsform-type-checkboxgroup.rsform-block-entrance-porch .formControls {
	grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .rsform-type-checkboxgroup.rsform-block-entrance-porch .formControls {
	grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .rsform-type-checkboxgroup.rsform-block-entrance-porch .formControls {
	grid-template-columns: 1fr !important;
  }

  /* Adjust padding and font size on mobile */
  .rsform-type-checkboxgroup.rsform-block-entrance-porch .form-check-label {
	padding: 15px;
	font-size: 16px;
  }
}

/* 3. Hide Native Checkboxes in Entrance Porch */
.rsform-type-checkboxgroup.rsform-block-entrance-porch input[type="checkbox"].rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 4. Card-like Style for Each Label in Entrance Porch */
.rsform-type-checkboxgroup.rsform-block-entrance-porch .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif; /* Consistent font */
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Add an Image Inside the Label Using ::before for Entrance Porch */
.rsform-type-checkboxgroup.rsform-block-entrance-porch .form-check-label::before {
  content: "";
  display: block;
  width: 300px; /* Consistent width */
  height: 300px; /* Consistent height */
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  transition: filter 0.3s;
}

/* 6. Assign Specific Images to Each Entrance Porch Option */
#Entrance_Porch0 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/5mx5m_Pagoda_open_sided.jpg'); /* 5Mx5M Pagoda */
}

#Entrance_Porch1 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/3mx3m-Pagoda_2.jpg'); /* Entrance Porch - 3Mx3M Chinese Hat Roof */
}

#Entrance_Porch2 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/marquee-entrance-porch.jpg'); /* Entrance Porch - 3Mx3M Standard Pitched Roof */
}

#Entrance_Porch3 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/6mx6m-Pagoda.jpg'); /* Entrance Porch - 6Mx6M Chinese Hat Roof */
}

#Entrance_Porch4 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/marquee-entrance-porch.jpg'); /* Entrance Porch - 6Mx6M Standard Pitched Roof */
}

/* 7. Hover Effects for Entrance Porch */
.rsform-type-checkboxgroup.rsform-block-entrance-porch .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac; /* Consistent color with other sections */
}

/* 8. Selected (Checked) State Styles for Entrance Porch */
.rsform-type-checkboxgroup.rsform-block-entrance-porch input[type="checkbox"]:checked + .form-check-label {
  border: 2px solid #4943ac; /* Purple border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac; /* Consistent color */
  font-weight: 700; /* Bold text */
}

/* 9. Checkmark Overlay and Grayscale Image on Check for Entrance Porch */
.rsform-type-checkboxgroup.rsform-block-entrance-porch .form-check-label::after {
  content: "✓"; /* Checkmark symbol */
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position to center */
  font-size: 48px; /* Make the checkmark larger */
  color: #28a745; /* Green checkmark */
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
  border-radius: 50%; /* Circular background */
  width: 60px;
  height: 60px;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2; /* Ensure it appears above the image */
}

.rsform-type-checkboxgroup.rsform-block-entrance-porch input[type="checkbox"]:checked + .form-check-label::after {
  display: flex; /* Show the checkmark when checked */
}

.rsform-type-checkboxgroup.rsform-block-entrance-porch input[type="checkbox"]:checked + .form-check-label::before {
  filter: grayscale(100%); /* Grayscale image when checked */
}


/* =========================================
   Styles for Entrance Porch 2 Checkbox Group
========================================= */

/* 1. Scoped Styling for Entrance Porch 2 Group */
.rsform-type-checkboxgroup.rsform-block-entrance-porch-2 .formControls {
  display: grid !important; /* Ensure grid layout takes precedence */
  gap: 15px; /* Space between “cards” */
}

/* 2. Responsive Grid Layout for Entrance Porch 2 */
@media (min-width: 1200px) {
  .rsform-type-checkboxgroup.rsform-block-entrance-porch-2 .formControls {
	grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .rsform-type-checkboxgroup.rsform-block-entrance-porch-2 .formControls {
	grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .rsform-type-checkboxgroup.rsform-block-entrance-porch-2 .formControls {
	grid-template-columns: 1fr !important;
  }

  /* Adjust padding and font size on mobile */
  .rsform-type-checkboxgroup.rsform-block-entrance-porch-2 .form-check-label {
	padding: 15px;
	font-size: 16px;
  }
}

/* 3. Hide Native Checkboxes in Entrance Porch 2 */
.rsform-type-checkboxgroup.rsform-block-entrance-porch-2 input[type="checkbox"].rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 4. Card-like Style for Each Label in Entrance Porch 2 */
.rsform-type-checkboxgroup.rsform-block-entrance-porch-2 .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Add an Image Inside the Label Using ::before for Entrance Porch 2 */
.rsform-type-checkboxgroup.rsform-block-entrance-porch-2 .form-check-label::before {
  content: "";
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  transition: filter 0.3s;
}

/* 6. Assign Specific Images to Each Entrance Porch 2 Option */
#Entrance_Porch_20 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/3mx3m-Pagoda_2.jpg'); /* Entrance Porch - 3Mx3M Chinese Hat Roof */
}

#Entrance_Porch_21 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/marquee-entrance-porch.jpg'); /* Entrance Porch - 3Mx3M Standard Pitched Roof */
}

/* 7. Hover Effects for Entrance Porch 2 */
.rsform-type-checkboxgroup.rsform-block-entrance-porch-2 .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac; /* Consistent color with other sections */
}

/* 8. Selected (Checked) State Styles for Entrance Porch 2 */
.rsform-type-checkboxgroup.rsform-block-entrance-porch-2 input[type="checkbox"]:checked + .form-check-label {
  border: 2px solid #4943ac; /* Purple border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac; /* Consistent color */
  font-weight: 700; /* Bold text */
}

/* 9. Checkmark Overlay and Grayscale Image on Check for Entrance Porch 2 */
.rsform-type-checkboxgroup.rsform-block-entrance-porch-2 .form-check-label::after {
  content: "✓"; /* Checkmark symbol */
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position to center */
  font-size: 48px; /* Make the checkmark larger */
  color: #28a745; /* Green checkmark */
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
  border-radius: 50%; /* Circular background */
  width: 60px;
  height: 60px;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2; /* Ensure it appears above the image */
}

.rsform-type-checkboxgroup.rsform-block-entrance-porch-2 input[type="checkbox"]:checked + .form-check-label::after {
  display: flex; /* Show the checkmark when checked */
}

.rsform-type-checkboxgroup.rsform-block-entrance-porch-2 input[type="checkbox"]:checked + .form-check-label::before {
  filter: grayscale(100%); /* Grayscale image when checked */
}


/* Style the label to look like a title */
.form-label.formControlLabel {
  display: block; /* Ensure the label takes up the full width */
  font-size: 1.0rem; /* Increase font size for prominence */
  font-weight: 600; /* Semi-bold for better readability */
  color: #333; /* Darker color for better contrast */
  margin-bottom: 0.5rem; /* Space below the label */
  position: relative; /* For positioning the tooltip if needed */
  cursor: pointer; /* Indicate that the label is interactive (for tooltip) */
}

/* Style the required asterisk */
.form-label.formControlLabel .formRequired {
  color: #e74c3c; /* Red color to indicate required field */
  margin-left: 0.25rem; /* Small space before the asterisk */
  font-size: 1.2rem; /* Slightly larger than the text */
}


/* 1. Scope the underline to specific section labels */
.rsform-block-marquee-type .form-label.formControlLabel::after,
.rsform-block-lighting-options .form-label.formControlLabel::after,
.rsform-block-lighting-options-2 .form-label.formControlLabel::after,
.rsform-block-hard-flooring-type .form-label.formControlLabel::after,
.rsform-block-hard-flooring-type-1 .form-label.formControlLabel::after,
.rsform-block-hard-flooring-type-2 .form-label.formControlLabel::after,
.rsform-block-hard-flooring-type-3 .form-label.formControlLabel::after,
.rsform-block-hard-flooring-type-4 .form-label.formControlLabel::after,
.rsform-block-hard-flooring-type-5 .form-label.formControlLabel::after,
.rsform-block-hard-flooring-type-6 .form-label.formControlLabel::after,
.rsform-block-marquee-lining .form-label.formControlLabel::after,
.rsform-block-matting .form-label.formControlLabel::after,
.rsform-block-carpet .form-label.formControlLabel::after,
.rsform-block-annexes-1 .form-label.formControlLabel::after,
.rsform-block-catering-annex .form-label.formControlLabel::after,
.rsform-block-power-supplies .form-label.formControlLabel::after,
.rsform-block-entrance-porch .form-label.formControlLabel::after,
.rsform-block-formal-and-occasional-seating .form-label.formControlLabel::after,
.rsform-block-event-tables .form-label.formControlLabel::after,
.rsform-block-bar-area .form-label.formControlLabel::after,
.rsform-block-heating-and-cooling .form-label.formControlLabel::after,
.rsform-block-dance-floors .form-label.formControlLabel::after,
.rsform-block-misc .form-label.formControlLabel::after,
.rsform-block-name .form-label.formControlLabel::after,
.rsform-block-email .form-label.formControlLabel::after,
.rsform-block-street .form-label.formControlLabel::after,
.rsform-block-city .form-label.formControlLabel::after,
.rsform-block-county .form-label.formControlLabel::after,
.rsform-block-postcode .form-label.formControlLabel::after,
.rsform-block-phone .form-label.formControlLabel::after,
.rsform-block-mobile .form-label.formControlLabel::after,
.rsform-block-event-date .form-label.formControlLabel::after,
.rsform-block-additional-information .form-label.formControlLabel::after,
.rsform-block-venue-address .form-label.formControlLabel::after,
.rsform-block-venue-name .form-label.formControlLabel::after,
.rsform-block-venue-street .form-label.formControlLabel::after,
.rsform-block-venue-county .form-label.formControlLabel::after,
.rsform-block-venue-city .form-label.formControlLabel::after,
.rsform-block-venue-postcode .form-label.formControlLabel::after,
.rsform-block-capacity-seated .form-label.formControlLabel::after,
.rsform-block-capacity-standing .form-label.formControlLabel::after
 {
	content: "";
	display: block;
	width: 50px;
	height: 3px;
	background-color: #3498db;
	margin-top: 0.5rem;
	border-radius: 2px;
}


/* Tooltip styling (if using Bootstrap tooltip) */
.form-label.formControlLabel[data-bs-toggle="tooltip"] {
  position: relative;
}

.form-label.formControlLabel[data-bs-toggle="tooltip"]::after {
  content: " "; /* You can customize the tooltip content via JavaScript or Bootstrap */
  /* Additional tooltip styles can be added here if not using Bootstrap's default */
}




/* 1. Hide the default checkbox */
.rsform-block-venue-address .rsform-checkbox.form-check-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

/* 2. Style the label to look like a button */
.rsform-block-venue-address .form-check-inline .form-check-label {
	display: inline-block;
	padding: 0.5rem 1rem;
	font-size: 1rem;
	font-weight: 500;
	color: #ffffff;
	background-color: #6c757d; /* Default button color (gray) */
	border: 2px solid #6c757d;
	border-radius: 0.25rem;
	cursor: pointer;
	transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
	user-select: none; /* Prevent text selection on double-click */
	position: relative; /* To handle any pseudo-elements if needed */
}

/* 3. Change appearance on hover */
.rsform-block-venue-address .form-check-inline .form-check-label:hover {
	background-color: #5a6268;
	border-color: #545b62;
}

/* 4. Style when the checkbox is checked */
.rsform-block-venue-address .rsform-checkbox.form-check-input:checked + .form-check-label {
	background-color: #007bff; /* Active button color (blue) */
	border-color: #007bff;
}

/* 5. Change appearance when checked and hovered */
.rsform-block-venue-address .rsform-checkbox.form-check-input:checked + .form-check-label:hover {
	background-color: #0056b3;
	border-color: #004085;
}

/* 6. Add focus state for accessibility */
.rsform-block-venue-address .rsform-checkbox.form-check-input:focus + .form-check-label {
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}




/* =========================================
   Styles for Formal and Occasional Seating Checkbox Group
========================================= */

/* 1. Scoped Styling for Formal and Occasional Seating Group */
.rsform-type-checkboxgroup.rsform-block-formal-and-occasional-seating .formControls {
  display: grid !important; /* Ensure grid layout takes precedence */
  gap: 15px; /* Space between “cards” */
}

/* 2. Responsive Grid Layout for Formal and Occasional Seating */
@media (min-width: 1200px) {
  .rsform-type-checkboxgroup.rsform-block-formal-and-occasional-seating .formControls {
	grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .rsform-type-checkboxgroup.rsform-block-formal-and-occasional-seating .formControls {
	grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .rsform-type-checkboxgroup.rsform-block-formal-and-occasional-seating .formControls {
	grid-template-columns: 1fr !important;
  }

  /* Adjust padding and font size on mobile */
  .rsform-type-checkboxgroup.rsform-block-formal-and-occasional-seating .form-check-label {
	padding: 15px;
	font-size: 16px;
  }
}

/* 3. Hide Native Checkboxes in Formal and Occasional Seating */
.rsform-type-checkboxgroup.rsform-block-formal-and-occasional-seating input[type="checkbox"].rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 4. Card-like Style for Each Label in Formal and Occasional Seating */
.rsform-type-checkboxgroup.rsform-block-formal-and-occasional-seating .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif; /* Consistent font */
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Add an Image Inside the Label Using ::before for Formal and Occasional Seating */
.rsform-type-checkboxgroup.rsform-block-formal-and-occasional-seating .form-check-label::before {
  content: "";
  display: block;
  width: 300px; /* Consistent width */
  height: 300px; /* Consistent height */
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  transition: filter 0.3s;
}

/* 6. Assign Specific Images to Each Formal and Occasional Seating Option */
#Formal_and_Occasional_Seating0 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/limewash-chiavari-chair.jpg'); /* Limewashed Chiavari Chair */
}

#Formal_and_Occasional_Seating1 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Cross_back_chair_rattan_pad.jpg'); /* Antique Wash Cross-back Chair */
}

#Formal_and_Occasional_Seating2 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/rustic_folding_chair.jpg'); /* Rustic Wooden Folding Chair */
}

#Formal_and_Occasional_Seating3 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Black_samsonite_chair.jpg'); /* Samsonite Folding Chair - Black */
}

#Formal_and_Occasional_Seating4 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/varnished_highchair.jpg'); /* Varnished Highchair */
}

#Formal_and_Occasional_Seating5 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/stripey-deck-chair.jpg'); /* Stripey Deck Chair */
}

#Formal_and_Occasional_Seating6 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/black-sofa-cover.jpg'); /* Black Sofa - 2 Seater */
}

#Formal_and_Occasional_Seating7 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/sofa-2-seater5.jpg'); /* White Sofa - 2 Seater */
}

/* 7. Hover Effects for Formal and Occasional Seating */
.rsform-type-checkboxgroup.rsform-block-formal-and-occasional-seating .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac; /* Consistent color with other sections */
}

/* 8. Selected (Checked) State Styles for Formal and Occasional Seating */
.rsform-type-checkboxgroup.rsform-block-formal-and-occasional-seating input[type="checkbox"]:checked + .form-check-label {
  border: 2px solid #4943ac; /* Purple border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac; /* Consistent color */
  font-weight: 700; /* Bold text */
}

/* 9. Checkmark Overlay and Grayscale Image on Check for Formal and Occasional Seating */
.rsform-type-checkboxgroup.rsform-block-formal-and-occasional-seating .form-check-label::after {
  content: "✓"; /* Checkmark symbol */
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position to center */
  font-size: 48px; /* Make the checkmark larger */
  color: #28a745; /* Green checkmark */
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
  border-radius: 50%; /* Circular background */
  width: 60px;
  height: 60px;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2; /* Ensure it appears above the image */
}

.rsform-type-checkboxgroup.rsform-block-formal-and-occasional-seating input[type="checkbox"]:checked + .form-check-label::after {
  display: flex; /* Show the checkmark when checked */
}

.rsform-type-checkboxgroup.rsform-block-formal-and-occasional-seating input[type="checkbox"]:checked + .form-check-label::before {
  filter: grayscale(100%); /* Grayscale image when checked */
}

/* =========================================
   Styles for Event Tables Checkbox Group
========================================= */

/* 1. Scoped Styling for Event Tables Group */
.rsform-type-checkboxgroup.rsform-block-event-tables .formControls {
  display: grid !important; /* Ensure grid layout takes precedence */
  gap: 15px; /* Space between “cards” */
}

/* 2. Responsive Grid Layout for Event Tables */
@media (min-width: 1200px) {
  .rsform-type-checkboxgroup.rsform-block-event-tables .formControls {
	grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .rsform-type-checkboxgroup.rsform-block-event-tables .formControls {
	grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .rsform-type-checkboxgroup.rsform-block-event-tables .formControls {
	grid-template-columns: 1fr !important;
  }

  /* Adjust padding and font size on mobile */
  .rsform-type-checkboxgroup.rsform-block-event-tables .form-check-label {
	padding: 15px;
	font-size: 16px;
  }
}

/* 3. Hide Native Checkboxes in Event Tables */
.rsform-type-checkboxgroup.rsform-block-event-tables input[type="checkbox"].rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 4. Card-like Style for Each Label in Event Tables */
.rsform-type-checkboxgroup.rsform-block-event-tables .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif; /* Consistent font */
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Add an Image Inside the Label Using ::before for Event Tables */
.rsform-type-checkboxgroup.rsform-block-event-tables .form-check-label::before {
  content: "";
  display: block;
  width: 300px; /* Consistent width */
  height: 300px; /* Consistent height */
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  transition: filter 0.3s;
}

/* 6. Assign Specific Images to Each Event Tables Option */
#Event_Tables0 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/3ft-circular-banqueting-table.jpg'); /* 3' Circular Banqueting Table */
}

#Event_Tables1 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/5ft-d-shaped-table.jpg'); /* 5' 'd' Shaped Table */
}

#Event_Tables2 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/5ft-circular-banqueting-table.jpg'); /* 5' Circular Banqueting Table */
}

#Event_Tables3 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/5ft6in-circular-banqueting-table.jpg'); /* 5'6" Circular Banqueting Table */
}

#Event_Tables4 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/6ft-circular-banqueting-table.jpg'); /* 6' Circular Banqueting Table */
}

#Event_Tables5 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/6ftx2ft6in-trestle-table.jpg'); /* 6'x2'6 Trestle Table */
}

#Event_Tables6 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/rustic_farmhouse_table.jpg'); /* 6'x3' Rustic Trestle Table */
}

#Event_Tables7 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Poseur-Table.jpg'); /* Chrome Poseur Table */
}

#Event_Tables8 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/coffee-table-black.jpg'); /* Coffee Table - Black */
}

#Event_Tables9 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/coffee-table-white.jpg'); /* Coffee Table - White */
}

#Event_Tables10 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/vintage_varnished_oak_barrel.jpg'); /* Vintage Varnished Oak Barrel */
}

/* 7. Hover Effects for Event Tables */
.rsform-type-checkboxgroup.rsform-block-event-tables .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac; /* Consistent color with other sections */
}

/* 8. Selected (Checked) State Styles for Event Tables */
.rsform-type-checkboxgroup.rsform-block-event-tables input[type="checkbox"]:checked + .form-check-label {
  border: 2px solid #4943ac; /* Purple border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac; /* Consistent color */
  font-weight: 700; /* Bold text */
}

/* 9. Checkmark Overlay and Grayscale Image on Check for Event Tables */
.rsform-type-checkboxgroup.rsform-block-event-tables .form-check-label::after {
  content: "✓"; /* Checkmark symbol */
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position to center */
  font-size: 48px; /* Make the checkmark larger */
  color: #28a745; /* Green checkmark */
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
  border-radius: 50%; /* Circular background */
  width: 60px;
  height: 60px;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2; /* Ensure it appears above the image */
}

.rsform-type-checkboxgroup.rsform-block-event-tables input[type="checkbox"]:checked + .form-check-label::after {
  display: flex; /* Show the checkmark when checked */
}

.rsform-type-checkboxgroup.rsform-block-event-tables input[type="checkbox"]:checked + .form-check-label::before {
  filter: grayscale(100%); /* Grayscale image when checked */
}

/* =========================================
   Styles for Bar Area Checkbox Group
========================================= */

/* 1. Scoped Styling for Bar Area Group */
.rsform-type-checkboxgroup.rsform-block-bar-area .formControls {
  display: grid !important; /* Ensure grid layout takes precedence */
  gap: 15px; /* Space between “cards” */
}

/* 2. Responsive Grid Layout for Bar Area */
@media (min-width: 1200px) {
  .rsform-type-checkboxgroup.rsform-block-bar-area .formControls {
	grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .rsform-type-checkboxgroup.rsform-block-bar-area .formControls {
	grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .rsform-type-checkboxgroup.rsform-block-bar-area .formControls {
	grid-template-columns: 1fr !important;
  }

  /* Adjust padding and font size on mobile */
  .rsform-type-checkboxgroup.rsform-block-bar-area .form-check-label {
	padding: 15px;
	font-size: 16px;
  }
}

/* 3. Hide Native Checkboxes in Bar Area */
.rsform-type-checkboxgroup.rsform-block-bar-area input[type="checkbox"].rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 4. Card-like Style for Each Label in Bar Area */
.rsform-type-checkboxgroup.rsform-block-bar-area .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif; /* Consistent font */
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Add an Image Inside the Label Using ::before for Bar Area */
.rsform-type-checkboxgroup.rsform-block-bar-area .form-check-label::before {
  content: "";
  display: block;
  width: 300px; /* Consistent width */
  height: 300px; /* Consistent height */
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  transition: filter 0.3s;
}

/* 6. Assign Specific Images to Each Bar Area Option */
#Bar_Area0 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/rustic_full_round_bar_clear_roof_marquee.jpg'); /* Large Round Rustic Bar Unit */
}

#Bar_Area1 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/holding%20image.jpg'); /* Basic Bar Unit */
}

/* 7. Hover Effects for Bar Area */
.rsform-type-checkboxgroup.rsform-block-bar-area .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac; /* Consistent color with other sections */
}

/* 8. Selected (Checked) State Styles for Bar Area */
.rsform-type-checkboxgroup.rsform-block-bar-area input[type="checkbox"]:checked + .form-check-label {
  border: 2px solid #4943ac; /* Purple border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac; /* Consistent color */
  font-weight: 700; /* Bold text */
}

/* 9. Checkmark Overlay and Grayscale Image on Check for Bar Area */
.rsform-type-checkboxgroup.rsform-block-bar-area .form-check-label::after {
  content: "✓"; /* Checkmark symbol */
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position to center */
  font-size: 48px; /* Make the checkmark larger */
  color: #28a745; /* Green checkmark */
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
  border-radius: 50%; /* Circular background */
  width: 60px;
  height: 60px;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2; /* Ensure it appears above the image */
}

.rsform-type-checkboxgroup.rsform-block-bar-area input[type="checkbox"]:checked + .form-check-label::after {
  display: flex; /* Show the checkmark when checked */
}

.rsform-type-checkboxgroup.rsform-block-bar-area input[type="checkbox"]:checked + .form-check-label::before {
  filter: grayscale(100%); /* Grayscale image when checked */
}



/* =========================================
   Styles for Power Supplies Checkbox Group
========================================= */

/* 1. Scoped Styling for Power Supplies Group */
.rsform-type-checkboxgroup.rsform-block-power-supplies .formControls {
  display: grid !important; /* Ensure grid layout takes precedence */
  gap: 15px; /* Space between “cards” */
}

/* 2. Responsive Grid Layout for Power Supplies */
@media (min-width: 1200px) {
  .rsform-type-checkboxgroup.rsform-block-power-supplies .formControls {
	grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .rsform-type-checkboxgroup.rsform-block-power-supplies .formControls {
	grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .rsform-type-checkboxgroup.rsform-block-power-supplies .formControls {
	grid-template-columns: 1fr !important;
  }

  /* Adjust padding and font size on mobile */
  .rsform-type-checkboxgroup.rsform-block-power-supplies .form-check-label {
	padding: 15px;
	font-size: 16px;
  }
}

/* 3. Hide Native Checkboxes in Power Supplies */
.rsform-type-checkboxgroup.rsform-block-power-supplies input[type="checkbox"].rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 4. Card-like Style for Each Label in Power Supplies */
.rsform-type-checkboxgroup.rsform-block-power-supplies .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif; /* Consistent font */
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Add an Image Inside the Label Using ::before for Power Supplies */
.rsform-type-checkboxgroup.rsform-block-power-supplies .form-check-label::before {
  content: "";
  display: block;
  width: 300px; /* Consistent width */
  height: 300px; /* Consistent height */
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  transition: filter 0.3s;
}

/* 6. Assign Specific Images to Each Power Supplies Option */
#Power_Supplies0 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/100kva-generator.jpg'); /* 20KVA Generator */
}

#Power_Supplies1 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/100kva-generator.jpg'); /* 60KVA Generator */
}

#Power_Supplies2 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/100kva-generator.jpg'); /* 100KVA Generator */
}

#Power_Supplies3 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/105_Litre_Easy_Cube.jpg'); /* 105L Fuel Tank */
}

#Power_Supplies4 + .form-check-label::before {
  background-image: url('/images/Fuel_tank.jpg'); /* 700L Fuel Tank */
}

#Power_Supplies5 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/distribution-package-small-event.jpg'); /* Distribution Package - Small Event */
}

#Power_Supplies6 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/distribution-package-medium-event.jpg'); /* Distribution Package - Medium Event */
}

#Power_Supplies7 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/distribution-package-large-event.jpg'); /* Distribution Package - Large Event */
}

/* 7. Hover Effects for Power Supplies */
.rsform-type-checkboxgroup.rsform-block-power-supplies .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac; /* Consistent color with other sections */
}

/* 8. Selected (Checked) State Styles for Power Supplies */
.rsform-type-checkboxgroup.rsform-block-power-supplies input[type="checkbox"]:checked + .form-check-label {
  border: 2px solid #4943ac; /* Purple border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac; /* Consistent color */
  font-weight: 700; /* Bold text */
}

/* 9. Checkmark Overlay and Grayscale Image on Check for Power Supplies */
.rsform-type-checkboxgroup.rsform-block-power-supplies .form-check-label::after {
  content: "✓"; /* Checkmark symbol */
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position to center */
  font-size: 48px; /* Make the checkmark larger */
  color: #28a745; /* Green checkmark */
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
  border-radius: 50%; /* Circular background */
  width: 60px;
  height: 60px;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2; /* Ensure it appears above the image */
}

.rsform-type-checkboxgroup.rsform-block-power-supplies input[type="checkbox"]:checked + .form-check-label::after {
  display: flex; /* Show the checkmark when checked */
}

.rsform-type-checkboxgroup.rsform-block-power-supplies input[type="checkbox"]:checked + .form-check-label::before {
  filter: grayscale(100%); /* Grayscale image when checked */
}




/* =========================================
   Styles for Dance Floors Checkbox Group
========================================= */

/* 1. Scoped Styling for Dance Floors Group */
.rsform-type-checkboxgroup.rsform-block-dance-floors .formControls {
  display: grid !important; /* Ensure grid layout takes precedence */
  gap: 15px; /* Space between “cards” */
}

/* 2. Responsive Grid Layout for Dance Floors */
@media (min-width: 1200px) {
  .rsform-type-checkboxgroup.rsform-block-dance-floors .formControls {
	grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .rsform-type-checkboxgroup.rsform-block-dance-floors .formControls {
	grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .rsform-type-checkboxgroup.rsform-block-dance-floors .formControls {
	grid-template-columns: 1fr !important;
  }

  /* Adjust padding and font size on mobile */
  .rsform-type-checkboxgroup.rsform-block-dance-floors .form-check-label {
	padding: 15px;
	font-size: 16px;
  }
}

/* 3. Hide Native Checkboxes in Dance Floors */
.rsform-type-checkboxgroup.rsform-block-dance-floors input[type="checkbox"].rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 4. Card-like Style for Each Label in Dance Floors */
.rsform-type-checkboxgroup.rsform-block-dance-floors .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif; /* Consistent font */
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Add an Image Inside the Label Using ::before for Dance Floors */
.rsform-type-checkboxgroup.rsform-block-dance-floors .form-check-label::before {
  content: "";
  display: block;
  width: 300px; /* Consistent width */
  height: 300px; /* Consistent height */
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  transition: filter 0.3s;
}

/* 6. Assign Specific Images to Each Dance Floors Option */
#Dance_Floors0 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/black-and-white-dance-floor.jpg'); /* Black and White Dance Floor */
}

#Dance_Floors1 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/White_LED_Dancefloor.jpg'); /* White LED Dance Floor */
}

#Dance_Floors2 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/parquet_dancefloor.jpg'); /* Parquet Dance Floor */
}

#Dance_Floors3 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Stage.jpg'); /* Stage */
}

/* 7. Hover Effects for Dance Floors */
.rsform-type-checkboxgroup.rsform-block-dance-floors .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac; /* Consistent color with other sections */
}

/* 8. Selected (Checked) State Styles for Dance Floors */
.rsform-type-checkboxgroup.rsform-block-dance-floors input[type="checkbox"]:checked + .form-check-label {
  border: 2px solid #4943ac; /* Purple border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac; /* Consistent color */
  font-weight: 700; /* Bold text */
}

/* 9. Checkmark Overlay and Grayscale Image on Check for Dance Floors */
.rsform-type-checkboxgroup.rsform-block-dance-floors .form-check-label::after {
  content: "✓"; /* Checkmark symbol */
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position to center */
  font-size: 48px; /* Make the checkmark larger */
  color: #28a745; /* Green checkmark */
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
  border-radius: 50%; /* Circular background */
  width: 60px;
  height: 60px;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2; /* Ensure it appears above the image */
}

.rsform-type-checkboxgroup.rsform-block-dance-floors input[type="checkbox"]:checked + .form-check-label::after {
  display: flex; /* Show the checkmark when checked */
}

.rsform-type-checkboxgroup.rsform-block-dance-floors input[type="checkbox"]:checked + .form-check-label::before {
  filter: grayscale(100%); /* Grayscale image when checked */
}


/* Add Bottom Spacing to Carpet Sections */
.rsform-type-checkboxgroup.rsform-block-carpet {
  margin-bottom: 5rem !important; /* Consistent spacing */
}

/* Add Bottom Spacing to Annexes Sections */
.rsform-type-checkboxgroup.rsform-block-catering-annex {
  margin-bottom: 5rem !important; /* Consistent spacing */
}

/* Add Bottom Spacing to Furniture Sections */
.rsform-type-checkboxgroup.rsform-block-bar-area {
  margin-bottom: 5rem !important; /* Consistent spacing */
}

/* Add Bottom Spacing to Power Supplies Sections */
.rsform-type-checkboxgroup.rsform-block-power-supplies {
  margin-bottom: 5rem !important; /* Consistent spacing */
}

/* Add Bottom Spacing to Dance Floors Sections */
.rsform-type-checkboxgroup.rsform-block-dance-floors {
  margin-bottom: 5rem !important; /* Consistent spacing */
}



/* =========================================
   Styles for Heating and Cooling Checkbox Group
========================================= */
.mb-3.rsform-block.rsform-block-heating-and-cooling.rsform-type-checkboxgroup {
  margin-bottom: 5rem !important; /* Consistent spacing with other sections */
}

/* 1. Hide native checkboxes */
.mb-3.rsform-block.rsform-block-heating-and-cooling.rsform-type-checkboxgroup
  .rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 2. Layout checkboxes in a grid */
.mb-3.rsform-block.rsform-block-heating-and-cooling.rsform-type-checkboxgroup
  .formControls {
  display: grid;
  gap: 15px;
}

/* 3. Responsive grid layout */
/* Desktop: 3 columns */
@media (min-width: 1200px) {
  .mb-3.rsform-block.rsform-block-heating-and-cooling.rsform-type-checkboxgroup
	.formControls {
	grid-template-columns: repeat(3, 1fr);
  }
}
/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .mb-3.rsform-block.rsform-block-heating-and-cooling.rsform-type-checkboxgroup
	.formControls {
	grid-template-columns: repeat(2, 1fr);
  }
}
/* Mobile: 1 column */
@media (max-width: 767px) {
  .mb-3.rsform-block.rsform-block-heating-and-cooling.rsform-type-checkboxgroup
	.formControls {
	grid-template-columns: 1fr;
  }
}

/* 4. Card-like style for each checkbox label */
.mb-3.rsform-block.rsform-block-heating-and-cooling.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Image styling (pseudo-element) for each option */
.mb-3.rsform-block.rsform-block-heating-and-cooling.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label::before {
  content: "";
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: filter 0.3s;
}

/* 6. Assign specific images to each heating and cooling option */
/* 105L Fuel Tank */
#Heating_and_Cooling0 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/105_Litre_Easy_Cube.jpg');
}
/* 700L Fuel Tank */
#Heating_and_Cooling1 + .form-check-label::before {
  background-image: url('/images/Fuel_tank.jpg');
}
/* 3 Phase Electric Heater - 18KW */
#Heating_and_Cooling2 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/FF23_18Kw_Electric_Heater.jpg');
}
/* Chrome Floor Fan */
#Heating_and_Cooling3 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Chrome_floor_fan.jpg');
}
/* Indian Fire Bowl */
#Heating_and_Cooling4 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Fire-Bowl.jpg');
}
/* Small Indirect Marquee Heater - 29KW */
#Heating_and_Cooling5 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Small-marquee-heater-package.jpg');
}
/* Medium Indirect Marquee Heater - 51KW */
#Heating_and_Cooling6 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/medium-marquee-heater-package.jpg');
}
/* Large Indirect Marquee Heater - 81KW */
#Heating_and_Cooling7 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/medium-marquee-heater-package.jpg');
}

/* 7. Hover effects */
.mb-3.rsform-block.rsform-block-heating-and-cooling.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac;
}

/* 8. Checked state styling */
.mb-3.rsform-block.rsform-block-heating-and-cooling.rsform-type-checkboxgroup
  .rsform-checkbox:checked + .form-check-label {
  border: 2px solid #4943ac;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac;
  font-weight: 700;
}

/* 9. Checkmark overlay */
.mb-3.rsform-block.rsform-block-heating-and-cooling.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: #28a745;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.mb-3.rsform-block.rsform-block-heating-and-cooling.rsform-type-checkboxgroup
  .rsform-checkbox:checked + .form-check-label::after {
  display: flex;
}

/* 10. Grayscale image when checked */
.mb-3.rsform-block.rsform-block-heating-and-cooling.rsform-type-checkboxgroup
  .rsform-checkbox:checked + .form-check-label::before {
  filter: grayscale(100%);
}

/* =========================================
   Styles for Misc Checkbox Group
========================================= */
.mb-3.rsform-block.rsform-block-misc.rsform-type-checkboxgroup {
  margin-bottom: 5rem !important; /* Consistent spacing with other sections */
}

/* 1. Hide native checkboxes */
.mb-3.rsform-block.rsform-block-misc.rsform-type-checkboxgroup
  .rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 2. Layout checkboxes in a grid */
.mb-3.rsform-block.rsform-block-misc.rsform-type-checkboxgroup
  .formControls {
  display: grid;
  gap: 15px;
}

/* 3. Responsive grid layout */
/* Desktop: 3 columns */
@media (min-width: 1200px) {
  .mb-3.rsform-block.rsform-block-misc.rsform-type-checkboxgroup
	.formControls {
	grid-template-columns: repeat(3, 1fr);
  }
}
/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .mb-3.rsform-block.rsform-block-misc.rsform-type-checkboxgroup
	.formControls {
	grid-template-columns: repeat(2, 1fr);
  }
}
/* Mobile: 1 column */
@media (max-width: 767px) {
  .mb-3.rsform-block.rsform-block-misc.rsform-type-checkboxgroup
	.formControls {
	grid-template-columns: 1fr;
  }
}

/* 4. Card-like style for each checkbox label */
.mb-3.rsform-block.rsform-block-misc.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Image styling (pseudo-element) for each option */
.mb-3.rsform-block.rsform-block-misc.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label::before {
  content: "";
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: filter 0.3s;
}

/* 6. Assign specific images to each Misc option */
/* Outdoor Privacy Screen */
#Misc0 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/event_privacy_screen_hire.jpg');
}
/* Glazed Door */
#Misc1 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/glazed-doors.jpg');
}
/* Black Coat Rail With 30 Plastic Hangers */
#Misc2 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/black-coat-rail-with-30-plastic-hangers.jpg');
}

/* 7. Hover effects */
.mb-3.rsform-block.rsform-block-misc.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac;
}

/* 8. Checked state styling */
.mb-3.rsform-block.rsform-block-misc.rsform-type-checkboxgroup
  .rsform-checkbox:checked + .form-check-label {
  border: 2px solid #4943ac;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac;
  font-weight: 700;
}

/* 9. Checkmark overlay */
.mb-3.rsform-block.rsform-block-misc.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: #28a745;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.mb-3.rsform-block.rsform-block-misc.rsform-type-checkboxgroup
  .rsform-checkbox:checked + .form-check-label::after {
  display: flex;
}

/* 10. Grayscale image when checked */
.mb-3.rsform-block.rsform-block-misc.rsform-type-checkboxgroup
  .rsform-checkbox:checked + .form-check-label::before {
  filter: grayscale(100%);
}




/* =========================================
   Styles for Matting Checkbox Group
========================================= */
.mb-3.rsform-block.rsform-block-matting.rsform-type-checkboxgroup {
  margin-bottom: 5rem !important; /* Consistent spacing with other sections */
}

/* 1. Hide native checkboxes */
.mb-3.rsform-block.rsform-block-matting.rsform-type-checkboxgroup
  .rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 2. Layout checkboxes in a grid */
.mb-3.rsform-block.rsform-block-matting.rsform-type-checkboxgroup
  .formControls {
  display: grid;
  gap: 15px;
}

/* 3. Responsive grid layout */
/* Desktop: 3 columns */
@media (min-width: 1200px) {
  .mb-3.rsform-block.rsform-block-matting.rsform-type-checkboxgroup
	.formControls {
	grid-template-columns: repeat(3, 1fr);
  }
}
/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .mb-3.rsform-block.rsform-block-matting.rsform-type-checkboxgroup
	.formControls {
	grid-template-columns: repeat(2, 1fr);
  }
}
/* Mobile: 1 column */
@media (max-width: 767px) {
  .mb-3.rsform-block.rsform-block-matting.rsform-type-checkboxgroup
	.formControls {
	grid-template-columns: 1fr;
  }
}

/* 4. Card-like style for each checkbox label */
.mb-3.rsform-block.rsform-block-matting.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Image styling (pseudo-element) for each option */
.mb-3.rsform-block.rsform-block-matting.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label::before {
  content: "";
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: filter 0.3s;
}

/* 6. Assign specific image for Matting option */
/* Marquee Matting */
#Matting0 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Coir_matting.jpg');
}

/* 7. Hover effects */
.mb-3.rsform-block.rsform-block-matting.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac;
}

/* 8. Checked state styling */
.mb-3.rsform-block.rsform-block-matting.rsform-type-checkboxgroup
  .rsform-checkbox:checked + .form-check-label {
  border: 2px solid #4943ac;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac;
  font-weight: 700;
}

/* 9. Checkmark overlay */
.mb-3.rsform-block.rsform-block-matting.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: #28a745;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.mb-3.rsform-block.rsform-block-matting.rsform-type-checkboxgroup
  .rsform-checkbox:checked + .form-check-label::after {
  display: flex;
}

/* 10. Grayscale image when checked */
.mb-3.rsform-block.rsform-block-matting.rsform-type-checkboxgroup
  .rsform-checkbox:checked + .form-check-label::before {
  filter: grayscale(100%);
}



/* =========================================
   Styles for Lighting Options 2 Checkbox Group
========================================= */
.mb-3.rsform-block.rsform-block-lighting-options-2.rsform-type-checkboxgroup {
  margin-bottom: 5rem !important; /* Consistent spacing with other sections */
}

/* 1. Hide native checkboxes */
.mb-3.rsform-block.rsform-block-lighting-options-2.rsform-type-checkboxgroup
  .rsform-checkbox.form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 2. Layout checkboxes in a grid */
.mb-3.rsform-block.rsform-block-lighting-options-2.rsform-type-checkboxgroup
  .formControls {
  display: grid;
  gap: 15px;
}

/* 3. Responsive grid layout */
/* Desktop: 3 columns */
@media (min-width: 1200px) {
  .mb-3.rsform-block.rsform-block-lighting-options-2.rsform-type-checkboxgroup
	.formControls {
	grid-template-columns: repeat(3, 1fr);
  }
}
/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .mb-3.rsform-block.rsform-block-lighting-options-2.rsform-type-checkboxgroup
	.formControls {
	grid-template-columns: repeat(2, 1fr);
  }
}
/* Mobile: 1 column */
@media (max-width: 767px) {
  .mb-3.rsform-block.rsform-block-lighting-options-2.rsform-type-checkboxgroup
	.formControls {
	grid-template-columns: 1fr;
  }
}

/* 4. Card-like style for each checkbox label */
.mb-3.rsform-block.rsform-block-lighting-options-2.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label {
  display: block;
  padding: 20px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 5. Image styling (pseudo-element) for each option */
.mb-3.rsform-block.rsform-block-lighting-options-2.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label::before {
  content: "";
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: filter 0.3s;
}

/* 6. Assign specific images to each option */

/* -----------------------------------------
   Lighting Options 2 - Image Assignments
----------------------------------------- */

/* Disco ball with pin spot */
#Lighting_Options_20 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/disco-ball-with-pin-spot.jpg');
}

/* Exterior festoon lighting around marquee perimeter */
#Lighting_Options_21 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Exterior_Festoons_2.jpg');
}

/* Exterior festoon lighting fitted to shepherds' crooks (60' length) */
#Lighting_Options_22 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Festoons-and-fairy-lights.jpg');
}

/* Fairy lights throughout marquee ceiling (1.5M spacing) */
#Lighting_Options_23 + .form-check-label::before {
  background-image: url('/images/clear_roof_with_fairy_lights.jpg');
}

/* Fairy lights wrapped around venue tree */
#Lighting_Options_24 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/fairy-lights-wrapped-around-venue-tree.jpg');
}

/* Floodlight */
#Lighting_Options_25 + .form-check-label::before {
  background-image: url('/images/Flood_light.jpg');
}

/* Fluorescent tube strip lighting */
#Lighting_Options_26 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/fluorescent-tube-strip-lighting.jpg');
}

/* Interior festoon lighting */
#Lighting_Options_27 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/Petal_pole_40x100_interior.jpg');
}

/* White body uplighter unit */
#Lighting_Options_28 + .form-check-label::before {
  background-image: url('/images/virtuemart/product/white_body_uplighter.jpg');
}

/* 7. Hover effects */
.mb-3.rsform-block.rsform-block-lighting-options-2.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  color: #4943ac;
}

/* 8. Checked state styling */
.mb-3.rsform-block.rsform-block-lighting-options-2.rsform-type-checkboxgroup
  .rsform-checkbox:checked + .form-check-label {
  border: 2px solid #4943ac;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
  color: #4943ac;
  font-weight: 700;
}

/* 9. Checkmark overlay */
.mb-3.rsform-block.rsform-block-lighting-options-2.rsform-type-checkboxgroup
  .rsform-checkbox + .form-check-label::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: #28a745;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.mb-3.rsform-block.rsform-block-lighting-options-2.rsform-type-checkboxgroup
  .rsform-checkbox:checked + .form-check-label::after {
  display: flex;
}

/* 10. Grayscale image when checked */
.mb-3.rsform-block.rsform-block-lighting-options-2.rsform-type-checkboxgroup
  .rsform-checkbox:checked + .form-check-label::before {
  filter: grayscale(100%);
}


.mb-3.rsform-block.rsform-block-phone.rsform-type-textbox {
	display: none;
}

/* =========================================
   iPad portrait fix
   Only apply 2-column layout to card-based option sections
========================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  /* Card-style option groups only */
  .rsform-block-marquee-type .formControls,
  .rsform-block-lighting-options .formControls,
  .rsform-block-lighting-options-2 .formControls,
  .rsform-block-hard-flooring-type .formControls,
  .rsform-block-hard-flooring-type-1 .formControls,
  .rsform-block-hard-flooring-type-2 .formControls,
  .rsform-block-hard-flooring-type-3 .formControls,
  .rsform-block-hard-flooring-type-4 .formControls,
  .rsform-block-hard-flooring-type-5 .formControls,
  .rsform-block-hard-flooring-type-6 .formControls,
  .rsform-block-marquee-lining .formControls,
  .rsform-block-matting .formControls,
  .rsform-block-carpet .formControls,
  .rsform-block-annexes-1 .formControls,
  .rsform-block-catering-annex .formControls,
  .rsform-block-power-supplies .formControls,
  .rsform-block-entrance-porch .formControls,
  .rsform-block-entrance-porch-2 .formControls,
  .rsform-block-formal-and-occasional-seating .formControls,
  .rsform-block-event-tables .formControls,
  .rsform-block-bar-area .formControls,
  .rsform-block-heating-and-cooling .formControls,
  .rsform-block-dance-floors .formControls,
  .rsform-block-misc .formControls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 15px !important;
  }

  /* Make card wrappers fit the grid properly */
  .rsform-block-marquee-type .form-check,
  .rsform-block-lighting-options .form-check,
  .rsform-block-lighting-options-2 .form-check,
  .rsform-block-hard-flooring-type .form-check,
  .rsform-block-hard-flooring-type-1 .form-check,
  .rsform-block-hard-flooring-type-2 .form-check,
  .rsform-block-hard-flooring-type-3 .form-check,
  .rsform-block-hard-flooring-type-4 .form-check,
  .rsform-block-hard-flooring-type-5 .form-check,
  .rsform-block-hard-flooring-type-6 .form-check,
  .rsform-block-marquee-lining .form-check,
  .rsform-block-matting .form-check,
  .rsform-block-carpet .form-check,
  .rsform-block-annexes-1 .form-check,
  .rsform-block-catering-annex .form-check,
  .rsform-block-power-supplies .form-check,
  .rsform-block-entrance-porch .form-check,
  .rsform-block-entrance-porch-2 .form-check,
  .rsform-block-formal-and-occasional-seating .form-check,
  .rsform-block-event-tables .form-check,
  .rsform-block-bar-area .form-check,
  .rsform-block-heating-and-cooling .form-check,
  .rsform-block-dance-floors .form-check,
  .rsform-block-misc .form-check,
  .rsform-block-marquee-type .form-check-inline,
  .rsform-block-lighting-options .form-check-inline,
  .rsform-block-lighting-options-2 .form-check-inline,
  .rsform-block-hard-flooring-type .form-check-inline,
  .rsform-block-hard-flooring-type-1 .form-check-inline,
  .rsform-block-hard-flooring-type-2 .form-check-inline,
  .rsform-block-hard-flooring-type-3 .form-check-inline,
  .rsform-block-hard-flooring-type-4 .form-check-inline,
  .rsform-block-hard-flooring-type-5 .form-check-inline,
  .rsform-block-hard-flooring-type-6 .form-check-inline,
  .rsform-block-marquee-lining .form-check-inline,
  .rsform-block-matting .form-check-inline,
  .rsform-block-carpet .form-check-inline,
  .rsform-block-annexes-1 .form-check-inline,
  .rsform-block-catering-annex .form-check-inline,
  .rsform-block-power-supplies .form-check-inline,
  .rsform-block-entrance-porch .form-check-inline,
  .rsform-block-entrance-porch-2 .form-check-inline,
  .rsform-block-formal-and-occasional-seating .form-check-inline,
  .rsform-block-event-tables .form-check-inline,
  .rsform-block-bar-area .form-check-inline,
  .rsform-block-heating-and-cooling .form-check-inline,
  .rsform-block-dance-floors .form-check-inline,
  .rsform-block-misc .form-check-inline {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* Keep label/card width under control */
  .rsform-block-marquee-type .form-check-label,
  .rsform-block-lighting-options .form-check-label,
  .rsform-block-lighting-options-2 .form-check-label,
  .rsform-block-hard-flooring-type .form-check-label,
  .rsform-block-hard-flooring-type-1 .form-check-label,
  .rsform-block-hard-flooring-type-2 .form-check-label,
  .rsform-block-hard-flooring-type-3 .form-check-label,
  .rsform-block-hard-flooring-type-4 .form-check-label,
  .rsform-block-hard-flooring-type-5 .form-check-label,
  .rsform-block-hard-flooring-type-6 .form-check-label,
  .rsform-block-marquee-lining .form-check-label,
  .rsform-block-matting .form-check-label,
  .rsform-block-carpet .form-check-label,
  .rsform-block-annexes-1 .form-check-label,
  .rsform-block-catering-annex .form-check-label,
  .rsform-block-power-supplies .form-check-label,
  .rsform-block-entrance-porch .form-check-label,
  .rsform-block-entrance-porch-2 .form-check-label,
  .rsform-block-formal-and-occasional-seating .form-check-label,
  .rsform-block-event-tables .form-check-label,
  .rsform-block-bar-area .form-check-label,
  .rsform-block-heating-and-cooling .form-check-label,
  .rsform-block-dance-floors .form-check-label,
  .rsform-block-misc .form-check-label {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* Responsive image blocks inside the cards */
  .rsform-block-marquee-type .form-check-label::before,
  .rsform-block-lighting-options .form-check-label::before,
  .rsform-block-lighting-options-2 .form-check-label::before,
  .rsform-block-hard-flooring-type .form-check-label::before,
  .rsform-block-hard-flooring-type-1 .form-check-label::before,
  .rsform-block-hard-flooring-type-2 .form-check-label::before,
  .rsform-block-hard-flooring-type-3 .form-check-label::before,
  .rsform-block-hard-flooring-type-4 .form-check-label::before,
  .rsform-block-hard-flooring-type-5 .form-check-label::before,
  .rsform-block-hard-flooring-type-6 .form-check-label::before,
  .rsform-block-marquee-lining .form-check-label::before,
  .rsform-block-matting .form-check-label::before,
  .rsform-block-carpet .form-check-label::before,
  .rsform-block-annexes-1 .form-check-label::before,
  .rsform-block-catering-annex .form-check-label::before,
  .rsform-block-power-supplies .form-check-label::before,
  .rsform-block-entrance-porch .form-check-label::before,
  .rsform-block-entrance-porch-2 .form-check-label::before,
  .rsform-block-formal-and-occasional-seating .form-check-label::before,
  .rsform-block-event-tables .form-check-label::before,
  .rsform-block-bar-area .form-check-label::before,
  .rsform-block-heating-and-cooling .form-check-label::before,
  .rsform-block-dance-floors .form-check-label::before,
  .rsform-block-misc .form-check-label::before {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin: 0 auto 10px !important;
  }
}