/* COP Church Content: Planning Center forms.
 * Themes can restyle with these custom properties on .copc-form-wrap (or :root):
 * --copc-form-accent, --copc-form-ink, --copc-form-muted, --copc-form-line,
 * --copc-form-bg, --copc-form-field-bg, --copc-form-radius, --copc-form-font.
 */
.copc-form-wrap {
	--_accent: var(--copc-form-accent, var(--copc-accent, #d6232a));
	--_ink: var(--copc-form-ink, var(--copc-ink, #15171c));
	--_muted: var(--copc-form-muted, #626a78);
	--_line: var(--copc-form-line, #dfe2e8);
	--_bg: var(--copc-form-bg, #fff);
	--_field: var(--copc-form-field-bg, #f8f9fb);
	--_radius: var(--copc-form-radius, var(--copc-radius, 14px));
	--_error: #c4281c;
	--_ok: #1f8a4c;
	font-family: var(--copc-form-font, inherit);
	color: var(--_ink);
	max-width: 760px;
	margin: 0 auto 2rem;
	box-sizing: border-box;
	scroll-margin-top: 120px;
}
.copc-form-wrap *, .copc-form-wrap *::before, .copc-form-wrap *::after { box-sizing: border-box; }
.copc-form-wrap--card {
	background: var(--_bg);
	border: 1px solid var(--_line);
	border-radius: calc(var(--_radius) + 6px);
	padding: clamp(22px, 4vw, 40px);
	box-shadow: 0 1px 2px rgba(16, 20, 28, .04), 0 18px 44px -18px rgba(16, 20, 28, .18);
}
.copc-form-wrap [hidden] { display: none !important; }

/* Header */
.copc-form__header { margin-bottom: 1.6rem; }
.copc-form__title { margin: 0 0 .4rem; font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.2; color: var(--_ink); }
.copc-form__title::after { content: ""; display: block; width: 44px; height: 3px; margin-top: .75rem; border-radius: 3px; background: var(--_accent); }
.copc-form__intro { margin: .9rem 0 0; color: var(--_muted); font-size: 1.02rem; line-height: 1.6; }

/* Grid */
.copc-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1.1rem; }
.copc-field { min-width: 0; margin: 0; }
.copc-field--full, .copc-field--textarea, .copc-field--checkboxes, .copc-field--select, .copc-field--address, .copc-field--file, .copc-field--heading, .copc-field--boolean, .copc-field--checkbox_option, .copc-field--text { grid-column: 1 / -1; }
.copc-field--half { grid-column: span 1; }
.copc-field--heading h4 { margin: .6rem 0 .1rem; padding-top: 1rem; border-top: 1px solid var(--_line); font-size: 1.08rem; }

.copc-field__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.copc-field__label { display: block; font-weight: 600; font-size: .95rem; margin: 0 0 .45rem; padding: 0; color: var(--_ink); }
.copc-field__req { color: var(--_accent); font-weight: 700; }
.copc-field__help { color: var(--_muted); font-size: .88rem; line-height: 1.5; margin: -.2rem 0 .55rem; }
.copc-field__help p { margin: 0 0 .3rem; }

/* Inputs */
.copc-field__input {
	display: block;
	width: 100%;
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--_ink);
	background: var(--_field);
	border: 1.5px solid var(--_line);
	border-radius: calc(var(--_radius) - 4px);
	padding: .8rem .95rem;
	min-height: 50px;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
textarea.copc-field__input { min-height: 120px; resize: vertical; }
select.copc-field__input {
	padding-right: 2.6rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626a78' 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 .85rem center;
	background-size: 18px;
}
.copc-field__input::placeholder { color: #9aa0ab; }
.copc-field__input:hover { border-color: color-mix(in srgb, var(--_line) 55%, var(--_ink)); }
.copc-field__input:focus { outline: none; background: #fff; border-color: var(--_accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--_accent) 16%, transparent); }

/* Choices */
.copc-choices { display: flex; flex-wrap: wrap; gap: .55rem; }
.copc-choice { position: relative; display: inline-flex; align-items: center; cursor: pointer; margin: 0; }
.copc-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.copc-choice span {
	display: inline-flex; align-items: center; gap: .6rem;
	padding: .7rem 1.05rem; min-height: 48px;
	border: 1.5px solid var(--_line); border-radius: 999px;
	background: var(--_field); font-weight: 500; line-height: 1.3;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.copc-choice--check span { border-radius: calc(var(--_radius) - 4px); }
.copc-choice--check span::before {
	content: ""; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 6px;
	border: 1.5px solid #b7bcc6; background: #fff center / 14px no-repeat;
	transition: background-color .15s ease, border-color .15s ease;
}
.copc-choice--radio span::before {
	content: ""; flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%;
	border: 1.5px solid #b7bcc6; background: #fff; transition: box-shadow .15s ease, border-color .15s ease;
}
.copc-choice:hover span { border-color: color-mix(in srgb, var(--_line) 40%, var(--_ink)); }
.copc-choice input:checked + span { border-color: var(--_accent); background: color-mix(in srgb, var(--_accent) 7%, #fff); }
.copc-choice--check input:checked + span::before {
	background-color: var(--_accent); border-color: var(--_accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.copc-choice--radio input:checked + span::before { border-color: var(--_accent); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--_accent); }
.copc-choice input:focus-visible + span { box-shadow: 0 0 0 4px color-mix(in srgb, var(--_accent) 22%, transparent); }

/* Address */
.copc-address { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.copc-address__part { display: block; font-size: .85rem; color: var(--_muted); }
.copc-address__part span { display: block; margin-bottom: .3rem; }
.copc-address__part--full { grid-column: 1 / -1; }
.copc-address__part--half { grid-column: span 2; }

/* File */
.copc-file-drop {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
	padding: 1.4rem; text-align: center; cursor: pointer;
	border: 1.5px dashed #c3c8d1; border-radius: calc(var(--_radius) - 4px); background: var(--_field);
	transition: border-color .15s ease, background-color .15s ease;
}
.copc-file-drop:hover, .copc-file-drop.is-dragging { border-color: var(--_accent); background: color-mix(in srgb, var(--_accent) 5%, #fff); }
.copc-file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.copc-file-drop__text { font-weight: 600; }
.copc-file-drop__hint { font-size: .85rem; color: var(--_muted); }

/* Errors */
.copc-field__error { margin: .45rem 0 0; color: var(--_error); font-size: .88rem; font-weight: 500; display: flex; gap: .35rem; align-items: center; }
.copc-field__error::before { content: "!"; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--_error); color: #fff; font-size: .72rem; font-weight: 700; flex: 0 0 17px; }
.copc-field.has-error .copc-field__input, .copc-field.has-error .copc-choice span, .copc-field.has-error .copc-file-drop { border-color: var(--_error); }
.copc-form__alert { margin: 0 0 1.2rem; padding: .85rem 1rem; border-radius: calc(var(--_radius) - 4px); background: #fdf1f0; border: 1px solid #f3c7c2; color: #8a1d14; font-weight: 500; }

/* Footer */
.copc-form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.7rem; padding-top: 1.4rem; border-top: 1px solid var(--_line); }
.copc-form__button {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	min-height: 52px; padding: .85rem 1.9rem; border: 0; border-radius: 999px; cursor: pointer;
	font: inherit; font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; text-decoration: none;
	color: #fff; background: var(--_accent);
	box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--_accent) 70%, transparent);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.copc-form__button:hover { transform: translateY(-1px); filter: brightness(1.05); color: #fff; }
.copc-form__button:focus-visible { outline: 3px solid color-mix(in srgb, var(--_accent) 40%, transparent); outline-offset: 3px; }
.copc-form__spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: copc-spin .7s linear infinite; }
.copc-form.is-sending .copc-form__spinner { display: inline-block; }
.copc-form.is-sending .copc-form__button { pointer-events: none; opacity: .85; }
.copc-form__privacy { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .85rem; color: var(--_muted); }
.copc-form__privacy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; flex: 0 0 16px; }

/* Success */
.copc-form__success { text-align: center; padding: 1.5rem 0 .5rem; outline: none; animation: copc-rise .45s ease both; }
.copc-form__check { display: inline-block; width: 72px; height: 72px; margin-bottom: .6rem; }
.copc-form__check svg { width: 100%; height: 100%; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.copc-form__check circle { stroke: color-mix(in srgb, var(--_ok) 25%, transparent); fill: color-mix(in srgb, var(--_ok) 8%, transparent); }
.copc-form__check path { stroke: var(--_ok); stroke-dasharray: 40; stroke-dashoffset: 40; animation: copc-draw .5s .15s ease forwards; }
.copc-form__success-title { margin: 0; font-size: 1.5rem; font-weight: 700; }
.copc-form__success-text { margin: .5rem auto 0; max-width: 46ch; color: var(--_muted); line-height: 1.6; }

/* Hand-off to Church Center */
.copc-form__handoff { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.copc-form__handoff p { margin: 0; color: var(--_muted); }

.copc-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.copc-form-admin-note { padding: 1rem 1.2rem; border: 1px dashed #c3c8d1; border-radius: 10px; color: #626a78; font-size: .95rem; }

/* Dark sections */
.copc-form-wrap--plain.is-dark, .is-dark .copc-form-wrap--plain { --copc-form-ink: #f4f5f7; --copc-form-muted: #b9bec8; --copc-form-line: rgba(255, 255, 255, .18); --copc-form-field-bg: rgba(255, 255, 255, .06); }

@keyframes copc-spin { to { transform: rotate(360deg); } }
@keyframes copc-draw { to { stroke-dashoffset: 0; } }
@keyframes copc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
	.copc-form__grid { grid-template-columns: 1fr; }
	.copc-field--half { grid-column: 1 / -1; }
	.copc-address { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.copc-address__part--half { grid-column: 1 / -1; }
	.copc-form__button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.copc-form-wrap * { animation: none !important; transition: none !important; }
	.copc-form__check path { stroke-dashoffset: 0; }
}

/* Hold our own against theme typography (prose margins, link colours). */
.copc-form-wrap .copc-form__header > :first-child, .copc-form-wrap .copc-form__title { margin-top: 0; }
.copc-form-wrap .copc-form__intro, .copc-form-wrap .copc-field__label, .copc-form-wrap .copc-form__privacy { max-width: none; }
.copc-form-wrap a.copc-form__button, .copc-form-wrap a.copc-form__button:visited, .copc-form-wrap a.copc-form__button:hover { color: #fff; text-decoration: none; }
.copc-form-wrap .copc-field__input { margin: 0; }
.copc-form-wrap .copc-choice, .copc-form-wrap .copc-address__part { margin: 0; }