/**
 * DDR Chances Form styles.
 *
 * Deliberately restrained so the active theme's typography wins. Only the
 * things that need to be unambiguous are styled strongly: the required
 * marker, the missing-field state, and the model-number warning.
 */

/* Full width of whatever the page template provides.

   Everything below is defensive: this form drops into a theme that has its
   own opinions about alignment, indentation and list margins, and the
   instruction blocks are raw HTML carried over from Jotform. Resetting
   alignment and margins here stops the theme from indenting them. */
.ddr-chances-wrap {
	width: 100%;
	max-width: none;
	margin: 0;
	text-align: left;
}

.ddr-chances-wrap *,
.ddr-chances-wrap *::before,
.ddr-chances-wrap *::after {
	box-sizing: border-box;
}

/*
 * hidden means hidden. No exceptions, hence the !important.
 *
 * The browser's own [hidden] rule is display:none at the weakest possible
 * specificity, so ANY class rule that sets display beats it. This has now
 * caused three separate bugs: Next and Skip staying on answered questions,
 * Submit nearly the same, and impossible answers such as "Camera" for an
 * SSD sitting on screen unclickable because .ddr-option sets display:flex.
 *
 * One rule at the top ends the whole category. Anything below that wants an
 * element visible must not mark it hidden.
 *
 * ORIGIN 2026-08-21, Brian: "when SSD, 'camera' and 'phone' aren't clickable
 * options, but they are still present. they shouldn't be present."
 */
.ddr-chances-wrap [hidden] {
	display: none !important;
}

.ddr-chances-form {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* No decorative left rule. It was only ever visible on fields flagged as
   missing, which read as "some questions are marked and some are not". The
   missing state now uses a background tint instead, applied consistently. */
.ddr-field {
	margin: 0 0 1.6em;
	padding: 0;
	border-left: 0;
}

/* Progress. */
.ddr-progress-text {
	font-size: 0.85em;
	color: #6b7280;
	margin: 0 0 0.35em;
}

.ddr-progress {
	height: 4px;
	background: #e5e7eb;
	border-radius: 2px;
	overflow: hidden;
	margin: 0 0 1.8em;
	max-width: 52em;
}

.ddr-progress-fill {
	height: 100%;
	width: 0;
	/* House red, matching Submit. ORIGIN 2026-08-21, Brian. */
	background: #ee2400;
	transition: width 0.25s ease;
}

.ddr-field[hidden] {
	display: none;
}

/* Reveal animation for progressive disclosure. Fires once per transition
   into view. Kept short: this runs on every answer, so anything slower
   than about a quarter second starts to feel like waiting. */
@keyframes ddr-reveal-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ddr-field.ddr-reveal {
	animation: ddr-reveal-in 0.26s ease-out both;
}

/* Respect the OS "reduce motion" setting. Some people get motion sickness
   from sliding content, and this form slides on every single answer. */
@media (prefers-reduced-motion: reduce) {
	.ddr-field.ddr-reveal {
		animation: none;
	}
}

.ddr-submit[hidden],
.ddr-skip[hidden],
.ddr-next[hidden],
.ddr-turnstile[hidden] {
	display: none;
}

/* Advance button for typed answers. */
.ddr-next {
	display: inline-block;
	margin-top: 0.75em;
	padding: 0.5em 1.6em;
	font-size: 1em;
	font-weight: 600;
	border: 0;
	border-radius: 4px;
	background: #2b3648;
	color: #fff;
	cursor: pointer;
}

.ddr-next:hover {
	background: #1b2433;
}

/* Turnstile sits with the Submit button, not wherever the customer
   happens to be in the form. */
.ddr-turnstile {
	margin: 1.2em 0 0.4em;
}

/* Skip for optional questions. A button like Next, but secondary, so it
   looks the same whether or not the question also has a Next. */
.ddr-skip {
	display: inline-block;
	margin-top: 0;
	padding: 0.5em 1.4em;
	font-size: 1em;
	font-weight: 600;
	border: 1px solid #c8ced8;
	border-radius: 4px;
	background: #fff;
	color: #4b5563;
	text-decoration: none;
	cursor: pointer;
}

.ddr-skip:hover {
	background: #f3f4f6;
	color: #111827;
}

.ddr-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.45em;
	line-height: 1.4;
}

