/*
 * Exprez Collabs: public form styles (21-05).
 * Light DOM, server-rendered, cacheable. Every selector is prefixed .exco and scoped by the body
 * class that the shortcode adds (exco-collab-page). Never uses the theme's own button class.
 * Later plans append the posted-page and banner rules to this file.
 */

.exco-collab-page .exco {
	--exco-cream: #f4efe7;
	--exco-white: #fff;
	--exco-border: #e9e1d3;
	--exco-accent: #fa6e00;
	--exco-ink: #17130f;
	--exco-muted: #6b6258;
	--exco-destructive: #b91c1c;
	--exco-xs: 4px;
	--exco-sm: 8px;
	--exco-md: 16px;
	--exco-lg: 24px;
	--exco-xl: 32px;
	--exco-2xl: 48px;
	--exco-3xl: 64px;
	color: var(--exco-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}

.exco-collab-page .exco :where(button, input, select, textarea, label, fieldset, legend, h1, h2, h3, h4, p, ul, ol, dl, dd) {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.exco-collab-page .exco [hidden] { display: none !important; }

.exco-collab-page .exco-band { background: var(--exco-cream); padding: var(--exco-xl) var(--exco-md); }
.exco-collab-page .exco-wrap { max-width: 640px; margin: 0 auto; }

.exco-collab-page .exco-h1 {
	position: relative;
	margin-bottom: var(--exco-md);
	padding-bottom: 12px;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--exco-ink);
}
.exco-collab-page .exco-h1::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 4px;
	background: var(--exco-accent);
}
.exco-collab-page .exco-sub { margin-bottom: var(--exco-lg); }
.exco-collab-page .exco-body { margin-bottom: var(--exco-md); }

.exco-collab-page .exco-card {
	padding: var(--exco-md);
	background: var(--exco-white);
	border: 1px solid var(--exco-border);
	border-radius: 8px;
}

.exco-collab-page .exco-group { min-width: 0; margin: 0 0 var(--exco-lg); border: 0; }
.exco-collab-page .exco-group-title {
	display: block;
	width: 100%;
	float: none;
	margin-bottom: var(--exco-md);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}
.exco-collab-page .exco-field { min-width: 0; margin: 0 0 var(--exco-md); border: 0; }
.exco-collab-page .exco-fieldset > legend { display: block; width: 100%; float: none; }
.exco-collab-page .exco-label { display: block; margin-bottom: var(--exco-xs); font-size: 14px; font-weight: 600; line-height: 1.4; }

.exco-collab-page .exco-input {
	display: block;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 8px 12px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--exco-ink);
	background: var(--exco-white);
	border: 1px solid var(--exco-border);
	border-radius: 4px;
	box-shadow: none;
}
.exco-collab-page .exco-input:focus { padding: 7px 11px; border: 2px solid var(--exco-ink); }
.exco-collab-page .exco-input::placeholder { color: var(--exco-muted); opacity: 1; }
.exco-collab-page .exco-textarea { min-height: 120px; resize: vertical; }
.exco-collab-page .exco-select {
	padding-right: 36px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317130f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 20px;
}

.exco-collab-page .exco :is(a, button, input, select, textarea, summary):focus-visible,
.exco-collab-page .exco-summary:focus-visible,
.exco-collab-page .exco-thanks [tabindex]:focus-visible {
	outline: 2px solid var(--exco-ink);
	outline-offset: 2px;
}

.exco-collab-page .exco-affix { display: flex; }
.exco-collab-page .exco-prefix {
	display: flex;
	align-items: center;
	padding: 0 12px;
	color: var(--exco-muted);
	background: var(--exco-cream);
	border: 1px solid var(--exco-border);
	border-right: 0;
	border-radius: 4px 0 0 4px;
}
.exco-collab-page .exco-affix .exco-input { border-radius: 0 4px 4px 0; }

.exco-collab-page .exco-help,
.exco-collab-page .exco-echo,
.exco-collab-page .exco-count,
.exco-collab-page .exco-privacy { margin-top: var(--exco-xs); font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--exco-muted); }
.exco-collab-page .exco-echo:empty { display: none; }
.exco-collab-page .exco-count { text-align: right; }

.exco-collab-page .exco-error {
	margin-top: var(--exco-xs);
	padding-left: 24px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--exco-destructive);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") no-repeat left 1px / 18px;
}
.exco-collab-page .has-error > .exco-input,
.exco-collab-page .has-error .exco-affix .exco-input,
.exco-collab-page .has-error > .exco-opt-terms { border-color: var(--exco-destructive); }

