/**
 * Right of Withdrawal — front-end styles.
 *
 * Colour comes from a small set of CSS variables set per scheme (auto/light/
 * dark). "auto" inherits the theme (transparent surface, currentColor text,
 * neutral translucent borders); light/dark use explicit palettes. The primary
 * button uses the SureCart store colour.
 */

/* ---- Scheme palettes (block + modal share these variable sets) ---- */
.sceu-row--scheme-auto {
	--sceu-text: currentColor;
	--sceu-surface: transparent;
	--sceu-border: rgba( 127, 127, 127, 0.3 );
	--sceu-field-border: rgba( 127, 127, 127, 0.45 );
}
.sceu-row--scheme-auto .sceu-row__intro {
	opacity: 0.72;
}

.sceu-row--scheme-light,
.sceu-modal--light,
.sceu-modal--auto {
	--sceu-text: #16181d;
	--sceu-muted: #5f6470;
	--sceu-surface: #ffffff;
	--sceu-border: rgba( 0, 0, 0, 0.1 );
	--sceu-field-border: rgba( 0, 0, 0, 0.22 );
}

.sceu-row--scheme-dark,
.sceu-modal--dark {
	--sceu-text: #f4f5f7;
	--sceu-muted: #a9aeb8;
	--sceu-surface: #1a1c20;
	--sceu-border: rgba( 255, 255, 255, 0.12 );
	--sceu-field-border: rgba( 255, 255, 255, 0.28 );
}

/* ---- Block container ---- */
.sceu-row {
	color: var( --sceu-text );
}

/* The Interactivity API toggles the real `hidden` attribute via
   data-wp-bind--hidden; force it to win over component display rules
   (e.g. .sceu-modal { display: flex }). */
.sceu-row [hidden] {
	display: none !important;
}

.sceu-row--card {
	background: var( --sceu-surface );
	border: 1px solid var( --sceu-border );
	border-radius: 12px;
	padding: clamp( 16px, 3vw, 22px );
}

.sceu-row--plain {
	background: none;
	border: 0;
	padding: 0;
}

/* ---- Tight row: text left, actions right ---- */
.sceu-row__notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin: 0;
}

.sceu-row__text {
	flex: 1 1 240px;
	min-width: 220px;
}

.sceu-row__heading {
	margin: 0;
}

.sceu-row__intro {
	margin: 0.3em 0 0;
	color: var( --sceu-muted, currentColor );
	line-height: 1.5;
}

.sceu-row__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* ---- Buttons ---- */
.sceu-btn {
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
}

