/**
 * Frontend styles for the server-rendered withdrawal flow.
 *
 * Scoped under the block's BEM namespace so nothing leaks into the host
 * theme. Loads no external resource (no @import, no remote images) and
 * degrades gracefully: the markup is fully usable unstyled. Respects
 * reduced-motion and colour-scheme preferences, and keeps text/control
 * contrast and focus visibility within WCAG 2.2 AA.
 */

.wp-block-recesso-digitale-flow {
	--recesso-dig-border: #d5d8dc;
	--recesso-dig-muted: #50575e;
	--recesso-dig-focus: #2271b1;
	--recesso-dig-accent: #c8102e;
	--recesso-dig-accent-hover: #a50d26;
}

/* Give the flow's submit/confirm controls a clear, self-contained button
   look: the flow lives on a plain page where the theme/WooCommerce `.button`
   styles are not guaranteed to load, else the control renders as bare text. */
.wp-block-recesso-digitale-flow__submit,
.wp-block-recesso-digitale-flow__confirm {
	background-color: var(--recesso-dig-accent);
	border: 0;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	padding: 0.75em 1.5em;
	text-decoration: none;
	transition: background-color 0.15s ease-in-out;
}

.wp-block-recesso-digitale-flow__submit:hover,
.wp-block-recesso-digitale-flow__confirm:hover,
.wp-block-recesso-digitale-flow__submit:focus,
.wp-block-recesso-digitale-flow__confirm:focus {
	background-color: var(--recesso-dig-accent-hover);
	color: #fff;
}

.wp-block-recesso-digitale-flow__submit:focus-visible,
.wp-block-recesso-digitale-flow__confirm:focus-visible {
	outline: 2px solid var(--recesso-dig-focus);
	outline-offset: 2px;
}

.wp-block-recesso-digitale-flow__title {
	margin-bottom: 0.5em;
}

.wp-block-recesso-digitale-flow__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 1rem;
}

.wp-block-recesso-digitale-flow__field input {
	max-width: 24rem;
}

.wp-block-recesso-digitale-flow__hint {
	color: var(--recesso-dig-muted);
	font-size: 0.875em;
}

.wp-block-recesso-digitale-flow__items {
	border: 1px solid var(--recesso-dig-border);
	border-radius: 6px;
	margin: 1.25rem 0;
	padding: 0.75rem 1rem;
}

.wp-block-recesso-digitale-flow__items legend {
	font-weight: 600;
	padding: 0 0.4rem;
}

