/**
 * CSS-only circled tick indicators.
 * Replaces unticked-circle-*.svg / tick-circled-*.svg background images.
 *
 * Pattern (matching /contact/):
 *  - ::after (or primary pseudo) = empty circle via border + border-radius
 *  - ::before (or secondary pseudo when checked) = rotated-border checkmark
 */

:root {
	--integra-tick-size: 24px;
	--integra-tick-stroke: 2.5px;
	--integra-tick-color: #292D32;
}

/* -------------------------------------------------------------------------- */
/* Gravity Forms radios + standard checkboxes (exclude .CustomCheckboxes)     */
/* -------------------------------------------------------------------------- */

body.redesign .gfield_radio .gchoice > input + label,
.gfield_radio .gchoice > input + label,
body.redesign li.gfield--type-checkbox:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input + label,
li.gfield--type-checkbox:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input + label,
body.redesign .gfield_checkbox:not(.CustomCheckboxes) .gchoice > input + label,
body.redesign li:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input + label,
li:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input + label {
	display: inline-flex !important;
	align-items: center !important;
	flex-direction: row !important;
	gap: 10px;
	position: relative;
	vertical-align: middle;
	line-height: 1;
}

body.redesign .gfield_radio .gchoice > input + label::after,
.gfield_radio .gchoice > input + label::after,
body.redesign li.gfield--type-checkbox:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input + label::after,
li.gfield--type-checkbox:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input + label::after,
body.redesign li:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input + label::after,
li:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input + label::after,
ul.gfield_radio .gchoice > input + label::after,
body.redesign.contact li.gfield--type-checkbox:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input + label::after,
body.redesign li.gfield--type-checkbox:not(.CustomCheckboxes) ul.gfield_checkbox .gchoice > input + label::after {
	content: '' !important;
	order: -1;
	flex: 0 0 var(--integra-tick-size);
	width: var(--integra-tick-size) !important;
	height: var(--integra-tick-size) !important;
	min-width: var(--integra-tick-size);
	min-height: var(--integra-tick-size);
	border: var(--integra-tick-stroke) solid var(--integra-tick-color) !important;
	border-radius: 50%;
	background: none !important;
	background-image: none !important;
	background-size: unset !important;
	background-repeat: unset !important;
	box-sizing: border-box;
	display: block !important;
	position: static !important;
	left: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	transform: none !important;
	box-shadow: none !important;
}

body.redesign .gfield_radio .gchoice > input:checked + label::before,
.gfield_radio .gchoice > input:checked + label::before,
body.redesign li.gfield--type-checkbox:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input:checked + label::before,
li.gfield--type-checkbox:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input:checked + label::before,
body.redesign li:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input:checked + label::before,
li:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input:checked + label::before,
ul.gfield_radio .gchoice > input:checked + label::before,
body.redesign.contact li.gfield--type-checkbox:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input:checked + label::before,
body.redesign li.gfield--type-checkbox:not(.CustomCheckboxes) ul.gfield_checkbox .gchoice > input:checked + label::before {
	content: '';
	position: absolute;
	left: 9px;
	top: 50%;
	width: 6px;
	height: 10px;
	margin-top: -6px;
	border: solid var(--integra-tick-color);
	border-width: 0 var(--integra-tick-stroke) var(--integra-tick-stroke) 0;
	transform: rotate(45deg);
	box-sizing: border-box;
	pointer-events: none;
	z-index: 1;
	background: none !important;
	background-image: none !important;
}

body.redesign .gfield_radio .gchoice > input:not(:checked) + label::before,
.gfield_radio .gchoice > input:not(:checked) + label::before,
body.redesign li.gfield--type-checkbox:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input:not(:checked) + label::before,
li.gfield--type-checkbox:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input:not(:checked) + label::before,
body.redesign li:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input:not(:checked) + label::before,
li:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input:not(:checked) + label::before {
	content: none;
}

/* Override SVG background-image swaps on checked ::after */
body.redesign .gfield_radio .gchoice > input:checked + label::after,
.gfield_radio .gchoice > input:checked + label::after,
body.redesign li:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input:checked + label::after,
li:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input:checked + label::after,
ul.gfield_radio .gchoice > input:checked + label::after,
body.redesign.contact li.gfield--type-checkbox:not(.CustomCheckboxes) .gfield_checkbox .gchoice > input:checked + label::after,
body.redesign li.gfield--type-checkbox:not(.CustomCheckboxes) ul.gfield_checkbox .gchoice > input:checked + label::after {
	background-image: none !important;
	background: none !important;
}

