.ssrv-package-grid,
.ssrv-offer-grid,
.ssrv-related-grid {
	min-width:0;
	display:flex;
	align-items:stretch;
	flex-wrap:wrap;
	gap:14px;
}


/* =========================
   Service Packages
========================= */

.ssrv-package {
	position:relative;
	min-width:0;
	max-width: 420px;
	flex:1 1 calc(33.333% - 10px);
	display:flex;
	align-items:flex-start;
	flex-direction:column;
	padding:22px;
	border:1px solid var(--diver);
	border-radius:17px;
	background:var(--surface-color);
	transition:
		border-color var(--transition),
		box-shadow var(--transition),
		transform var(--transition);
}

.ssrv-package.featured {
	border-color:var(--uicolor2);
	box-shadow:0 14px 28px color-mix(in srgb,var(--uicolor2) 10%,transparent);
}

.ssrv-chip,
.ssrv-offer > span {
	max-width:100%;
	min-height:28px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	margin-block-end:13px;
	padding:4px 10px;
	border-radius:999px;
	color:var(--uicolor2);
	background:color-mix(in srgb,var(--uicolor2) 9%,transparent);
	font-size:13px;
	font-weight:900;
	line-height:1.45;
	overflow-wrap:anywhere;
}

.ssrv-package h3,
.ssrv-offer h3 {
	max-width:100%;
	margin:0 0 8px;
	color:var(--primary-text);
	font-size:23px;
	font-weight:900;
	line-height:1.45;
	overflow-wrap:anywhere;
}

.ssrv-package > p,
.ssrv-offer > p {
	max-width:100%;
	margin:0 0 14px;
	color:var(--secondarytext);
	font-size:18px;
	font-weight:500;
	line-height:1.75;
	overflow-wrap:anywhere;
}

.ssrv-package-price,
.ssrv-offer-price {
	width:100%;
	min-width:0;
	display:flex;
	align-items:flex-end;
	flex-wrap:wrap;
	gap:6px 8px;
	margin-block:4px 12px;
	padding-block-end:13px;
	border-block-end:1px dashed var(--diver);
}

.ssrv-package-price del,
.ssrv-offer-price del {
	max-width:100%;
	color:var(--secondarytext);
	font-family:var(--f-number);
	font-size:16px;
	line-height:1.45;
	direction:ltr;
	unicode-bidi:isolate;
	overflow-wrap:anywhere;
}

.ssrv-package-price strong,
.ssrv-offer-price strong {
	max-width:100%;
	color:var(--uicolor);
	font-size:27px;
	font-weight:900;
	line-height:1.35;
	overflow-wrap:anywhere;
}

.ssrv-package > small,
.ssrv-offer > small {
	max-width:100%;
	display:block;
	margin-block-end:12px;
	color:var(--secondarytext);
	font-size:14px;
	font-weight:700;
	line-height:1.6;
	overflow-wrap:anywhere;
}

.ssrv-package ul {
	width:100%;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:8px;
	margin:0 0 18px;
	padding:0;
	list-style:none;
}

.ssrv-package li {
	min-width:0;
	display:flex;
	align-items:flex-start;
	gap:7px;
	color:var(--secondarytext);
	font-size:18px;
	font-weight:600;
	line-height:1.55;
	overflow-wrap:anywhere;
}

.ssrv-package li i {
	width:27px;
	height:27px;
	flex:0 0 27px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-block-start:1px;
	border-radius:50%;
	color:var(--on-color);
	background:var(--uicolor4);
	font-size:13px;
}

.ssrv-book {
	width:100%;
	min-width:0;
	min-height:46px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-block-start:auto;
	padding:9px 14px;
	border-radius:11px;
	color:var(--on-color);
	background:var(--uicolor);
	font-size:16px;
	font-weight:900;
	line-height:1.45;
	text-align:center;
	overflow-wrap:anywhere;
	touch-action:manipulation;
	-webkit-tap-highlight-color:transparent;
	transition:
		color var(--transition),
		background var(--transition),
		transform var(--transition),
		box-shadow var(--transition);
}

.ssrv-book:active {
	transform:scale(.98);
}


/* =========================
   Service Offers
========================= */

.ssrv-offer {
	position:relative;
	min-width:0;
	flex:1 1 calc(50% - 7px);
	display:flex;
	max-width: 420px;
	align-items:flex-start;
	flex-direction:column;
	overflow:hidden;
	padding:22px;
	border:1px solid color-mix(in srgb,var(--uicolor2) 18%,transparent);
	border-radius:17px;
	background:linear-gradient(
		135deg,
		var(--surface-color),
		color-mix(in srgb,var(--uicolor2) 5%,transparent)
	);
	transition:
		border-color var(--transition),
		box-shadow var(--transition),
		transform var(--transition);
}

