/**
 * Hadaf Tour Bookings
 * Front end styles. Colour variables are injected inline from the site palette,
 * the same palette used by the Hadaf visa application form, so tours and
 * visas look like one consistent site.
 */

.htb-wrap {
	--htb-primary: #04547f;
	--htb-primary-dark: #033a58;
	--htb-primary-soft: #a9cfe0;
	--htb-primary-tint: #dbeaf1;
	--htb-accent: #0d84b7;
	--htb-accent-soft: #bfe0ef;
	--htb-primary-rgb: 4, 84, 127;
	--htb-accent-rgb: 13, 132, 183;
	--htb-ink: #0f1c28;
	--htb-muted: #4c5f70;
	--htb-border: #c3d3de;
	--htb-surface: #eaf1f5;
	--htb-danger: #c0392b;
	--htb-success: #1f8a5a;
	--htb-radius: 14px;
	--htb-radius-sm: 10px;
	--htb-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--htb-gradient: linear-gradient(135deg, var(--htb-primary) 0%, var(--htb-accent) 100%);
	--htb-gradient-flat: linear-gradient(90deg, var(--htb-primary) 0%, var(--htb-accent) 100%);
	--htb-gradient-soft: linear-gradient(135deg, var(--htb-primary-tint) 0%, var(--htb-accent-soft) 100%);

	--htb-base-size: 17px;

	max-width: 1180px;
	margin: 0 auto;
	color: var(--htb-ink);
	font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
	font-size: var(--htb-base-size);
	line-height: 1.65;
}

.htb-wrap input,
.htb-wrap select,
.htb-wrap textarea,
.htb-wrap button {
	font-family: inherit;
}

.htb-wrap *,
.htb-wrap *::before,
.htb-wrap *::after {
	box-sizing: border-box;
}

.htb-wrap [hidden] {
	display: none !important;
}

.htb-progress__list,
.htb-summary__trust {
	list-style: none !important;
	padding-left: 0;
}

.htb-progress__list li::marker,
.htb-summary__trust li::marker {
	content: "";
}

/* ---------------------------------------------------------------
   Keyframes
--------------------------------------------------------------- */

@keyframes htbRiseIn {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes htbSlideInRight {
	from { opacity: 0; transform: translateX(26px); }
	to   { opacity: 1; transform: none; }
}

@keyframes htbPop {
	0%   { transform: scale(0.7); opacity: 0; }
	60%  { transform: scale(1.12); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes htbShake {
	0%, 100% { transform: translateX(0); }
	20%      { transform: translateX(-5px); }
	40%      { transform: translateX(5px); }
	60%      { transform: translateX(-3px); }
	80%      { transform: translateX(3px); }
}

@keyframes htbSpin {
	to { transform: rotate(360deg); }
}

@keyframes htbBump {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.08); color: var(--htb-primary); }
	100% { transform: scale(1); }
}

@keyframes htbPulseRing {
	0%   { box-shadow: 0 0 0 0 rgba(var(--htb-primary-rgb, 4, 84, 127), 0.45); }
	70%  { box-shadow: 0 0 0 10px rgba(var(--htb-primary-rgb, 4, 84, 127), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--htb-primary-rgb, 4, 84, 127), 0); }
}

@keyframes htbSheen {
	0%   { transform: translateX(-120%) skewX(-18deg); }
	100% { transform: translateX(260%) skewX(-18deg); }
}

/* ---------------------------------------------------------------
   Header
--------------------------------------------------------------- */

.htb-header {
	margin: 0 0 22px;
	animation: htbRiseIn 0.5s var(--htb-ease) both;
}

.htb-eyebrow {
	margin: 0 0 6px;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--htb-accent);
}

.htb-title {
	margin: 0 0 8px;
	font-size: 1.85em;
	font-weight: 800;
	line-height: 1.2;
}

.htb-lede {
	margin: 0;
	color: var(--htb-muted);
	font-size: 0.95em;
}

