/**
 * Frontend only styles.
 * These styles are not used in the editor.
 *
 * There are global form styles mixed within these styles. These do interfere with the display of the editor, and
 * therefore cannot be loaded in an WP Admin context.
 *
 * These styles should be refactored, and be enqueued conditionally when needed.
 */

/* FORMS */
body :is(.gform_wrapper.gravity-theme, *) :is(input:is([type="color"], [type="date"], [type="datetime-local"], [type="datetime"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]), select, textarea) {
	border-style: var(--form-input-border-style);
	border-width: var(--form-input-border-width);
	border-radius: var(--form-input-border-radius);
	transition: all 0.3s ease;
	font: var(--font-body);
	padding: 0.5em 1em;
}

body :is(.gform_wrapper.gravity-theme, *) :is(input:is([type="color"], [type="date"], [type="datetime-local"], [type="datetime"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]), select, textarea):hover:not(:focus) {
	border-color: var(--form-input-hover-border-color);
}

body :is(.gform_wrapper.gravity-theme, *) :is(input:is([type="color"], [type="date"], [type="datetime-local"], [type="datetime"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]), select, textarea):focus {
	outline: none;
}

body :is(.gform_wrapper.gravity-theme, *) select {
	appearance: none;
	background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23595959"><path d="M5 6l5 5 5-5 2 1-7 7-7-7z"/></svg>' );
	background-position: right 1.563rem top 55%;
	background-repeat: no-repeat;
	background-size: auto 35%;
	padding-right: 48px !important;
}

body :is(.gform_wrapper.gravity-theme, *) select:not([data-chosen]) {
	color: var(--form-input-placeholder-text-color);
}

:is(input:is([type="color"], [type="date"], [type="datetime-local"], [type="datetime"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]), select, textarea) {
	border-color: var(--form-input-border-color);
	background-color: var(--form-input-background-color);
	color: var(--form-input-text-color);
}

:is(option, optgroup) {
	background-color: var(--form-input-option-background-color);
	color: var(--form-input-text-color);
}

:is(input:is([type="color"], [type="date"], [type="datetime-local"], [type="datetime"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]), select, textarea):focus {
	border-color: var(--form-input-focus-border-color);
	background-color: var(--form-input-focus-background-color);
	color: var(--form-input-focus-text-color);
}

:is(input:is([type="color"], [type="date"], [type="datetime-local"], [type="datetime"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]), select, textarea)::placeholder {
	color: var(--form-input-placeholder-text-color);
}

:is(input:is([type="color"], [type="date"], [type="datetime-local"], [type="datetime"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]), select, textarea):autofill {
	border-color: var(--form-input-autofill-border-color);
	background-color: var(--form-input-autofill-background-color);
	color: var(--form-input-autofill-text-color);
}

:is(input:is([type="color"], [type="date"], [type="datetime-local"], [type="datetime"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]), select, textarea):-webkit-autofill {
	border-color: var(--form-input-autofill-border-color);
	background-color: var(--form-input-autofill-background-color);
	color: var(--form-input-autofill-text-color);
}

body .gform_wrapper.gravity-theme :is(.gfield_validation_message, .validation_message, .gform_validation_errors, .gform_validation_errors>h2) {
	border: none;
	padding: 0;
	background: transparent;
	font: var(--font-body-small);
	box-shadow: none;
	color: var(--form-input-notice-color);
}

.gfield--type-submit button {
	padding-top: 0;
	padding-bottom: 0;
}

body .gform_wrapper.gravity-theme :is(.gfield_checkbox, .gfield_radio, .ginput_container_consent) {
	position: relative;
}

body .gform_wrapper.gravity-theme :is(.gfield_checkbox, .gfield_radio, .ginput_container_consent) input {
	position: absolute;
	opacity: 0;
}

body .gform_wrapper.gravity-theme :is(.gfield_checkbox, .gfield_radio, .ginput_container_consent) label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

body .gform_wrapper.gravity-theme :is(.gfield_checkbox, .gfield_radio, .ginput_container_consent) label::before {
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	border: 0.1rem solid;
	transition: all 0.3s ease;
	margin-right: 0.5em;
	border-color: var(--form-input-border-color);
}

body .gform_wrapper.gravity-theme .gfield_radio label::before {
	border-radius: 50%;
}

body .gform_wrapper.gravity-theme :is(.gfield_checkbox, .gfield_radio, .ginput_container_consent) input:checked~label::before {
	background-color: var(--form-input-border-color);
}

/***** Form styling *****/