/* Keep CustomCheckboxes underline style free of circle ticks */
body.redesign .CustomCheckboxes .gfield_checkbox .gchoice > input + label::after,
.CustomCheckboxes .gfield_checkbox .gchoice > input + label::after,
body.redesign .CustomCheckboxes .gfield_checkbox .gchoice > input:checked + label::before,
.CustomCheckboxes .gfield_checkbox .gchoice > input:checked + label::before {
	content: none !important;
	display: none !important;
	border: none !important;
	background: none !important;
	background-image: none !important;
	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Login With Ajax – "Remember me" checkbox                                   */
/* -------------------------------------------------------------------------- */

body.redesign .lwa-form .grid-container.submit .lwa-links label input[type="checkbox"] {
	position: relative !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	width: var(--integra-tick-size) !important;
	height: var(--integra-tick-size) !important;
	min-width: var(--integra-tick-size) !important;
	margin: 0 !important;
	flex: 0 0 var(--integra-tick-size);
}

body.redesign .lwa-form .grid-container.submit .lwa-links label input[type="checkbox"]::after {
	content: '' !important;
	display: block !important;
	width: var(--integra-tick-size) !important;
	height: var(--integra-tick-size) !important;
	min-width: var(--integra-tick-size) !important;
	border: var(--integra-tick-stroke) solid var(--integra-tick-color) !important;
	border-radius: 50%;
	background: none !important;
	background-image: none !important;
	background-color: transparent !important;
	box-sizing: border-box;
	position: relative !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	opacity: 1 !important;
}

body.redesign .lwa-form .grid-container.submit .lwa-links label input[type="checkbox"]::before {
	content: none;
}

body.redesign .lwa-form .grid-container.submit .lwa-links label input[type="checkbox"]:checked::before {
	content: '' !important;
	position: absolute !important;
	left: 8px !important;
	top: 4px !important;
	width: 6px;
	height: 10px;
	border: solid var(--integra-tick-color);
	border-width: 0 var(--integra-tick-stroke) var(--integra-tick-stroke) 0;
	transform: rotate(45deg) !important;
	box-sizing: border-box;
	background: none !important;
	background-image: none !important;
	z-index: 1;
	opacity: 1 !important;
}

body.redesign .lwa-form .grid-container.submit .lwa-links label input[type="checkbox"]:checked::after {
	background-image: none !important;
	background: none !important;
}

/* -------------------------------------------------------------------------- */
/* Checkout – terms / privacy checkboxes                                      */
/* Circle on ::before; tick on ::after (contact pattern).                     */
/* Must beat checkout-blocks.css which sets ::after { content: none }.        */
/* -------------------------------------------------------------------------- */

.edd-terms-agreement > input[type="checkbox"] ~ label,
.edd-privacy-policy-agreement > input[type="checkbox"] ~ label,
label[for="edd_agree_to_terms"],
label[for="edd-agree-to-privacy-policy"] {
	position: relative !important;
}

.edd-terms-agreement > input[type="checkbox"] ~ label::before,
.edd-privacy-policy-agreement > input[type="checkbox"] ~ label::before,
label[for="edd_agree_to_terms"]::before,
label[for="edd-agree-to-privacy-policy"]::before {
	content: '' !important;
	position: absolute !important;
	left: -23px !important;
	top: -1px !important;
	width: 22px !important;
	height: 22px !important;
	margin: 0 !important;
	border: var(--integra-tick-stroke) solid var(--integra-tick-color) !important;
	border-radius: 50% !important;
	background: none !important;
	background-image: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	display: block !important;
	opacity: 1 !important;
}

.edd-terms-agreement > input[type="checkbox"]:checked ~ label::before,
.edd-privacy-policy-agreement > input[type="checkbox"]:checked ~ label::before,
input[type="checkbox"]#edd_agree_to_terms:checked ~ label[for="edd_agree_to_terms"]::before,
input[type="checkbox"]#edd-agree-to-privacy-policy:checked ~ label::before {
	border: var(--integra-tick-stroke) solid var(--integra-tick-color) !important;
	background: none !important;
	background-image: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.edd-terms-agreement > input[type="checkbox"] ~ label::after,
.edd-privacy-policy-agreement > input[type="checkbox"] ~ label::after,
label[for="edd_agree_to_terms"]::after,
label[for="edd-agree-to-privacy-policy"]::after {
	content: none !important;
}

.edd-terms-agreement > input[type="checkbox"]:checked ~ label::after,
.edd-privacy-policy-agreement > input[type="checkbox"]:checked ~ label::after,
input[type="checkbox"]#edd_agree_to_terms:checked ~ label[for="edd_agree_to_terms"]::after,
input[type="checkbox"]#edd-agree-to-privacy-policy:checked ~ label::after,
#edd_checkout_form_wrap .edd-terms-agreement > input[type="checkbox"]:checked ~ label[for="edd_agree_to_terms"]::after,
#edd_checkout_form_wrap .edd-privacy-policy-agreement > input[type="checkbox"]:checked ~ label::after {
	content: '' !important;
	position: absolute !important;
	left: -15px !important;
	top: 3px !important;
	width: 6px !important;
	height: 10px !important;
	min-height: 10px !important;
	border: solid var(--integra-tick-color) !important;
	border-width: 0 var(--integra-tick-stroke) var(--integra-tick-stroke) 0 !important;
	border-radius: 0 !important;
	transform: rotate(45deg) !important;
	box-sizing: border-box !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	pointer-events: none !important;
	z-index: 2 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	text-indent: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
}