.wp-block-recesso-digitale-flow__item-list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.wp-block-recesso-digitale-flow__item {
	align-items: center;
	border-top: 1px solid var(--recesso-dig-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 0.75rem 0;
}

.wp-block-recesso-digitale-flow__item:first-child {
	border-top: 0;
}

.wp-block-recesso-digitale-flow__item-check {
	flex: 0 0 auto;
	height: 1.25rem;
	margin: 0;
	width: 1.25rem;
}

.wp-block-recesso-digitale-flow__item-label {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex: 1 1 12rem;
	gap: 0.75rem;
	margin: 0;
}

.wp-block-recesso-digitale-flow__item-thumb {
	flex: 0 0 auto;
}

.wp-block-recesso-digitale-flow__thumb-img {
	border: 1px solid var(--recesso-dig-border);
	border-radius: 4px;
	display: block;
	height: 56px;
	object-fit: cover;
	width: 56px;
}

.wp-block-recesso-digitale-flow__item-name {
	font-weight: 500;
}

.wp-block-recesso-digitale-flow__item-qty {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 0.2rem;
}

.wp-block-recesso-digitale-flow__qty-label {
	color: var(--recesso-dig-muted);
	font-size: 0.8125em;
}

.wp-block-recesso-digitale-flow__qty-input {
	max-width: 6rem;
}

/* JS enhancement only; without JS the quantity input stays visible. */
.wp-block-recesso-digitale-flow__item-qty[hidden] {
	display: none;
}

.wp-block-recesso-digitale-flow__item--selected .wp-block-recesso-digitale-flow__item-name {
	font-weight: 600;
}

.wp-block-recesso-digitale-flow__summary,
.wp-block-recesso-digitale-flow__summary-items {
	list-style: none;
	margin: 0.5rem 0 1rem;
	padding: 0;
}

.wp-block-recesso-digitale-flow__summary li {
	margin-bottom: 0.35rem;
}

.wp-block-recesso-digitale-flow__summary-label {
	font-weight: 600;
}

.wp-block-recesso-digitale-flow__summary-item {
	align-items: center;
	display: flex;
	gap: 0.6rem;
	margin-bottom: 0.4rem;
}

.wp-block-recesso-digitale-flow__error {
	border-left: 4px solid #b32d2e;
	margin-bottom: 1rem;
	padding: 0.6rem 0.9rem;
}

.wp-block-recesso-digitale-flow__actions {
	margin-top: 1.25rem;
}

.wp-block-recesso-digitale-flow__notice {
	border-left: 4px solid var(--recesso-dig-border);
	margin-bottom: 1rem;
	padding: 0.6rem 0.9rem;
}

.wp-block-recesso-digitale-flow__notice.wp-block-recesso-digitale-flow--success {
	border-left-color: #1a7f37;
}

.wp-block-recesso-digitale-flow__notice.wp-block-recesso-digitale-flow--error {
	border-left-color: #b32d2e;
}

.wp-block-recesso-digitale-flow__item-check:focus-visible,
.wp-block-recesso-digitale-flow__qty-input:focus-visible {
	outline: 2px solid var(--recesso-dig-focus);
	outline-offset: 1px;
}

.wp-block-recesso-digitale-flow__hp {
	left: -9999px;
	position: absolute;
}

.wp-block-recesso-digitale-model-form {
	border: 1px solid var(--recesso-dig-border);
	border-radius: 6px;
	margin-top: 1.5rem;
	padding: 0.75rem 1rem;
}

.wp-block-recesso-digitale-model-form__summary {
	cursor: pointer;
	font-weight: 600;
}

.wp-block-recesso-digitale-model-form__intro {
	font-style: italic;
}

.wp-block-recesso-digitale-model-form__trader {
	border: 1px solid var(--recesso-dig-border);
	border-radius: 4px;
	margin: 1rem 0;
	padding: 0.5rem 0.9rem;
}

.wp-block-recesso-digitale-model-form__trader-label {
	font-weight: 600;
	margin: 0 0 0.25rem;
}

.wp-block-recesso-digitale-model-form__trader-details {
	margin: 0;
}

.wp-block-recesso-digitale-model-form__fields {
	margin: 0.5rem 0 0;
}

.wp-block-recesso-digitale-model-form__fields dd {
	margin: 0;
	padding-top: 0.6rem;
}

.wp-block-recesso-digitale-model-form__rule {
	border-bottom: 1px solid var(--recesso-dig-border);
	height: 1.25rem;
	margin-bottom: 0.4rem;
}

.wp-block-recesso-digitale-model-form__source {
	color: var(--recesso-dig-muted);
	font-size: 0.8125em;
	margin-top: 1rem;
}

/* The print control depends on the browser print API, so it is hidden until
   the view script reveals it. Without JavaScript the form remains visible and
   printable from the browser menu. */
.wp-block-recesso-digitale-model-form__print {
	display: none;
}

.wp-block-recesso-digitale-model-form.is-enhanced .wp-block-recesso-digitale-model-form__print {
	display: block;
}

@media (max-width: 30rem) {

	.wp-block-recesso-digitale-flow__item-qty {
		flex: 1 0 100%;
		margin-left: 2rem;
	}
}

@media (prefers-color-scheme: dark) {

	.wp-block-recesso-digitale-flow {
		--recesso-dig-border: #3c434a;
		--recesso-dig-muted: #a7aaad;
		--recesso-dig-focus: #72aee6;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wp-block-recesso-digitale-flow * {
		transition: none !important;
	}
}
