/**
 * UH Package Cards — Dawn-inspired layout, Umrah Hosting brand tokens.
 */
.utl-pc {
	--utl-pc-gold: var(--uh-gold, #c4a35a);
	--utl-pc-green: var(--uh-green-dark, #0f3d28);
	--utl-pc-ink: var(--uh-ink, #1a1a1a);
	--utl-pc-muted: var(--uh-muted, #5c6b63);
	--utl-pc-radius: 22px;
	position: relative;
	margin: 1.5rem 0 2.5rem;
	padding: 0 2.5rem;
	font-family: var(--uh-font-body, "Source Sans 3", system-ui, sans-serif);
}

.utl-pc__heading {
	text-align: center;
	color: var(--utl-pc-green);
	font-family: var(--uh-font-display, "Playfair Display", Georgia, serif);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	margin: 0 0 1.25rem;
}

.utl-pc__track {
	display: grid;
	gap: 1.25rem;
}

.utl-pc[data-layout="grid"][data-columns="1"] .utl-pc__track { grid-template-columns: 1fr; }
.utl-pc[data-layout="grid"][data-columns="2"] .utl-pc__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.utl-pc[data-layout="grid"][data-columns="3"] .utl-pc__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.utl-pc[data-layout="grid"][data-columns="4"] .utl-pc__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.utl-pc[data-layout="carousel"] {
	overflow: hidden;
}

.utl-pc[data-layout="carousel"] .utl-pc__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 0.35rem 0.15rem 1rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.utl-pc[data-layout="carousel"] .utl-pc__track::-webkit-scrollbar {
	display: none;
}

.utl-pc[data-layout="carousel"] .utl-pc-card {
	flex: 0 0 calc((100% - 2.5rem) / 3);
	scroll-snap-align: start;
	max-width: 100%;
}

.utl-pc__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 42px;
	height: 42px;
	border: none;
	background: transparent;
	color: var(--utl-pc-green);
	font-size: 2.4rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.utl-pc__nav:hover {
	color: var(--utl-pc-gold);
}

.utl-pc__nav--prev { left: 0; }
.utl-pc__nav--next { right: 0; }

.utl-pc__dots {
	display: flex;
	justify-content: center;
	gap: 0.45rem;
	margin-top: 0.25rem;
}

.utl-pc__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: #c9d5ce;
	cursor: pointer;
}

.utl-pc__dot.is-active {
	background: var(--utl-pc-green);
}

.utl-pc-card {
	background: #fff;
	border-radius: var(--utl-pc-radius);
	box-shadow: 0 8px 28px rgba(15, 61, 40, 0.08);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid rgba(15, 61, 40, 0.06);
}

.utl-pc-card__media {
	position: relative;
}

.utl-pc-card__media-link {
	display: block;
	line-height: 0;
}

.utl-pc-card__img {
	width: 100% !important;
	height: 220px !important;
	object-fit: cover;
	display: block;
}

.utl-pc-card__img--placeholder {
	background: linear-gradient(145deg, #0f3d28 0%, #247a4d 55%, #c4a35a 100%);
}

.utl-pc-card__badge {
	position: absolute;
	top: 42px;
	left: 0;
	background: var(--utl-pc-gold);
	color: var(--utl-pc-green);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.55rem 1.1rem;
	border-radius: 0 22px 22px 0;
}

.utl-pc-card__body {
	padding: 1rem 1.1rem 1.15rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}

.utl-pc-card__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--utl-pc-ink);
}

.utl-pc-card__title a {
	color: inherit;
	text-decoration: none;
}

.utl-pc-card__title a:hover {
	color: var(--utl-pc-green);
}

.utl-pc-card__meta,
.utl-pc-card__hotels,
.utl-pc-card__amenities {
	list-style: none;
	margin: 0;
	padding: 0;
}

.utl-pc-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem 0.85rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--utl-pc-green);
}

.utl-pc-card__meta li,
.utl-pc-card__hotels li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.utl-pc-card__hotels {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 0.95rem;
	color: var(--utl-pc-ink);
	padding-top: 0.35rem;
	border-top: 1px solid #e8eee9;
}

.utl-pc-card__amenities {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.65rem 0.85rem;
	padding: 0.65rem 0 0.15rem;
	border-top: 1px solid #e8eee9;
}