body :is(.gform_wrapper.gravity-theme, *) :is(input:is([type="color"],[type="date"],[type="datetime-local"],[type="datetime"],[type="email"],[type="month"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="time"],[type="url"],[type="week"]),select,textarea) {
	border-radius: 8px;
	border: 1px solid var(--Neutrals-Neutral-600, #DEDEDE);
	background-color: var(--Background-White, #FFF);
	width: 100% !important;
	display: flex;
	max-height: 56px;
	padding: 16px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}

.hs-form-field label {
	color: var(--content-text-icons, #000);
	font-family: 'Figtree', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 170%; /* 27.2px */
}

.hs-form-field span.hs-form-required {
	color: #FF5A3D;
	padding-left: 4px;
}

.legal-consent-container {
	width: 100% !important;
	font-size: 13px;
	text-align: left;
	width: 48%;
}

.hs-submit .actions {
	padding: 0;
}

.cookie-reset-container {
	display: block;
	width: 100% !important;
	text-align: left !important;
	font-family:'Outfit', sans-serif;
}

form .cookie-reset-container,
form .cookie-reset-container a {
	font-size: inherit !important;
	cursor: pointer;
}

form .cookie-reset-container a:after {
	content: none;
}

.hs_error_rollup {
	width: 100% !important;
}

.hs_error_rollup ul, .hs_error_rollup ul li {
	list-style: none;
	color: red;
	margin: -15px 0 8px 0;
}

ul.no-list.hs-error-msgs.inputs-list {
	margin-bottom: -10px;
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

ul.no-list.hs-error-msgs.inputs-list label {
	font-size: 13px;
	font-weight: 400;
	color: red;
	margin-bottom: 0;
}

input.hs-button.primary.large {
	display: flex;
	min-width: var(--button-sizing, 200px);
	padding: 16px 24px;
	justify-content: center;
	align-items: center;
	border-radius: var(--Border-radius, 8px);
	background: var(--Content-Action, #0259F7);
	border: none;
	color: #FFFFFF;
	cursor: pointer;
	order: 1;
	transition: 0.3s ease all;
}

input.hs-button.primary.large:hover {
	background: var(--primary-button-hover-border-color);
}

.chilipiper-popup-loading::after {
	display:block;
	margin-top:100px!important;
	margin-left:-170px;
	color: #fff;
	width:600px !important;
	content: "We're pulling up your learning expert's calendar";
}


/* === Demo, Get Custom Pricing, Contact pages === */

.form-module {
	display: flex;
	justify-content: space-between;
	min-height: 664px;
	padding-bottom: 0 !important;
}

.form-module .form-left,
.form-module .form-right {
	width: 49.5%;
}

.form-module .form-left p {
	font-size: var(--font-size-body-large);
	max-width: 547px;
}

.form-columns-1,
.form-columns-2 {
	width: 100%;
	max-width: none !important;
}

.form-module form {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.demo-form form .hs-submit {
	width: 100%;
	margin-top: unset;
}

.get-pricing-form form .hs-submit {
	width: 100%;
	margin-top: 13px;
}

.contact-form form .hs-submit {
	margin-top: 0;
}

.contact-form textarea,
.demo-form textarea,
.get-pricing-form textarea {
	max-height: 100px !important;
}

.hs-form .form-columns-1:has(.hs-form-field[style*="display: none"]:only-child),
.hs-form .form-columns-2:has(.hs-form-field[style*="display: none"]:only-child),
.hs-form .form-columns-3:has(.hs-form-field[style*="display: none"]:only-child) {
	display: none !important;
}

/* === Contact page (other than form) === */

.contact-form {
	margin-bottom: 128px;
}

.contact_hero p {
	margin-bottom: 0 !important;
}

.contact_hero .page-hero-full-content {
	margin-top: 16px;
}

.contact-card-grid {
	margin-top: 128px;
}

.contact-card-grid h3 {
	margin-bottom: 8px;
}

.contact-card-grid a.tertiary-button.cards-in-columns-columns-button {
	padding: 16px 0;
}

/* === Responsive Styles === */

@media screen and (max-width: 1025px) {
	.form-module {
		flex-direction: column;
		padding-top: 166px !important;
	}

	.form-module .form-left,
	.form-module .form-right {
		width: 100%;
	}

	.form-module .form-left p {
		max-width: 100%;
	}

	.form-module form {
		margin-top: 64px;
	}

	.contact-form {
		padding-top: 0 !important;
		margin-bottom: 96px;
	}

	.contact-form form {
		margin-top: 24px;
	}

	.form-module .hs_submit.hs-submit {
		width: 100%;
	}

	.contact-card-grid {
		margin-top: 96px;
	}

	.contact-card-grid .cards-in-columns-columns-item > div > h3 {
		font-size: 24;
	}
}

@media screen and (max-width: 568px) {
	.form-module {
		padding-top: 134px !important;
		margin-bottom: 0 !important;
	}

	.demo-form {
		padding: 64px 0 !important;
	}

	fieldset.form-columns-2 .hs-form-field {
		width: 100% !important;
	}

	input.hs-button.primary.large {
		width: 100%;
	}

	.demo-form fieldset.form-columns-2,
	.contact-form fieldset.form-columns-2,
	.get-pricing-form fieldset.form-columns-2 {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.contact-form {
		margin-bottom: 64px !important;
		padding-top: 0 !important;
	}

	.contact_hero h1 {
		text-align: center;
	}

	.contact_hero .page-hero-full-wrapper {
		padding: 0 16px;
	}

	.contact-card-grid {
		margin-top: 64px;
	}

	.contact-card-grid .cards-in-columns-columns-item {
		padding: 17px;
	}
}