.exco-collab-page .exco-icon { flex: none; width: 20px; height: 20px; }
.exco-collab-page .exco-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.exco-collab-page .exco-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.exco-collab-page .exco-more { margin-bottom: var(--exco-md); }
.exco-collab-page .exco-more-summary { display: flex; align-items: center; gap: var(--exco-sm); min-height: 44px; font-size: 14px; font-weight: 600; cursor: pointer; }

.exco-collab-page .exco-radios { display: flex; flex-wrap: wrap; gap: 0 var(--exco-md); }
.exco-collab-page .exco-radio { display: inline-flex; align-items: center; gap: var(--exco-sm); min-height: 44px; cursor: pointer; }
.exco-collab-page .exco-radio input { width: 20px; height: 20px; margin: 0; accent-color: var(--exco-ink); }

/* Deal cards, terms checkbox and chips: native checkboxes with a visible check icon. */
.exco-collab-page .exco-opt,
.exco-collab-page .exco-chip { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; background: var(--exco-white); border: 1px solid var(--exco-border); }
.exco-collab-page .exco-opt { margin-bottom: var(--exco-sm); padding: 12px; border-radius: 8px; }
.exco-collab-page .exco-opt input,
.exco-collab-page .exco-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.exco-collab-page .exco-opt-box { display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin-top: 1px; color: var(--exco-white); border: 2px solid var(--exco-muted); border-radius: 4px; }
.exco-collab-page .exco-opt-box .exco-icon { width: 18px; height: 18px; visibility: hidden; }
.exco-collab-page .exco-opt input:checked + .exco-opt-box { background: var(--exco-ink); border-color: var(--exco-ink); }
.exco-collab-page .exco-opt input:checked + .exco-opt-box .exco-icon { visibility: visible; }
.exco-collab-page .exco-opt-text { min-width: 0; overflow-wrap: anywhere; }
.exco-collab-page .exco-opt-text strong { display: block; font-weight: 600; }
.exco-collab-page .exco-opt-text span { display: block; font-size: 14px; line-height: 1.4; color: var(--exco-muted); }
.exco-collab-page .exco-opt:has(input:checked),
.exco-collab-page .exco-chip:has(input:checked) { border-color: var(--exco-ink); box-shadow: 0 0 0 1px var(--exco-ink); }
.exco-collab-page .exco-opt input:focus-visible + .exco-opt-box { outline: 2px solid var(--exco-ink); outline-offset: 2px; }

.exco-collab-page .exco-chips { display: flex; flex-wrap: wrap; gap: var(--exco-sm); }
.exco-collab-page .exco-chip { align-items: center; gap: var(--exco-xs); padding: 0 16px; font-size: 14px; font-weight: 600; border-radius: 22px; }
.exco-collab-page .exco-chip .exco-icon { display: none; width: 16px; height: 16px; }
.exco-collab-page .exco-chip input:checked + .exco-icon { display: block; }
.exco-collab-page .exco-chip input:focus-visible ~ span { outline: 2px solid var(--exco-ink); outline-offset: 6px; }

.exco-collab-page .exco-terms { margin-bottom: var(--exco-lg); padding: var(--exco-md); border: 1px solid var(--exco-border); border-radius: 8px; }
.exco-collab-page .exco-terms-title { margin-bottom: var(--exco-sm); font-size: 14px; font-weight: 600; line-height: 1.4; }
.exco-collab-page .exco-terms-body { margin-bottom: var(--exco-md); }
.exco-collab-page .exco-opt-terms { margin-bottom: 0; align-items: center; }

.exco-collab-page .exco-summary { margin-bottom: var(--exco-lg); padding: var(--exco-md); background: var(--exco-white); border: 1px solid var(--exco-destructive); border-radius: 8px; }
.exco-collab-page .exco-summary-title { margin-bottom: var(--exco-sm); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--exco-destructive); }
.exco-collab-page .exco-summary-list { list-style: none; }
.exco-collab-page .exco-summary-list a { display: inline-block; padding: var(--exco-sm) 0; font-size: 14px; font-weight: 600; color: var(--exco-destructive); overflow-wrap: anywhere; }