/* ---------------------------------------------------------------
   Layout
--------------------------------------------------------------- */

.htb-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 26px;
	align-items: start;
}

.htb-form {
	position: relative;
	padding: 34px 32px;
	background: #fff;
	border: 1px solid var(--htb-border);
	border-radius: var(--htb-radius);
	box-shadow: 0 18px 44px -30px rgba(var(--htb-primary-rgb), 0.55);
	animation: htbRiseIn 0.55s var(--htb-ease) 0.05s both;
}

.htb-form::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
	border-radius: var(--htb-radius) var(--htb-radius) 0 0;
	background: var(--htb-gradient-flat);
}

/* ---------------------------------------------------------------
   Notices
--------------------------------------------------------------- */

.htb-notice {
	border-radius: var(--htb-radius-sm);
	padding: 15px 19px;
	margin: 0 0 22px;
	font-size: 0.95em;
	animation: htbRiseIn 0.4s var(--htb-ease) both;
}

.htb-notice--error {
	background: #fdf2f1;
	border: 1px solid #f0c5c0;
	color: #8a2c2c;
}

.htb-notice ul {
	margin: 8px 0 0;
	padding-left: 18px;
}

/* ---------------------------------------------------------------
   Progress
--------------------------------------------------------------- */

.htb-progress {
	margin: 6px 0 26px;
}

.htb-progress__track {
	height: 4px;
	background: var(--htb-primary-soft);
	border-radius: 99px;
	overflow: hidden;
}

.htb-progress__bar {
	display: block;
	height: 100%;
	width: 33.33%;
	border-radius: 99px;
	background: var(--htb-gradient-flat);
	transition: width 0.5s var(--htb-ease);
}

.htb-progress__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
}

.htb-progress__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.82em;
	color: var(--htb-muted);
	cursor: default;
}

.htb-progress__item.is-done {
	cursor: pointer;
}

.htb-progress__dot {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--htb-primary-soft);
	color: var(--htb-primary);
	font-size: 0.8em;
	font-weight: 700;
	transition: background 0.3s var(--htb-ease), color 0.3s var(--htb-ease), transform 0.3s var(--htb-ease);
}

.htb-progress__item.is-active .htb-progress__dot {
	background: var(--htb-gradient-flat);
	color: #fff;
	transform: scale(1.12);
	animation: htbPulseRing 1.6s ease-out 1;
}

.htb-progress__item.is-done .htb-progress__dot {
	background: var(--htb-success);
	color: #fff;
}

.htb-progress__label {
	display: none;
}

@media (min-width: 640px) {
	.htb-progress__label {
		display: inline;
	}
}

.htb-progress__item.is-active .htb-progress__label {
	color: var(--htb-ink);
	font-weight: 600;
}

/* ---------------------------------------------------------------
   Steps
--------------------------------------------------------------- */

.htb-step {
	animation: htbSlideInRight 0.4s var(--htb-ease) both;
}

.htb-step.is-back {
	animation-name: htbRiseIn;
}

.htb-step__hint {
	margin: 0 0 18px;
	color: var(--htb-muted);
	font-size: 0.92em;
}

.htb-subtitle {
	margin: 22px 0 12px;
	font-size: 1.05em;
	font-weight: 700;
}

/* ---------------------------------------------------------------
   Tour picker cards
--------------------------------------------------------------- */

.htb-tour-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	margin: 0 0 24px;
}

.htb-tour-picker.htb-has-error {
	outline: 2px solid var(--htb-danger);
	outline-offset: 6px;
	border-radius: var(--htb-radius-sm);
}

.htb-tour-option {
	position: relative;
	display: block;
	padding: 16px 18px;
	border: 1.5px solid var(--htb-border);
	border-radius: var(--htb-radius-sm);
	cursor: pointer;
	background: #fff;
	transition: border-color 0.25s var(--htb-ease), box-shadow 0.25s var(--htb-ease), transform 0.25s var(--htb-ease);
	animation: htbRiseIn 0.4s var(--htb-ease) both;
	animation-delay: var(--htb-delay, 0ms);
}

