/*
 * Sizes are px on purpose: themes that rescale the root font size
 * (e.g. html { font-size: 62.5%; } rem tricks) would shrink any rem-based UI.
 */

.euw-withdrawal {
	--euw-form-max-width: 560px;
	--euw-radius-input: 3px;
	--euw-radius-button: 3px;
	--euw-btn-primary-border-width: 0px;
	--euw-btn-confirm-border-width: 0px;
	--euw-btn-secondary-border-width: 0px;
	--euw-btn-order-action-border-width: 0px;
	--euw-btn-toggle-border-width: 0px;
	--euw-color-input-border: #ccc;
	--euw-color-input-border-focus: #2271b1;
	--euw-color-input-bg: #fff;
	--euw-color-input-text: inherit;
	--euw-color-label: inherit;
	--euw-color-heading: inherit;
	--euw-color-text: inherit;
	--euw-color-btn-primary-bg: #0f172a;
	--euw-color-btn-primary-text: #fff;
	--euw-color-btn-primary-border: #0f172a;
	--euw-color-btn-confirm-bg: #b32d2e;
	--euw-color-btn-confirm-text: #fff;
	--euw-color-btn-confirm-border: #b32d2e;
	--euw-color-btn-secondary-bg: #f1f5f9;
	--euw-color-btn-secondary-text: #334155;
	--euw-color-btn-secondary-border: #f1f5f9;
	--euw-color-accent: #2271b1;
	--euw-color-summary-bg: #f6f7f7;
	--euw-color-summary-border: #dcdcde;
	--euw-color-success: #16a34a;
	--euw-color-error: #dc3232;
	--euw-color-required: #b32d2e;
	max-width: var(--euw-form-max-width);
	margin: 0 auto;
	padding: 16px 0;
}

.euw-modal {
	--euw-radius-input: 10px;
	--euw-radius-button: 10px;
	--euw-btn-primary-border-width: 0px;
	--euw-btn-confirm-border-width: 0px;
	--euw-btn-secondary-border-width: 0px;
	--euw-btn-order-action-border-width: 0px;
	--euw-btn-toggle-border-width: 0px;
	--euw-radius-modal: 16px;
	--euw-color-input-border: #e2e8f0;
	--euw-color-input-border-focus: #3b82f6;
	--euw-color-input-bg: #fff;
	--euw-color-input-text: #334155;
	--euw-color-label: #334155;
	--euw-color-heading: #0f172a;
	--euw-color-text: #475569;
	--euw-color-btn-primary-bg: #0f172a;
	--euw-color-btn-primary-text: #fff;
	--euw-color-btn-primary-border: #0f172a;
	--euw-color-btn-confirm-bg: #dc2626;
	--euw-color-btn-confirm-text: #fff;
	--euw-color-btn-confirm-border: #dc2626;
	--euw-color-btn-secondary-bg: #f1f5f9;
	--euw-color-btn-secondary-text: #334155;
	--euw-color-btn-secondary-border: #f1f5f9;
	--euw-color-accent: #3b82f6;
	--euw-color-modal-bg: #fff;
	--euw-color-modal-backdrop: rgba(15, 23, 42, 0.6);
	--euw-color-summary-bg: #f8fafc;
	--euw-color-summary-border: #e2e8f0;
	--euw-color-text-muted: #64748b;
	--euw-color-success: #16a34a;
	--euw-color-error: #dc3232;
	--euw-color-required: #b32d2e;
}

.euw-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.euw-withdrawal h2,
.euw-modal .euw-modal__title {
	margin-bottom: 8px;
	color: var(--euw-color-heading, inherit);
}

.euw-withdrawal p,
.euw-modal .euw-withdrawal p {
	color: var(--euw-color-text, inherit);
}

.euw-form .form-row {
	margin-bottom: 16px;
}

.euw-form-row--reason-other[hidden] {
	display: none;
}

.euw-withdrawal label,
.euw-modal .euw-withdrawal label {
	display: block;
	font-weight: 600;
	margin-bottom: 5.6px;
	color: var(--euw-color-label, inherit);
}

