/****************************************************/
	/******* General CSS Foamy Auto Detailing ***********/
	/****************************************************/

	.container-form {
	max-width: 1225px;
	margin: 0 auto;
	padding: 24px 16px 10px;
	}

	.hero-title {
	font-size: 36px;
	font-weight: 700;
	text-align:left;
	margin-bottom: 15px;
	}

	.hero-sub {
	color:#222222;
	margin-bottom: 10px;
	text-align:left;
	font-size: 20px;
	}

	/* Layout */
	.layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 24px;
	}

	.left-column {
	display: flex;
	flex-direction: column;
	gap: 16px;
	}

	.right-column {
	position: sticky;
	top: 20px;
	height: fit-content;
	}

	@media (max-width: 900px) {
	.layout {
	grid-template-columns: 1fr;
	}
	.right-column {
	position: static;
	margin-top: 16px;
	}
	}

	/* Cards */
	.card {
	background-color: #ffffff;
	border-radius: var(--radius);
	padding: 16px 18px;
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	}

	.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 35px rgba(15, 23, 42, 0.12);
	}

	.summary-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
	}

	/* Step Headers */
	.step-header {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
	gap: 8px;
	}

	.step-number {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: #1f2a40;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 600;
	}

	.step-title {
	font-weight: 500;
	font-size: 20px;
	}

	/* Grid Utilities */
	.grid {
	display: grid;
	gap: 10px;
	}

	@media (min-width: 640px) {
	.grid-2 {
	grid-template-columns: repeat(2, 1fr);
	}
	.grid-3 {
	grid-template-columns: repeat(3, 1fr);
	}
	}

	/* Form Elements */
	label {
	display: block;
	margin-top: 14px;
	font-size: 20px;
	font-weight: 500;
	}

	input[type="text"],
	input[type="package"],
	input[type="date"],
	input[type="time"],
	input[type="name"],
	input[type="tel"],
	input[type="email"],
	textarea, select {
	background: rgba(255,255,255,0.1);
	font-size:18px;
	height: auto;
	margin: auto;
	outline: 0;
	padding:10px 10px;
	width: 100%;
	color:#6c757d;
	border: none;
	border-bottom: 1px solid #202c45;
	border-radius: 6px;
	box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
	margin-bottom: 5px;
	resize:none;
	transition: 0.2s ease;
	}

	input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(61,114,164,0.15);
	}

	select:hover {
	background-color: #008ae8;
	color:#ffffff;
	}

	/* Pills */
	.pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	}

	.pill {
	width: 193px;
	height: 90px;
	border-radius: 16px;
	border: 3px solid #d1d5db;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	transition: all 0.18s ease;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: #fff;
	}

	.pill img {
	width: 183px;
	height: 70px;
	object-fit: cover;
	object-position: center;
	display: block;
	}

	.pill:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
	}

	.pill.active {
	border-color:#008ae8;
	box-shadow: 0 0 0 4px var(--primary-soft);
	}

	.pill span {
	position: absolute;
	top: 0px;
	left:5px;
	font-size: 18px;
	font-weight: 500;
	color: #000000;
	}

	/* Service Cards & Addons */
	.service-card,
	.addon-row {
	border-radius: 10px;
	border: 1px solid #e5e7eb;
	padding: 10px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	transition: border 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	}

	.service-card:hover,
	.addon-row:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
	}

	.service-card.active {
	border-color: var(--primary);
	background: var(--primary-soft);
	}

	.service-info {
	font-size: 18px;
	}

	.service-name {
	font-weight: 600;
	margin-bottom: 2px;
	}

	.service-meta {
	color: var(--muted);
	font-size: 0.8rem;
	}

	.price-tag {
	font-weight: 600;
	font-size: 20px;
	}

	/* ADDons */

	/* Two-column responsive grid */
	.addons-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 18px; /* micro-tight spacing */
	width: 100%;
	}

	@media (max-width: 640px) {
	.addons-grid {
	grid-template-columns: 1fr;
	}
	}

	/* Addon row styling – matches your checklist UI */
	.addon-row {
	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 4px 12px 4px 12px; /* micro-tight */
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 7px;

	background: rgba(255,255,255,0.03);
	backdrop-filter: blur(3px);

	transition: transform .22s ease, border-color .22s ease, background .22s ease;
	cursor: pointer;
	}

	/* Subtle separator line inside each box */
	.addon-row::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 12px;
	right: 12px;
	height: 1px;
	background: linear-gradient(
	to right,
	rgba(255,255,255,0.05),
	rgba(255,255,255,0.15),
	rgba(255,255,255,0.05)
	);
	pointer-events: none;
	}

	/* Hover micro-motion */
	.addon-row:hover {
	transform: translateX(4px);
	border-color: rgba(255,255,255,0.35);
	background: rgba(255,255,255,0.06);
	}

	/* Label + checkbox alignment */
	.addon-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	color:#000000;
	}

	/* Price tag */
	.price-tag {
	font-size: 15px;
	color: 000000;
	opacity: 0.9;
	}

	/* Checkbox styling (your original, untouched) */
	.addon-row input[type="checkbox"] {
	appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid #d1d5db;
	border-radius: 4px;
	display: inline-block;
	position: relative;
	cursor: pointer;
	transition: all 0.2s ease;
	}

	.addon-row input[type="checkbox"]:checked {
	background:#008ae8;
	border-color: #d1d5db;
	}

	.addon-row input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	width: 4px;
	height: 9px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	}

	/* Summary */
	.summary-card {
	background-color: #1f2a40;
	color: #fff;
	border-radius: var(--radius);
	}

	.summary-list {
	font-size: 1rem;
	margin-bottom: 8px;
	}

	.summary-list div {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	}

	.summary-total {
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	font-size:24px;
	margin-top: 8px;
	padding: 13px;
	border-top: 1px dashed #e5e7eb;
	}

	/* Buttons */
	.btn-primary,
	.btn-secondary {
	width: 100%;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
	}

	/* Misc */
	.small-text {
	font-size: 0.8rem;
	color: var(--muted);
	}

	/* Animations */
	.fade {
	animation: fadeIn 0.4s ease;
	}

	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
	}

	/* Coupon Styles */
	.valid-coupon {
	border: 2px solid #16a34a !important;
	background: #dcfce7;
	transition: 0.3s;
	}

	.invalid-coupon {
	border: 2px solid #dc2626 !important;
	background: #fee2e2;
	transition: 0.3s;
	}

	.discount-line {
	color: #16a34a;
	font-weight: 600;
	}

	.coupon-section {
	margin-top: 15px;
	}

	.coupon-row {
	display: flex;
	gap: 8px;
	}

	#couponInput {
	flex: 1;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 6px;
	}

	#applyCouponBtn {
	padding: 8px 14px;
	background: #008ae8;
	color: white;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	}

	#applyCouponBtn:hover {
	background: #111111;
	}