/**
 * COD Form — frontend styles.
 *
 * Minimalist Express-checkout card that inherits the active theme's
 * typography but paints its own container so the form reads as one
 * unified block regardless of theme. RTL-aware via CSS logical
 * properties + [dir="rtl"] overrides.
 */

/*
 * When our form is on the page, hide WooCommerce's stock add-to-cart
 * form so buyers see one quantity picker and one primary CTA. The
 * classic-theme hook is removed in PHP; this covers block themes and
 * the WC add-to-cart block (which the PHP hook cannot reach).
 * Our own form has class "cod-form", not "cart", so it never matches.
 */
body.cod-form-active form.cart:not(.cod-form),
body.cod-form-active .wp-block-woocommerce-add-to-cart-form,
body.cod-form-active .wc-block-add-to-cart-form {
	display: none !important;
}

/* Visually-hidden honeypot input. The standard WP screen-reader-hidden
   pattern — kept in the DOM + focusable-by-bots but zero visible size
   and no scroll overflow contribution. Replaces the old
   `left: -9999px` positioning which extended the html scroll width
   in RTL and caused a horizontal scrollbar. */
.cod-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Clip the horizontal overhang in RTL. WooCommerce's product-gallery
   FlexSlider carousel doesn't mirror properly under `dir=rtl` and can
   push a large offscreen wrapper past the viewport edge, revealing a
   whole-page horizontal scrollbar. Scoped to `body.cod-form-active`
   so we only clip on pages where our form is showing. */
[dir="rtl"] body.cod-form-active {
	overflow-x: hidden;
}

/* Phone inputs are always LTR internally — phone numbers read
   left-to-right worldwide. Under the surrounding `dir="rtl"`, the
   placeholder "مثال: 05 00 00 00 00" mixed Arabic + Latin digits
   would flip the "05 00 00 00 00" block visually (displaying as
   "00 00 00 00 05"). Setting `direction: ltr` on the input makes
   the paragraph LTR while each script's characters still render
   in their own natural direction (Arabic RTL within its run,
   digits LTR within theirs). `text-align: right` keeps the
   placeholder butted up against the icon in the RTL flex layout. */
[dir="rtl"] .cod-form input[type="tel"] {
	direction: ltr;
	text-align: right;
}
[dir="rtl"] .cod-form input[type="tel"]::placeholder {
	direction: ltr;
	text-align: right;
}

/* Two-column customer-fields layout. Grid on the form itself;
   fields flow as single-column cells, everything else (header,
   summary, delivery, variations, buttons) spans both columns via
   `grid-column: 1 / -1`. `minmax(0, 1fr)` (not plain `1fr`) is
   critical — otherwise a field's intrinsic min-content (a long
   select option, a wide input's padding) would inflate that
   column and knock the two out of balance. On narrow viewports
   (<= 640px) we collapse back to one column so nothing crushes. */
.cod-form[data-cod-field-columns="2"] {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 18px;
	max-width: 640px;
}
.cod-form[data-cod-field-columns="2"] > *:not(.cod-form__field) {
	grid-column: 1 / -1;
}
/* Textareas (multi-line input like Note) span both columns even
   though they're technically fields — they need the horizontal
   space to feel usable. */
.cod-form[data-cod-field-columns="2"] > .cod-form__field--textarea {
	grid-column: 1 / -1;
}
@media (max-width: 640px) {
	.cod-form[data-cod-field-columns="2"] {
		grid-template-columns: minmax(0, 1fr);
	}
}

.cod-form {
	--cod-form-fg: #111;
	--cod-form-muted: #6b7280;
	--cod-form-border: #e5e7eb;
	--cod-form-border-strong: #d1d5db;
	--cod-form-bg: #fff;
	--cod-form-icon-bg: #f9fafb;
	--cod-form-cta-bg: #111;
	--cod-form-cta-fg: #fff;
	--cod-form-required: #dc2626;
	--cod-form-radius: 10px;
	--cod-form-input-height: 48px;

	display: flex;
	flex-direction: column;
	gap: 18px;
	background: var(--cod-form-bg);
	color: var(--cod-form-fg);
	border: 1px solid var(--cod-form-border);
	border-radius: 14px;
	padding: 22px;
	max-width: 460px;
	margin: 20px 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.4;
}