.euw-withdrawal input[type="text"],
.euw-withdrawal input[type="email"],
.euw-withdrawal select,
.euw-withdrawal textarea,
.euw-modal .euw-withdrawal input[type="text"],
.euw-modal .euw-withdrawal input[type="email"],
.euw-modal .euw-withdrawal select,
.euw-modal .euw-withdrawal textarea {
	width: 100%;
	padding: 9.6px 12px;
	border: 1px solid var(--euw-color-input-border);
	border-radius: var(--euw-radius-input);
	background-color: var(--euw-color-input-bg);
	color: var(--euw-color-input-text, inherit);
	font-size: 15px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.euw-withdrawal textarea,
.euw-modal .euw-withdrawal textarea {
	min-height: 96px;
	resize: vertical;
}

.euw-withdrawal label .optional,
.euw-modal .euw-withdrawal label .optional {
	font-weight: 400;
	color: var(--euw-color-text-muted, #646970);
}

.euw-withdrawal input[type="text"]:focus,
.euw-withdrawal input[type="email"]:focus,
.euw-withdrawal select:focus,
.euw-withdrawal textarea:focus,
.euw-modal .euw-withdrawal input[type="text"]:focus,
.euw-modal .euw-withdrawal input[type="email"]:focus,
.euw-modal .euw-withdrawal select:focus,
.euw-modal .euw-withdrawal textarea:focus {
	border-color: var(--euw-color-input-border-focus);
	outline: none;
}

.euw-withdrawal input.euw-field-invalid,
.euw-modal .euw-withdrawal input.euw-field-invalid {
	border-color: var(--euw-color-error, #dc3232) !important;
}

.euw-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.form-row-order .euw-notice {
	margin: 5.6px 0 0;
	padding: 6.4px 9.6px;
	font-size: 13.6px;
	line-height: 1.35;
	border-radius: var(--euw-radius-input);
}

.euw-notice {
	padding: 12px 16px;
	margin: 16px 0;
	border-radius: var(--euw-radius-input);
}

.euw-notice--success {
	background: #edfaef;
	border: 1px solid #46b450;
}

.euw-notice--warning {
	background: #fff8e5;
	border: 1px solid #ffb900;
}

.euw-notice--error {
	background: #fef1f1;
	border: 1px solid var(--euw-color-error, #dc3232);
}

.euw-notice--info {
	background: #f0f6fc;
	border: 1px solid #72aee6;
}

.euw-summary dt {
	font-weight: 600;
	margin-top: 12px;
}

.euw-summary dd {
	margin: 4px 0 0;
}

.euw-withdrawal .button.euw-continue,
.euw-withdrawal .button.euw-confirm,
.euw-modal .button.euw-continue,
.euw-modal .button.euw-confirm {
	border: var(--euw-btn-confirm-border-width) solid var(--euw-color-btn-confirm-border);
	border-radius: var(--euw-radius-button);
	background: var(--euw-color-btn-confirm-bg) !important;
	color: var(--euw-color-btn-confirm-text) !important;
	font-weight: 600;
}

.euw-withdrawal .button.euw-continue,
.euw-modal .button.euw-continue {
	border-width: var(--euw-btn-primary-border-width);
	border-color: var(--euw-color-btn-primary-border);
	background: var(--euw-color-btn-primary-bg) !important;
	color: var(--euw-color-btn-primary-text) !important;
}

.euw-withdrawal .button.euw-back,
.euw-modal .button.euw-back {
	border: var(--euw-btn-secondary-border-width) solid var(--euw-color-btn-secondary-border);
	border-radius: var(--euw-radius-button);
	background: var(--euw-color-btn-secondary-bg) !important;
	color: var(--euw-color-btn-secondary-text) !important;
	font-weight: 600;
}

.euw-continue:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.euw-legal-notice {
	padding: 14px 16px;
	margin: 20px 0;
	background: var(--euw-color-summary-bg);
	border: 1px solid var(--euw-color-summary-border);
	border-left: 4px solid var(--euw-color-accent);
	border-radius: var(--euw-radius-input);
	font-size: 15.2px;
	line-height: 1.5;
	color: var(--euw-color-text, inherit);
}

.euw-back {
	margin-right: 4px;
}

.euw-summary {
	background: var(--euw-color-summary-bg);
	border: 1px solid var(--euw-color-summary-border);
	border-radius: var(--euw-radius-input);
	padding: 14px 16px;
}

.euw-confirmed {
	padding: 16px;
	background: #edfaef;
	border: 1px solid #46b450;
	border-radius: var(--euw-radius-input);
}

.required {
	color: var(--euw-color-required);
}

.euw-footer-link {
	text-align: center;
	margin: 16px 0;
}

.euw-footer-link a {
	text-decoration: underline;
}

.euw-open-withdrawal,
.euw-open-withdrawal a {
	cursor: pointer;
}

body.euw-modal-open {
	overflow: hidden;
}

.euw-modal[hidden] {
	display: none !important;
}

.euw-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.euw-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--euw-color-modal-backdrop);
	backdrop-filter: blur(4px);
}

.euw-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: min(90vh, 720px);
	background: var(--euw-color-modal-bg);
	border-radius: var(--euw-radius-modal);
	box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.06);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: euw-modal-in 0.22s ease-out;
}

@keyframes euw-modal-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.euw-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px 0;
	flex-shrink: 0;
}

