/* Cart Relay v1.2.0 - Module 1 (cart panels) per client-approved reference:
   self-contained DARK rounded panels (#0B0B0B, radius 16). Payment methods are
   a 4-up card grid (2x2 on mobile) acting as the radio UI - real radio inputs
   are visually hidden (sr-only) inside the label cards; selected/focused card
   gets a green #3FA46A border. Relay buttons are brand-colored pills.
   Font-family still inherits from the theme.

   Hardening carried over from v1.1.3: !important on background / color /
   border / border-radius / box-shadow for panels, cards, inputs, and buttons
   so Elementor global styles (which out-rank plain class rules) never win.
   The v1.1.3 force-visible radio rules are REMOVED - radios are now
   intentionally hidden inside the cards.

   Module 2 (quick-shop grid) is untouched and keeps the flat theme-invisible
   look plus its override surface:
     --cartrelay-border   hairline/panel border color   (default rgba(0,0,0,.85))
     --cartrelay-btn-bg   solid button fill             (default #111)
     --cartrelay-btn-fg   solid button text             (default #fff)
   Legacy alias: --cartrelay-rule still feeds the border color when
   --cartrelay-border is unset.

   Success/added flash = inverted button (white bg, near-black text). Errors
   render as bold text, no red. */

.cart-relay,
.cartrelay-qs-card {
	--cr-border: var(--cartrelay-border, var(--cartrelay-rule, rgba(0, 0, 0, 0.85)));
	--cr-btn-bg: var(--cartrelay-btn-bg, #111);
	--cr-btn-fg: var(--cartrelay-btn-fg, #fff);
	font-family: inherit;
	color: inherit;
	box-sizing: border-box;
}

.cart-relay *,
.cartrelay-qs-card * {
	box-sizing: border-box;
}

/* ---------- Module 1: cart page ---------- */

/* Self-contained dark rounded panel. !important on bg/border/radius/shadow
   beats Elementor global container styling. */
.cart-relay {
	margin: 1.25em 0 0;
	padding: 20px;
	color: #fff !important;
	background: #0B0B0B !important;
	border: 0 !important;
	border-radius: 16px !important;
	box-shadow: none !important;
}

/* Panel heading: sentence case, semibold, white. */
.cart-relay .cartrelay-h {
	margin: 0 0 14px;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #fff !important;
	opacity: 1;
}

/* Method cards: 4-up grid, 2x2 on small screens. */
.cart-relay .cartrelay-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

@media (max-width: 640px) {
	.cart-relay .cartrelay-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Each card is the radio UI: label wraps a visually-hidden radio input.
   Explicit display/float/width rules kill theme label-inlining. */
.cart-relay .cartrelay-method {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 18px 12px;
	text-align: center;
	cursor: pointer;
	line-height: 1.3;
	background: #131313 !important;
	border: 1px solid #2a2a2a !important;
	border-radius: 12px !important;
	box-shadow: none !important;
}

/* Selected card = green border. Keyboard focus on the hidden radio draws the
   same green border (accessible focus indication). */
.cart-relay .cartrelay-method:has(input[type="radio"]:checked),
.cart-relay .cartrelay-method:has(input[type="radio"]:focus-visible) {
	border-color: #3FA46A !important;
}

/* Radios stay in the DOM and focusable but are visually hidden inside the
   cards (sr-only pattern, scoped to our panel). Replaces the v1.1.3
   force-visible rules, which would now conflict. */
.cart-relay .cartrelay-method input[type="radio"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

.cart-relay .cartrelay-method-icon {
	display: block;
}

.cart-relay .cartrelay-method-icon svg {
	display: block;
	width: 28px;
	height: 28px;
}

.cart-relay .cartrelay-method .cartrelay-method-label {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #fff !important;
}

.cart-relay .cartrelay-method .cartrelay-fee-note {
	display: block;
	margin: 0;
	font-size: 13px;
	color: #9a9a9a !important;
	opacity: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.cartrelay-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin: 0 0 12px;
}

@media (max-width: 480px) {
	.cartrelay-contact {
		grid-template-columns: 1fr;
	}
}

/* Contact fields, dark: !important on bg/border/radius/color beats theme form
   styling (Elementor global field skins). */
.cart-relay .cartrelay-input {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 14px;
	color: #fff !important;
	background: #131313 !important;
	border: 1px solid #2a2a2a !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

.cart-relay .cartrelay-input::placeholder {
	color: #8a8a8a !important;
	opacity: 1;
}

.cart-relay .cartrelay-input:focus-visible {
	outline: 2px solid #3FA46A;
	outline-offset: -1px;
}

/* Relay buttons: full-width brand-colored pills, icon inline-left.
   !important on fill/text/border/radius/shadow beats Elementor's global
   button selectors, which out-rank plain class rules. */
.cart-relay .cartrelay-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin: 10px 0 0;
	padding: 16px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	line-height: 1.25;
	color: #fff !important;
	background: #2A5C43 !important;
	border: 0 !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	cursor: pointer;
}

.cart-relay .cartrelay-btn svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.cart-relay .cartrelay-signal {
	background: #3A76F0 !important;
}

.cart-relay .cartrelay-telegram {
	background: #2AABEE !important;
}

/* Two-line buttons (Signal): label + helper line stacked. */
.cart-relay .cartrelay-btn-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

.cart-relay .cartrelay-btn-sub {
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.75) !important;
}

.cart-relay .cartrelay-btn:hover {
	filter: brightness(1.08);
}

.cart-relay .cartrelay-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.cart-relay .cartrelay-btn:disabled {
	opacity: 0.55;
	cursor: default;
	filter: none;
}

/* Success flash: invert - white fill, near-black text. !important parity
   (and higher specificity than the per-button color rules) so the flip wins. */
.cart-relay .cartrelay-btn.cartrelay-flipped {
	background: #fff !important;
	color: #111 !important;
}

.cart-relay .cartrelay-btn.cartrelay-flipped .cartrelay-btn-sub {
	color: rgba(17, 17, 17, 0.7) !important;
}

.cart-relay .cartrelay-status {
	margin: 12px 0 0;
	font-size: 13px;
	min-height: 1em;
	color: rgba(255, 255, 255, 0.8) !important;
}

.cart-relay .cartrelay-status.cartrelay-error {
	font-weight: 700;
	color: #fff !important;
}

.cart-relay .cartrelay-status:empty {
	margin: 0;
	min-height: 0;
}

/* ---------- Module 2: quick-shop card (inside ul.products li.product) ---------- */

li.product .cartrelay-qs-card,
.cartrelay-qs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--cr-border);
	border-radius: 0;
	box-shadow: none;
	background: inherit;
	text-align: left;
}

.cartrelay-qs-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	padding: 3px 7px;
	font: inherit;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cr-btn-fg);
	background: var(--cr-btn-bg);
}

