/* PHWO public forms — extends the shared donation form styling. */

.phwo-public-form {
	--phwo-primary: var(--phwo-color-primary, #0D5C63);
	--phwo-accent: var(--phwo-color-accent, #E8A33D);
	--phwo-line: #dde5e6;
	max-width: var(--phwo-text, 760px);
	margin: 0 auto;
}

.phwo-checkgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 4px 18px;
	margin: 6px 0 20px;
}

.phwo-checkgrid .phwo-check {
	margin: 0;
	padding: 7px 0;
}

.phwo-public-form .phwo-check em {
	color: #c0392b;
	font-style: normal;
}

.phwo-declaration-intro {
	font-weight: 600;
	margin-bottom: 10px;
}

.phwo-public-form .phwo-check {
	padding: 9px 12px;
	border-radius: 8px;
	transition: background .15s;
}

.phwo-public-form .phwo-check:hover {
	background: rgba(13, 92, 99, .04);
}

.phwo-public-form input[type="date"],
.phwo-public-form select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--phwo-line);
	border-radius: 8px;
	font-size: 16px;
	font-family: inherit;
	background: #fff;
}

/* Anchor target so the success notice is in view after redirect. */
#phwo-sent {
	scroll-margin-top: 120px;
}

/* Attachments on the volunteer form ------------------------------------- */
.phwo-form .phwo-file input[type="file"] {
	width: 100%;
	padding: 0.85rem;
	border: 1px dashed #b6c2cf;
	border-radius: 8px;
	background: #f7f9fb;
	font-size: 0.95rem;
	cursor: pointer;
}
.phwo-form .phwo-file input[type="file"]:hover,
.phwo-form .phwo-file input[type="file"]:focus {
	border-color: #1b6f4a;
	background: #f2f8f5;
}
.phwo-form .phwo-help {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.85rem;
	color: #5b6b7a;
	line-height: 1.5;
}
.phwo-form .phwo-crosslink {
	margin-top: 1rem;
}

/* ---------------------------------------------------------------- step-by-step forms */
.phwo-stepper.is-stepped .phwo-step[hidden] { display: none !important; }
.phwo-progress { margin: 0 0 18px; }
.phwo-progress-count { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #0D5C63; }
.phwo-progress ol { display: flex; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 13px; color: #6a7a7f; }
.phwo-progress li { flex: 1; }
.phwo-progress li.is-now { color: #101c20; font-weight: 600; }
.phwo-progress li.is-done { color: #0D5C63; }
.phwo-progress li.is-done::before { content: "✓ "; }
.phwo-progress-track { height: 6px; background: #e6eeee; border-radius: 5px; overflow: hidden; }
.phwo-progress-track span { display: block; height: 100%; width: 0; background: #0D5C63; border-radius: 5px; transition: width .25s ease; }
.phwo-step-hint { margin: -4px 0 14px; color: #5d6d72; font-size: .95em; }
.phwo-opt { font-weight: 400; color: #6a7a7f; }
.phwo-stepnav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.phwo-stepnav .phwo-next, .phwo-stepnav .phwo-submit { margin-left: auto; }
.phwo-next { background: #0D5C63; color: #fff; border: 0; border-radius: 5px; padding: 13px 26px; font-size: 16px; font-weight: 600; cursor: pointer; min-height: 48px; }
.phwo-next:hover { background: #0a4a50; }
.phwo-back { background: none; border: 1px solid #cfdcdd; color: #33454a; border-radius: 5px; padding: 12px 18px; font-size: 15px; cursor: pointer; min-height: 48px; }
.phwo-stepnav .phwo-submit { width: auto; margin-top: 0; }
.phwo-submit.is-busy { opacity: .6; pointer-events: none; }
.phwo-err-msg { margin: 0 0 8px; color: #b42318; font-weight: 600; font-size: 14px; }
.phwo-field.is-invalid input, .phwo-field.is-invalid select, .phwo-field.is-invalid textarea { border-color: #d92d20 !important; box-shadow: 0 0 0 3px rgba(217,45,32,.12); }
[data-min].is-invalid { outline: 2px solid rgba(217,45,32,.35); outline-offset: 4px; border-radius: 5px; }

/* Role cards */
.phwo-roles-group { margin: 16px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #33454a; display: flex; align-items: center; gap: 8px; }
.phwo-roles-group:first-child { margin-top: 0; }
.phwo-roles-urgent { font-style: normal; text-transform: none; letter-spacing: 0; font-size: 12px; background: #fff3dc; color: #8a5300; border-radius: 5px; padding: 2px 8px; }
.phwo-roles-opt { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; color: #6a7a7f; }
.phwo-roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.phwo-role { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 12px 42px; border: 1px solid #d5dfe0; border-radius: 5px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.phwo-role:hover { border-color: #0D5C63; }
.phwo-role input { position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; accent-color: #0D5C63; margin: 0; }
.phwo-role-ico { font-size: 20px; line-height: 1.2; }
.phwo-role-text strong { display: block; font-size: 15px; color: #101c20; }
.phwo-role-text small { display: block; color: #5d6d72; font-size: 13px; line-height: 1.35; margin-top: 2px; }
.phwo-role:has(input:checked) { border-color: #0D5C63; background: #eef6f6; box-shadow: inset 0 0 0 1px #0D5C63; }

/* Chips */
.phwo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.phwo-chip { position: relative; cursor: pointer; }
.phwo-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.phwo-chip span { display: inline-block; padding: 10px 14px; border: 1px solid #cfdcdd; border-radius: 5px; background: #fff; font-size: 14px; color: #33454a; min-height: 44px; line-height: 22px; }
.phwo-chip input:checked + span { background: #0D5C63; border-color: #0D5C63; color: #fff; }
.phwo-chip input:checked + span::before { content: "✓ "; }
.phwo-chip input:focus-visible + span { outline: 2px solid #E8A33D; outline-offset: 2px; }

.phwo-law { margin-top: 16px; padding: 14px 16px; border-left: 4px solid #E8A33D; background: #fffaf0; border-radius: 5px; }
.phwo-law[hidden] { display: none; }

@media (max-width: 600px) {
	.phwo-progress ol { font-size: 11.5px; }
	.phwo-roles-grid { grid-template-columns: 1fr; }
	.phwo-stepnav .phwo-next, .phwo-stepnav .phwo-submit { flex: 1; }
}

.phwo-stepper [data-show-if][hidden] { display: none !important; }
.phwo-stepper details.phwo-help-truth { margin: 18px 0 10px; }
.phwo-stepper details.phwo-help-truth summary { cursor: pointer; }
.phwo-role input[type=radio] { border-radius: 50%; }
.phwo-law > p:only-child { margin: 0; }