.ssrv-coupon-claim {
	width:100%;
	min-width:0;
	display:grid;
	grid-template-columns:minmax(0,1fr) auto;
	align-items:stretch;
	gap:8px;
	margin-block-start:auto;
	padding-block-start:13px;
}

.ssrv-coupon-claim input {
	width:100%;
	min-width:0;
	min-height:46px;
	padding:0 13px;
	border:1px solid var(--diver);
	border-radius:10px;
	outline:0;
	color:var(--primary-text);
	background:var(--surface-color);
	font:inherit;
	font-size:15px;
	direction:ltr;
	text-align:start;
	transition:
		border-color var(--transition),
		box-shadow var(--transition),
		background var(--transition);
}

.ssrv-coupon-claim input::placeholder {
	color:color-mix(in srgb,var(--secondarytext) 76%,transparent);
	opacity:1;
}

.ssrv-coupon-claim input:focus {
	border-color:rgb(var(--uicolor-code) / 58%);
	background:var(--surface-color);
	box-shadow:0 0 0 3px rgb(var(--uicolor-code) / 11%);
}

.ssrv-coupon-claim button {
	min-width:128px;
	min-height:46px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:8px 14px;
	border:0;
	border-radius:10px;
	color:var(--on-color);
	background:var(--uicolor2);
	cursor:pointer;
	font:inherit;
	font-size:12px;
	font-weight:900;
	line-height:1.45;
	text-align:center;
	touch-action:manipulation;
	-webkit-tap-highlight-color:transparent;
	transition:
		filter var(--transition),
		transform var(--transition),
		opacity var(--transition);
}

.ssrv-coupon-claim button:active {
	transform:scale(.97);
}

.ssrv-coupon-claim button.loading,
.ssrv-coupon-claim button:disabled {
	opacity:.65;
	pointer-events:none;
	cursor:wait;
}

.ssrv-coupon-claim em {
	min-width:0;
	grid-column:1 / -1;
	display:block;
	color:var(--uicolor4);
	font-size:11px;
	font-style:normal;
	font-weight:800;
	line-height:1.6;
	overflow-wrap:anywhere;
}

.ssrv-coupon-claim em:empty {
	display:none;
}

.ssrv-coupon-claim em strong {
	display:inline-block;
	margin-inline-start:4px;
	padding:2px 7px;
	border-radius:6px;
	color:var(--on-color);
	background:var(--uicolor4);
	font-family:var(--f-number);
	font-size:12px;
	letter-spacing:.4px;
	direction:ltr;
	unicode-bidi:isolate;
}


/* =========================
   Related Services
========================= */

.ssrv-related-grid > article {
	min-width:0;
	flex:1 1 calc(33.333% - 10px);
	overflow:hidden;
	border:1px solid var(--diver);
	border-radius:16px;
	background:var(--surface-color);
	transition:
		border-color var(--transition),
		box-shadow var(--transition),
		transform var(--transition);
}

.ssrv-related-grid a {
	min-width:0;
	display:flex;
	align-items:flex-start;
	flex-direction:column;
	height:100%;
	color:inherit;
}

.ssrv-related-grid img {
	width:100%;
	height:auto;
	max-width:none;
	display:block;
	aspect-ratio:16 / 10;
	object-fit:cover;
	object-position:center;
	background:var(--media-placeholder);
	transition:transform 420ms cubic-bezier(.2,.75,.25,1),filter var(--transition);
}

.ssrv-related-grid strong,
.ssrv-related-grid span,
.ssrv-related-grid em {
	max-width:100%;
	display:block;
	padding-inline:15px;
	overflow-wrap:anywhere;
}

.ssrv-related-grid strong {
	margin-block-start:14px;
	color:var(--primary-text);
	font-size:18px;
	font-weight:900;
	line-height:1.45;
}

.ssrv-related-grid span {
	margin-block-start:6px;
	color:var(--secondarytext);
	font-size:17px;
	font-weight:600;
	line-height:1.65;
}

.ssrv-related-grid em {
	margin-block:auto 14px;
	padding-block-start:13px;
	color:var(--uicolor);
	font-size:15px;
	font-style:normal;
	font-weight:900;
	line-height:1.45;
}


/* =========================
   Final Call to Action
========================= */

.ssrv-final {
	position:relative;
	overflow:hidden;
	padding:38px;
	border-radius:var(--largeradius);
	color:var(--on-color);
	background:linear-gradient(
		135deg,
		var(--uicolor),
		color-mix(in srgb,var(--uicolor) 82%,var(--primary-text))
	);
	box-shadow:0 20px 40px rgb(var(--uicolor-code) / 22%);
	isolation:isolate;
}

