/*
 * TradeKit Contact / Form Shell block styles.
 */

.tk-contact {
	--tk-contact-bg: var(--wp--preset--color--light);
	--tk-contact-heading: var(--wp--preset--color--dark);
	--tk-contact-body: var(--wp--preset--color--neutral-600);
	--tk-contact-accent: var(--wp--preset--color--accent);
	--tk-contact-panel-bg: color-mix(in srgb, #fff 92%, var(--tk-contact-bg) 8%);
	--tk-contact-panel-text: var(--wp--preset--color--dark);
	--tk-contact-form-bg: color-mix(in srgb, #fff 96%, var(--tk-contact-bg) 4%);
	--tk-contact-form-text: var(--wp--preset--color--dark);
	--tk-contact-media-frame: color-mix(in srgb, var(--tk-contact-heading) 10%, transparent);
	--tk-contact-shell-gap: clamp(22px, 2.8vw, 36px);
	--tk-contact-shell-pad: clamp(20px, 2.4vw, 34px);
	--tk-contact-form-stack-gap: 10px;
	--tk-contact-cta-bg: var(--wp--preset--color--primary);
	--tk-contact-cta-text: var(--wp--preset--color--light);
	--tk-contact-cta-hover-bg: color-mix(in srgb, var(--tk-contact-cta-bg) 88%, #000 12%);
	--tk-contact-cta-hover-text: var(--tk-contact-cta-text);
	--tk-contact-cta-secondary-bg: transparent;
	--tk-contact-cta-secondary-text: var(--tk-contact-heading);
	--tk-contact-cta-secondary-border: color-mix(in srgb, var(--tk-contact-heading) 24%, transparent);
	--tk-contact-cta-secondary-hover-bg: color-mix(in srgb, var(--tk-contact-cta-secondary-text) 10%, transparent);
	--tk-contact-cta-secondary-hover-text: var(--tk-contact-cta-secondary-text);
	--tk-contact-cta-secondary-hover-border: var(--tk-contact-cta-secondary-border);
	--tk-contact-overlay: #0f172a;
	--tk-contact-overlay-opacity: 0.56;
	--tk-contact-radius: var(--tk-radius-default);
	background: var(--tk-contact-bg);
	color: var(--tk-contact-heading);
}

.tk-contact .tk-section-block__background-overlay {
	background-color: var(--tk-contact-overlay);
	opacity: var(--tk-contact-overlay-opacity);
}

.wp-block-tradekit-contact,
.tk-contact {
	max-inline-size: 100%;
	width: 100%;
}

.wp-block-tradekit-contact.alignfull,
.tk-contact.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: none;
	width: auto;
}

.tk-contact :where(.tk-section-intro__eyebrow) {
	--tk-section-accent: var(--tk-contact-accent);
}

.tk-contact :where(.tk-section-intro__headline) {
	--tk-section-heading: var(--tk-contact-heading);
}

.tk-contact :where(.tk-section-intro__copy) {
	--tk-section-body: var(--tk-contact-body);
}

.tk-contact__layout-shell {
	align-items: start;
	display: grid;
	gap: var(--tk-contact-shell-gap);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
	padding: var(--tk-contact-shell-pad);
}

.tk-contact--layout-form-content .tk-contact__layout-shell {
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
}

.tk-contact--layout-content-form .tk-contact__layout-shell,
.tk-contact--layout-form-content .tk-contact__layout-shell {
	align-items: center;
}

.tk-contact--shell-card .tk-contact__layout-shell {
	background: color-mix(in srgb, var(--tk-contact-panel-bg) 88%, transparent);
	border: 1px solid color-mix(in srgb, var(--tk-contact-heading) 12%, transparent);
	border-radius: var(--tk-contact-radius);
	box-shadow: 0 18px 34px rgb(15 23 42 / 9%);
}

.tk-contact--shell-bordered .tk-contact__layout-shell {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--tk-contact-heading) 14%, transparent);
	border-radius: var(--tk-contact-radius);
}

.tk-contact--shell-none .tk-contact__layout-shell {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding-inline: 0;
}