.cartrelay-qs-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}

.cartrelay-qs-link:hover,
.cartrelay-qs-link:focus {
	color: inherit;
	text-decoration: none;
}

.cartrelay-qs-media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-bottom: 1px solid var(--cr-border);
	background: rgba(127, 127, 127, 0.12);
}

.cartrelay-qs-media img,
.cartrelay-qs-media video {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	margin: 0;
}

.cartrelay-qs-name {
	display: block;
	margin: 10px 10px 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.35;
}

.cartrelay-qs-sub {
	display: block;
	margin: 0 10px 8px;
	font-size: 10.5px;
	opacity: 0.65;
	line-height: 1.4;
}

.cartrelay-qs-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-top: auto;
	padding: 8px 10px 10px;
}

.cartrelay-qs-price {
	align-self: center;
	margin-right: auto;
	font-size: 14px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.cartrelay-qs-price del {
	opacity: 0.5;
	font-weight: 400;
}

.cartrelay-qs-price ins {
	text-decoration: none;
}

.cartrelay-qs-step {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--cr-border);
	border-radius: 0;
}

.cartrelay-qs-step button {
	width: 27px;
	padding: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	line-height: 1;
}

.cartrelay-qs-step button:focus-visible {
	outline: 2px solid var(--cr-border);
	outline-offset: -2px;
}

.cartrelay-qs-qty {
	width: 27px;
	align-self: center;
	padding: 6px 0;
	font-size: 12px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	border-left: 1px solid var(--cr-border);
	border-right: 1px solid var(--cr-border);
}

/* Same theme-proofing as .cartrelay-btn: Elementor button globals lose. */
.cartrelay-qs-card .cartrelay-qs-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: normal;
	color: var(--cartrelay-btn-fg, #fff) !important;
	background: var(--cartrelay-btn-bg, #111) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	white-space: nowrap;
}

.cartrelay-qs-card .cartrelay-qs-add:hover,
.cartrelay-qs-card .cartrelay-qs-add:focus {
	color: var(--cartrelay-btn-fg, #fff) !important;
	text-decoration: none;
	opacity: 0.85 !important;
}

.cartrelay-qs-card .cartrelay-qs-add:focus-visible {
	outline: 2px solid var(--cr-border);
	outline-offset: 2px;
}

/* Added flash: same invert treatment as the relay buttons, with
   !important parity so the flip beats the base rule. */
.cartrelay-qs-card .cartrelay-qs-add.cartrelay-flipped {
	background: var(--cartrelay-btn-fg, #fff) !important;
	color: var(--cartrelay-btn-bg, #111) !important;
	outline: 1px solid var(--cr-border);
	outline-offset: -1px;
}

@media (max-width: 640px) {
	.cartrelay-qs-media {
		aspect-ratio: 1 / 1;
	}

	.cartrelay-qs-name {
		font-size: 11px;
	}

	.cartrelay-qs-price {
		font-size: 13px;
	}

	.cartrelay-qs-add {
		padding: 0 10px;
		font-size: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cart-relay *,
	.cartrelay-qs-card * {
		transition: none !important;
		animation: none !important;
	}
}