/* ============================================================
   Product of the Year – Entry Form
   Themeable via the CSS variables in .poy-ef below.
   ============================================================ */

.poy-ef {
	--poy-accent: #d81f26;          /* primary brand colour  */
	--poy-accent-dark: #a5171d;
	--poy-ink: #14161a;
	--poy-muted: #5b6470;
	--poy-line: #e3e7ec;
	--poy-bg: #ffffff;
	--poy-bg-soft: #f6f8fa;
	--poy-radius: 14px;
	--poy-focus: rgba(216, 31, 38, .18);

	max-width: 820px;
	margin: 0 auto;
	color: var(--poy-ink);
	font-family: inherit;
	line-height: 1.55;
}

.poy-ef *,
.poy-ef *::before,
.poy-ef *::after { box-sizing: border-box; }

/* ---------- Progress -------------------------------------- */
.poy-ef__progress { margin-bottom: 2rem; }

.poy-ef__progress-bar {
	height: 6px;
	background: var(--poy-line);
	border-radius: 999px;
	overflow: hidden;
}
.poy-ef__progress-bar span {
	display: block;
	height: 100%;
	width: 20%;
	background: linear-gradient(90deg, var(--poy-accent), var(--poy-accent-dark));
	border-radius: 999px;
	transition: width .35s ease;
}

.poy-ef__steps {
	list-style: none;
	display: flex;
	justify-content: space-between;
	margin: .85rem 0 0;
	padding: 0;
}
.poy-ef__steps li {
	font-size: .74rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--poy-muted);
	font-weight: 600;
	position: relative;
	flex: 1;
	text-align: center;
}
.poy-ef__steps li::before {
	content: "";
	display: block;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--poy-line);
	margin: 0 auto .4rem;
	transition: background .3s ease, transform .3s ease;
}
.poy-ef__steps li.is-active { color: var(--poy-accent); }
.poy-ef__steps li.is-active::before { background: var(--poy-accent); transform: scale(1.25); }
.poy-ef__steps li.is-done::before { background: var(--poy-accent-dark); }
.poy-ef__steps li span { display: block; }

@media (max-width: 560px) {
	.poy-ef__steps li span { display: none; }
}

/* ---------- Panels ---------------------------------------- */
.poy-ef__panel { display: none; animation: poyFade .35s ease; }
.poy-ef__panel.is-active { display: block; }

@keyframes poyFade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.poy-ef__eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .72rem;
	font-weight: 700;
	color: var(--poy-accent);
	margin: 0 0 .3rem;
}
.poy-ef__title {
	font-size: clamp(1.4rem, 3.5vw, 2rem);
	line-height: 1.15;
	margin: 0 0 .6rem;
	font-weight: 800;
}
.poy-ef__lead { color: var(--poy-muted); margin-top: 0; }

/* ---------- Cards ----------------------------------------- */
.poy-ef__card {
	background: var(--poy-bg-soft);
	border: 1px solid var(--poy-line);
	border-radius: var(--poy-radius);
	padding: 1.4rem 1.5rem;
	margin: 1.4rem 0;
}
.poy-ef__card--muted { background: #fff; }
.poy-ef__card h3 { margin-top: 0; }
.poy-ef__card h4 { margin: 1.1rem 0 .35rem; font-size: 1rem; }
.poy-ef__card p { margin: .55rem 0; }

.poy-ef__fees {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .75rem;
	margin: 1.2rem 0 .4rem;
}
.poy-ef__fees div {
	background: #fff;
	border: 1px solid var(--poy-line);
	border-radius: 10px;
	padding: .8rem 1rem;
}
.poy-ef__fees span { display: block; font-size: .78rem; color: var(--poy-muted); text-transform: uppercase; letter-spacing: .05em; }
.poy-ef__fees strong { font-size: 1.15rem; }
.poy-ef__fees em, .poy-ef__cost-row em, .poy-ef__note em { font-style: normal; color: var(--poy-muted); font-size: .8em; font-weight: 500; }

.poy-ef__note {
	background: #fff7e6;
	border: 1px solid #f2d98a;
	border-radius: 10px;
	padding: .9rem 1.1rem;
	font-size: .92rem;
}

.poy-ef__prompt { font-weight: 700; margin: 1.6rem 0 .8rem; }
.poy-ef__req { color: var(--poy-accent); }

.poy-ef__contact a { color: var(--poy-accent); text-decoration: none; font-weight: 600; }
.poy-ef__contact a:hover { text-decoration: underline; }

/* ---------- Requirement / key lists ----------------------- */
.poy-ef__req-list, .poy-ef__key-list { padding-left: 0; list-style: none; margin: 1.2rem 0; }
.poy-ef__req-list li { padding: 1rem 1.2rem; border: 1px solid var(--poy-line); border-radius: 12px; margin-bottom: .8rem; }
.poy-ef__req-list h4 { margin: 0 0 .35rem; color: var(--poy-accent-dark); }
.poy-ef__req-list p { margin: 0; color: var(--poy-muted); }
.poy-ef__key-list { counter-reset: k; }
.poy-ef__key-list li { position: relative; padding: .3rem 0 .3rem 2rem; margin-bottom: .6rem; }
.poy-ef__key-list li::before {
	counter-increment: k;
	content: counter(k);
	position: absolute; left: 0; top: .15rem;
	width: 1.4rem; height: 1.4rem;
	background: var(--poy-accent); color: #fff;
	border-radius: 50%; font-size: .8rem; font-weight: 700;
	display: grid; place-items: center;
}

/* ---------- Cost table ------------------------------------ */
.poy-ef__cost-table { border: 1px solid var(--poy-line); border-radius: var(--poy-radius); overflow: hidden; margin: 1.2rem 0; }
.poy-ef__cost-row { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--poy-line); align-items: baseline; }
.poy-ef__cost-row:last-child { border-bottom: 0; }
.poy-ef__cost-row span { max-width: 62%; }
.poy-ef__cost-row strong { white-space: nowrap; font-size: 1.05rem; }
.poy-ef__cost-row--total { background: var(--poy-bg-soft); }