.cod-form *,
.cod-form *::before,
.cod-form *::after {
	box-sizing: border-box;
}

/* Header */

.cod-form__header {
	text-align: center;
}

.cod-form__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--cod-form-fg);
	line-height: 1.3;
}

.cod-form__subtitle {
	font-size: 0.9rem;
	color: var(--cod-form-muted);
	margin: 0;
	font-weight: 400;
}

/* Field list */

.cod-form__fields {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: 0 0 20px;
}

.cod-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cod-form__label {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--cod-form-fg);
	margin: 0;
	line-height: 1.2;
}

.cod-form__label--sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.cod-form__req {
	color: var(--cod-form-required);
	margin-inline-start: 2px;
}

/* Input group: bordered wrap with icon on the inline-start side */

.cod-form__input-wrap {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--cod-form-border-strong);
	border-radius: var(--cod-form-radius);
	background: var(--cod-form-bg);
	overflow: hidden;
	min-height: var(--cod-form-input-height);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cod-form__input-wrap:focus-within {
	border-color: var(--cod-form-fg);
	box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06);
}

.cod-form__input-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Fixed width instead of horizontal padding so every field's icon
	   slot is the same box regardless of the glyph's intrinsic width —
	   FA icons vary from ~11px (narrow) to ~22px (wide). Vertical fills
	   the input-wrap height (min 48px). */
	width: 48px;
	background: var(--cod-form-icon-bg);
	color: var(--cod-form-fg);
	border-inline-end: 1px solid var(--cod-form-border);
	flex-shrink: 0;
}

.cod-form__input-icon > i {
	font-size: 18px;
	line-height: 1;
	width: 18px;
	text-align: center;
}

.cod-form__input-wrap > input,
.cod-form__input-wrap > select,
.cod-form__input-wrap > textarea {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 12px 14px;
	font: inherit;
	color: inherit;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
}

.cod-form .cod-form__input-wrap > textarea {
	min-height: var(--cod-form-input-height);
	height: var(--cod-form-input-height);
	resize: vertical;
	line-height: 1.5;
}

/* Native select arrow */
.cod-form__input-wrap > select {
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-inline-end: 36px;
}
[dir="rtl"] .cod-form__input-wrap > select {
	background-position: left 14px center;
	padding-inline-end: 14px;
	padding-inline-start: 36px;
}

/* Radio / checkbox groups */

.cod-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cod-form__choice {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid var(--cod-form-border-strong);
	border-radius: var(--cod-form-radius);
	background: var(--cod-form-bg);
	cursor: pointer;
	font-weight: 500;
	flex: 1 1 auto;
	min-width: 120px;
	justify-content: flex-start;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cod-form__choice:hover {
	border-color: var(--cod-form-fg);
}

.cod-form__choice input {
	margin: 0;
	accent-color: var(--cod-form-fg);
}

/* Delivery Method component — bordered card with a header row (icon +
   label always visible) and either vertical radios or a horizontal grid
   of textual buttons. Prices come from WooCommerce shipping method
   config; free-shipping-with-conditions gets a small hint under the
   label since the cart context is not available on the product page. */

.cod-form__delivery {
	--cod-delivery-fg: var(--cod-form-fg);
	--cod-delivery-bg: var(--cod-form-bg);
	--cod-delivery-border: var(--cod-form-border);
	border: 1px solid var(--cod-delivery-border);
	border-radius: var(--cod-form-radius);
	background: var(--cod-delivery-bg);
	color: var(--cod-delivery-fg);
	overflow: hidden;
}

.cod-form__delivery-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	font-weight: 600;
	border-bottom: 1px solid var(--cod-delivery-border);
	color: var(--cod-delivery-fg);
}

.cod-form__delivery-head > i {
	font-size: 18px;
	line-height: 1;
}

.cod-form__delivery-options {
	display: flex;
	padding: 6px;
	gap: 6px;
}

/* Radio (vertical) — no per-option border. */
.cod-form__delivery--radio .cod-form__delivery-options {
	flex-direction: column;
}

.cod-form__delivery--radio .cod-form__delivery-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	cursor: pointer;
	border-radius: 8px;
	background: transparent;
	color: var(--cod-delivery-fg);
	transition: background 0.15s ease;
}

.cod-form__delivery--radio .cod-form__delivery-option:hover {
	background: rgba(0, 0, 0, 0.03);
}

