/* SHT Ride Calculator */
.shtrc { --rc-blue: #2235DD; --rc-blue2: #6672d3; --rc-dark: #131739; --rc-line: #E4E7FD; --rc-soft: #f0f1fd; --rc-green: #17803d;
	max-width: 760px; margin: 2em auto; font-family: 'Open Sans', sans-serif; color: var(--rc-dark); scroll-margin-top: 120px; }
.shtrc *, .shtrc *::before, .shtrc *::after { box-sizing: border-box; }
.shtrc [hidden] { display: none !important; }
.shtrc__card { background: #fff; border: 1px solid var(--rc-line); border-radius: 14px; padding: 26px; box-shadow: 0 6px 24px rgba(19,23,57,.06); margin-bottom: 18px; scroll-margin-top: 120px; }
.shtrc__title { margin: 0 0 4px; font-size: 1.55rem; }
.shtrc__sub { margin: 0 0 18px; color: #555; }

.shtrc__route { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 10px; align-items: end; }
.shtrc__swap { height: 44px; width: 44px; margin-bottom: 14px; border: 1px solid #cfd3ef; border-radius: 50%; background: #fff; font-size: 1.2rem; cursor: pointer; color: var(--rc-blue); }
.shtrc__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.shtrc__chips button { border: 1px solid var(--rc-line); background: var(--rc-soft); color: var(--rc-dark); border-radius: 20px; padding: 6px 12px; font-size: .8rem; cursor: pointer; }
.shtrc__chips button:hover { border-color: var(--rc-blue); }

.shtrc__field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; font-size: .88rem; font-weight: 600; min-width: 0; }
.shtrc__field small { font-weight: 400; color: #777; }
.shtrc__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 0 12px; }
.shtrc input[type=text], .shtrc input[type=email], .shtrc input[type=tel], .shtrc input[type=date], .shtrc input[type=time], .shtrc select, .shtrc textarea {
	display: block; width: 100% !important; max-width: 100%; min-width: 0; min-height: 44px; margin: 0 !important; padding: 10px 12px;
	border: 1px solid #cfd3ef; border-radius: 8px; font: inherit; font-size: 16px; font-weight: 400; background: #fff; color: inherit; }
.shtrc input:focus, .shtrc select:focus, .shtrc textarea:focus { outline: none; border-color: var(--rc-blue); box-shadow: 0 0 0 3px rgba(34,53,221,.15); }
.shtrc__phone { display: grid; grid-template-columns: minmax(90px,110px) minmax(0,1fr); gap: 6px; }

.shtrc__vehicles, .shtrc__yn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.shtrc__yn { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }
.shtrc__vehicles label, .shtrc__yn label { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 2px solid var(--rc-line); border-radius: 10px; cursor: pointer; min-height: 44px; justify-content: center; }
.shtrc__yn label { text-align: center; font-weight: 600; font-size: .9rem; padding: 6px; }
.shtrc__vehicles small, .shtrc__yn small { font-weight: 400; color: #666; font-size: .78rem; }
.shtrc__vehicles label.is-active, .shtrc__yn label.is-active { border-color: var(--rc-blue); background: var(--rc-soft); }
.shtrc__vehicles input, .shtrc__yn input { position: absolute; opacity: 0; pointer-events: none; }

.shtrc .shtrc__btn { display: block; width: 100%; padding: 15px 20px; border: 0; border-radius: 30px; background: var(--rc-blue); color: #fff !important;
	font: 600 1rem 'DM Sans', sans-serif; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; }
.shtrc .shtrc__btn:hover { background: var(--rc-blue2); }
.shtrc .shtrc__btn:disabled { opacity: .6; cursor: wait; }
.shtrc .shtrc__btn--book { margin-top: 16px; }
.shtrc__msg { margin: 12px 0 0; padding: 10px 14px; border-radius: 8px; background: #fdecec; color: #a01616; font-size: .9rem; }

.shtrc__result { margin-top: 20px; }
.shtrc__stats, .shtrc__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.shtrc__stats > div, .shtrc__prices > div { background: var(--rc-soft); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; }
.shtrc__stats span, .shtrc__prices span { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: #666; }
.shtrc__stats strong { font-size: 1.25rem; }
.shtrc__meter s { font-size: 1.3rem; color: #888; }
.shtrc__prices .shtrc__ours { background: var(--rc-dark); }
.shtrc__ours span { color: #c9cbe0; }
.shtrc__ours strong { font-size: 1.6rem; color: #f3c46b; }
.shtrc__parts { border: 1px solid var(--rc-line); border-radius: 10px; padding: 4px 14px; }
.shtrc__part { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--rc-line); font-size: .9rem; }
.shtrc__part:last-child { border-bottom: 0; }
.shtrc__part em { font-style: normal; color: var(--rc-green); font-weight: 700; font-size: .8rem; }
.shtrc__save { margin: 10px 0 0; color: var(--rc-green); font-weight: 700; }
.shtrc__note, .shtrc__hint { font-size: .8rem; color: #777; margin: 8px 0 12px; }

.shtrc__summary { background: var(--rc-soft); border-radius: 12px; padding: 10px 16px; margin-bottom: 16px; }
.shtrc__ride { padding: 8px 0; }
.shtrc__ride + .shtrc__ride { border-top: 1px solid #cfd3ef; }
.shtrc__ride p { margin: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; color: #555; }
.shtrc__ride div { display: flex; justify-content: space-between; gap: 12px; }
.shtrc__ride span { font-size: .9rem; }
.shtrc__ride small { display: block; color: #666; }
.shtrc__ride b { font-size: 1.35rem; color: var(--rc-blue); white-space: nowrap; }
.shtrc__ride em { font-style: normal; font-size: .78rem; color: var(--rc-green); }

.shtrc__check { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; margin: 6px 0 16px; }
.shtrc__check input { margin-top: 4px; }
.shtrc__check--box { background: var(--rc-soft); border-radius: 10px; padding: 12px 14px; }
.shtrc__notice { background: #eefbf3; border-left: 4px solid #25d366; border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; font-size: .86rem; }
.shtrc__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.shtrc__done { text-align: center; }
.shtrc__done h3 { color: var(--rc-blue); }
.pac-container { z-index: 100000; }

@media (max-width: 600px) {
	.shtrc__card { padding: 20px 16px; }
	.shtrc__route { grid-template-columns: 1fr; gap: 0; }
	.shtrc__swap { justify-self: center; margin: -6px 0 6px; transform: none; }
}

/* v1.1.0: intro boven de calculator */
.shtrc__intro { margin: 0 0 22px; color: #131739; }
.shtrc__intro h3 { margin: 0 0 12px; font-size: 1.3rem; }
.shtrc__howto { list-style: none; counter-reset: s; padding: 0; margin: 0 0 22px; }
.shtrc__howto li { counter-increment: s; position: relative; padding: 0 0 12px 42px; line-height: 1.5; }
.shtrc__howto li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: #2235DD; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.shtrc__why { list-style: none; padding: 16px 18px; margin: 0 0 18px; background: #f0f1fd; border-radius: 12px; }
.shtrc__why li { padding: 6px 0 6px 28px; position: relative; line-height: 1.45; }
.shtrc__why li::before { content: "✓"; position: absolute; left: 0; color: #17803d; font-weight: 700; }
.shtrc__introcta { text-align: center; font-weight: 700; font-size: 1.1rem; color: #2235DD; margin: 0; }
/* iOS: geen inzoomen bij aantikken */
.shtrc input, .shtrc select, .shtrc textarea { font-size: 16px !important; }