.exco-collab-page .exco-applying { margin-bottom: var(--exco-lg); padding: 12px var(--exco-md); font-size: 14px; background: var(--exco-cream); border-radius: 4px; overflow-wrap: anywhere; }

.exco-collab-page .exco-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--exco-sm);
	width: 100%;
	min-height: var(--exco-2xl);
	padding: 0 var(--exco-lg);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--exco-ink);
	text-decoration: none;
	cursor: pointer;
	background: var(--exco-accent);
	border: 0;
	border-radius: 4px;
	box-shadow: none;
}
.exco-collab-page .exco-cta:hover { filter: brightness(0.95); color: var(--exco-ink); }
.exco-collab-page .exco-cta.is-busy { cursor: progress; }
.exco-collab-page .exco-cta .exco-spin { display: none; }
.exco-collab-page .exco-cta.is-busy .exco-spin { display: block; animation: exco-spin 1s linear infinite; }
.exco-collab-page .exco-cta-link:disabled { opacity: 0.45; cursor: not-allowed; }
.exco-collab-page .exco-cta-link { display: inline-flex; width: auto; background: var(--exco-white); border: 2px solid var(--exco-ink); }
@keyframes exco-spin { to { transform: rotate(360deg); } }

.exco-collab-page .exco-status { min-height: 0; margin-top: var(--exco-sm); font-size: 14px; line-height: 1.4; }
.exco-collab-page .exco-status.is-error { font-weight: 600; color: var(--exco-destructive); }
.exco-collab-page .exco-privacy { margin-top: var(--exco-md); }
.exco-collab-page .exco-privacy a,
.exco-collab-page .exco-noscript a { color: var(--exco-ink); text-decoration: underline; overflow-wrap: anywhere; }
.exco-collab-page .exco-noscript { margin-top: var(--exco-md); }

.exco-collab-page .exco-thanks-body,
.exco-collab-page .exco-thanks-response,
.exco-collab-page .exco-thanks-email { margin-bottom: var(--exco-md); overflow-wrap: anywhere; }
.exco-collab-page .exco-thanks-back a { color: var(--exco-ink); font-weight: 600; text-decoration: underline; }

@media (min-width: 900px) {
	.exco-collab-page .exco-band { padding: var(--exco-3xl) var(--exco-lg); }
	.exco-collab-page .exco-card { padding: var(--exco-lg); }
}

@media (prefers-reduced-motion: reduce) {
	.exco-collab-page .exco-cta.is-busy .exco-spin { animation: none; }
}

/* Proof upload (21-07) */
.exco-collab-page .exco-dropwrap { position: relative; }
.exco-collab-page .exco-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.exco-collab-page .exco-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--exco-sm);
	min-height: 96px;
	margin: 0;
	padding: var(--exco-md);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	background: var(--exco-white);
	border: 1px dashed var(--exco-border);
	border-radius: 8px;
}
.exco-collab-page .exco-drop .exco-icon { width: 24px; height: 24px; color: var(--exco-muted); }
.exco-collab-page .exco-file-input:focus-visible + .exco-drop { outline: 2px solid var(--exco-ink); outline-offset: 2px; }
.exco-collab-page .has-error .exco-drop { border-color: var(--exco-destructive); }

