/* Schiphol Hotel Taxi Calculator – Joy Hotel */
.sht-calc {
	--shtj-blue: #2235DD;
	--shtj-dark: #131739;
	--shtj-light: #f0f1fd;
	--shtj-green: #1a8f4a;
	max-width: 720px;
	margin: 40px auto;
	padding: 28px;
	background: #fff;
	border: 1px solid #E4E7FD;
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(19, 23, 57, .08);
	color: var(--shtj-dark);
	box-sizing: border-box;
}
.sht-calc *, .sht-calc *::before, .sht-calc *::after { box-sizing: border-box; }

.sht-calc__header { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.sht-calc__logo { max-width: 110px; height: auto; }
.sht-calc__heading h3 { margin: 0 0 6px; font-size: 26px; }
.sht-calc__route { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sht-calc__pin { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sht-calc__pin--from { background: var(--shtj-blue); }
.sht-calc__pin--to { background: #ed0606; }
.sht-calc__arrow { margin: 0 4px; color: #6672d3; }

.sht-calc__vehicle-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.sht-calc .sht-calc__vehicle {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 14px 10px; border: 2px solid #E4E7FD; border-radius: 10px;
	background: var(--shtj-light); color: var(--shtj-dark);
	font-weight: 700; font-size: 16px; text-transform: none; cursor: pointer;
	transition: border-color .15s, background .15s;
}
.sht-calc .sht-calc__vehicle span { font-weight: 400; font-size: 13px; opacity: .75; }
.sht-calc .sht-calc__vehicle:hover { border-color: #6672d3; background: var(--shtj-light); color: var(--shtj-dark); }
.sht-calc .sht-calc__vehicle.is-active { border-color: var(--shtj-blue); background: #fff; color: var(--shtj-dark); }

.sht-calc .sht-calc__cta {
	width: 100%; padding: 16px; border: 0; border-radius: 10px;
	background: var(--shtj-blue); color: #fff; font-size: 16px; font-weight: 700;
	text-transform: none; cursor: pointer;
}
.sht-calc .sht-calc__cta:hover { background: #6672d3; color: #fff; }
.sht-calc .sht-calc__cta:disabled { opacity: .7; cursor: wait; }

.sht-calc__result { margin-top: 22px; }
.sht-calc__result[hidden], .sht-calc__error[hidden] { display: none; }
.sht-calc__result-grid, .sht-calc__price-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.sht-calc__result-grid > div, .sht-calc__price-box {
	padding: 14px; border-radius: 10px; background: var(--shtj-light);
	display: flex; flex-direction: column; gap: 4px;
}
.sht-calc__price-box--fixed { background: #e8f6ee; border: 2px solid var(--shtj-green); }
.sht-calc__label { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; opacity: .7; }
.sht-calc__value { font-size: 20px; font-weight: 700; }
.sht-calc__value--price { font-size: 26px; }
.sht-calc__value--fixed { font-size: 26px; color: var(--shtj-green); }

.sht-calc__breakdown { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.sht-calc__breakdown li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed #E4E7FD; }
.sht-calc__breakdown li.sht-calc__saving { font-weight: 700; color: var(--shtj-green); border-bottom: 0; }
.sht-calc__disclaimer { font-size: 12px; opacity: .7; margin: 14px 0 0; line-height: 1.5; }
.sht-calc__error { margin-top: 16px; padding: 12px; border-radius: 8px; background: #fdecec; color: #a11; font-size: 14px; }

.sht-calc-marketing { max-width: 720px; margin: 0 auto 40px; }
.sht-calc-marketing__heading { font-size: 28px; }

@media (max-width: 544px) {
	.sht-calc { padding: 18px; margin: 24px 16px; }
	.sht-calc__price-compare, .sht-calc__result-grid { grid-template-columns: 1fr; }
	.sht-calc-marketing { padding: 0 16px; }
}