/* Maia note: Need to do not to use form-id */
.col--pumpkin {
    color: var(--color-pumpkin, #FF7C1E);
}
.col--harlequin { color: var(--col--harlequin, #39FF14); }
/* password show/hide */
[data-input-wrapper] [data-icon="eye-slash"] { display: flex; }

.password_visible [data-icon="eye-slash"]{ display: none; }

.password_visible [data-icon="eye"]{ display: flex; }

/* Validated password error text */
[data-validate-password] li::before, 
[data-password-match] li::before{
	/* content: "\2716";   */
	/* Unicode for the cross icon (✖) */
	color: var(--color-pumpkin, #FF7C1E); /* Color of the cross icon */
	display: inline-block; 
	width: 1em;        /* Width to align text properly */
	margin-right: 0.5em; /* Space between icon and text */
}
form[data-form-id="change-password"] [data-validate-password] li.col--harlequin::before, 
form[data-form-id="change-password"] [data-password-match] li.col--harlequin::before{
	/* content: "\2713";   */
	/* Unicode for the cross icon (✖) */
	color: var(--color-brand-green, #07f468); /* Color of the cross icon */
	display: inline-block; 
	width: 1em;        /* Width to align text properly */
	margin-right: 0.5em; /* Space between icon and text */
}

form[data-form-id="sign_up"] [data-validate-password] li.col--harlequin::before, 
form[data-form-id="sign_up"] [data-password-match] li.col--harlequin::before,
form[data-form-id="reset_password"] [data-validate-password] li.col--harlequin::before, 
form[data-form-id="reset_password"] [data-password-match] li.col--harlequin::before {
	/* content: "\2713";   */
	/* Unicode for the cross icon (✖) */
	color: var(--color-white, #fff); /* Color of the cross icon */
	display: inline-block; 
	width: 1em;        /* Width to align text properly */
	margin-right: 0.5em; /* Space between icon and text */
}

/* Nay Added */
/* General styling for elements with data-validate-password and data-password-match attributes */
/* Styling for SVG paths within list items under data-validate-password and data-password-match */
[data-validate-password] li svg path, 
[data-password-match] li svg path{
	 /* Pumpkin color for the stroke of SVG paths */
	stroke: var(--color-vermilion, #ff4405);
}

form[data-form-id="sign_up"] [data-validate-password] li svg path, 
form[data-form-id="sign_up"] [data-password-match] li svg path,
form[data-form-id="reset_password"] [data-validate-password] li svg path, 
form[data-form-id="reset_password"] [data-password-match] li svg path{
	/* Pumpkin color for the stroke of SVG paths */
	stroke: var(--color-pumpkin, #FF7C1E);
}


/* Override stroke color for SVG paths not within .red class under the sign-up form */
form[data-form-id="change-password"] [data-validate-password] li:not(.red) svg path, 
form[data-form-id="change-password"] [data-password-match] li:not(.red) svg path{
	stroke: var(--color-brand-green, #07f468); /* Harlequin color, with a fallback, for SVG paths stroke */
}

form[data-form-id="sign_up"] [data-validate-password] li:not(.red) svg path, 
form[data-form-id="sign_up"] [data-password-match] li:not(.red) svg path,
form[data-form-id="reset_password"] [data-validate-password] li:not(.red) svg path, 
form[data-form-id="reset_password"] [data-password-match] li:not(.red) svg path{
	stroke: var(--color-white, #fff); /* Harlequin color, with a fallback, for SVG paths stroke */
}

/* Hide specific SVG icons under the sign-up form by default */
form[data-form-id="change-password"] [data-validate-password] li svg[data-icon="alert-hexagon"], 
form[data-form-id="change-password"] [data-password-match] li svg[data-icon="check-thinner"], 
form[data-form-id="change-password"] [data-validate-password] li svg[data-icon="alert-hexagon"], 
form[data-form-id="change-password"] [data-password-match] li svg[data-icon="check-thinner"],

form[data-form-id="sign_up"] [data-validate-password] li svg[data-icon="alert-hexagon"], 
form[data-form-id="sign_up"] [data-password-match] li svg[data-icon="check-thinner"], 
form[data-form-id="sign_up"] [data-validate-password] li svg[data-icon="alert-hexagon"], 
form[data-form-id="sign_up"] [data-password-match] li svg[data-icon="check-thinner"],

form[data-form-id="reset_password"] [data-validate-password] li svg[data-icon="alert-hexagon"], 
form[data-form-id="reset_password"] [data-password-match] li svg[data-icon="check-thinner"], 
form[data-form-id="reset_password"] [data-validate-password] li svg[data-icon="alert-hexagon"], 
form[data-form-id="reset_password"] [data-password-match] li svg[data-icon="check-thinner"]{
	display: none; /* Hides the alert-hexagon and check-thinner icons */
}

/* Display block for specific SVG icons based on class conditions under the sign-up form */
form[data-form-id="change-password"] [data-validate-password] li.red svg[data-icon="alert-hexagon"],
form[data-form-id="change-password"] [data-validate-password] li:not(.red) svg[data-icon="check-thinner"],
form[data-form-id="change-password"] [data-password-match] li.red svg[data-icon="alert-hexagon"],
form[data-form-id="change-password"] [data-password-match] li:not(.red) svg[data-icon="check-thinner"],

form[data-form-id="sign_up"] [data-validate-password] li.red svg[data-icon="alert-hexagon"],
form[data-form-id="sign_up"] [data-validate-password] li:not(.red) svg[data-icon="check-thinner"],
form[data-form-id="sign_up"] [data-password-match] li.red svg[data-icon="alert-hexagon"],
form[data-form-id="sign_up"] [data-password-match] li:not(.red) svg[data-icon="check-thinner"],

form[data-form-id="reset_password"] [data-validate-password] li.red svg[data-icon="alert-hexagon"],
form[data-form-id="reset_password"] [data-validate-password] li:not(.red) svg[data-icon="check-thinner"],
form[data-form-id="reset_password"] [data-password-match] li.red svg[data-icon="alert-hexagon"],
form[data-form-id="reset_password"] [data-password-match] li:not(.red) svg[data-icon="check-thinner"]{
	display: block; /* Shows the alert-hexagon for .red class and check-thinner for not(.red) */
}

/* Text color change for spans not within .red class under the sign-up form */
form[data-form-id="change-password"] [data-validate-password] li:not(.red) span, 
form[data-form-id="change-password"] [data-password-match] li:not(.red) span{
	color: var(--color-brand-green, #07f468); /* Sets the text color to white for better visibility */
}

form[data-form-id="sign_up"] [data-validate-password] li:not(.red) span, 
form[data-form-id="sign_up"] [data-password-match] li:not(.red) span,

form[data-form-id="reset_password"] [data-validate-password] li:not(.red) span, 
form[data-form-id="reset_password"] [data-password-match] li:not(.red) span{
	color: var(--color-white, #fff);; /* Sets the text color to white for better visibility */
}

[data-view-password] {
	display: none;
}

[data-password-match] {
    padding: .375rem .5rem 0 .5rem;
}

[data-validate-password] {
    padding: .25rem .5rem .5rem .5rem;
}