/* Ticket vouchers (11.0.0): the "Book with partner" button beside BOOK NOW, and the voucher booking page.
   Uses the same design tokens (--zbs-*) as the rest of the booking pages, so it follows Design → Appearance. */

/* ---- Button row on session cards ---- */
.zbs-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; align-items: stretch; }
.zbs-item .zbs-cta-row a.zbs-view-btn,
.zbs-item .zbs-cta-row .zbs-ops-cta {
	margin-top: 0; width: auto; flex: 1 1 96px; min-width: 0;
	display: flex; align-items: center; justify-content: center; white-space: nowrap;
	padding-left: 10px; padding-right: 10px;
}
.zbs-ticket-btn {
	box-sizing: border-box; flex: 2 1 170px; min-width: 0; white-space: nowrap;
	display: flex; align-items: center; justify-content: center; text-align: center;
	padding: 13px 12px; margin: 0;
	font-family: var(--zbs-font-body); font-weight: 700; font-size: 14px; line-height: 1.2;
	letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
	/* Same shape and weight as BOOK NOW, in the partner colour set under Ticket vouchers → Page & button. */
	background: var(--zbs-tk-bg, #53A318); color: var(--zbs-tk-fg, #ffffff);
	border: 2px solid transparent; border-radius: 0;
	clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
	cursor: pointer; transition: filter .2s ease, transform .2s ease;
}
a.zbs-ticket-btn:hover, a.zbs-ticket-btn:focus-visible { filter: brightness(1.12); transform: translateX(3px); color: var(--zbs-tk-fg, #ffffff); text-decoration: none; outline: none; }
.zbs-ticket-btn.is-disabled { background: #3a3a32; color: #8a8a80; cursor: not-allowed; filter: none; transform: none; }
.zbs-detail .zbs-ticket-btn { flex: none; width: 100%; margin-top: 12px; }

/* ---- Voucher booking page ---- */
.zbs-ticket-page { max-width: 680px; margin: 24px auto 64px; }
.zbs-tk-card {
	position: relative; overflow: hidden;
	background: var(--zbs-bg); color: var(--zbs-text);
	border: 1px solid var(--zbs-border); border-radius: var(--zbs-card-radius); padding: 28px;
}
.zbs-tk-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--zbs-gold-dark), var(--zbs-gold-light), var(--zbs-gold-dark)); }
.zbs-tk-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; padding: 4px 0 18px; margin-bottom: 20px; border-bottom: 1px solid var(--zbs-border); }
.zbs-tk-logo { display: block; height: 44px; width: auto; max-width: 180px; object-fit: contain; }
.zbs-tk-title { margin: 0 0 8px; font-family: var(--zbs-font-heading); font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--zbs-text); text-align: center; }
.zbs-tk-intro { margin: 0 auto 22px; max-width: 480px; text-align: center; color: var(--zbs-muted); font-size: 15px; line-height: 1.6; }
.zbs-tk-muted { color: var(--zbs-muted); }

.zbs-tk-session { background: var(--zbs-bg-alt); border: 1px solid var(--zbs-border); border-radius: 10px; padding: 16px 18px; margin-bottom: 22px; }
.zbs-tk-session-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; font-size: 17px; }
.zbs-tk-chip { background: var(--zbs-gold); color: #141310; font-family: var(--zbs-font-heading); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.zbs-tk-session-line { font-size: 14px; line-height: 1.5; }
.zbs-tk-includes { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--zbs-border); display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; font-weight: 600; }
.zbs-tk-includes li::before { content: "✓"; color: var(--zbs-gold); margin-right: 8px; font-weight: 800; }