.cod-form__delivery--radio .cod-form__delivery-option input {
	margin: 0;
	accent-color: var(--cod-delivery-fg);
	flex-shrink: 0;
}

.cod-form__delivery--radio .cod-form__delivery-option-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cod-form__delivery--radio .cod-form__delivery-option-price {
	font-weight: 600;
	color: var(--cod-delivery-fg);
	white-space: nowrap;
}

/* Buttons (horizontal) — per-tile border, price below label. */
.cod-form__delivery--buttons .cod-form__delivery-options {
	flex-direction: row;
	flex-wrap: wrap;
}

.cod-form__delivery--buttons .cod-form__delivery-option {
	flex: 1 1 130px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	cursor: pointer;
	border-radius: 8px;
	border: 1px solid var(--cod-form-border-strong);
	background: var(--cod-delivery-bg);
	color: var(--cod-delivery-fg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cod-form__delivery--buttons .cod-form__delivery-option:hover {
	border-color: var(--cod-delivery-fg);
}

.cod-form__delivery--buttons .cod-form__delivery-option input {
	margin: 0;
	accent-color: var(--cod-delivery-fg);
	flex-shrink: 0;
}

.cod-form__delivery--buttons .cod-form__delivery-option-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cod-form__delivery--buttons .cod-form__delivery-option-price {
	font-weight: 600;
	color: var(--cod-delivery-fg);
}

.cod-form__delivery-option-title {
	font-weight: 500;
	line-height: 1.3;
}

/* Cloudflare Turnstile widget — sits just before the Order Now button
   inside the form. The widget itself renders a fixed-size iframe from
   Cloudflare; we center it in the form and add breathing room around it. */
.cod-form__turnstile {
	display: flex;
	justify-content: center;
	margin-top: 4px;
}
/* The variant-specific selectors above set display:flex on delivery
   options, which overrides the browser's built-in [hidden]{display:none}.
   Re-assert display:none so setting opt.hidden = true from JS (when the
   selected region has pickup_enabled = false, for instance) actually
   removes the option from view instead of just deselecting the radio. */
.cod-form__delivery-option[hidden] {
	display: none !important;
}

.cod-form__delivery-option-desc {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	opacity: 0.7;
	line-height: 1.35;
}

/* Quantity selector */

.cod-form__qty {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--cod-form-border-strong);
	border-radius: var(--cod-form-radius);
	overflow: hidden;
	background: var(--cod-form-bg);
}

.cod-form__qty-btn {
	flex: 0 0 48px;
	background: var(--cod-form-icon-bg);
	color: var(--cod-form-fg);
	border: 0;
	font-size: 18px;
	font-weight: 500;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

.cod-form__qty-btn:hover {
	background: #f3f4f6;
}

.cod-form__qty-btn:first-child {
	border-inline-end: 1px solid var(--cod-form-border);
}

.cod-form__qty-btn:last-child {
	border-inline-start: 1px solid var(--cod-form-border);
}

.cod-form__qty-input {
	flex: 1;
	border: 0;
	background: transparent;
	text-align: center;
	font: inherit;
	color: inherit;
	padding: 12px 8px;
	outline: none;
	appearance: textfield;
	-moz-appearance: textfield;
}

.cod-form__qty-input::-webkit-outer-spin-button,
.cod-form__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Order summary — bordered card matching the reference. Per-instance colors
   come from CSS custom properties set inline by the renderer. */

.cod-form__summary {
	--cod-summary-fg: var(--cod-form-fg);
	--cod-summary-bg: var(--cod-form-bg);
	--cod-summary-border: var(--cod-form-border);
	border: 1px solid var(--cod-summary-border);
	border-radius: var(--cod-form-radius);
	background: var(--cod-summary-bg);
	color: var(--cod-summary-fg);
	overflow: hidden;
}

.cod-form__summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
	font-size: 0.9rem;
}

/* The only separator inside the summary sits above the Total row —
   everything else reads as a clean list. */
.cod-form__summary-row--total {
	border-top: 1px solid var(--cod-summary-border);
}

/* Shipping is an added cost — surface it in red so buyers see the
   deduction from their wallet at a glance. Total stays in the summary
   foreground colour. Nested selector bumps specificity so this beats
   the generic `.cod-form__summary-value { color: var(--cod-summary-fg) }`
   rule that follows, regardless of source order. */
.cod-form__summary .cod-form__summary-value--shipping {
	color: #dc2626;
}

.cod-form__summary-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cod-summary-fg);
	opacity: 0.75;
	font-weight: 500;
}