.htb-tour-option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.htb-tour-option:hover {
	border-color: var(--htb-accent);
	transform: translateY(-2px);
}

.htb-tour-option.is-selected {
	border-color: var(--htb-primary);
	background: var(--htb-primary-tint);
	box-shadow: 0 10px 24px -16px rgba(var(--htb-primary-rgb), 0.6);
}

.htb-tour-option__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.htb-tour-option__name {
	font-weight: 700;
	font-size: 0.98em;
}

.htb-tour-option__meta {
	font-size: 0.82em;
	color: var(--htb-muted);
}

.htb-tour-option__price {
	margin-top: 6px;
	font-size: 1.05em;
	font-weight: 700;
	color: var(--htb-primary);
}

.htb-tour-option__price small {
	font-weight: 500;
	color: var(--htb-muted);
	font-size: 0.7em;
}

.htb-tour-option__check {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid var(--htb-border);
	background: #fff;
}

.htb-tour-option.is-selected .htb-tour-option__check {
	border-color: var(--htb-primary);
	background: var(--htb-gradient-flat);
}

.htb-tour-option.is-selected .htb-tour-option__check::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 6px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translateY(-1px) rotate(45deg);
	animation: htbPop 0.3s var(--htb-ease) both;
}

/* ---------------------------------------------------------------
   Booking type picker
--------------------------------------------------------------- */

.htb-type-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
	margin: 0 0 20px;
}

.htb-type-option {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 13px 14px;
	border: 1.5px solid var(--htb-border);
	border-radius: var(--htb-radius-sm);
	cursor: pointer;
	background: #fff;
	transition: border-color 0.25s var(--htb-ease), background 0.25s var(--htb-ease);
}

.htb-type-option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.htb-type-option:hover {
	border-color: var(--htb-accent);
}

.htb-type-option.is-selected {
	border-color: var(--htb-primary);
	background: var(--htb-primary-tint);
}

.htb-type-option__name {
	font-weight: 700;
	font-size: 0.92em;
}

.htb-type-option__hint {
	font-size: 0.78em;
	color: var(--htb-muted);
}

/* ---------------------------------------------------------------
   Party counters
--------------------------------------------------------------- */

.htb-party-counters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin: 0 0 20px;
	animation: htbRiseIn 0.35s var(--htb-ease) both;
}

.htb-field--counter label {
	display: block;
	margin: 0 0 6px;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--htb-muted);
}

.htb-counter {
	display: flex;
	align-items: center;
	border: 1.5px solid var(--htb-border);
	border-radius: var(--htb-radius-sm);
	overflow: hidden;
}

.htb-counter__btn {
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border: none;
	background: var(--htb-surface);
	color: var(--htb-primary);
	font-size: 1.2em;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s var(--htb-ease);
}

.htb-counter__btn:hover {
	background: var(--htb-primary-soft);
}

.htb-counter input {
	flex: 1 1 auto;
	width: 100%;
	height: 42px;
	border: none;
	text-align: center;
	font-weight: 700;
	-moz-appearance: textfield;
}

.htb-counter input::-webkit-outer-spin-button,
.htb-counter input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.htb-counter input:focus {
	outline: none;
}

/* ---------------------------------------------------------------
   Fields
--------------------------------------------------------------- */

.htb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
	margin: 0 0 6px;
}

.htb-field--wide {
	grid-column: 1 / -1;
}

.htb-field label {
	display: block;
	margin: 0 0 6px;
	font-size: 0.88em;
	font-weight: 600;
	color: var(--htb-ink);
}

.htb-req {
	color: var(--htb-danger);
	margin-left: 2px;
}

.htb-optional {
	margin-left: 6px;
	font-size: 0.78em;
	font-weight: 400;
	color: var(--htb-muted);
}