.utl-pc-card__amenities li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--utl-pc-ink);
	min-width: 3.2rem;
	text-align: center;
}

.utl-pc-card__icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: var(--utl-pc-gold);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.utl-pc-card__amenities .utl-pc-card__icon {
	width: 22px;
	height: 22px;
}

.utl-pc-card__icon--plane {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E");
}

.utl-pc-card__icon--clock {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 11h-5V7h2v4h3v2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 11h-5V7h2v4h3v2z'/%3E%3C/svg%3E");
}

.utl-pc-card__icon--madinah,
.utl-pc-card__icon--makkah,
.utl-pc-card__icon--hotel {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 13v7h3v-5h4v5h3v-7l-5-4-5 4zm5-10L2 12h3v8h6v-5h2v5h6v-8h3L12 3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 13v7h3v-5h4v5h3v-7l-5-4-5 4zm5-10L2 12h3v8h6v-5h2v5h6v-8h3L12 3z'/%3E%3C/svg%3E");
}

.utl-pc-card__icon--cutlery {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z'/%3E%3C/svg%3E");
}

.utl-pc-card__icon--car {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E");
}

.utl-pc-card__icon--ticket {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M22 10V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v4a2 2 0 0 1 0 4v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 1 0-4zm-2-1.46c-.95.5-1.6 1.48-1.6 2.61s.65 2.11 1.6 2.61V18H4v-2.24c.95-.5 1.6-1.48 1.6-2.61S4.95 10.04 4 9.54V6h16v2.54z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M22 10V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v4a2 2 0 0 1 0 4v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 1 0-4zm-2-1.46c-.95.5-1.6 1.48-1.6 2.61s.65 2.11 1.6 2.61V18H4v-2.24c.95-.5 1.6-1.48 1.6-2.61S4.95 10.04 4 9.54V6h16v2.54z'/%3E%3C/svg%3E");
}

.utl-pc-card__icon--book {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM6 4h5v8l-2.5-1.5L6 12V4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM6 4h5v8l-2.5-1.5L6 12V4z'/%3E%3C/svg%3E");
}

.utl-pc-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.35rem;
}

.utl-pc-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--utl-pc-gold);
	color: #111 !important;
	font-weight: 700;
	text-decoration: none !important;
	border-radius: 999px;
	padding: 0.55rem 1.15rem;
	font-size: 0.95rem;
	transition: background 0.2s ease, transform 0.2s ease;
}

.utl-pc-card__cta:hover {
	background: var(--uh-gold-bright, #d4af37);
	transform: translateY(-1px);
}

.utl-pc-card__price {
	text-align: right;
}

.utl-pc-card__price-label {
	display: block;
	font-size: 0.8rem;
	color: var(--utl-pc-muted);
}

.utl-pc-card__price-value {
	display: block;
	font-size: 1.55rem;
	font-weight: 800;
	color: var(--utl-pc-green);
	line-height: 1.1;
}

@media (max-width: 991px) {
	.utl-pc[data-layout="carousel"] .utl-pc-card {
		flex-basis: calc((100% - 1.25rem) / 2);
	}
	.utl-pc[data-layout="grid"][data-columns="3"] .utl-pc__track,
	.utl-pc[data-layout="grid"][data-columns="4"] .utl-pc__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.utl-pc {
		padding: 0 1.75rem;
	}
	.utl-pc[data-layout="carousel"] .utl-pc-card {
		flex-basis: 88%;
	}
	.utl-pc[data-layout="grid"] .utl-pc__track {
		grid-template-columns: 1fr !important;
	}
	.utl-pc__nav {
		top: 120px;
		transform: none;
	}
	.utl-pc-card__img {
		height: 190px !important;
	}
}

/* Duration filter (city/type hubs) */
.utl-pc__duration {
	margin: 0 0 1.25rem;
	text-align: center;
}
.utl-pc__duration-label {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--utl-pc-muted);
}
.utl-pc__duration-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.utl-pc__duration-btn {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	border: 1px solid rgba(15, 61, 40, 0.22);
	border-radius: 999px;
	color: var(--utl-pc-green);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 600;
	background: #fff;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.utl-pc__duration-btn:hover,
.utl-pc__duration-btn.is-active {
	background: var(--utl-pc-green);
	border-color: var(--utl-pc-green);
	color: #fff;
}