.cod-form__summary-label > i {
	font-size: 15px;
	line-height: 1;
	width: 16px;
	text-align: center;
}

.cod-form__summary-value {
	font-weight: 500;
	color: var(--cod-summary-fg);
}

.cod-form__summary-row--total .cod-form__summary-label,
.cod-form__summary-row--total .cod-form__summary-value {
	font-weight: 700;
	opacity: 1;
	color: var(--cod-summary-fg);
	font-size: 0.95rem;
}

/* Action buttons (Order Now / Add to Cart / WhatsApp) */

.cod-form__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 20px;
	border: 0;
	border-radius: var(--cod-form-radius);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: transform 0.05s ease, opacity 0.15s ease;
	margin-top: 8px;
	box-sizing: border-box;
}

.cod-form__btn:first-of-type {
	margin-top: 4px;
}

.cod-form__btn:hover {
	opacity: 0.92;
}

.cod-form__btn:active {
	transform: translateY(1px);
}

.cod-form__btn > i {
	font-size: 16px;
	line-height: 1;
}

/* Per-field validation errors. Applied by the AJAX submit path when
   the server returns { data: { errors: { field_key: message } } } —
   the wrapper gets .cod-form__field--error and a small red message
   line is appended below the input. The palette matches the top-level
   notice banner so buyers read the two as one error family. */
.cod-form__field--error .cod-form__input-wrap {
	border-color: #dc2626;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.cod-form__field--error .cod-form__label {
	color: #991b1b;
}

.cod-form__field--radio.cod-form__field--error .cod-form__choice,
.cod-form__field--checkbox.cod-form__field--error .cod-form__choice {
	border-color: #dc2626;
}

.cod-form__field-error {
	font-size: 0.85rem;
	color: #991b1b;
	margin-top: 2px;
	line-height: 1.35;
}

/* Inline error banner shown by the AJAX submit path (bad nonce, rate
   limit, unavailable shipping, wc_create_order failure). Only styled
   when actually shown — the [hidden] attribute would normally set
   display:none, but any explicit display value (block/flex) would
   defeat that. Using :not([hidden]) keeps the box collapsed when the
   JS hasn't unhidden it, so an empty red bar never sits at the top of
   a fresh form. */
.cod-form__notice:not([hidden]) {
	display: block;
	padding: 12px 14px;
	border-radius: var(--cod-form-radius);
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
	font-size: 0.9rem;
	line-height: 1.4;
}

/* In-flight submit — dim the form and suppress interactions until the
   response lands. The Order Now button gets a spinner via the ::after
   pseudo-element; other buttons just disable. */
.cod-form--submitting {
	opacity: 0.75;
	pointer-events: none;
}

.cod-form__btn.is-loading {
	position: relative;
	color: transparent !important;
}

.cod-form__btn.is-loading > i,
.cod-form__btn.is-loading span {
	visibility: hidden;
}

.cod-form__btn.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cod-form-spin 0.7s linear infinite;
}

@keyframes cod-form-spin {
	to { transform: rotate(360deg); }
}

/* Product Variations component. Rendered by JS on init; empty on
   simple products. Uses the form-scope CSS vars for palette so it
   inherits the buyer's chosen colors. */