.ddr-req {
	/* The house red, not the near-miss #ea3223 it used to be. */
	color: #ee2400;
	font-weight: 700;
}

/* Helper text under a question. */
.ddr-hint {
	margin: -0.15em 0 0.6em;
	color: #5b6472;
	font-size: 0.92em;
	line-height: 1.45;
	max-width: 46em;
}

/* Instruction blocks. The markup inside comes from Jotform and contains
   headings, paragraphs and lists, all of which the theme wants to style its
   own way. Pinned to the left edge and normalised here. */
.ddr-note {
	background: #f5f7fa;
	border-left: 4px solid #ee2400;
	border-radius: 0 4px 4px 0;
	padding: 0.9em 1.1em;
	font-size: 0.95em;
	margin: 0 0 0.4em;
	width: 100%;
	max-width: 52em;
	text-align: left;
}

.ddr-note > *:first-child {
	margin-top: 0;
}

.ddr-note > *:last-child {
	margin-bottom: 0;
}

.ddr-note h1,
.ddr-note h2,
.ddr-note h3 {
	margin-top: 0;
	font-size: 1.05em;
	text-align: left;
}

.ddr-note p {
	margin: 0 0 0.6em;
	text-align: left;
}

.ddr-note ul,
.ddr-note ol {
	margin: 0.4em 0 0.6em;
	padding-left: 1.4em;
	text-align: left;
}

.ddr-note li {
	margin: 0 0 0.35em;
}

.ddr-chances-form input[type="text"],
.ddr-chances-form input[type="email"],
.ddr-chances-form select,
.ddr-chances-form textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.55em 0.7em;
	border: 1px solid #c8ced8;
	border-radius: 4px;
	font-size: 1em;
	box-sizing: border-box;
}

/*
 * Placeholders.
 *
 * The default is close enough to the real text colour on this theme that a
 * placeholder reads as an answer already given. Lighter, so an empty box
 * plainly looks empty.
 *
 * ORIGIN 2026-08-21, Brian: "make the prefilled hint text lighter color."
 */
.ddr-chances-form input::placeholder,
.ddr-chances-form textarea::placeholder,
.ddr-feedback input::placeholder,
.ddr-feedback textarea::placeholder {
	color: #9aa3b0;
	opacity: 1; /* Firefox dims placeholders further on top of the colour. */
}

.ddr-chances-form input.ddr-half {
	width: calc(50% - 0.35em);
	display: inline-block;
	margin-right: 0.5em;
}

.ddr-chances-form input.ddr-half:last-of-type {
	margin-right: 0;
}

.ddr-options {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
}

.ddr-option {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	line-height: 1.4;
}

.ddr-option input {
	margin-top: 0.25em;
	flex: 0 0 auto;
}

.ddr-option label {
	font-weight: 400;
	cursor: pointer;
}

/* Missing required field. */
.ddr-field.ddr-missing {
	background: #fdecea;
	border-radius: 4px;
	padding: 0.6em 0.8em;
	margin-left: -0.8em;
	margin-right: -0.8em;
}

.ddr-field.ddr-missing .ddr-label {
	color: #c0261a;
}

/* Next and Skip on one row, with room between them. */
.ddr-chances-wrap .ddr-actions {
	display: flex;
	align-items: stretch;
	gap: 1.1em;
	margin-top: 0.75em;
	flex-wrap: wrap;
}

