/*
 * Buttons and fields on buyer pages built on Bootstrap 2 (event pages, checkout,
 * order confirmation, account pages). Loaded when
 * Components\Services\BuyerPages\ButtonStyle shows the new buttons, which also
 * adds `tf-buttons` to <html>.
 *
 * Every button keeps the emphasis it has today: filled, in the event's colour
 * (or neutral). The exceptions:
 *  - Cancel and Back beside a main action in a dialog are outlined.
 *  - .btn-danger (remove, unsubscribe) is filled red, never the event colour.
 *  - .btn-link stays a text link.
 * Sizes: 52px .btn-large/.btn-lg/.btn-buy-tickets, 44px by default,
 * 36px .btn-small/.btn-sm/.btn-mini/.btn-xs (40px on phones). Fields are 44px
 * with 16px text, 6px corners, a light border and soft shadow, like the card
 * fields Stripe draws next to them.
 * Corners are 8px (6px small, 10px large), in step with the 6px fields and the
 * 4-8px corners of the rest of these pages. Labels stay on one line wherever
 * there is room, as today: a button never shrinks in a flex row or a table cell.
 * Only a label longer than its whole container wraps, instead of running off the
 * page.
 *
 * The mobile menu toggle, Twitch, Spotify and WhatsApp buttons, time-slot
 * filters, the date picker trigger, labels styled as buttons and the brand
 * share tiles on pre-registration and prize pages keep their own look; :where()
 * leaves that exclusion without specificity. Colours come from custom
 * properties: neutral here, the event's buy_button_colour or a white-label
 * accent when ButtonStyle prints them. The repeated html class outranks
 * Bootstrap's and the site's button rules without !important.
 *
 * Classes ButtonStyle adds to <html>:
 *  - tf-buttons-dark: the black layout's dark pages (an event in dark mode is
 *    recognised by its stylesheet instead).
 *  - tf-buttons-light-panels: dialogs, wells and white panels on the black
 *    layout are light.
 *  - tf-buttons-event-colour: the colours come from the event or brand.
 *  - tf-buttons-dark-label: that colour is light, so labels are near-black.
 */

html.tf-buttons {
	--tf-btn: #16161a;
	--tf-btn-top: #323235;
	--tf-btn-text: #ffffff;
	--tf-btn-edge: #16161a;
	--tf-btn-line: #16161a;
	--tf-btn-line-dark: #8b8b8d;
	--tf-btn-halo: rgba(22, 22, 26, 0.35);
	--tf-btn-tint: rgba(22, 22, 26, 0.08);
	--tf-btn-tint-strong: rgba(22, 22, 26, 0.14);
	--tf-btn-ink: var(--tf-btn-line);
	--tf-btn-ghost: #ffffff;
	--tf-btn-ghost-hover: var(--tf-btn-tint);
	--tf-btn-ghost-press: var(--tf-btn-tint-strong);
	--tf-btn-off: #ececf0;
	--tf-btn-off-text: #8b8b96;
	--tf-btn-danger: #b42318;
	--tf-btn-danger-top: #c8372c;
	--tf-btn-field-line: #8b8b96;
	--tf-btn-hint: #55555f;
	--tf-btn-ink-text: #ffffff;
	--tf-btn-error-text: #b42318;
	--tf-btn-ring: rgba(22, 22, 26, 0.16);
	--tf-field-border: #dcdce2;
	--tf-field-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 3px 6px rgba(0, 0, 0, 0.02);
	--tf-link: #482d7f;
	--tf-link-hover: #6e6aa2;
}

/*
 * A dark page: the black layout (tf-buttons-dark), or an event in dark mode, whose
 * stylesheet is on the page. Neutral buttons are mid-grey with a light edge, so they
 * stand out from the page and keep the white labels some templates set inline.
 */

html.tf-buttons-dark:not(.tf-buttons-event-colour) {
	--tf-btn: #55555f;
	--tf-btn-top: #6a6a73;
	--tf-btn-text: #ffffff;
	--tf-btn-edge: #9a9aa5;
	--tf-btn-halo: rgba(255, 255, 255, 0.18);
	--tf-btn-line-dark: #d4d4de;
}

html.tf-buttons:not(.tf-buttons-event-colour):has(link[href*="/css/colors/dark.css"]) {
	--tf-btn: #55555f;
	--tf-btn-top: #6a6a73;
	--tf-btn-text: #ffffff;
	--tf-btn-edge: #9a9aa5;
	--tf-btn-halo: rgba(255, 255, 255, 0.18);
	--tf-btn-line-dark: #d4d4de;
}

html.tf-buttons.tf-buttons-dark {
	--tf-btn-ink: var(--tf-btn-line-dark);
	--tf-btn-ghost: rgba(255, 255, 255, 0.06);
	--tf-btn-ghost-hover: rgba(255, 255, 255, 0.06);
	--tf-btn-ghost-press: rgba(255, 255, 255, 0.12);
	--tf-btn-off: rgba(255, 255, 255, 0.08);
	--tf-btn-off-text: rgba(255, 255, 255, 0.42);
	--tf-btn-hint: rgba(255, 255, 255, 0.78);
	--tf-btn-ink-text: #16161a;
	--tf-btn-error-text: #ff8a7a;
	--tf-btn-ring: rgba(255, 255, 255, 0.24);
}

html.tf-buttons:has(link[href*="/css/colors/dark.css"]) {
	--tf-btn-ink: var(--tf-btn-line-dark);
	--tf-btn-ghost: rgba(255, 255, 255, 0.06);
	--tf-btn-ghost-hover: rgba(255, 255, 255, 0.06);
	--tf-btn-ghost-press: rgba(255, 255, 255, 0.12);
	--tf-btn-off: rgba(255, 255, 255, 0.08);
	--tf-btn-off-text: rgba(255, 255, 255, 0.42);
	--tf-btn-hint: rgba(255, 255, 255, 0.78);
	--tf-btn-ink-text: #16161a;
	--tf-btn-error-text: #ff8a7a;
	--tf-btn-ring: rgba(255, 255, 255, 0.24);
}

/* An event colour close to black takes a light edge on a dark page. */

html.tf-buttons-dark.tf-buttons-event-colour {
	--tf-btn-edge: var(--tf-btn-edge-dark);
}

html.tf-buttons.tf-buttons-event-colour:has(link[href*="/css/colors/dark.css"]) {
	--tf-btn-edge: var(--tf-btn-edge-dark);
}

/* Dialogs, wells and the white checkout and order panels on the black layout take the light-page look back. */