.tk-contact--layout-centered .tk-contact__layout-shell {
	gap: clamp(18px, 2.2vw, 28px);
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	margin-inline: auto;
	max-inline-size: min(900px, 100%);
}

.tk-contact__content {
	color: var(--tk-contact-panel-text);
	display: grid;
	gap: 18px;
}

.tk-contact__support-note {
	color: var(--tk-contact-body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	margin: 0;
}

.tk-contact__meta {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tk-contact__meta-item {
	align-items: baseline;
	column-gap: 12px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
}

.tk-contact__meta-label {
	color: var(--tk-contact-accent);
	font-family: var(--wp--preset--font-family--utility);
	font-size: var(--wp--preset--font-size--utility);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tk-contact__meta-item a {
	color: var(--tk-contact-heading);
	font-weight: 700;
	text-decoration: none;
}

.tk-contact__meta-item a:hover {
	text-decoration: underline;
}

.tk-contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 2px;
}

.tk-contact--layout-centered .tk-section-intro,
.tk-contact--layout-centered .tk-contact__support-note,
.tk-contact--layout-centered .tk-contact__meta {
	margin-inline: auto;
	text-align: center;
}

.tk-contact--layout-centered .tk-contact__actions,
.tk-contact--cta-align-center .tk-contact__actions {
	justify-content: center;
}

.tk-contact--cta-align-right .tk-contact__actions {
	justify-content: flex-end;
}

.tk-contact .tk-contact__cta--primary.tk-button--primary {
	background-color: var(--tk-contact-cta-bg);
	border-color: var(--tk-contact-cta-bg);
	color: var(--tk-contact-cta-text);
}

.tk-contact .tk-contact__cta--secondary.tk-button--secondary {
	background-color: var(--tk-contact-cta-secondary-bg);
	border-color: var(--tk-contact-cta-secondary-border);
	color: var(--tk-contact-cta-secondary-text);
}

.tk-contact .tk-contact__cta--primary.tk-button--primary:hover,
.tk-contact .tk-contact__cta--primary.tk-button--primary:focus-visible {
	background-color: var(--tk-contact-cta-hover-bg);
	border-color: var(--tk-contact-cta-hover-bg);
	color: var(--tk-contact-cta-hover-text);
}

.tk-contact .tk-contact__cta--secondary.tk-button--secondary:hover,
.tk-contact .tk-contact__cta--secondary.tk-button--secondary:focus-visible {
	background-color: var(--tk-contact-cta-secondary-hover-bg);
	border-color: var(--tk-contact-cta-secondary-hover-border);
	color: var(--tk-contact-cta-secondary-hover-text);
}

.tk-contact__support-media-wrap {
	margin: clamp(6px, 1.2vw, 12px) 0 0;
	position: relative;
}

.tk-contact__support-media-frame {
	background: var(--tk-contact-media-frame);
	border-radius: var(--tk-contact-radius);
	inset:
		clamp(8px, 1vw, 12px) clamp(-10px, -1.2vw, -6px)
		clamp(-10px, -1.2vw, -6px) clamp(8px, 1vw, 12px);
	position: absolute;
	z-index: 0;
}

.tk-contact__support-media {
	border-radius: var(--tk-contact-radius);
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.tk-contact__support-image {
	display: block;
	height: auto;
	max-inline-size: 100%;
	width: 100%;
}

.tk-contact__form-column {
	align-content: start;
	display: grid;
	gap: var(--tk-contact-form-stack-gap);
}

.tk-contact__form-column > :where(.tk-contact__form-intro, .tk-contact__form-surface) {
	max-inline-size: min(100%, 620px);
	width: 100%;
}

.tk-contact--layout-form-content .tk-contact__content {
	order: 2;
}

.tk-contact--layout-form-content .tk-contact__form-column {
	order: 1;
}

.tk-contact--form-align-center .tk-contact__form-column {
	justify-items: center;
}

.tk-contact__form-intro {
	display: grid;
	gap: 7px;
}

.tk-contact__form-heading {
	color: var(--tk-contact-heading);
	font-size: var(--wp--preset--font-size--h4);
	line-height: 1.2;
	margin: 0;
}

.tk-contact__form-body {
	color: var(--tk-contact-body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
	margin: 0;
}

.tk-contact__form-body p {
	margin: 0;
}

.tk-contact__form-surface {
	background: var(--tk-contact-form-bg);
	border: 1px solid color-mix(in srgb, var(--tk-contact-heading) 10%, transparent);
	border-radius: var(--tk-contact-radius);
	color: var(--tk-contact-form-text);
	padding: clamp(14px, 1.8vw, 22px);
}

.tk-contact__form-surface--plugin-form {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.tk-contact--form-surface-off .tk-contact__form-surface {
	background: transparent;
	border-color: transparent;
	padding: 0;
}

.tk-contact__form-empty,
.tk-contact__form-shortcode-preview {
	color: color-mix(in srgb, var(--tk-contact-body) 90%, #000 10%);
	font-family: var(--wp--preset--font-family--utility);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	margin: 0;
	overflow-wrap: anywhere;
}

.tk-contact__form-shortcode-preview {
	padding: 0;
}

.tk-contact__form-shortcode-preview-note {
	font-family: var(--wp--preset--font-family--utility);
	font-size: var(--wp--preset--font-size--utility);
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.tk-contact__form-shortcode-preview-form {
	display: grid;
	gap: 10px;
	margin: 0;
}

.tk-contact__form-shortcode-preview-form :where(input, textarea) {
	background: var(--tk-form-field-bg, #fff);
	border: 1px solid var(--tk-form-field-border, rgba(15, 23, 42, 0.24));
	border-radius: var(--tk-form-input-radius, 8px);
	color: var(--tk-form-field-text, var(--wp--preset--color--dark));
	min-height: var(--tk-form-control-height, 52px);
	padding: 10px var(--tk-form-control-pad-x, 16px);
	width: 100%;
}

.tk-contact__form-shortcode-preview-form textarea {
	min-height: 120px;
	resize: vertical;
}

.tk-contact__form-shortcode-preview-form :where(button, .wp-element-button, .wp-block-button__link) {
	background: var(--tk-form-button-bg, var(--wp--preset--color--primary));
	border: 1px solid var(--tk-form-button-border, var(--tk-form-button-bg, var(--wp--preset--color--primary)));
	border-radius: var(--tk-form-input-radius, 8px);
	color: var(--tk-form-button-text, var(--wp--preset--color--light));
	cursor: default;
	font-weight: 700;
	min-height: var(--tk-form-button-height, 52px);
	padding: 0 16px;
	text-align: center;
}

.tk-contact__form-shortcode-preview-code {
	margin: 10px 0 0;
	opacity: 0.82;
}

.tk-contact--form-width-narrow .tk-contact__form-column {
	max-inline-size: 440px;
}

.tk-contact--form-width-standard .tk-contact__form-column {
	max-inline-size: 600px;
}

.tk-contact--form-width-wide .tk-contact__form-column {
	max-inline-size: 700px;
}

.tk-contact--layout-centered .tk-contact__content,
.tk-contact--layout-centered .tk-contact__form-column {
	max-inline-size: min(700px, 100%);
	width: 100%;
}

.tk-contact--surface-light {
	--tk-contact-bg: var(--wp--preset--color--light);
	--tk-contact-heading: var(--wp--preset--color--dark);
	--tk-contact-body: var(--wp--preset--color--neutral-600);
	--tk-contact-accent: var(--wp--preset--color--accent);
}

.tk-contact--surface-dark {
	--tk-contact-bg: var(--wp--preset--color--dark);
	--tk-contact-heading: var(--wp--preset--color--light);
	--tk-contact-body: var(--wp--preset--color--neutral-100);
	--tk-contact-accent: var(--wp--preset--color--accent);
	--tk-contact-panel-bg: color-mix(in srgb, var(--wp--preset--color--dark) 78%, #334155 22%);
	--tk-contact-panel-text: var(--wp--preset--color--light);
	--tk-contact-form-bg: color-mix(in srgb, var(--wp--preset--color--dark) 86%, #1e293b 14%);
	--tk-contact-form-text: var(--wp--preset--color--light);
}

.tk-contact--surface-brand {
	--tk-contact-bg: var(--wp--preset--color--primary);
	--tk-contact-heading: var(--wp--preset--color--light);
	--tk-contact-body: var(--wp--preset--color--neutral-100);
	--tk-contact-accent: var(--wp--preset--color--light);
	--tk-contact-panel-bg: color-mix(in srgb, var(--wp--preset--color--light) 92%, var(--wp--preset--color--primary) 8%);
	--tk-contact-panel-text: var(--wp--preset--color--dark);
}

.tk-contact .tk-section-block__texture {
	inset: 0;
	mix-blend-mode: overlay;
	opacity: var(--tk-features-texture-opacity, 0.14);
	pointer-events: none;
	position: absolute;
	z-index: 3;
}

.tk-contact .tk-section-block__texture--site {
	background-image:
		linear-gradient(135deg, rgb(255 255 255 / 20%) 0, rgb(255 255 255 / 0%) 45%),
		repeating-linear-gradient(45deg, rgb(255 255 255 / 10%) 0, rgb(255 255 255 / 10%) 1px, transparent 1px, transparent 11px);
	background-position: center, center;
	background-repeat: no-repeat, repeat;
	background-size: cover, auto;
}

.tk-contact--texture-none .tk-section-block__texture {
	display: none;
}

.tk-contact--texture-intensity-subtle {
	--tk-features-texture-opacity: 0.14;
}

.tk-contact--texture-intensity-normal {
	--tk-features-texture-opacity: 0.22;
}

.tk-contact--texture-intensity-strong {
	--tk-features-texture-opacity: 0.3;
}

.tk-contact--texture-intensity-full {
	--tk-features-texture-opacity: 1;
}

.tk-contact--texture-fit-repeat .tk-section-block__texture--custom {
	background-repeat: repeat;
	background-size: auto;
}

.tk-contact--texture-fit-cover .tk-section-block__texture--custom {
	background-repeat: no-repeat;
	background-size: cover;
}

.tk-contact--geometry-inherit,
.tk-contact--geometry-clean {
	--tk-contact-radius: var(--tk-radius-clean);
}

.tk-contact--geometry-soft {
	--tk-contact-radius: var(--tk-radius-soft);
}

.tk-contact--geometry-cut {
	--tk-contact-radius: var(--tk-radius-cut);
}

.tk-contact.tk-contact--geometry-cut .tk-contact__layout-shell,
.tk-contact.tk-contact--geometry-cut .tk-contact__form-surface,
.tk-contact.tk-contact--geometry-cut .tk-contact__support-media,
.tk-contact.tk-contact--geometry-cut .tk-contact__support-media-frame {
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.tk-contact--intro-center .tk-section-intro {
	justify-items: center;
	margin-inline: auto;
	text-align: center;
}

.tk-contact--intro-center .tk-section-intro__actions {
	justify-content: center;
}

@media (max-width: 1023px) {

	.tk-contact__layout-shell {
		gap: clamp(18px, 3.6vw, 24px);
		grid-template-columns: 1fr;
		padding: clamp(16px, 2.8vw, 24px);
	}

	.tk-contact--layout-content-form .tk-contact__layout-shell,
	.tk-contact--layout-form-content .tk-contact__layout-shell {
		align-items: start;
	}

	.tk-contact__form-column {
		max-inline-size: 100%;
	}

	.tk-contact--layout-form-content .tk-contact__content,
	.tk-contact--layout-form-content .tk-contact__form-column {
		order: initial;
	}
}

@media (max-width: 699px) {

	.tk-contact--shell-card .tk-contact__layout-shell,
	.tk-contact--shell-bordered .tk-contact__layout-shell {
		padding: 16px;
	}

	.tk-contact__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.tk-contact .tk-contact__actions :where(.wp-element-button, .wp-block-button__link) {
		text-align: center;
		width: 100%;
	}

	.tk-contact__meta-item {
		align-items: flex-start;
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}