.ssrv-final::after {
	content:"";
	position:absolute;
	top:-90px;
	inset-inline-end:-70px;
	z-index:-1;
	width:220px;
	height:220px;
	border:26px solid color-mix(in srgb,var(--on-color) 8%,transparent);
	border-radius:50%;
	pointer-events:none;
}

.ssrv-final h2,
.ssrv-final p,
.ssrv-final > div {
	position:relative;
	z-index:1;
	min-width:0;
}

.ssrv-final h2 {
	max-width:100%;
	margin:0;
	color:var(--on-color);
	font-size:29px;
	font-weight:900;
	line-height:1.45;
	overflow-wrap:anywhere;
}

.ssrv-final p {
	max-width:720px;
	margin:10px 0 20px;
	color:color-mix(in srgb,var(--on-color) 82%,transparent);
	font-size:19px;
	line-height:1.8;
	overflow-wrap:anywhere;
}

.ssrv-final .ssrv-link {
	color:var(--on-color);
	border-color:color-mix(in srgb,var(--on-color) 30%,transparent);
	background:color-mix(in srgb,var(--on-color) 10%,transparent);
	-webkit-backdrop-filter:blur(12px);
	backdrop-filter:blur(12px);
}

.ssrv-final :is(.ssrv-btn,.ssrv-link) {
	min-width:0;
}

.ssrv-final :is(.ssrv-btn,.ssrv-link) span {
	min-width:0;
	overflow-wrap:anywhere;
}


/* =========================
   Interactive States
========================= */

.ssrv-book:focus-visible,
.ssrv-coupon-claim input:focus-visible,
.ssrv-coupon-claim button:focus-visible,
.ssrv-related-grid a:focus-visible,
.ssrv-final :is(.ssrv-btn,.ssrv-link):focus-visible {
	outline:3px solid rgb(var(--uicolor-code) / 26%);
	outline-offset:3px;
}

@media (hover:hover) and (pointer:fine) {
	.ssrv-package:hover {
		border-color:var(--border-hover);
		box-shadow:0 14px 30px color-mix(in srgb,var(--primary-text) 7%,transparent);
		transform:translateY(-3px);
	}

	.ssrv-package.featured:hover {
		border-color:var(--uicolor2);
		box-shadow:0 17px 34px color-mix(in srgb,var(--uicolor2) 14%,transparent);
	}

	.ssrv-book:hover {
		color:var(--on-color);
		background:var(--uicolor2);
		box-shadow:0 10px 20px rgb(var(--uicolor2-code) / 16%);
		transform:translateY(-2px);
	}

	.ssrv-offer:hover {
		border-color:color-mix(in srgb,var(--uicolor2) 44%,var(--diver));
		box-shadow:0 14px 28px color-mix(in srgb,var(--uicolor2) 9%,transparent);
		transform:translateY(-3px);
	}

	.ssrv-coupon-claim button:not(:disabled):hover {
		filter:brightness(1.07);
		transform:translateY(-1px);
	}

	.ssrv-related-grid > article:hover {
		border-color:var(--border-hover);
		box-shadow:0 14px 28px color-mix(in srgb,var(--uicolor) 10%,transparent);
		transform:translateY(-3px);
	}

	.ssrv-related-grid > article:hover img {
		filter:saturate(1.04);
		transform:scale(1.035);
	}

	.ssrv-related-grid a:hover em {
		color:var(--uicolor2);
	}
}


/* =========================
   Compact Desktop
========================= */

@media only screen and (max-width:1100px) {
	.ssrv-package {
		flex-basis:calc(50% - 7px);
	}

	.ssrv-package:last-child:nth-child(odd):not(:only-child) {
		flex-grow:0;
	}

	.ssrv-offer {
		flex-basis:calc(50% - 7px);
	}

	.ssrv-related-grid > article {
		flex-basis:calc(50% - 7px);
	}

	.ssrv-package h3,
	.ssrv-offer h3 {
		font-size:21px;
	}

	.ssrv-package > p,
	.ssrv-offer > p {
		font-size:16px;
	}

	.ssrv-package li {
		font-size:16px;
	}

	.ssrv-related-grid strong {
		font-size:17px;
	}

	.ssrv-related-grid span {
		font-size:15px;
	}
}


/* =========================
   Tablet Responsive
========================= */