html.tf-buttons-light-panels .modal,
html.tf-buttons-light-panels .well,
html.tf-buttons-light-panels .checkout-block,
html.tf-buttons-light-panels .white-rounded-block {
	--tf-btn-ink: var(--tf-btn-line);
	--tf-btn-ghost: #ffffff;
	--tf-btn-ghost-hover: var(--tf-btn-tint);
	--tf-btn-ghost-press: var(--tf-btn-tint-strong);
	--tf-btn-off: #ececf0;
	--tf-btn-off-text: #8b8b96;
	--tf-btn-hint: #55555f;
	--tf-btn-ink-text: #ffffff;
	--tf-btn-error-text: #b42318;
	--tf-btn-ring: rgba(22, 22, 26, 0.16);
	--tf-link: #482d7f;
	--tf-link-hover: #6e6aa2;
}

html.tf-buttons-light-panels.tf-buttons-event-colour .modal,
html.tf-buttons-light-panels.tf-buttons-event-colour .well,
html.tf-buttons-light-panels.tf-buttons-event-colour .checkout-block,
html.tf-buttons-light-panels.tf-buttons-event-colour .white-rounded-block {
	--tf-btn-edge: var(--tf-btn-edge-light);
}

html.tf-buttons-light-panels:not(.tf-buttons-event-colour) .modal,
html.tf-buttons-light-panels:not(.tf-buttons-event-colour) .well,
html.tf-buttons-light-panels:not(.tf-buttons-event-colour) .checkout-block,
html.tf-buttons-light-panels:not(.tf-buttons-event-colour) .white-rounded-block {
	--tf-btn: #16161a;
	--tf-btn-top: #323235;
	--tf-btn-text: #ffffff;
	--tf-btn-edge: #16161a;
	--tf-btn-halo: rgba(22, 22, 26, 0.35);
}

/* An event in dark mode has dark fields: their border and shadow follow dark.css. */

html.tf-buttons:has(link[href*="/css/colors/dark.css"]) {
	--tf-field-border: #333333;
	--tf-field-shadow: none;
}

/* An event in dark mode darkens those panels again (its stylesheet is on the page). */

html.tf-buttons-light-panels:has(link[href*="/css/colors/dark.css"]) .modal,
html.tf-buttons-light-panels:has(link[href*="/css/colors/dark.css"]) .well,
html.tf-buttons-light-panels:has(link[href*="/css/colors/dark.css"]) .checkout-block,
html.tf-buttons-light-panels:has(link[href*="/css/colors/dark.css"]) .white-rounded-block {
	--tf-btn-ink: var(--tf-btn-line-dark);
	--tf-btn-ghost: rgba(255, 255, 255, 0.06);
	--tf-btn-ghost-hover: rgba(255, 255, 255, 0.06);
	--tf-btn-ghost-press: rgba(255, 255, 255, 0.12);
	--tf-btn-off: rgba(255, 255, 255, 0.08);
	--tf-btn-off-text: rgba(255, 255, 255, 0.42);
	--tf-btn-hint: rgba(255, 255, 255, 0.78);
	--tf-btn-ink-text: #16161a;
	--tf-btn-error-text: #ff8a7a;
	--tf-btn-ring: rgba(255, 255, 255, 0.24);
	--tf-link: #e4e4ea;
	--tf-link-hover: #ffffff;
}

html.tf-buttons-light-panels:not(.tf-buttons-event-colour):has(link[href*="/css/colors/dark.css"]) .modal,
html.tf-buttons-light-panels:not(.tf-buttons-event-colour):has(link[href*="/css/colors/dark.css"]) .well,
html.tf-buttons-light-panels:not(.tf-buttons-event-colour):has(link[href*="/css/colors/dark.css"]) .checkout-block,
html.tf-buttons-light-panels:not(.tf-buttons-event-colour):has(link[href*="/css/colors/dark.css"]) .white-rounded-block {
	--tf-btn: #55555f;
	--tf-btn-top: #6a6a73;
	--tf-btn-text: #ffffff;
	--tf-btn-edge: #9a9aa5;
	--tf-btn-halo: rgba(255, 255, 255, 0.18);
}

html.tf-buttons-light-panels.tf-buttons-event-colour:has(link[href*="/css/colors/dark.css"]) .modal,
html.tf-buttons-light-panels.tf-buttons-event-colour:has(link[href*="/css/colors/dark.css"]) .well,
html.tf-buttons-light-panels.tf-buttons-event-colour:has(link[href*="/css/colors/dark.css"]) .checkout-block,
html.tf-buttons-light-panels.tf-buttons-event-colour:has(link[href*="/css/colors/dark.css"]) .white-rounded-block {
	--tf-btn-edge: var(--tf-btn-edge-dark);
}

/*
 * Links. Only the site's default link colours are replaced (the rules below weigh no more
 * than a bare `a`/`a:hover`), so links a page, the header menu or the footer style
 * themselves keep their colours. On white panels links stay the site's purple, or take
 * the event's readable colour; on dark pages, dark panels and the dark page backdrop
 * they are light.
 */

html.tf-buttons-event-colour,
html.tf-buttons-light-panels.tf-buttons-event-colour :is(.modal, .well, .checkout-block, .white-rounded-block) {
	--tf-link: var(--tf-btn-line);
	--tf-link-hover: var(--tf-btn-line);
}

html.tf-buttons.tf-buttons-dark {
	--tf-link: #e4e4ea;
	--tf-link-hover: #ffffff;
}

html.tf-buttons.tf-buttons-dark.tf-buttons-event-colour {
	--tf-link: var(--tf-btn-line-dark);
	--tf-link-hover: #ffffff;
}

/* An event in dark mode darkens these panels (colors/dark.css); their links are light. */

html.tf-buttons:has(link[href*="/css/colors/dark.css"]) :is(.ticket_types_wrap, .sticky-container, .checkout-block, .add-on-wrap, .ticket-holder-item, .form-actions, .modal, .well, .description, .event-page-faq-section) {
	--tf-link: #e4e4ea;
	--tf-link-hover: #ffffff;
}

html.tf-buttons.tf-buttons-event-colour:has(link[href*="/css/colors/dark.css"]) :is(.ticket_types_wrap, .sticky-container, .checkout-block, .add-on-wrap, .ticket-holder-item, .form-actions, .modal, .well, .description, .event-page-faq-section) {
	--tf-link: var(--tf-btn-line-dark);
	--tf-link-hover: #ffffff;
}

/* The account pages' header sits on the dark page backdrop. */

html.tf-buttons #account-header {
	--tf-link: #ffffff;
	--tf-link-hover: #ffffff;
}

:where(html.tf-buttons) a:where(:not(.btn)) {
	color: var(--tf-link);
}

:where(html.tf-buttons) a:where(:not(.btn)):is(:hover, :focus) {
	color: var(--tf-link-hover);
}

