/**
 * Inline "Make an Offer" panel anchored under a theme/Elementor button (#Makeoffer).
 *
 * Presentation only — it restyles and repositions the markup that
 * templates/make-an-offer.php already outputs.
 *
 * The open/closed state is still driven by the [hidden] attribute that
 * wwo-public.js toggles, so the plugin's own Cancel handler keeps working; we
 * just render [hidden] as a collapsed (animatable) box instead of display:none.
 *
 * @package WC_Wholesale_Offers
 */

/*
 * The script inserts this after the trigger's block, climbing out of any
 * horizontal flex row first (see insertionHost) so the panel lands on its own
 * line. No flex-basis here on purpose: forcing 0 0 100% made the anchor claim
 * the full width of a nowrap row and squeeze its siblings out of view.
 */
.wwo-inline-offer-anchor {
	width: 100%;
	max-width: 100%;
	grid-column: 1 / -1;
}

/*
 * Footer staging container for the fallback render (see
 * WWO_Inline_Offer::render_staged_box). The script lifts the box out of it;
 * the explicit rule guards against themes that reset [hidden].
 */
.wwo-inline-offer-source {
	display: none !important;
}

/* ----- Container: theme tokens, and strip the default light "card" look ----- */
.wwo-offer-box.wwo-inline-offer {
	/* Brand palette. Border stays as-is — a hairline that reads on dark. */
	--wwo-io-primary: #332A28;
	--wwo-io-secondary: #F0D1AD;
	--wwo-io-light: #ffffff;
	--wwo-io-border: #FFFFFF2B;
	--wwo-io-radius: 5px;
	--wwo-io-muted: rgba(255, 255, 255, 0.72);

	margin: 10px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wwo-io-light);
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* The plugin's own trigger is replaced by #Makeoffer in inline mode. */
.wwo-offer-box.wwo-inline-offer .wwo-open-offer {
	display: none !important;
}

/* ----- The sliding panel ----- */
.wwo-inline-offer .wwo-offer-form {
	overflow: hidden;
	/* Wide enough to keep Submit/Cancel on one row, capped so it does not
	   stretch across a full-width container. */
	max-width: 420px;
	margin-top: 12px;
	padding: 16px;
	border: 1px solid var(--wwo-io-border);
	border-radius: var(--wwo-io-radius);
	background: transparent;
	max-height: 500px;
	opacity: 1;
	transition: max-height 0.3s ease, opacity 0.22s ease, margin 0.3s ease, padding 0.3s ease;
}

/*
 * Override the UA `display:none` that [hidden] normally applies so the panel
 * can animate. Keep it inert (no pointer events, no tab stops) while closed.
 */
.wwo-inline-offer .wwo-offer-form[hidden] {
	display: block !important;
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-width: 0;
	pointer-events: none;
}

/* ----- "List price: $8.00. Enter your proposed price below." ----- */
.wwo-inline-offer .wwo-offer-form__intro {
	margin: 0 0 14px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--wwo-io-muted);
}

.wwo-inline-offer .wwo-offer-form__intro .woocommerce-Price-amount,
.wwo-inline-offer .wwo-offer-form__intro bdi {
	color: var(--wwo-io-light);
}

/* ----- Amount field: separate "$" chip + input, as in the reference ----- */
.wwo-inline-offer .wwo-offer-input {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin: 0 0 14px;
	border: 0;
	border-radius: 0;
	overflow: visible;
	background: transparent;
}

.wwo-inline-offer .wwo-offer-input__symbol {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	padding: 0 10px;
	border: 1px solid var(--wwo-io-border);
	border-radius: var(--wwo-io-radius);
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	color: var(--wwo-io-light);
}

.wwo-inline-offer .wwo-offer-input input {
	width: 130px;
	padding: 9px 12px;
	border: 1px solid var(--wwo-io-border);
	border-radius: var(--wwo-io-radius);
	background: transparent;
	box-shadow: none;
	outline: none;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: var(--wwo-io-light);
}

.wwo-inline-offer .wwo-offer-input input:focus {
	border-color: var(--wwo-io-secondary);
	outline: none;
	box-shadow: none;
}

.wwo-inline-offer .wwo-offer-input input::placeholder {
	color: rgba(255, 255, 255, 0.45);
	opacity: 1;
}