.htb-field input[type="text"],
.htb-field input[type="email"],
.htb-field input[type="tel"],
.htb-field input[type="date"],
.htb-field select,
.htb-field textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid var(--htb-border);
	border-radius: var(--htb-radius-sm);
	background: #fff;
	color: var(--htb-ink);
	font-size: 0.95em;
	transition: border-color 0.2s var(--htb-ease), box-shadow 0.2s var(--htb-ease);
}

.htb-field textarea {
	resize: vertical;
	min-height: 84px;
}

.htb-field input::placeholder,
.htb-field textarea::placeholder {
	color: #9fb0bf;
}

.htb-control {
	position: relative;
}

.htb-control::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--htb-muted);
	border-bottom: 2px solid var(--htb-muted);
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}

.htb-control select {
	appearance: none;
	padding-right: 34px;
}

.htb-field input:focus,
.htb-field select:focus,
.htb-field textarea:focus {
	outline: none;
	border-color: var(--htb-primary);
	box-shadow: 0 0 0 3px rgba(var(--htb-primary-rgb), 0.14);
}

.htb-field.htb-has-error input,
.htb-field.htb-has-error select,
.htb-field.htb-has-error textarea {
	border-color: var(--htb-danger);
}

.htb-field-error {
	display: block;
	margin-top: 5px;
	font-size: 0.78em;
	color: var(--htb-danger);
}

/* ---------------------------------------------------------------
   Phone fields
--------------------------------------------------------------- */

.htb-phone {
	display: flex;
	gap: 8px;
}

.htb-control--code {
	flex: 0 0 128px;
}

.htb-control--code select {
	width: 100%;
	padding: 11px 30px 11px 12px;
	border: 1.5px solid var(--htb-border);
	border-radius: var(--htb-radius-sm);
	background: #fff;
	appearance: none;
	font-size: 0.9em;
}

.htb-phone input {
	flex: 1 1 auto;
}

/* ---------------------------------------------------------------
   Hints
--------------------------------------------------------------- */

.htb-hint {
	margin: 10px 0 0;
	font-size: 0.82em;
	color: var(--htb-muted);
}

.htb-hint--center {
	text-align: center;
	margin-top: 18px;
}

/* ---------------------------------------------------------------
   Consent
--------------------------------------------------------------- */

.htb-consent {
	margin-top: 22px;
}

.htb-checkbox {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.htb-checkbox input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.htb-checkbox__box {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border: 1.5px solid var(--htb-border);
	border-radius: 5px;
	cursor: pointer;
	position: relative;
	transition: border-color 0.2s var(--htb-ease), background 0.2s var(--htb-ease);
}

.htb-checkbox input:checked + .htb-checkbox__box {
	background: var(--htb-gradient-flat);
	border-color: var(--htb-primary);
}

.htb-checkbox input:checked + .htb-checkbox__box::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 5px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translateY(-1px) rotate(45deg);
}

.htb-checkbox__text {
	font-size: 0.88em;
	color: var(--htb-muted);
}

.htb-terms-link {
	color: var(--htb-primary);
	font-weight: 600;
	text-decoration: none;
}

.htb-terms-link:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Review
--------------------------------------------------------------- */

.htb-review {
	margin-top: 22px;
	padding: 18px;
	border-radius: var(--htb-radius-sm);
	background: var(--htb-surface);
	border: 1px solid var(--htb-border);
}

.htb-review__list {
	margin: 0;
	display: grid;
	gap: 8px;
}

.htb-review__row {
	display: grid;
	grid-template-columns: 42% 1fr;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px dashed var(--htb-border);
	font-size: 0.86em;
	animation: htbRiseIn 0.3s var(--htb-ease) both;
}

.htb-review__row:last-child {
	border-bottom: none;
}

.htb-review__row dt {
	color: var(--htb-muted);
}

.htb-review__row dd {
	margin: 0;
	font-weight: 600;
	word-break: break-word;
}

/* ---------------------------------------------------------------
   Nav buttons
--------------------------------------------------------------- */