.sceu-btn--primary,
.sceu-form__submit,
.wp-element-button.sceu-btn--primary,
.wp-block-button__link.sceu-btn--primary {
	padding: 9px 15px;
	font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
	border: none;
	background-color: var( --sceu-primary, var( --sc-color-primary-500, var( --wp--preset--color--primary, #111418 ) ) );
	color: var( --sceu-primary-text, var( --sc-color-primary-text, #ffffff ) );
}

.sceu-btn--secondary {
	padding: 9px 15px;
	background: transparent;
	color: var( --sceu-text );
	border: 1px solid var( --sceu-field-border );
}

.sceu-btn--primary:hover,
.sceu-form__submit:hover {
	filter: brightness( 0.93 );
}

.sceu-btn--secondary:hover {
	background: var( --sceu-border );
}

.sceu-form__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* ---- Status badge / pill ---- */
.sceu-badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	border: 1px solid currentColor;
}

.sceu-badge--received {
	color: #8a6d00;
}
.sceu-badge--resolved {
	color: #137333;
}
.sceu-badge--rejected {
	color: #a50e0e;
}
.sceu-row--scheme-dark .sceu-badge--received,
.sceu-modal--dark .sceu-badge--received {
	color: #f0c674;
}
.sceu-row--scheme-dark .sceu-badge--resolved,
.sceu-modal--dark .sceu-badge--resolved {
	color: #6bd193;
}
.sceu-row--scheme-dark .sceu-badge--rejected,
.sceu-modal--dark .sceu-badge--rejected {
	color: #f08a8a;
}

/* ---- Inline panel (form / requests when display = inline) ---- */
.sceu-row__panel {
	margin-top: 1em;
	padding: 1.25em;
	border: 1px solid var( --sceu-border );
	border-radius: 8px;
}

/* ---- Form ---- */
.sceu-form__status {
	min-height: 1.2em;
	margin: 0.5em 0;
}

.sceu-field {
	margin-bottom: 1em;
}

.sceu-field__label {
	display: block;
	font-weight: 500;
	margin-bottom: 0.35em;
}

.sceu-field__input {
	width: 100%;
	padding: 0.5em 0.65em;
	border: 1px solid var( --sceu-field-border );
	border-radius: 6px;
	font: inherit;
	color: inherit;
	background: transparent;
	box-sizing: border-box;
}

/* Read-only inputs (e.g. the account email) — visibly non-editable. */
.sceu-field__input--readonly {
	opacity: 0.7;
	cursor: not-allowed;
}

.sceu-orders {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.sceu-orders__item {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	padding: 0.65em 0.8em;
	border: 1px solid var( --sceu-border );
	border-radius: 6px;
	cursor: pointer;
}

.sceu-orders__cb {
	margin-top: 0.2em;
}

.sceu-orders__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sceu-orders__label {
	font-weight: 500;
}

.sceu-orders__summary {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.sceu-orders__meta {
	font-size: 0.85em;
	opacity: 0.7;
}

.sceu-form__actions {
	display: flex;
	gap: 0.75em;
	align-items: center;
	margin-top: 1em;
}

.sceu-form__cancel {
	background: none;
	border: none;
	cursor: pointer;
	font: inherit;
	color: var( --sceu-muted, currentColor );
	padding: 0.5em 0.3em;
}

.sceu-row__confirmation {
	padding: 1em 1.25em;
	border: 1px solid var( --sceu-border );
	border-radius: 8px;
}

/* ---- Requests list ---- */
.sceu-requests {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.sceu-requests__item {
	border: 1px solid var( --sceu-border );
	border-radius: 8px;
	padding: 0.7em 0.9em;
}

.sceu-requests__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75em;
}

.sceu-requests__date {
	font-size: 0.85em;
	color: var( --sceu-muted, currentColor );
	margin-top: 0.3em;
}

/* ---- Review / confirm step ---- */
.sceu-review__lead {
	margin: 0 0 1em;
}

.sceu-review__summary {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4em 1em;
}

.sceu-review__summary > div {
	display: contents;
}

.sceu-review__term {
	font-weight: 600;
	margin: 0;
}

.sceu-review__detail {
	margin: 0;
}

.sceu-review__orders {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.sceu-review__order-meta {
	font-size: 0.85em;
	opacity: 0.7;
	margin-left: 0.5em;
}

/* ---- Modal ---- */
.sceu-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 5vh 1rem;
	background: rgba( 0, 0, 0, 0.55 );
	overflow-y: auto;
}

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

.sceu-modal__dialog {
	background: var( --sceu-surface, #fff );
	color: var( --sceu-text, #16181d );
	width: 100%;
	max-width: 520px;
	border-radius: 14px;
	padding: 1.5em 1.6em 1.7em;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.3 );
}

.sceu-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 1.1em;
}

.sceu-modal__title {
	margin: 0;
}

.sceu-modal__close {
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 8px;
	border: 1px solid var( --sceu-border );
	background: transparent;
	color: var( --sceu-text );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.sceu-modal__close:hover {
	filter: brightness( 0.95 );
}

@media ( prefers-reduced-motion: no-preference ) {
	.sceu-modal__dialog {
		animation: sceu-modal-in 0.18s ease-out;
	}
	@keyframes sceu-modal-in {
		from {
			transform: translateY( 10px );
			opacity: 0;
		}
	}
}