:root {
	--color-bg: #FFF8F5;
	--color-primary: #BE4F90;
	--color-primary-dark: #822f5f;
	--color-text: #822f5f;
}

body {
	background-color: var(--color-bg);
	color: var(--color-text);
	padding-top: 60px;
}

.btn-cart-main {
	background-color: white;
	color: var(--color-primary-dark);
	border: 1px solid var(--color-primary-dark);
	border-radius: 15px;
	width: auto;
}

.btn-cart-main:hover {
	background-color: var(--color-primary-dark);
	color: white;
}

.btn-cart {
	background-color: white;
	color: var(--color-primary-dark);
	border: 1px solid var(--color-primary-dark);
	border-radius: 5px;
	width: 65px;
	height: 30px;
}

.btn-cart:hover {
	background-color: var(--color-primary-dark);
	color: white;
}


.catalog-title {
	font-size: 20px;
	font-weight: 100;
	color: var(--color-primary);
	background-color: white;
}

.catalog-text {
	font-size: 16px;
	font-weight: 100;
	color: var(--color-text);
}

.hr-thin {
	border: 0;
	height: 1px;
	background: #333;
	margin: 5px 0px 10px;
	background-image: linear-gradient(to right, white, silver, white);
}

.catalog-info {
	font-size: 16px;
	font-weight: 100;
	color: var(--color-text);
}

.nav-bar {
	background-color: var(--color-primary);
}

.wave-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	z-index: 0;
	pointer-events: none;
	background: transparent;
}

.category-grid {
	display: grid;
	/* This is the magic line */
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.5rem;
	/* This replaces the 'gap-2' class for consistent spacing */
}

.category-grid .btn {
	width: 100%;
}

/* table styling */

.jobs-container {
	display: block;
	justify-content: center;
	/* padding: 20px; */
	padding-top: 0px;
	box-sizing: content-box !important;
	background-color: #f4f4f4e2;
}

.jobs-table {
	table-layout: fixed;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	font-size: 12px;
	width: 100%;
}

.jobs-table th,
.jobs-table td {
	border: 1px solid #ccc;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 6px 10px !important;
}

.jobs-table th {
	background-color: lightslategray;
	color: white;
	font-weight: 100;
	font-size: 14px;
	padding: 3px 10px !important;
}

table.jobs-table.dataTable th,
table.jobs-table.dataTable td {
	padding: 3px 10px !important;

	box-sizing: border-box;
	cursor: context-menu;
}

.btn-nav-highlight {
	background-color: var(--color-primary);
	color: white;
	border-radius: 5px;
	padding: 5px 10px;
}

.btn-nav-highlight:hover {
	background-color: var(--color-primary-dark);
	color: white;
	border-radius: 5px;
	padding: 5px 10px;
}

.btn-grid {
	background-color: #0d6efd;
	color: white;
	border-radius: 5px;
	padding: 0px 10px;
	vertical-align: middle;
	display: inline-block;
	font-size: 14px;
	border: none;
	height: 25px;
}

/* Booking detail edit inputs styling */
.booking-edit-input {
	font-weight: normal;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	padding: 4px 8px;
	background-color: white;
}

.booking-edit-input[type="text"],
.booking-edit-input[type="email"],
.booking-edit-input[type="tel"],
.booking-edit-input[type="date"],
.booking-edit-input[type="number"] {
	height: 25px;
}

.booking-edit-input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 0.2rem rgba(190, 79, 144, 0.25);
}