/* ---------- Fields ---------------------------------------- */
.poy-ef__group {
	border: 1px solid var(--poy-line);
	border-radius: var(--poy-radius);
	padding: 1.3rem 1.4rem 1.5rem;
	margin: 1.2rem 0;
}
.poy-ef__group legend {
	font-weight: 800;
	font-size: 1.05rem;
	padding: 0 .5rem;
	color: var(--poy-ink);
}
.poy-ef__field { margin: .9rem 0; }
.poy-ef__field > label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .92rem; }
.poy-ef__field em, .poy-ef__group legend em { font-style: normal; color: var(--poy-muted); font-weight: 500; }

.poy-ef input[type=text],
.poy-ef input[type=email],
.poy-ef input[type=tel],
.poy-ef input[type=date],
.poy-ef select,
.poy-ef textarea {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--poy-line);
	border-radius: 10px;
	font: inherit;
	color: var(--poy-ink);
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
}
.poy-ef input:focus,
.poy-ef select:focus,
.poy-ef textarea:focus {
	outline: none;
	border-color: var(--poy-accent);
	box-shadow: 0 0 0 4px var(--poy-focus);
}
.poy-ef textarea { resize: vertical; }

.poy-ef__grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.poy-ef__grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; }
@media (max-width: 560px) {
	.poy-ef__grid-2, .poy-ef__grid-3, .poy-ef__fees { grid-template-columns: 1fr; }
}