/*
 * Both buttons get an identical box, spelled out rather than inherited.
 *
 * Three things threw them out of line: .ddr-next carried its own margin-top,
 * which a flex row does not absorb; it had no border while Skip had a 1px
 * one, so Skip stood 2px taller; and the theme's own button rules were
 * reaching one and not the other, which is why they had visibly different
 * corner radii. Setting geometry explicitly, at a specificity the theme does
 * not beat, is the only version of this that stays fixed.
 *
 * ORIGIN 2026-08-21, Brian: "'skip' button not aligned with next button",
 * then "The Continue and Start Over buttons are not aligned" and "The Next
 * and Skip buttons are also still not aligned."
 */
.ddr-chances-wrap .ddr-actions > button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	min-height: 2.9em;
	padding: 0 1.5em;
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	border-width: 1px;
	border-style: solid;
	border-radius: 6px;
	cursor: pointer;
}

/*
 * MUST outrank the rule above, or hidden buttons keep rendering.
 *
 * The generic .ddr-next[hidden] rule higher up scores the same as a single
 * class plus an attribute, and the block above beats it, so Next and Skip
 * stayed on screen on every question the customer had already answered.
 *
 * ORIGIN 2026-08-21, Brian: "shouldn't the 'next' button disappear on older
 * questions? same with 'Skip this question'".
 */
.ddr-chances-wrap .ddr-actions > button[hidden] {
	display: none;
}

.ddr-chances-wrap .ddr-actions > .ddr-next {
	background: #2b3648;
	border-color: #2b3648;
	color: #fff;
}

.ddr-chances-wrap .ddr-actions > .ddr-skip {
	background: #fff;
	border-color: #c8ced8;
	color: #4b5563;
}

.ddr-chances-wrap .ddr-actions > .ddr-next:hover {
	background: #1b2433;
	border-color: #1b2433;
}

.ddr-chances-wrap .ddr-actions > .ddr-skip:hover {
	background: #f3f4f6;
	color: #111827;
}

/* Model number looks like an enclosure. Advisory, so amber not red. */
.ddr-model-warning {
	margin-top: 0.7em;
	padding: 0.85em 1em;
	background: #fff6e0;
	border: 1px solid #f0c96b;
	border-radius: 4px;
	font-size: 0.95em;
	/* The theme sets a roomy line-height for body copy, which reads as
	   double-spaced inside a small box like this one. */
	line-height: 1.5;
}

.ddr-model-warning p {
	margin: 0 0 0.6em;
	line-height: 1.5;
}

.ddr-model-warning p:last-child {
	margin-bottom: 0;
}

/* The "where to find it" instructions, folded into the warning box. */
.ddr-model-steps {
	margin-top: 0.9em;
	padding-top: 0.9em;
	border-top: 1px solid #f0c96b;
}

.ddr-model-steps > *:first-child {
	margin-top: 0;
}

.ddr-model-steps > *:last-child {
	margin-bottom: 0;
}

.ddr-model-steps p {
	margin: 0 0 0.6em;
	line-height: 1.5;
}

.ddr-model-steps ul,
.ddr-model-steps ol {
	margin: 0.4em 0 0.6em;
	padding-left: 1.4em;
}

.ddr-model-steps li {
	margin: 0 0 0.35em;
}

/*
 * The photo request, where the model number is not something to fix: the
 * flash media that never had a usable one, and the deleted-files path where
 * it does not affect the assessment.
 *
 * Styled as an instruction block rather than a warning. It used to be blue,
 * which was the only blue on the form and read as a fourth kind of message.
 */
.ddr-model-ask {
	margin-top: 0.7em;
	padding: 0.85em 1.1em;
	background: #f5f7fa;
	border-left: 4px solid #ee2400;
	border-radius: 0 4px 4px 0;
	font-size: 0.95em;
	line-height: 1.5;
	max-width: 52em;
}

.ddr-override {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: 400;
	cursor: pointer;
}

.ddr-override input {
	margin-top: 0.25em;
}

.ddr-status {
	margin: 1em 0;
	min-height: 1.2em;
}

.ddr-status.ddr-error {
	color: #c0261a;
	font-weight: 600;
}

