body {
	background-color: #f0f2f5; /* Main canvas background color */
	font-family: 'Roboto', sans-serif; /* Body text font */
}
.content {
	flex: 1;
	overflow-y: auto;
}
.canvas {
	background-color: white;
	padding: 15px;
	margin: 15px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
	font-family: 'Lobster', cursive;
	text-align: center;
	margin-bottom: 15px;
}
label {
	font-family: 'Open Sans', sans-serif; /* Form control labels font */
	font-weight: 600;
	margin-top: 20px;
	display: block;   /* this is new -- why? */
}
label.required-label::after {
	content: '*';
	color: red;
	margin-left: 0.25rem;
	font-size: 1.2em;
	vertical-align: top;
}

button[type="submit"], button[type="button"] {
	width: 100%; /* Expand submit button to the form's width */
	font-size: 1.2em;
}

.form-group {
	margin-bottom: 15px;
}

.form-control:focus {
	border-color: #4CAF50;
	box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

.hidden {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.3s ease;
}

.visible {
	max-height: 500px; /* Adjust based on expected content size */
	opacity: 1;
	transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* Remove the red border and exclamation mark for invalid required fields */
.was-validated .form-control:invalid, 
.was-validated .form-select:invalid,
.form-control.is-invalid,
.form-select.is-invalid {
	border-color: initial !important;
	background-image: none !important;
	box-shadow: none !important;
}

/* Remove browser’s default up/down arrows while keeping Bootstrap’s arrow */
.form-select {
	appearance: none !important;
	-webkit-appearance: none !important;  /* Chrome, Safari */
	-moz-appearance: none !important;  /* Firefox */
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M1.5 5.5L8 12l6.5-6.5H1.5z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.75rem center !important;
	background-size: 16px 12px !important;
	padding-right: 2rem !important; /* Ensures space for arrow */
}

/* Ensure invalid selects don't lose their arrow */
.form-select.is-invalid {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M1.5 5.5L8 12l6.5-6.5H1.5z'/%3E%3C/svg%3E") !important;
}

.is-invalid .invalid-feedback {
	display: block;
}

.btn-success {
	background-color: #28a745;
	border: none;
	color: white;
	transition: background-color 0.2s ease;
}

.btn-success:hover {
	background-color: #218838;
}

/* Ensuring checkbox and label alignment */
.form-check {
	display: flex;
	align-items: center;
	flex-wrap: wrap; /* Ensures proper wrapping for long labels */
}

.form-check input[type="checkbox"] {
	margin-right: 10px; /* Adjust spacing between checkbox and label */
}

.form-check-label {
	flex: 1; /* Ensures the label takes the remaining space */
	margin: 0; /* Reset any margin to avoid unexpected spacing */
	white-space: normal; /* Allow labels to wrap */
}

.hero-image {
	width: 100%;
	max-height: 280px;
	object-fit: cover;
}
.hero-header {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	color: white;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 5px;
	margin: 0;

	font-family: 'Lobster', cursive; /* Header font */
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-size: 2rem;
}

#bannerSection {
	text-align: center;
	padding: 10px;
	margin-bottom: 20px; /* Adds whitespace */
}

.banner {
	color: #333;
	background-color: #f8d7da;
	border: 1px solid #f5c6cb;
	padding: 15px;
	border-radius: 5px;
	font-size: 1.2em;
	text-align: center;
	margin: 10px 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.banner-success {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.banner-info {
	background-color: #d1ecf1;
	color: #0c5460;
	border: 1px solid #bee5eb;
}

.banner-warning {
	background-color: #fff3cd;
	color: #856404;
	border: 1px solid #ffeeba;
}

/* Apply the light gray divider to the entire buttonSection */
#buttonSection {
	border-top: 1px solid #ddd; /* Adds a light gray divider between mainContent and buttonSection */
	padding-top: 15px; /* Adds some space between the divider and the buttons */
}

/* Styling for buttons */
#buttonSection .custom-button {
	display: block;
	width: 100%;
	padding: 10px;
	margin-bottom: 10px;
	background-color: #28a745; /* Default green */
	color: #fff; /* Default white text */
	border: none;
	border-radius: 0.375rem; /* Rounded corners */
	font-size: 1.1em;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease-in-out;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

#buttonSection .custom-button:hover {
	background-color: #218838; /* Darker green on hover */
	transform: scale(1.02); /* Slightly larger on hover */
}

#buttonSection .custom-button:focus {
	outline: none;
	box-shadow: 0 0 0 0.25rem rgba(72, 180, 97, 0.5); /* Green focus ring */
}

#mainContentSection {
	padding-bottom: 15px; /* Optional padding to add space below the main content */
}

.sticky-footer {
	position: sticky;
	bottom: 0;
	left: 0;
	width: 100vw; /* Ensures the footer spans the entire viewport width */
	background-color: #333; /* Dark gray background */
	padding: 10px;
	text-align: center;
	color: #f0f2f5; /* White text color */
	box-sizing: border-box; /* Includes padding in width calculation */
	z-index: 10; /* Ensures footer is rendered on top of other content */
	margin: 0; /* Remove any unintended margins */
}
.sticky-footer a {
	color: white;
	text-decoration: none;
}

/* MODALS */

/* General modal styles for all modals */
.modal-content {
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.modal-body {
	padding: 20px;
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
	color: #333;
}

/* Buttons inside modals */
.modal-footer button {
	width: 100%; /* Make buttons span the width of the modal */
	margin-top: 10px;
}

/* Hide modal headers (already removed from HTML but ensure no extra space is left) */
.modal-header {
	display: none !important;
}

#couponHeroContainer img {
	width: 100%; /* Fit to width of container */
	height: auto; /* Maintain aspect ratio */
	max-height: calc(100vw * 0.66); /* Approximate 3:2 aspect ratio */
	object-fit: cover; /* Ensures the image fills the space while preserving its aspect ratio */
}

#authModal label {
	margin-bottom: 10px; /* Adds space below the label */
	display: block; /* Ensures label spans the width */
}

/* Error container to center content */
#errorFatal {
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center; /* Center content vertically */
	align-items: center; /* Center content horizontally */
	height: 100vh; /* Full viewport height */
}

/* Style for the error image */
#errorFatal .error-image {
	width: 30%; /* Set the image width to 20% of the viewport */
	max-width: 200px; /* Optional: Limit the max size of the image */
	height: auto; /* Maintain aspect ratio */
	margin-bottom: 1rem; /* Spacing between image and bubble */
}

/* Style for the error message bubble */
#errorFatal div {
	background-color: white; /* Bubble background */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
	border-radius: 8px; /* Rounded corners */
	padding: 1.5rem; /* Inner padding */
	text-align: center; /* Center text */
	max-width: 90%; /* Responsive width */
}