/*
 * Shape, size and type, and the filled colours. Restated on :hover, where the site
 * greys every button, so a tap on a touch screen never leaves a button grey.
 */

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))),
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):hover {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	flex-shrink: 0;
	max-width: 100%;
	min-height: 44px;
	padding: 11px 20px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
	text-shadow: none;
	white-space: normal;
	color: var(--tf-btn-text);
	background-color: var(--tf-btn);
	background-image: linear-gradient(180deg, var(--tf-btn-top) 0%, var(--tf-btn) 100%);
	filter: none;
	border: 1px solid var(--tf-btn-edge);
	border-radius: 8px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
	opacity: 1;
	-webkit-transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):active,
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).active {
	color: var(--tf-btn-text);
	background-color: var(--tf-btn);
	background-image: none;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.24);
	-webkit-transform: none;
	transform: none;
}

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):focus {
	outline: 2px solid var(--tf-btn-ink);
	outline-offset: 3px;
}

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):focus:not(:focus-visible) {
	outline: none;
}

/* Icon-only buttons (Font Awesome on the button itself) keep the icon font and are round. */

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).fa {
	min-width: 44px;
	padding-left: 12px;
	padding-right: 12px;
	font-family: FontAwesome;
	font-weight: normal;
}

/* Buttons whose template sets a tighter padding, dropdown toggles and icon buttons centre their content. */

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is([style*="padding"], .dropdown-toggle, .fa):not(.btn-block) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
}

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-block:is([style*="padding"], .dropdown-toggle, .fa) {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Cancel and Back beside a main action in a dialog are outlined, so the main action leads. */

html.tf-buttons.tf-buttons .modal .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):not(:where(.btn-primary, .btn-success, .btn-info, .btn-buy-tickets, .btn-next-step, .btn-inverse, .btn-danger, .btn-link)):is(:has(~ :is(.btn-primary, .btn-success, .btn-info, .btn-buy-tickets, .btn-next-step, .btn-danger)), :is(.btn-primary, .btn-success, .btn-info, .btn-buy-tickets, .btn-next-step, .btn-danger) ~ *),
html.tf-buttons.tf-buttons .modal .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):not(:where(.btn-primary, .btn-success, .btn-info, .btn-buy-tickets, .btn-next-step, .btn-inverse, .btn-danger, .btn-link)):is(:has(~ :is(.btn-primary, .btn-success, .btn-info, .btn-buy-tickets, .btn-next-step, .btn-danger)), :is(.btn-primary, .btn-success, .btn-info, .btn-buy-tickets, .btn-next-step, .btn-danger) ~ *):hover {
	color: var(--tf-btn-ink);
	background-color: var(--tf-btn-ghost);
	background-image: none;
	border-color: var(--tf-btn-ink);
	box-shadow: none;
}

html.tf-buttons.tf-buttons .modal .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):not(:where(.btn-primary, .btn-success, .btn-info, .btn-buy-tickets, .btn-next-step, .btn-inverse, .btn-danger, .btn-link)):is(:has(~ :is(.btn-primary, .btn-success, .btn-info, .btn-buy-tickets, .btn-next-step, .btn-danger)), :is(.btn-primary, .btn-success, .btn-info, .btn-buy-tickets, .btn-next-step, .btn-danger) ~ *):active,
html.tf-buttons.tf-buttons .modal .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):not(:where(.btn-primary, .btn-success, .btn-info, .btn-buy-tickets, .btn-next-step, .btn-inverse, .btn-danger, .btn-link)):is(:has(~ :is(.btn-primary, .btn-success, .btn-info, .btn-buy-tickets, .btn-next-step, .btn-danger)), :is(.btn-primary, .btn-success, .btn-info, .btn-buy-tickets, .btn-next-step, .btn-danger) ~ *).active {
	background-image: linear-gradient(var(--tf-btn-ghost-press), var(--tf-btn-ghost-press));
}

/* Destructive: remove, unsubscribe, swap. Always red, never the event colour. */

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is(.btn-danger, .remove-variant),
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is(.btn-danger, .remove-variant):hover,
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is(.btn-danger, .remove-variant):active,
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is(.btn-danger, .remove-variant).active {
	color: #ffffff;
	background-color: var(--tf-btn-danger);
	background-image: linear-gradient(180deg, var(--tf-btn-danger-top) 0%, var(--tf-btn-danger) 100%);
	border-color: var(--tf-btn-danger);
}

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is(.btn-danger, .remove-variant):active,
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is(.btn-danger, .remove-variant).active {
	background-image: none;
}

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is(.btn-danger, .remove-variant):focus {
	outline-color: var(--tf-btn-danger);
}

/* Text link */

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-link,
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-link:hover,
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-link:active,
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-link.active {
	padding-left: 8px;
	padding-right: 8px;
	color: var(--tf-btn-ink);
	background-color: transparent;
	background-image: none;
	border-color: transparent;
	box-shadow: none;
}

/* A button the page sizes itself (an inline width, or full width) still shrinks to share its row. */

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is([style*="width"], .btn-block),
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is([style*="width"], .btn-block):hover {
	flex-shrink: 1;
}

/* In a table, a button keeps its label on one line; the table makes room. */

html.tf-buttons.tf-buttons :is(td, th) .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))),
html.tf-buttons.tf-buttons :is(td, th) .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):hover {
	white-space: nowrap;
}

/* Sizes */

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-large,
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-lg,
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-buy-tickets {
	min-height: 52px;
	padding: 14px 26px;
	font-size: 16px;
	line-height: 22px;
	border-radius: 10px;
}

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-small,
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-sm,
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-mini,
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-xs {
	min-height: 36px;
	padding: 7px 16px;
	font-size: 14px;
	line-height: 20px;
	border-radius: 6px;
}

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-mini,
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-xs {
	font-size: 13px;
}

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-block {
	display: block;
	width: 100%;
}

/* A colour set on the button itself (inline or by the page) shows instead of the event colour. */

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"])))[style*="background"],
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"])))[style*="background"]:hover {
	background-image: none;
}

/*
 * A light event colour takes a near-black label. Labels, icons and artwork the markup
 * sets to white follow it, so they stay visible.
 */

html.tf-buttons.tf-buttons-dark-label .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):not(:where(.btn-danger, .remove-variant, .btn-link)):is([style^="color:#fff" i], [style*=" color:#fff" i], [style*=";color:#fff" i], [style^="color: #fff" i], [style*=" color: #fff" i], [style*=";color: #fff" i], [style^="color:#ffffff" i], [style*=" color:#ffffff" i], [style*=";color:#ffffff" i], [style^="color: #ffffff" i], [style*=" color: #ffffff" i], [style*=";color: #ffffff" i], [style^="color:white" i], [style*=" color:white" i], [style*=";color:white" i], [style^="color: white" i], [style*=" color: white" i], [style*=";color: white" i]):is([style*="color:#fff;" i], [style$="color:#fff" i], [style*="color: #fff;" i], [style$="color: #fff" i], [style*="color:#ffffff;" i], [style$="color:#ffffff" i], [style*="color: #ffffff;" i], [style$="color: #ffffff" i], [style*="color:white;" i], [style$="color:white" i], [style*="color: white;" i], [style$="color: white" i]),
html.tf-buttons.tf-buttons-dark-label .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):not(:where(.btn-danger, .remove-variant, .btn-link)) *:is([style^="color:#fff" i], [style*=" color:#fff" i], [style*=";color:#fff" i], [style^="color: #fff" i], [style*=" color: #fff" i], [style*=";color: #fff" i], [style^="color:#ffffff" i], [style*=" color:#ffffff" i], [style*=";color:#ffffff" i], [style^="color: #ffffff" i], [style*=" color: #ffffff" i], [style*=";color: #ffffff" i], [style^="color:white" i], [style*=" color:white" i], [style*=";color:white" i], [style^="color: white" i], [style*=" color: white" i], [style*=";color: white" i]):is([style*="color:#fff;" i], [style$="color:#fff" i], [style*="color: #fff;" i], [style$="color: #fff" i], [style*="color:#ffffff;" i], [style$="color:#ffffff" i], [style*="color: #ffffff;" i], [style$="color: #ffffff" i], [style*="color:white;" i], [style$="color:white" i], [style*="color: white;" i], [style$="color: white" i]) {
	color: var(--tf-btn-text) !important;
}