.htb-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
}

.htb-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: 99px;
	border: none;
	font-size: 0.95em;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s var(--htb-ease), box-shadow 0.2s var(--htb-ease);
}

.htb-btn[hidden] {
	display: none;
}

.htb-btn--next,
.htb-btn--submit {
	margin-left: auto;
	background: var(--htb-gradient-flat);
	color: #fff;
	box-shadow: 0 12px 26px -14px rgba(var(--htb-primary-rgb), 0.65);
}

.htb-btn--submit {
	min-width: 210px;
}

.htb-btn--next::after,
.htb-btn--submit::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
	transform: translateX(-120%) skewX(-18deg);
}

.htb-btn--next:hover::after,
.htb-btn--submit:hover::after {
	animation: htbSheen 0.8s ease;
}

.htb-btn--next:hover,
.htb-btn--submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -14px rgba(var(--htb-primary-rgb), 0.75);
}

.htb-btn--ghost {
	background: transparent;
	color: var(--htb-muted);
	border: 1.5px solid var(--htb-border);
}

.htb-btn--ghost:hover {
	border-color: var(--htb-primary);
	color: var(--htb-primary);
}

.htb-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
}

.htb-btn--submit.is-loading .htb-spinner {
	display: inline-block;
	animation: htbSpin 0.7s linear infinite;
}

.htb-btn--submit.is-loading {
	pointer-events: none;
	opacity: 0.85;
}

/* ---------------------------------------------------------------
   Summary sidebar
--------------------------------------------------------------- */

.htb-aside {
	position: sticky;
	top: 20px;
}

.htb-summary {
	padding: 24px;
	background: var(--htb-gradient-soft);
	border: 1px solid var(--htb-border);
	border-radius: var(--htb-radius);
	animation: htbRiseIn 0.55s var(--htb-ease) 0.1s both;
}

.htb-summary__label {
	display: block;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--htb-muted);
	margin-bottom: 6px;
}

.htb-summary__name {
	display: block;
	font-size: 1.15em;
	font-weight: 800;
	margin-bottom: 16px;
	line-height: 1.3;
}

.htb-summary__rows {
	margin: 0 0 16px;
	display: grid;
	gap: 10px;
}

.htb-summary__rows div {
	display: flex;
	justify-content: space-between;
	font-size: 0.86em;
}

.htb-summary__rows dt {
	color: var(--htb-muted);
}

.htb-summary__rows dd {
	margin: 0;
	font-weight: 600;
}

.htb-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 14px;
	border-top: 1.5px solid var(--htb-border);
	font-size: 1em;
}

.htb-summary__total strong {
	font-size: 1.35em;
	color: var(--htb-primary);
}

.htb-summary__total strong.is-bumping {
	animation: htbBump 0.35s var(--htb-ease);
}

.htb-summary__trust {
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.htb-summary__trust li {
	position: relative;
	padding-left: 22px;
	font-size: 0.8em;
	color: var(--htb-muted);
}

.htb-summary__trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--htb-success);
}

/* ---------------------------------------------------------------
   Book Now button (product pages)
--------------------------------------------------------------- */

.htb-book-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	padding: 13px 30px;
	border-radius: 99px;
	background: linear-gradient(135deg, #04547f 0%, #0d84b7 100%);
	color: #fff !important;
	font-weight: 700;
	font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
	text-decoration: none !important;
	box-shadow: 0 12px 26px -14px rgba(4, 84, 127, 0.65);
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.htb-book-btn::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
	transform: translateX(-120%) skewX(-18deg);
}

.htb-book-btn:hover::after {
	animation: htbSheen 0.8s ease;
}

.htb-book-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -14px rgba(4, 84, 127, 0.75);
	color: #fff !important;
}

/* ---------------------------------------------------------------
   Tour pricing cards ([hadaf_tour_cards])
--------------------------------------------------------------- */

.htb-cards {
	--htb-columns: 3;
}

