/**
 * DP Withdrawal — frontend (customer-facing) styles.
 *
 * Customer-facing pages must look like the CLIENT's own store, not like us —
 * so this file is deliberately theme-neutral: layout/spacing + neutral greys
 * only, no DP brand colours. Buttons keep their WooCommerce `.button`
 * classes so each theme styles them natively. (DP gold/black branding lives
 * only in assets/admin.css, for the admin "Peruutukset" screen.)
 *
 * All selectors are scoped under .dp-withdrawal-* to prevent bleed.
 *
 * Per-store look (e.g. Bricks sites, which don't style `.button`) is handled
 * in that store's own theme/site CSS, not here — this stays client-agnostic.
 */

/* ---- Shared wrappers ---- */
.dp-withdrawal-form,
.dp-withdrawal-confirm,
.dp-withdrawal-success,
.dp-withdrawal-lookup {
	max-width: 640px;
	margin: 0 auto 2em;
}

/* Section headings (h3) inherit the theme — no DP band. */

/* ---- Form elements ---- */
.dp-withdrawal-form .form-row,
.dp-withdrawal-lookup .form-row {
	margin-bottom: 1.5em;
}

.dp-withdrawal-form label,
.dp-withdrawal-lookup label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}

.dp-withdrawal-form input[type="text"],
.dp-withdrawal-form textarea,
.dp-withdrawal-lookup input[type="text"],
.dp-withdrawal-lookup input[type="email"] {
	width: 100%;
	padding: 0.55em 0.75em;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1em;
	box-sizing: border-box;
}

.dp-withdrawal-form input[type="text"]:focus,
.dp-withdrawal-form textarea:focus,
.dp-withdrawal-lookup input[type="text"]:focus,
.dp-withdrawal-lookup input[type="email"]:focus {
	border-color: #888;
	outline: 2px solid rgba(0, 0, 0, 0.12);
	outline-offset: 1px;
}

/* Scope checkboxes */
.dp-withdrawal-scope-items {
	list-style: none;
	padding: 0;
	margin: 0.5em 0 0;
}

.dp-withdrawal-scope-items li {
	margin-bottom: 0.4em;
}

.dp-withdrawal-scope-items label {
	font-weight: normal;
	display: flex;
	align-items: center;
	gap: 0.5em;
}

/* ---- Acknowledgement notice (confirmation channel info) — neutral ---- */
.dp-withdrawal-confirmation-channel {
	background: #f7f7f7;
	border-left: 4px solid #d0d0d0;
	padding: 0.75em 1em;
	margin: 1em 0;
	font-size: 0.92em;
}

/* ---- Confirmation screen (Step 2) ---- */
.dp-withdrawal-confirm__summary {
	background: #f9f9f9;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 1.25em 1.5em;
	margin-bottom: 1.5em;
}

.dp-withdrawal-confirm__summary dl {
	margin: 0;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.4em 1em;
}

.dp-withdrawal-confirm__summary dt {
	font-weight: 600;
	color: #555;
}

.dp-withdrawal-confirm__summary dd {
	margin: 0;
}

/* ---- Buttons ----
   The primary/submit/confirm buttons all carry `.button woocommerce-button`,
   so each store's theme styles them natively. We add no colour here. */
.dp-withdrawal-buttons {
	display: flex;
	gap: 1em;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 1.5em;
}

/* My Account → Orders: WooCommerce renders order-action buttons inline with no
   gap, so our "Peruuta tilaus" button touches the adjacent "Katso" button.
   Scoped to our own action button class (the WC action key) so it never affects
   the theme's other buttons. */
a.button.dp_withdrawal {
	margin-left: 0.5em;
}

/* Secondary "Muokkaa" back button — it has no theme `.button` class, so give it
   a neutral, theme-agnostic outline (no DP brand colour). */
.dp-withdrawal-btn-back {
	background: none;
	border: 1px solid #767676;
	color: #444;
	padding: 0.65em 1.2em;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1em;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.dp-withdrawal-btn-back:hover,
.dp-withdrawal-btn-back:focus {
	border-color: #444;
	color: #1a1a1a;
}

/* ---- Success screen — neutral ---- */
.dp-withdrawal-success {
	background: #f6f6f6;
	border-left: 4px solid #d0d0d0;
	padding: 1.25em 1.5em;
	border-radius: 0 4px 4px 0;
}

.dp-withdrawal-success__title {
	font-size: 1.15em;
	font-weight: 700;
	margin: 0 0 0.5em;
}

/* ---- Error notice (inline) — standard error red, theme-agnostic ---- */
.dp-withdrawal-error {
	background: #fef0f0;
	border-left: 4px solid #d63638;
	padding: 0.75em 1em;
	margin-bottom: 1.25em;
	border-radius: 0 4px 4px 0;
	font-size: 0.95em;
	color: #6d2222;
}

/* ---- Order list (My Account endpoint with no specific order selected) ---- */
.dp-withdrawal-order-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.dp-withdrawal-order-list li {
	padding: 0.65em 0;
	border-bottom: 1px solid #eee;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	flex-wrap: wrap;
}

.dp-withdrawal-order-list li:last-child {
	border-bottom: none;
}

/* ---- Block editor placeholder (Gutenberg editor only — admin-side, keeps the
   DP brand accent since it is never shown to customers) ---- */
.dp-withdrawal-block-placeholder {
	border: 2px dashed #C9A227;
	border-radius: 4px;
	padding: 2em;
	text-align: center;
	color: #767676;
	background: #fafafa;
}

.dp-withdrawal-block-placeholder .dashicons {
	font-size: 2em;
	width: auto;
	height: auto;
	margin-bottom: 0.5em;
	display: block;
}