.exco-collab-page .exco-files { list-style: none; }
.exco-collab-page .exco-files:not(:empty) { margin-bottom: var(--exco-sm); }
.exco-collab-page .exco-file { display: flex; align-items: center; gap: 12px; min-height: 56px; margin-bottom: var(--exco-sm); }
.exco-collab-page .exco-file-thumb { display: flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; overflow: hidden; background: var(--exco-cream); border-radius: 4px; }
.exco-collab-page .exco-file-thumb img { display: block; width: 56px; height: 56px; object-fit: cover; }
.exco-collab-page .exco-file-thumb .exco-icon { width: 24px; height: 24px; color: var(--exco-muted); }
.exco-collab-page .exco-file-meta { display: block; flex: 1 1 auto; min-width: 0; }
.exco-collab-page .exco-file-name { display: block; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.exco-collab-page .exco-file-size { display: block; font-size: 14px; line-height: 1.4; color: var(--exco-muted); }
.exco-collab-page .exco-file-remove { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; color: var(--exco-ink); cursor: pointer; background: transparent; border: 0; border-radius: 4px; box-shadow: none; }

.exco-collab-page .exco-progress { height: 4px; margin-top: var(--exco-sm); overflow: hidden; background: var(--exco-border); border-radius: 2px; }
.exco-collab-page .exco-progress-fill { width: 0; height: 100%; background: var(--exco-accent); }

.exco-collab-page .exco-thanks-proofs { margin-bottom: var(--exco-md); }
.exco-collab-page .exco-thanks-proofs-list { list-style: none; }
.exco-collab-page .exco-thanks-proofs-list li { margin-bottom: var(--exco-sm); font-size: 14px; line-height: 1.4; color: var(--exco-destructive); overflow-wrap: anywhere; }

/* Cached-page banner (21-14). Lives on offering landing pages, outside .exco-collab-page, so it carries its own values. */
.exco-banner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1050px;
	margin: 0 auto 16px;
	padding: 16px;
	font-size: 16px;
	line-height: 1.5;
	color: #17130f;
	background: #fff;
	border: 1px solid #e9e1d3;
	border-left: 4px solid #17130f;
	overflow-wrap: anywhere;
}
.exco-banner .exco-banner-text { margin: 0; }
.exco-banner .exco-banner-lead { font-weight: 600; }
.exco-banner .exco-banner-link { font-weight: 600; color: #17130f; text-decoration: underline; }
.exco-banner .exco-banner-link:focus-visible { outline: 2px solid #17130f; outline-offset: 2px; }

/* Posted-content page (21-16). Shares the form page's tokens; the shortcode adds both body classes. */
.exco-collab-page .exco-context { margin-bottom: var(--exco-lg); font-size: 14px; font-weight: 600; color: var(--exco-muted); overflow-wrap: anywhere; }
.exco-collab-page .exco-rows,
.exco-collab-page .exco-sent-list { list-style: none; margin: 0; padding: 0; }
.exco-collab-page .exco-linkline { display: flex; align-items: center; gap: var(--exco-xs); }
.exco-collab-page .exco-linkline .exco-input { flex: 1 1 auto; min-width: 0; }
.exco-collab-page .has-error .exco-linkline .exco-input { border-color: var(--exco-destructive); }
.exco-collab-page .exco-add { margin-bottom: var(--exco-lg); }
.exco-collab-page .exco-sent { margin-bottom: var(--exco-lg); }
.exco-collab-page .exco-sent-list li { margin-bottom: var(--exco-sm); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.exco-collab-page .exco-sent-list a { color: var(--exco-ink); text-decoration: underline; }

/* Pet section (22-22): shown only while the niche Pets and animals is chosen; the no-:has fallback below shows it */
.exco-collab-page .exco-more--pet { display: none; }
.exco-collab-page:has(select[name="niche"] option[value="pets"]:checked) .exco-more--pet { display: block; }

/* How it works (22-05): hidden until the page's generated :has() rule matches the chosen offering */
.exco-collab-page .exco-hiw {
	display: none;
	margin-bottom: var(--exco-md);
	padding: var(--exco-md);
	background: var(--exco-white);
	border: 1px solid var(--exco-border);
	border-radius: 8px;
	overflow-wrap: anywhere;
}
.exco-collab-page .exco-hiw-for { display: none; margin-bottom: var(--exco-sm); font-size: 14px; font-weight: 600; }
.exco-collab-page .exco-hiw-title { margin-bottom: var(--exco-xs); font-size: 20px; font-weight: 600; line-height: 1.2; }
.exco-collab-page .exco-hiw-intro,
.exco-collab-page .exco-hiw-line { font-size: 14px; color: var(--exco-muted); }
.exco-collab-page .exco-hiw-intro { margin-bottom: var(--exco-md); }
.exco-collab-page .exco-hiw-list { margin-bottom: var(--exco-md); list-style: none; }
.exco-collab-page .exco-hiw-list li { display: flex; gap: var(--exco-sm); margin: 0 0 var(--exco-xs); }
.exco-collab-page .exco-hiw-emoji { flex: none; width: 24px; }
.exco-collab-page .exco-hiw-line strong { color: var(--exco-ink); font-weight: 600; }
.exco-collab-page .exco-hiw-line + .exco-hiw-line { margin-top: var(--exco-xs); }
@media (min-width: 900px) {
	.exco-collab-page .exco-hiw { padding: var(--exco-lg); }
}
@supports not selector(:has(*)) {
	.exco-collab-page .exco-hiw,
	.exco-collab-page .exco-hiw-for { display: block; }
	.exco-collab-page .exco-more--pet { display: block; }
}