/* ════════════════════════════════════════════════════════════════════════════
   WooCommerce Offer Pricing Pro — Frontend CSS
   6 Themes: inherit | light | dark | professional | art-floral | custom
   All colours consumed via CSS custom properties (--wop-*).
   Theme vars are injected by WOP_Theme::inject_theme_vars().

   Sizing principle:
     The form body text uses font-size: inherit so it reads at the same size
     as the rest of the host page. Earlier builds shrank everything to .88em
     – .95em which made the form noticeably smaller than surrounding copy.
     Only true micro-labels (price hints, status pills) keep a smaller size.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Fallback vars (always present) ──────────────────────────────────────── */
.wop-offer-form {
	--wop-bg:             #ffffff;
	--wop-bg2:            #f9f9f9;
	--wop-border:         #e2e8f0;
	--wop-border-focus:   #7f54b3;
	--wop-accent:         #7f54b3;
	--wop-accent-hover:   #6941a2;
	--wop-accent-text:    #ffffff;
	--wop-text:           #0f172a;
	--wop-text-muted:     #64748b;
	--wop-text-hint:      #94a3b8;
	--wop-radius:         8px;
	--wop-radius-sm:      5px;
	--wop-shadow:         0 2px 12px rgba(0,0,0,.08);
	--wop-shadow-focus:   0 0 0 3px rgba(127,84,179,.18);
	--wop-toggle-bg:      transparent;
	--wop-toggle-border:  #7f54b3;
	--wop-toggle-text:    #7f54b3;
	--wop-btn-radius:     6px;
	--wop-font:           inherit;
	--wop-font-size:      inherit;
	--wop-input-bg:       #ffffff;
	--wop-input-border:   #d0cce0;
}

/* ── [hidden] defender ───────────────────────────────────────────────────────
   HTML5 [hidden] must always defeat any explicit display: rule inside the
   form. Without this rule, .wop-btn-spinner (display: inline-flex) and
   .wop-error-msg (display: flex) ignore the hidden attribute that the JS
   sets, so the spinner spins permanently next to "Submit Offer" and the
   error icon stays on screen regardless of state. The UA stylesheet's
   built-in [hidden] { display: none } loses to our class rules because
   class selectors out-specify the attribute selector and our stylesheet
   loads later in the cascade. !important here is correct: the hidden
   attribute is a semantic "this element should not be rendered" signal
   and nothing should be allowed to override it.                            */
.wop-offer-form     [hidden],
.wop-my-offers-table [hidden] { display: none !important; }

/* ── Form wrapper ─────────────────────────────────────────────────────────── */
.wop-offer-form {
	font-family: var(--wop-font);
	font-size:   var(--wop-font-size, inherit);
	margin: 1.5em 0;
	box-sizing: border-box;
}
.wop-offer-form *, .wop-offer-form *::before, .wop-offer-form *::after { box-sizing: inherit; }

/* ── Login gate ───────────────────────────────────────────────────────────── */
.wop-offer-form--login-gate .wop-login-notice {
	padding: .8em 1.1em;
	background: var(--wop-bg2);
	border: 1px solid var(--wop-border);
	border-radius: var(--wop-radius);
	color: var(--wop-text-muted);
	font-size: inherit;
	margin: 0;
}
.wop-offer-form--login-gate a { color: var(--wop-accent); }

/* ════════════════════════════════════════════════════════════════════════════
   THEME: INHERIT
   Blends entirely with the active WordPress/WooCommerce theme.
   ════════════════════════════════════════════════════════════════════════════ */
.wop-theme-inherit .wop-offer-form .wop-toggle {
	background: transparent;
	border: 2px solid var(--wop-toggle-border);
	color: var(--wop-toggle-text);
	border-radius: var(--wop-btn-radius, 3px);
	padding: .55em 1.1em;
	font-size: inherit;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	transition: background .15s, color .15s;
}
.wop-theme-inherit .wop-offer-form .wop-toggle:hover,
.wop-theme-inherit .wop-offer-form .wop-toggle[aria-expanded="true"] {
	background: var(--wop-toggle-text);
	color: var(--wop-accent-text);
}

