/* PBJ Forms & Products — frontend */
.pbj-fb-wrap { max-width: 720px; margin: 1.25rem 0; }
.pbj-fb-form { display: block; }
.pbj-fb-desc { margin: 0 0 1rem; opacity: .85; }
.pbj-fb-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.pbj-fb-field { display: block; }
.pbj-fb-col-full { grid-column: 1 / -1; }
.pbj-fb-col-half { grid-column: span 1; }
@media (max-width: 640px) {
	.pbj-fb-grid { grid-template-columns: 1fr; }
	.pbj-fb-col-half { grid-column: 1 / -1; }
}
.pbj-fb-field label { display: block; font-weight: 600; margin-bottom: .35rem; }
.pbj-fb-field input[type="text"],
.pbj-fb-field input[type="email"],
.pbj-fb-field input[type="tel"],
.pbj-fb-field input[type="url"],
.pbj-fb-field input[type="number"],
.pbj-fb-field input[type="date"],
.pbj-fb-field select,
.pbj-fb-field textarea {
	width: 100%; box-sizing: border-box;
	padding: .55rem .75rem; border: 1px solid #cfd4dc;
	border-radius: 6px; font: inherit; line-height: 1.4;
	background: #fff;
}
.pbj-fb-field textarea { min-height: 6rem; resize: vertical; }
.pbj-fb-options { display: flex; flex-direction: column; gap: .25rem; }
.pbj-fb-opt { font-weight: 400; }
.pbj-fb-consent { font-weight: 400; }
.pbj-fb-required { color: #c00; margin-left: .15rem; }
.pbj-fb-help { font-size: .85em; margin: .25rem 0 0; opacity: .8; }
.pbj-fb-captcha { margin: 1rem 0; }
.pbj-fb-captcha input { max-width: 8rem; }
.pbj-fb-price { font-weight: 700; margin: 1rem 0 .5rem; }
.pbj-fb-card {
	min-height: 88px; padding: .5rem; border: 1px solid #cfd4dc;
	border-radius: 6px; background: #fff; margin-bottom: .75rem;
}
.pbj-fb-paypal { min-height: 50px; margin-bottom: .75rem; }
.pbj-fb-actions { margin-top: 1rem; }
.pbj-fb-submit {
	background: #2271b1; color: #fff; border: 0; padding: .65rem 1.25rem;
	border-radius: 6px; font: inherit; cursor: pointer;
}
.pbj-fb-submit:hover { background: #135e96; }
.pbj-fb-submit[disabled] { opacity: .6; cursor: progress; }
.pbj-fb-errors { color: #b32d2e; margin-top: 1rem; min-height: 1.25rem; }
.pbj-fb-success { color: #2a7a2a; margin-top: 1rem; min-height: 1.25rem; }

/* =================================================================
 * Product block (v1.6.0) — optional. Renders only when the form
 * carries a picture, headline, subhead or bullet points.
 * ================================================================= */
.pbj-fb-product { margin: 0 0 1.25rem; }
.pbj-fb-product-media img,
.pbj-fb-product-image {
	display: block; width: 100%; height: auto;
	border-radius: var(--pbjfb-radius, 6px);
}
.pbj-fb-product-headline { margin: 0 0 .35rem; line-height: 1.2; }
.pbj-fb-product-stacked .pbj-fb-product-media { margin-bottom: 1rem; }
.pbj-fb-product-subhead { margin: 0 0 .75rem; opacity: .85; }
.pbj-fb-product-details { margin: 0 0 .5rem; padding-left: 1.25rem; }
.pbj-fb-product-details li { margin-bottom: .3rem; }
.pbj-fb-price-note { font-weight: 400; opacity: .75; margin-left: .5rem; font-size: .9em; }

/* Picture beside the form on wide screens; stacks below 720px. */
@media (min-width: 721px) {
	.pbj-fb-product-side { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.5rem; align-items: start; }
	.pbj-fb-product-side .pbj-fb-product-media { margin-bottom: 0; }
}

/* =================================================================
 * Theme layer (v1.6.0). Everything below applies ONLY when the
 * owner has ticked "Use my own styling" — the .pbj-fb-themed class
 * is absent otherwise, and the plain rules above are all that runs.
 * The custom properties are written inline on .pbj-fb-themed by PHP.
 * ================================================================= */
.pbj-fb-themed {
	max-width: var(--pbjfb-max-width, 720px);
	font-size: var(--pbjfb-font-size, 1rem);
	font-family: var(--pbjfb-font-family, inherit);
	color: var(--pbjfb-text, #1d2327);
}
.pbj-fb-themed[data-align="center"] { margin-left: auto; margin-right: auto; }

.pbj-fb-themed .pbj-fb-grid { gap: var(--pbjfb-gap, 1rem); }
.pbj-fb-themed .pbj-fb-field label { font-weight: var(--pbjfb-label-weight, 600); color: var(--pbjfb-text, #1d2327); }
.pbj-fb-themed .pbj-fb-help,
.pbj-fb-themed .pbj-fb-desc { color: var(--pbjfb-muted, #646970); opacity: 1; }
.pbj-fb-themed .pbj-fb-required { color: var(--pbjfb-error, #b32d2e); }
.pbj-fb-themed .pbj-fb-errors { color: var(--pbjfb-error, #b32d2e); }
.pbj-fb-themed .pbj-fb-success { color: var(--pbjfb-success, #2a7a2a); }
.pbj-fb-themed .pbj-fb-price { color: var(--pbjfb-accent, #2271b1); }
.pbj-fb-themed .pbj-fb-product-subhead { color: var(--pbjfb-muted, #646970); opacity: 1; }

.pbj-fb-themed .pbj-fb-field input[type="text"],
.pbj-fb-themed .pbj-fb-field input[type="email"],
.pbj-fb-themed .pbj-fb-field input[type="tel"],
.pbj-fb-themed .pbj-fb-field input[type="url"],
.pbj-fb-themed .pbj-fb-field input[type="number"],
.pbj-fb-themed .pbj-fb-field input[type="date"],
.pbj-fb-themed .pbj-fb-field select,
.pbj-fb-themed .pbj-fb-field textarea,
.pbj-fb-themed .pbj-fb-captcha input {
	padding: var(--pbjfb-field-padding, .55rem) calc(var(--pbjfb-field-padding, .55rem) * 1.35);
	border: 1px solid var(--pbjfb-border, #cfd4dc);
	border-radius: var(--pbjfb-radius, 6px);
	background: var(--pbjfb-field-bg, #fff);
	color: var(--pbjfb-text, #1d2327);
	font-family: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.pbj-fb-themed .pbj-fb-card {
	border: 1px solid var(--pbjfb-border, #cfd4dc);
	border-radius: var(--pbjfb-radius, 6px);
	background: var(--pbjfb-field-bg, #fff);
}
.pbj-fb-themed .pbj-fb-field :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--pbjfb-accent, #2271b1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pbjfb-accent, #2271b1) 25%, transparent);
}

/* Field style: underline */
.pbj-fb-themed[data-field-style="underline"] .pbj-fb-field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
	border-width: 0 0 2px 0;
	border-radius: 0;
	background: transparent;
	padding-left: 0; padding-right: 0;
}
/* Field style: filled */
.pbj-fb-themed[data-field-style="filled"] .pbj-fb-field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
	border-color: transparent;
	background: color-mix(in srgb, var(--pbjfb-border, #cfd4dc) 30%, var(--pbjfb-field-bg, #fff));
}

/* Buttons */
.pbj-fb-themed .pbj-fb-submit {
	background: var(--pbjfb-accent, #2271b1);
	color: var(--pbjfb-accent-text, #fff);
	border: 2px solid var(--pbjfb-accent, #2271b1);
	border-radius: var(--pbjfb-radius, 6px);
	padding: calc(var(--pbjfb-field-padding, .55rem) * 1.15) calc(var(--pbjfb-field-padding, .55rem) * 2.4);
	font-family: inherit;
	font-weight: var(--pbjfb-label-weight, 600);
	transition: filter .15s ease, background-color .15s ease, color .15s ease;
}
.pbj-fb-themed .pbj-fb-submit:hover { background: var(--pbjfb-accent, #2271b1); filter: brightness(.9); }
.pbj-fb-themed .pbj-fb-submit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pbjfb-accent, #2271b1) 35%, transparent);
}
.pbj-fb-themed[data-button-style="outline"] .pbj-fb-submit {
	background: transparent; color: var(--pbjfb-accent, #2271b1);
}
.pbj-fb-themed[data-button-style="outline"] .pbj-fb-submit:hover {
	background: var(--pbjfb-accent, #2271b1); color: var(--pbjfb-accent-text, #fff); filter: none;
}
.pbj-fb-themed[data-button-style="pill"] .pbj-fb-submit { border-radius: 999px; }
.pbj-fb-themed[data-button-style="block"] .pbj-fb-submit { display: block; width: 100%; }

/* Respect a visitor's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
	.pbj-fb-themed .pbj-fb-submit,
	.pbj-fb-themed .pbj-fb-field :is(input, select, textarea) { transition: none; }
}