/**
 * Thank-you page (Gutenberg mode): layout only. Scoped under .wi-ty-gb.
 */

.wi-ty-gb {
	box-sizing: border-box;
}

.wi-ty-gb *,
.wi-ty-gb *::before,
.wi-ty-gb *::after {
	box-sizing: inherit;
}

.wi-ty-gb__shell {
	background-color: #f1f1f1;
	min-height: 50vh;
}

.wi-ty-gb__inner {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.wi-ty-gb__headline-area {
	background-color: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.wi-ty-gb__headline-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.wi-ty-gb__icon {
	flex-shrink: 0;
	line-height: 1;
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.2em;
	color: var(--wi-cta-bg, var(--wi-fse-cta-fill, var(--wp--preset--color--primary, #32373c)));
}

.wi-ty-gb__check-icon {
	color: var(--wi-cta-bg, var(--wi-fse-cta-fill, var(--wp--preset--color--primary, #32373c)));
	font-size: 3rem !important;
	line-height: 1 !important;
}

/* Inline SVG mark (ty-check-mark-icon.php) — no Font Awesome dependency */
.wi-ty-gb__icon .wi-ty-success-check {
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.wi-ty-gb__icon .wi-ty-success-check svg {
	width: 3rem;
	height: 3rem;
	max-width: 100%;
	display: block;
}

.wi-ty-gb__headline-copy {
	/* One line per headline/subhead: as wide as copy needs; row scrolls on narrow viewports. */
	flex: 0 0 auto;
	min-width: min-content;
	max-width: none !important;
	width: max-content;
	font-size: 1.125rem;
	line-height: 1.35;
	font-weight: 600;
	color: var(--wi-text-color, var(--wi-fse-body-text, var(--wp--preset--color--contrast, #1d2327)));
	text-align: center;
}

.wi-ty-gb__headline-copy .optinHeadline1,
.wi-ty-gb__headline-copy .wiOptinHeadline1 {
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
	white-space: nowrap !important;
	width: max-content;
	max-width: none !important;
	color: inherit;
}

.wi-ty-gb__headline-copy .optinHeadline2,
.wi-ty-gb__headline-copy .wiOptinHeadline2 {
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--wi-text-color, var(--wi-fse-body-text, var(--wp--preset--color--contrast, #1d2327)));
	margin: 0.35rem 0 0;
	white-space: nowrap !important;
	width: max-content;
	max-width: none !important;
	opacity: 0.88;
}

/*
 * Native / hybrid TY: ty-headline.php prints .tyHeadlineContainer (not inside .wi-ty-gb__headline-copy).
 * Block themes often constrain content width — force one line per string + horizontal scroll when needed.
 */
body.wi-ty-gb-page .wi-sc-hosted .tyHeadlineContainer,
body.wi-ty-gb-page .thankyou-page-container .tyHeadlineContainer {
	max-width: none !important;
	width: 100%;
	min-width: min-content;
	box-sizing: border-box;
}

body.wi-ty-gb-page .thankyou-page-container .wi-sc-hosted,
body.wi-ty-gb-page .entry-content .wi-sc-hosted {
	overflow-x: auto;
	overflow-y: visible;
	max-width: 100%;
}

body.wi-ty-gb-page .tyHeadlineContainer .tyHeadlineCopy {
	max-width: none !important;
	width: max-content;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

body.wi-ty-gb-page .tyHeadlineContainer .tyHeadlineLeadRow {
	align-items: flex-start;
}

body.wi-ty-gb-page .tyHeadlineContainer .tyHeadlineLeadRow .tyHeadlineTextStack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	min-width: min-content;
	flex: 0 0 auto;
}

body.wi-ty-gb-page .tyHeadlineContainer .tyHeadlineLeadRow .tyHeadlineIcon {
	color: var(--wi-cta-bg, var(--wi-fse-cta-fill, var(--wp--preset--color--primary, #32373c)));
	margin-top: 0.2em;
}

body.wi-ty-gb-page .tyHeadlineContainer .tyHeadlineLeadRow .tyHeadlineTextStack .optinHeadline1,
body.wi-ty-gb-page .tyHeadlineContainer .tyHeadlineLeadRow .tyHeadlineTextStack .wiOptinHeadline1 {
	white-space: nowrap !important;
	min-width: min-content !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
	color: var(--wi-text-color, var(--wi-fse-body-text, var(--wp--preset--color--contrast, #1d2327)));
	margin: 0 !important;
}

body.wi-ty-gb-page .tyHeadlineContainer .tyHeadlineLeadRow .tyHeadlineTextStack .optinHeadline2,
body.wi-ty-gb-page .tyHeadlineContainer .tyHeadlineLeadRow .tyHeadlineTextStack .wiOptinHeadline2 {
	white-space: nowrap !important;
	min-width: min-content !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
	color: var(--wi-text-color, var(--wi-fse-body-text, var(--wp--preset--color--contrast, #1d2327)));
	opacity: 0.88;
	font-weight: 400;
	margin: 0 !important;
}

/* No top padding: avoids gray shell gap between headline strip and white card */
.wi-ty-gb__main {
	padding-top: 0;
	padding-bottom: 2.5rem;
}

.wi-ty-gb__card {
	position: relative;
	overflow: hidden;
	background-color: #fff;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	padding: 1.25rem;
}

/* Match legacy cpWrapper thank-you card: green accent bar at top */
body.wi-ty-gb-page .wi-ty-gb__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #1b5e20 0%, #43a047 38%, #66bb6a 62%, #1b5e20 100%);
	opacity: 0.95;
	pointer-events: none;
}

/**
 * Two columns: flex + BFC so floated ticket partials (.ticketInfoIcon / .ticketInfoCopy)
 * do not collapse column height (which broke grid and dropped the right column below).
 */
body.wi-ty-gb-page .wi-ty-gb__card > .wi-ty-gb__grid {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 1.5rem;
	width: 100%;
	align-items: stretch;
}

body.wi-ty-gb-page .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--left,
body.wi-ty-gb-page .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--right {
	min-width: 0;
}

body.wi-ty-gb-page .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--left {
	overflow-x: hidden;
	overflow-y: visible;
}

body.wi-ty-gb-page .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--right {
	overflow: hidden;
}

/* Right column: top padding unless column contains video/iframe CTA */
body.wi-ty-gb-page .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--right {
	padding-top: 2rem;
}

body.wi-ty-gb-page .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--right:has(iframe),
body.wi-ty-gb-page .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--right:has(video),
body.wi-ty-gb-page .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--right:has(#wi_ctaVideo) {
	padding-top: 0;
	/* MP4 TY CTA: avoid clipping stacked player + message + calendar (overflow:hidden + tall inner). */
	overflow: visible;
}

body.wi-ty-gb-page .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--right:not(:has(iframe)):not(:has(video)) .ctaArea:not(.video),
body.wi-ty-gb-page .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--right.wi-ty-gb__col--no-cta-video .ctaArea:not(.video) {
	padding-top: 0 !important;
}

/* cp.css fixes .ticketInfoCopy width (~320px); allow shrink inside narrow column */
body.wi-ty-gb-page .wi-ty-gb__col--left .ticketInfoCopy,
body.wi-ty-gb-page .wi-ty-gb__col--left .ticketInfoCopy2 {
	width: auto;
	max-width: 100%;
}

.wi-ty-gb__stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.wi-ty-gb__ticket-info {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.wi-ty-gb__ticket-info-new {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* cp.css .ticketWrapper padding/border skews column alignment — strip outer box in Gutenberg TY */
body.wi-ty-gb-page .wi-ty-gb__col--left .ticketWrapper {
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	align-items: stretch;
	width: 100%;
}

body.wi-ty-gb-page .wi-ty-gb__col--left .wi-ty-gb__stack > .eventDate.ticketSectionNew.ts:first-child,
body.wi-ty-gb-page .wi-ty-gb__col--left .wi-ty-gb__stack > .ticketSection.ticketSectionNew.ts:first-child,
body.wi-ty-gb-page .wi-ty-gb__col--left .wi-ty-gb__stack > .ticketSection.ticketSectionNew.ts:first-child + .eventDate.ticketSectionNew.ts {
	margin-top: 0;
}

/*
 * TY countdown (FSE): .wi-fse-primary-cta uses inline-flex → shrink-wraps to countdown width
 * and visually breaks past ticket cards. Force full column width + flexible countdown grid.
 */
body.wi-ty-gb-page .wi-ty-gb__col--left .tyCountdown,
body.wi-ty-gb-page .wi-ty-gb__col--left .ticketCDArea {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	align-self: stretch;
}

/* Same horizontal inset as sibling .ticketSection.ticketSectionNew.ts cards (countdown lacked .ts before). */
body.wi-ty-gb-page .wi-ty-gb__col--left .tyCountdown.ticketSection.ticketSectionNew.ts {
	margin-left: 0;
	margin-right: 0;
}

/* Live-join CTA only (hidden until countdown ends); full column width, theme FSE button from webinar-modern.css */
body.wi-ty-gb-page .wi-ty-gb__col--left a.ticketCDAreaBTN.wi-fse-primary-cta.wi-ty-live-join-btn:not(.wi-ty-live-join-hidden) {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: 100%;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* Until countdown reaches zero, keep join CTA hidden (must beat :not() rule above + theme flex). */
body.wi-ty-gb-page .wi-ty-gb__col--left a.wi-ty-live-join-btn.wi-ty-live-join-hidden,
body.wi-ty-gb-page .ticketCDArea a.wi-ty-live-join-btn.wi-ty-live-join-hidden,
body.wi-ty-gb-page .tyCountdown a.wi-ty-live-join-btn.wi-ty-live-join-hidden {
  display: none !important;
}

/* Countdown phase: card-style panel only (no button / no arrow strip) */
body.wi-ty-gb-page .wi-ty-gb__col--left .wi-ty-countdown-panel {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 0;
	text-align: center;
	border-radius: 0;
	border: none;
	box-shadow: none;
	background: transparent none !important;
	background-color: transparent !important;
}

body.wi-ty-gb-page .wi-ty-gb__col--left .ticketCDArea.ticketSection:has(.wi-ty-countdown-panel) {
	background: transparent none !important;
	background-color: transparent !important;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px !important;
	border-radius: 12px;
	padding: 20px 10px !important;
}
body.wi-ty-gb-page .wi-ty-gb__col--left .wi-ty-countdown-headline {
	margin: 0 0 0.65rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center !important;
}

body.wi-ty-gb-page .wi-ty-gb__col--left .wi-ty-countdown-panel #defaultCountdown,
body.wi-ty-gb-page .wi-ty-gb__col--left .wi-ty-countdown-panel .hasCountdown {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

body.wi-ty-gb-page .wi-ty-gb__col--left .tyCountdown.ticketSection,
body.wi-ty-gb-page .wi-ty-gb__col--left .ticketCDArea.ticketSection {
	max-width: 100%;
}

/* URL block: match ticket row width (avoid shrink-wrap / legacy max-width). */
body.wi-ty-gb-page .wi-ty-gb__col--left .ticketInfo {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}
body.wi-ty-gb-page .wi-ty-gb__col--left .webinarURLArea,
body.wi-ty-gb-page .wi-ty-gb__col--left .webinarURLArea .wiFormGroup-lg {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}
body.wi-ty-gb-page .wi-ty-gb__col--left .webinarURLArea #webbyURL {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Tighter gap: video bottom → “Looking forward…” */
body.wi-ty-gb-page .wi-ty-gb__col--right .ctaArea.video #wi_ctaVideo {
	margin-bottom: 0;
}
body.wi-ty-gb-page .wi-ty-gb__col--right .ctaArea.video .wi_ty_cta_message_below {
	margin-top: 0.25rem;
	padding-top: 0.5rem;
}
body.wi-ty-gb-page .wi-ty-gb__col--right .ctaArea.video {
	padding-bottom: 0.35rem;
}

/*
 * #A102 — TY countdown one row; #A107 — CSS Grid; #A111/#A111b/#A125 — tile height + Zahl↔Label (flex-start, no min-height stretch).
 */
body.wi-ty-gb-page .wi-ty-gb__col--left .countdown_row {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-template-rows: auto;
	gap: 0.35rem;
	width: 100%;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	align-items: stretch;
}

body.wi-ty-gb-page .wi-ty-gb__col--left .countdown_row .countdown_section {
	min-width: 0 !important;
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	/* #A125: fixed tile height + center stack; descr negative margin pulls label to digit. */
	justify-content: center !important;
	align-items: center;
	align-content: center;
	gap: 0;
	min-height: clamp(2.75rem, 7.5vmin, 4.1rem) !important;
	align-self: stretch;
	padding-top: clamp(0.2rem, 0.55vmin, 0.38rem) !important;
	padding-bottom: clamp(0.2rem, 0.55vmin, 0.38rem) !important;
	padding-left: clamp(0.35rem, 1vw, 0.5rem) !important;
	padding-right: clamp(0.35rem, 1vw, 0.5rem) !important;
	border-radius: 8px;
	/* Keep the countdown visible without letting theme accent colors dominate the TY page. */
	background-color: rgba(248, 250, 252, 0.96) !important;
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--base, #ffffff) 94%, var(--wp--preset--color--contrast, #1d2327) 6%),
		color-mix(in srgb, var(--wp--preset--color--base, #ffffff) 89%, var(--wp--preset--color--contrast, #1d2327) 11%)
	) !important;
	color: var(--wi-text-color, var(--wi-fse-body-text, var(--wp--preset--color--contrast, var(--wp--preset--color--foreground, #1d2327)))) !important;
	border: 1px solid rgba(15, 23, 42, 0.08) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
	text-shadow: none;
}

body.wi-ty-gb-page .wi-ty-gb__col--left .countdown_amount {
	font-size: clamp(1.45rem, 4.5vw, 2.85rem);
	line-height: 1;
	padding: 0 !important;
	margin: 0 0 -0.1em;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* .countdown_descr font: unified with .ticketCDArea / .tyCountdown block below (do not duplicate smaller clamp here — it wins on specificity). */

/* #A780 — Add-to-calendar default state: theme/block-button defaults render low-contrast brown
   text on light grey (almost invisible). Mirror the hover rule (same variable chain) but without
   darkening so the buttons are readable at rest. Scoped to body.wi-ty-gb-page TY shell only. */
body.wi-ty-gb-page .wi-ty-gb__col--right .ticketCalendarArea .wi-btns-wrap a.wi-fse-primary-cta,
body.wi-ty-gb-page .wi-ty-gb__col--right .ticketCalendarArea .wi-btns-wrap a.wp-block-button__link,
body.wi-ty-gb-page .wi-ty-gb__col--right .ticketCalendarArea .wi-btns-wrap a.button,
body.wi-ty-gb-page .wi-ty-gb__col--right .ticketCalendarArea .wi-btns-wrap a.wiButton,
body.wi-ty-gb-page .ticketCalendarArea .wi-btns-wrap a.wi-fse-primary-cta,
body.wi-ty-gb-page .ticketCalendarArea .wi-btns-wrap a.wp-block-button__link,
body.wi-ty-gb-page .ticketCalendarArea .wi-btns-wrap a.button,
body.wi-ty-gb-page .ticketCalendarArea .wi-btns-wrap a.wiButton {
	background-color: var(--wi-cta-bg, var(--wi-fse-cta-fill, var(--wi-fse-accent, #32373c))) !important;
	background-image: none !important;
	color: var(--wi-cta-color, var(--wi-fse-cta-text, #ffffff)) !important;
	-webkit-text-fill-color: var(--wi-cta-color, var(--wi-fse-cta-text, #ffffff)) !important;
	border: none !important;
	filter: none !important;
	text-decoration: none !important;
}

/* Add-to-calendar: hover uses global FSE contrast/base (works light + dark presets). */
body.wi-ty-gb-page .wi-ty-gb__col--right .ticketCalendarArea .wi-btns-wrap a.wi-fse-primary-cta:hover,
body.wi-ty-gb-page .wi-ty-gb__col--right .ticketCalendarArea .wi-btns-wrap a.wp-block-button__link:hover,
body.wi-ty-gb-page .wi-ty-gb__col--right .ticketCalendarArea .wi-btns-wrap a.button:hover,
body.wi-ty-gb-page .wi-ty-gb__col--right .ticketCalendarArea .wi-btns-wrap a.wiButton:hover,
body.wi-ty-gb-page .wi-ty-gb__col--right .ticketCalendarArea .wi-btns-wrap a.wi-fse-primary-cta:focus-visible,
body.wi-ty-gb-page .wi-ty-gb__col--right .ticketCalendarArea .wi-btns-wrap a.wp-block-button__link:focus-visible,
body.wi-ty-gb-page .wi-ty-gb__col--right .ticketCalendarArea .wi-btns-wrap a.button:focus-visible,
body.wi-ty-gb-page .wi-ty-gb__col--right .ticketCalendarArea .wi-btns-wrap a.wiButton:focus-visible,
body.wi-ty-gb-page .ticketCalendarArea .wi-btns-wrap a.wi-fse-primary-cta:hover,
body.wi-ty-gb-page .ticketCalendarArea .wi-btns-wrap a.wp-block-button__link:hover,
body.wi-ty-gb-page .ticketCalendarArea .wi-btns-wrap a.button:hover,
body.wi-ty-gb-page .ticketCalendarArea .wi-btns-wrap a.wiButton:hover,
body.wi-ty-gb-page .ticketCalendarArea .wi-btns-wrap a.wi-fse-primary-cta:focus-visible,
body.wi-ty-gb-page .ticketCalendarArea .wi-btns-wrap a.wp-block-button__link:focus-visible,
body.wi-ty-gb-page .ticketCalendarArea .wi-btns-wrap a.button:focus-visible,
body.wi-ty-gb-page .ticketCalendarArea .wi-btns-wrap a.wiButton:focus-visible {
	/* Do not use --wp--preset--color--base for label ink (Oxygen/dark shells: base can be #000 → black-on-black). */
	background-color: color-mix(in srgb, var(--wi-cta-bg, var(--wi-fse-cta-fill, var(--wi-fse-accent, #32373c))) 68%, #000000) !important;
	background-image: none !important;
	color: var(--wi-cta-color, var(--wi-fse-cta-text, #ffffff)) !important;
	-webkit-text-fill-color: var(--wi-cta-color, var(--wi-fse-cta-text, #ffffff)) !important;
	border: none !important;
	filter: none !important;
	text-decoration: none !important;
}

.wi-ty-gb__col--right .remindersBlock {
	margin-top: 1rem;
	margin-left: 0 !important;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}

.wi-ty-gb__col--right .ticketSection,
.wi-ty-gb__col--right .wiTicketSection {
	text-align: left;
}

.wi-ty-gb__col--right .wi-btns-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: flex-start;
}

/* TY message block: center with calendar section below */
body.wi-ty-gb-page .wi-ty-gb__col--right .ctaArea:not(.video) {
	border-radius: 0;
	/* Match .eventDate.ticketSectionNew.ts / .ticketSection.ticketSectionNew.ts top padding (cp.css) */
	padding: 20px 0 0 !important;
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-bottom: 0;
	text-align: center !important;
}

body.wi-ty-gb-page .wi-ty-gb__col--right .ctaArea:not(.video) h3:first-child,
body.wi-ty-gb-page .wi-ty-gb__col--right .ctaArea:not(.video) .optinHeadline:first-child {
	margin-top: 0;
}

body.wi-ty-gb-page .wi-ty-gb__col--right .ctaArea.video {
	border-radius: 6px;
	margin-bottom: 0.5rem;
	/* Do not paint the full card black (see ty_message_area.php + global .ctaArea.video). */
	background-color: transparent !important;
}

body.wi-ty-gb-page .wi-ty-gb__col--right .ctaArea.video .wi_ty_cta_message_below {
	background: transparent none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: var(--wi-fse-body-text, var(--wi-fse-neutral-text, var(--wp--preset--color--contrast, #1d2327))) !important;
}

body.wi-ty-gb-page .wi-ty-gb__col--right .ctaArea.video .wi_ty_cta_message_below h3,
body.wi-ty-gb-page .wi-ty-gb__col--right .ctaArea.video .wi_ty_cta_message_below p {
	color: inherit !important;
}

/*
 * Legacy CP thank-you (page-thankyou_cp) rendered inside the GB FSE shell: right column is often a
 * white card while --wi-fse-body-text / --wp--preset--color--contrast follow global “dark preset” ink
 * (near-white) — message below the video vanishes. Force readable copy (matches HC white card intent).
 */
body.page-thankyou_cp.wi-ty-gb-page .wi-ty-gb__col--right .ctaArea.video .wi_ty_cta_message_below {
	color: #1d2327 !important;
	-webkit-text-fill-color: #1d2327 !important;
}
body.page-thankyou_cp.wi-ty-gb-page .wi-ty-gb__col--right .ctaArea.video .wi_ty_cta_message_below h3,
body.page-thankyou_cp.wi-ty-gb-page .wi-ty-gb__col--right .ctaArea.video .wi_ty_cta_message_below p,
body.page-thankyou_cp.wi-ty-gb-page .wi-ty-gb__col--right .ctaArea.video .wi_ty_cta_message_below a,
body.page-thankyou_cp.wi-ty-gb-page .wi-ty-gb__col--right .ctaArea.video .wi_ty_cta_message_below * {
	color: inherit !important;
	-webkit-text-fill-color: inherit !important;
}

.wi-ty-gb__col--right .ctaArea:empty {
	display: none;
}

.wi-ty-gb__full {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

body.wi-ty-gb--preview .wi_ty_preview_notice {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border: 1px dashed rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.02);
	text-align: center;
	font-size: 0.9375rem;
	color: #50575e;
}

body.wi-ty-gb--preview .wi_ty_preview_notice p {
	margin: 0;
}

.wi-ty-gb__preview-banner {
	background-color: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.wi-ty-gb__preview-banner-inner {
	max-width: 100%;
	padding: 0;
}

.wi-ty-gb__preview-banner img {
	display: block;
	width: 100%;
	height: auto;
}

.wi-ty-gb__preview-placeholder-date {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	margin-bottom: 0.75rem;
}

.wi-ty-gb__preview-placeholder-label {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #646970;
	margin: 0;
}

.wi-ty-gb__preview-placeholder-value {
	font-size: 1rem;
	color: #1d2327;
	margin: 0;
}

/* ≥390px */
@media (min-width: 390px) {
	.wi-ty-gb__inner {
		padding-left: 1.25rem;
		padding-right: 1.25rem;

	}

	.wi-ty-gb__card {
		padding: 1.5rem;
	}

	.wi-ty-gb__headline-copy {
		font-size: 1.1875rem;
	}
}

/* ≥768px: two columns */
@media (min-width: 768px) {
	/*
	 * #A113 — TY hero copy: break headline .inner out to full viewport width so long default
	 * strings stay one line each (FSE constrained .entry-content is often ~645px).
	 */
	body.wi-ty-gb-page .wi-ty-gb__headline-area .wi-ty-gb__inner {
		width: 100vw;
		max-width: 100vw;
		position: relative;
		left: 50%;
		right: auto;
		margin-left: -50vw;
		margin-right: -50vw;
		box-sizing: border-box;
		padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
		padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
	}

	.wi-ty-gb__headline-row {
		flex-direction: row;
		align-items: flex-start;
		gap: 1rem;
	}

	body.wi-ty-gb-page .wi-ty-gb__card > .wi-ty-gb__grid {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 2rem;
	}

	body.wi-ty-gb-page .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--left,
	body.wi-ty-gb-page .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--right {
		flex: 1 1 0;
		width: 50%;
		max-width: 50%;
	}

	/*
	 * Classic themes (e.g. Astra): .entry-content often sets flex-direction: column or
	 * child width: 100%, which stacks TY columns. Re-assert row layout only inside WI TY shell.
	 */
	body.wi-ty-gb-page .entry-content .wi-ty-gb__card > .wi-ty-gb__grid,
	body.wi-ty-gb-page #primary .entry-content .wi-ty-gb__card > .wi-ty-gb__grid,
	body.wi-ty-gb-page .site-content .entry-content .wi-ty-gb__card > .wi-ty-gb__grid,
	body.wi-ty-gb-page .ast-container .entry-content .wi-ty-gb__card > .wi-ty-gb__grid {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
	}

	body.wi-ty-gb-page .entry-content .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--left,
	body.wi-ty-gb-page .entry-content .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--right,
	body.wi-ty-gb-page #primary .entry-content .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--left,
	body.wi-ty-gb-page #primary .entry-content .wi-ty-gb__card > .wi-ty-gb__grid > .wi-ty-gb__col--right {
		flex: 1 1 0 !important;
		width: 50% !important;
		max-width: 50% !important;
		min-width: 0 !important;
	}

	.wi-ty-gb__main {
		padding-top: 0;
		padding-bottom: 3rem;
	}

	.wi-ty-gb__headline-area {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
}

/* ≥1440px */
@media (min-width: 1440px) {
	.wi-ty-gb__main > .wi-ty-gb__inner {
		max-width: 71rem;
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.wi-ty-gb__card {
		padding: 2rem 2.25rem;
	}

	body.wi-ty-gb-page .wi-ty-gb__card > .wi-ty-gb__grid {
		gap: 2.5rem;
	}

	.wi-ty-gb__headline-copy {
		font-size: 1.25rem;
	}
}

/* #A055 — Thank-you left column: same outer size for date tile + webinar/host PNG icons. */
body.wi-ty-gb-page .wi-ty-gb__col--left .eventDate.ticketSectionNew.ts,
body.wi-ty-gb-page .wi-ty-gb__col--left .ticketSection.ticketSectionNew.ts.newticketTest {
	align-items: center;
}

body.wi-ty-gb-page .wi-ty-gb__col--left .dateIcon,
body.wi-ty-gb-page .wi-ty-gb__col--left .ticketInfoIcon,
body.wi-ty-gb-page .wi-ty-gb__col--left .ticketInfoIcon2 {
	width: 72px !important;
	min-width: 72px !important;
	max-width: 72px !important;
	height: 72px !important;
	min-height: 72px !important;
	max-height: 72px !important;
	flex-shrink: 0;
	box-sizing: border-box !important;
	display: flex !important;
	float: none !important;
	align-items: center;
	justify-content: center;
	margin: 0;
}

body.wi-ty-gb-page .wi-ty-gb__col--left .dateIcon {
	overflow: hidden;
	/* Calendar sprite: tuned with scaled PNG icons in the same 72px row (#A103). */
	background-size: 82% auto !important;
	background-position: center center !important;
}

body.wi-ty-gb-page .wi-ty-gb__col--left .ticketInfoIcon,
body.wi-ty-gb-page .wi-ty-gb__col--left .ticketInfoIcon2 {
	overflow: visible;
}

body.wi-ty-gb-page .wi-ty-gb__col--left .ticketInfoIcon img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	margin: 0 auto;
	/* #A103 — Match visual weight to .dateIcon (calendar); avoid oversized PNG vs 72px tile. */
	transform: scale(1.14) !important;
	transform-origin: center center !important;
}

body.wi-ty-gb-page .wi-ty-gb__col--left .ticketInfoIcon2 img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	margin: 0 auto;
	transform: scale(1.18, 1.08) !important;
	transform-origin: center center !important;
}

/*
 * #A103 — Native TY in .thankyou-page-container (no .wi-ty-gb__grid): match #A055 so webinar/host PNGs
 * use the same 72px tile as .dateIcon (legacy .ticketInfoIcon width:60px from webinar-modern.css was shrinking them).
 */
body.wi-ty-gb-page .thankyou-page-container .eventDate.ticketSectionNew.ts,
body.wi-ty-gb-page .thankyou-page-container .ticketSection.ticketSectionNew.ts.newticketTest {
	align-items: center;
}

body.wi-ty-gb-page .thankyou-page-container .dateIcon,
body.wi-ty-gb-page .thankyou-page-container .ticketInfoIcon,
body.wi-ty-gb-page .thankyou-page-container .ticketInfoIcon2 {
	width: 72px !important;
	min-width: 72px !important;
	max-width: 72px !important;
	height: 72px !important;
	min-height: 72px !important;
	max-height: 72px !important;
	flex-shrink: 0;
	box-sizing: border-box !important;
	display: flex !important;
	float: none !important;
	align-items: center;
	justify-content: center;
	margin: 0;
}

body.wi-ty-gb-page .thankyou-page-container .dateIcon {
	overflow: hidden;
	background-size: 82% auto !important;
	background-position: center center !important;
}

body.wi-ty-gb-page .thankyou-page-container .ticketInfoIcon,
body.wi-ty-gb-page .thankyou-page-container .ticketInfoIcon2 {
	overflow: visible;
}

body.wi-ty-gb-page .thankyou-page-container .ticketInfoIcon img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	margin: 0 auto;
	transform: scale(1.14) !important;
	transform-origin: center center !important;
}

body.wi-ty-gb-page .thankyou-page-container .ticketInfoIcon2 img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	margin: 0 auto;
	transform: scale(1.18, 1.08) !important;
	transform-origin: center center !important;
}

/* TY date + ticket rows: one font stack (FSE heading/body presets fall back to inherit). */
body.wi-ty-gb-page .wi-ty-gb__col--left .eventDate .dateInfo,
body.wi-ty-gb-page .thankyou-page-container .eventDate .dateInfo,
body.wi-ty-gb-page .wi-ty-gb__col--left .eventDate .dateHeadline,
body.wi-ty-gb-page .thankyou-page-container .eventDate .dateHeadline,
body.wi-ty-gb-page .wi-ty-gb__col--left .eventDate .dateSubHeadline,
body.wi-ty-gb-page .thankyou-page-container .eventDate .dateSubHeadline {
	font-family: var(--wp--preset--font-family--heading, var(--wp--preset--font-family--body, inherit));
}

body.wi-ty-gb-page .wi-ty-gb__col--left .tyTicketWebinar .tyTicketInfoCopy,
body.wi-ty-gb-page .wi-ty-gb__col--left .tyTicketHost .tyTicketInfoCopy,
body.wi-ty-gb-page .thankyou-page-container .tyTicketWebinar .tyTicketInfoCopy,
body.wi-ty-gb-page .thankyou-page-container .tyTicketHost .tyTicketInfoCopy {
	font-family: var(--wp--preset--font-family--heading, var(--wp--preset--font-family--body, inherit));
}

/*
 * TY ticket rows: match .eventDate .dateHeadline / .dateSubHeadline (font + scale).
 */
body.wi-ty-gb-page .wi-ty-gb__col--left .tyTicketWebinar .tyTicketInfoCopy > b,
body.wi-ty-gb-page .wi-ty-gb__col--left .tyTicketHost .tyTicketInfoCopy > b,
body.wi-ty-gb-page .thankyou-page-container .tyTicketWebinar .tyTicketInfoCopy > b,
body.wi-ty-gb-page .thankyou-page-container .tyTicketHost .tyTicketInfoCopy > b {
	font-family: inherit;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.35;
	display: block;
	margin: 0 0 0.2rem;
	opacity: 1;
	color: var(--wp--preset--color--contrast, var(--wi-fse-body-text, #1b4332));
}

body.wi-ty-gb-page .wi-ty-gb__col--left .tyTicketWebinar .tyTicketInfoNewHeadline,
body.wi-ty-gb-page .wi-ty-gb__col--left .tyTicketHost .tyTicketInfoNewHeadline,
body.wi-ty-gb-page .thankyou-page-container .tyTicketWebinar .tyTicketInfoNewHeadline,
body.wi-ty-gb-page .thankyou-page-container .tyTicketHost .tyTicketInfoNewHeadline {
	font-family: var(--wp--preset--font-family--heading, var(--wp--preset--font-family--body, inherit));
	font-size: 1.12rem !important;
	line-height: 1.35 !important;
	font-weight: 700;
	margin: 0 !important;
	color: var(--wp--preset--color--contrast, var(--wi-fse-body-text, #1b4332));
}

/* Webinar URL row: same 72px tile as ticket rows (bookmark is FA glyph, not .ticketInfoIcon). */
body.wi-ty-gb-page .wi-ty-gb__col--left .webinarURLHeadline {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

body.wi-ty-gb-page .wi-ty-gb__col--left .webinarURLHeadline > i.icon-bookmark:first-of-type {
	flex: 0 0 72px;
	width: 72px !important;
	min-width: 72px !important;
	max-width: 72px !important;
	height: 72px !important;
	min-height: 72px !important;
	max-height: 72px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	font-size: 2rem !important;
	line-height: 1 !important;
}

/* Calendar CTA row: keep button icons visually aligned (not oversized vs FA). */
body.wi-ty-gb-page .wi-ty-gb__col--right .wi-calendar-btn a [class^="icon-"],
body.wi-ty-gb-page .wi-ty-gb__col--right .wi-calendar-btn a [class*=" icon-"] {
	font-size: 1.25rem !important;
	line-height: 1 !important;
	width: 1.35em;
	text-align: center;
}

/*
 * #A094 — Native TY: shortcodes in .wi-sc-hosted (no .wi-ty-gb__grid / __col--left). Same CD row as col layout.
 */
body.wi-ty-gb-page .ticketCDArea .countdown_row,
body.wi-ty-gb-page .tyCountdown .countdown_row {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-template-rows: auto;
	gap: 0.35rem;
	width: 100%;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	align-items: stretch;
}

body.wi-ty-gb-page .ticketCDArea .countdown_row .countdown_section,
body.wi-ty-gb-page .tyCountdown .countdown_row .countdown_section {
	min-width: 0 !important;
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center !important;
	align-items: center;
	align-content: center;
	gap: 0;
	min-height: clamp(2.75rem, 7.5vmin, 4.1rem) !important;
	align-self: stretch;
	padding-top: clamp(0.2rem, 0.55vmin, 0.38rem) !important;
	padding-bottom: clamp(0.2rem, 0.55vmin, 0.38rem) !important;
	padding-left: clamp(0.35rem, 1vw, 0.5rem) !important;
	padding-right: clamp(0.35rem, 1vw, 0.5rem) !important;
	border-radius: 8px;
	background-color: rgba(248, 250, 252, 0.96) !important;
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--base, #ffffff) 94%, var(--wp--preset--color--contrast, #1d2327) 6%),
		color-mix(in srgb, var(--wp--preset--color--base, #ffffff) 89%, var(--wp--preset--color--contrast, #1d2327) 11%)
	) !important;
	color: var(--wp--preset--color--contrast, var(--wi-fse-body-text, var(--wp--preset--color--foreground, #1d2327))) !important;
	border: 1px solid rgba(15, 23, 42, 0.08) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
	text-shadow: none;
}

body.wi-ty-gb-page .ticketCDArea .countdown_amount,
body.wi-ty-gb-page .tyCountdown .countdown_amount {
	font-size: clamp(1.45rem, 4.5vw, 2.85rem);
	line-height: 1;
	padding: 0 !important;
	margin: 0 0 -0.1em;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

body.wi-ty-gb-page .wi-ty-gb__col--left .countdown_descr,
body.wi-ty-gb-page .ticketCDArea .countdown_descr,
body.wi-ty-gb-page .tyCountdown .countdown_descr {
	font-family: var(--wp--preset--font-family--heading, var(--wp--preset--font-family--body, inherit));
	font-size: clamp(0.95rem, 1.35vw, 1.1rem);
	line-height: 1.05;
	margin: -0.38em 0 0;
	padding: 0;
	text-align: center;
}

body.wi-ty-gb-page .ticketCDArea .wi-ty-countdown-panel #defaultCountdown,
body.wi-ty-gb-page .ticketCDArea .wi-ty-countdown-panel .hasCountdown {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/*
 * #A098 — Native TY shortcode stack: floated ticket rows (cp.css) could pin countdown to the left edge.
 * Clear + flow-root + explicit headline center; digit sizes aligned with .wi-ty-gb__col--left rules above.
 */
body.wi-ty-gb-page .ticketCDArea.ticketSection:has(.wi-ty-countdown-panel),
body.wi-ty-gb-page .tyCountdown.ticketSection:has(.wi-ty-countdown-panel) {
	clear: both !important;
	display: flow-root;
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	box-sizing: border-box;
}
body.wi-ty-gb-page .ticketCDArea .wi-ty-countdown-headline,
body.wi-ty-gb-page .tyCountdown .wi-ty-countdown-headline {
	font-family: var(--wp--preset--font-family--heading, var(--wp--preset--font-family--body, inherit));
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center !important;
}

/* TY URL helper line: same scale as .dateSubHeadline (not legacy 12px). */
body.wi-ty-gb-page .wi-ty-gb__col--left .webinarURLHeadline2,
body.wi-ty-gb-page .thankyou-page-container .webinarURLHeadline2 {
	font-family: var(--wp--preset--font-family--heading, var(--wp--preset--font-family--body, inherit));
	font-size: 1.1rem;
	line-height: 1.35;
	font-weight: 400;
}

/*
 * #A003b — FSE TY: block-theme body text colour can leak onto thank-you chrome; pin WI text tokens.
 */
body.wi-ty-gb-page {
	color: var(--wi-text-color, var(--wi-fse-body-text, var(--wp--preset--color--contrast, #1d2327))) !important;
}
body.wi-ty-gb-page .thankyou-page-container,
body.wi-ty-gb-page .thankyou-page-container .tyHeadlineContainer,
body.wi-ty-gb-page .tyHeadlineContainer .tyHeadlineCopy,
body.wi-ty-gb-page .tyHeadlineContainer .tyHeadlineTextStack,
body.wi-ty-gb-page .tyHeadlineContainer .tyHeadlineTextStack .optinHeadline1,
body.wi-ty-gb-page .tyHeadlineContainer .tyHeadlineTextStack .wiOptinHeadline1,
body.wi-ty-gb-page .tyHeadlineContainer .tyHeadlineTextStack .optinHeadline2,
body.wi-ty-gb-page .tyHeadlineContainer .tyHeadlineTextStack .wiOptinHeadline2 {
	color: var(--wi-text-color, var(--wi-fse-body-text, var(--wp--preset--color--contrast, #1d2327))) !important;
	-webkit-text-fill-color: var(--wi-text-color, var(--wi-fse-body-text, var(--wp--preset--color--contrast, #1d2327))) !important;
}