.cod-form__variations {
	background: var(--cod-var-bg, var(--cod-form-bg));
	color: var(--cod-var-fg, var(--cod-form-fg));
	border: 1px solid var(--cod-var-border, var(--cod-form-border));
	border-radius: var(--cod-form-radius);
	padding: 12px 14px;
}
.cod-form__variations-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-weight: 600;
}
.cod-form__variations-header i {
	color: var(--cod-form-muted);
}
.cod-form__variations-label {
	font-size: 14px;
}
.cod-form__variations-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* qty=1: one row per attribute, buttons across it. */
.cod-form__variation-piece--buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cod-form__variation-attr {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cod-form__variation-attr-label {
	font-size: 13px;
	color: var(--cod-form-muted);
}
.cod-form__variation-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.cod-form__variation-btn {
	appearance: none;
	background: #fff;
	border: 1px solid var(--cod-form-border-strong);
	border-radius: var(--cod-form-radius);
	padding: 8px 14px;
	font: inherit;
	font-size: 14px;
	color: var(--cod-form-fg);
	cursor: pointer;
	transition: border-color 120ms, background 120ms, color 120ms;
	min-width: 44px;
}
.cod-form__variation-btn:hover {
	border-color: var(--cod-form-fg);
}
.cod-form__variation-btn--selected {
	background: var(--cod-form-fg);
	color: var(--cod-form-cta-fg);
	border-color: var(--cod-form-fg);
}
.cod-form__variation-btn--oos {
	position: relative;
	color: #9ca3af;
	background: #f9fafb;
	border-style: dashed;
	cursor: not-allowed;
	text-decoration: line-through;
}
.cod-form__variation-btn--oos::after {
	content: attr(title);
	display: none;
}
.cod-form__variation-btn--unavailable {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}
.cod-form__variation-btn:disabled:hover {
	border-color: var(--cod-form-border-strong);
}

/* qty>1: numbered rows with horizontally-arranged selects. */
.cod-form__variation-piece--selects {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--cod-form-border);
	border-radius: var(--cod-form-radius);
	background: #fafafa;
}
.cod-form__variation-piece-num {
	font-weight: 600;
	color: var(--cod-form-muted);
	min-width: 26px;
	flex-shrink: 0;
}
.cod-form__variation-piece-selects {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	flex: 1;
}
.cod-form__variation-select {
	flex: 1 1 140px;
	min-width: 120px;
	height: var(--cod-form-input-height);
	padding: 0 12px;
	border: 1px solid var(--cod-form-border-strong);
	border-radius: var(--cod-form-radius);
	background: #fff;
	color: var(--cod-form-fg);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

/* Order-button lock indicator — same visual footprint as a disabled
   button but stays keyboard-focusable so the submit handler can pop
   the "pick your variations" notice instead of silently ignoring. */
.cod-form__btn--locked {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Post-submit success — modal popup (new). The old .cod-form__success
   inline card below is kept for the very short window after a redirect
   success response arrives but before navigation completes; on the
   default message-mode thank-you the popup is what buyers actually see. */
.cod-form__success-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	padding: 16px;
	animation: cod-form-overlay-in 160ms ease-out;
}
@keyframes cod-form-overlay-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.cod-form__success-card {
	position: relative;
	background: #ffffff;
	color: #111827;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
	width: 100%;
	max-width: 420px;
	padding: 40px 24px 28px;
	text-align: center;
	animation: cod-form-card-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cod-form-card-in {
	from { opacity: 0; transform: translateY(12px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.cod-form__success-close {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	color: #6b7280;
	font-size: 18px;
	line-height: 1;
	border-radius: 6px;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cod-form__success-close:hover,
.cod-form__success-close:focus-visible {
	background: #f3f4f6;
	color: #111827;
	outline: none;
}
.cod-form__success-icon {
	font-size: 56px;
	line-height: 1;
	color: #10b981;
	margin-bottom: 16px;
}
.cod-form__success-text {
	font-size: 16px;
	line-height: 1.5;
	color: #111827;
	margin-bottom: 24px;
	white-space: pre-line;
}
.cod-form__success-btn {
	appearance: none;
	border: 0;
	background: #111827;
	color: #ffffff;
	padding: 10px 28px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
	min-width: 120px;
}
.cod-form__success-btn:hover,
.cod-form__success-btn:focus-visible {
	background: #1f2937;
	outline: none;
}

/* The form beneath the popup: visible but non-interactive.
   The success is communicated by the popup itself; this state exists
   to prevent the buyer from re-typing into a form whose page-load token
   has already been consumed server-side. */
.cod-form--completed {
	opacity: 0.5;
	pointer-events: none;
	filter: grayscale(0.4);
	transition: opacity 200ms ease-out, filter 200ms ease-out;
}

/* Legacy inline success card — used only as a fallback for the brief
   window before a redirect completes. Kept minimal. */
.cod-form__success {
	text-align: center;
	padding: 32px 16px;
	color: var(--cod-form-fg);
	font-size: 1rem;
	line-height: 1.5;
	background: var(--cod-form-icon-bg);
	border-radius: var(--cod-form-radius);
}