.euw-modal__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.euw-modal button.euw-modal__close {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background-color: #e2e8f0 !important;
	color: #334155 !important;
	cursor: pointer;
	display: grid;
	place-items: center;
	gap: 0 !important;
	appearance: none;
	-webkit-appearance: none;
	text-transform: none;
	font-size: inherit;
	line-height: 0;
	font-weight: 400;
	box-shadow: none;
	transition: background-color 0.15s ease;
	--btn-color: #334155;
	--btn-color-hover: #0f172a;
	--btn-bgcolor: #e2e8f0;
	--btn-bgcolor-hover: #cbd5e1;
	--btn-transform: none;
	--btn-height: auto;
	--btn-padding: 0;
	--btn-font-size: inherit;
	--btn-font-weight: 400;
	--btn-brd-width: 0;
}

.euw-modal button.euw-modal__close svg {
	display: block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	fill: none;
}

.euw-modal button.euw-modal__close:hover,
.euw-modal button.euw-modal__close:focus {
	background-color: #cbd5e1 !important;
}

.euw-modal button.euw-modal__close:hover svg path,
.euw-modal button.euw-modal__close:focus svg path {
	stroke: #0f172a;
}

.euw-modal__body {
	overflow-y: auto;
	padding: 16px 24px 24px;
}

.euw-modal .euw-withdrawal {
	max-width: none;
	margin: 0;
	padding: 0;
}

.euw-modal #euw-panel-details > h2,
.euw-modal #euw-panel-review > h2,
.euw-modal #euw-panel-confirmed > h2 {
	display: none;
}

.euw-modal .button,
.euw-modal .euw-continue,
.euw-modal .euw-confirm,
.euw-modal .euw-back {
	padding: 10.4px 18px;
	font-size: 15px;
	width: auto;
	min-width: 0;
}

.euw-modal .euw-summary dt:first-child {
	margin-top: 0;
}

.euw-confirmed-panel {
	text-align: center;
	padding: 16px 0 8px;
}

.euw-confirmed-icon {
	color: var(--euw-color-success);
	margin-bottom: 12px;
}

.euw-confirmed-panel h2 {
	margin: 0 0 8px;
	font-size: 20px;
	color: var(--euw-color-heading, #0f172a);
}

.euw-confirmed-message {
	margin: 0 0 16px;
	color: var(--euw-color-text, #475569);
	line-height: 1.5;
}

.euw-confirmed-ref {
	margin: 0;
	font-size: 14px;
	color: var(--euw-color-text, #64748b);
}

.euw-modal--confirmed .euw-modal__title {
	color: var(--euw-color-success);
}

.euw-my-account-action {
	margin: 0 0 24px;
}

.euw-my-account-action__link {
	font-weight: 600;
	text-decoration: none;
}

.euw-my-account-action__link:hover {
	text-decoration: underline;
}

.euw-my-account-endpoint {
	margin-bottom: 24px;
}

/*
 * My Account single-order action button, matches the sibling WC order actions
 * (e.g. invoice). No border is declared on purpose: the button must inherit the
 * active theme's own .button styling. An explicit border is only emitted inline
 * when the appearance setting asks for one (EUW_My_Account::get_order_action_button_css).
 *
 * Keep in sync with EUW_My_Account::get_order_action_button_css(), which prints the
 * same layout rules inline on the view-order screen (this stylesheet is only loaded
 * when the modal is in play).
 */
a.button.eu-withdrawal.order-actions-button,
.button.eu-withdrawal.order-actions-button {
	box-sizing: border-box;
	/* Narrow action cells (mobile) must not be overflowed by a long label. */
	max-width: 100%;
	white-space: normal;
	overflow-wrap: break-word;
	vertical-align: middle;
	/* Vertical breathing room so wrapped actions never touch the action below.
	   In px, not em: sibling actions are often icon-only buttons that themes
	   collapse with font-size: 0 to hide the label, and an em margin on those
	   resolves to 0. */
	margin-block: 3px;
	/* No trailing margin: the actions cell is usually end-aligned, so a trailing
	   margin would push this button out of line with the sibling actions once they
	   wrap onto separate rows. The gap between actions is added on the leading edge
	   of the following action instead, where it cannot affect that alignment. */
	margin-inline-end: 0;
}

/*
 * Spacing for the whole action group (order again, withdrawal, invoice, tracking…).
 * Themes tend to space these per button (e.g. .button:first-child { margin-right }),
 * which produces uneven gaps as soon as another plugin appends an action. Reset the
 * inline margins for the group and re-apply a single gap on the leading edge of each
 * following action: even spacing in a row, and no offset once the actions stack.
 */
:has(> .button.eu-withdrawal.order-actions-button) > .button {
	margin-block: 3px;
	margin-inline: 0;
}

:has(> .button.eu-withdrawal.order-actions-button) > .button + .button,
.button.eu-withdrawal.order-actions-button + .button,
.button + .button.eu-withdrawal.order-actions-button {
	margin-inline-start: 6px;
}