.htb-cards__grid {
	display: grid;
	grid-template-columns: repeat(var(--htb-columns), minmax(0, 1fr));
	gap: 22px;
}

.htb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 26px 24px;
	background: #fff;
	border: 1px solid var(--htb-border, #c3d3de);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 40px -30px rgba(4, 84, 127, 0.5);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
	animation: htbRiseIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: var(--htb-delay, 0ms);
	font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.htb-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
	background: linear-gradient(90deg, #04547f 0%, #0d84b7 100%);
}

/* Gradient wash that sweeps up from the base of the card on hover. */
.htb-card::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 60%;
	background: linear-gradient(0deg, rgba(13, 132, 183, 0.14), transparent);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.htb-card:hover {
	transform: translateY(-6px);
	border-color: rgba(13, 132, 183, 0.55);
	box-shadow: 0 30px 54px -30px rgba(4, 84, 127, 0.75);
}

.htb-card:hover::after {
	opacity: 1;
}

.htb-card > * {
	position: relative;
	z-index: 1;
}

.htb-card__badge {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 4px 12px;
	border-radius: 99px;
	background: var(--htb-accent, #0d84b7);
	color: #fff;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.4px;
}

.htb-card__image {
	height: 140px;
	margin: -26px -24px 18px;
	border-radius: 16px 16px 0 0;
	background-size: cover;
	background-position: center;
}

.htb-card__title {
	margin: 0 0 10px;
	font-size: 1.15em;
	font-weight: 800;
	color: var(--htb-ink, #0f1c28);
}

.htb-card__rule {
	display: block;
	width: 44px;
	height: 3px;
	border-radius: 99px;
	background: linear-gradient(90deg, #04547f 0%, #0d84b7 100%);
	margin: 0 0 14px;
}

.htb-card__price {
	margin: 0 0 16px;
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.htb-card__amount {
	font-size: 1.7em;
	font-weight: 800;
	color: var(--htb-primary, #04547f);
}

.htb-card__currency {
	font-size: 0.85em;
	font-weight: 600;
	color: var(--htb-muted, #4c5f70);
}

.htb-card__per {
	margin-left: 4px;
	font-size: 0.75em;
	color: var(--htb-muted, #4c5f70);
}

.htb-card__list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
	font-size: 0.85em;
	color: var(--htb-ink, #0f1c28);
	flex-grow: 1;
}

.htb-card__list li strong {
	color: var(--htb-muted, #4c5f70);
	font-weight: 600;
	margin-right: 4px;
}

.htb-card__note {
	color: var(--htb-muted, #4c5f70);
	font-style: italic;
}

.htb-card__cta {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 99px;
	background: linear-gradient(90deg, #04547f 0%, #0d84b7 100%);
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 14px 26px -14px rgba(4, 84, 127, 0.75);
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s ease, filter 0.24s ease;
}

.htb-card__cta::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transform: translateX(-130%) skewX(-18deg);
}

.htb-card__cta:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
	box-shadow: 0 20px 34px -16px rgba(4, 84, 127, 0.85);
	color: #fff !important;
}

.htb-card__cta:hover::after {
	animation: htbSheen 0.75s ease;
}

.htb-card__tick {
	display: none;
}

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */

@media (max-width: 900px) {
	.htb-layout {
		grid-template-columns: 1fr;
	}

	.htb-aside {
		position: static;
		order: -1;
	}

	.htb-cards__grid {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}

@media (max-width: 560px) {
	.htb-form {
		padding: 24px 18px;
	}

	.htb-title {
		font-size: 1.5em;
	}

	.htb-grid,
	.htb-tour-picker,
	.htb-type-picker,
	.htb-party-counters {
		grid-template-columns: 1fr;
	}

	.htb-nav {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.htb-btn--next,
	.htb-btn--submit,
	.htb-btn--ghost {
		width: 100%;
		margin-left: 0;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.htb-wrap *,
	.htb-wrap *::before,
	.htb-wrap *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}