/* -------------------------------------------------------------------------- */
/* Checkout section completion indicators                                     */
/* Same pattern as /contact/: ::after = circle, second pseudo = border-tick.  */
/*                                                                            */
/* Blocks personal-info (#edd_checkout_user_info.Completed):                  */
/*   Markup is fieldset > span > legend ("Personal info")                     */
/*   Circle on legend::after; tick on legend::before when .Completed          */
/* -------------------------------------------------------------------------- */

body.redesign #edd-first-name-wrap,
.edd-blocks-form__group.edd-blocks-form__group-username,
#edd_checkout_user_info,
#edd_checkout_user_info > span > legend,
#edd_cc_address,
.cc-address.edd-blocks-form,
#edd_cc_fields legend,
#customLoginSection + span legend {
	position: relative;
	background-image: none !important;
}

body.redesign #edd-first-name-wrap::before,
#edd_checkout_user_info::before,
#edd_cc_address::before,
.cc-address.edd-blocks-form::before,
#edd_cc_fields legend,
#edd_checkout_user_info > span > legend,
#customLoginSection + span legend {
	background-image: none !important;
	padding-right: 30px;
	box-sizing: border-box;
}

/* Circle — do not put a second circle on #edd_checkout_user_info::after;
   the indicator lives on the Personal-info legend inside the fieldset.
   Password section circle/tick live on username::before (title host) instead. */
body.redesign #edd-first-name-wrap::after,
#edd_cc_address::after,
.cc-address.edd-blocks-form::after,
#edd_cc_fields legend::after,
#edd_checkout_user_info > span > legend::after,
#customLoginSection + span legend::after {
	content: '' !important;
	position: absolute;
	right: 0;
	top: 4px;
	width: 22px;
	height: 22px;
	border: var(--integra-tick-stroke) solid var(--integra-tick-color);
	border-radius: 50%;
	box-sizing: border-box;
	background: none !important;
	background-image: none !important;
	pointer-events: none;
	z-index: 1;
	color: transparent;
	font-size: 0;
	line-height: 0;
}

/* Username group ::after = indicator slot (circle always; check when Completed) */
.edd-blocks-form__group.edd-blocks-form__group-username {
	position: relative !important;
}

.edd-blocks-form__group.edd-blocks-form__group-username::before {
	/* Title only — leave backgrounds alone for the indicator on ::after */
	background-image: none !important;
	padding-right: 34px !important;
	box-sizing: border-box !important;
}

.edd-blocks-form__group.edd-blocks-form__group-username::after {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	right: 0 !important;
	top: 4px !important;
	width: 22px !important;
	height: 22px !important;
	border: var(--integra-tick-stroke) solid var(--integra-tick-color) !important;
	border-radius: 50% !important;
	box-sizing: border-box !important;
	background-color: transparent !important;
	background-image: none !important;
	pointer-events: none !important;
	z-index: 2 !important;
	transform: none !important;
}

/*
 * Password section Completed: keep the CSS circle border, draw the check
 * with a tiny inline SVG (same look as the old tick-circled asset). Gradient
 * ticks on the title ::before proved unreliable against checkout-blocks.
 */
body.redesign .edd-blocks-form.Completed .edd-blocks-form__group.edd-blocks-form__group-username::after,
.edd-blocks-form.Completed .edd-blocks-form__group.edd-blocks-form__group-username::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline fill='none' stroke='%23292D32' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' points='2.2,6.2 4.8,8.8 9.8,3.2'/%3E%3C/svg%3E") !important;
	background-size: 12px 12px !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
}