@media only screen and (max-width:900px) {
	.ssrv-offer {
		flex-basis:100%;
	}

	.ssrv-related-grid > article {
		flex-basis:calc(50% - 7px);
	}

	.ssrv-final {
		padding:32px;
	}

	.ssrv-final h2 {
		font-size:27px;
	}

	.ssrv-final p {
		font-size:17px;
	}
}

/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:767px) {
	.ssrv-package-grid,
	.ssrv-offer-grid {
		flex-wrap:nowrap;
		gap:12px;
		margin-inline:calc(var(--container-padding--value) * -1);
		padding:3px var(--container-padding--value) 18px;
		overflow-x:auto;
		overflow-y:hidden;
		overscroll-behavior-inline:contain;
		scroll-padding-inline:var(--container-padding--value);
		scroll-snap-type:x mandatory;
		scrollbar-width:none;
		-webkit-overflow-scrolling:touch;
		touch-action:pan-x pan-y pinch-zoom;
	}

	.ssrv-package-grid::-webkit-scrollbar,
	.ssrv-offer-grid::-webkit-scrollbar {
		display:none;
	}

	.ssrv-package {
		width:min(84vw,340px);
		min-width:min(84vw,340px);
		flex:0 0 min(84vw,340px);
		padding:18px;
		border-radius:16px;
		scroll-snap-align:start;
		scroll-snap-stop:always;
	}

	.ssrv-offer {
		width:min(88vw,380px);
		min-width:min(88vw,380px);
		flex:0 0 min(88vw,380px);
		padding:18px;
		border-radius:16px;
		scroll-snap-align:start;
		scroll-snap-stop:always;
	}

	.ssrv-chip,
	.ssrv-offer > span {
		min-height:27px;
		margin-block-end:10px;
		padding:4px 9px;
		font-size:11px;
	}

	.ssrv-package h3,
	.ssrv-offer h3 {
		margin-block-end:7px;
		font-size:19px;
		line-height:1.4;
	}

	.ssrv-package > p,
	.ssrv-offer > p {
		margin-block-end:11px;
		font-size:13px;
		line-height:1.7;
	}

	.ssrv-package-price,
	.ssrv-offer-price {
		margin-block:3px 10px;
		padding-block-end:11px;
	}

	.ssrv-package-price del,
	.ssrv-offer-price del {
		font-size:13px;
	}

	.ssrv-package-price strong,
	.ssrv-offer-price strong {
		font-size:23px;
	}

	.ssrv-package > small,
	.ssrv-offer > small {
		margin-block-end:10px;
		font-size:11.5px;
	}

	.ssrv-package ul {
		gap:7px;
		margin-block-end:15px;
	}

	.ssrv-package li {
		gap:7px;
		font-size:13px;
		line-height:1.55;
	}

	.ssrv-package li i {
		width:23px;
		height:23px;
		flex-basis:23px;
		font-size:11px;
	}

	/* Package CTA stays compact instead of becoming a full-card button. */
	.ssrv-book {
		width:auto;
		max-width:100%;
		align-self:flex-start;
		min-height:48px;
		padding-inline:16px;
		font-size:14px;
	}

	/* Coupon is a single functional control: input + action remain on one row. */
	.ssrv-coupon-claim {
		grid-template-columns:minmax(0,1fr) auto;
		gap:7px;
		padding-block-start:11px;
	}

	.ssrv-coupon-claim input,
	.ssrv-coupon-claim button {
		min-height:48px;
	}

	.ssrv-coupon-claim button {
		min-width:112px;
		max-width:42vw;
		padding-inline:11px;
		font-size:11px;
		white-space:normal;
	}

	.ssrv-coupon-claim em {
		font-size:10.5px;
	}

	/* Related services remain a compact two-card grid on mobile. */
	.ssrv-related-grid {
		display:grid;
		grid-template-columns:repeat(2,minmax(0,1fr));
		align-items:stretch;
		gap:10px;
	}

	.ssrv-related-grid > article {
		min-width:0;
		height:100%;
		border-radius:14px;
	}

	.ssrv-related-grid img {
		aspect-ratio:4 / 3;
	}

	.ssrv-related-grid strong,
	.ssrv-related-grid span,
	.ssrv-related-grid em {
		padding-inline:11px;
	}

	.ssrv-related-grid strong {
		margin-block-start:11px;
		font-size:14px;
		line-height:1.45;
	}

	.ssrv-related-grid span {
		display:-webkit-box;
		overflow:hidden;
		margin-block-start:4px;
		font-size:11.5px;
		line-height:1.6;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:3;
	}

	.ssrv-related-grid em {
		margin-block-end:11px;
		padding-block-start:10px;
		font-size:12px;
	}

	.ssrv-final {
		padding:26px 20px;
		border-radius:20px;
	}

	.ssrv-final::after {
		top:-72px;
		inset-inline-end:-78px;
		width:180px;
		height:180px;
		border-width:21px;
	}

	.ssrv-final h2 {
		font-size:23px;
		line-height:1.5;
	}

	.ssrv-final p {
		margin-block:8px 17px;
		font-size:14px;
		line-height:1.75;
	}

	/* Final CTA uses the shared service-button sizing from service-shell.css. */
	.ssrv-final > div {
		display:flex;
		align-items:center;
		justify-content:flex-start;
		flex-wrap:wrap;
		gap:9px;
	}

	.ssrv-final :is(.ssrv-btn,.ssrv-link) {
		width:auto;
		max-width:calc(50% - 5px);
		min-width:0;
		flex:0 1 auto;
		white-space:normal;
	}
}