/*
 * The house red, the same #ee2400 the customer emails use. The orange it
 * replaces is the accent colour used for progress and instruction blocks,
 * so the one button that matters was wearing the same colour as the
 * decoration around it.
 *
 * ORIGIN 2026-08-21, Brian: "the submit button is orange. make it our red
 * color."
 */
.ddr-chances-wrap .ddr-submit {
	display: inline-block;
	padding: 0.75em 2.2em;
	font-size: 1.05em;
	font-weight: 600;
	border: 0;
	border-radius: 4px;
	background: #ee2400;
	color: #fff;
	cursor: pointer;
}

/* Must come after the rule above, which would otherwise un-hide it: the two
   selectors score the same, so source order decides. Same trap that left
   Next and Skip on screen in 0.12.0. */
.ddr-chances-wrap .ddr-submit[hidden] {
	display: none;
}

.ddr-chances-wrap .ddr-submit:hover:not(:disabled) {
	background: #c81e00;
}

.ddr-submit:disabled {
	opacity: 0.55;
	cursor: default;
}

.ddr-done {
	padding: 1.5em;
	background: #f2f9f2;
	border: 1px solid #bcdcbc;
	border-radius: 4px;
}

.ddr-done h3 {
	margin-top: 0;
}

.ddr-noscript {
	padding: 1.2em;
	background: #fff6e0;
	border: 1px solid #f0c96b;
	border-radius: 4px;
}

@media (max-width: 600px) {
	.ddr-chances-form input.ddr-half {
		width: 100%;
		margin-right: 0;
		margin-bottom: 0.5em;
	}
}

/* The confirmation that follows the model-number instructions. Same amber
   family as the warning it belongs to, but quieter. */
/*
 * The next question used to sit flush against the bottom of this box, which
 * read as though the capacity question were part of the confirmation.
 *
 * ORIGIN 2026-08-21, Brian: "Fix the lack of a line break when 'This is the
 * correct model number' is checked."
 */
.ddr-override-box {
	margin-top: 0.5em;
	margin-bottom: 1.6em;
}

.ddr-override-box[hidden] {
	display: none;
}

/*
 * Offer to resume a saved draft. Sits above the first question.
 *
 * A light wash of the house red rather than blue, which belonged to no
 * other part of the form.
 *
 * ORIGIN 2026-08-21, Brian: "can you change this from blue to our red (but
 * lighter) too?"
 */
.ddr-resume {
	margin: 0 0 1.6em;
	padding: 1em 1.2em;
	background: #fdf1ef;
	border: 1px solid #f3c4bb;
	border-radius: 4px;
	max-width: 52em;
}

.ddr-resume p {
	margin: 0 0 0.2em;
}

/* ---------------------------------------------------------------
   Thank-you page feedback box.

   Quiet on purpose. It sits at the top of a page whose job is to
   reassure, so it must not look like something went wrong.
   --------------------------------------------------------------- */
.ddr-feedback {
	margin: 0 0 1.8em;
}

.ddr-feedback-inner {
	padding: 1em 1.2em;
	background: #f5f7fa;
	border-left: 4px solid #ee2400;
	border-radius: 0 4px 4px 0;
	max-width: 52em;
}

.ddr-feedback-q {
	margin: 0 0 0.7em;
	font-size: 0.98em;
	line-height: 1.5;
}

.ddr-feedback textarea,
.ddr-feedback input[type="email"] {
	width: 100%;
	max-width: 100%;
	padding: 0.55em 0.7em;
	border: 1px solid #c8ced8;
	border-radius: 4px;
	font-size: 1em;
	font-family: inherit;
	box-sizing: border-box;
	background: #fff;
}

.ddr-feedback-email-label {
	display: block;
	margin: 0.7em 0 0.25em;
	font-size: 0.88em;
	color: #5b6472;
}

.ddr-feedback .ddr-status:empty {
	display: none;
}

/*
 * Our own visually-hidden rule. .screen-reader-text is a WordPress admin
 * class and not every front-end theme defines it, so relying on the theme
 * would show the label as plain text on some sites.
 */
.ddr-feedback .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}