/* Hide the number spinners so the field matches the flat reference look. */
.wwo-inline-offer .wwo-offer-input input::-webkit-outer-spin-button,
.wwo-inline-offer .wwo-offer-input input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wwo-inline-offer .wwo-offer-input input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* ----- Buttons: outlined by default, brand-filled on hover ----- */
.wwo-inline-offer .wwo-offer-form__buttons,
.wwo-inline-offer .wwo-offer-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
}

.wwo-inline-offer .wwo-btn {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var(--wwo-io-border) !important;
	border-radius: var(--wwo-io-radius);
	background: transparent !important;
	color: var(--wwo-io-light) !important;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wwo-inline-offer .wwo-btn:hover,
.wwo-inline-offer .wwo-btn:focus-visible {
	background: var(--wwo-io-secondary) !important;
	border-color: var(--wwo-io-secondary) !important;
	color: var(--wwo-io-primary) !important;
	opacity: 1;
}

.wwo-inline-offer .wwo-btn:disabled,
.wwo-inline-offer .wwo-btn[disabled] {
	opacity: 0.55;
	cursor: default;
	background: transparent !important;
	border-color: var(--wwo-io-border) !important;
	color: var(--wwo-io-light) !important;
}

/* The primary action reads as the primary action: brand fill from the start. */
.wwo-inline-offer .wwo-buy-agreed {
	background: var(--wwo-io-secondary) !important;
	border-color: var(--wwo-io-secondary) !important;
	color: var(--wwo-io-primary) !important;
	font-weight: 500;
}

.wwo-inline-offer .wwo-buy-agreed:hover,
.wwo-inline-offer .wwo-buy-agreed:focus-visible {
	background: var(--wwo-io-light) !important;
	border-color: var(--wwo-io-light) !important;
	color: var(--wwo-io-primary) !important;
}

/*
 * ----- Notice panel (not signed in / not approved) -----
 * Same shell as the offer form above; only the copy inside differs.
 */
.wwo-inline-offer .wwo-offer-notice__text {
	margin: 0 0 14px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--wwo-io-muted);
}

/* The call to action reads as the primary action, like "Buy now". */
.wwo-inline-offer .wwo-offer-notice__action {
	background: var(--wwo-io-secondary) !important;
	border-color: var(--wwo-io-secondary) !important;
	color: var(--wwo-io-primary) !important;
	font-weight: 700;
	text-decoration: none;
}

.wwo-inline-offer .wwo-offer-notice__action:hover,
.wwo-inline-offer .wwo-offer-notice__action:focus-visible {
	background: var(--wwo-io-light) !important;
	border-color: var(--wwo-io-light) !important;
	color: var(--wwo-io-primary) !important;
}

/* ----- Feedback line from the existing submit handler ----- */
.wwo-inline-offer .wwo-offer-message {
	margin-top: 10px;
	font-family: inherit;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--wwo-io-muted);
}

.wwo-inline-offer .wwo-offer-message--error {
	color: #ff9c9c;
}

.wwo-inline-offer .wwo-offer-message--success {
	color: var(--wwo-io-secondary);
}

/* ----- Status block (pending / countered / price agreed) ----- */
.wwo-inline-offer .wwo-offer-status {
	max-width: 420px;
	padding: 16px;
	border: 1px solid var(--wwo-io-border);
	border-radius: var(--wwo-io-radius);
	background: transparent;
	font-size: 13px;
	line-height: 1.55;
	color: var(--wwo-io-light);
}

.wwo-inline-offer .wwo-offer-status p {
	margin: 10px 0 0;
	color: var(--wwo-io-light);
}

/*
 * The base stylesheet colours this dark-on-light; on a dark section it was
 * effectively invisible.
 */
.wwo-inline-offer .wwo-offer-expiry {
	font-size: 12px;
	color: var(--wwo-io-muted) !important;
}

.wwo-inline-offer .wwo-offer-buy {
	margin-top: 14px;
}

/* ----- Status badge ----- */
.wwo-inline-offer .wwo-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--wwo-io-radius);
	background: var(--wwo-io-secondary);
	color: var(--wwo-io-primary);
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

@media (max-width: 480px) {
	.wwo-inline-offer .wwo-offer-input input {
		width: 100%;
		flex: 1 1 auto;
	}

	.wwo-inline-offer .wwo-offer-form__buttons .wwo-btn {
		flex: 1 1 auto;
		text-align: center;
	}
}