.zbs-tk-form { display: block; }
.zbs-tk-field { margin-bottom: 16px; }
.zbs-tk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.zbs-tk-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--zbs-gold-light); }
.zbs-tk-field input {
	all: unset; box-sizing: border-box; display: block; width: 100%;
	background: var(--zbs-bg-alt); color: var(--zbs-text);
	border: 1px solid var(--zbs-border); border-radius: 8px; padding: 13px 14px;
	font-family: var(--zbs-font-body); font-size: 16px; line-height: 1.3;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.zbs-tk-field input::placeholder { color: var(--zbs-muted); opacity: .7; }
.zbs-tk-field input:focus { border-color: var(--zbs-gold); box-shadow: 0 0 0 3px rgba(212, 160, 23, .18); }
.zbs-tk-field input#zbs-tk-code { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.zbs-tk-field input#zbs-tk-code::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; }
.zbs-tk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.zbs-tk-error { display: none; margin: 0 0 14px; padding: 11px 14px; border: 1px solid var(--zbs-danger); border-radius: 8px; background: rgba(224, 104, 92, .08); color: var(--zbs-danger); font-size: 14px; line-height: 1.5; }
.zbs-tk-submit {
	all: unset; box-sizing: border-box; display: block; width: 100%; text-align: center; cursor: pointer;
	background: var(--zbs-gold); color: #0d0d0b; border: 2px solid transparent; padding: 15px 18px;
	font-family: var(--zbs-font-body); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
	clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
	transition: background .2s ease, transform .15s ease;
}
.zbs-tk-submit:hover:not([disabled]) { background: var(--zbs-gold-light); }
.zbs-tk-submit:focus-visible { outline: 2px solid var(--zbs-gold-light); outline-offset: 2px; }
.zbs-tk-submit[disabled] { background: #3a3a32; color: #8a8a80; cursor: wait; }
.zbs-tk-fine { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--zbs-muted); }

.zbs-tk-notice { padding: 14px 16px; border-radius: 10px; font-size: 15px; line-height: 1.55; }
.zbs-tk-notice-warn { border: 1px solid var(--zbs-gold-dark); background: rgba(212, 160, 23, .08); color: var(--zbs-text); }

.zbs-tk-success { text-align: center; padding: 6px 0 2px; }
.zbs-tk-tick { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--zbs-gold); color: #141310; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; }
.zbs-tk-success h3 { margin: 0 0 8px; font-family: var(--zbs-font-heading); font-size: 24px; color: var(--zbs-text); }
.zbs-tk-success-line { margin: 0 0 16px; font-size: 15px; line-height: 1.6; }
.zbs-tk-ref { display: inline-block; margin-bottom: 14px; padding: 12px 20px; border: 1px dashed var(--zbs-gold); border-radius: 10px; background: var(--zbs-bg-alt); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--zbs-muted); }
.zbs-tk-ref strong { display: block; margin-top: 2px; font-family: var(--zbs-font-heading); font-size: 26px; letter-spacing: .02em; color: var(--zbs-gold-light); text-transform: none; }
.zbs-tk-form[hidden], .zbs-tk-success[hidden] { display: none !important; }

.zbs-tk-promo {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	margin-top: 18px; padding: 18px 22px;
	background: var(--zbs-bg-alt); border: 1px dashed var(--zbs-gold); border-radius: var(--zbs-card-radius); color: var(--zbs-text);
}
.zbs-tk-promo strong { display: block; font-family: var(--zbs-font-heading); font-size: 17px; color: var(--zbs-text); }
.zbs-tk-promo span { display: block; margin-top: 2px; font-size: 14px; color: var(--zbs-muted); }
a.zbs-tk-promo-btn {
	flex: none; text-decoration: none; padding: 12px 22px; font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
	background: var(--zbs-tk-bg, #53A318); color: var(--zbs-tk-fg, #ffffff); border: 2px solid transparent;
	clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%); transition: filter .2s ease, transform .2s ease;
}
a.zbs-tk-promo-btn:hover, a.zbs-tk-promo-btn:focus-visible { filter: brightness(1.12); transform: translateX(3px); color: var(--zbs-tk-fg, #ffffff); outline: none; }
.zbs-tk-links { margin: 16px 0 0; text-align: center; font-size: 14px; }
.zbs-tk-links a { color: var(--zbs-muted); text-decoration: underline; text-underline-offset: 3px; }
.zbs-tk-links a:hover { color: var(--zbs-gold-light); }

@media (max-width: 560px) {
	.zbs-tk-card { padding: 22px 18px; }
	.zbs-tk-row { grid-template-columns: 1fr; }
	.zbs-tk-title { font-size: 22px; }
	.zbs-tk-logo { height: 36px; }
	.zbs-tk-promo { flex-direction: column; align-items: stretch; text-align: center; }
}