/* ════════════════════════════════════════════════════════════════════════════
   THEME: LIGHT
   White card, soft shadow, purple brand, spacious padding.
   ════════════════════════════════════════════════════════════════════════════ */
.wop-theme-light .wop-offer-form .wop-fields-inner {
	background: var(--wop-bg, #fff);
	border: 1px solid var(--wop-border, #e2dff0);
	border-radius: var(--wop-radius, 8px);
	padding: 22px 24px;
	box-shadow: var(--wop-shadow, 0 2px 12px rgba(127,84,179,.12));
	margin-top: 14px;
}
.wop-theme-light .wop-offer-form .wop-toggle {
	background: var(--wop-accent, #7f54b3);
	color: var(--wop-accent-text, #fff);
	border: none;
	border-radius: 40px;
	padding: .6em 1.4em;
	font-size: inherit;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .55em;
	box-shadow: 0 2px 8px rgba(127,84,179,.25);
	transition: background .18s, box-shadow .18s, transform .1s;
}
.wop-theme-light .wop-offer-form .wop-toggle:hover {
	background: var(--wop-accent-hover, #6941a2);
	box-shadow: 0 4px 14px rgba(127,84,179,.35);
}
.wop-theme-light .wop-offer-form .wop-toggle:active { transform: scale(.97); }

/* ════════════════════════════════════════════════════════════════════════════
   THEME: DARK
   Deep navy backdrop, luminous violet accent, refined spacing.
   ════════════════════════════════════════════════════════════════════════════ */
.wop-theme-dark .wop-offer-form .wop-fields-inner {
	background: var(--wop-bg, #1e1b2e);
	border: 1px solid var(--wop-border, #3a3460);
	border-radius: var(--wop-radius, 10px);
	padding: 24px 26px;
	box-shadow: var(--wop-shadow, 0 4px 24px rgba(0,0,0,.5));
	margin-top: 14px;
}
.wop-theme-dark .wop-offer-form .wop-toggle {
	background: transparent;
	border: 1.5px solid var(--wop-toggle-border, #a78fe8);
	color: var(--wop-toggle-text, #a78fe8);
	border-radius: var(--wop-btn-radius, 8px);
	padding: .6em 1.3em;
	font-size: inherit;
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .55em;
	letter-spacing: .02em;
	transition: background .18s, color .18s, border-color .18s;
}
.wop-theme-dark .wop-offer-form .wop-toggle:hover,
.wop-theme-dark .wop-offer-form .wop-toggle[aria-expanded="true"] {
	background: rgba(167,143,232,.12);
	border-color: var(--wop-accent-hover, #bfa8f0);
	color: var(--wop-accent-hover, #bfa8f0);
}
.wop-theme-dark .wop-offer-form .wop-label  { color: var(--wop-text, #e8e4f5); }
.wop-theme-dark .wop-offer-form .wop-intro  { color: var(--wop-text-muted, #b0a8d0); }
.wop-theme-dark .wop-offer-form .wop-hint   { color: var(--wop-text-hint, #7a7298); }
.wop-theme-dark .wop-offer-form .wop-optional { color: var(--wop-text-hint, #7a7298); }
.wop-theme-dark .wop-offer-form .wop-price-input,
.wop-theme-dark .wop-offer-form .wop-note-input {
	background: var(--wop-input-bg, #251f40);
	border-color: var(--wop-input-border, #4a4470);
	color: var(--wop-text, #e8e4f5);
}
.wop-theme-dark .wop-offer-form .wop-price-input:focus,
.wop-theme-dark .wop-offer-form .wop-note-input:focus {
	border-color: var(--wop-border-focus, #a78fe8);
	box-shadow: var(--wop-shadow-focus, 0 0 0 3px rgba(167,143,232,.25));
}
.wop-theme-dark .wop-offer-form .wop-currency-symbol { color: var(--wop-text-hint, #7a7298); }

/* ════════════════════════════════════════════════════════════════════════════
   THEME: PROFESSIONAL
   Corporate / B2B aesthetic. Sharp edges, deep navy, serif label.
   ════════════════════════════════════════════════════════════════════════════ */
.wop-theme-professional .wop-offer-form .wop-fields-inner {
	background: var(--wop-bg, #fff);
	border-left: 4px solid var(--wop-accent, #1d4ed8);
	border-top: 1px solid var(--wop-border, #d0d5dd);
	border-right: 1px solid var(--wop-border, #d0d5dd);
	border-bottom: 1px solid var(--wop-border, #d0d5dd);
	border-radius: 0 var(--wop-radius, 4px) var(--wop-radius, 4px) 0;
	padding: 22px 24px;
	box-shadow: var(--wop-shadow, 0 1px 4px rgba(0,0,0,.08));
	margin-top: 14px;
}
.wop-theme-professional .wop-offer-form .wop-toggle {
	background: var(--wop-accent, #1d4ed8);
	color: var(--wop-accent-text, #fff);
	border: 1px solid var(--wop-accent, #1d4ed8);
	border-radius: var(--wop-btn-radius, 3px);
	padding: .6em 1.4em;
	font-size: inherit;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	transition: background .15s;
}
.wop-theme-professional .wop-offer-form .wop-toggle:hover {
	background: var(--wop-accent-hover, #1e40af);
	border-color: var(--wop-accent-hover, #1e40af);
}
.wop-theme-professional .wop-offer-form .wop-label {
	font-family: var(--wop-font, 'Georgia', serif);
	font-size: inherit;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--wop-text, #0f172a);
}
.wop-theme-professional .wop-offer-form .wop-submit-btn {
	border-radius: var(--wop-btn-radius, 3px);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: inherit;
	font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════════════
   THEME: ART FLORAL
   Botanical aesthetic — warm ivory, dusty rose accent, soft serif voice,
   pill buttons, generous radii.
   ════════════════════════════════════════════════════════════════════════════ */
.wop-theme-art-floral .wop-offer-form .wop-fields-inner {
	background: var(--wop-bg, #fffaf5);
	border: 1px solid var(--wop-border, #f3d5b5);
	border-radius: var(--wop-radius, 12px);
	padding: 24px 26px;
	box-shadow: var(--wop-shadow, 0 4px 18px rgba(196,117,109,.15));
	margin-top: 14px;
}
.wop-theme-art-floral .wop-offer-form .wop-toggle {
	background: var(--wop-accent, #c4756d);
	color: var(--wop-accent-text, #fffaf5);
	border: none;
	border-radius: var(--wop-btn-radius, 999px);
	padding: .6em 1.6em;
	font-size: inherit;
	font-weight: 600;
	letter-spacing: .02em;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .55em;
	box-shadow: 0 3px 10px rgba(196,117,109,.25);
	transition: background .18s, box-shadow .18s, transform .1s;
}
.wop-theme-art-floral .wop-offer-form .wop-toggle:hover {
	background: var(--wop-accent-hover, #a85d56);
	box-shadow: 0 5px 14px rgba(196,117,109,.32);
}
.wop-theme-art-floral .wop-offer-form .wop-label {
	font-family: var(--wop-font, Georgia, serif);
	font-size: inherit;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--wop-text, #4a3737);
}
.wop-theme-art-floral .wop-offer-form .wop-intro {
	font-family: var(--wop-font, Georgia, serif);
	font-style: italic;
	color: var(--wop-text-muted, #8b6f6c);
}
.wop-theme-art-floral .wop-offer-form .wop-price-input,
.wop-theme-art-floral .wop-offer-form .wop-note-input {
	background: var(--wop-input-bg, #fffaf5);
	border-color: var(--wop-input-border, #e9c8a4);
	color: var(--wop-text, #4a3737);
	border-radius: var(--wop-radius-sm, 8px);
}
.wop-theme-art-floral .wop-offer-form .wop-submit-btn {
	border-radius: var(--wop-btn-radius, 999px);
	font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════════
   THEME: CUSTOM
   Inherits all spacing/typography from the variable block (built from the
   merchant's color picks). No layout overrides needed — CSS variables do
   the work, and the form body still uses the host page's font size.
   ════════════════════════════════════════════════════════════════════════════ */
.wop-theme-custom .wop-offer-form .wop-fields-inner {
	background: var(--wop-bg, #fff);
	border: 1px solid var(--wop-border, #e2e8f0);
	border-radius: var(--wop-radius, 8px);
	padding: 22px 24px;
	box-shadow: var(--wop-shadow, 0 2px 12px rgba(0,0,0,.08));
	margin-top: 14px;
}
.wop-theme-custom .wop-offer-form .wop-toggle {
	background: var(--wop-accent, #7f54b3);
	color: var(--wop-accent-text, #fff);
	border: none;
	border-radius: var(--wop-btn-radius, 6px);
	padding: .6em 1.4em;
	font-size: inherit;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .55em;
	transition: background .18s, transform .1s;
}
.wop-theme-custom .wop-offer-form .wop-toggle:hover {
	background: var(--wop-accent-hover, #6941a2);
}
.wop-theme-custom .wop-offer-form .wop-toggle:active { transform: scale(.97); }

/* ════════════════════════════════════════════════════════════════════════════
   SHARED COMPONENTS (apply to all themes)
   ════════════════════════════════════════════════════════════════════════════ */

/* Toggle icon */
.wop-toggle { display: inline-flex; align-items: center; gap: .5em; }
.wop-toggle-icon { width: 18px; height: 18px; flex-shrink: 0; transition: transform .3s; }
.wop-toggle[aria-expanded="true"] .wop-toggle-icon { transform: rotate(45deg); }

/* Fields container */
.wop-fields { margin-top: 12px; }
.wop-fields-inner { font-family: var(--wop-font); font-size: inherit; }

/* Intro text */
.wop-intro {
	color: var(--wop-text-muted);
	font-size: inherit;
	margin: 0 0 1.1em;
	line-height: 1.5;
}

/* Labels */
.wop-label {
	display: block;
	font-weight: 600;
	font-size: inherit;
	color: var(--wop-text);
	margin-bottom: .4em;
}
.wop-optional {
	font-weight: 400;
	color: var(--wop-text-hint);
	font-size: .9em;
}

/* Field row */
.wop-field-row { margin-bottom: 1.1em; }

/* Price input wrapper */
.wop-price-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.wop-currency-symbol {
	position: absolute;
	left: .75em;
	color: var(--wop-text-hint);
	font-size: inherit;
	pointer-events: none;
	user-select: none;
}
.wop-price-input {
	padding-left: 2.2em !important;
	width: 160px;
	height: 40px;
	border: 1.5px solid var(--wop-input-border, #d0cce0);
	border-radius: var(--wop-radius-sm);
	background: var(--wop-input-bg);
	color: var(--wop-text);
	font-size: inherit;
	transition: border-color .15s, box-shadow .15s;
	outline: none;
	-moz-appearance: textfield;
}
.wop-price-input::-webkit-outer-spin-button,
.wop-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wop-price-input:focus {
	border-color: var(--wop-border-focus);
	box-shadow: var(--wop-shadow-focus);
}
.wop-price-input.wop-invalid { border-color: #dc2626; }

/* Hints — kept slightly smaller because they sit *under* the input as
   ancillary text, but still readable (.9em ≈ 14px on a 16px host body). */
.wop-price-hints {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: .35em;
}
.wop-hint { font-size: .9em; color: var(--wop-text-hint); }
.wop-hint .woocommerce-Price-amount { font-size: inherit; }

/* Error messages */
.wop-error-msg {
	color: #dc2626;
	font-size: .9em;
	margin-top: .35em;
	display: flex;
	align-items: center;
	gap: .3em;
}
.wop-error-msg::before { content: '⚠'; font-size: 1em; }

/* Note textarea */
.wop-note-input {
	width: 100%;
	max-width: 420px;
	border: 1.5px solid var(--wop-input-border, #d0cce0);
	border-radius: var(--wop-radius-sm);
	background: var(--wop-input-bg);
	color: var(--wop-text);
	font-size: inherit;
	padding: .55em .75em;
	resize: vertical;
	transition: border-color .15s, box-shadow .15s;
	outline: none;
	font-family: var(--wop-font);
}
.wop-note-input:focus {
	border-color: var(--wop-border-focus);
	box-shadow: var(--wop-shadow-focus);
}

/* Terms */
.wop-terms-row .wop-terms-label {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	font-size: inherit;
	color: var(--wop-text-muted);
	cursor: pointer;
}
.wop-terms-row input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.wop-terms-label a { color: var(--wop-accent); }

/* Actions row */
.wop-form-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 1.2em;
}

/* Submit button */
.wop-submit-btn {
	background: var(--wop-accent);
	color: var(--wop-accent-text);
	border: none;
	border-radius: var(--wop-btn-radius);
	padding: .65em 1.5em;
	font-size: inherit;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .45em;
	transition: background .15s, opacity .15s, transform .1s;
	line-height: 1.4;
}
.wop-submit-btn:hover  { background: var(--wop-accent-hover); }
.wop-submit-btn:active { transform: scale(.97); }
.wop-submit-btn:disabled, .wop-submit-btn.wop-loading { opacity: .7; cursor: wait; }

/* Spinner */
.wop-btn-spinner { display: inline-flex; align-items: center; gap: .4em; }
.wop-spinner-svg { width: 16px; height: 16px; animation: wop-spin .7s linear infinite; }
@keyframes wop-spin { to { transform: rotate(360deg); } }

/* Cancel button */
.wop-cancel-btn {
	background: transparent;
	border: 1px solid var(--wop-border);
	color: var(--wop-text-muted);
	border-radius: var(--wop-btn-radius);
	padding: .6em 1.1em;
	font-size: inherit;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}
.wop-cancel-btn:hover {
	border-color: var(--wop-text-muted);
	color: var(--wop-text);
}

/* Feedback box */
.wop-feedback {
	margin-top: 1em;
	padding: .8em 1em;
	border-radius: var(--wop-radius-sm);
	font-size: inherit;
	line-height: 1.5;
	animation: wop-fadein .25s ease;
}
@keyframes wop-fadein {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}
.wop-feedback--success { background: #f0fdf4; border: 1px solid #86efac; color: #14532d; }
.wop-feedback--error   { background: #fef2f2; border: 1px solid #fca5a5; color: #7f1d1d; }

/* ── Cart offer badge ─────────────────────────────────────────────────────── */
.wop-offer-badge {
	display: inline-flex;
	align-items: center;
	margin-left: .3em;
	font-size: .75em;
	text-transform: uppercase;
	letter-spacing: .5px;
	padding: .15em .55em;
	border-radius: 20px;
	border: 1px solid var(--wop-accent, #7f54b3);
	color: var(--wop-accent, #7f54b3);
	font-weight: 700;
	vertical-align: middle;
}

/* ── My Account: status badges (reused from admin) ───────────────────────── */
.wop-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: .8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	white-space: nowrap;
}
.wop-status-pending   { background: #fef9c3; color: #713f12; }
.wop-status-accepted  { background: #dcfce7; color: #14532d; }
.wop-status-rejected  { background: #fee2e2; color: #7f1d1d; }
.wop-status-countered { background: #dbeafe; color: #1e3a8a; }
.wop-status-expired   { background: #f1f5f9; color: #475569; }
.wop-status-converted { background: #f0fdf4; color: #14532d; }

/* My Offers table */
.wop-my-offers-table { font-size: inherit; }
.wop-my-offers-table .wop-status { margin-bottom: 2px; }
.wop-my-offers-table small { color: var(--wop-text-hint, #94a3b8); font-size: .85em; }

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.wop-spinner-svg { animation: none; }
	.wop-feedback    { animation: none; }
	.wop-toggle-icon { transition: none; }
	.wop-submit-btn  { transition: none; }
}