/* ReturPower — public withdrawal function. Inherits the theme's fonts and colours. */

.rp-wd { max-width: 640px; margin: 0 auto; }
/* Under an order in "My account" the guarantee block lines up with the withdrawal
   block and the order details, full width, instead of a narrower centred column. */
.pf-return-block.rp-wd { max-width: none; margin: 26px 0; }
.rp-wd-intro, .rp-wd-alt, .rp-wd-help { opacity: .85; }
.rp-wd-help { display: block; font-size: .875em; margin-top: .25em; }

.rp-wd-field { margin: 0 0 1.1em; }
.rp-wd-field label { display: block; font-weight: 600; margin-bottom: .3em; }
.rp-wd-field input:not([type="radio"]):not([type="checkbox"]),
.rp-wd-field textarea,
.rp-wd-field select { width: 100%; box-sizing: border-box; }
/* Themes add a bottom margin to inputs; the help text belongs right under its field. */
.rp-wd-field input,
.rp-wd-field textarea,
.rp-wd-field select { margin-bottom: 0; }

/* Radio choices: the button beside its text, never stretched or centred by the theme. */
.rp-wd-field .rp-wd-option { display: flex; align-items: flex-start; gap: .7em; margin: .8em 0; font-weight: 400; cursor: pointer; }
.rp-wd-field .rp-wd-option input { flex: 0 0 auto; width: auto; height: auto; margin: .3em 0 0; }
.rp-wd-option-text { display: block; }
.rp-wd-option-text strong { display: block; }
.rp-wd-option-text .rp-wd-help { font-weight: 400; margin-top: .15em; }
/* Same look as the other field labels, whatever the theme does to <legend>. */
fieldset.rp-wd-field { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.rp-wd-field legend {
	display: block; width: auto; padding: 0; margin: 0 0 .2em; border: 0;
	font-weight: 600; font-size: 1em; text-transform: none; letter-spacing: normal;
}

.rp-wd-error { display: block; color: #b32d2e; font-size: .875em; margin-top: .25em; }
.rp-wd-field input[aria-invalid="true"] { border-color: #b32d2e; }

.rp-wd-alert,
.rp-wd-success { padding: .8em 1em; border-radius: 6px; margin: 0 0 1.2em; border: 1px solid; }
.rp-wd-alert { border-color: #e0b4b4; background: #fff6f6; color: #7a1c1c; }
.rp-wd-success { border-color: #b7dfc2; background: #f3fbf5; color: #1e4d2b; }

.rp-wd-declaration { border: 1px solid rgba(0,0,0,.15); border-radius: 8px; padding: 1em 1.2em; margin: 0 0 1.2em; }
.rp-wd-statement { font-weight: 600; margin-top: 0; }
.rp-wd-summary { display: grid; grid-template-columns: minmax(0, 15em) 1fr; gap: .5em 1em; margin: 0; }
/* Themes may uppercase definition lists; the declaration shows exactly what was typed. */
.rp-wd-summary dt,
.rp-wd-summary dd { text-transform: none; letter-spacing: normal; font-size: 1em; line-height: 1.5; }
.rp-wd-summary dt { font-weight: 600; margin: 0; }
.rp-wd-summary dd { margin: 0; overflow-wrap: anywhere; }
.rp-wd-pre { white-space: pre-line; }

.rp-wd-title { margin-top: 0; }
/* Only the bottom margin: .rp-wd-receipt also carries .rp-wd, which centres it. */
.rp-wd-form { margin-bottom: 1.2em; }
.rp-wd-receipt { margin-bottom: 1.2em; }
.rp-wd-mail-status { font-weight: 600; }
.rp-wd-actions { display: flex; flex-wrap: wrap; gap: .6em; }
/* Own button look, so the action is visible on any theme (some leave a bare <button> unstyled). */
.rp-wd-button {
	display: inline-block; cursor: pointer; margin: 0;
	padding: .75em 1.6em; border: 1px solid #1d2327; border-radius: 4px;
	background: #1d2327; color: #fff; font-weight: 700; font-size: .95em; line-height: 1.2;
	text-transform: uppercase; letter-spacing: .02em;
}
.rp-wd-button:hover,
.rp-wd-button:focus { background: #000; border-color: #000; color: #fff; }
.rp-wd-button.rp-wd-secondary { background: transparent; color: #1d2327; }
.rp-wd-button.rp-wd-secondary:hover,
.rp-wd-button.rp-wd-secondary:focus { background: #f3f4f6; color: #000; }

/* Honeypot: off-screen, not display:none, so simple bots still see and fill it. */
.rp-wd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }


@media (max-width: 480px) {
	.rp-wd-summary { grid-template-columns: 1fr; }
	.rp-wd-summary dd { margin-bottom: .5em; }
}

@media print {
	.rp-wd-noprint, .rp-wd-alt { display: none !important; }
	.rp-wd-declaration { border-color: #000; }
}