/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:480px) {
	.ssrv-package-grid,
	.ssrv-offer-grid {
		gap:10px;
		padding-block-end:15px;
	}

	.ssrv-package {
		width:min(86vw,320px);
		min-width:min(86vw,320px);
		flex-basis:min(86vw,320px);
		padding:16px;
		border-radius:15px;
	}

	.ssrv-offer {
		width:min(89vw,350px);
		min-width:min(89vw,350px);
		flex-basis:min(89vw,350px);
		padding:16px;
		border-radius:15px;
	}

	.ssrv-package h3,
	.ssrv-offer h3 {
		font-size:18px;
	}

	.ssrv-package-price strong,
	.ssrv-offer-price strong {
		font-size:22px;
	}

	.ssrv-book {
		min-height:46px;
		padding-inline:14px;
		font-size:13px;
	}

	.ssrv-coupon-claim button {
		min-width:100px;
		padding-inline:9px;
		font-size:10.5px;
	}

	.ssrv-related-grid {
		gap:8px;
	}

	.ssrv-related-grid > article {
		border-radius:12px;
	}

	.ssrv-related-grid strong,
	.ssrv-related-grid span,
	.ssrv-related-grid em {
		padding-inline:9px;
	}

	.ssrv-related-grid strong {
		margin-block-start:9px;
		font-size:13px;
	}

	.ssrv-related-grid span {
		font-size:10.5px;
		-webkit-line-clamp:2;
	}

	.ssrv-related-grid em {
		margin-block-end:9px;
		padding-block-start:8px;
		font-size:11px;
	}

	.ssrv-final {
		padding:23px 17px;
		border-radius:18px;
	}

	.ssrv-final h2 {
		font-size:21px;
	}

	.ssrv-final p {
		font-size:13px;
	}

	.ssrv-final > div {
		gap:8px;
	}

	.ssrv-final :is(.ssrv-btn,.ssrv-link) {
		max-width:calc(50% - 4px);
	}
}

@media only screen and (max-width:390px) {
	.ssrv-package {
		width:88vw;
		min-width:88vw;
		flex-basis:88vw;
	}

	.ssrv-offer {
		width:90vw;
		min-width:90vw;
		flex-basis:90vw;
	}

	.ssrv-coupon-claim {
		grid-template-columns:minmax(0,1fr) auto;
		gap:6px;
	}

	.ssrv-coupon-claim button {
		width:auto;
		min-width:92px;
		max-width:40vw;
		padding-inline:8px;
		font-size:10px;
	}

	.ssrv-final {
		padding:21px 15px;
	}


	.ssrv-final :is(.ssrv-btn,.ssrv-link) {
		flex-basis:auto;
		max-width:calc(50% - 4px);
	}
}

@media only screen and (max-width:340px) {
	.ssrv-package,
	.ssrv-offer {
		width:90vw;
		min-width:90vw;
		flex-basis:90vw;
		padding-inline:14px;
	}

	.ssrv-package h3,
	.ssrv-offer h3 {
		font-size:17px;
	}

	.ssrv-package > p,
	.ssrv-offer > p {
		font-size:12px;
	}

	.ssrv-coupon-claim button {
		min-width:86px;
		max-width:39vw;
		padding-inline:7px;
		font-size:9.5px;
	}

	.ssrv-related-grid {
		gap:7px;
	}

	.ssrv-related-grid strong {
		font-size:12.5px;
	}

	.ssrv-related-grid span {
		display:none;
	}

	.ssrv-related-grid em {
		font-size:10.5px;
	}

	.ssrv-final h2 {
		font-size:19px;
	}

	.ssrv-final p {
		font-size:12px;
	}

	.ssrv-final > div {
		gap:7px;
	}

	.ssrv-final :is(.ssrv-btn,.ssrv-link) {
		max-width:calc(50% - 4px);
	}
}