/**
 * Terri Trespicio Theme — Frontend Styles
 *
 * Supplements theme.json with CSS that can't be expressed in JSON.
 *
 * @package PL_TT_Theme
 * @since 1.0.0
 */

/* ----------------------------------------------------------------
   1. BASE RESETS
   ---------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

/* ----------------------------------------------------------------
   2. BUTTON STYLES
   Replaces VCV basicShadowButton, outlineButton, growShadowButton
   ---------------------------------------------------------------- */

/* Shadow button — replaces VCV basicShadowButton */
.wp-block-button.is-style-shadow .wp-block-button__link {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
}

.wp-block-button.is-style-shadow .wp-block-button__link:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	transform: translateY(-1px);
}

/* Outline button — replaces VCV outlineButton */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	transition: all 0.3s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--primary);
}

/* Grow button — replaces VCV growShadowButton */
.wp-block-button.is-style-grow .wp-block-button__link {
	transition: all 0.3s ease;
}

.wp-block-button.is-style-grow .wp-block-button__link:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ----------------------------------------------------------------
   3. SECTION PATTERNS
   Full-width alternating sections (replaces VCV sections)
   ---------------------------------------------------------------- */
.wp-block-group.alignfull {
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

/* ----------------------------------------------------------------
   4. TESTIMONIAL PATTERN
   ---------------------------------------------------------------- */
.pl-tt-testimonial {
	font-style: italic;
	position: relative;
	padding-left: 1.5rem;
	border-left: 3px solid var(--wp--preset--color--primary);
}

.pl-tt-testimonial-author {
	font-style: normal;
	font-weight: 700;
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
}

/* ----------------------------------------------------------------
   4b. TESTIMONIAL BANNER — LEFT-ALIGNED SEPARATOR
   ---------------------------------------------------------------- */
.has-testimonial-banner-gradient-background .wp-block-separator {
	margin-left: 0;
	margin-right: auto;
}

/* ----------------------------------------------------------------
   4c. BREAKTHROUGH COVER — BOX SHADOW
   ---------------------------------------------------------------- */
.pl-tt-breakthrough-cover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------------------------------
   5. RESPONSIVE HELPERS
   ---------------------------------------------------------------- */
@media (max-width: 781px) {
	.wp-block-columns {
		flex-wrap: wrap;
	}

	.wp-block-column {
		flex-basis: 100% !important;
	}

	/* Stack buttons on mobile */
	.wp-block-buttons {
		flex-direction: column;
	}
}

/* ----------------------------------------------------------------
   6. EMBED RESPONSIVENESS
   ---------------------------------------------------------------- */
.wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ----------------------------------------------------------------
   7. UTILITY CLASSES
   ---------------------------------------------------------------- */
.has-text-shadow {
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ----------------------------------------------------------------
   8. STUDIO PAGE — HERO BACKGROUND
   ---------------------------------------------------------------- */
.pl-tt-studio-hero {
	background-image: url('../images/hero-bg.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* ----------------------------------------------------------------
   9. STUDIO PAGE — CTA GRADIENT BUTTONS
   ---------------------------------------------------------------- */
.wp-block-button.is-style-gradient-cta .wp-block-button__link {
	background: linear-gradient(90deg, #ffc43e 0%, #ff4d56 100%) !important;
	background-color: #e24e62 !important;
	color: #ffffff !important;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 22px;
	padding: 15px 35px;
	border: 1px solid #ffffff;
	border-radius: 30px;
	box-shadow: 0 18px 28px 0 rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease-in-out;
	display: inline-block;
	text-decoration: none;
}

.wp-block-button.is-style-gradient-cta .wp-block-button__link:hover {
	background: #ffffff !important;
	background-image: linear-gradient(90deg, #fff, #fff) !important;
	color: #ff4d56 !important;
	border: 1px solid #ff4d56 !important;
	box-shadow: 0 18px 28px 0 rgba(0, 0, 0, 0.2);
}

/* ----------------------------------------------------------------
   9a. BREAKTHROUGH CTA BUTTON
   Multi-stop gradient (purple → pink → coral → gold)
   ---------------------------------------------------------------- */
.wp-block-button.is-style-breakthrough-cta .wp-block-button__link,
.wp-block-button.is-style-breakthrough-cta .wp-block-button__link .rich-text {
	background: linear-gradient(280deg, #af3890, #e74879 21%, #eb5363 60%, #f1a255 86%, #f5cd4e) !important;
	color: #ffffff !important;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 22px;
	padding: 15px 35px;
	border: none;
	border-radius: 30px;
	box-shadow: 0 18px 28px 0 rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease-in-out;
	display: inline-block;
	text-decoration: none;
}

.wp-block-button.is-style-breakthrough-cta .wp-block-button__link:hover {
	background: #af3890 !important;
}

/* ----------------------------------------------------------------
   9aa. CORAL SHADOW CTA BUTTON
   Solid coral pill with shadow — hover inverts to white/coral
   Used on: chapter-one-download
   ---------------------------------------------------------------- */
.wp-block-button.is-style-coral-shadow-cta .wp-block-button__link {
	background: #e72743 !important;
	color: #ffffff !important;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 22px;
	padding: 15px 35px;
	border: 2px solid #e72743;
	border-radius: 30px;
	box-shadow: 0 18px 28px 0 rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease-in-out;
	display: inline-block;
	text-decoration: none;
}

.wp-block-button.is-style-coral-shadow-cta .wp-block-button__link:hover {
	background: #ffffff !important;
	color: #e72743 !important;
	border-color: #e72743;
	box-shadow: 0 18px 28px 0 rgba(0, 0, 0, 0.15);
}
/* ----------------------------------------------------------------
   9b. SOLID PRIMARY BUTTON (outline coral — matches live VCV style)
   ---------------------------------------------------------------- */
.wp-block-button.is-style-outline-coral .wp-block-button__link {
	background-color: transparent !important;
	color: #4e4e4e !important;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 1.4;
	padding: 6px 32px;
	border: 2px solid #eb6c60 !important;
	border-radius: 6px;
	box-shadow: none;
	transition: all 0.3s ease-in-out;
	display: inline-block;
	text-decoration: none;
}

.wp-block-button.is-style-outline-coral .wp-block-button__link:hover {
	background-color: #eb6c60 !important;
	color: #ffffff !important;
	border-color: #eb6c60 !important;
}

/* ----------------------------------------------------------------
   9. QUOTE CIRCLE BLOCK (pl-tt/quote-circle)
   ---------------------------------------------------------------- */
.pl-tt-quote-mark {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
	overflow: hidden;
}

.pl-tt-quote-mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ----------------------------------------------------------------
   9b. QUOTE CARDS (testimonial grid)
   Open circle straddles the card top, orange close circle straddles
   the bottom. Scoped to .pl-tt-quote-card so other pages are unaffected.
   ---------------------------------------------------------------- */
.pl-tt-quote-card {
	position: relative;
	overflow: visible;
	height: 100%;
}
.pl-tt-quote-card .pl-tt-quote-mark {
	position: absolute;
	left: 50%;
	margin: 0;
	z-index: 2;
}
.pl-tt-quote-card .pl-tt-quote-mark--open {
	top: 0;
	transform: translate(-50%, -50%);
}
.pl-tt-quote-card .pl-tt-quote-mark--close {
	top: auto;
	bottom: 0;
	transform: translate(-50%, 50%);
}

/* ----------------------------------------------------------------
   10. CHEVRON CENTERED LIST (Block Style)
   Uses the actual arrow PNG from the live site.
   Color follows the list block's text-color picker via CSS mask.
   ---------------------------------------------------------------- */
.wp-block-list.is-style-chevron-centered {
	list-style: none;
	padding-left: 0;
	display: table;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.wp-block-list.is-style-chevron-centered li {
	position: relative;
	padding-left: 44px;
	padding-top: 2px;
	margin-bottom: 10px;
	line-height: 1.4;
}

.wp-block-list.is-style-chevron-centered li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0px;
	width: 15px;
	height: 32px;
	background: url("../images/chevron-arrow.png") no-repeat center / contain;
}


/* ----------------------------------------------------------------
   12. STUDIO PAGE — INSTRUCTOR CIRCULAR PHOTOS
   ---------------------------------------------------------------- */
.pl-tt-instructor-photo img {
	border-radius: 50%;
	width: 200px;
	height: 200px;
	object-fit: cover;
}

/* ----------------------------------------------------------------
   13. LIST ALIGNMENT FIX — Align center works out of the box
   ---------------------------------------------------------------- */
.wp-block-list.has-text-align-center {
	list-style-position: inside;
	padding-left: 0;
}

/* ----------------------------------------------------------------
   14. MOBILE CENTER — Stacks & centers a Row on small screens
   Add class "pl-tt-center-mobile" via Additional CSS Classes.
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
	.pl-tt-center-mobile,
	.pl-tt-center-mobile > *,
	.pl-tt-center-mobile * {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		justify-content: center !important;
	}

	/* Reverse column stacking order on mobile */
	.pl-tt-reverse-mobile {
		flex-direction: column-reverse !important;
	}
}

/* ----------------------------------------------------------------
   15. HOMEPAGE — HERO HEADSHOT
   ---------------------------------------------------------------- */
.pl-tt-hero-headshot img {
	max-width: 100%;
	height: auto;
}

/* ----------------------------------------------------------------
   16. HOMEPAGE — QUERY LOOP POST GRID
   Replaces Content Views Pro. Cards with hover lift effect.

   SCOPED TO `.home` ON PURPOSE. These were previously unscoped
   (`.wp-block-query …`), so they hit EVERY Query Loop on the site and
   overrode block-level settings — the pillar pages' teal title colour
   and 8px image radius both lost to the hardcoded values here.
   Homepage-specific styling must stay homepage-scoped so blocks keep
   ownership of their own colour/radius elsewhere. See gutenberg-rules.md.
   ---------------------------------------------------------------- */
.home .wp-block-query .wp-block-post-featured-image img {
	border-radius: 4px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home .wp-block-query .wp-block-post-featured-image img:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.home .wp-block-query .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--dark);
	transition: color 0.2s ease;
}

.home .wp-block-query .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* ----------------------------------------------------------------
   17. HOMEPAGE — TESTIMONIAL CARDS
   ---------------------------------------------------------------- */
.home .wp-block-columns .wp-block-group.has-white-background-color {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.3s ease;
}

.home .wp-block-columns .wp-block-group.has-white-background-color:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------------------------------
   18. HOMEPAGE — MEDIA LOGO GRID
   Consistent sizing, grayscale with hover color restore.
   ---------------------------------------------------------------- */
.wp-block-columns.is-not-stacked-on-mobile .wp-block-image img {
	max-height: 50px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: all 0.3s ease;
}

.wp-block-columns.is-not-stacked-on-mobile .wp-block-image img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

/* ----------------------------------------------------------------
   19. HOMEPAGE — MOBILE RESPONSIVE OVERRIDES
   ---------------------------------------------------------------- */
@media (max-width: 781px) {
	/* Hero: stack image above text on mobile */
	.pl-tt-hero-headshot {
		text-align: center;
	}

	.pl-tt-hero-headshot img {
		max-width: 280px;
		margin: 0 auto;
	}

	/* Testimonial cards: stack with gap */
	.home .wp-block-columns .wp-block-group.has-white-background-color {
		margin-bottom: var(--wp--preset--spacing--sm);
	}
}

/* ----------------------------------------------------------------
   20. ARROW DIVIDER — Section separator with upward arrow
   Replicates the VCV section divider (purple bar + centered triangle).
   Apply via block style "Arrow Divider" on core/separator.
   ---------------------------------------------------------------- */
hr.wp-block-separator.is-style-arrow-divider,
.wp-block-separator.is-style-arrow-divider {
	border: none !important;
	background-color: #6567df !important;
	height: 24px !important;
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
	position: relative;
	opacity: 1 !important;
	overflow: visible !important;
}

hr.wp-block-separator.is-style-arrow-divider::before,
.wp-block-separator.is-style-arrow-divider::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	border-bottom: 14px solid #6567df;
	z-index: 1;
}

@media (max-width: 781px) {
	hr.wp-block-separator.is-style-arrow-divider,
	.wp-block-separator.is-style-arrow-divider {
		height: 12px !important;
	}

	hr.wp-block-separator.is-style-arrow-divider::before,
	.wp-block-separator.is-style-arrow-divider::before {
		top: -7px;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 8px solid #6567df;
	}
}




/* Carousel — light transparent arrows (matches live site) */
.wp-block-pl-carousel .pl-tt-arrow-prev,
.wp-block-pl-carousel .pl-tt-arrow-next {
	background: transparent;
	border: none;
	outline: none;
	box-shadow: none;
	width: 48px;
	height: 48px;
	font-size: 48px;
	line-height: 1;
	color: #d8d8d8;
	transition: color 0.3s ease;
	cursor: pointer;
}
.wp-block-pl-carousel .pl-tt-arrow-prev::after {
	content: "‹";
}
.wp-block-pl-carousel .pl-tt-arrow-next::after {
	content: "›";
}
.wp-block-pl-carousel .pl-tt-arrow-prev:hover,
.wp-block-pl-carousel .pl-tt-arrow-next:hover {
	background: transparent;
	color: #b5b5b5;
}
/* Carousel — give arrows breathing room by padding the container */
.wp-block-pl-carousel.pl-arrow-pos-side {
	padding-left: 56px;
	padding-right: 56px;
	overflow-y: hidden;
}
@media (max-width: 767px) {
	.wp-block-pl-carousel.pl-arrow-pos-side {
		padding-left: 40px;
		padding-right: 40px;
	}
	.wp-block-pl-carousel .pl-tt-arrow-prev,
	.wp-block-pl-carousel .pl-tt-arrow-next {
		width: 40px;
		height: 40px;
		font-size: 40px;
	}
}

/* ----------------------------------------------------------------
   21b. GRADIENT LINE (Group block style)
   Adds the testimonial-banner gradient as a decorative full-width
   stripe at the bottom of the group via ::after.
   Uses 100vw + calc to break out of constrained parents.
   ---------------------------------------------------------------- */
.wp-block-group.is-style-gradient-line {
	position: relative;
	overflow: visible !important;
}

.wp-block-group.is-style-gradient-line::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	height: 60px;
	background: linear-gradient(90deg, #de9d57 0%, #df895a 25%, #e0745d 50%, #e15f60 75%, #e14d61 100%);
	z-index: 0;
}

.wp-block-group.is-style-gradient-line > * {
	position: relative;
	z-index: 1;
}

.wp-block-group.is-style-gradient-line figcaption {
	margin-bottom: 0;
}

/* Flat teal line — Gateless Method hero */
.wp-block-group.is-style-teal-line {
	position: relative;
	overflow: visible !important;
}

.wp-block-group.is-style-teal-line::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	height: 60px;
	background: var(--wp--preset--color--teal);
	z-index: 0;
}

.wp-block-group.is-style-teal-line > * {
	position: relative;
	z-index: 1;
}

.wp-block-group.is-style-teal-line figcaption {
	margin-bottom: 0;
}

.pl-tt-overlap-above {
	position: relative;
	z-index: 1;
}


/* ----------------------------------------------------------------
   22. PAINT SPLATTERS
   Add pl-tt-has-splatter to the parent section group → position:relative.
   Add pl-tt-splatter + corner modifier to the splatter group → position:absolute.
   Visibility (laptop+desktop only) is controlled by pl-sm-hide pl-md-hide on the group.
   ---------------------------------------------------------------- */
.pl-tt-has-splatter {
	position: relative;
	overflow: visible !important;
}

.pl-tt-splatter {
	position: absolute !important;
	pointer-events: none;
	z-index: 2;
	width: auto !important;
	max-width: none !important;
}

.pl-tt-splatter-tl { top: 0;    left: 0;  }
.pl-tt-splatter-tr { top: 0;    right: 0; }
.pl-tt-splatter-bl { bottom: 0; left: 0;  }
.pl-tt-splatter-br { bottom: 0; right: 0; }

.pl-tt-splatter img {
	display: block;
	width: auto;
	height: auto;
}

/* ----------------------------------------------------------------
   22. CLS FIXES
   ---------------------------------------------------------------- */

/* BC badge — inline width:500px would drop the height reservation
   without this, causing layout shift when the image loads.        */
.pl-tt-bc-badge img {
	height: auto;
}

/* Logo carousel — logos display at natural height inside flex cards.
   Locking width to 100% + height auto preserves the aspect ratio
   the browser calculates from the width/height HTML attributes.    */
.wp-block-pl-carousel .wp-block-image img {
	width: 100%;
	height: auto;
}

/* Course topic images — 1:1 square, aspect-ratio declared so the
   browser reserves the correct height before the image loads.      */
.wp-block-image.size-medium img {
	aspect-ratio: 1 / 1;
	height: auto;
}
/* TEDx embed caption — matches live production (bg, padding, shadow) */
figcaption.wp-element-caption {
	margin-top: 0;
	background-color: #f5f5f5;
	padding-top: 5px;
	padding-bottom: 5px;
	box-shadow: 0 0 10px 0 rgba(85, 85, 85, .5);
}

/* ----------------------------------------------------------------
   23. FOOTER — Remove browser default margin
   ---------------------------------------------------------------- */
footer.wp-block-template-part {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ----------------------------------------------------------------
   Overlap utility — raises a block above its siblings
   ---------------------------------------------------------------- */
.pl-overlap-above {
	position: relative;
	z-index: 1;
}
.pl-overlap-above .wp-block-cover {
	overflow: visible;
}
.pl-overlap-above .wp-block-embed-youtube {
	position: relative;
	z-index: 2;
}

/* ----------------------------------------------------------------
   WPForms — Submit button
   Outline coral style matching production VCV override.
   ---------------------------------------------------------------- */
div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form input[type=submit] {
	background-color: transparent !important;
	border: 2px solid #eb6c60 !important;
	border-radius: 0 !important;
	color: #eb6c60 !important;
	padding: 5px 40px !important;
	font-family: inherit;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 3px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

div.wpforms-container-full .wpforms-form button[type=submit]:hover,
div.wpforms-container-full .wpforms-form input[type=submit]:hover {
	background-color: #eb6c60 !important;
	color: #fff !important;
}

/* ----------------------------------------------------------------
   Form card — soft box shadow (getit opt-in). Submit button is teal
   here, overriding the global coral outline above.
   ---------------------------------------------------------------- */
.pl-tt-form-card {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.pl-tt-form-card div.wpforms-container-full .wpforms-form button[type=submit],
.pl-tt-form-card div.wpforms-container-full .wpforms-form input[type=submit] {
	border-color: #07888d !important;
	color: #07888d !important;
}
.pl-tt-form-card div.wpforms-container-full .wpforms-form button[type=submit]:hover,
.pl-tt-form-card div.wpforms-container-full .wpforms-form input[type=submit]:hover {
	background-color: #07888d !important;
	color: #fff !important;
}

/* ----------------------------------------------------------------
   Form gradient pill — 25 Questions opt-in (.pl-tt-form-gradient).
   cta-button-gold gradient CTA + filled inputs, overriding the
   global coral outline above.
   ---------------------------------------------------------------- */
.pl-tt-form-gradient div.wpforms-container-full .wpforms-form button[type=submit],
.pl-tt-form-gradient div.wpforms-container-full .wpforms-form input[type=submit] {
	background: linear-gradient(90deg, #ffc43e, #ff4d56) !important;
	border: none !important;
	border-radius: 999px !important;
	color: #fff !important;
	padding: 14px 44px !important;
	white-space: nowrap !important;
	width: auto !important;
	max-width: none !important;
	line-height: 1.2 !important;
}
/* Submit column must size to the (now single-line) button, not force a wrap */
.pl-tt-form-gradient div.wpforms-container-full .wpforms-submit-container,
.pl-tt-form-gradient div.wpforms-container-full div.wpforms-field-submit {
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto !important;
}
.pl-tt-form-gradient div.wpforms-container-full .wpforms-form button[type=submit]:hover,
.pl-tt-form-gradient div.wpforms-container-full .wpforms-form input[type=submit]:hover {
	background: linear-gradient(90deg, #ffce5a, #ff6472) !important;
	color: #fff !important;
}
.pl-tt-form-gradient div.wpforms-container-full .wpforms-form input[type=text],
.pl-tt-form-gradient div.wpforms-container-full .wpforms-form input[type=email] {
	background-color: #f5f5f5 !important;
	border: 1px solid #e5e5e5 !important;
	border-radius: 4px !important;
}