/* Tick — legends whose text is the element text ( ::before is free ) */
.Completed#edd_cc_fields legend::before,
#edd_checkout_user_info.Completed > span > legend::before,
#edd_checkout_user_info.Completed #customLoginSection + span > legend::before {
	content: '' !important;
	position: absolute !important;
	right: 8px !important;
	top: 8px !important;
	left: auto !important;
	width: 6px !important;
	height: 10px !important;
	min-height: 10px !important;
	border: solid var(--integra-tick-color) !important;
	border-width: 0 var(--integra-tick-stroke) var(--integra-tick-stroke) 0 !important;
	border-radius: 0 !important;
	transform: rotate(45deg) !important;
	box-sizing: border-box !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	pointer-events: none !important;
	z-index: 2 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
}

/*
 * Tick — sections whose ::before is the title and span/labels are hidden.
 * Use the first visible field wrap as the tick host (absolute into the circle).
 */
#edd_cc_address.Completed > .edd-blocks-form__group:first-of-type::before,
#edd_cc_address.Completed > p:first-of-type::before,
.cc-address.edd-blocks-form.Completed > .edd-blocks-form__group:first-of-type::before,
.cc-address.edd-blocks-form.Completed > p:first-of-type::before {
	content: '' !important;
	position: absolute !important;
	right: 8px !important;
	top: 8px !important;
	left: auto !important;
	width: 6px !important;
	height: 10px !important;
	min-height: 10px !important;
	border: solid var(--integra-tick-color) !important;
	border-width: 0 var(--integra-tick-stroke) var(--integra-tick-stroke) 0 !important;
	border-radius: 0 !important;
	transform: rotate(45deg) !important;
	box-sizing: border-box !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	pointer-events: none !important;
	z-index: 2 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	float: none !important;
	clear: none !important;
	text-indent: 0 !important;
}

/*
 * Classic shortcode: "Personal info" on #edd-first-name-wrap::before.
 * Collapse the hidden label so it can host the tick inside the wrap circle.
 */
.edd-blocks-form.Completed #edd-first-name-wrap > label.edd-label {
	display: block !important;
	position: static !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
}

.edd-blocks-form.Completed #edd-first-name-wrap > label.edd-label::after {
	content: '' !important;
	position: absolute !important;
	right: 8px !important;
	top: 8px !important;
	left: auto !important;
	width: 6px !important;
	height: 10px !important;
	border: solid var(--integra-tick-color) !important;
	border-width: 0 var(--integra-tick-stroke) var(--integra-tick-stroke) 0 !important;
	transform: rotate(45deg) !important;
	box-sizing: border-box !important;
	background: none !important;
	z-index: 2 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 0 !important;
}

/* Incomplete: no tick */
#edd_cc_fields:not(.Completed) legend::before,
#edd_checkout_user_info:not(.Completed) > span > legend::before,
#edd_checkout_user_info:not(.Completed) #customLoginSection + span > legend::before,
#edd_cc_address:not(.Completed) > .edd-blocks-form__group:first-of-type::before,
#edd_cc_address:not(.Completed) > p:first-of-type::before,
.cc-address.edd-blocks-form:not(.Completed) > .edd-blocks-form__group:first-of-type::before,
.cc-address.edd-blocks-form:not(.Completed) > p:first-of-type::before,
.edd-blocks-form:not(.Completed) #edd-first-name-wrap > label.edd-label::after {
	content: none !important;
}

/* -------------------------------------------------------------------------- */
/* Edit-profile stripe billing checkbox only (not LD / course sidebar)        */
/* -------------------------------------------------------------------------- */

body.redesign #edd-stripe-update-billing-address {
	position: relative !important;
}

body.redesign #edd-stripe-update-billing-address::before {
	background: none !important;
	background-image: none !important;
	border: var(--integra-tick-stroke) solid var(--integra-tick-color) !important;
	border-radius: 50%;
	width: var(--integra-tick-size) !important;
	height: var(--integra-tick-size) !important;
	box-sizing: border-box;
	box-shadow: none !important;
	display: inline-block;
}

body.redesign #edd-stripe-update-billing-address:checked::before {
	background: none !important;
	background-image: none !important;
	border: var(--integra-tick-stroke) solid var(--integra-tick-color) !important;
}

body.redesign #edd-stripe-update-billing-address:checked::after {
	content: '';
	position: absolute;
	left: 8px;
	top: 4px;
	width: 6px;
	height: 10px;
	border: solid var(--integra-tick-color);
	border-width: 0 var(--integra-tick-stroke) var(--integra-tick-stroke) 0;
	transform: rotate(45deg);
	box-sizing: border-box;
	pointer-events: none;
	z-index: 1;
}