html.tf-buttons.tf-buttons-dark-label .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):not(:where(.btn-danger, .remove-variant, .btn-link)) svg:is([style^="fill:#fff" i], [style*=" fill:#fff" i], [style*=";fill:#fff" i], [style^="fill: #fff" i], [style*=" fill: #fff" i], [style*=";fill: #fff" i], [style^="fill:#ffffff" i], [style*=" fill:#ffffff" i], [style*=";fill:#ffffff" i], [style^="fill: #ffffff" i], [style*=" fill: #ffffff" i], [style*=";fill: #ffffff" i], [style^="fill:white" i], [style*=" fill:white" i], [style*=";fill:white" i], [style^="fill: white" i], [style*=" fill: white" i], [style*=";fill: white" i]):is([style*="fill:#fff;" i], [style$="fill:#fff" i], [style*="fill: #fff;" i], [style$="fill: #fff" i], [style*="fill:#ffffff;" i], [style$="fill:#ffffff" i], [style*="fill: #ffffff;" i], [style$="fill: #ffffff" i], [style*="fill:white;" i], [style$="fill:white" i], [style*="fill: white;" i], [style$="fill: white" i]) {
	color: inherit !important;
	fill: currentColor !important;
}

html.tf-buttons.tf-buttons-dark-label .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):not(:where(.btn-danger, .remove-variant, .btn-link)) svg :is([fill="#fff" i], [fill="#ffffff" i], [fill="white" i]),
html.tf-buttons.tf-buttons-dark-label .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):not(:where(.btn-danger, .remove-variant, .btn-link)) svg:is([fill="#fff" i], [fill="#ffffff" i], [fill="white" i]) {
	fill: currentColor;
}

html.tf-buttons.tf-buttons-dark-label .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):not(:where(.btn-danger, .remove-variant, .btn-link)) img[src*="-white."] {
	filter: brightness(0);
}

/*
 * The share grid on the order confirmation (not its full-width share button): filled tiles
 * with icons over two-line labels. Every tile fills its grid cell, so a row of tiles is one
 * height whatever its labels wrap to, with the icon and label centred.
 */

html.tf-buttons.tf-buttons .sharing-btn:not(.btn-full-width) .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))),
html.tf-buttons.tf-buttons .sharing-btn:not(.btn-full-width) .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):hover {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 0;
	padding: 14px 8px;
	font-size: 12px;
	line-height: 1.6;
	white-space: normal;
	border-radius: 12px;
}

/* Every row of the share grid is as tall as its tallest tile; lifted tiles are not clipped. */

html.tf-buttons.tf-buttons .share-with-services .sharing-btns {
	grid-auto-rows: 1fr;
	overflow: visible;
}

/* The full-width share button: icon beside the label, centred. */

html.tf-buttons.tf-buttons .sharing-btn.btn-full-width .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))),
html.tf-buttons.tf-buttons .sharing-btn.btn-full-width .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):hover {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

/* One tile per row on a phone without a share sheet: icons in a column beside their labels. */

@media only screen and (max-width: 767px) {

	html.tf-buttons.tf-buttons .share-section:not(.navigator-available) .sharing-btn:not(.btn-full-width) .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))),
	html.tf-buttons.tf-buttons .share-section:not(.navigator-available) .sharing-btn:not(.btn-full-width) .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):hover {
		flex-direction: row;
		justify-content: flex-start;
		gap: 14px;
		padding: 12px 20px;
		text-align: left;
	}

	html.tf-buttons.tf-buttons .share-section:not(.navigator-available) .sharing-btn:not(.btn-full-width) .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))) i {
		flex: none;
		width: 32px;
		margin-bottom: 0;
		line-height: 1;
		text-align: center;
	}

}

/* Buttons designed white on a dark banner or panel stay white, in the kit shape. */

html.tf-buttons.tf-buttons :is(.referral-upsell .referral-upsell-action, .event-organizer-panel--dark .event-organizer-newsletter .btn).btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):focus {
	outline-color: #ffffff;
}

html.tf-buttons.tf-buttons :is(.referral-upsell .referral-upsell-action, .event-organizer-panel--dark .event-organizer-newsletter .btn).btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))),
html.tf-buttons.tf-buttons :is(.referral-upsell .referral-upsell-action, .event-organizer-panel--dark .event-organizer-newsletter .btn).btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):hover {
	color: #16161a;
	background-color: #ffffff;
	background-image: none;
	border-color: #ffffff;
}

/*
 * The ticket quantity picker (built by quantity-selector-enhancement.js, not a .btn):
 * collapsed it is a small button reading "Select"; open it is a stepper. Both take
 * the button colour and the small button's height, so a ticket row's controls line up.
 */

html.tf-buttons.tf-buttons .quantity-selector-controls {
	height: 36px;
	background-color: var(--tf-btn);
	border: 1px solid var(--tf-btn-edge);
	border-radius: 6px;
	box-shadow: none;
}

html.tf-buttons.tf-buttons .quantity-selector-controls .quantity-btn,
html.tf-buttons.tf-buttons .quantity-selector-controls .quantity-btn:hover:not(.disabled),
html.tf-buttons.tf-buttons .quantity-selector-controls .quantity-btn:active:not(.disabled) {
	width: 36px;
	height: 34px;
	padding: 0;
	color: var(--tf-btn-text);
	background-color: var(--tf-btn);
	background-image: linear-gradient(180deg, var(--tf-btn-top) 0%, var(--tf-btn) 100%);
	border: 0;
}

/* The focus ring is drawn in the label colour, which always contrasts with the button's fill. */

html.tf-buttons.tf-buttons .quantity-selector-controls .quantity-btn:focus-visible {
	outline: 2px solid var(--tf-btn-text);
	outline-offset: -4px;
}

html.tf-buttons.tf-buttons .quantity-selector-controls .quantity-display {
	height: 34px;
	min-width: 36px;
	padding: 0 8px;
	font-family: inherit;
	color: #16161a;
	background-color: #ffffff;
}

html.tf-buttons.tf-buttons .quantity-selector-controls.quantity-selector-collapsed .quantity-plus,
html.tf-buttons.tf-buttons .quantity-selector-controls.quantity-selector-collapsed .quantity-plus:hover:not(.disabled) {
	width: auto;
	padding: 0 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	border-left: 0;
	box-shadow: none;
}

/* An add-on variant's remove button keeps its own line under the price. */

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).remove-variant.fa {
	display: flex;
}

/* Choosing a new time slot (account pages): compact choices, the chosen one ringed. */

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).slot-ticket-select {
	display: inline-block;
	width: auto;
}

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).slot-ticket-select.selected-slot {
	outline: 2px solid var(--tf-btn-ink);
	outline-offset: 2px;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.24);
}

/* The event page: the gift card promo is a tall card, rounded like the share tiles. */

html.tf-buttons.tf-buttons #buy-gift-card.btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))) {
	border-radius: 12px;
}

/* "select on map" and the quantity prompt read as sentences. */

html.tf-buttons.tf-buttons #buy-on-map.btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"])))::first-letter {
	text-transform: uppercase;
}

/*
 * The prompt shown before a quantity is chosen is a label (so it is excluded above). It
 * takes the shape of the buy button that replaces it, in the unavailable grey with
 * readable text; the template sets its size and background inline.
 */

html.tf-buttons.tf-buttons label#select-ticket-quantity.btn {
	box-sizing: border-box;
	min-height: 52px;
	padding: 14px 26px;
	font-family: inherit;
	font-size: 16px !important;
	font-weight: 600;
	line-height: 22px;
	text-transform: lowercase;
	text-shadow: none;
	color: var(--tf-btn-hint);
	background: var(--tf-btn-off) !important;
	border: 1px solid transparent;
	border-radius: 10px;
	box-shadow: none;
}

html.tf-buttons.tf-buttons label#select-ticket-quantity.btn::first-letter {
	text-transform: uppercase;
}

/* The seat map preview sizes its button by id. */

html.tf-buttons.tf-buttons .seat-map-preview #select-on-map-button.btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))) {
	height: auto;
	min-height: 52px;
	padding: 14px 26px;
	font-size: 16px;
	line-height: 22px;
	border-radius: 10px;
}

/* Account pages size their main buttons by id; the kit sizes win. */

html.tf-buttons.tf-buttons #profile_content .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-primary {
	font-size: 14px;
}

html.tf-buttons.tf-buttons #profile_content .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-primary:is(.btn-large, .btn-lg, .btn-buy-tickets) {
	font-size: 16px;
}

/* The order page's header actions (Sell order, Add to wallet, tax invoice) are one row of small buttons; the wallet dialog rendered among them keeps its own. */

html.tf-buttons.tf-buttons .order-header-actions .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):not(:where(.modal *)) {
	min-height: 36px;
	padding: 7px 16px;
	line-height: 20px;
	border-radius: 6px;
}

/* Buttons joined in a group keep their outer ends round. */

html.tf-buttons.tf-buttons .btn-group > .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))) {
	border-radius: 0;
}

html.tf-buttons.tf-buttons .btn-group > .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):first-child {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

html.tf-buttons.tf-buttons .btn-group > .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):last-child,
html.tf-buttons.tf-buttons .btn-group > .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).dropdown-toggle {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))) .caret {
	border-top-color: currentColor;
}

/*
 * Fields on buyer pages: 44px like the default button, in the look of the Stripe card
 * fields beside them at checkout (6px corners, a light border and soft shadow, a soft
 * focus ring in the button colour). Quantity pickers,
 * the currency switcher, search pills, payment provider fields and designed panels keep
 * their own look. Geometry only: colours stay with the page (and with dark mode).
 */

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], select:not([multiple]):not([size]), textarea):not(:where(.ticket-quantity, .quantity-select-hidden, .slot-ticket-quantity, .filter-slots, #change-currency, #login_password_trigger, .big-radio-button, .select2-hidden-accessible, .iti__search-input, .StripeElement, .add-on, .input-field *, .modal-window *, .auction-amount-input *, .event-organizer-panel *, [class*="adyen-checkout"], .select2-container *, .input-append *, .input-prepend *)) {
	box-sizing: border-box;
	min-height: 44px;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
	border-width: 1px;
	border-style: solid;
	border-color: var(--tf-field-border);
	border-radius: 6px;
	box-shadow: var(--tf-field-shadow);
	-webkit-transition: border-color 0.15s ease, box-shadow 0.15s ease;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :where(select:not([multiple]):not([size])):not(:where(.ticket-quantity, .quantity-select-hidden, .slot-ticket-quantity, .filter-slots, #change-currency, #login_password_trigger, .big-radio-button, .select2-hidden-accessible, .iti__search-input, .StripeElement, .add-on, .input-field *, .modal-window *, .auction-amount-input *, .event-organizer-panel *, [class*="adyen-checkout"], .select2-container *, .input-append *, .input-prepend *)) {
	padding-right: 36px;
}

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :where(textarea):not(:where(.ticket-quantity, .quantity-select-hidden, .slot-ticket-quantity, .filter-slots, #change-currency, #login_password_trigger, .big-radio-button, .select2-hidden-accessible, .iti__search-input, .StripeElement, .add-on, .input-field *, .modal-window *, .auction-amount-input *, .event-organizer-panel *, [class*="adyen-checkout"], .select2-container *, .input-append *, .input-prepend *)) {
	min-height: 96px;
}

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], select:not([multiple]):not([size]), textarea):not(:where(.ticket-quantity, .quantity-select-hidden, .slot-ticket-quantity, .filter-slots, #change-currency, #login_password_trigger, .big-radio-button, .select2-hidden-accessible, .iti__search-input, .StripeElement, .add-on, .input-field *, .modal-window *, .auction-amount-input *, .event-organizer-panel *, [class*="adyen-checkout"], .select2-container *, .input-append *, .input-prepend *)):focus {
	outline: 2px solid transparent;
	border-color: var(--tf-btn-ink);
	box-shadow: var(--tf-field-shadow), 0 0 0 3px var(--tf-btn-ring);
}

/* A field the page marks as wrong shows it in red. */

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :is(.invalid-field, [aria-invalid="true"]):not(:where(.ticket-quantity, .quantity-select-hidden, .slot-ticket-quantity, .filter-slots, #change-currency, #login_password_trigger, .big-radio-button, .select2-hidden-accessible, .iti__search-input, .StripeElement, .add-on, .input-field *, .modal-window *, .auction-amount-input *, .event-organizer-panel *, [class*="adyen-checkout"], .select2-container *, .input-append *, .input-prepend *)),
html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :is(.control-group, .form-group).error :where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], select:not([multiple]):not([size]), textarea):not(:where(.ticket-quantity, .quantity-select-hidden, .slot-ticket-quantity, .filter-slots, #change-currency, #login_password_trigger, .big-radio-button, .select2-hidden-accessible, .iti__search-input, .StripeElement, .add-on, .input-field *, .modal-window *, .auction-amount-input *, .event-organizer-panel *, [class*="adyen-checkout"], .select2-container *, .input-append *, .input-prepend *)) {
	border-color: var(--tf-btn-danger);
}

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :is(.invalid-field, [aria-invalid="true"]):not(:where(.ticket-quantity, .quantity-select-hidden, .slot-ticket-quantity, .filter-slots, #change-currency, #login_password_trigger, .big-radio-button, .select2-hidden-accessible, .iti__search-input, .StripeElement, .add-on, .input-field *, .modal-window *, .auction-amount-input *, .event-organizer-panel *, [class*="adyen-checkout"], .select2-container *, .input-append *, .input-prepend *)):focus,
html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :is(.control-group, .form-group).error :where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], select:not([multiple]):not([size]), textarea):not(:where(.ticket-quantity, .quantity-select-hidden, .slot-ticket-quantity, .filter-slots, #change-currency, #login_password_trigger, .big-radio-button, .select2-hidden-accessible, .iti__search-input, .StripeElement, .add-on, .input-field *, .modal-window *, .auction-amount-input *, .event-organizer-panel *, [class*="adyen-checkout"], .select2-container *, .input-append *, .input-prepend *)):focus {
	border-color: var(--tf-btn-danger);
	box-shadow: var(--tf-field-shadow), 0 0 0 3px rgba(180, 35, 24, 0.2);
}

/* A button on the same line as a field lines up with it. */

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], select:not([multiple]):not([size]), textarea) + .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))) {
	margin-top: 0;
	vertical-align: top;
}

/* The phone number field rounds its country picker with the field. */

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) .iti__selected-country-primary {
	border-radius: 5px 0 0 5px;
}

/* Searchable pickers match the fields. */

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) .select2-container .select2-selection--single {
	height: 44px;
	border-color: var(--tf-field-border);
	border-radius: 6px;
	box-shadow: var(--tf-field-shadow);
}

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) .select2-container .select2-selection--single .select2-selection__rendered {
	padding-left: 14px;
	line-height: 42px;
}

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) .select2-container .select2-selection--single .select2-selection__arrow {
	height: 42px;
	right: 8px;
}

/*
 * Phones: buttons and fields grow to a 44px touch target (40px for small buttons) and
 * stay the same height side by side. Field text is 16px, which stops phones zooming in.
 */

@media only screen and (max-width: 767px) {

	html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))),
	html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):hover {
		min-height: 44px;
		padding-top: 11px;
		padding-bottom: 11px;
		border-radius: 8px;
	}

	/* Large buttons keep their size when tapped. */

	html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is(.btn-large, .btn-lg, .btn-buy-tickets),
	html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is(.btn-large, .btn-lg, .btn-buy-tickets):hover {
		min-height: 52px;
		padding-top: 14px;
		padding-bottom: 14px;
		border-radius: 10px;
	}

	html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-small,
	html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-sm,
	html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-mini,
	html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-xs,
	html.tf-buttons.tf-buttons .order-header-actions .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):not(:where(.modal *)) {
		min-height: 40px;
		padding-top: 9px;
		padding-bottom: 9px;
		border-radius: 6px;
	}

	html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).fa {
		min-width: 44px;
	}

	html.tf-buttons.tf-buttons .quantity-selector-controls {
		height: 40px;
		border-radius: 6px;
	}

	html.tf-buttons.tf-buttons .quantity-selector-controls .quantity-btn,
	html.tf-buttons.tf-buttons .quantity-selector-controls .quantity-btn:hover:not(.disabled),
	html.tf-buttons.tf-buttons .quantity-selector-controls .quantity-btn:active:not(.disabled),
	html.tf-buttons.tf-buttons .quantity-selector-controls .quantity-display {
		height: 38px;
	}

	html.tf-buttons.tf-buttons .quantity-selector-controls .quantity-btn,
	html.tf-buttons.tf-buttons .quantity-selector-controls .quantity-btn:hover:not(.disabled),
	html.tf-buttons.tf-buttons .quantity-selector-controls .quantity-btn:active:not(.disabled) {
		width: 40px;
	}

	html.tf-buttons.tf-buttons .quantity-selector-controls.quantity-selector-collapsed .quantity-plus,
	html.tf-buttons.tf-buttons .quantity-selector-controls.quantity-selector-collapsed .quantity-plus:hover:not(.disabled) {
		width: auto;
	}

	html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], select:not([multiple]):not([size]), textarea):not(:where(.ticket-quantity, .quantity-select-hidden, .slot-ticket-quantity, .filter-slots, #change-currency, #login_password_trigger, .big-radio-button, .select2-hidden-accessible, .iti__search-input, .StripeElement, .add-on, .input-field *, .modal-window *, .auction-amount-input *, .event-organizer-panel *, [class*="adyen-checkout"], .select2-container *, .input-append *, .input-prepend *)) {
		min-height: 44px;
		padding-top: 11px;
		padding-bottom: 11px;
		font-size: 16px;
		line-height: 20px;
	}

	html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :where(textarea):not(:where(.ticket-quantity, .quantity-select-hidden, .slot-ticket-quantity, .filter-slots, #change-currency, #login_password_trigger, .big-radio-button, .select2-hidden-accessible, .iti__search-input, .StripeElement, .add-on, .input-field *, .modal-window *, .auction-amount-input *, .event-organizer-panel *, [class*="adyen-checkout"], .select2-container *, .input-append *, .input-prepend *)) {
		min-height: 96px;
	}

	html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) .select2-container .select2-selection--single {
		height: 44px;
	}

	html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) .select2-container .select2-selection--single .select2-selection__rendered {
		line-height: 42px;
	}

	html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) .select2-container .select2-selection--single .select2-selection__arrow {
		height: 42px;
	}

}

/*
 * Checkboxes and radios: the browser's own controls in the event's readable colour,
 * 18px with room beside their labels, and the fields' focus ring. Controls drawn by
 * the page (add-on ticks, switches, tiles, third-party and payment provider controls)
 * are left to their own rules below or untouched.
 */

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :where(input[type="checkbox"], input[type="radio"]):not(:where(.payment-plan, .protectgroup-radio, .ps-checkbox, .accordion-radio, .big-radio-button, .big-radio-button *, .security-method-toggle *, .switch *, .xendit_payment_method_selector *, .modal-window *, .event-organizer-panel *)) {
	accent-color: var(--tf-btn-ink);
	cursor: pointer;
}

/* Sized unless the template fixes a width inline; the 13px some opt-ins fix is raised to match. */

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :where(input[type="checkbox"], input[type="radio"]):not(:where(.payment-plan, .protectgroup-radio, .ps-checkbox, .accordion-radio, .big-radio-button, .big-radio-button *, .security-method-toggle *, .switch *, .xendit_payment_method_selector *, .modal-window *, .event-organizer-panel *)):not(.checkbox):not(:is([style^="width" i], [style*=" width" i], [style*=";width" i])) {
	width: 18px;
	height: 18px;
}

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :where(input[type="checkbox"], input[type="radio"]):not(:where(.payment-plan, .protectgroup-radio, .ps-checkbox, .accordion-radio, .big-radio-button, .big-radio-button *, .security-method-toggle *, .switch *, .xendit_payment_method_selector *, .modal-window *, .event-organizer-panel *)):not(.checkbox):is([style*="width: 13px" i], [style*="width:13px" i]) {
	width: 18px !important;
	height: 18px;
}

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :where(input[type="checkbox"], input[type="radio"]):not(:where(.payment-plan, .protectgroup-radio, .ps-checkbox, .accordion-radio, .big-radio-button, .big-radio-button *, .security-method-toggle *, .switch *, .xendit_payment_method_selector *, .modal-window *, .event-organizer-panel *)):focus-visible {
	outline: 2px solid var(--tf-btn-ink);
	outline-offset: 2px;
}

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :where(input[type="checkbox"], input[type="radio"]):not(:where(.payment-plan, .protectgroup-radio, .ps-checkbox, .accordion-radio, .big-radio-button, .big-radio-button *, .security-method-toggle *, .switch *, .xendit_payment_method_selector *, .modal-window *, .event-organizer-panel *)):disabled {
	cursor: not-allowed;
}

/* Bootstrap's checkbox and radio labels make room for the larger control (browsers without :has() keep Bootstrap's gutter). */

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :is(label.checkbox, label.radio):not(:where(.big-radio-button, .modern_radio_label, .data_capture_radio_label)):not([style*="padding" i]):has(> :where(input[type="checkbox"], input[type="radio"]):not(:where(.payment-plan, .protectgroup-radio, .ps-checkbox, .accordion-radio, .big-radio-button, .big-radio-button *, .security-method-toggle *, .switch *, .xendit_payment_method_selector *, .modal-window *, .event-organizer-panel *)):not(.checkbox):not(:is([style^="width" i], [style*=" width" i], [style*=";width" i])):not([style*="margin" i])) {
	padding-left: 28px;
}

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :is(label.checkbox, label.radio):not(:where(.big-radio-button, .modern_radio_label, .data_capture_radio_label)):not([style*="padding" i]):has(> :where(input[type="checkbox"], input[type="radio"]):not(:where(.payment-plan, .protectgroup-radio, .ps-checkbox, .accordion-radio, .big-radio-button, .big-radio-button *, .security-method-toggle *, .switch *, .xendit_payment_method_selector *, .modal-window *, .event-organizer-panel *)):not(.checkbox):not(:is([style^="width" i], [style*=" width" i], [style*=";width" i])):not([style*="margin" i])) > :where(input[type="checkbox"], input[type="radio"]):not(:where(.payment-plan, .protectgroup-radio, .ps-checkbox, .accordion-radio, .big-radio-button, .big-radio-button *, .security-method-toggle *, .switch *, .xendit_payment_method_selector *, .modal-window *, .event-organizer-panel *)):not(.checkbox):not(:is([style^="width" i], [style*=" width" i], [style*=";width" i])):not([style*="margin" i]) {
	margin-top: 1px;
	margin-left: -28px;
}

/* The add-on tick box at checkout: the event colour instead of green, with a focus ring. */

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) input[type="checkbox"].checkbox {
	border-color: var(--tf-btn-field-line);
	border-radius: 6px;
}

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) input[type="checkbox"].checkbox:checked {
	border-color: var(--tf-btn-ink);
	background-color: var(--tf-btn-ink);
}

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) input[type="checkbox"].checkbox:checked::before {
	color: var(--tf-btn-ink-text);
}

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) input[type="checkbox"].checkbox:focus-visible {
	outline: 2px solid var(--tf-btn-ink);
	outline-offset: 2px;
}

/*
 * The payment plan switches: a 44px track in the event colour with a round knob.
 * Browsers without :has() keep the switch as it is.
 */

html.tf-buttons.tf-buttons label.switch:has(> input.payment-plan) {
	width: 44px;
	height: 24px;
	flex: none;
}

html.tf-buttons.tf-buttons label.switch:has(> input.payment-plan) > .slider {
	background-color: var(--tf-btn-field-line);
	border-radius: 12px;
}

html.tf-buttons.tf-buttons label.switch:has(> input.payment-plan) > .slider::before {
	width: 18px;
	height: 18px;
	left: 3px;
	bottom: 3px;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}

html.tf-buttons.tf-buttons label.switch:has(> input.payment-plan) > input:checked + .slider {
	background-color: var(--tf-btn-ink);
}

html.tf-buttons.tf-buttons label.switch:has(> input.payment-plan) > input:checked + .slider::before {
	background-color: var(--tf-btn-ink-text);
	-webkit-transform: translateX(20px);
	transform: translateX(20px);
}

html.tf-buttons.tf-buttons label.switch:has(> input.payment-plan) > input:focus-visible + .slider {
	box-shadow: none;
	outline: 2px solid var(--tf-btn-ink);
	outline-offset: 2px;
}