.poy-ef__radios { display: flex; flex-wrap: wrap; gap: .8rem; }
.poy-ef__radios label {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .6rem .9rem; border: 1px solid var(--poy-line);
	border-radius: 10px; cursor: pointer; font-weight: 500;
	transition: border-color .2s, background .2s;
}
.poy-ef__radios label:has(input:checked) { border-color: var(--poy-accent); background: #fff5f5; }

.poy-ef__wordcount { display: block; color: var(--poy-muted); font-size: .78rem; margin-top: .3rem; }
.poy-ef__wordcount.is-good { color: #1a8a3d; }

/* ---------- Checkboxes / toggles -------------------------- */
.poy-ef__check {
	display: flex; gap: .7rem; align-items: flex-start;
	padding: .95rem 1.1rem;
	border: 1px solid var(--poy-line);
	border-radius: 12px;
	margin: .7rem 0;
	cursor: pointer;
	transition: border-color .2s, background .2s;
}
.poy-ef__check:has(input:checked) { border-color: var(--poy-accent); background: #fff5f5; }
.poy-ef__check input, .poy-ef__toggle input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--poy-accent); flex: 0 0 auto; }
.poy-ef__check span em { font-style: normal; color: var(--poy-accent); font-weight: 600; }

.poy-ef__toggle {
	display: flex; gap: .7rem; align-items: center;
	padding: 1rem 1.2rem;
	border: 1px dashed var(--poy-accent);
	border-radius: 12px;
	margin: 1.4rem 0;
	cursor: pointer;
	font-weight: 700;
	background: #fff8f8;
}

/* ---------- Buttons / nav --------------------------------- */
.poy-ef__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.8rem; }
.poy-ef__btn {
	appearance: none;
	border: 0;
	background: var(--poy-accent);
	color: #fff;
	font: inherit;
	font-weight: 700;
	padding: .8rem 1.6rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s, transform .1s;
	text-decoration: none;
	display: inline-block;
}
.poy-ef__btn:hover { background: var(--poy-accent-dark); }
.poy-ef__btn:active { transform: translateY(1px); }
.poy-ef__btn--ghost { background: transparent; color: var(--poy-muted); border: 1px solid var(--poy-line); }
.poy-ef__btn--ghost:hover { background: var(--poy-bg-soft); color: var(--poy-ink); }
.poy-ef__btn--outline { background: #fff; color: var(--poy-accent); border: 2px solid var(--poy-accent); margin: .4rem 0 1.2rem; }
.poy-ef__btn--outline:hover { background: var(--poy-accent); color: #fff; }
.poy-ef__btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ---------- Validation ------------------------------------ */
.poy-ef .poy-invalid { border-color: var(--poy-accent) !important; box-shadow: 0 0 0 4px var(--poy-focus); }
.poy-ef__check.poy-invalid, .poy-ef__radios.poy-invalid { border-color: var(--poy-accent); }
.poy-ef__errors {
	background: #fdecec; border: 1px solid #f5b5b5; color: #a5171d;
	border-radius: 12px; padding: 1rem 1.2rem; margin-top: 1.2rem; font-size: .92rem;
}
.poy-ef__errors ul { margin: .5rem 0 0; padding-left: 1.2rem; }

/* Per-step validation notice (steps that block Next). */
.poy-ef__panel-error {
	background: #fdecec;
	border: 1px solid #f5b5b5;
	color: #a5171d;
	border-radius: 12px;
	padding: .8rem 1.1rem;
	margin: 1.2rem 0 0;
	font-weight: 600;
	font-size: .92rem;
}
.poy-ef__check.poy-invalid,
.poy-ef__toggle.poy-invalid,
.poy-ef__field.poy-invalid,
.poy-ef__radios.poy-invalid {
	border-color: var(--poy-accent);
	background: #fdecec;
}

/* ---------- Success --------------------------------------- */
.poy-ef__success { text-align: center; padding: 2rem 0; }
.poy-ef__tick {
	width: 72px; height: 72px; margin: 0 auto 1.2rem;
	background: #1a8a3d; color: #fff; border-radius: 50%;
	display: grid; place-items: center; font-size: 2.2rem;
	animation: poyPop .4s ease;
}
@keyframes poyPop { from { transform: scale(0); } to { transform: scale(1); } }
.poy-ef__success-msg { max-width: 540px; margin: 0 auto; color: var(--poy-muted); font-size: 1.05rem; }

/* ============================================================
   Mobile optimisation
   ============================================================ */
@media (max-width: 640px) {
	.poy-ef { max-width: 100%; }
	.poy-ef__title { font-size: 1.4rem; }
	.poy-ef__card,
	.poy-ef__group { padding: 1rem 1.05rem; }
	.poy-ef__group legend { font-size: 1rem; }

	/* Prevent iOS auto-zoom on focus (needs >= 16px). */
	.poy-ef input[type=text],
	.poy-ef input[type=email],
	.poy-ef input[type=tel],
	.poy-ef input[type=date],
	.poy-ef select,
	.poy-ef textarea { font-size: 16px; }

	/* Fee & cost blocks stack cleanly. */
	.poy-ef__cost-row { flex-direction: column; gap: .25rem; align-items: flex-start; }
	.poy-ef__cost-row span { max-width: 100%; }
	.poy-ef__cost-row strong { white-space: normal; }

	/* Radio options become full-width tap targets. */
	.poy-ef__radios { flex-direction: column; }
	.poy-ef__radios label { width: 100%; }

	/* Navigation: keep Back/Next on one row but let them share width. */
	.poy-ef__nav { gap: .6rem; }
	.poy-ef__nav .poy-ef__btn { flex: 1 1 auto; text-align: center; padding: .85rem 1rem; }
	.poy-ef__btn--outline { width: 100%; text-align: center; }

	.poy-ef__check,
	.poy-ef__toggle { padding: .9rem 1rem; }
}

/* Very narrow phones. */
@media (max-width: 380px) {
	.poy-ef__steps li::before { width: 9px; height: 9px; }
	.poy-ef__title { font-size: 1.25rem; }
}

/* Comfortable tap targets on any touch device. */
@media (hover: none) and (pointer: coarse) {
	.poy-ef__check input,
	.poy-ef__toggle input { width: 22px; height: 22px; }
	.poy-ef__btn { min-height: 48px; }
}