/* ============================================
   TMF Attendee Registration Form
   Payer block, companion seat and the two toggles

   Note on specificity: the theme's own events.css sets
   .tribe-common .tribe-tickets__form-field       { display: flex !important }
   .tribe-common .tribe-tickets__form-field-input { width: 100% !important }
   both at two-class specificity, so every rule here that competes with those
   has to out-specify them. A plain .tmf-* selector silently loses.
   ============================================ */

/* Hidden sections. The class is set by attendee-form.js, which also sets an
   inline display so hiding does not depend on this file loading at all. */
.tmf-field--hidden,
.tribe-common .tribe-tickets__form-field.tmf-field--hidden {
	display: none !important;
}

/* --- Toggles --- */

/* The toggle carries no field label of its own; the option text is the label. */
.tribe-common .tmf-toggle > header.tribe-tickets__form-field-label {
	display: none !important;
}

.tribe-common .tmf-toggle .tribe-common-form-control-checkbox__label {
	display: flex !important;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
	line-height: 1.4;
}

/* The knob is drawn as a background gradient, not a pseudo-element: ::before
   and ::after are not rendered on input elements. */
.tribe-common .tmf-toggle input.tribe-tickets__form-field-input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: 2.75rem !important;
	min-width: 2.75rem;
	height: 1.5rem;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: var(--tmf-radius-full, 999px) !important;
	/* events.css sets `background: #fff !important` on every ticket form input,
	   and the shorthand resets background-image too, so both need !important
	   here or the switch renders white on white with no knob. */
	background-color: #cfd6da !important;
	background-image: radial-gradient(circle 0.5rem at 0.75rem 50%, #fff 96%, transparent 97%) !important;
	background-repeat: no-repeat !important;
	background-position: 0 0 !important;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, background-position 0.15s ease;
}

/* Event Tickets draws its own tick with a ::before on the input, which lands
   inside the switch track next to the knob. */
.tribe-common .tmf-toggle input.tribe-tickets__form-field-input[type="checkbox"]::before,
.tribe-common .tmf-toggle input.tribe-tickets__form-field-input[type="checkbox"]::after {
	content: none !important;
	display: none !important;
}

.tribe-common .tmf-toggle input.tribe-tickets__form-field-input[type="checkbox"]:checked {
	background-color: var(--tmf-secondary, #006f8b) !important;
	background-position: 1.25rem 0 !important;
}

.tribe-common .tmf-toggle input.tribe-tickets__form-field-input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--tmf-accent, #ff5b04);
	outline-offset: 2px;
}

/* --- Conditionally required fields --- */

/* These are not required in the field configuration (that would block checkout
   while they are hidden), so Event Tickets does not render its own asterisk.
   The field is only ever visible when it is genuinely required, so marking it
   here is accurate. The input itself carries required/aria-required, set by
   attendee-form.js, so assistive tech is told independently of this. */
.tribe-common .tmf-required-when-shown .tribe-tickets__form-field-label::after {
	content: "*";
	margin-left: 0.25rem;
	color: #d63638;
}

/* --- Companion name --- */

/* The explanation belongs above the input, and the field description renders
   after it, so the wrapper is reordered rather than the markup changed. */
.tribe-common .tmf-field--companion .tribe-tickets__form-field-input-wrapper {
	display: flex;
	flex-direction: column;
}

.tribe-common .tmf-field--companion .tribe-tickets__form-field-description {
	order: -1;
	margin: 0 0 0.5rem;
	color: var(--tmf-muted, #5b6b73);
}

/* --- Payer block --- */

.tribe-common .tmf-payer-heading {
	margin: 1.25rem 0 0.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--tmf-border, #dfe4e7);
	font-weight: 600;
	color: var(--tmf-primary, #16232a);
}

.tribe-common .tmf-field--payer {
	padding-left: 0.875rem;
	border-left: 3px solid var(--tmf-border, #dfe4e7);
}

/* Tilvísun is a textarea: taller than a single line to start with, and the
   buyer can drag it further. resize is set explicitly because a global
   resize:none would otherwise take the handle away. */
.tribe-common .tmf-field--reference textarea.tribe-tickets__form-field-input {
	min-height: 6rem;
	resize: vertical !important;
	line-height: 1.5;
}