/* Placeholder text readable against the field (4.5:1), and error messages in a readable red. */

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], select:not([multiple]):not([size]), textarea):not(:where(.ticket-quantity, .quantity-select-hidden, .slot-ticket-quantity, .filter-slots, #change-currency, #login_password_trigger, .big-radio-button, .select2-hidden-accessible, .iti__search-input, .StripeElement, .add-on, .input-field *, .modal-window *, .auction-amount-input *, .event-organizer-panel *, [class*="adyen-checkout"], .select2-container *, .input-append *, .input-prepend *))::placeholder {
	color: #6e6e78;
	opacity: 1;
}

/* The fields an event in dark mode darkens get a light placeholder. */

html.tf-buttons:has(link[href*="/css/colors/dark.css"]) :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :is(input:is([type="text"], [type="password"], [type="tel"], [type="email"]).form-control, textarea.form-control):not(:where(.ticket-quantity, .quantity-select-hidden, .slot-ticket-quantity, .filter-slots, #change-currency, #login_password_trigger, .big-radio-button, .select2-hidden-accessible, .iti__search-input, .StripeElement, .add-on, .input-field *, .modal-window *, .auction-amount-input *, .event-organizer-panel *, [class*="adyen-checkout"], .select2-container *, .input-append *, .input-prepend *))::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) .text-error,
html.tf-buttons.tf-buttons :where(#profile_content, .account-page-inner, .login-wrapper, .order-page-wrap, .checkout-block, .white-rounded-block, .ticket_types_wrap, .sticky-container, .modal) :is(.control-group, .form-group).error :is(.control-label, label, .help-block, .help-inline) {
	color: var(--tf-btn-error-text);
}

/* The searchable picker's list (opened at the end of the page; the header search keeps its own) matches the fields. The list is always light. */

html.tf-buttons.tf-buttons body > .select2-container--open .select2-dropdown {
	overflow: hidden;
	border: 1px solid var(--tf-field-border);
	border-radius: 6px;
	box-shadow: 0 12px 32px rgba(16, 16, 22, 0.16);
}

html.tf-buttons.tf-buttons body > .select2-container--open .select2-dropdown--below {
	margin-top: 4px;
}

html.tf-buttons.tf-buttons body > .select2-container--open .select2-dropdown--above {
	margin-top: -4px;
}

html.tf-buttons.tf-buttons body > .select2-container--open .select2-results__option {
	padding: 10px 14px;
}

html.tf-buttons.tf-buttons body > .select2-container--open .select2-results__option[aria-selected="true"] {
	background-color: var(--tf-btn-tint-strong);
}

html.tf-buttons.tf-buttons body > .select2-container--open .select2-results__option--highlighted[aria-selected] {
	color: #ffffff;
	background-color: var(--tf-btn-line);
}

html.tf-buttons.tf-buttons body > .select2-container--open .select2-search--dropdown .select2-search__field {
	min-height: 36px;
	padding: 7px 12px;
	border: 1px solid var(--tf-field-border);
	border-radius: 4px;
}

/*
 * Message panels (Bootstrap alerts): soft tinted panels with readable dark text. Shape
 * here; colours in a weaker tier so an event in dark mode keeps its own.
 */

html.tf-buttons.tf-buttons .alert {
	padding: 14px 16px;
	font-size: 15px;
	line-height: 22px;
	text-shadow: none;
	border-width: 1px;
	border-style: solid;
	border-radius: 10px;
}

:where(html.tf-buttons) .alert {
	color: #5c4300;
	background-color: #fff8e6;
	border-color: #f3e2ad;
}

:where(html.tf-buttons) .alert-info {
	color: #133a5e;
	background-color: #eef5fc;
	border-color: #d3e3f4;
}

:where(html.tf-buttons) .alert-success {
	color: #14532d;
	background-color: #effaf2;
	border-color: #cdebd6;
}

:where(html.tf-buttons) :is(.alert-error, .alert-danger) {
	color: #7f1d1d;
	background-color: #fdf0ef;
	border-color: #f5d0cc;
}

html.tf-buttons.tf-buttons .alert :is(h4, strong, b),
html.tf-buttons.tf-buttons .alert-success a {
	color: inherit;
}

/* The close button sits inside the panel's padding. */

html.tf-buttons.tf-buttons .alert .close {
	right: -4px;
	top: -1px;
	margin-left: 12px;
}

/* Hover lifts only where a pointer can hover, so a tap never leaves a button raised. */

@media (hover: hover) {

	html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):hover {
		text-decoration: none;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 30px var(--tf-btn-halo);
		-webkit-transform: translateY(-2px);
		transform: translateY(-2px);
	}

	html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is(.btn-danger, .remove-variant):hover {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 30px rgba(180, 35, 24, 0.35);
	}

	/* Checkout and dialogs stay still: no lift or glow on hover. */

	html.tf-buttons.tf-buttons :is(.checkout-block, .modal) .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):hover {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
		-webkit-transform: none;
		transform: none;
	}

	html.tf-buttons.tf-buttons .modal .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):not(:where(.btn-primary, .btn-success, .btn-info, .btn-buy-tickets, .btn-next-step, .btn-inverse, .btn-danger, .btn-link)):is(:has(~ :is(.btn-primary, .btn-success, .btn-info, .btn-buy-tickets, .btn-next-step, .btn-danger)), :is(.btn-primary, .btn-success, .btn-info, .btn-buy-tickets, .btn-next-step, .btn-danger) ~ *):hover {
		background-image: linear-gradient(var(--tf-btn-ghost-hover), var(--tf-btn-ghost-hover));
		box-shadow: none;
		-webkit-transform: translateY(-1px);
		transform: translateY(-1px);
	}

	html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))).btn-link:hover {
		box-shadow: none;
		text-decoration: underline;
		text-underline-offset: 3px;
		-webkit-transform: none;
		transform: none;
	}

}

/* Unavailable: last and weightier, so it wins over every variant and hover. */

html.tf-buttons.tf-buttons .btn.btn.btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is(.disabled, [disabled]):not([aria-busy="true"]),
html.tf-buttons.tf-buttons .btn.btn.btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is(.disabled, [disabled]):not([aria-busy="true"]):hover,
html.tf-buttons.tf-buttons .btn.btn.btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is(.disabled, [disabled]):not([aria-busy="true"]):active {
	color: var(--tf-btn-off-text);
	background-color: var(--tf-btn-off);
	background-image: none;
	border-color: transparent;
	box-shadow: none;
	opacity: 1;
	cursor: not-allowed;
	-webkit-transform: none;
	transform: none;
}

/* Working (a payment in progress, so disabled and busy): the button keeps its colour and shows a spinner. */

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"])))[aria-busy="true"]:is([disabled], .disabled),
html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"])))[aria-busy="true"]:is([disabled], .disabled):hover {
	cursor: progress;
	opacity: 0.85;
	-webkit-transform: none;
	transform: none;
}

html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"])))[aria-busy="true"]:is([disabled], .disabled)::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: 10px;
	vertical-align: -0.15em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	-webkit-animation: tf-buttons-spin 0.7s linear infinite;
	animation: tf-buttons-spin 0.7s linear infinite;
}

@keyframes tf-buttons-spin {
	to {
		transform: rotate(360deg);
	}
}

/* An event in dark mode forces its buy and dialog buttons yellow; unavailable ones fade. */

html.tf-buttons:has(link[href*="/css/colors/dark.css"]) .btn.btn.btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is(.disabled, [disabled]):not([aria-busy="true"]):is(.btn-buy-tickets, .modal-scrollable .btn) {
	opacity: 0.55;
}

/* The seat map styles its unavailable buy button by id. */

html.tf-buttons.tf-buttons #add_to_cart_map_tickets.btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):is(.disabled, [disabled]) {
	background-color: var(--tf-btn-off);
}

@media (prefers-reduced-motion: reduce) {

	html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))),
	html.tf-buttons.tf-buttons .btn:not(:where(.btn-navbar, .btn-twitch, .btn-spotify, .btn-filter, .phone-first-whatsapp-btn, .ui-datepicker-trigger, label, .sharing-btns > .btn, .sharing-btn-prereg .btn, .change-card, :has(> img[src*="faceit_logo"]))):hover {
		-webkit-transition: none;
		transition: none;
		-webkit-transform: none;
		transform: none;
	}

}