/* Book the Van: the steps on the Van Visits page. Uses the theme's colour
   tokens where it has them, with the same values as fallbacks. */

.tp-vb { max-width: 760px; margin: 24px 0; color: var(--tp-offwhite, #F4F5F7); }
.tp-vb__step { background: var(--tp-gunmetal, #2B2E33); border: 1px solid var(--tp-border, #3A3E45); border-radius: 8px; padding: 20px; margin: 0 0 16px; }
.tp-vb h3 { margin: 0 0 14px; font-family: var(--tp-head, sans-serif); font-size: 20px; }
.tp-vb__field { display: block; margin: 0 0 14px; }
.tp-vb__label { display: block; font-weight: 600; margin: 0 0 4px; }
.tp-vb__hint { display: block; font-size: 13px; color: var(--tp-muted, #9AA1AB); margin-top: 4px; }
.tp-vb input[type="text"], .tp-vb input[type="email"], .tp-vb input[type="tel"], .tp-vb textarea, .tp-vb select {
	width: 100%; max-width: 480px; padding: 10px 12px; font-size: 16px; border-radius: 6px;
	background: #fff; color: var(--tp-ink, #1A1A1A); -webkit-text-fill-color: var(--tp-ink, #1A1A1A); border: 2px solid var(--tp-border, #3A3E45);
}
.tp-vb input:focus, .tp-vb textarea:focus, .tp-vb select:focus { outline: none; border-color: var(--tp-orange, #F5A623); }
.tp-vb__types { display: grid; gap: 8px; margin: 0 0 14px; }
.tp-vb__type { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--tp-border, #3A3E45); border-radius: 6px; cursor: pointer; }
.tp-vb__type input { margin-top: 4px; }
.tp-vb__type span { display: flex; flex-direction: column; gap: 2px; }
.tp-vb__type span span { font-size: 14px; color: var(--tp-muted, #9AA1AB); }
.tp-vb__btn { display: inline-block; margin: 6px 8px 0 0; padding: 11px 20px; border: 0; border-radius: 6px; background: var(--tp-orange, #F5A623); color: var(--tp-ink, #1A1A1A); font-family: var(--tp-head, sans-serif); font-weight: 700; font-size: 15px; text-transform: uppercase; cursor: pointer; }
.tp-vb__btn:hover { background: var(--tp-orange-dark, #D98E12); }
.tp-vb__btn:disabled { opacity: .6; cursor: wait; }
.tp-vb__btn--quiet { background: transparent; color: var(--tp-offwhite, #F4F5F7); border: 1px solid var(--tp-border, #3A3E45); }
.tp-vb__btn--quiet:hover { background: var(--tp-charcoal, #1E2126); }
.tp-vb__days, .tp-vb__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 0 0 16px; }
.tp-vb__day, .tp-vb__slot { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--tp-border, #3A3E45); background: var(--tp-charcoal, #1E2126); color: var(--tp-offwhite, #F4F5F7); cursor: pointer; }
.tp-vb__day span, .tp-vb__slot span { font-size: 13px; color: var(--tp-muted, #9AA1AB); }
.tp-vb__day:hover, .tp-vb__slot:hover, .tp-vb__day.is-picked, .tp-vb__slot.is-picked { border-color: var(--tp-orange, #F5A623); }
.tp-vb__day.is-picked, .tp-vb__slot.is-picked { box-shadow: inset 0 0 0 1px var(--tp-orange, #F5A623); }
.tp-vb__msg { padding: 10px 12px; border-radius: 6px; margin: 8px 0; }
.tp-vb__msg--error { background: #4A1F22; color: #FFD7D9; }
.tp-vb__msg--ok { background: #16391F; color: #CFF5DA; }
.tp-vb__loading { color: var(--tp-muted, #9AA1AB); }
.tp-vb__summary { white-space: pre-wrap; font: inherit; background: var(--tp-charcoal, #1E2126); padding: 12px; border-radius: 6px; margin: 0 0 12px; }
.tp-vb__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }